/* layouts.css — app shell, landing grid, top bar, footer, client page.
   No colour literals: tokens only. */

/* ---------- top bar (shared) ---------- */
/* Full-height flex shell so the footer rests at the viewport bottom on short pages
   (auth/legal). base.html body carries .site; header/main/footer stack vertically. */
body.site{min-height:100dvh;display:flex;flex-direction:column}
body.site>main{flex:1 0 auto}
body.site>footer.foot{flex:0 0 auto}
header.top{background:var(--panel);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px}
.logo{font-weight:700;font-size:18px;color:var(--ink);text-decoration:none}
nav.main{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center}
nav.main a:not(.btn),nav.main button.linklike{color:var(--ink);text-decoration:none;font-size:15px}
nav.main form{display:inline;margin:0}

/* ---------- content wrap ---------- */
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
.narrow{max-width:440px}
.reading{max-width:68ch}
main{padding:16px 0 56px}

/* auth / legal: give the narrow column breathing room and a page heading rhythm
   (Part B — visual only; inputs/labels/errors come from components.css primitives) */
main .wrap.narrow{padding-top:16px}
main .wrap.narrow h1{margin-bottom:16px}
main .wrap.narrow .card{margin-bottom:14px}
main .wrap.reading h1{margin-bottom:6px}
main .wrap.reading h2{margin-top:26px}
/* mobile tap targets >=44px (A2): auth submit button + header/footer utility links */
@media (max-width:640px){
  main .wrap.narrow .btn{min-height:44px;width:100%}
  header.top nav.main a,header.top nav.main button.linklike{
    display:inline-flex;align-items:center;min-height:44px}
  footer.foot a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- landing ---------- */
.hero{padding:32px 0 24px}
.hero h1{margin-bottom:12px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* ---------- footer ---------- */
footer.foot{border-top:1px solid var(--line);background:var(--panel);padding:20px 0;color:var(--muted);font-size:13px}
footer.foot a{margin-right:14px}

@media (max-width:480px){
  h1{font-size:26px}
  .card{padding:12px}
}

/* ======================================================================
   CLIENT PAGE (/c/) — one page at a time, studio direction D.
   Body 17px, inputs 18px, instructions >=16px, tap targets >=44px,
   no horizontal scroll at 375. Action area sits at END of page flow.
   ====================================================================== */
.client body,body.client{background:var(--paper)}
.client-shell{max-width:620px;margin:0 auto;display:flex;flex-direction:column;min-height:100vh}

/* sticky header: back + studio line + page title + progress tabs */
.client-top{position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--line);
  padding:12px 20px 10px}
.client-top .wrap-c{max-width:620px;margin:0 auto}
.client-back{display:inline-flex;align-items:center;gap:7px;font-size:16px;color:var(--accent);
  font-weight:600;text-decoration:none;min-height:44px}
.client-back .ic{width:17px;height:17px;flex:0 0 auto}
.studio{font-size:15px;color:var(--muted);font-weight:500;margin:2px 0 6px}
.pgrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 9px}
.pgrow h1{font-size:24px}
.pgrow .step{font-size:14px;color:var(--muted);font-weight:600;white-space:nowrap}

/* page tabs: horizontal scroll INSIDE the strip only, tabs >=44px.
   Stronger scroll cue (brief C5): a wider right-edge fade PLUS right padding that
   leaves the next tab partly visible so the strip is unmistakably scrollable. */
.pages-wrap{position:relative;margin:0 -20px}
.pages-wrap::after{content:"";position:absolute;top:0;right:0;bottom:3px;width:44px;pointer-events:none;
  background:linear-gradient(to right,transparent,var(--panel) 72%)}
.pages{display:flex;gap:8px;overflow-x:auto;padding:1px 44px 3px 20px;scrollbar-width:none;
  scroll-snap-type:x proximity}
.pages::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;min-height:44px;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;padding:0 15px;
  border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel);color:var(--text);
  font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;text-decoration:none}
.pill .pn{font-size:15px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.pill.cur{background:var(--accent);border-color:var(--accent);color:var(--panel)}
.pill.cur .pn{color:var(--accent-wash)}
.pill.done{color:var(--accent);border-color:var(--line-strong)}
.pill.done .pn{color:var(--accent)}

/* body */
.client-body{flex:1;padding:16px 20px}
.client-body .wrap-c{max-width:620px;margin:0 auto}
.client-lead{font-size:16px;color:var(--text);margin:0 0 16px;line-height:1.5}
.client-body .progress{margin:0 0 18px}
/* client progress label & status chips must be >=15px (item a, f) */
.client-body .progress .pt{font-size:15px}
.fieldc .chip{font-size:15px}
.client-index .progress .pt{font-size:15px}
/* client tap targets >=44px: picker "Start"/"Review choices" button (item c) */
.fieldc.picker-card .btn{min-height:44px}

/* field card */
.fieldc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;margin-bottom:16px;box-shadow:var(--shadow-1)}
.fieldc.flag{border-color:var(--warn);box-shadow:0 0 0 3px var(--field-flag)}
.fieldc.err{border-color:var(--danger);box-shadow:0 0 0 3px var(--field-err)}
.flabel{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.flabel .lab{font-size:18px;font-weight:600;color:var(--ink)}
/* keep the required asterisk attached to the last word of the label (item 6) */
.flabel .labtext{white-space:normal}
.flabel .req{color:var(--accent);font-weight:700;white-space:nowrap}
.fhelp{font-size:16px;color:var(--muted);margin:0 0 12px;line-height:1.45;width:100%}

/* client inputs: 18px. resize vertical only; no grip on touch (item j) */
.fieldc input[type=text],.fieldc textarea{width:100%;background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--r-md);padding:13px 14px;font:inherit;font-size:18px;color:var(--ink);line-height:1.45}
.fieldc textarea{min-height:124px;resize:vertical}
@media (pointer:coarse){.fieldc textarea{resize:none}}
.fieldc input:focus,.fieldc textarea:focus{border-color:var(--accent)}

/* agency note (changes requested) */
.client-note{background:var(--warn-wash);border-radius:var(--r-md);padding:12px 13px;margin:0 0 12px;
  font-size:16px;color:var(--warn);line-height:1.45}
.client-note b,.client-note strong{color:var(--warn);font-weight:700}

/* approved / locked — neutral text colour with the lock icon (NOT accent green) */
.locked{background:var(--band);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px;
  font-size:17px;color:var(--text);line-height:1.5;white-space:pre-wrap}
.lockmeta{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--text);font-weight:600;margin-top:11px}
.lockmeta .ic{width:16px;height:16px;flex:0 0 auto;color:var(--muted)}

/* client upload control (taps >=44px) */
.fieldc .upload{font-size:16px}
.fieldc .upload .upload-btn{font-size:16px;min-height:46px}
.fieldc .upload .upload-name{font-size:16px}

/* upload error alert inside a field */
.fieldc .alert{font-size:16px}

/* client asset rows */
.fieldc .asset{font-size:16px}

/* action area: PLAIN last block in page flow (position:static), compact — no sticky
   dock, no blank tail. The blocker list sits right above the buttons. (brief C1) */
.client-actions{position:static;
  padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  margin-top:4px;border-top:1px solid var(--line);background:var(--panel)}
.client-actions .wrap-c{max-width:620px;margin:0 auto}
.client-actions .hint{font-size:15px;color:var(--muted);margin:0 0 12px}
/* clear status line: "You can save now; Submit page needs these N things first" (brief C3) */
.client-saveok{font-size:16px;color:var(--ink);font-weight:700;margin:0 0 6px;line-height:1.4}
.client-todo{font-size:16px;color:var(--warn);font-weight:600;margin:0 0 8px;line-height:1.45}
.client-todo-list{list-style:none;margin:0 0 14px;padding:0}
.client-todo-list li{margin:0 0 8px}
/* each blocker is a full-width block link >=44px: field name + reason, note excerpt
   next to a changes-requested field (brief C2) */
.client-todo-list a{display:block;min-height:44px;padding:10px 12px;border-radius:var(--r-md);
  border:1px solid var(--warn);background:var(--warn-wash);color:var(--warn);text-decoration:none;
  line-height:1.4}
.client-todo-list a:hover,.client-todo-list a:focus{background:var(--panel)}
.client-todo-list .bl-label{display:block;font-size:16px;font-weight:700}
.client-todo-list .bl-reason{font-size:15px;font-weight:600;text-transform:none}
.client-todo-list .bl-note{display:block;font-size:15px;font-weight:400;margin-top:3px;line-height:1.4}
.actionbar{display:flex;flex-wrap:wrap;gap:10px}
.actionbar .btn{flex:1 1 0;text-align:center;justify-content:center;min-height:52px;font-size:18px;padding:14px 12px}

/* empty required image/file field: visible missing-state (brief C4) */
.needbox{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 10px;padding:14px;
  border:1px dashed var(--line-strong);border-radius:var(--r-md);background:var(--band)}
.needbox .chip{font-size:15px}
.needbox .needtext{font-size:16px;color:var(--text);min-width:0}

/* client footer: same side padding as content (item b), >=15px text, safe-area
   bottom padding, and no dead gap above it (the client-body already flexes to fill) */
.client-shell .foot{padding:20px 20px calc(20px + env(safe-area-inset-bottom));font-size:15px;color:var(--muted);margin-top:0}
.client-shell .foot .wrap-c{max-width:620px;margin:0 auto;padding:0}
/* picker card: consistent 16px padding (shares .fieldc) and a tidy two-part layout */
.fieldc.picker-card{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.fieldc.picker-card .picker-card-copy{flex:1 1 220px;min-width:0}
.fieldc.picker-card h3{margin:0 0 4px;font-size:18px}
.fieldc.picker-card .fhelp{margin:0}
.fieldc.picker-card .btn{min-height:44px}

/* client index (all pages list) */
.client-index .pagecard{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:16px;margin-bottom:14px;box-shadow:var(--shadow-1);text-decoration:none;color:inherit}
.client-index .pagecard:hover{border-color:var(--line-strong)}
.client-index .pagecard .ptitle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.client-index .pagecard h2{margin:0;font-size:20px}
.client-index .pagecard .go{color:var(--accent);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:6px}
.client-index .pagecard .go .ic{width:16px;height:16px}

/* ======================================================================
   AGENCY APP SHELL (/app/*) — top bar + 232px left sidebar + main.
   Below 1024px the sidebar collapses to a top nav row. (DESIGN.md §1/§4)
   ====================================================================== */
.app-body{background:var(--paper)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.app-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--panel);border-bottom:1px solid var(--line);padding:12px 24px;position:sticky;top:0;z-index:30}
.app-logo{font-weight:700;font-size:18px;color:var(--ink);text-decoration:none}
.app-topbar-right{display:flex;align-items:center;gap:16px}
.app-agency{font-size:15px;color:var(--text);font-weight:500}
.app-topbar form{display:inline;margin:0}
.app-topbar .linklike{font-size:15px}

.app-grid{display:grid;grid-template-columns:232px minmax(0,1fr)}
.app-side{background:var(--band);border-right:1px solid var(--line);padding:18px 12px;min-width:0}
.app-side-inner{position:sticky;top:75px}
.app-nav{display:flex;flex-direction:column;gap:3px}
.app-nav .navitem{font-size:15px}
.app-nav .navitem.active{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--line)}
.app-nav .navitem.recent{padding:7px 12px}
.app-nav .navitem .rname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-navsec{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:18px 12px 6px}
.app-main{padding:24px 28px;min-width:0}
.app-main .narrow{max-width:560px}
.back-link{margin:0 0 10px;font-size:15px}
.back-link a{text-decoration:none}

/* ---------- dashboard ---------- */
.dash-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:4px}
.dash-top h1{font-size:22px}
.dash-summary{font-size:15px;color:var(--text);margin:6px 0 0}
.dash-summary b{color:var(--ink);font-weight:700}

.dash-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;margin-top:18px}
.dash-content{min-width:0}

.dash-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 14px}
.dtab{font-size:15px;font-weight:600;padding:7px 13px;border-radius:var(--r-md);color:var(--muted);
  text-decoration:none;border:1px solid transparent}
.dtab:hover{color:var(--ink)}
.dtab.active{background:var(--panel);color:var(--ink);border-color:var(--line)}
.dtab .n{font-size:13px;color:var(--muted);font-weight:700;margin-left:2px}
.dtab.active .n{color:var(--accent)}

.dash-tablewrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.dash-table{width:100%;border-collapse:collapse;table-layout:fixed}
.dash-table thead th{text-align:left;font-size:14px;font-weight:600;letter-spacing:.02em;
  color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line);background:var(--band);white-space:nowrap}
.dash-table thead th.h-rev{white-space:nowrap}
.dash-table tbody tr{border-bottom:1px solid var(--line)}
.dash-table tbody tr:last-child{border-bottom:0}
.dash-table tbody tr:hover{background:var(--paper)}
.dash-table td{padding:0 14px;height:56px;vertical-align:middle;font-size:15px;color:var(--text);
  border-bottom:0;overflow:hidden}
.c-proj{width:28%}.c-prog{width:16%}.c-rev{width:9%}.c-active{width:15%}.c-status{width:18%}.c-act{width:14%}
.dash-table .cproj a{color:var(--ink);font-weight:600;text-decoration:none;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-table .cproj a:hover{color:var(--accent)}
.dash-table .cmeta{font-size:13px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-table .progress .bar{min-width:80px}
.dash-table .progress .pt{font-size:14px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.dash-table .to-review{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;
  border-radius:var(--r-pill);background:var(--accent-wash);color:var(--accent);font-size:14px;font-weight:700}
.dash-table .since{font-size:15px;color:var(--text);white-space:nowrap}
.dash-table td.cstatus,.dash-table td.crow-act{overflow:visible}
/* action column: header spacer + right padding >=16px so buttons don't hug the border */
.dash-table thead th:last-child,.dash-table td.crow-act{text-align:right;padding-right:18px}
.dash-table .crow-act .btn{white-space:nowrap}
/* action labels >=14px (brief D2): the .btn.small default is 13px */
.dash-table .crow-act .btn.small{font-size:14px}

.dchip{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;
  padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap;background:var(--band);color:var(--muted)}
.dchip .ic{width:14px;height:14px;flex:0 0 auto}
.dchip.review{background:var(--accent-wash);color:var(--accent)}
.dchip.warn{background:var(--warn-wash);color:var(--warn)}
.dchip.quiet{background:var(--warn-wash);color:var(--warn)}
.dchip.cold{background:var(--danger-wash);color:var(--danger)}
.dchip.ok{background:var(--band);color:var(--text)}
.dchip.arch{background:var(--band);color:var(--muted)}

/* ---------- right rail "Waiting on you" ---------- */
.dash-rail{background:var(--band);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 16px;min-width:0}
.dash-rail h2{font-size:16px;margin:0 0 3px}
.rail-sub{font-size:13px;color:var(--muted);margin:0 0 14px}
.qcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:13px;margin-bottom:11px}
.qcard .qh{font-size:13px;color:var(--muted);margin-bottom:6px}
.qcard .qh b{color:var(--ink);font-weight:600}
.qcard .qlab{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px;
  font-weight:600;color:var(--ink);margin-bottom:5px}
.qcard .qlab .chip{font-size:14px}
.qcard .qval{font-size:14px;color:var(--text);line-height:1.4;margin-bottom:11px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qacts{display:flex;gap:8px;flex-wrap:wrap}
.qacts form{margin:0}
/* rail action labels >=14px (brief D2): the .btn.small default is 13px */
.qacts .btn.small{font-size:14px}
.rail-foot{font-size:13px;color:var(--muted);line-height:1.5;margin:12px 0 0;padding:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md)}
.rail-foot b{color:var(--ink);font-weight:600}

/* Below 1600px the rail drops to a full-width section ABOVE the table (brief D1),
   so the table keeps the full content width — nothing truncated or squeezed — at 1440.
   Side-by-side table + rail only at >=1600px.
   Sidebar collapses to a top nav row at 1024px. */
@media (max-width:1599px){
  .dash-cols{grid-template-columns:minmax(0,1fr);gap:0}
  .dash-rail{margin-top:22px}
  .dash-rail .qcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
  .dash-rail .rail-foot{grid-column:1/-1}
}
@media (max-width:1280px){
  .app-main{padding:22px 20px}
}
@media (max-width:1024px){
  .app-grid{grid-template-columns:1fr}
  .app-side{border-right:0;border-bottom:1px solid var(--line);padding:10px 16px}
  .app-side-inner{position:static}
  .app-nav{flex-direction:row;flex-wrap:wrap;gap:4px 8px}
  .app-navsec{padding:10px 8px 4px}
  .app-main{padding:18px 16px}
}
@media (max-width:640px){
  .dash-table{table-layout:auto}
  .c-prog,.c-active{display:none}
  .dash-table thead th:nth-child(2),.dash-table td:nth-child(2),
  .dash-table thead th:nth-child(4),.dash-table td:nth-child(4){display:none}
}

/* a sent-back field the client has already updated: neutral/positive, never a blocker look */
.client-note.is-updated{background:var(--accent-wash);color:var(--text)}
.client-note.is-updated b{color:var(--accent)}
.client-todo.is-updated{color:var(--accent)}
.client-todo-list.is-updated a{border-color:var(--line);background:var(--accent-wash);color:var(--text)}
.client-todo-list.is-updated .bl-reason{color:var(--accent)}