/* Secchi Smith Hub */
:root {
  --bg: #f4f4f1;
  --surface: #ffffff;
  --surface-2: #fafaf8;
  --ink: #1c1c1a;
  --ink-2: #3d3d39;
  --muted: #74746c;
  --line: #e3e3dd;
  --line-2: #d4d4cc;
  --accent: #a99945;        /* Secchi Smith gold: fills (buttons, switches, ticks) */
  --accent-ink: #1c1a10;    /* text on gold */
  --accent-soft: #f2eedc;   /* pale gold backgrounds */
  --accent-text: #7a6c27;   /* gold as text, dark enough to read on white */
  --img-bg: #23231f;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 10px 40px rgb(0 0 0 / 0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --st-todo: #66665f;       --st-todo-bg: #ecece7;
  --st-progress: #1d5fb8;   --st-progress-bg: #e3edfb;
  --st-query: #7a3fb0;      --st-query-bg: #f1e8fa;
  --st-changes: #b4361f;    --st-changes-bg: #fbe8e3;
  --st-ready: #94600a;      --st-ready-bg: #fcf0d6;
  --st-approved: #2b7a46;   --st-approved-bg: #e1f3e7;
  --st-out: #55606b;        --st-out-bg: #e8ecef;
  --box: #00b8d4;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131312;
    --surface: #1c1c1a;
    --surface-2: #222220;
    --ink: #ececE8;
    --ink-2: #cfcfc8;
    --muted: #9a9a92;
    --line: #2e2e2b;
    --line-2: #3b3b37;
    --accent: #a99945;
    --accent-ink: #17150a;
    --accent-soft: #2a2614;
    --accent-text: #c9b965;
    --img-bg: #0c0c0b;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.2);
    --shadow-lg: 0 10px 40px rgb(0 0 0 / 0.5);
    --st-todo: #b4b4ab;       --st-todo-bg: #2a2a27;
    --st-progress: #7fb0f2;   --st-progress-bg: #17263b;
    --st-query: #c49af0;      --st-query-bg: #2a1c38;
    --st-changes: #f08f78;    --st-changes-bg: #3a1d16;
    --st-ready: #e8b45a;      --st-ready-bg: #36280e;
    --st-approved: #79d095;   --st-approved-bg: #16301f;
    --st-out: #a3aeb8;        --st-out-bg: #262b30;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
/* Always keep room for the scrollbar, so short and long pages line up exactly. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.45; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 24px; }
h2 { font-size: 16px; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: 0.92em; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.sub { color: var(--muted); margin: 4px 0 0; }
.warn-text { color: var(--st-ready); }
.link { color: var(--accent-text); cursor: pointer; }
.link:hover { text-decoration: underline; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 28px;
  height: 56px; padding: 0 24px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand-mark svg { width: 26px; height: 26px; display: block; }
.brand-mark rect { fill: var(--accent); }
.brand-mark path { fill: var(--accent-ink); }
.mainnav { display: flex; gap: 4px; flex: 1; }
.mainnav a { color: var(--ink-2); padding: 7px 12px; border-radius: 8px; font-weight: 500; }
.mainnav a:hover { background: var(--surface-2); text-decoration: none; }
.mainnav a.on { background: var(--accent-soft); color: var(--accent-text); }
.whoami { display: flex; align-items: center; gap: 8px; }
.whoami select { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 6px 8px; font: inherit; }

.pill { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--line); color: var(--ink-2); font-size: 11px; font-weight: 600; text-align: center; line-height: 18px; }
.pill.warn { background: var(--st-ready-bg); color: var(--st-ready); }
.pill.accent { background: var(--accent); color: var(--accent-ink); }

.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 650; font-size: 13px; flex: none; }
.avatar.sm { width: 24px; height: 24px; font-size: 10.5px; }
.unassigned { color: var(--muted); }

/* Layout */
.page { max-width: 1320px; margin: 0 auto; padding: 28px 24px 80px; }
.page.wide { max-width: none; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.flash { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1320px; margin: 16px auto 0; padding: 10px 14px; background: var(--accent-soft); color: var(--ink); border-radius: var(--radius-sm); width: calc(100% - 48px); }
.flash-x { border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.notice { padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; }
.notice.warn { background: var(--st-ready-bg); color: var(--ink); }
.empty-state { color: var(--muted); padding: 18px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--radius); }
.empty-state.big { padding: 56px 24px; }
.empty-state.big h2 { color: var(--ink); margin-bottom: 6px; }
.section-title { margin: 28px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }

/* Buttons and inputs */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); padding: 7px 14px; border-radius: 8px; font: inherit; font-weight: 550; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.btn:hover { background: var(--surface-2); border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--st-changes); border-color: color-mix(in srgb, var(--st-changes) 40%, transparent); }
.btn.ghost { border-color: transparent; color: var(--muted); }
.btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.btn.block { width: 100%; justify-content: center; margin-top: 14px; }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
input[type=search], input[type=date], textarea, select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; }
textarea { width: 100%; resize: vertical; line-height: 1.4; }
input:focus, textarea:focus, select:focus, .btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
.search input { width: 280px; max-width: 100%; }

.segmented { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segmented a { padding: 5px 12px; border-radius: 7px; color: var(--ink-2); font-weight: 500; font-size: 13px; }
.segmented a:hover { text-decoration: none; background: var(--surface-2); }
.segmented a.on { background: var(--ink); color: var(--bg); }
.segmented a span { color: var(--muted); margin-left: 4px; }
.segmented a.on span { color: inherit; opacity: 0.7; }

/* Status chips */
.chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--st-todo-bg); color: var(--st-todo); white-space: nowrap; }
.st-todo { background: var(--st-todo-bg); color: var(--st-todo); }
.st-in_progress { background: var(--st-progress-bg); color: var(--st-progress); }
.st-query { background: var(--st-query-bg); color: var(--st-query); }
.st-changes { background: var(--st-changes-bg); color: var(--st-changes); }
.st-ready { background: var(--st-ready-bg); color: var(--st-ready); }
.st-approved { background: var(--st-approved-bg); color: var(--st-approved); }
.st-out_of_scope { background: var(--st-out-bg); color: var(--st-out); }

.vchip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 4px 1px 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 550; white-space: nowrap; }
.vchip em { font-style: normal; color: var(--muted); font-weight: 500; font-size: 11px; padding-right: 4px; }
.vchip.warn { border-color: color-mix(in srgb, var(--st-ready) 50%, transparent); background: var(--st-ready-bg); }
.vchip button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 3px; font-size: 14px; line-height: 1; }
.vchip button:hover { color: var(--st-changes); }

/* Projects list */
.proj-list { margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.proj-row { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--line); }
.proj-row:first-child { border-top: 0; }
.proj-row:hover { background: var(--surface-2); }
.proj-main { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; color: var(--ink); }
.proj-main:hover { text-decoration: none; }
.proj-num { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--muted); width: 38px; }
.proj-name { display: flex; flex-direction: column; min-width: 0; }
.proj-name strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-name small { color: var(--muted); }
.proj-stats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.stat { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.stat:hover { text-decoration: none; border-color: var(--muted); }
.stat.accent { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; font-weight: 600; }
.stat.warn { background: var(--st-ready-bg); color: var(--st-ready); border-color: transparent; font-weight: 600; }
.switch { position: relative; width: 36px; height: 20px; border-radius: 999px; border: 0; background: var(--line-2); cursor: pointer; padding: 0; transition: background 0.2s; }
.switch span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: left 0.2s; }
.switch.on { background: var(--accent); }
.switch.on span { left: 18px; }

/* Project header and tabs */
.proj-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.proj-head > div { padding-bottom: 14px; min-width: 0; }
.proj-head .sub { word-break: break-all; }
.crumbs { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.crumbs span { margin: 0 4px; opacity: 0.6; }
.tabs { display: flex; gap: 4px; }
.tabs a { padding: 10px 14px; color: var(--ink-2); font-weight: 550; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent); }

/* Board */
.filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.group { margin-bottom: 30px; }
.group-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.group-head h2 { font-size: 17px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.card-img { position: relative; aspect-ratio: 16 / 10; background: var(--img-bg); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.card:hover .card-img img { transform: scale(1.03); }
.card-img.empty { display: grid; place-items: center; color: #8d8d85; font-size: 12px; background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 8px, var(--bg) 8px, var(--bg) 16px); }
.card-num { position: absolute; top: 8px; left: 8px; background: rgb(0 0 0 / 0.62); color: #fff; font-weight: 650; font-size: 12px; padding: 2px 8px; border-radius: 6px; backdrop-filter: blur(4px); }
.card-img .chip { position: absolute; top: 8px; right: 8px; box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); }
.card-body { padding: 12px 14px 6px; flex: 1; }
.card-proj { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; font-weight: 550; }
.card-text { margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px 12px; }
.card-views { display: flex; gap: 4px; flex-wrap: wrap; }

/* Inbox */
.inbox-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.dropzone { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 20px 22px; border: 2px dashed var(--line-2); border-radius: 16px; background: var(--surface); transition: border-color 0.15s, background 0.15s; }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.busy { opacity: 0.75; }
.dz-icon svg { width: 40px; height: 40px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dz-title { font-size: 17px; font-weight: 600; margin: 8px 0 2px; }
.dz-sub { color: var(--muted); margin: 0 0 14px; }
.dz-received label { color: var(--muted); font-size: 13px; display: inline-flex; gap: 8px; align-items: center; }
.dz-note { color: var(--muted); font-size: 12px; margin: 12px 0 0; }
.dz-progress { margin-top: 12px; font-weight: 550; }
.source-list { display: flex; flex-direction: column; gap: 8px; }
.source-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.source-row:hover { text-decoration: none; border-color: var(--line-2); box-shadow: var(--shadow); }
.source-row.state-done { opacity: 0.72; }
.source-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.source-main strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source-main small { color: var(--muted); }
.source-state { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.file-icon { display: grid; place-items: center; width: 38px; height: 46px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); font-size: 9.5px; font-weight: 700; color: var(--muted); flex: none; letter-spacing: 0.02em; }
.file-icon.ext-pdf { color: #c2412d; }
.file-icon.ext-jpg, .file-icon.ext-jpeg, .file-icon.ext-png { color: #2f73c9; }
.file-icon.ext-eml, .file-icon.ext-txt { color: #7a3fb0; }
.file-icon.ext-pptx { color: #c76a14; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; }
.panel .sub { font-size: 12.5px; margin-bottom: 12px; word-break: break-all; }
.day { border-top: 1px solid var(--line); padding: 8px 0; }
.day summary { cursor: pointer; padding: 4px 0; display: flex; gap: 8px; align-items: baseline; list-style: none; }
.day summary::-webkit-details-marker { display: none; }
.day summary::before { content: "▸"; color: var(--muted); font-size: 11px; transition: transform 0.15s; }
.day[open] summary::before { transform: rotate(90deg); }
.rfile { display: flex; align-items: center; gap: 8px; padding: 5px 4px 5px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.rfile:hover { background: var(--surface-2); }
.rfile .rname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.rfile.likely .rname { color: var(--ink); font-weight: 600; }
.rfile.done .rname { color: var(--muted); font-weight: 400; }
.rfile .muted { font-size: 11.5px; white-space: nowrap; }
.tick { color: var(--st-approved); font-weight: 700; width: 13px; text-align: center; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Review a file */
.review-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.review-file { display: flex; gap: 12px; align-items: center; min-width: 0; }
.review-file strong { word-break: break-all; }
.received-field { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
.processing { display: flex; align-items: center; gap: 10px; padding: 40px; justify-content: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 550; }
.review { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.review-pages { display: flex; flex-direction: column; gap: 22px; }
.page-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 550; }
.page-view { font-size: 12px; padding: 3px 6px; border-radius: 6px; }
#accept-note.warn-text { color: var(--st-changes); font-weight: 550; }
.page-wrap { position: relative; background: var(--img-bg); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); user-select: none; touch-action: pan-y; }
.page-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; }
.review.drawing .page-wrap { cursor: crosshair; touch-action: none; outline: 2px dashed var(--accent); outline-offset: 3px; }
.box { position: absolute; border: 2px solid var(--box); border-radius: 3px; background: rgb(0 184 212 / 0.08); cursor: pointer; transition: background 0.15s, box-shadow 0.15s; }
.box span { position: absolute; top: -2px; left: -2px; transform: translateY(-100%); background: var(--box); color: #00262c; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px 4px 4px 0; white-space: nowrap; }
.box.off { border-style: dashed; border-color: #9a9a92; background: transparent; }
.box.off span { background: #9a9a92; }
.box.accepted { border-color: #3fbf6e; background: rgb(63 191 110 / 0.08); }
.box.accepted span { background: #3fbf6e; color: #04210f; }
.box.hl, .box:hover { background: rgb(0 184 212 / 0.22); box-shadow: 0 0 0 4px rgb(0 184 212 / 0.25); z-index: 2; }
.box.drawing-box { border-style: dashed; pointer-events: none; }
.box.flash, .draft.flash { animation: flash 1s ease; }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent); } }
.review.drawing .box { pointer-events: none; }
.text-source { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.text-source pre { white-space: pre-wrap; font-family: inherit; font-size: 14px; margin: 0; line-height: 1.55; }
.email-meta { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.review-panel { position: sticky; top: 72px; display: flex; flex-direction: column; max-height: calc(100vh - 88px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-tools { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tip { margin: 0; padding: 10px 14px; font-size: 12.5px; color: var(--ink-2); background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.tip em { color: var(--muted); }
.draft-list { overflow: auto; flex: 1; padding: 6px; }
.draft { display: flex; gap: 8px; padding: 10px; border-radius: 10px; border: 1px solid transparent; }
.draft:hover, .draft.hl { background: var(--surface-2); border-color: var(--line); }
.draft.off .draft-main { opacity: 0.5; }
.draft.is-accepted { opacity: 0.8; }
.draft-check { padding-top: 2px; }
.draft-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.draft-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.draft-top { display: flex; align-items: center; gap: 8px; }
.draft-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--box); color: #00262c; font-size: 11px; font-weight: 700; }
.draft-n.done { background: #3fbf6e; color: #04210f; }
.draft-top .muted { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { border: 0; background: none; color: var(--accent-text); cursor: pointer; font: inherit; font-size: 12px; padding: 2px 4px; }
.draft textarea { min-height: 40px; overflow: hidden; resize: none; }
.draft-text { margin: 0; white-space: pre-line; }
.draft-views { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.draft-views select { padding: 2px 6px; font-size: 12px; border-radius: 6px; }
.draft-views.missing select { border-color: var(--st-ready); background: var(--st-ready-bg); }
.panel-foot { padding: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.panel-foot label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 13px; }
.panel-foot .btn.primary { justify-content: center; padding: 10px; }
.panel-foot p { margin: 0; text-align: center; }

/* Comment page */
.comment-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); gap: 28px; align-items: start; }
.comment-visual { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }
.crop-figure, .page-figure { margin: 0; }
.crop-figure img { display: block; width: 100%; border-radius: var(--radius); background: var(--img-bg); box-shadow: var(--shadow); }
.page-figure .page-wrap { max-width: 420px; }
.page-figure figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }
.hl-box { position: absolute; border: 2px solid var(--box); box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.35); border-radius: 2px; }
.text-only { padding: 40px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--radius); }
.comment-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.big-num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.client-text { margin: 0 0 16px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); font-size: 15px; white-space: pre-line; }
.facts { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; margin: 0 0 18px; align-items: center; }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.inline-form select { padding: 4px 8px; }
.actions-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.actions-box p { margin: 0; }
.action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ev { display: flex; gap: 10px; }
.ev > div { flex: 1; min-width: 0; }
.ev-head { font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.ev-head time { font-size: 12px; margin-left: auto; }
.ev-text { margin: 6px 0 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; white-space: pre-line; }
.ev-img { display: block; max-width: 100%; max-height: 260px; margin-top: 8px; border-radius: 8px; border: 1px solid var(--line); }
.reply { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.reply-foot { display: flex; align-items: center; gap: 10px; }
.reply-foot .btn { margin-left: auto; }

/* Signed-in person menu and dev mode */
.usermenu { position: relative; }
.usermenu summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 4px 6px; border-radius: 8px; }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu summary:hover { background: var(--surface-2); }
.usermenu-name { font-weight: 550; }
.usermenu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; display: flex; flex-direction: column; z-index: 30; }
.usermenu-pop a, .linklike { display: block; padding: 8px 10px; border-radius: 6px; color: var(--ink); text-align: left; width: 100%; border: 0; background: none; font: inherit; cursor: pointer; }
.usermenu-pop a:hover, .linklike:hover { background: var(--surface-2); text-decoration: none; }
.usermenu-who { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.dev-tag { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--st-ready); background: var(--st-ready-bg); padding: 3px 8px; border-radius: 999px; }

/* Sign-in page */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 36px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.brand-mark.big svg { width: 48px; height: 48px; }
.login-card .notice { width: 100%; margin: 4px 0; }
.google-btn { margin-top: 8px; padding: 10px 18px; font-size: 15px; }
.google-btn svg { width: 20px; height: 20px; fill: initial; stroke: none; }

/* People */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.person-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); box-shadow: var(--shadow); }
.person-card:hover { text-decoration: none; border-color: var(--line-2); }
.person-card.inactive { opacity: 0.55; }
.person-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.person-main small { color: var(--ink-2); }
.person-main small.muted { color: var(--muted); }
.avatar.lg { width: 44px; height: 44px; font-size: 15px; }
.avatar.xl { width: 72px; height: 72px; font-size: 24px; }
.avatar.role-admin { background: #6d4aa8; color: #fff; }
.avatar.role-user { background: var(--accent); color: var(--accent-ink); }
.role-chip.role-admin { background: var(--st-query-bg); color: var(--st-query); }
.choose-lead { max-width: 560px; margin: 24px 0 48px; }
.choose-lead h1 { margin-bottom: 8px; }
.choose-lead .sub { margin-bottom: 20px; }
.choose-lead-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lead-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; width: 100%; }
.lead-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; font-weight: 600; font-size: 13px; }
/* The Make active switch as a button the same height as the menu beside it */
.active-toggle.lead-active { position: relative; box-sizing: border-box; height: 35px; padding: 0 14px 0 10px; border-radius: 8px; font-size: 13px; min-width: 0; }
.lead-active input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lead-active:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.lead-hint { margin: -4px 0 0; }
.add-person { position: static; max-height: none; margin-top: 28px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; align-items: end; margin-top: 12px; }
.form-grid.one { grid-template-columns: 1fr; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.form-grid label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink-2); }
.form-grid input:not([type=checkbox]), .form-grid select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; }
.form-actions { display: flex; justify-content: flex-end; }
.profile-head { display: flex; align-items: center; gap: 18px; margin: 12px 0 26px; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.profile-grid .panel { position: static; max-height: none; }
.team-list, .audit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.audit-list li { font-size: 13px; color: var(--ink-2); }

/* Narrow screens */
@media (max-width: 980px) {
  .inbox-grid, .review, .comment-grid, .profile-grid { grid-template-columns: 1fr; }
  .panel, .review-panel, .comment-visual { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .topbar { gap: 8px; padding: 0 16px; }
  .brand-name { display: none; }
  .mainnav { min-width: 0; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 24px; }
  .mainnav a { white-space: nowrap; padding: 6px 8px; }
  .whoami .avatar, .dev-tag, .usermenu-name { display: none; }
  .whoami select { max-width: 92px; }
  .page { padding: 20px 16px 60px; }
  .proj-row { flex-wrap: wrap; padding: 12px 16px; }
  .proj-stats { width: 100%; justify-content: flex-start; padding-left: 54px; }
  .flash { width: calc(100% - 32px); }
}

/* Image library */
.lib-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.lib-search input[type=search] { flex: 1 1 320px; min-width: 0; padding: 10px 14px; font-size: 15px; border-radius: 10px; }
.lib-search select { max-width: 220px; }
.lib-check { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.lib-status { display: flex; align-items: center; gap: 10px; min-height: 30px; flex-wrap: wrap; }
.small-btn { padding: 4px 10px; font-size: 12.5px; }
.lib-count { margin: 6px 0 14px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.lib-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.15s; }
.lib-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.lib-img { position: relative; aspect-ratio: 3 / 2; background: var(--img-bg); overflow: hidden; }
.lib-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; }
.lib-card:hover .lib-img img { transform: scale(1.03); }
.lib-img.empty { display: grid; place-items: center; color: #8d8d85; font-size: 12px; background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 8px, var(--bg) 8px, var(--bg) 16px); }
.lib-badge { position: absolute; right: 8px; bottom: 8px; background: rgb(0 0 0 / 0.62); color: #fff; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; backdrop-filter: blur(4px); }
.lib-body { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lib-proj { font-size: 11.5px; color: var(--muted); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.tag { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px; border-radius: 999px; font-size: 12px; background: var(--accent-soft); color: var(--accent-text); font-weight: 550; }
.tag.ai { background: var(--st-query-bg); color: var(--st-query); }
.tag button { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; padding: 0 0 0 4px; opacity: 0.6; }
.tag button:hover { opacity: 1; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lib-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.lib-viewer { background: var(--img-bg); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; min-height: 240px; }
.lib-viewer img { display: block; max-width: 100%; height: auto; max-height: calc(100vh - 220px); object-fit: contain; }
.lib-side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); min-width: 0; }
.lib-side .section-title { margin-top: 20px; }
.facts dd.wrap { word-break: break-all; }
.path-box { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.path-box code { word-break: break-all; font-size: 12px; color: var(--ink-2); }
.tag-list { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tag-list p { margin: 0; }
.tag-form { margin: 0; }
.tag-add { display: flex; gap: 8px; }
.tag-add input { flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; }
.lib-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.lib-ver { color: var(--ink); border-radius: var(--radius-sm); padding: 6px; border: 1px solid transparent; min-width: 0; }
.lib-ver:hover { text-decoration: none; background: var(--surface); border-color: var(--line); }
.lib-ver.on { background: var(--accent-soft); border-color: var(--accent); }
.lib-ver-img { aspect-ratio: 3 / 2; background: var(--img-bg); border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
.lib-ver-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 980px) {
  .lib-detail { grid-template-columns: 1fr; }
  .lib-viewer img { max-height: 70vh; }
}
@media (max-width: 640px) {
  .lib-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .lib-search select { flex: 1 1 140px; max-width: none; }
  .lib-history { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
.remove-box { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 12px; }
.remove-box summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.remove-box summary:hover { color: var(--st-changes); }
.remove-box p { margin: 8px 0 10px; }
.remove-actions { display: flex; flex-direction: column; gap: 8px; }
.remove-actions .btn { justify-content: center; }
.lib-card.removed .lib-img img { filter: grayscale(0.7); opacity: 0.75; }
.lib-card.removed form { margin-top: 8px; }

/* Development pages */
.dev-head { margin-bottom: 8px; }
.privacy { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; }
.privacy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.dev-tabs { border-bottom: 1px solid var(--line); margin: 14px 0 20px; }
.dev-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.dev-grid .section-title:first-child { margin-top: 0; }
.dev-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 12px; }
.dev-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dev-card h2 { font-size: 16px; }
.dev-card .pre, .pre { white-space: pre-wrap; margin: 6px 0; }
.goal { border-left: 3px solid var(--line-2); }
.goal.st-in_progress { border-left-color: var(--st-progress); }
.goal.st-done { border-left-color: var(--st-approved); }
.goal.st-dropped { opacity: 0.7; }
.goal-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.goal-chip.planned { background: var(--st-todo-bg); color: var(--st-todo); }
.goal-chip.in_progress { background: var(--st-progress-bg); color: var(--st-progress); }
.goal-chip.done { background: var(--st-approved-bg); color: var(--st-approved); }
.goal-chip.dropped { background: var(--st-out-bg); color: var(--st-out); }
.dev-edit { margin-top: 8px; }
.dev-edit summary { cursor: pointer; color: var(--muted); font-size: 12.5px; display: inline-block; }
.dev-edit summary:hover { color: var(--accent-text); }
.dev-edit form, .dev-add form { margin-top: 10px; }
.dev-add { margin-top: 6px; }
.dev-add > summary { list-style: none; }
.dev-add > summary::-webkit-details-marker { display: none; }
.dev-add[open] > summary { display: none; }
.dev-add[open] { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px 14px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row label { flex: 1 1 140px; }
.form-grid textarea, .dev-card textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; width: 100%; resize: vertical; }
.checklist { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 8px; }
.checklist li:hover { background: var(--surface); }
.checklist li.none { padding: 4px 0; }
.checklist li form { margin: 0; }
.checklist .item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.checklist li.done .item-text > span:first-child { text-decoration: line-through; color: var(--muted); }
.checklist li.overdue .item-text .small { color: var(--st-changes); }
.tick { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; display: grid; place-items: center; padding: 0; margin-top: 1px; }
.tick:hover { border-color: var(--accent); }
.done .tick { background: var(--accent); border-color: var(--accent); }
.tick svg { width: 14px; height: 14px; fill: none; stroke: var(--accent-ink); stroke-width: 2; }
.checklist .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin: 7px 6px 0; flex: none; }
.checklist .x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; opacity: 0; }
.checklist li:hover .x, .checklist .x:focus { opacity: 1; }
@media (hover: none) { .checklist .x { opacity: 0.6; } }
.add-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.add-row input:not([type=hidden]) { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; }
.add-row input[name=text] { flex: 1 1 180px; min-width: 0; }
.done-list summary { cursor: pointer; margin: 4px 0 8px; }
.dev-log-form { position: static; max-height: none; margin-bottom: 18px; }
.dev-log-form summary { cursor: pointer; }
.dev-log-form form { margin-top: 12px; }
.discussed { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.discussed legend { color: var(--muted); font-size: 13px; padding: 0 4px; }
.discussed .check { display: flex; gap: 8px; align-items: center; }
.mini-actions { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; }
.mini-actions li.done { color: var(--muted); text-decoration: line-through; }
.review-start { margin-bottom: 16px; }
.review-start input { width: 90px; }
.review-meta { margin-bottom: 8px; }
.review-meta input { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 8px; margin-left: 6px; }
.review-part { margin: 14px 0; }
.review-part h3 { font-size: 14px; margin-bottom: 6px; }
.signatures { display: flex; gap: 20px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.review-card .form-actions { margin-top: 6px; }
.dev-team { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 10px; }
.dev-row { display: grid; grid-template-columns: minmax(0, 2fr) 1.3fr 1fr 0.8fr 1.1fr; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--ink); }
.dev-row.head { border-top: 0; padding-top: 10px; padding-bottom: 8px; }
a.dev-row:hover { background: var(--surface-2); text-decoration: none; }
.dev-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dev-person > span:last-child { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 980px) {
  .dev-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dev-row.head { display: none; }
  .dev-row { grid-template-columns: 1fr 1fr; }
  .dev-row .dev-person { grid-column: 1 / -1; }
  .dev-row > span[data-label]::before { content: attr(data-label) " "; display: block; color: var(--muted); font-size: 11px; }
}
.form-actions { gap: 8px; flex-wrap: wrap; }
.profile-dev { margin-left: auto; }
/* A form's buttons always sit on their own row, on the right. */
.form-grid .form-actions { grid-column: 1 / -1; }
.add-person > summary { cursor: pointer; list-style: none; }
.add-person > summary::-webkit-details-marker { display: none; }
.add-person > summary h2 { display: inline; }
.add-person:not([open]) { display: none; }
/* Goal status: click the chip to change it */
.status-menu { position: relative; flex: none; }
.status-menu > summary { list-style: none; cursor: pointer; gap: 4px; user-select: none; }
.status-menu > summary::-webkit-details-marker { display: none; }
.status-menu > summary svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.status-menu > summary:hover { filter: brightness(0.95); box-shadow: 0 0 0 2px var(--line-2); }
.status-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 4px; display: flex; flex-direction: column; min-width: 150px; }
.status-pop button { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 7px; cursor: pointer; text-align: left; }
.status-pop button:hover { background: var(--surface-2); }
.status-pop button.on { font-weight: 650; }
.swatch { width: 9px; height: 9px; border-radius: 50%; background: var(--st-todo); }
.swatch.in_progress { background: var(--st-progress); }
.swatch.done { background: var(--st-approved); }
.swatch.dropped { background: var(--st-out); }
.log-meeting { margin-bottom: 18px; }

/* Projects: project lead */
.proj-lead { width: 170px; flex: none; font-size: 13px; }
.proj-lead select { width: 100%; font: inherit; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 8px; }
select.unset { color: var(--st-ready); border-color: color-mix(in srgb, var(--st-ready) 45%, var(--line-2)); }
@media (max-width: 640px) { .proj-lead { width: 100%; padding-left: 54px; } }

/* Inbox: just the drop area and the files */
.inbox-one { width: 100%; }

/* Board: progress per view */
.view-progress { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.vp { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 10px; padding: 8px 12px 9px; min-width: 128px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.vp:hover { text-decoration: none; border-color: var(--line-2); }
.vp-name { font-weight: 600; font-size: 13px; }
.vp-state { font-size: 12px; color: var(--muted); text-align: right; }
.vp-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.vp-bar span { display: block; height: 100%; background: var(--st-ready); border-radius: 4px; }
.vp.done .vp-state { color: var(--st-ready); font-weight: 600; }
.vp.checked { border-color: color-mix(in srgb, var(--st-approved) 45%, var(--line)); }
.vp.checked .vp-state { color: var(--st-approved); }
.vp.checked .vp-bar span { background: var(--st-approved); }
.group { scroll-margin-top: 76px; }

/* Comment page */
.comment-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 0 16px; }
.btn.disabled { opacity: 0.4; pointer-events: none; }
.view-pick { align-items: center; }
.view-pick select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 8px; }
.also-view summary { cursor: pointer; display: inline-block; }
.also-view form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.also-view select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 8px; }
.also-view p { margin: 6px 0 0; }

/* Review page: the page's view menu shows what it's set to */
select.page-view.is-set { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); font-weight: 600; }

/* Check queue */
.check-project { margin-bottom: 34px; }
.check-project-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.check-project-head h2 { font-size: 18px; }
.check-project-head h2 a { color: var(--ink); }
.check-project .group-head h3 { font-size: 15px; }

/* Board: one artist per view */
.group-head { flex-wrap: wrap; }
.group-head { align-items: center; }
.group-head .view-artist label { gap: 6px; }
.view-artist { margin: 0; }
.view-artist label { display: inline-flex; align-items: center; gap: 6px; }
.view-artist select { font: inherit; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 8px; }
.vp-artist { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); margin-top: -2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-artist:empty { display: none; }

/* Board: internal comments */
.studio-add { margin: 0 0 14px; }
.studio-add > summary { list-style: none; }
.studio-add > summary::-webkit-details-marker { display: none; }
.studio-add[open] > summary { display: none; }
.studio-comment { position: static; max-height: none; display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.studio-comment p { margin: 0; }
.studio-comment label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.studio-comment select, .studio-comment textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; }
.studio-comment textarea { resize: vertical; }
.studio-comment .reply-foot .btn { margin-left: auto; }
.group-add { margin-left: 4px; }
.card-from { font-size: 11.5px; color: var(--st-query); font-weight: 600; margin-bottom: 4px; }
.chip.internal { background: var(--st-query-bg); color: var(--st-query); }

/* Add comments: client files and studio comments side by side */
.add-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.add-grid > section { display: flex; flex-direction: column; min-width: 0; }
.add-grid .dropzone, .add-grid .studio-comment { flex: 1; }
.add-grid .studio-comment { max-width: none; }
.section-title.first { margin-top: 0; }
@media (max-width: 980px) { .add-grid { grid-template-columns: 1fr; } }

/* Homepage */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.home-main > section { margin-bottom: 30px; }
.home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.home-section-head .section-title { margin-bottom: 10px; }
.post-add { margin: 0 0 14px; }
.post-form { position: static; max-height: none; display: flex; flex-direction: column; gap: 10px; }
.post-form textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.posts { display: flex; flex-direction: column; gap: 12px; }
.post { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.post-main { flex: 1; min-width: 0; }
.post header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.post-delete { margin-left: auto; }
.post-body { white-space: pre-wrap; margin: 6px 0 0; overflow-wrap: anywhere; }
.post-img { display: block; max-width: 100%; max-height: 420px; border-radius: var(--radius-sm); margin-top: 10px; }
.my-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.my-image { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.15s; }
.my-image:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.my-image-img { position: relative; aspect-ratio: 3 / 2; background: var(--img-bg); }
.my-image-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.my-image-img.empty { display: grid; place-items: center; color: #8d8d85; font-weight: 600; background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 8px, var(--bg) 8px, var(--bg) 16px); }
.my-image-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.my-image-body .vp-bar { display: block; margin-top: 4px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.my-image-body .vp-bar span { display: block; height: 100%; background: var(--st-ready); }
.home-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 76px; }
.home-side .home-section-head .muted { font-size: 12px; }
.inspiration { display: block; border-radius: var(--radius); overflow: hidden; background: var(--img-bg); color: #fff; position: relative; box-shadow: var(--shadow); }
.inspiration:hover { text-decoration: none; }
.inspiration img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.inspiration-cap { position: absolute; inset: auto 0 0 0; padding: 28px 14px 12px; display: flex; flex-direction: column; gap: 1px; background: linear-gradient(transparent, rgb(0 0 0 / 0.75)); }
.inspiration-cap .muted { color: rgb(255 255 255 / 0.75); }
.home-panel { position: static; max-height: none; }
.home-count { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 8px; }
.home-count:hover { text-decoration: none; border-color: var(--line-2); }
.home-count strong { font-size: 18px; margin-right: 4px; }
@media (max-width: 980px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-side { position: static; order: -1; }
  .inspiration img { aspect-ratio: 16 / 9; }
}
.post-delete .linklike { padding: 0; width: auto; display: inline; }

/* How the Hub works */
.home-help { display: block; margin-top: 6px; }
.help-toc { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 22px; font-size: 13px; }
.help-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.help-sections section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); scroll-margin-top: 72px; }
.help-sections section.span { grid-column: 1 / -1; }
.help h2 { font-size: 17px; margin: 0 0 8px; }
.help ol, .help ul { margin: 0 0 8px; padding-left: 22px; line-height: 1.6; }
.help .note { margin: 4px 0 0; font-size: 13px; }
@media (max-width: 980px) { .help-sections { grid-template-columns: 1fr; } }
.help li { margin: 3px 0; }
.help li ul { margin-top: 4px; }
.help kbd { font: 12px/1 ui-monospace, Consolas, monospace; padding: 2px 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); }

/* AI usage */
.ai-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 8px; }
.ai-card { display: flex; flex-direction: column; gap: 4px; }
.ai-card strong { font-size: 22px; font-weight: 650; }
.ai-card .vp-bar { display: block; margin-top: 6px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.data-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; background: var(--surface-2); }
.data-table th, .data-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The AI step on the review page */
.ai-notice { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); }
.ai-notice .btn { margin-left: auto; }
.page-ai { margin-left: auto; padding: 2px 6px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 550; color: var(--accent-text); cursor: pointer; white-space: nowrap; }
.page-ai:hover { text-decoration: underline; }
.page-ai:disabled { color: var(--muted); cursor: default; }

/* Library: select mode, merging, AI descriptions */
.lib-card { position: relative; }
.lib-tick { display: none; position: absolute; top: 10px; left: 10px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, 0.35); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.lib-selecting .lib-tick { display: block; }
.lib-selecting .lib-card { cursor: pointer; }
.lib-selecting .lib-card:hover { transform: none; }
.lib-card.picked { outline: 3px solid var(--accent); outline-offset: -1px; }
.lib-card.picked .lib-tick { background: var(--accent); border-color: var(--accent); }
.lib-card.picked .lib-tick::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--accent-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
/* Always to hand while scrolling: a small Edit mode button, which opens into the full toolbar. */
.lib-bar { position: sticky; bottom: 16px; z-index: 20; margin: 18px 0 0 auto; width: fit-content; display: flex; align-items: center; gap: 12px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lib-bar-tools { display: none; align-items: center; gap: 12px; flex: 1; flex-wrap: wrap; }
.lib-selecting .lib-bar { width: auto; padding: 8px 8px 8px 8px; }
.lib-selecting .lib-bar-tools { display: flex; }
.lib-bar #lib-bar-count { font-weight: 600; }
.lib-bar #lib-bar-hint { flex: 1; }
.lib-dialog { max-width: 520px; width: calc(100% - 32px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); padding: 20px; }
.lib-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.lib-dialog h2 { margin: 0 0 6px; font-size: 18px; }
.merge-option { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 8px 0; cursor: pointer; }
.merge-option img { width: 72px; height: 48px; object-fit: cover; border-radius: 4px; }
.merge-option span { display: flex; flex-direction: column; }
.merge-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.lib-caption { margin: 4px 0 12px; color: var(--ink-2); font-size: 13.5px; }
.merged-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lib-more { display: flex; justify-content: center; margin: 22px 0 6px; }

/* Make a project active: a switch with words, so it's clear what it does */
.active-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; min-width: 128px; }
.active-toggle:hover { border-color: var(--accent); color: var(--ink); }
.active-toggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.active-toggle .switch { display: inline-block; flex: none; pointer-events: none; }
.active-chip { font-size: 12px; font-weight: 600; color: var(--accent-text); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; }
.form-grid.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .form-grid.two-col { grid-template-columns: 1fr; } }
.act-head { margin: 8px 0 2px; font-weight: 600; }

/* Admin tools */
.admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.admin-section-head .section-title { margin: 0; }
.people-table td { vertical-align: middle; }
.people-table tr.inactive td { color: var(--muted); }
.person-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.person-link .avatar { width: 26px; height: 26px; font-size: 11px; }
#people .add-person { margin-top: 14px; }
#ai-usage { margin-top: 28px; scroll-margin-top: 76px; }
.ai-split { display: flex; flex-direction: column; gap: 2px; font-size: 14px !important; font-weight: 500 !important; }
.ai-split b { font-weight: 650; }
.board-search { margin-left: auto; }
.board-search input { min-width: 240px; }
.search-note { margin: -12px 0 18px; }

/* Admin tools: Hub health */
.health { margin-bottom: 26px; }
.health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.health-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.health-item div { display: flex; flex-direction: column; gap: 2px; }
.health-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--st-approved); }
.health-item.warn .health-dot { background: #d6a400; }
.health-item.bad { border-color: #c2410c; }
.health-item.bad .health-dot { background: #c2410c; }
.admin-section-head .section-title { margin-top: 0; }

/* Support */
.support-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 1000px) { .support-grid { grid-template-columns: 1fr; } }
.support-grid > section:only-child { grid-column: 1 / -1; max-width: 760px; }
.ticket header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ticket header h2 { font-size: 15px; margin: 0; }
.ticket.solved { opacity: 0.85; }
.ticket-img { max-width: 100%; max-height: 260px; border-radius: 6px; border: 1px solid var(--line); margin-top: 8px; }
.solved-note { margin: 8px 0 0; color: var(--st-approved); }
.solve-form { display: flex; gap: 8px; margin-top: 10px; }
.solve-form input { flex: 1; }
.linklike-inline { border: 0; background: none; padding: 0; color: var(--accent-text); cursor: pointer; font: inherit; margin-top: 6px; }

/* Suggested duplicates */
.dupe-group { margin-bottom: 16px; }
.dupe-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dupe-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dupe-item { display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.dupe-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; border: 2px solid transparent; }
.dupe-item:has(input[type=radio]:checked) img { border-color: var(--accent); }
.dupe-name { font-weight: 600; font-size: 13px; }
.ai-guess { color: var(--accent-text); font-weight: 600; }
.inactive-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin-top: -6px; }