/* ============================================================
   FSI Crew Lookup — "call sheet" theme
   Warm paper stock, FSI green signal accent, Mr Eaves display face.
   Light by default; follows the OS, overridable via [data-theme].
   Deliberately distinct from packcheck (terracotta) — this is green.
   ============================================================ */

/* FSI brand face — Mr Eaves XL Sans Narrow (Emigre). */
@font-face {
  font-family: "Mr Eaves";
  src: url("/static/fonts/MrEavesXLSanNar-Reg.otf") format("opentype");
  font-weight: 400 550; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mr Eaves";
  src: url("/static/fonts/MrEavesXLSanNar-Bold.otf") format("opentype");
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mr Eaves";
  src: url("/static/fonts/MrEavesXLSanNar-Heavy.otf") format("opentype");
  font-weight: 800 900; font-style: normal; font-display: swap;
}

:root {
  --bg: #f4f1ea;
  --panel: #fffefb;
  --panel-2: #ebe6db;
  --line: #ddd6c8;
  --line-strong: #cabfa9;
  --ink: #1b1d1a;
  --muted: #6f6d64;
  --accent: #0a7a5e;
  --accent-2: #086349;
  --accent-soft: rgba(10,122,94,0.10);
  --accent-ink: #f5fbf8;
  --user-bubble: rgba(10,122,94,0.09);
  --good: #1f7a4d;
  --warn: #a4691a;
  --bad: #bb3a2b;
  --shadow: 0 1px 2px rgba(40,36,20,0.06), 0 6px 20px rgba(40,36,20,0.05);
  --shadow-lg: 0 24px 60px rgba(40,28,14,0.20);
  --radius: 10px;
  --radius-sm: 7px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Mr Eaves", var(--sans);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12140f;
    --panel: #191c15;
    --panel-2: #21251c;
    --line: #2d3126;
    --line-strong: #3c4234;
    --ink: #ecebe2;
    --muted: #9a988c;
    --accent: #3fb389;
    --accent-2: #57c79d;
    --accent-soft: rgba(63,179,137,0.14);
    --accent-ink: #07130d;
    --user-bubble: rgba(63,179,137,0.13);
    --good: #4ecb8a;
    --warn: #e6b04b;
    --bad: #ff6f5f;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.28);
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  }
}
:root[data-theme="dark"] {
  --bg: #12140f; --panel: #191c15; --panel-2: #21251c; --line: #2d3126;
  --line-strong: #3c4234; --ink: #ecebe2; --muted: #9a988c;
  --accent: #3fb389; --accent-2: #57c79d; --accent-soft: rgba(63,179,137,0.14);
  --accent-ink: #07130d; --user-bubble: rgba(63,179,137,0.13);
  --good: #4ecb8a; --warn: #e6b04b; --bad: #ff6f5f;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.28);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
}

* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 0.86em; background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 1.1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 0.55rem; color: var(--ink); font-family: var(--display); }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 17px; font-weight: 800;
}
.brand-name { font-size: 1.28rem; font-weight: 800; letter-spacing: 0.01em; }
.brand-tag { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; align-self: center; }
.topnav { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.navlink { padding: 5px 10px; border-radius: var(--radius-sm); color: var(--muted); font-size: 0.9rem; }
.navlink:hover { color: var(--ink); background: var(--panel-2); text-decoration: none; }
.inline { display: inline; margin: 0; }
.link { background: none; border: none; color: var(--muted); font: inherit; cursor: pointer; padding: 5px 10px; border-radius: var(--radius-sm); }
.link:hover { color: var(--bad); background: var(--panel-2); }
.theme-toggle {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius-sm); cursor: pointer; width: 34px; height: 30px; font-size: 14px;
}
.theme-toggle:hover { border-color: var(--line-strong); color: var(--accent); }
.ico-moon { display: none; } .ico-sun { display: inline; }
:root[data-theme="dark"] .ico-moon, @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ico-moon { display: inline; } }
:root[data-theme="dark"] .ico-sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ico-sun { display: none; } }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); display: inline-block; }
.status-dot.err { background: var(--bad); }

/* ---------- generic page wrap (auth / account / users) ---------- */
.wrap { max-width: 920px; margin: 0 auto; padding: 1.6rem 1.1rem 3rem; }
.foot { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 1.5rem 1rem 2rem; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow); }
.muted { color: var(--muted); }
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent-2);
  padding: 8px 16px; border-radius: var(--radius-sm); font: inherit; font-weight: 600;
}
.btn:hover { background: var(--accent-2); text-decoration: none; }
.btn.secondary { background: var(--panel-2); color: var(--ink); border-color: var(--line); font-weight: 500; }
.btn.secondary:hover { border-color: var(--line-strong); }
.btn.danger { background: transparent; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 11px; font: inherit;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
label { display: block; font-size: 0.85rem; color: var(--muted); margin: 0.9rem 0 0.3rem; }
.field-row { display: flex; gap: 0.6rem; align-items: end; flex-wrap: wrap; }
.notice { padding: 9px 13px; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.9rem; }
.notice.ok { background: var(--accent-soft); color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.notice.warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.notice.err { background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); }

/* auth cards */
.auth-shell { min-height: calc(100vh - 52px); display: grid; place-items: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { font-size: 1.6rem; margin: 0 0 0.2rem; }
.auth-card .sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 1.2rem; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 1.2rem; }
.auth-links { margin-top: 1rem; font-size: 0.85rem; text-align: center; }

/* users table */
table.users { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.users th, table.users td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.users th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 100px; font-size: 0.75rem; border: 1px solid var(--line); }
.pill.admin { background: var(--accent-soft); color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.pill.pending { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.pill.off { color: var(--muted); }

/* ============================================================
   Chat app (index)
   ============================================================ */
.app { display: flex; flex-direction: column; height: 100vh; }
.chat-scroll { flex: 1; overflow-y: auto; }
.chat-inner { max-width: 800px; margin: 0 auto; padding: 1.4rem 1.1rem 1rem; display: flex; flex-direction: column; gap: 1rem; }

.hero { text-align: center; padding: 2.4rem 1rem 1rem; }
.hero .mark { font-size: 2rem; color: var(--accent); opacity: 0.85; }
.hero h2 { font-size: 1.5rem; margin: 0.6rem 0 0.2rem; }
.hero p { color: var(--muted); font-size: 0.92rem; margin: 0; }

.msg-user { display: flex; justify-content: flex-end; }
.msg-user .bubble {
  background: var(--user-bubble); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 13px 13px 3px 13px; padding: 9px 14px; max-width: 80%; font-size: 0.93rem;
}
.msg-ai { display: flex; gap: 10px; align-items: flex-start; }
.ai-badge {
  width: 34px; height: 34px; min-width: 34px; border-radius: 8px; margin-top: 2px;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 12px;
}
.msg-ai .bubble {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 3px 13px 13px 13px; padding: 12px 15px; flex: 1; box-shadow: var(--shadow);
}
.bubble h3 { font-size: 0.95rem; margin: 0.7rem 0 0.35rem; color: var(--accent-2); }
.bubble h3:first-child { margin-top: 0; }
.bubble p { margin: 0 0 0.5rem; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul { margin: 0.2rem 0 0.6rem; padding-left: 1.15rem; }
.bubble li { margin-bottom: 0.2rem; }
.bubble hr { border: none; border-top: 1px solid var(--line); margin: 0.7rem 0; }
.bubble strong { font-weight: 700; }

.dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 3px; animation: blink 1.2s ease-in-out infinite; opacity: 0.3; }
.dots span:nth-child(2) { animation-delay: 0.2s; } .dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%,80%,100% { opacity: 0.25; transform: scale(0.8);} 40% { opacity: 1; transform: scale(1);} }
.thinking { font-size: 0.8rem; font-style: italic; color: var(--muted); }

.action-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.action-btn { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 8px; padding: 6px 13px; font-size: 0.83rem; font-family: var(--mono); color: var(--accent-2); cursor: pointer; text-align: left; }
.action-btn:hover { background: var(--accent); color: var(--accent-ink); }
.email-btn { background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: 0.82rem; color: var(--muted); cursor: pointer; margin-top: 9px; }
.email-btn:hover { border-color: var(--accent); color: var(--accent); }
.divider { text-align: center; font-size: 0.72rem; color: var(--muted); padding: 6px 0; border-top: 1px solid var(--line); margin: 2px 0; }

/* input bar */
.input-bar { border-top: 1px solid var(--line); background: var(--panel); }
.input-inner { max-width: 800px; margin: 0 auto; padding: 0.7rem 1.1rem 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; }
.ctx-bar { display: none; align-items: center; gap: 10px; }
.ctx-bar.on { display: flex; }
.ctx-label { font-family: var(--mono); font-size: 0.76rem; color: var(--accent-2); }
.ctx-clear { background: transparent; border: 1px solid var(--line); border-radius: 100px; padding: 2px 10px; font-size: 0.72rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.ctx-clear:hover { border-color: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 100px; padding: 3px 11px; font-size: 0.78rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.query-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.8rem 0.5rem; }
.query-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#qi { width: 100%; background: transparent; border: none; outline: none; color: var(--ink); font: inherit; resize: none; min-height: 42px; }
#qi::placeholder { color: var(--muted); opacity: 0.7; }
.query-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 0.5rem; }
.query-hint { font-size: 0.72rem; color: var(--muted); }
.ask-btn { background: var(--accent); color: var(--accent-ink); border: none; border-radius: var(--radius-sm); padding: 7px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.ask-btn:hover { background: var(--accent-2); }
.ask-btn:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 560px) {
  .brand-tag { display: none; }
  .query-hint { display: none; }
}