/* R14 — the application shell and the five everyday destinations.
   Owner of the composition approved in APPROVED_DESIGN/full-flow/01..05 and
   option-b-focused-board.png: ONE compact black bar carrying the wordmark and
   ONE Maisie entry, a clear title/back/context block, grouped white surfaces on
   a cool grey page, and one predictable bottom navigation.

   It inherits the board workspace's palette outright (board-workspace.css owns
   the --bw-* tokens) so the board screen and these five screens are one world
   rather than two. Nothing here hides a status, a role control or a failure:
   the truthful draft / not-valid-for-issue line and the save state are
   recomposed compactly, not removed — see .so-notice and #save-state below. */

/* ── 1. The one compact brand bar ──────────────────────────────────────────
   The rejected chrome stacked: wordmark + CERTIFICATION suffix, a
   Desktop/On site switch, a floating save chip, a Drafts button, a Settings
   button and a full-width prototype strip — six controls before any content.
   Here the bar carries the wordmark and Maisie. The surface switch is NOT
   deleted (it is the real renderer switch and desktop is still a legitimate
   way to work): it moves to Settings → Screen layout, and it stays visible in
   the bar at desktop widths where it is the relevant control. */
body.so-shell .proto-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:10px;
  min-height:56px; height:auto; padding:8px 16px; box-sizing:border-box;
  background:var(--so-page); border-bottom:1px solid var(--so-line); color:var(--so-text);
}
body.so-shell .proto-brand{
  flex:0 0 auto; font-size:19px; font-weight:800; letter-spacing:-.02em;
  color:var(--so-text); text-decoration:none; text-transform:uppercase; line-height:1;
}
body.so-shell .proto-brand span{ color:var(--bw-accent); }
body.so-shell .proto-brand small{ display:none; }
body.so-shell .so-maisie{
  margin-left:auto; flex:0 0 auto;
  min-height:40px; padding:0 18px; border-radius:11px;
  background:var(--so-panel-2); border:1px solid var(--so-line-strong); color:var(--so-text);
  font-size:14px; font-weight:700; letter-spacing:-.01em; cursor:pointer;
}
body.so-shell .so-maisie:hover{ background:var(--so-panel-2); }
body.so-shell .so-maisie:focus-visible{ outline:2px solid var(--bw-accent); outline-offset:2px; }
/* The save state is the answer to "is my work safe". On the certificate
   workspace board-workspace.js moves this same node onto the revision line; on
   every other screen it stays here, as a readable chip, never invisible. */
/* prototype.css hides this chip and mobile-polish.css used to float it over the
   wordmark on phones; both of those legacy chrome rules are retired at their
   owner for this shell (`:not(.so-shell)`), so the chip is simply a readable
   part of the bar here. */
body.so-shell .proto-header #save-state{
  order:3; flex:0 0 auto; display:inline-flex; align-items:center; position:static; margin:0;
  max-width:42vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:5px 10px; border-radius:8px; background:var(--so-panel-2); border:1px solid var(--so-line-strong);
  color:var(--so-text); font-size:11.5px; font-weight:650; line-height:1.25; cursor:pointer;
}
body.so-shell .proto-header #save-state[data-state=conflict],
body.so-shell .proto-header #save-state[data-state=signed-out]{ background:rgba(255,110,97,.14); border-color:#ff6e61; color:#ff8f85; }
body.so-shell .proto-header #save-state[data-state=saved]{ background:rgba(62,207,142,.12); border-color:#2f7d59; color:#5fd79e; }
/* Retained, not prominent: the real renderer switch and the Drafts shortcut are
   the desktop window's controls. Below 900px the bottom navigation is the way
   around and Settings → Screen layout is the way to the desktop renderer. */
body.so-shell .proto-switch{ order:4; flex:0 0 auto; margin:0; display:flex; gap:6px; }
body.so-shell .proto-switch button{ min-height:36px; padding:0 12px; border-radius:9px; background:var(--so-panel-2); border:1px solid var(--so-line-strong); color:var(--so-text); font-size:12px; font-weight:650; }
body.so-shell .proto-switch button.active{ background:var(--bw-accent); border-color:var(--bw-accent); color:var(--so-text); }
body.so-shell .proto-header > .btn{ order:5; min-height:36px; padding:0 12px; border-radius:9px; background:var(--so-panel-2); border:1px solid var(--so-line-strong); color:var(--so-text); font-size:12px; }
@media(max-width:899px){
  /* The desktop window keeps these; the portrait journey reaches Drafts and
     Settings through the bottom navigation, and the surface switch through
     Settings → Screen layout. Nothing is removed from the app. */
  body.so-shell .proto-switch,
  body.so-shell .proto-header > .btn,
  /* workflow.css declares `.wf-settings-button{display:block!important}`, so
     retiring it from the portrait chrome has to answer in the same terms. The
     control itself is untouched and still runs wfSettings() on the desktop
     window; the bottom navigation is its portrait route. */
  body.so-shell .wf-settings-button{ display:none !important; }
}

/* ONE Maisie entry. The certificate chrome carries its own `.bw-ask` from the
   days when the brand bar had none; with the shell's entry above it that is the
   second Maisie the owner called out. The shell's button opens exactly the same
   fcAsk(certOpenId) for the open certificate, so the entry is retired here, not
   the capability. */
body.so-shell .bw-ask{ display:none; }

/* The truthfulness strip. It stays, complete and readable, as one quiet line
   rather than a full-width yellow band. */
body.so-shell .proto-notice{
  margin:0; padding:6px 16px; background:var(--so-page); color:var(--so-muted);
  font-size:10.5px; line-height:1.45; letter-spacing:.02em; text-align:left; border:0;
}

/* The certificate skins carry a fluid `svg{width:100%}` rule for their report
   artwork. These icons are drawn at a fixed size and say so here, so an icon
   never inflates into a 140px block inside a row or the navigation. */
body.so-shell .so-tab > svg{ width:24px; height:24px; }
body.so-shell .so-ico > svg{ width:26px; height:26px; }
body.so-shell .so-chev > svg{ width:20px; height:20px; }
body.so-shell .so-back > svg{ width:22px; height:22px; }
body.so-shell .so-search > svg{ width:20px; height:20px; }

/* ── 2. Page ground ───────────────────────────────────────────────────────── */
body.so-shell{ background:var(--bw-page); }
/* design-c.css reserves the job app's fixed topbar with a `main{padding-top:
   56px !important}`. This shell's bar is in normal flow, so that reservation is
   a 56px hole above every page; it is overridden at this one selector rather
   than absorbed into the page's own spacing. */
body.so-shell main#view-certs{ padding:0 !important; max-width:none; margin:0; }
body.so-shell .so-page, body.so-shell .proto-home{ margin:0; }
body.so-shell #certs-body{ background:var(--bw-page); min-height:60vh; }
.so-page{
  display:block; box-sizing:border-box; background:var(--bw-page);
  /* The last row of a page clears the fixed navigation by a full row of space,
     not by a hair: a control you cannot reach is a control that is not there. */
  padding:18px 16px calc(124px + env(safe-area-inset-bottom,0px));
  color:var(--bw-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* The navigation is fixed at every width, so the bottom clearance is too. */
@media(min-width:900px){ .so-page{ max-width:760px; margin:0 auto; } }

/* Title block: round back control, screen name as the big title, one quiet
   context line under it. */
.so-pagehead{ display:flex; align-items:flex-start; gap:12px; margin:4px 0 18px; }
.so-back{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--so-panel); border:1px solid var(--bw-line); color:var(--bw-ink); cursor:pointer;
}
.so-back:focus-visible{ outline:2px solid var(--bw-ink); outline-offset:2px; }
.so-pagehead-t{ min-width:0; flex:1 1 auto; }
.so-pagehead h1{
  margin:0; font-size:27px; line-height:1.12; font-weight:800; letter-spacing:-.025em;
  color:var(--bw-ink); overflow-wrap:anywhere;
}
.so-pagesub{ margin:4px 0 0; font-size:14.5px; line-height:1.35; color:var(--bw-ink-2); overflow-wrap:anywhere; }

/* ── 3. Grouped surfaces and rows ─────────────────────────────────────────── */
.so-group{ background:var(--bw-surface); border-radius:var(--bw-r); overflow:hidden; margin:0 0 16px; }
.so-grouplabel{ margin:22px 2px 8px; font-size:14px; font-weight:750; color:var(--bw-ink-2); letter-spacing:-.01em; }
.so-grouplabel:first-child{ margin-top:2px; }
.so-group h2{ margin:0; padding:16px 16px 10px; font-size:19px; font-weight:800; letter-spacing:-.02em; }
.so-row{
  display:flex; align-items:center; gap:14px; width:100%; box-sizing:border-box;
  min-height:66px; padding:13px 16px; margin:0; text-align:left;
  background:none; border:0; border-top:1px solid var(--bw-line); color:var(--bw-ink);
  font:inherit; cursor:pointer;
}
.so-group > .so-row:first-child, .so-group > h2 + .so-row{ border-top:0; }
.so-row:hover{ background:var(--so-panel); }
.so-row:focus-visible{ outline:2px solid var(--bw-ink); outline-offset:-3px; }
.so-row[disabled]{ cursor:default; color:var(--so-muted); }
.so-row[disabled]:hover{ background:none; }
.so-ico{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:30px; color:var(--bw-ink); }
.so-rowtext{ flex:1 1 auto; min-width:0; }
.so-rowtext strong{ display:block; font-size:16.5px; font-weight:750; letter-spacing:-.015em; line-height:1.25; overflow-wrap:anywhere; }
.so-rowtext small{ display:block; margin-top:3px; font-size:13.5px; line-height:1.35; color:var(--bw-ink-2); overflow-wrap:anywhere; }
.so-rowtext em{ font-style:normal; color:var(--bw-ink-2); }
.so-rowend{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; color:var(--bw-ink-2); font-size:13.5px; text-align:right; }
.so-rowend b{ font-weight:650; color:var(--bw-ink-2); }
.so-chev{ flex:0 0 auto; color:var(--bw-ink); opacity:.75; }

/* The one leading action per screen. */
.so-row-lead{ background:var(--bw-accent); border-top:0; }
.so-row-lead:hover{ background:var(--so-accent); }
.so-row-lead .so-rowtext small{ color:#e0d7ae; }
.so-row-lead .so-chev{ opacity:1; }

.so-note{ margin:10px 2px 0; font-size:12.5px; line-height:1.5; color:var(--bw-ink-2); overflow-wrap:anywhere; }
.so-empty{ padding:18px 16px 20px; border-top:1px solid var(--bw-line); }
.so-empty b{ display:block; font-size:16px; font-weight:750; }
.so-empty span{ display:block; margin-top:5px; font-size:13.5px; line-height:1.45; color:var(--bw-ink-2); }
.so-center{ text-align:center; margin:16px 0 0; font-size:13px; color:var(--bw-ink-2); }

/* Status words. Draft is a state, not a decoration, and never says "saved"
   while a save is pending: the words come from the live record. */
.so-state{ display:inline-block; padding:2px 8px; border-radius:7px; font-size:12px; font-weight:700; background:var(--so-panel); color:var(--so-text); }
.so-state-pending{ background:var(--so-accent); color:var(--so-accent-ink); }
.so-state-conflict{ background:#ea1f1f; color:#eb7276; }
.so-state-attested{ background:#1d6bed; color:#85a9e4; }

/* ── 4. Bottom navigation ────────────────────────────────────────────────── */
/* `nav` carries layout rules from the other skins in this codebase, so this bar
   states its own row layout explicitly rather than inheriting a column. */
body.so-shell nav.so-tabbar, .so-tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:45; width:auto; max-width:none; height:auto;
  display:flex; flex-direction:row; align-items:stretch; gap:0;
  background:var(--so-panel); border-top:1px solid var(--bw-line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.so-tab{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:9px 4px 7px; background:none; border:0; cursor:pointer;
  color:var(--bw-ink-2); font:inherit; font-size:12px; font-weight:650;
}
.so-tab span{ display:block; }
.so-tab-u{ display:block; width:34px; height:3px; border-radius:2px; background:transparent; }
.so-tab[aria-current=page]{ color:var(--bw-ink); font-weight:750; }
.so-tab[aria-current=page] .so-tab-u{ background:var(--bw-accent); }
.so-tab:focus-visible{ outline:2px solid var(--bw-ink); outline-offset:-3px; }
/* The modal settings sheet carries its own copy of the same bar; the page one
   underneath would be unreachable behind the backdrop. */
body.so-sheet .so-tabbar:not(.so-tabbar-sheet){ display:none; }

/* ── 5. Search and filters (03) ──────────────────────────────────────────── */
.so-search{ position:relative; display:block; margin:0 0 12px; }
.so-search input{
  width:100%; box-sizing:border-box; min-height:52px; padding:12px 14px 12px 46px;
  border-radius:13px; border:1px solid var(--bw-line); background:var(--so-panel);
  font:inherit; font-size:16px; color:var(--bw-ink);
}
.so-search input::placeholder{ color:var(--so-muted); }
.so-search svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--so-muted); pointer-events:none; }
.so-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; }
.so-chip{
  min-height:42px; padding:0 16px; border-radius:11px; cursor:pointer;
  background:var(--so-panel); border:1px solid var(--bw-line); color:var(--bw-ink);
  font:inherit; font-size:14px; font-weight:700;
}
.so-chip[aria-pressed=true]{ background:var(--so-page); border-color:var(--so-line); color:var(--bw-accent); }
.so-chip:focus-visible{ outline:2px solid var(--bw-ink); outline-offset:2px; }
.so-sort{ margin-left:auto; }
.so-sort select{
  min-height:42px; padding:0 10px; border-radius:11px; border:1px solid var(--bw-line);
  background:var(--so-panel); font:inherit; font-size:14px; font-weight:650; color:var(--bw-ink);
}

/* ── 6. Fields (04) ──────────────────────────────────────────────────────── */
.so-fields{ padding:4px 16px 18px; }
.so-field{ display:block; margin:0 0 14px; }
.so-field > span{ display:block; margin:0 0 6px; font-size:14px; font-weight:650; color:var(--bw-ink); overflow-wrap:anywhere; }
.so-field input, .so-field select, .so-field textarea{
  width:100%; box-sizing:border-box; min-height:50px; padding:12px 13px;
  border-radius:11px; border:1px solid var(--bw-line); background:var(--so-panel);
  font:inherit; font-size:16px; line-height:1.4; color:var(--bw-ink);
}
.so-field textarea{ resize:vertical; overflow:hidden; }
.so-field input:focus, .so-field select:focus, .so-field textarea:focus{ outline:2px solid var(--bw-ink); outline-offset:-1px; }
.so-field input[disabled], .so-field select[disabled], .so-field textarea[disabled]{ background:var(--so-panel); color:var(--so-text); }
.so-field small{ display:block; margin-top:5px; font-size:12.5px; line-height:1.45; color:var(--bw-ink-2); overflow-wrap:anywhere; }
/* Content outranks column symmetry: a pair shares a row only while both fit.
   Below that width every pair stacks full width. */
.so-pair{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
@media(max-width:459px){ .so-pair{ grid-template-columns:1fr; } }
.so-readonly{ padding:12px 16px; background:var(--so-panel); border-top:1px solid var(--bw-line); font-size:13.5px; color:var(--bw-ink-2); }

/* The page's own save bar. Sits above the navigation, never over the field
   being typed into. */
.so-actions{ display:flex; gap:10px; margin:18px 0 0; }
.so-actions .so-btn{ flex:1 1 0; }
.so-btn{
  min-height:54px; padding:0 18px; border-radius:13px; cursor:pointer;
  background:var(--so-panel); border:1px solid var(--bw-line); color:var(--bw-ink);
  font:inherit; font-size:16px; font-weight:750; letter-spacing:-.01em;
}
.so-btn-lead{ background:var(--bw-accent); border-color:var(--bw-accent); color:var(--so-text); }
.so-btn:focus-visible{ outline:2px solid var(--bw-ink); outline-offset:2px; }
.so-btn[disabled]{ opacity:.55; cursor:default; }
.so-status{ display:block; margin:12px 2px 0; font-size:13.5px; line-height:1.45; color:var(--bw-ink); overflow-wrap:anywhere; }

/* The select readback is deliberate and stays — a closed native select cannot
   be measured, so its selected value is always written out in full underneath
   it (full-value.js). On these pages it reads as part of the field rather than
   as a yellow-barred alert repeating what the control already shows. */
body.so-shell .so-page select + .fv-readback,
body.so-shell .commercial-page select + .fv-readback{
  border-inline-start:0; background:none; padding:5px 2px 0; margin-top:0;
  color:var(--bw-ink-2); font-size:13.5px; font-weight:500;
}
body.so-shell .so-page input + .fv-readback,
body.so-shell .so-page textarea + .fv-readback{
  border-inline-start:0; border-radius:9px; background:var(--so-panel); color:var(--bw-ink);
  padding:8px 10px; font-size:14px;
}

/* ── 7. The settings sheet in the same grammar ───────────────────────────── */
body.so-shell #proto-dialog.commercial-settings{ background:var(--bw-page); }
body.so-shell .commercial-page .so-group{ margin-bottom:16px; }
body.so-shell .pc-row, body.so-shell .commercial-section-list .pc-row{
  display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box;
  min-height:60px; padding:12px 14px; margin:0 0 8px;
  background:var(--so-panel); border:1px solid var(--bw-line); border-radius:12px;
  font:inherit; font-size:16px; font-weight:650; text-align:left; color:var(--bw-ink); cursor:pointer;
}
body.so-shell .pc-row small{ display:block; font-size:13px; font-weight:450; color:var(--bw-ink-2); }
body.so-shell .pc-row > span:first-child{ flex:1 1 auto; min-width:0; }

/* ── R16-F02 — THE BRAND FACES WERE LOADED BUT NEVER ASKED FOR ──────────────
   source/css/style.css declares Clash Display 500/600/700 and Satoshi
   400/500/700, and all six woff2 files sit in source/fonts/. Nothing in any
   app/*.css ever named either family, so the browser had no reason to fetch
   them and every screen rendered in the system UI face instead. Three later
   sheets (prototype.css body, .so-page here, flow-preview.css) each restated a
   system stack, so the intended typography was overridden before it was used.

   The display weights are pinned to 700 rather than the 800 the headings ask
   for: Clash stops at 700, and an unmatched 800 makes the browser synthesise a
   fake bold, which is the smeared look the face was chosen to avoid. */
body, body.so-shell, .so-page{
  font-family:'Satoshi',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
body.so-shell .proto-brand,
.so-pagehead h1,
.so-group h2{
  font-family:'Clash Display','Satoshi',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:700;
}