/* The eva shell: the sidebar on the left, the page on the right. Every page of a workspace loads this file and shell.js.
   Rules (AGENTS.md): Arial only, the 3 font sizes, color means state, page tokens only, light and dark. */
:root {
  --bg: #EEF0EE; --card: #FFFFFF; --ink: #0C1C25; --muted: #5A6A72; --line: #DDE2E1;
  --accent: #1D6FE6; --accent-soft: #E3EDFC; --ok: #2A9D4A; --risk: #E07A12; --bad: #D64550; --off: #A9B3B8; --lane: #F5F7F6;
  --font: Arial, sans-serif; --fs-small: 12px; --fs-base: 14px; --fs-large: 18px;
  --side-w: 216px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1419; --card: #131F26; --ink: #E4EBEE; --muted: #8C9CA4; --line: #24333B;
    --accent: #5B9BF5; --accent-soft: #1A2C44; --ok: #4CC06C; --risk: #F2994A; --bad: #EE6B74; --off: #5C6A71; --lane: #17242B;
  }
  body.shell, body.auth { color-scheme: dark; }
}
:root[data-theme="dark"] {
  --bg: #0B1419; --card: #131F26; --ink: #E4EBEE; --muted: #8C9CA4; --line: #24333B;
  --accent: #5B9BF5; --accent-soft: #1A2C44; --ok: #4CC06C; --risk: #F2994A; --bad: #EE6B74; --off: #5C6A71; --lane: #17242B;
}

html { height: 100%; }
body.shell, body.shell *, body.auth, body.auth * { box-sizing: border-box; }
body.shell { margin: 0; height: 100%; display: flex; background: var(--bg); color: var(--ink); font: var(--fs-base)/1.45 var(--font); }
.shell-main { flex: 1; min-width: 0; height: 100%; overflow: auto; position: relative; }

/* ---------- The sidebar ---------- */
.side { flex: none; width: var(--side-w); height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 10px 8px;
        background: var(--card); border-right: 1px solid var(--line); overflow: auto; font: var(--fs-base)/1.35 var(--font); }
.side button { font: inherit; color: inherit; }
.side a:focus-visible, .side button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sb-pop { position: relative; }
.sb-ws, .sb-user { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px;
                   background: none; cursor: pointer; text-align: left; }
.sb-ws:hover, .sb-user:hover, .sb-ws[aria-expanded="true"], .sb-user[aria-expanded="true"] { background: var(--lane); }
.sb-mark { flex: none; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: var(--ink); color: var(--card); font-weight: 700; }
.sb-two { flex: 1; min-width: 0; display: grid; }
.sb-two b, .sb-two span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-two b { font-weight: 600; }
.sb-two span { color: var(--muted); font-size: var(--fs-small); }
.sb-caret { flex: none; color: var(--muted); font-size: var(--fs-small); }
.sb-menu { position: absolute; left: 0; right: 0; z-index: 20; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px;
           box-shadow: 0 6px 20px rgba(12, 28, 37, .14); display: grid; gap: 1px; }
.sb-menu[hidden] { display: none; }
.sb-pop.top .sb-menu { top: calc(100% + 4px); }
.sb-pop.bottom .sb-menu { bottom: calc(100% + 4px); }
.sb-menu a, .sb-menu button { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 4px; background: none; color: var(--ink);
                              text-decoration: none; text-align: left; cursor: pointer; width: 100%; }
.sb-menu a:hover, .sb-menu button:hover { background: var(--lane); }
.sb-menu .sb-cur::after { content: "✓"; margin-left: auto; color: var(--muted); }
.sb-menu .sb-note { padding: 4px 8px 6px; color: var(--muted); font-size: var(--fs-small); }
.sb-menu hr { border: 0; border-top: 1px solid var(--line); margin: 3px 0; width: 100%; }
.sb-nav { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sb-group { margin: 12px 8px 4px; color: var(--muted); font-size: var(--fs-small); }
.sb-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--muted); text-decoration: none; }
.sb-item:hover { background: var(--lane); color: var(--ink); }
.sb-item.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.sb-item .sb-n { margin-left: auto; font-size: var(--fs-small); font-weight: 400; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.sb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--off); flex: none; }
.sb-dot.risk { background: var(--risk); } .sb-dot.bad { background: var(--bad); } .sb-dot.ok { background: var(--ok); }
.sb-toggle { display: none; }

/* Phones: the sidebar folds into a top bar; the menu button opens it. */
@media (max-width: 760px) {
  body.shell { flex-direction: column; height: auto; min-height: 100%; }
  .shell-main { height: auto; flex: 1; overflow: visible; }
  .side { width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 16px; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .side .sb-pop.top { flex: 1; min-width: 0; }
  .sb-toggle { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer; }
  .side .sb-nav, .side .sb-pop.bottom { display: none; flex-basis: 100%; }
  .side.open .sb-nav, .side.open .sb-pop.bottom { display: flex; }
  .side.open .sb-pop.bottom { display: block; }
  .sb-pop.bottom .sb-menu { bottom: auto; top: calc(100% + 4px); }
}

/* ---------- The eva chat (eva-chat.js): on the right on a wide screen; on a phone it covers the screen ---------- */
.ec { flex: none; width: 340px; height: 100%; display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--line); font: var(--fs-base)/1.45 var(--font); min-width: 0; }
.ec button, .ec textarea, .ec-fab { font: inherit; color: var(--ink); }
.ec.ec-in { width: 100%; height: 100%; border-left: 0; background: transparent; }
.ec-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ec-title { flex: 1; min-width: 0; display: grid; }
.ec-sub { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-q { padding: 4px 8px; font-size: var(--fs-small) !important; border: 1px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer; }
.ec-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ec-hint { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.ec-m { max-width: 92%; padding: 8px 10px; border-radius: 8px; display: grid; gap: 6px; overflow-wrap: anywhere; }
.ec-m.you { align-self: flex-end; background: var(--accent-soft); }
.ec-m.eva { align-self: flex-start; background: var(--lane); border: 1px solid var(--line); }
.ec-m.bad { border-color: var(--risk); }
.ec-m.wait { color: var(--muted); font-size: var(--fs-small); }
.ec-t { white-space: pre-wrap; }
.ec-act { border: 1px solid var(--accent); border-radius: 6px; padding: 8px; background: var(--card); display: grid; gap: 6px; }
.ec-act.done { border-color: var(--ok); } .ec-act.failed { border-color: var(--bad); } .ec-act.declined { border-style: dashed; border-color: var(--line); color: var(--muted); }
.ec-st { font-size: var(--fs-small); color: var(--muted); }
.ec-act.failed .ec-st { color: var(--bad); }
.ec-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ec-do, .ec-send { padding: 5px 12px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff !important; font-weight: 600; cursor: pointer; }
.ec-do:disabled, .ec-send:disabled, .ec-q:disabled { opacity: .6; cursor: default; }
.ec-form { display: grid; gap: 6px; padding: 10px 12px 4px; border-top: 1px solid var(--line); }
.ec-form textarea { width: 100%; resize: vertical; min-height: 56px; max-height: 40vh; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.ec-err { flex: 1; min-width: 0; color: var(--bad); font-size: var(--fs-small); }
/* The item that the next message is about: a chip over the text field. */
.ec-about { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; justify-self: start; padding: 3px 4px 3px 8px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); font-size: var(--fs-small); }
.ec-about[hidden] { display: none; }
.ec-about span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-about button { flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; line-height: 1; }
.ec-about button:hover, .ec-about button:focus-visible { background: var(--card); }
.ec-on-item { color: var(--muted); font-size: var(--fs-small); }
.ec-fab { position: fixed; right: 16px; bottom: 16px; z-index: 40; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
          box-shadow: 0 4px 14px rgba(12, 28, 37, .14); }
.ec :focus-visible, .ec-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) {
  .ec { position: fixed; inset: 0; z-index: 60; width: auto; height: 100%; border-left: 0; }
  body.shell.ec-on { overflow: hidden; }
}

/* ---------- Plain pages inside the shell (Set up, Members, Settings) ---------- */
.page { max-width: 760px; margin: 0 auto; padding: 18px 16px 48px; display: grid; gap: 14px; }
.page h1 { font-size: var(--fs-large); margin: 0; }
.page h2 { font-size: var(--fs-large); margin: 0 0 4px; }
.page h3 { font-size: var(--fs-base); margin: 14px 0 6px; }
.page p { margin: 6px 0; }
.page a { color: var(--accent); }
.page .muted { color: var(--muted); }
.page .small { font-size: var(--fs-small); }
.page .card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.page form { display: grid; gap: 10px; margin-top: 12px; }
.page label { display: grid; gap: 4px; font-size: var(--fs-small); color: var(--muted); }
.page input, .page select { font: var(--fs-base) var(--font); padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--ink); width: 100%; }
.page select.inline { width: auto; padding: 4px 6px; }
.page input:focus-visible, .page select:focus-visible, .page button:focus-visible, .page a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page button { font: var(--fs-base) var(--font); cursor: pointer; padding: 8px 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.page button.primary, .page a.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.page a.primary { display: inline-block; padding: 8px 14px; border-radius: 4px; text-decoration: none; }
.page button.quiet { padding: 4px 8px; font-size: var(--fs-small); }
.page button:disabled { opacity: .6; cursor: default; }
.page .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page .err { color: var(--bad); font-size: var(--fs-small); min-height: 1em; }
.page .code { display: flex; gap: 8px; align-items: stretch; margin: 6px 0; }
.page .code code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: var(--lane); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; font: var(--fs-small) var(--font); }
.page .list { display: grid; margin-top: 8px; }
.page .li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); min-width: 0; }
.page .li .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page .li .meta { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.page .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--off); flex: none; }
.page .dot.ok { background: var(--ok); } .page .dot.risk { background: var(--risk); } .page .dot.bad { background: var(--bad); }
.page .pill { font-size: var(--fs-small); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
[hidden] { display: none !important; }

/* The setup checklist */
.steps-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.steps-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.steps-list .n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: var(--fs-small); flex: none; color: var(--muted); }
.steps-list li.done .n { background: var(--ok); border-color: var(--ok); color: #fff; }
.steps-list li.cur .n { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.steps-list .t { flex: 1; min-width: 0; }
.steps-list .t b { display: block; font-weight: 600; }
.steps-list li.done .t b { font-weight: 400; }
.steps-list .t span { color: var(--muted); font-size: var(--fs-small); }

/* ---------- The auth page (no sidebar) ---------- */
body.auth { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font: var(--fs-base)/1.45 var(--font); display: grid; place-items: start center; }
body.auth .page { width: min(440px, 100%); padding-top: 12vh; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-large); }

/* The company lookup on /create-workspace: a list under the name field. One line per row; the last row is "Other". */
.sg { position: relative; display: grid; gap: 4px; }
.sg > p { margin: 0; min-height: 1em; }
.sg-pop { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: -2px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.sg-note { margin: 0; padding: 6px 10px; color: var(--muted); font-size: var(--fs-small); border-bottom: 1px solid var(--line); }
.sg-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.sg-list li { display: grid; padding: 7px 10px; cursor: pointer; min-width: 0; border-top: 1px solid var(--line); }
.sg-list li:first-child { border-top: 0; }
.sg-list li:hover, .sg-list li[aria-selected="true"] { background: var(--accent-soft); }
.sg-t, .sg-d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-d { color: var(--muted); font-size: var(--fs-small); }
.muted:empty { display: none; }