/* Freshfront app tokens (design.md §2). Light by default, dark via OS setting or data-theme. */
:root {
  --bg:#F7F8FA; --surface:#FFFFFF; --surface-2:#EEF1F5; --border:#D9DEE5;
  --text:#121821; --muted:#5B6676; --brand:#2F5BEA; --on-brand:#FFFFFF;
  --ok:#176B47; --wait:#8A5B12; --bad:#C2362F; --info:#0B6676; /* darkened in step 7 so 12px pill text passes AA */
  --r-sm:6px; --r-md:10px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0E1116; --surface:#161B22; --surface-2:#1E242D; --border:#2A313C;
    --text:#E6EAF0; --muted:#94A0B2; --brand:#6E8FFF; --on-brand:#0E1116;
    --ok:#3CCB8A; --wait:#E7B355; --bad:#FF6B62; --info:#4CC3D9; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0E1116; --surface:#161B22; --surface-2:#1E242D; --border:#2A313C;
  --text:#E6EAF0; --muted:#94A0B2; --brand:#6E8FFF; --on-brand:#0E1116;
  --ok:#3CCB8A; --wait:#E7B355; --bad:#FF6B62; --info:#4CC3D9; color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin:0; font:400 14px/1.45 var(--font); color:var(--text); background:var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

.shell { display:grid; grid-template-columns: 208px 1fr; min-height:100vh; }
.rail { background:var(--surface); border-right:1px solid var(--border); padding:16px 10px; display:flex; flex-direction:column; gap:2px; }
.logo { font-weight:800; font-size:16px; padding:6px 10px 18px; display:flex; gap:8px; align-items:center; }
.logo-mark { width:24px; height:24px; display:inline-block; }
.rail a { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-radius:var(--r-sm);
  color:var(--text); text-decoration:none; min-height:36px; }
.rail a:hover { background:var(--surface-2); }
.rail a[aria-current="page"] { background:var(--surface-2); font-weight:600; box-shadow: inset 3px 0 0 var(--brand); }
.rail hr { border:0; border-top:1px solid var(--border); margin:10px 6px; }
.badge { background:var(--brand); color:var(--on-brand); border-radius:999px; font-size:12px; padding:0 7px; min-width:20px; text-align:center; }

.main { display:flex; flex-direction:column; min-width:0; }
.status { display:flex; flex-wrap:wrap; gap:18px; align-items:center; padding:10px 24px; border-bottom:1px solid var(--border);
  background:var(--surface); font-size:13px; }
.status .item { display:flex; gap:6px; align-items:center; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--muted); }
.dot.ok{background:var(--ok)} .dot.wait{background:var(--wait)} .dot.bad{background:var(--bad)} .dot.info{background:var(--info)}
.content { padding:24px; max-width:1200px; width:100%; }
h1 { font-size:24px; margin:0 0 4px; } h2 { font-size:16px; margin:0 0 12px; }
.sub { color:var(--muted); margin:0 0 20px; }

.grid { display:grid; gap:16px; }
.cols-5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; }
.metric .label { color:var(--muted); font-size:12px; }
.metric .value { font-size:24px; font-weight:700; margin-top:4px; }

.btn { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--surface); cursor:pointer; }
.btn:hover { background:var(--surface-2); }
.btn.primary { background:var(--brand); color:var(--on-brand); border-color:transparent; font-weight:600; }
.btn.ghost { border-color:transparent; background:transparent; }
.btn.danger { color:var(--bad); }
.btn:focus-visible, .rail a:focus-visible, input:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

.pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:600;
  background:var(--surface-2); }
.pill.ok{color:var(--ok)} .pill.wait{color:var(--wait)} .pill.bad{color:var(--bad)} .pill.info{color:var(--info)}

table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:12px; color:var(--muted); font-weight:600; padding:8px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--surface); }
td { padding:10px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:hover td { background:var(--surface-2); }

.stages { display:flex; gap:3px; margin-top:6px; }
.stages span { flex:1; height:6px; border-radius:3px; background:var(--surface-2); }
.stages span.done { background:var(--ok); } .stages span.now { background:var(--info); }
.stages.wait span.now { background:var(--wait); }

.needs { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.needs + .needs { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }

.msg { white-space:pre-wrap; background:var(--surface-2); border-radius:var(--r-sm); padding:12px; margin:10px 0; }
.msg .foot { color:var(--muted); font-size:12px; border-top:1px dashed var(--border); margin-top:10px; padding-top:8px; }
.row-actions { display:flex; gap:8px; flex-wrap:wrap; }

.bar { display:flex; align-items:center; gap:10px; }
.bar .track { flex:1; height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
.bar .fill { height:100%; background:var(--brand); }

.empty { text-align:center; padding:48px 16px; color:var(--muted); }
.steps { display:flex; gap:8px; margin-bottom:20px; } .steps span { width:28px; height:6px; border-radius:3px; background:var(--surface-2); }
.steps span.on { background:var(--brand); }
label.field { display:grid; gap:6px; font-weight:600; margin-bottom:14px; }
input.text, select.text { min-height:40px; padding:0 12px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); }
.choice { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:10px; cursor:pointer; }
.choice:has(input:checked) { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }

.toast { position:fixed; bottom:20px; right:20px; background:var(--text); color:var(--bg); padding:10px 14px; border-radius:var(--r-sm);
  display:flex; gap:12px; align-items:center; }
.toast button { background:transparent; border:0; color:inherit; text-decoration:underline; cursor:pointer; }

@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .rail { flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--border); }
  .rail hr, .logo { display:none; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

/* fixes after visual check */
.bar .fill { display:block; }
.content:focus { outline:none; }
a.btn { text-decoration:none; color:var(--text); }
a.btn.primary { color:var(--on-brand); }

.msg, .needs > div { overflow-wrap:anywhere; min-width:0; }

/* AI screen */
.prompt-text { width:100%; min-height:110px; font:13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding:12px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); color:inherit; resize:vertical; }
.ai-pre { white-space:pre-wrap; overflow-wrap:anywhere; font:12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--surface-2); border-radius:var(--r-sm); padding:12px; margin:8px 0 0; max-height:520px; overflow:auto; }

/* Sign-in and team */
body.signed-out .rail { display:none; }
body.signed-out .shell { grid-template-columns: 1fr; }
.signout { margin-top:auto; justify-content:flex-start; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; }
.signout span { font-size:12px; font-weight:400; overflow-wrap:anywhere; }
.rail a[hidden], .rail button[hidden] { display:none; }
.check { display:flex; gap:10px; align-items:flex-start; min-height:44px; padding:10px 0; cursor:pointer; }
.check input { width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--brand); }