/* North Bound client page. Rules: north-bound/client-pages.md. Dark by default; the reader can
   switch to light; printing is always light. */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/bitter-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/fonts/karla-300-600-latin.woff2") format("woff2");
}
:root {
  color-scheme: dark;
  --ground: #1A2118;
  --card: #212A1F;
  --field: #161C15;
  --ink: #E2DED5;
  --ink-2: #A8A49A;
  --rule: rgba(226, 222, 213, .14);
  --edge: rgba(226, 222, 213, .30);
  --label: #C9A263;
  --focus: #7FB2D8;
  --forest: #2D5A3D;
  --forest-hover: #36694A;
  --forest-edge: #4F7D5E;
  --on-forest: #FAF7F2;
  --amber-ink: #E9BC7E;
  --amber-bg: #2A2517;
  --amber-rule: #7A5E2A;
  --disc: #C9A263;
  --shadow: rgba(0, 0, 0, .35);
  --serif: "Bitter", Georgia, serif;
  --sans: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root.light {
  color-scheme: light;
  --ground: #FAF7F2;
  --card: #FFFDF9;
  --field: #FFFFFF;
  --ink: #3B3832;
  --ink-2: #6B655B;
  --rule: rgba(59, 56, 50, .16);
  --edge: rgba(59, 56, 50, .34);
  --label: #6B655B;
  --focus: #2671A6;
  --forest-hover: #1F4630;
  --forest-edge: #2D5A3D;
  --amber-ink: #8A4B08;
  --amber-bg: #FDF5E9;
  --amber-rule: #E0B56A;
  --disc: #B48847;
  --shadow: rgba(26, 33, 24, .10);
}
/* A page opened inside the client portal (html.warm, session 3) is dark in the site's warm charcoal,
   like the rest of the portal (Bryson, 2026-09-18: dark was "just really green"). A page opened by its
   link keeps night forest, as client-pages.md says. Screen only: printing stays light. */
@media screen {
  :root.warm:not(.light) { --ground: #1D1B18; --card: #282521; --field: #1D1B18; --shadow: rgba(0, 0, 0, .4); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  line-height: 1.65;
  overflow-wrap: break-word;
}
h1, h2 { font-family: var(--serif); font-weight: 600; color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.85rem, 1.4rem + 2vw, 2.7rem); line-height: 1.12; letter-spacing: -.015em; }
h2 { font-size: clamp(1.35rem, 1.2rem + .7vw, 1.7rem); line-height: 1.2; letter-spacing: -.01em; }
p, ol, ul { margin: 0; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.mark .disc { fill: var(--disc); }
.on-light { display: none; }
:root.light .on-light { display: block; }
:root.light .on-dark { display: none; }

.wrap { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.label {
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
}

/* The document */
.doc { padding-block: clamp(1rem, 3vw, 1.75rem) 7rem; }
.doc-bar { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-bottom: clamp(1rem, 3vw, 1.75rem); }
.doc-bar .back { margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; color: var(--focus); font-weight: 600; text-underline-offset: 3px; }
.theme-toggle {
  min-height: 44px; padding: .45rem .9rem;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--edge); border-radius: 3px;
  font: 600 .8125rem/1 var(--sans); cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); }
.mast { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--rule); }
.mast-text { min-width: 0; }
.mast-text > .label + h1 { margin-top: .6rem; }
.prep { margin-top: 1rem; font-weight: 400; }
.date { color: var(--ink-2); font-size: .9375rem; }
.mark-sm { flex: none; width: 44px; height: 44px; margin-top: .15rem; }

.banner {
  margin-top: 1.5rem; padding: .9rem 1.1rem;
  background: var(--card); border: 1px solid var(--edge); border-radius: 3px;
  font-weight: 400;
}
.intro { padding-block: 1.75rem 2.25rem; font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem); line-height: 1.55; max-width: 38em; }

.part { padding-block: 2.25rem; border-top: 1px solid var(--rule); }
.part > * + * { margin-top: 1rem; }
.part > .label + h2 { margin-top: .5rem; }
.part > p { max-width: 62ch; }
.src { font-size: .875rem; color: var(--ink-2); }

/* Tables */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; font-variant-numeric: tabular-nums; }
th {
  font: 600 .75rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--label); text-align: left;
  padding: .5rem .75rem .5rem 0; border-bottom: 1px solid var(--edge);
}
td { padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
td:first-child, th:first-child { padding-left: .6rem; }
.num { text-align: right; padding-right: 1.5rem; }
th.num { text-align: right; }
tr.leak td { background: var(--amber-bg); color: var(--amber-ink); font-weight: 400; }

/* Findings */
.findings { list-style: none; padding: 0; display: grid; gap: 1rem; }
.finding {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem 1rem;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: 3px;
}
.finding .n { font: 600 1.15rem/1.55 var(--serif); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.f-text { font-weight: 400; }
.finding .src { margin-top: .35rem; }
.respond { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.choice {
  min-height: 44px; padding: .55rem 1rem;
  background: transparent; color: var(--ink);
  border: 1px solid var(--edge); border-radius: 3px;
  font: 600 .9375rem/1.2 var(--sans); cursor: pointer;
}
.choice:hover:not(:disabled) { border-color: var(--ink-2); }
.choice[data-v="right"][aria-pressed="true"] { background: var(--forest); border-color: var(--forest-edge); color: var(--on-forest); }
.choice[data-v="off"][aria-pressed="true"] { background: var(--amber-bg); border-color: var(--amber-rule); color: var(--amber-ink); }
.note { margin-top: .9rem; }

.callout {
  padding: .9rem 1.1rem;
  background: var(--amber-bg); color: var(--amber-ink);
  border-left: 3px solid var(--amber-rule);
  font-weight: 400;
}

/* Answer boxes */
.qs { display: grid; gap: 1.6rem; }
.field label { display: block; margin-bottom: .45rem; font-weight: 400; color: var(--ink); }
.note label { font-weight: 600; font-size: .9375rem; }
textarea {
  display: block; width: 100%; min-height: 5.5rem;
  padding: .75rem .85rem;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 3px;
  font: 400 1rem/1.5 var(--sans);
  resize: vertical;
}
textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
textarea[readonly], button:disabled { opacity: .6; cursor: not-allowed; }
textarea[readonly] { cursor: text; }

/* Finish */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.button {
  min-height: 44px; min-width: 9rem; padding: .85rem 1.3rem;
  background: var(--forest); color: var(--on-forest);
  border: 1px solid var(--forest-edge); border-radius: 3px;
  font: 600 1rem/1.2 var(--sans); cursor: pointer;
}
.button:hover:not(:disabled) { background: var(--forest-hover); }
.done { font-weight: 400; }
.done:focus { outline: none; }

/* Footer, with the full mark as a seal */
.foot { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: .9375rem; }
.mark-seal { width: 72px; height: 72px; }

/* Save line */
.status {
  position: fixed; right: clamp(1rem, 4vw, 2rem); bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: .55rem;
  max-width: min(24rem, calc(100% - 2rem));
  padding: .55rem .9rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 3px;
  box-shadow: 0 2px 10px var(--shadow);
  font: 400 .875rem/1.35 var(--sans);
}
.status .dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--forest-edge); }
.status[data-s="saving"] .dot, .status[data-s="closed"] .dot { background: var(--ink-2); }
.status[data-s="offline"] { background: var(--amber-bg); border-color: var(--amber-rule); color: var(--amber-ink); }
.status[data-s="offline"] .dot { background: var(--amber-rule); }

/* Print is always light, whatever the reader picked on screen */
@media print {
  :root, :root.light {
    color-scheme: light;
    --ground: #FFFFFF; --card: #FFFFFF; --field: #FFFFFF;
    --ink: #3B3832; --ink-2: #6B655B; --label: #6B655B;
    --rule: rgba(59, 56, 50, .16); --edge: rgba(59, 56, 50, .34);
    --amber-ink: #8A4B08; --amber-bg: #FDF5E9; --amber-rule: #E0B56A;
    --disc: #B48847;
  }
  .on-dark { display: none !important; }
  .on-light { display: block !important; }
  .doc-bar, .status, .respond, .actions { display: none !important; }
  body { font-weight: 400; }
  .doc { padding-bottom: 1rem; }
  textarea { resize: none; opacity: 1 !important; }
  .finding, .field { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- the portal, on top of the client page's look ---- */
.doc-bar { justify-content: space-between; align-items: center; gap: 1rem; }
.doc-bar .who { color: var(--ink-2); font-size: .9375rem; }
.lede { margin-top: 1rem; font-weight: 400; max-width: 38em; }
.part > form > * + *, .stack > * + * { margin-top: 1rem; }
.field { display: block; }
.field label { display: block; font-weight: 600; margin-bottom: .4rem; }
input[type="tel"], input[type="email"], input[type="text"], input[type="date"], select {
  display: block; width: 100%; min-height: 48px;
  padding: .7rem .85rem;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 3px;
  font: 400 1.0625rem/1.4 var(--sans);
}
input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
input.code { max-width: 11rem; letter-spacing: .35em; font-variant-numeric: tabular-nums; font-size: 1.35rem; }
.hint, .fine { color: var(--ink-2); font-size: .9375rem; max-width: 40em; }
.fine a, .hint a, .lede a, .part a { color: inherit; text-underline-offset: 3px; }
.button-alt {
  min-height: 44px; padding: .8rem 1.2rem;
  background: transparent; color: var(--ink);
  border: 1px solid var(--edge); border-radius: 3px;
  font: 600 1rem/1.2 var(--sans); cursor: pointer; text-align: left;
}
.button-alt:hover:not(:disabled) { border-color: var(--ink-2); }
.button-alt .note, .button .note { display: block; margin-top: .2rem; color: var(--ink-2); font-weight: 400; font-size: .875rem; }
.button .note { color: inherit; opacity: .8; }
.or { display: flex; align-items: center; gap: .9rem; color: var(--ink-2); font-size: .875rem; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
/* Face ID first (a device that has used it): the button sits where the first section would start, and
   "Or get a code" is the divider, so the texting form under it drops its own rule. */
#passkey-first { padding-top: 2.25rem; }
#passkey-first:not([hidden]) + .part { border-top: 0; padding-top: 1.25rem; }
details.more > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
details.more > summary::marker { color: var(--label); }
details.more[open] > summary { margin-bottom: .75rem; }
/* Opened, the email form's button would sit on the next section's rule: room under it. */
#code-email-more[open] { padding-bottom: 1.5rem; }
.alert {
  padding: .9rem 1.1rem;
  background: var(--amber-bg); color: var(--ink);
  border: 1px solid var(--amber-rule); border-left-width: 4px; border-radius: 3px;
  font-weight: 400;
}
.alert strong { color: var(--amber-ink); }
.places { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.places a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 56px; padding: .9rem 1.1rem;
  background: var(--card); color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule); border-left: 4px solid var(--forest-edge); border-radius: 3px;
}
.places a:hover { border-color: var(--edge); border-left-color: var(--forest-edge); }
.places .name { font-weight: 600; }
.places .role { color: var(--ink-2); font-size: .875rem; white-space: nowrap; }
/* Rows that aren't links (a contact, a device, a session): the same card, but they wrap, because at
   phone width "last seen ..." and a "Take off file" button won't sit on one line. */
.rows > li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem;
  padding: .9rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--rule); border-left: 4px solid var(--forest-edge); border-radius: 3px;
}
.rows .role { white-space: normal; }
.rows .name.code { letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.rows .inline-form { display: block; }
/* A row that is nothing but a choice ("send a code to ..."): the whole row is the button. */
.picks > li { padding: 0; }
.picks .inline-form { width: 100%; }
.picks .linklike { display: block; width: 100%; padding: .95rem 1.1rem; color: var(--ink); font-weight: 600; font-size: 1rem; text-align: left; text-decoration: none; }
.picks .linklike:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Links that stand on their own, not inside a sentence, are full 44 px tap targets on every screen (the
   phone and keyboard pass, 2026-09-25: they were 18 to 28 px tall): the footer's, a row of links (the
   account part, the foot of each page on Bryson's side), and a paragraph that is only links (class
   "links": "Back to ...", "Older", "Decline it"). A link inside a sentence stays text. */
.foot a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: inherit; text-underline-offset: 3px; }
.inline-form { display: inline; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; }
.row a, .links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.linklike { background: none; border: 0; padding: 0; min-height: 44px; color: var(--ink-2); font: inherit; font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { color: var(--ink); }

/* ================================================================ the client's space (session 3)
   The work order Bryson picked on 2026-09-22 (design C of three): the shop copy says where the job
   stands; the tear-off customer copy, on the yellow of a carbon set, says what we need from you; the
   job folder (pages, files, messages) sits under it on a stone band. */

/* Warm charcoal dark across the whole portal, as on the website, instead of night forest (Bryson,
   2026-09-18). Screen only, so printing stays light. */
@media screen {
  :root:not(.light) { --ground: #1D1B18; --card: #282521; --field: #1D1B18; --shadow: rgba(0, 0, 0, .4); }
}
:root { --link: #7FB2D8; --stone: #3B3832; --cream: #FAF7F2; --strip: var(--amber-rule); --strip-ink: #FAF7F2; --tear: var(--ink-2); }
:root.light { --link: #2671A6; --strip-ink: #3B3832; }

.space svg { display: block; }
.space a { color: var(--link); text-underline-offset: 3px; }
.space .mast { align-items: center; padding-bottom: 1.1rem; }
.space .mast-text > .label + h1 { margin-top: .3rem; }
.space .mast h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.9rem); }
.space .cap { margin: 0; font: 600 .8125rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.space .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .4rem; padding-top: .75rem; font-size: 1rem; line-height: 1.35; color: var(--ink-2); }
.space .crumbs a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* Bryson looking at a client's space: the one line above the heading that goes back to his own side of it */
.space .owner-strip { margin: 0; padding-top: .25rem; }
.space .owner-strip a { font-weight: 600; }
.space .alert { margin-top: 1rem; }
.space .empty { color: var(--ink-2); font-size: 1rem; padding: .6rem 0; }

/* The work order */
.space .ticket { display: grid; margin-top: 1.25rem; }
.space .shop { background: var(--card); border: 1px solid var(--edge); border-bottom: 0; border-radius: 3px 3px 0 0; }
.space .job-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem;
  margin: -1px -1px 0; padding: .7rem 1rem .75rem;
  background: var(--forest); color: var(--on-forest); border-radius: 3px 3px 0 0;
}
.space .job-bar .cap, .space .job-bar h2 { color: var(--on-forest); }
.space .job-bar h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.75rem); }
.space .stages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
.space .stage { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .75rem .8rem; border-right: 1px solid var(--rule); }
.space .stage:last-child { border-right: 0; }
.space .stage .name { font: 600 1.125rem/1.2 var(--serif); color: var(--ink); }
.space .stage .state { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: 1rem; line-height: 1.3; color: var(--ink-2); }
.space .stage .tick { flex: none; width: 1rem; height: 1rem; color: var(--ink); }
.space .stage.next .name { color: var(--ink-2); }
.space .stage.now { background: var(--forest); color: var(--on-forest); border-right-color: var(--forest); box-shadow: inset 0 -5px 0 var(--forest-edge); }
.space .stage.now .name, .space .stage.now .state { color: var(--on-forest); font-weight: 600; }
/* "Now" and "since Sep 8" on their own lines, so the middle column never breaks mid-phrase */
.space .stage.now .state { flex-direction: column; align-items: flex-start; gap: 0; }
.space .stage .since { white-space: nowrap; font-weight: 400; }
.space .now-line { padding: .8rem 1rem .5rem; font-weight: 400; font-size: 1.0625rem; line-height: 1.5; }
.space .now-line .cap { display: block; margin-bottom: .15rem; color: var(--label); }
.space .copy-cap { padding: 0 1rem .55rem; text-align: right; color: var(--ink-2); }

/* Your copy: the tear-off part, on the carbon set's yellow sheet */
.space .yours { position: relative; background: var(--amber-bg); color: var(--ink); border: 1px solid var(--amber-rule); border-top: 2px dashed var(--tear); border-radius: 0 0 3px 3px; }
.space .yours::before, .space .yours::after { content: ""; position: absolute; z-index: 1; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--ground); }
.space .yours::before { left: -12px; }
.space .yours::after { right: -12px; }
.space .ask-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .1rem 1rem; padding: .7rem 1rem .75rem; background: var(--strip); color: var(--strip-ink); }
.space .ask-head h2 { color: inherit; font-size: clamp(1.25rem, 1.15rem + .6vw, 1.75rem); }
.space .ask-head .count { font-weight: 600; font-size: 1rem; }
.space .asks { list-style: none; padding: 0; margin: 0; }
.space .asks > li + li { border-top: 1px solid var(--amber-rule); }
.space .asks a, .space .asks .row-still {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 1rem; gap: 0 .8rem; align-items: start;
  min-height: 56px; padding: .75rem 1rem .8rem; color: var(--ink); text-decoration: none;
}
.space .asks a:focus-visible { outline-offset: -3px; }
.space .asks a:hover .title { text-decoration: underline; text-underline-offset: 3px; }
.space .asks .body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.space .asks .title { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.space .asks .meta { display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: 1rem; line-height: 1.4; color: var(--ink-2); }
.space .asks .due { color: var(--ink); font-weight: 600; }
.space .asks .chev { width: 1rem; height: 1rem; margin-top: .25rem; color: var(--ink-2); }
.space .asks-empty { padding: .9rem 1rem; font-weight: 400; }
.space .asks-sub { margin: 0; padding: .75rem 1rem .3rem; border-top: 1px solid var(--amber-rule); font-size: 1.0625rem; }
/* The tick box on each line of the form: empty to do, dashed not ready, filled done */
.space .box { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: .05rem; border: 2px solid var(--ink); border-radius: 2px; }
.space .box .tick { width: 1rem; height: 1rem; }
.space .ask.later .box { border-style: dashed; border-color: var(--ink-2); }
.space .ask.later .title { color: var(--ink-2); }
.space .ask.done .box { background: var(--forest); border-color: var(--forest); color: var(--on-forest); }
.space .ask.done .title { color: var(--ink-2); font-weight: 400; }
/* Owners only: the title shows, nothing else about it does */
.space .private { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink); font-weight: 600; }
.space .private .lock, .space .private-wait .lock { width: .9rem; height: .9rem; flex: none; }
.space .private-wait { display: flex; gap: .5rem; align-items: baseline; padding: .75rem 1rem; border-top: 1px solid var(--amber-rule); font-weight: 400; font-size: 1rem; }
.space .part > .private-wait, .space > .wrap > .private-wait { border: 1px solid var(--amber-rule); background: var(--amber-bg); border-radius: 3px; margin-top: 1rem; }
.space .yours .copy-cap { padding-top: .55rem; border-top: 1px solid var(--amber-rule); color: var(--amber-ink); }

/* Last update from Bryson: its own note on the phone, part of the shop copy on a laptop */
.space .update { margin-top: 1.25rem; padding: .95rem 1rem 1rem; background: var(--card); border: 1px solid var(--edge); border-left: 4px solid var(--forest-edge); border-radius: 3px; }
.space .update-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 1rem; }
.space .update h2 { font-size: 1.25rem; }
.space .update .when { color: var(--ink-2); font-size: 1rem; }
.space .update blockquote { margin: .5rem 0 0; font-weight: 400; font-size: 1.0625rem; line-height: 1.55; }

/* The job folder, on stone */
.space .folder {
  --ink: #FAF7F2; --ink-2: #A8A49A; --label: #C9A263;
  --rule: rgba(250, 247, 242, .16); --edge: rgba(250, 247, 242, .34);
  --link: #7FB2D8; --focus: #7FB2D8;
  margin-top: 2.25rem; padding-block: 1.75rem 2rem;
  background: var(--stone); color: var(--ink);
  /* full width of the screen without widening the page */
  box-shadow: 0 0 0 100vmax var(--stone); clip-path: inset(0 -100vmax);
}
.space .folder h2 { color: var(--ink); }
.space .drawers { display: grid; gap: 1.75rem; margin-top: 1rem; }
.space .drawer h3 { padding-bottom: .4rem; border-bottom: 2px solid var(--ink); font: 600 1.125rem/1.3 var(--serif); color: var(--ink); margin: 0; }
.space .drawer h4 { margin-top: .9rem; color: var(--label); }
.space .sheets { list-style: none; padding: 0; margin: 0; }
.space .sheets li { border-bottom: 1px solid var(--rule); }
.space .sheets a, .space .thread {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .1rem 1rem;
  min-height: 52px; padding: .7rem 0; color: var(--ink); text-decoration: none;
}
.space .sheets a:hover .nm, .space .thread:hover .nm { text-decoration-thickness: 2px; }
.space .nm { font-weight: 600; text-decoration: underline; text-decoration-color: var(--link); text-underline-offset: 3px; overflow-wrap: anywhere; }
.space .st { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--ink-2); font-size: 1rem; }
.space .tag { display: inline-block; padding: 0 .45rem; border: 1px solid var(--edge); border-radius: 2px; color: var(--ink); font-weight: 600; font-size: 1rem; line-height: 1.5; }
.space .tag.shut { color: var(--ink-2); border-style: dashed; }
.space .tag.new { background: var(--cream); border-color: var(--cream); color: var(--stone); }
.space .thread { flex-direction: column; align-items: stretch; gap: .3rem; border-bottom: 1px solid var(--rule); }
.space .thread-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem 1rem; }
.space .thread .last { font-weight: 400; font-size: 1.0625rem; line-height: 1.5; }
.space .more-link { margin-top: .5rem; font-size: 1rem; color: var(--ink-2); }
.space .more-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Lists on their own screens (pages, files): the same sheets, on the page's own ground */
.space .sheets.plain { margin-top: .5rem; }

/* Account */
.space .account { margin-top: 1.5rem; border-top: 0; }
.space .account > * + * { margin-top: .5rem; }
/* A row of links is a full tap target everywhere (.row a, near the top); "all ..." links here too. */
.space .all a { display: inline-flex; align-items: center; min-height: 44px; }
.space .account .linklike { font-size: 1rem; }
.space .switch > summary { color: var(--ink-2); font-weight: 400; }
.space .switch .places { max-width: 28rem; }
.space .switch .places a { color: var(--ink); }
.space .switch .role { font-size: 1rem; }
.space .foot { font-size: 1rem; }
.space .foot a { color: inherit; }

/* One request */
.space .request .meta-line { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.space .request .due { font-weight: 600; }
.space .request .detail { font-weight: 400; font-size: 1.0625rem; }
.space .done-line { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.space .done-line .tick { width: 1.2rem; height: 1.2rem; color: var(--forest-edge); }
.space a.button { display: inline-flex; align-items: center; text-decoration: none; color: var(--on-forest); }

/* Sending a file */
.space .upload h2 { font-size: 1.35rem; }
.space input[type="file"] { display: block; width: 100%; min-height: 48px; padding: .6rem; background: var(--field); color: var(--ink); border: 1px dashed var(--edge); border-radius: 3px; font: 400 1rem/1.4 var(--sans); }
.space .choose { border: 1px solid var(--rule); border-radius: 3px; padding: .6rem 1rem .8rem; margin: 0; }
.space .choose legend { padding: 0 .3rem; font-weight: 600; }
/* A tick box on its own line of a form (label.check), outside a .choose group: the same tap-sized row. */
.space .choose label, .space label.check { display: flex; gap: .6rem; align-items: center; min-height: 44px; font-weight: 400; }
/* Only the tick boxes and round choices: a person's name, email and number typed into a .choose group
   (inviting someone, making a company a client) were drawn 1.2rem wide, a 29 px box (pass, 2026-09-25). */
.space .choose input[type="checkbox"], .space .choose input[type="radio"], .space label.check input { width: 1.2rem; height: 1.2rem; accent-color: var(--forest); flex: none; }

/* Messages */
.space .thread-list { list-style: none; padding: 0; display: grid; gap: .9rem; }
.space .msg { padding: .8rem 1rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--card); max-width: 40rem; }
.space .msg.theirs-nb { border-left: 4px solid var(--forest-edge); }
.space .msg.mine { margin-left: auto; background: var(--amber-bg); border-color: var(--amber-rule); }
.space .msg-head { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-size: .9375rem; color: var(--ink-2); }
.space .msg-head .who { color: var(--ink); font-weight: 600; }
.space .msg .about { margin-top: .3rem; font-size: .9375rem; color: var(--ink-2); }
.space .msg-body { margin-top: .35rem; font-weight: 400; white-space: pre-wrap; }
.space textarea { display: block; width: 100%; min-height: 7rem; padding: .7rem .85rem; background: var(--field); color: var(--ink); border: 1px solid var(--edge); border-radius: 3px; font: 400 1.0625rem/1.5 var(--sans); resize: vertical; }
.space textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* The record */
.space .lede-more { margin-top: 1rem; font-weight: 400; max-width: 40em; }
/* minmax(0, 1fr): the column is the screen's width, never the longest unbreakable word in it (a log
   row's detail, an old-style link, a pasted address), so long text wraps instead of the page scrolling
   sideways on a phone. */
.space .entries { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
/* The same for the card lists (a person's ways in, where they're signed in): a long email breaks. */
.space .places { grid-template-columns: minmax(0, 1fr); }
.space .rows .name { overflow-wrap: anywhere; }
.space .entry { padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--rule); border-radius: 3px; }
.space .entry h3 { margin: 0 0 .3rem; font: 600 1.125rem/1.3 var(--serif); }
.space .entry > p { font-weight: 400; }
.space .entry .src { margin-top: .35rem; }
.space .wrong { margin-top: .5rem; }

/* Laptop: the order laid flat */
@media (min-width: 48rem) {
  .space .drawers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}
@media (min-width: 64rem) {
  .space.home .wrap { max-width: 80rem; }
  .space.home .mast { padding-bottom: 1.5rem; }
  .space .ticket { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; margin-top: 1.75rem; background: var(--card); border: 1px solid var(--edge); border-radius: 3px; }
  .space .shop { grid-column: 1; grid-row: 1; border: 0; border-radius: 3px 0 0 0; }
  .space .job-bar { margin: 0; padding: 1rem 1.5rem; border-radius: 3px 0 0 0; }
  .space .stage { padding: 1.1rem 1.5rem 1.2rem; }
  .space .stage .name { font-size: 1.6rem; }
  .space .now-line { padding: 1.2rem 1.5rem .6rem; font-size: 1.25rem; max-width: 40em; }
  .space .copy-cap { padding: 0 1.5rem .7rem; }
  .space .yours { grid-column: 2; grid-row: 1 / span 2; border: 0; border-left: 2px dashed var(--tear); border-radius: 0 3px 3px 0; display: flex; flex-direction: column; }
  .space .yours::before { top: -12px; left: -12px; right: auto; }
  .space .yours::after { top: auto; bottom: -12px; left: -12px; right: auto; }
  .space .ask-head { padding: 1rem 1.5rem; border-radius: 0 3px 0 0; }
  .space .asks { flex: 1; }
  .space .asks a, .space .asks .row-still { padding: 1rem 1.5rem 1.05rem; }
  .space .asks .title { font-size: 1.125rem; }
  .space .asks-sub { padding: .85rem 1.5rem .35rem; }
  .space .yours .copy-cap { padding: .7rem 1.5rem; }
  .space .update { grid-column: 1; grid-row: 2; margin: 0; padding: 1.25rem 1.5rem 1rem; background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; }
  .space .update blockquote { font-size: 1.125rem; max-width: 40em; }
  .space .folder { margin-top: 3rem; padding-block: 2.25rem 2.5rem; }
  .space .drawers { gap: 3rem; }
}
@media print {
  .space .yours::before, .space .yours::after { display: none; }
  .space .folder { box-shadow: none; clip-path: none; background: none; color: #3B3832; --ink: #3B3832; --ink-2: #6B655B; --rule: rgba(59, 56, 50, .16); }
  .space .switch, .space .upload { display: none; }
}

/* ================================================================ Bryson's side: the owner desk (session 4)
   Design C of three, picked 2026-09-24 (network job 2026-09-24-nb-portal-owner-desk): a survey of the
   business taken from today. Since the desk cleanup (session 8, chunk 2) the desk itself is a short Today
   list in one column (Needs you, Due, Your clients, Heads up) and the tally, the carbon-yellow draft cards
   and the lists around it are gone; inquiries are still slips from the website form on the inbox page;
   the companies are a plain list in three groups, and the old pipeline is kept behind a "Board view" fold
   as the website's survey line on graph paper on a stone band, one station under another (the sweep, desk
   cleanup chunk 3). .owner is every screen on his side, so the shared pieces (the headings, the slips, the
   survey line) look the same wherever they show; .desk is the desk (/admin) itself; .pipe is the inbox and
   pipeline page. Every tap target is 44 px tall or more. */

/* Tokens, from design.md and client-pages.md, or the warm charcoal */
:root {
  /* Inquiry slips: paper that came in from outside. Cream on the dark theme, white on the light one. */
  --paper: #FAF7F2;
  --paper-edge: #FAF7F2;
  --paper-ink: #3B3832;
  --paper-ink-2: #6B655B;
  --paper-rule: rgba(59, 56, 50, .34);
  --paper-link: #2671A6;
  /* The pipeline band: stone in both themes, with ocean linework, like the website's stone band */
  --band: #3B3832;
  --band-ink: #FAF7F2;
  --band-ink-2: #A8A49A;
  --band-rule: rgba(250, 247, 242, .16);
  --band-edge: rgba(250, 247, 242, .34);
  --pen: #7FB2D8;
  --pen-soft: rgba(127, 178, 216, .5);
  /* Stakes on the band follow the page's theme: these carry the page's own colors onto the band */
  --stake: #1D1B18;
  --stake-edge: rgba(226, 222, 213, .14);
  --t-ink: var(--ink);
  --t-ink-2: var(--ink-2);
  --t-rule: var(--rule);
  --t-edge: var(--edge);
  --t-link: var(--link);
}
:root.light {
  --paper: #FFFFFF;
  --paper-edge: rgba(59, 56, 50, .34);
  --stake: #FFFDF9;
  --stake-edge: #FFFDF9;
}

/* Shared: every screen on his side */
.owner svg { display: block; }
.owner a { color: var(--link); text-underline-offset: 3px; }
.owner .vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.owner .go { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.owner a.button { display: inline-flex; align-items: center; justify-content: center; color: var(--on-forest); text-decoration: none; }
/* A link drawn as the quiet button reads like the <button> one beside it, not as blue link text (".owner a" and
   ".space a" outrank the plain .button-alt rule). */
.owner a.button-alt { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.owner .empty { color: var(--ink-2); font-size: 1rem; padding: .6rem 0; }
/* A date or a next step that is today, or has gone by (the words say which) */
.owner .flag {
  display: inline-block; padding: 0 .45rem;
  background: var(--amber-bg); color: var(--amber-ink);
  border: 1px solid var(--amber-rule); border-radius: 2px;
  font-weight: 600; line-height: 1.5;
}

/* Each part opens like a field-book page: the heading, its count in a box, a heavy rule */
.owner .sec { margin-top: 2.5rem; scroll-margin-top: 1rem; }
.owner .sec-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-bottom: 1rem; padding-bottom: .5rem;
  border-bottom: 2px solid var(--ink);
}
.owner .sec-head .n {
  flex: none; display: grid; place-items: center;
  min-width: 2.25rem; height: 2.25rem; padding: 0 .35rem;
  border: 2px solid var(--ink); border-radius: 2px;
  font: 600 1.125rem/1 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.owner .sec > .hint { margin: -.4rem 0 1rem; font-size: 1rem; }
.owner .sec-more { margin-top: .4rem; }
/* Low-weighted (:where), so each piece's own heading rule below wins */
.owner :where(.sec, .survey) :where(h3, h4) { margin: 0; font-family: var(--serif); font-weight: 600; color: var(--ink); }

/* New inquiries: a slip for each, the paper copy of what they typed into the website form */
.owner .slips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.owner .slip {
  --ink: var(--paper-ink); --ink-2: var(--paper-ink-2); --rule: var(--paper-rule);
  --link: var(--paper-link); --focus: var(--paper-link);
  padding: .75rem 1rem .6rem;
  background: var(--paper); color: var(--ink); font-weight: 400;
  border: 1px solid var(--paper-edge); border-radius: 3px;
}
.owner .slip-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem;
  padding-bottom: .45rem; border-bottom: 2px dashed var(--rule);
  color: var(--ink-2); font-weight: 600; font-size: 1rem; line-height: 1.4;
}
.owner .slip h3 { margin-top: .6rem; font-size: 1.375rem; line-height: 1.2; overflow-wrap: anywhere; }
.owner .fields { display: flex; flex-wrap: wrap; gap: .1rem 1.25rem; margin: .3rem 0 0; font-size: 1rem; line-height: 1.5; }
.owner .fields div { display: flex; flex-wrap: wrap; gap: 0 .35rem; min-width: 0; }
.owner .fields dt { color: var(--ink-2); }
.owner .fields dt::after { content: ":"; }
.owner .fields dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.owner .fields dd.none { font-weight: 400; color: var(--ink-2); }
.owner .wrote { margin: .75rem 0 0; }
.owner .wrote figcaption { font-weight: 600; font-size: 1rem; color: var(--ink-2); }
.owner .wrote blockquote {
  margin: .3rem 0 0; padding: .15rem 0 .15rem .9rem;
  border-left: 3px solid var(--link);
  font-size: 1.0625rem; line-height: 1.5; overflow-wrap: anywhere;
}
.owner .slip-go { margin-top: .35rem; }

/* The pipeline: a survey line on stone, with graph paper under it */
.owner .survey {
  --ink: var(--band-ink); --ink-2: var(--band-ink-2); --rule: var(--band-rule); --edge: var(--band-edge);
  --link: var(--pen); --focus: var(--pen);
  position: relative; isolation: isolate;
  /* on a phone the band runs edge to edge; the graph paper with it */
  margin: 3rem calc(-1 * clamp(1rem, 4vw, 2rem)) 0;
  padding: 1.75rem clamp(1rem, 4vw, 2rem) 1.5rem;
  background: var(--band); color: var(--ink); font-weight: 400;
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
}
/* The graph paper reaches as far each side as the band's own clip lets show, so it runs the band's full
   width however narrow the column is. The screen clips it sideways (clip, not hidden: hidden would make
   the screen a scroll box, and the tally would stop staying in view). */
.owner.doc { overflow-x: clip; }
.owner .graph { position: absolute; z-index: -1; top: 0; left: -100vmax; width: calc(100% + 200vmax); height: 100%; }
.owner .survey .sec-head { margin-bottom: 0; }

.owner .stations { position: relative; list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
/* The line: down the left on a phone */
.owner .stations::before {
  content: ""; position: absolute; left: 10px; top: .9rem; bottom: .5rem;
  border-left: 2px dashed var(--pen-soft);
}
.owner .station { position: relative; min-width: 0; padding-left: 1.9rem; }
/* The station: a ring on the line */
.owner .station::before {
  content: ""; position: absolute; left: 0; top: .2rem;
  width: 22px; height: 22px; border: 2px solid var(--pen); border-radius: 50%;
  background: var(--band);
}
.owner .st-head h3 { font-size: 1.3rem; line-height: 1.2; }
.owner .st-none { margin-top: .4rem; color: var(--ink-2); font-size: 1rem; }

/* Each company, staked at its station, in the page's own colors */
.owner .stakes { list-style: none; margin: .65rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; }
.owner .stake {
  --ink: var(--t-ink); --ink-2: var(--t-ink-2); --rule: var(--t-rule); --edge: var(--t-edge);
  --link: var(--t-link); --focus: var(--t-link);
  position: relative; padding: .4rem .8rem .75rem;
  background: var(--stake); color: var(--ink);
  border: 1px solid var(--stake-edge); border-radius: 3px;
}
.owner .stake:hover { border-color: var(--ink-2); }
.owner .stake h4 { font-size: 1.125rem; line-height: 1.3; }
/* The name goes to the company's page: 44 px tall on its own (the round's one fix), and the whole
   stake answers a tap too */
.owner .stake-go {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--link); text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.owner .stake-go::after { content: ""; position: absolute; inset: 0; border-radius: 3px; }
.owner .stake p { margin-top: .2rem; font-size: 1rem; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.owner .stake .t-next { color: var(--ink); }
.owner .stake .k, .owner .stake strong { font-weight: 600; }
.owner .stake.past .stake-go { color: var(--ink-2); }

/* Where a client's job stands: Listen, Translate, Build, in three cells */
.owner .jobbar { list-style: none; margin: .55rem 0 .1rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.owner .jobbar li { height: .65rem; border: 1px solid var(--edge); border-radius: 1px; }
.owner .jobbar .j-done { background: var(--ink-2); border-color: var(--ink-2); }
.owner .jobbar .j-now { background: var(--forest-edge); border-color: var(--forest-edge); }

/* The desk itself */
.desk { font-weight: 400; }
.desk.doc { padding-top: .5rem; }
/* A page that starts with the owner bar has nothing above it: the bar is the top, so it sits flush when the
   page is unscrolled and does not jump up when it sticks. */
.doc:has(> .wrap > .ownerbar:first-child) { padding-top: 0; }
.desk .doc-bar { margin-bottom: .5rem; }
.desk .doc-bar .who { font-size: 1rem; }
.desk .mast { align-items: center; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 0; }
.desk .mast-text > .label + h1 { margin-top: .3rem; }
.desk .mast h1 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.9rem); }
.desk .mast .lede { margin-top: .25rem; color: var(--ink-2); font-size: 1rem; }
.desk .alert { margin-block: 0 1rem; }

/* The desk is a short Today page in one column, the portal's own measure (desk cleanup, chunk 2): Needs you, Due, Your clients
   and, only when something is wrong, Heads up. Every row is a whole-row link, 56 px or more, with no counts
   in boxes and no colored bands; the owner bar above it is the way to everything else. */
.desk .today .sec { margin-top: 2rem; }
.desk .today > :first-child { margin-top: 0; }
.desk .calm { padding: 1rem 0; color: var(--ink-2); font-size: 1.125rem; }

/* A list of rows: needs you, your clients, heads up */
.owner .needs, .owner .heads, .owner .duelist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.owner .need, .owner .head, .owner .due-row { border-bottom: 1px solid var(--rule); }
.owner .need a, .owner .head a {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 56px; padding: .55rem 0;
  color: var(--ink); text-decoration: none;
}
.owner .need a:hover .need-what, .owner .head a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.owner .need-text { display: flex; flex-direction: column; min-width: 0; }
.owner .need-kind { color: var(--ink-2); font-size: .875rem; line-height: 1.3; }
.owner .need-what { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; overflow-wrap: anywhere; }
.owner .need-note { color: var(--ink-2); font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.owner .need-fresh { color: var(--ink); font-size: 1rem; line-height: 1.4; font-weight: 600; }
.owner .need .chev, .owner .head .chev { flex: none; width: 1rem; height: 1rem; color: var(--ink-2); }
.owner .need-identity .need-kind { color: var(--ink); font-weight: 600; }
.owner .needs-more, .owner .heads-fold { margin-top: .25rem; }
.owner .needs-more > summary, .owner .heads-fold > summary {
  display: flex; align-items: center; min-height: 44px; padding: 0 .25rem;
  font-weight: 600; cursor: pointer; list-style: none;
}
.owner .needs-more > summary::-webkit-details-marker, .owner .heads-fold > summary::-webkit-details-marker { display: none; }
.owner .needs-more > summary::before, .owner .heads-fold > summary::before { content: "+"; display: inline-block; width: 1.25rem; }
.owner .needs-more[open] > summary::before, .owner .heads-fold[open] > summary::before { content: "-"; }
.owner .head { padding: .55rem 0; min-height: 56px; display: flex; align-items: center; }
.owner .head > span { line-height: 1.45; }
.owner .head a { padding: 0; width: 100%; }
.owner .heads { border-top-color: var(--amber-rule); }
.owner .head { border-bottom-color: var(--amber-rule); }

/* Due: the task, when it is due, and its own Done button to the right */
.owner .due-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem 0; min-height: 56px; }
.owner .due-text { min-width: 0; }
.owner .task-title {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); font-weight: 600; font-size: 1.0625rem; line-height: 1.35;
  text-decoration: underline; text-decoration-color: var(--link); text-underline-offset: 3px; overflow-wrap: anywhere;
}
.owner .task-title:hover { text-decoration-thickness: 2px; }
.owner .task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .9rem; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.owner .task-meta .when { color: var(--ink); font-weight: 600; }
.owner .done-form { flex: none; margin: 0; }
.owner .done-btn { min-width: 4.5rem; text-align: center; }

/* Sign-ins on the People page: counts and words only, one line a person */
.owner .since { list-style: none; margin: 0; padding: 0; }
.owner .since li { border-bottom: 1px solid var(--rule); }
.owner .since a, .owner .since .still {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .35rem 1rem;
  min-height: 56px; padding: .55rem 0;
  color: var(--ink); text-decoration: none;
}
.owner .since .co { font-weight: 600; overflow-wrap: anywhere; }
.owner .since a .co { text-decoration: underline; text-decoration-color: var(--link); text-underline-offset: 3px; }
.owner .since a:hover .co { text-decoration-thickness: 2px; }
.owner .counts { display: flex; flex-wrap: wrap; gap: .4rem; }
.owner .counts > span { color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.owner .sec-signins h3 { margin: 1.25rem 0 .4rem; font-size: 1.0625rem; }

/* Read-only status rows (outside sign-ins on Settings): the name, then what it is, each on its own line. */
.owner .status-rows { list-style: none; margin: .5rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.owner .status-rows li { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.owner .status-rows .name { display: block; color: var(--ink); font-weight: 600; font-size: 1.0625rem; }
.owner .status-rows .role { display: block; color: var(--ink-2); font-weight: 400; font-size: 1rem; overflow-wrap: anywhere; }
/* The footer's links and a line of links are full tap targets on every screen (.foot a, .links a, near
   the top); here the footer keeps its own color against .owner a. */
.owner .foot { font-size: 1rem; }
.owner .foot a { color: inherit; }

/* Laptop: the inbox's slips sit side by side on the pipeline page; the board stays one column in the same
   measure as every other owner page, so the owner bar never changes width from page to page. */
@media (min-width: 64rem) {
  .desk .mast { padding-bottom: 1.5rem; }
  .pipe .slips { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
}

@media print {
  .owner .survey { box-shadow: none; clip-path: none; background: none; color: #3B3832; --ink: #3B3832; --ink-2: #6B655B; --rule: rgba(59, 56, 50, .16); --edge: rgba(59, 56, 50, .34); --pen: #2671A6; }
  .owner .graph, .desk .done-form { display: none; }
}

/* Questionnaires, Bryson's screens (session 8, chunk Q3): one person's answers as quoted blocks, and the
   handover with its copy line. What a stranger typed is drawn escaped inside <bdi>, wrapped and isolated,
   so a right-to-left override in an answer cannot reorder the page around it. */
.owner .qa-h { margin: 1.5rem 0 0; padding-bottom: .3rem; border-bottom: 2px solid var(--ink); font: 600 1.125rem/1.3 var(--serif); overflow-wrap: anywhere; }
.owner .qa-q { margin: 1.1rem 0 .3rem; font-weight: 600; overflow-wrap: anywhere; }
.owner .qa-a { margin: 0 0 .5rem; padding: .6rem .9rem; border-left: 4px solid var(--forest-edge); border-radius: 0 3px 3px 0; background: var(--card); font-weight: 400; white-space: pre-wrap; overflow-wrap: anywhere; }
.owner .qa-a.none { border-left-style: dashed; color: var(--ink-2); }
.owner .qa-a bdi { unicode-bidi: isolate; }
/* Settings (session 8, review): the small print and the On/Off word keep air from the control under them, and
   the state word reads as a small label. Only the settings page's lists carry .roomy. */
.owner .entries.roomy > .entry > * + * { margin-top: .5rem; }
.owner .entries.roomy .state strong { display: inline-block; padding: .1rem .55rem; border: 1px solid var(--ink-2); border-radius: 3px; }
.owner .act-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .75rem; }
.owner .act-row .button, .owner .act-row .button-alt { width: auto; }
.owner .copy-note { margin-top: .5rem; }
.owner .handover-one { margin-top: 1.25rem; }
.owner .link-box { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1rem; overflow-wrap: anywhere; }
/* The Quo text inbox (session 8, chunk 3): a text is a stranger's words, so every line that carries one wraps
   (a long number, a long name, an unbroken run) and the page never scrolls sideways at 375 px. */
.owner .entry h3, .owner .who-line, .owner .entry .sum, .owner .entry .state, .owner .entry .src { overflow-wrap: anywhere; }
.owner .entry .state { display: flex; flex-wrap: wrap; gap: .3rem .75rem; align-items: center; }
.owner .entry .where { font-weight: 400; }
.owner .entry .act-row form { margin: 0; }
/* Phone pass (session 8): the one text's page draws its tag, time and seen-state like a list entry does (apart,
   not run together), and the line that says what a press did keeps air from the paragraph under it. */
.owner #from .state { display: flex; flex-wrap: wrap; gap: .3rem .75rem; align-items: center; overflow-wrap: anywhere; }
.owner #waiting .alert, .owner #recent .alert { margin-bottom: 1rem; }
/* A fold-out says that it opens: the summary is a flex box, which drops the browser's own triangle. The
   escapes keep this file ASCII (U+25B8 closed, U+25BE open). */
.owner details.more > summary::before { content: "\25B8"; margin-right: .5rem; color: var(--label); }
.owner details.more[open] > summary::before { content: "\25BE"; }
/* ---- the owner bar and the company tabs (desk cleanup, chunk 1) ----
   One slim bar at the top of every owner page: Today, Companies, People, Texts, More. It sticks to the top
   of the screen, bleeds to the page edge on a phone, and every cell is 44 px or more. More is a <details>,
   so it works without script, and its panel scrolls inside itself on a short screen. The current page is
   marked with aria-current and an underline. A company's tab row is a second strip pinned under the bar (with
   the company's name at its left), scrolls sideways inside itself only, and the portal's script brings the lit
   tab to its middle; the page never scrolls sideways. */
.ownerbar {
  position: sticky; top: 0; z-index: 30;
  margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem)); padding-inline: clamp(.25rem, 2.5vw, 1.5rem);
  background: var(--ground); border-bottom: 1px solid var(--rule);
}
.ownerbar-in { display: flex; align-items: stretch; justify-content: space-between; gap: .1rem; }
.ownerbar .ob-mark { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 48px; }
.ownerbar .ob-mark .mark-sm { width: 28px; height: 28px; margin: 0; }
.ownerbar .ob-link, .ownerbar .ob-more > summary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: 44px; padding: 0 .6rem; box-sizing: border-box;
  color: var(--ink); font: 600 .9375rem/1.2 var(--sans); text-decoration: none; list-style: none; cursor: pointer;
  border-bottom: 3px solid transparent;
}
.ownerbar .ob-more > summary::-webkit-details-marker { display: none; }
.ownerbar .ob-link:hover, .ownerbar .ob-more > summary:hover { background: var(--card); }
.ownerbar [aria-current="page"] { border-bottom-color: var(--link); }
/* The rule above loses to ".ownerbar .ob-more > summary" (one element more specific), so More never showed its
   underline on a page that lives under it; this one says it again at the same weight as that rule. */
.ownerbar .ob-more > summary[aria-current="page"] { border-bottom-color: var(--link); }
.ownerbar .ob-more { position: relative; }
.ownerbar .ob-more[open] > summary { background: var(--card); }
.ownerbar .morepanel {
  position: absolute; right: 0; top: 100%; z-index: 40;
  width: 16rem; max-width: calc(100vw - 1rem); padding: .25rem 0;
  max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); border: 1px solid var(--edge); border-radius: 3px;
  box-shadow: 0 8px 24px var(--shadow, rgba(0, 0, 0, .25));
}
.ownerbar .morepanel .more-who { margin: 0; padding: .5rem 1rem .35rem; color: var(--ink-2); font-size: .9375rem; overflow-wrap: anywhere; }
.ownerbar .morepanel a, .ownerbar .morepanel .linklike {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 1rem; box-sizing: border-box;
  color: var(--ink); font: 400 1rem/1.2 var(--sans); text-align: left; text-decoration: none;
}
.ownerbar .morepanel a:hover, .ownerbar .morepanel .linklike:hover { background: var(--ground); }
.ownerbar .morepanel .inline-form { display: block; }
.ownerbar .morepanel hr { margin: .25rem 0; border: 0; border-top: 1px solid var(--rule); }
.ownerbar + .mast, .ownerbar + .backnav + .mast, .ownerbar + .tabs + .mast, .ownerbar + .backnav + .tabs + .mast { padding-top: 1.1rem; }
.owner .backnav { padding-top: .25rem; }
.owner .backlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* A link that sits inside a line of words (the "their people" link in a person's places) still gets a full
   44 px target; it stays on the line with the words and grows the line, not the link's look. */
.owner a.tap { display: inline-flex; align-items: center; min-height: 44px; }
/* The company's row: a strip pinned under the bar (the bar is 48 px and a 1 px rule, so 49 px), the company's
   name at its left and the tabs scrolling beside it. A "more this way" mark shows on a side that has more. */
.owner .tabs {
  position: sticky; top: 49px; z-index: 20;
  display: flex; align-items: stretch;
  margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem)); padding-inline: clamp(1rem, 4vw, 2rem);
  background: var(--ground); border-bottom: 1px solid var(--rule);
}
.owner .tabs-co {
  flex: none; display: block; max-width: 7rem; margin-right: .5rem; padding-right: .6rem;
  border-right: 1px solid var(--rule); color: var(--ink-2); font: 600 .9375rem/1.2 var(--sans); line-height: 2.75rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.owner .tabs-scroll { position: relative; flex: 1 1 auto; min-width: 0; }
.owner .tabs ul { position: relative; list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.owner .tabs ul::-webkit-scrollbar { display: none; }
.owner .tabs-scroll.more-right::after, .owner .tabs-scroll.more-left::before {
  position: absolute; top: 0; bottom: 0; z-index: 1; width: 1.75rem; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ground); color: var(--ink-2); font: 600 1.25rem/1 var(--sans);
}
.owner .tabs-scroll.more-right::after { content: "\203A"; right: -2px; width: calc(1.75rem + 2px); border-left: 1px solid var(--rule); }
.owner .tabs-scroll.more-left::before { content: "\2039"; left: -2px; width: calc(1.75rem + 2px); border-right: 1px solid var(--rule); }
.owner .tabs li { flex: none; }
.owner .tabs a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 .75rem; box-sizing: border-box;
  color: var(--ink); font: 600 .9375rem/1.2 var(--sans); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.owner .tabs a:hover { background: var(--card); }
.owner .tabs a[aria-current="page"] { border-bottom-color: var(--link); }
/* The theme switch is a small text link on Bryson's pages, not a boxed button. */
.owner .doc-bar .theme-toggle { border: 0; background: none; padding: 0 .25rem; color: var(--ink-2); font-weight: 400; font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; }
.owner .doc-bar { margin-bottom: 0; }
/* ---- the sweep of the other owner pages (desk cleanup, chunk 3) ----
   Lists first, the form that adds to them after, and an "Add ..." link beside the list's heading that jumps
   to it. The parts are a little tighter than the client's, a company's facts are one short column, the
   companies are a plain list in three groups (past ones and the board behind a fold), and the folds that
   hold what is rarely needed (More options, Change stage, Why, Show mine) all look alike. A link that
   jumps lands below the sticky bar, not under it. */
.owner [id] { scroll-margin-top: 6.5rem; }
.owner .part { padding-block: 1.5rem; }
.owner .part-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; }
.owner .add-link { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: 0 .25rem; font-weight: 600; }
.owner .facts { flex-direction: column; flex-wrap: nowrap; gap: .35rem; margin: 0; font-size: 1.0625rem; }
.owner .facts div { gap: 0 .5rem; }
.owner .facts-part { padding-top: .5rem; }
.owner .facts-part > .links { margin-top: 0; }
.owner .facts-part > .facts + .links { margin-top: .5rem; }
.owner .co-group h3 { margin: 1.25rem 0 .1rem; font: 600 .8125rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.owner .co-group:first-of-type h3 { margin-top: .25rem; }
.owner .co-group .sheets.plain { margin-top: 0; }
/* A company in the list: its name, and under it in small words where it stands and the next step. */
.owner .co-group .sheets a, .owner .co-past .sheets a { flex-direction: column; align-items: flex-start; gap: .05rem; }
.owner details.co-past, .owner details.mine, .owner details.board-view { margin-top: 1rem; }
.owner details.why { margin-top: .1rem; }
.owner .board-view .survey { margin-top: .75rem; }
.owner details.change-stage { margin-top: 1.5rem; padding-top: .5rem; border-top: 1px solid var(--rule); }
/* ---- the log in sentences (desk cleanup, chunk 4) ----
   A row is its sentence, then its time and the Details fold on one 44 px line; opened, the fold takes the
   whole row below it, so the raw event, who it was and the JSON read at full width. The Advanced fold under
   the Show list looks like the other folds. */
.owner .log-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; align-items: center; }
.owner .log-row > h3 { grid-column: 1 / -1; }
.owner .log-row > p { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.owner .log-row > details { margin: 0; }
.owner .log-row > details[open] { grid-column: 1 / -1; }
.owner .log-row > details[open] > summary { margin-bottom: .25rem; }
.owner details.log-advanced { margin-top: .75rem; }
/* ---- the review of the desk cleanup ----
   A few pieces the second pass needed: a company's overview shows a note as its first words on a row; a task
   with no link is the same bold line as one with; a closed "Add ..." fold looks like the other folds; the log
   and the agent's runs are plain lines, not boxed cards; and the legal line at the foot never leaves a lone
   word on a row. */
.owner .note-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.owner .note-rows li { border-bottom: 1px solid var(--rule); }
.owner .note-rows a {
  display: flex; flex-direction: column; justify-content: center; gap: .1rem;
  min-height: 56px; padding: .55rem 0; color: var(--ink); text-decoration: none;
}
.owner .note-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-weight: 400; line-height: 1.45; overflow-wrap: anywhere;
}
.owner .note-rows a:hover .note-text { text-decoration: underline; text-underline-offset: 3px; }
.owner .note-rows .st { color: var(--ink-2); font-size: .9375rem; }
.owner .group-label { margin: 1.25rem 0 .1rem; font: 600 .8125rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.owner .task-name { margin: 0; color: var(--ink); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; overflow-wrap: anywhere; }
.owner .due-text { padding: .35rem 0; }
.owner details.task-more > summary { min-height: 44px; font-weight: 600; }
.owner details.task-more[open] > summary { margin-bottom: .25rem; }
.owner details.task-more > .msg-body { margin: 0 0 .5rem; }
.owner details.add-fold { margin-top: 1rem; }
.owner details.add-fold > .part { padding-top: .25rem; }
.owner details.done-lately { margin-top: 1rem; }
.owner details.done-lately .entries { margin-top: .25rem; }
.owner details.run-fold { margin-top: 1rem; }
.owner .head-fold { flex-direction: column; align-items: stretch; justify-content: center; }
.owner .head-fold > p { margin: 0; line-height: 1.45; }
.owner .head-fold details { margin: 0; }
.owner .facts-part > details.change-stage { margin-top: .75rem; padding-top: 0; border-top: 0; }
.owner .log-list { gap: 0; }
.owner .log-list > .entry { padding: .5rem 0; background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
.owner .log-list > .entry h3 { font: 600 1rem/1.4 var(--sans); }
.owner .foot p { text-wrap: balance; }
/* A task that is late says so in plain bold words on the row, not in an amber box (the box is for the
   facts and next steps, where a day is the one thing to look at). */
.owner .due-row .flag { padding: 0; background: none; border: 0; color: var(--ink); }
@media (min-width: 30rem) {
  .ownerbar .ob-mark { display: inline-flex; }
  .owner .mast .mark-sm { display: none; }
}
@media (min-width: 48rem) {
  /* On a wider screen the company's name sits on a line of its own over the ten tabs, which are a little
     tighter so they fit the page's measure on one row (a second row would make a pinned strip too tall). */
  .owner .tabs { flex-direction: column; }
  .owner .tabs-co { max-width: none; margin: 0; padding: 0; border-right: 0; font-size: .875rem; line-height: 1.75rem; }
  .owner .tabs a { padding: 0 .4rem; font-size: .8125rem; }
  .ownerbar-in { justify-content: flex-start; gap: .25rem; }
  .ownerbar .ob-more { margin-left: auto; }
}