:root{
  --bg:#F3F6FA; --surface:#FFFFFF; --surface-2:#EAF0F7; --ink:#14213A; --ink-2:#4A5A74; --muted:#7A889E;
  --line:#D9E1EC; --line-2:#C6D2E2; --navy:#0B1D3A;
  --brand:#1A6BB5; --brand-ink:#0F4F8A; --brand-soft:#E3EEFA;
  --good:#1F8A5B; --good-soft:#E2F4EA; --warn:#B97A0C; --warn-soft:#FBF0D9; --bad:#B83A33; --bad-soft:#FBE4E2;
  --good-ink:#176B46; --warn-ink:#8A5A06;
  /* D106, the team redesign: a third grey for small secondary words (5 to 1 on
     every ground it sits on), a softer hairline and ground, a softer shadow. */
  --ink-3:#586780; --line-soft:#E3E9F1; --surface-3:#F7F9FC;
  --shadow-soft:0 1px 2px rgba(20,33,58,.04),0 6px 18px rgba(20,33,58,.05);
  --bar-ink:#DFE8F5; --bar-muted:#B8C7DD; --bar-link:#C9D6E8;
  --shadow:0 1px 2px rgba(20,33,58,.06),0 6px 20px rgba(20,33,58,.06);
  --r:10px;
  --display:"Bricolage Grotesque","DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ui:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px}
h1,h2,h3,p{margin:0}
h1,h2,h3{color:var(--navy)}
strong,b{font-weight:700}
code,.ob-mono{font-family:var(--mono);font-size:.9em}
.ob-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ob-skip{position:absolute;left:8px;top:-60px;z-index:10;background:var(--surface);color:var(--ink);padding:10px 14px;border:1px solid var(--line-2);border-radius:8px}
.ob-skip:focus{top:8px}

/* chrome: the engine's navy bar, the white logotype, the product label beside it */
.ob-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;min-height:60px;padding:10px 16px;background:var(--navy);color:var(--bar-ink)}
.ob-brand{display:flex;align-items:center;flex:none;min-height:44px}
.ob-brand:hover{text-decoration:none}
.ob-logo{display:block;height:28px;width:auto}
.ob-bar-title{display:inline-flex;align-items:center;gap:14px;font-size:13px;color:var(--bar-muted);letter-spacing:.02em;line-height:1.2}
.ob-bar-title::before{content:"";display:block;width:1px;height:20px;background:rgba(255,255,255,.2);flex:none}
.ob-bar-right{margin-left:auto;color:var(--bar-muted);font-size:13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.ob-bar-who{overflow-wrap:anywhere}
.ob-bar :focus-visible,.ob-tabs :focus-visible{outline-color:#FFFFFF}
.ob-bar .ob-btn{background:var(--brand);border-color:var(--brand);color:#FFFFFF;font-size:14px}
.ob-bar .ob-btn:hover{border-color:var(--brand);filter:brightness(1.08)}
/* The tabs continue the bar. Each one is a 44px target; the transparent border
   keeps the painted pill slimmer than the target, as the engine's nav looks. */
.ob-tabs{display:flex;align-items:center;gap:2px;padding:0 6px 4px;background:var(--navy);border-top:1px solid rgba(255,255,255,.1);overflow-x:auto;-webkit-overflow-scrolling:touch}
.ob-tabs form{display:flex;margin:0 0 0 auto}
.ob-tab{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--bar-link);border:6px solid transparent;border-width:6px 3px;border-radius:14px;background:transparent;background-clip:padding-box;font:inherit;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer}
.ob-tab:hover{background-color:rgba(255,255,255,.08);color:#FFFFFF;text-decoration:none}
.ob-tab.on{background-color:var(--brand);color:#FFFFFF}
.ob-page{max-width:1120px;margin:0 auto;padding:20px 16px 72px;display:flex;flex-direction:column;gap:16px}
.ob-bare{max-width:440px;margin:0 auto;padding:40px 16px 72px;display:flex;flex-direction:column;gap:16px}
.ob-bare-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:24px 20px;display:flex;flex-direction:column;gap:16px}
.ob-bare-card h1{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.2;letter-spacing:-.01em}

/* layout helpers */
.ob-body{display:flex;flex-direction:column;gap:14px}
.ob-two{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.ob-two>*{display:flex;flex-direction:column;gap:14px;min-width:0}
.ob-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ob-row>.ob-kpi{flex:1 1 220px}
/* Tap targets: every tick row, disclosure, filter chip and text link a thumb has to hit is 44px tall. */
label.ob-row{min-height:44px;cursor:pointer}
label.ob-row input[type=checkbox],label.ob-row input[type=radio]{width:22px;height:22px;flex:none;margin:0;accent-color:var(--brand)}
summary{display:list-item;min-height:44px;padding:12px 0;cursor:pointer}
a.ob-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
a.ob-pill:hover{text-decoration:none;filter:brightness(.97)}
.ob-back,.ob-thread a,.ob-item-t>a{display:inline-flex;align-items:center;min-height:44px}
.ob-ticks{display:flex;flex-direction:column;gap:0;padding-top:4px}
.ob-grid2,.ob-grid3{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ob-h1{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--navy);text-wrap:balance}
.ob-keep{display:inline-block;max-width:100%}
.ob-h2{font-family:var(--ui);font-size:16px;font-weight:700;color:var(--ink)}
.ob-p{max-width:70ch}
.ob-muted{color:var(--ink-2);font-size:14px}
.ob-eyebrow{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);font-weight:700;display:block}

/* cards */
.ob-card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0}
.ob-card.focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.ob-card-h{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px;color:var(--ink)}
.ob-card-r{font-weight:400;color:var(--ink-2);font-size:14px;font-variant-numeric:tabular-nums}
.ob-card-b{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.ob-note{background:var(--brand-soft);color:var(--ink);padding:12px 14px;border-radius:var(--r);font-size:14.5px}
.ob-empty{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:24px 16px;text-align:center;color:var(--ink-2);background:var(--surface)}

/* KPI tiles */
.ob-kpi{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:4px;background:var(--surface);min-width:0}
.ob-kpi-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.ob-kpi-value{font-family:var(--ui);font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.ob-kpi-value small{font-size:14px;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.ob-kpi-sub{font-size:13px;color:var(--ink-2)}

/* checklist rows: the whole row is the tap target */
.ob-list{display:flex;flex-direction:column}
.ob-item{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-height:44px;padding:10px 0;border-top:1px solid var(--line);color:inherit}
.ob-item:first-child{border-top:0}
a.ob-item:hover{text-decoration:none}
a.ob-item:hover .ob-item-t{text-decoration:underline}
.ob-item-t{flex:1 1 200px;min-width:0}
.ob-item-r{color:var(--ink-2);font-size:13px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}
.ob-check{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;position:relative;background:var(--surface);display:inline-block}
.ob-check.done{background:var(--good);border-color:var(--good)}
.ob-check.done::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ob-check.needs{border-color:var(--warn);background:var(--warn-soft)}
/* D99: an item the team marked Not needed or We set this up, greyed */
.ob-check.waived{border-style:dashed;background:var(--surface-2)}
.ob-item.waived .ob-item-t{color:var(--ink-2)}

/* pills use the soft pairs; day bands use good, warn and bad */
.ob-pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.5;border:1px solid transparent;white-space:nowrap}
.ob-pill.done{background:var(--good-soft);color:var(--good-ink)}
.ob-pill.open{background:var(--surface-2);color:var(--ink-2)}
.ob-pill.needs{background:var(--warn-soft);color:var(--warn-ink)}
.ob-pill.held{background:var(--bad-soft);color:var(--bad)}
.ob-pill.info{background:var(--brand-soft);color:var(--brand-ink)}
.ob-days{font-weight:700;font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}
.ob-days.ok{color:var(--good-ink)} .ob-days.warn{color:var(--warn-ink)} .ob-days.over{color:var(--bad)}
.ob-days.unknown{color:var(--ink-2);font-weight:500}
.ob-progress{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.ob-progress span{display:block;height:100%;background:var(--brand)}

/* buttons and forms */
.ob-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line-2);font:inherit;font-weight:700;font-size:15px;background:var(--surface);color:var(--navy);white-space:nowrap;cursor:pointer;text-align:center}
.ob-btn:hover{text-decoration:none;border-color:var(--brand)}
.ob-btn.primary{background:var(--brand);color:#FFFFFF;border-color:var(--brand)}
.ob-btn.primary:hover{filter:brightness(.95)}
.ob-btn.primary:active{filter:brightness(.9)}
.ob-btn.quiet{background:var(--surface-2);border-color:var(--surface-2);color:var(--brand-ink);font-weight:500}
.ob-btn.quiet:hover{border-color:var(--line-2)}
.ob-btn[disabled]{opacity:.55;cursor:not-allowed}
.ob-form{display:flex;flex-direction:column;gap:14px;margin:0}
.ob-form.inline{display:inline-flex;flex-direction:row;gap:8px}
.ob-bare .ob-form>.ob-btn{width:100%;min-height:50px;font-size:16px}
.ob-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ob-label{font-weight:500;font-size:14px;color:var(--ink)}
.ob-help{color:var(--ink-2);font-size:13px}
.ob-input{width:100%;min-height:44px;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;color:var(--ink);background:var(--surface);font:inherit;font-size:16px}
.ob-input:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
.ob-input::placeholder{color:var(--muted)}
/* round 3 (2.13): a field a form came back about, and what to fix, in red */
.ob-input[aria-invalid=true]{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.ob-err{margin:0;color:var(--bad);font-size:14px;font-weight:600;line-height:1.4}
.ob-input.area{min-height:112px;resize:vertical}
select.ob-input{color:var(--ink);background-color:var(--surface)}
.ob-drop{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:24px 16px;text-align:center;color:var(--ink-2);background:var(--surface)}
.ob-drop.over{border-color:var(--brand);background:var(--brand-soft);color:var(--ink)}

/* kanban: scrolls sideways inside itself on small screens, never the page */
.ob-kanban{display:grid;grid-template-columns:repeat(5,minmax(230px,1fr));gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.ob-kcol{border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);min-height:140px;min-width:0}
.ob-kcol-h{display:flex;justify-content:space-between;gap:6px;padding:10px 12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-2);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.ob-kcard{margin:8px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);display:flex;flex-direction:column;gap:4px;color:var(--ink)}
a.ob-kcard:hover{text-decoration:none;border-color:var(--brand)}
.ob-kcard b{font-size:14px;overflow-wrap:anywhere}
.ob-kcard small{color:var(--ink-2);font-size:12px}

/* tables: the wrapper scrolls, the page does not */
.ob-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
.ob-table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;margin:0;color:var(--ink)}
.ob-table th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:10px 14px;border-bottom:1px solid var(--line);font-weight:700;vertical-align:bottom;white-space:nowrap}
.ob-table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
.ob-table tr:last-child td{border-bottom:0}
.ob-table tbody tr:hover td{background:var(--surface-2)}

/* messages */
.ob-thread{display:flex;flex-direction:column;gap:10px}
.ob-msg{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;max-width:88%;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere;color:var(--ink)}
.ob-msg b{font-size:13px} .ob-msg p{margin:0} .ob-msg small{color:var(--ink-2);font-size:12px}
.ob-msg.client{align-self:flex-start;background:var(--surface)}
.ob-msg.team{align-self:flex-end;background:var(--brand-soft);border-color:transparent}
.ob-msg.ai{align-self:flex-start;background:var(--surface-2);border-color:transparent}

/* the client assistant, "Ask Vuepoint AI": beside the conversation on a wide
   screen (.ob-two), below it on a phone. Its bubbles are wider than a message
   because an answer can hold steps, and its buttons sit on white so they read
   as buttons on the grey answer. */
.ob-ask{scroll-margin-top:12px;min-width:0}
.ob-ask .ob-msg{max-width:100%}
.ob-ask .ob-msg.client{scroll-margin-top:12px}
.ob-answer{display:flex;flex-direction:column;gap:8px}
.ob-answer ol,.ob-answer ul{padding-left:20px}
.ob-msg.ai .ob-btn.quiet{background:var(--surface);border-color:var(--line-2)}
.ob-form.inline.ob-helpful{flex-wrap:wrap;align-items:center}

@media (min-width:720px){
  .ob-bar{padding:10px 24px;min-height:64px}
  .ob-logo{height:34px}
  .ob-tabs{padding:0 18px 4px}
  .ob-tab{padding:0 12px;border-width:6px}
  .ob-page{padding:24px 24px 96px}
  .ob-h1{font-size:30px}
  .ob-bare{padding-top:64px}
  .ob-bare-card{padding:28px}
  .ob-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ob-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .ob-two{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .ob-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ob-kanban{grid-template-columns:repeat(5,minmax(0,1fr));overflow-x:visible}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
@media print{
  .ob-tabs,.ob-skip,.ob-bar-right .ob-btn{display:none}
  /* Paper is white and cards are flat. The navy bar stays a bar only if the printer paints grounds, so its words turn to ink. */
  :root{--bg:#FFFFFF;--shadow:none}
  .ob-bar{background:#FFFFFF;color:var(--ink);border-bottom:1px solid var(--line)}
  .ob-bar-title,.ob-bar-right{color:var(--ink-2)}
  .ob-logo{display:none}
  .ob-brand::after{content:"Vuepoint";font-family:var(--display);font-weight:700;font-size:18px;color:var(--navy)}
}
/* D106, the doors (sign in, the link, not found, an error, the checklist
   email): the card the portal's home leads with. One icon on a soft tile, a
   short headline, one line, one wide button. Both sides share them. */
.ob-bare-card.ob-door{border-color:var(--line-soft);border-radius:20px;box-shadow:0 1px 2px rgba(11,29,58,.05),0 8px 28px rgba(11,29,58,.07);gap:14px;padding:28px 22px}
.ob-bare:has(.ob-door){max-width:480px}
.ob-door h1{font-size:26px;line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
.ob-door-ic{width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;flex:none;margin-bottom:4px;background:var(--brand-soft);color:var(--brand-ink)}
.ob-door-ic.good{background:var(--good-soft);color:var(--good-ink)}
.ob-door-ic.warn{background:var(--warn-soft);color:var(--warn-ink)}
.ob-door-ic svg{width:30px;height:30px}
.ob-door-p{font-size:16px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.ob-door .ob-btn{width:100%;min-height:50px;font-size:16px;border-radius:12px}
.ob-door-btns{display:flex;flex-direction:column;gap:10px}
.ob-door-btns .pt-btn{width:100%}
.ob-door-saved{font-weight:700;color:var(--good-ink)}
.ob-door-more{border-top:1px solid var(--line-soft);margin-top:4px}
.ob-door-more>summary{color:var(--brand-ink);font-weight:500;font-size:15px}
.ob-door-more-b{display:flex;flex-direction:column;gap:12px;padding-bottom:4px}
@media (min-width:720px){
  .ob-bare-card.ob-door{padding:36px 36px 32px}
  .ob-door h1{font-size:28px}
}

/* ===== Team workspace (D106) ===== */
.ob-team .ob-page{max-width:1280px;gap:20px}

/* the header: logo, "Client Growth Platform" (D209), the nav, then the
   person. One row from 1200px; below that the nav takes its own row and
   scrolls sideways inside the bar, never the page. On a phone the name is
   set a little tighter (13px, the gaps 10px, the logo 24px tall) so the
   logo, the name and New client still share the first row at 390 wide; the
   name is never cut. */
.ob-top{background:var(--navy);color:var(--bar-ink)}
.ob-top-in{display:flex;align-items:center;flex-wrap:wrap;column-gap:10px;padding:8px 16px 0}
.ob-top .ob-brand{min-height:44px}
.ob-top .ob-logo{height:24px}
.ob-top-title{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;padding-left:12px;line-height:1.25}
.ob-top-title::before{content:"";position:absolute;left:0;top:50%;width:1px;height:26px;margin-top:-13px;background:rgba(255,255,255,.22)}
.ob-top-product{font-size:13px;letter-spacing:-.01em;font-weight:500;color:var(--bar-ink);white-space:nowrap}
.ob-top-right{margin-left:auto;display:flex;align-items:center;gap:14px;min-width:0}
.ob-top-who{display:none;font-size:13px;color:var(--bar-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.ob-top .ob-btn{background:var(--brand);border-color:var(--brand);color:#FFFFFF;font-size:14px;padding:0 12px}
.ob-top .ob-btn:hover{filter:brightness(1.08)}
.ob-top :focus-visible{outline-color:#FFFFFF}
.ob-nav{order:10;flex:1 1 100%;display:flex;align-items:stretch;gap:0;margin:2px -6px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ob-nav::-webkit-scrollbar{display:none}
.ob-nav-a,.ob-top-out button{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--bar-link);background:none;border:0;font:inherit;font-size:14.5px;font-weight:500;white-space:nowrap;cursor:pointer}
.ob-nav-a:hover,.ob-top-out button:hover{color:#FFFFFF;text-decoration:none}
.ob-nav-a[aria-current="page"]{color:#FFFFFF}
.ob-nav-a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:#FFFFFF}
.ob-top-out{display:flex;margin:0}
.ob-nav .ob-top-out{margin-left:auto}
.ob-top-right .ob-top-out{display:none}
@media (min-width:720px){
  .ob-top-in{padding:8px 24px 0;column-gap:18px}
  .ob-top .ob-logo{height:28px}
  .ob-top-title{flex-direction:row;align-items:baseline;gap:8px;padding-left:18px}
  .ob-top-product{font-size:14px;letter-spacing:normal;color:var(--bar-ink)}
  .ob-top .ob-btn{padding:0 14px}
  .ob-top-who{display:block}
}
@media (min-width:1200px){
  .ob-top-in{flex-wrap:nowrap;min-height:64px;padding:0 28px;column-gap:24px}
  .ob-nav{order:0;flex:0 1 auto;margin:0;align-self:stretch}
  .ob-nav-a{min-height:64px;padding:0 11px}
  .ob-nav-a[aria-current="page"]::after{left:11px;right:11px}
  .ob-nav .ob-top-out{display:none}
  .ob-top-right .ob-top-out{display:flex}
  .ob-top-right .ob-top-out button{min-height:64px;padding:0 4px}
}

/* page heads: the title, and a quiet line or a control on the right */
.ob-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px 20px}
.ob-head-sub{color:var(--ink-2);font-size:14.5px}
.ob-head .ob-h1{margin-right:auto}
.ob-sect-h{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--navy)}
.ob-quiet{color:var(--ink-3);font-size:13.5px}
.ob-stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.ob-subh{margin-top:4px;font-size:14.5px;font-weight:700;color:var(--ink)}

/* state as coloured words (the pill is retired on this side) */
.ob-state{font-weight:700}
.ob-state.good{color:var(--good-ink)}
.ob-state.warn{color:var(--warn-ink)}
.ob-state.bad{color:var(--bad)}
.ob-state.info{color:var(--brand-ink)}
.ob-state.quiet{color:var(--ink-2);font-weight:500}
a.ob-state{display:inline-flex;align-items:center;min-height:44px}
.ob-icon{display:block;width:16px;height:16px;flex:none}
.ob-count{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;line-height:1;color:var(--brand-ink);font-variant-numeric:tabular-nums;white-space:nowrap}

/* numbers: the band colours of the 45 day target */
.ob-num{font-variant-numeric:tabular-nums}
.ob-num.ok{color:var(--good-ink)} .ob-num.warn{color:var(--warn-ink)} .ob-num.over{color:var(--bad)}
.ob-daycount{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.ob-daycount .ob-num{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1}
.ob-daycount.small .ob-num{font-size:17px;letter-spacing:-.01em}
.ob-daycount.none{font-size:14px;color:var(--ink-2)}
.ob-of{font-size:13px;color:var(--ink-3)}
.ob-over{font-size:13.5px;font-weight:700;color:var(--bad);white-space:nowrap}
.ob-meter{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.ob-meter span{display:block;height:100%;border-radius:3px;background:var(--brand)}
.ob-meter.ok span{background:var(--good)} .ob-meter.warn span{background:var(--warn)} .ob-meter.over span{background:var(--bad)}

/* the headline numbers, like the engine's old dashboard */
/* a phone gets them two by two, smaller; a wide screen four across, big */
.ob-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ob-metric{background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-soft);padding:14px 14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.ob-metric-label{font-size:11px;font-weight:700;letter-spacing:.1em;line-height:1.3;text-transform:uppercase;color:var(--ink-2)}
.ob-metric-value{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 5px;margin-top:4px;font-size:30px;font-weight:700;line-height:1.05;letter-spacing:-.035em;color:var(--ink)}
.ob-metric-unit{font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink-3)}
.ob-metric-none{margin-top:4px;padding:5px 0 3px;font-size:16px;font-weight:500;line-height:1.25;letter-spacing:-.01em;color:var(--ink-2)}
.ob-metric-sub{font-size:12.5px;line-height:1.4;color:var(--ink-2)}

/* the pipeline: one connected panel, five columns divided by thin lines */
.ob-pipe{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-soft)}
.ob-pipe-col{background:var(--surface);display:flex;flex-direction:column;min-width:0}
.ob-pipe-h{margin:0;padding:15px 18px;background:var(--surface-3);border-bottom:1px solid var(--line-soft);font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-pipe-list{display:flex;flex-direction:column;gap:12px;padding:12px}
.ob-pipe-list:empty{display:none}

/* a client on the pipeline */
.ob-cc{display:flex;flex-direction:column;padding:15px 16px 14px;background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;box-shadow:0 1px 2px rgba(20,33,58,.05);color:var(--ink);min-width:0}
a.ob-cc:hover{text-decoration:none;border-color:var(--brand);box-shadow:0 2px 12px rgba(20,33,58,.09)}
a.ob-cc:hover .ob-cc-name{text-decoration:underline}
.ob-cc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.ob-cc-name{font-size:15px;font-weight:700;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.ob-cc-flags{display:flex;align-items:center;gap:10px;flex:none;padding-top:2px}
.ob-cc .ob-daycount{margin-top:10px}
.ob-cc .ob-meter{margin-top:11px}
.ob-cc .ob-over{margin-top:9px}
.ob-cc-meta{margin-top:7px;font-size:13px;line-height:1.4;color:var(--ink-3)}
.ob-cc-turn{margin-top:8px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.ob-cc-turn b{font-weight:700;color:var(--ink)}
.ob-cc-next{margin-top:2px;font-size:13px;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ob-legend{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px;color:var(--ink-2)}
.ob-legend b{font-weight:700}

/* white sheets with sections divided by hairlines */
.ob-panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--shadow-soft);min-width:0}
.ob-sec{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 32px;padding:20px 18px;border-top:1px solid var(--line-soft);scroll-margin-top:12px}
.ob-sec:first-child{border-top:0}
.ob-sec-l h2{font-family:var(--ui);font-size:15.5px;font-weight:700;line-height:1.35;color:var(--ink)}
.ob-sec-l p{margin-top:3px;font-size:13.5px;color:var(--ink-2)}
.ob-sec-b{display:flex;flex-direction:column;gap:12px;min-width:0}
.ob-sec-b>.ob-form,.ob-sec-b details .ob-form{max-width:640px}
.ob-dl{margin:0;display:flex;flex-direction:column}
.ob-dl>div{display:grid;grid-template-columns:minmax(0,1fr);gap:1px 20px;padding:9px 0;border-top:1px solid var(--line-soft)}
.ob-dl>div:first-child{border-top:0;padding-top:0}
.ob-dl dt{font-size:13.5px;color:var(--ink-2)}
.ob-dl dd{margin:0;font-size:15px;min-width:0;overflow-wrap:anywhere}
.ob-rows{display:flex;flex-direction:column}
.ob-rowi{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;min-height:44px;padding:10px 0;border-top:1px solid var(--line-soft)}
.ob-rowi:first-child{border-top:0;padding-top:0}
.ob-rowi-t{flex:1 1 240px;min-width:0;overflow-wrap:anywhere}
.ob-rowi-t small{display:block;font-size:13px;color:var(--ink-2)}
.ob-rowi-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;min-width:0}
.ob-team .ob-sec details summary{color:var(--brand-ink);font-size:14.5px;font-weight:500}
.ob-plain{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:15px}
.ob-plain li{display:inline-flex;align-items:center;gap:6px}
.ob-plain .ob-icon{color:var(--good)}
.ob-plain.out{color:var(--ink-2)}

/* one client: the head, the section tabs, the numbers strip */
.ob-chead{display:flex;flex-direction:column;gap:6px}
/* D116: the client's name, and View as client beside it on the right (under it on a phone) */
.ob-chead-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px}
.ob-chead-top .ob-h1{flex:1 1 280px;min-width:0}
.ob-viewas{flex:none}
.ob-chead-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;font-size:14.5px;color:var(--ink-2)}
.ob-chead-meta a{display:inline-flex;align-items:center;gap:5px;min-height:44px}
/* D253: a client marked as churned. One line at the top of every tab, the day in
   red and the rest in grey, a hairline under it; Undo folds open beneath. */
.ob-left{display:flex;flex-direction:column;gap:2px;padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--line-soft)}
.ob-left-t{display:flex;flex-direction:column;gap:2px;margin:0;font-size:14.5px;color:var(--ink-2);overflow-wrap:anywhere}
.ob-left-t .ob-state{white-space:nowrap}
.ob-left-dot{display:none;color:var(--ink-3)}
.ob-left-by{white-space:nowrap}
@media (min-width:640px){
  .ob-left-t{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
  .ob-left-dot{display:inline}
}
.ob-left-undo>summary{display:inline-flex;align-items:center;min-height:44px;color:var(--brand-ink);font-size:14.5px;font-weight:500;cursor:pointer}
.ob-left-undo-b{max-width:520px;padding:4px 0 6px}
.ob-churn-h{margin-top:28px}
.ob-arch{padding:4px 18px 6px}
.ob-churn{padding:0 0 6px}
.ob-churn .ob-rowi{padding:12px 0}
.ob-churn .ob-rowi:first-child{padding-top:4px}
.ob-team .ob-churn-a{color:var(--ink);font-weight:500}
@media (min-width:640px){.ob-arch{padding:6px 28px 8px}}
.ob-lt-left{display:block;margin-top:2px}
.ob-stage{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--brand-ink);white-space:nowrap}
.ob-stage.launched{color:var(--good-ink)}
/* D253: a client marked as churned, in grey: nothing is in progress */
.ob-stage.left{color:var(--ink-2)}
.ob-stage.left .ob-steps i.on{background:var(--muted)}
.ob-steps{display:inline-flex;gap:3px}
.ob-steps i{display:block;width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.ob-steps i.on{background:currentColor}
.ob-subnav{display:flex;gap:4px;margin-top:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-bottom:1px solid var(--line)}
.ob-subnav::-webkit-scrollbar{display:none}
.ob-subnav a{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:0 12px;color:var(--ink-2);font-size:15px;font-weight:500;white-space:nowrap}
.ob-subnav a:first-child{padding-left:2px}
.ob-subnav a:hover{color:var(--ink);text-decoration:none}
.ob-subnav a[aria-current="page"]{color:var(--navy);font-weight:700}
.ob-subnav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}
.ob-subnav a:first-child[aria-current="page"]::after{left:2px}
.ob-subnav .ob-n{font-size:13px;font-weight:700;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.ob-subnav .ob-n.warn{color:var(--warn-ink)}
.ob-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-soft)}
.ob-stat{background:var(--surface);padding:16px 16px 18px;display:flex;flex-direction:column;gap:3px;min-width:0}
.ob-stat-label{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.ob-stat-value{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;margin-top:4px;font-size:26px;font-weight:700;line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
.ob-stat-value small{font-size:14px;font-weight:500;letter-spacing:0;color:var(--ink-3)}
.ob-stat-sub{font-size:13.5px;color:var(--ink-2)}
.ob-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 32px;margin:0}
.ob-facts dt{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ob-facts dd{margin:3px 0 0;font-size:15px;overflow-wrap:anywhere}

/* files */
.ob-file{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 0;border-top:1px solid var(--line-soft)}
.ob-file:first-child{border-top:0;padding-top:0}
.ob-file-type{display:flex;flex-direction:column;align-items:center;justify-content:center;width:40px;height:46px;flex:none;border-radius:8px;background:var(--surface-2);color:var(--brand-ink);font-size:10px;font-weight:700;letter-spacing:.06em}
.ob-file-type.pdf{background:var(--bad-soft);color:var(--bad)}
.ob-file-type.img{background:var(--good-soft);color:var(--good-ink)}
.ob-file-t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ob-file-t b{display:block;font-size:15px;font-weight:700}
.ob-file-t small{display:block;font-size:13px;color:var(--ink-2)}
.ob-file-a{display:flex;flex-wrap:wrap;gap:0 16px;flex:none}
.ob-file-a a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:500}

/* the checklist: its sections as a sub navigation */
.ob-cl{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.ob-secnav{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px}
.ob-secnav::-webkit-scrollbar{display:none}
.ob-secnav a{display:flex;flex-direction:column;gap:2px;flex:none;min-width:170px;max-width:240px;min-height:44px;padding:10px 14px;border-radius:12px;color:var(--ink);font-size:14.5px;line-height:1.3}
.ob-secnav a:hover{text-decoration:none;background:var(--surface-2)}
.ob-secnav a[aria-current="page"]{background:var(--surface);box-shadow:0 0 0 1px var(--line-soft),var(--shadow-soft);font-weight:700;color:var(--navy)}
.ob-secnav small{font-size:13px;font-weight:500;color:var(--ink-2)}
.ob-secnav small b{color:var(--brand-ink)}
.ob-secnav small .done{color:var(--good-ink);font-weight:700}
.ob-team .ob-item .ob-item-r .ob-state{font-size:13.5px}
.ob-clsec{padding:0 18px 6px;min-width:0}
.ob-clsec-h{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;padding:18px 0 14px;border-bottom:1px solid var(--line-soft)}
.ob-clsec-help{padding:12px 0 2px}
.ob-item-body{flex:1 1 100%;display:flex;flex-direction:column;gap:10px;min-width:0}
.ob-actions{gap:8px}
/* The thin rule between the decisions and the two marks (D106). On a phone
   the row cannot hold both groups, and a rule left at the end of a wrapped
   line divides nothing, so there it is a line break: the marks start their
   own line. */
.ob-actions-sep{display:block;flex:0 0 100%;height:0;margin:0}
@media (min-width:640px){
  .ob-actions-sep{flex:none;width:1px;height:28px;margin:0 6px;background:var(--line)}
}
/* Reopen (2026-09-25): the Reopen label toggles a visually hidden checkbox
   just before the row, which opens the note form under the row. No script,
   and nothing in the row moves when it opens. */
.ob-reopen-t{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ob-reopen-l{cursor:pointer;user-select:none;-webkit-user-select:none}
.ob-reopen-t:checked+.ob-actions .ob-reopen-l{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)}
.ob-reopen-t:focus-visible+.ob-actions .ob-reopen-l{outline:2px solid var(--brand);outline-offset:2px}
.ob-reopen{display:none;gap:12px;max-width:760px;padding:14px 16px 16px;border-radius:12px;background:var(--brand-soft)}
.ob-reopen-t:checked~.ob-reopen{display:flex}
.ob-reopen .ob-label{font-weight:700;color:var(--navy)}
.ob-reopen .ob-row .ob-btn.quiet{background:var(--surface);border-color:var(--line-2)}
.ob-team .ob-msg .ob-state{font-size:13.5px}
.ob-msg-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.ob-msg-h .ob-state{font-size:12.5px}
.ob-team .ob-sec-b>details+details{margin-top:-10px}
.ob-tools{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 28px}
.ob-tools>details[open]{flex:1 1 100%}
.ob-dl a.ob-state{display:inline;min-height:0}
/* The checklist (Wes, 2026-09-25: "hard to see when one section ends and
   another starts"): each item's title row is a soft band across the one
   section sheet, edge to edge, with a firmer rule above it; 28px of space
   closes each item. The band's side margins are the sheet's own side padding
   (.ob-clsec, and again at 1000px), and its side padding the same again, so
   it meets the sheet's edges and its words stay in line with the sheet's.
   The item title is the one bold line. No accent rail, no pills.
   D129: the band starts with the item's status mark, centred on the title's
   first line (22px, the title's line height), the state words on the right
   from 640px and under the title on a phone. A finished item (accepted, Not
   needed, We set this up) folds to its band: a <details> whose summary is
   the band, a chevron after the state words, its focus ring inside the band,
   8px between two folded bands. The mark is status, never a control: it has
   no pointer and no hover of its own. */
.ob-clsec .ob-list{padding:14px 0 0}
.ob-clsec .ob-item,.ob-clsec .ob-item:first-child{display:block;min-height:0;padding:0 0 28px;border-top:0;scroll-margin-top:12px}
/* Folded items one after another read as one list: no gap, one rule between. */
.ob-clsec details.ob-item:not([open]){padding-bottom:0}
.ob-clsec details.ob-item:not([open])+details.ob-item:not([open])>summary.ob-item-h{border-top:0}
.ob-clsec .ob-list>.ob-item:last-child{padding-bottom:22px}
.ob-clsec .ob-item-h{display:grid;grid-template-columns:22px minmax(0,1fr) 16px;align-items:start;column-gap:12px;margin:0 -18px;padding:12px 18px;background:var(--surface-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.ob-clsec .ob-item-h>.ob-mark{grid-row:1;grid-column:1}
.ob-clsec .ob-item-t{grid-row:1;grid-column:2;font-size:17px;line-height:22px;overflow-wrap:anywhere}
.ob-clsec div.ob-item-h>.ob-item-t{grid-column:2/-1}
.ob-clsec .ob-item-t b{font-weight:700;color:var(--navy)}
.ob-clsec .ob-mark.not_needed+.ob-item-t b{font-weight:500;color:var(--ink-3)}
.ob-clsec .ob-item-r{grid-row:2;grid-column:2/-1;padding:3px 0 0;justify-content:flex-start}
.ob-team .ob-clsec .ob-item .ob-item-r .ob-state{font-size:14px}
.ob-clsec .ob-item-c{grid-row:1;grid-column:3;display:flex;align-items:center;height:22px;color:var(--ink-2)}
.ob-clsec .ob-item-c .ob-icon{transition:transform .15s}
.ob-clsec summary.ob-item-h{cursor:pointer;list-style:none}
.ob-clsec summary.ob-item-h::-webkit-details-marker{display:none}
.ob-clsec summary.ob-item-h::marker{content:""}
.ob-clsec summary.ob-item-h:hover .ob-item-t b,.ob-clsec summary.ob-item-h:hover .ob-item-c{color:var(--brand-ink)}
.ob-clsec summary.ob-item-h:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:0}
.ob-clsec details.ob-item[open]>summary .ob-item-c .ob-icon{transform:rotate(180deg)}
.ob-clsec .ob-item-body{padding-top:16px;gap:12px}
.ob-clsec .ob-item-body>.ob-actions{margin-top:4px}
/* D129: the status marks (statusMark in src/ui/components.ts), a to do
   list's circles in the sheet's own colours. */
.ob-mark{display:block;flex:none;width:22px;height:22px}
.ob-mark.accepted .r{fill:var(--good)}
.ob-mark.accepted .g{stroke:#FFFFFF}
.ob-mark.set_up .r,.ob-mark.set_up .g{stroke:var(--good)}
.ob-mark.not_needed .r,.ob-mark.not_needed .g{stroke:var(--muted)}
.ob-mark.team .r{fill:var(--brand)}
.ob-mark.team .d{fill:#FFFFFF}
.ob-mark.open .r{stroke:var(--muted)}
.ob-mark.waiting .r,.ob-mark.waiting .g{stroke:var(--warn)}
/* what the client sent: space between submissions, a rule only between two files */
.ob-clsec .ob-subs{gap:12px}
.ob-clsec .ob-sub+.ob-sub,.ob-clsec .ob-subs-more>.ob-subs>.ob-sub:first-child{padding-top:0;border-top:0}
.ob-clsec .ob-sub.file+.ob-sub.file{padding-top:12px}
.ob-clsec .ob-subs-more>.ob-subs{margin-top:4px}
/* A file inside an item, on the checklist and on an opened Review
   deliverable: the name in medium weight, so the item's title is the one
   bold line, and a faint rule between two files that starts after the kind
   tile (40px and the row's 14px gap), so it never reads as an item's edge. */
.ob-clsec .ob-file-t b,.ob-dv .ob-file-t b{font-weight:500;color:var(--ink)}
.ob-clsec .ob-sub.file+.ob-sub.file,.ob-dv .ob-files>.ob-file+.ob-file{position:relative;border-top:0}
.ob-clsec .ob-sub.file+.ob-sub.file::before,.ob-dv .ob-files>.ob-file+.ob-file::before{content:"";position:absolute;top:0;left:54px;right:0;height:1px;background:var(--line-soft)}
@media (min-width:640px){
  .ob-clsec .ob-item-h{grid-template-columns:22px minmax(0,1fr) auto 16px;padding:13px 18px}
  .ob-clsec div.ob-item-h>.ob-item-t{grid-column:2}
  .ob-clsec .ob-item-r{grid-row:1;grid-column:3;min-height:22px;padding:0;justify-content:flex-end;text-align:right}
  .ob-clsec .ob-item-c{grid-column:4}
  .ob-clsec .ob-item-body{padding-top:18px}
}
@media (min-width:1000px){
  .ob-clsec .ob-item-h{margin:0 -28px;padding:13px 28px}
}
.ob-files{display:flex;flex-direction:column}

/* filters: dropdowns that apply on change; the button is the no script way */
.ob-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;margin:0}
.ob-filters .ob-field{flex:1 1 200px;max-width:320px}
.ob-filters .ob-label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ob-js .ob-nojs{display:none}
.ob-search{display:flex;gap:8px;align-items:center;flex:1 1 280px;max-width:420px;margin:0}
.ob-search .ob-input{flex:1 1 auto}

/* tables on the team side: a softer frame, sortable headers */
.ob-team .ob-table-wrap{border-color:var(--line-soft);border-radius:14px;box-shadow:var(--shadow-soft)}
.ob-team .ob-table th{background:var(--surface-3);padding:12px 16px;font-size:11.5px;letter-spacing:.1em;border-bottom-color:var(--line-soft)}
.ob-team .ob-table th.ob-sortable{padding-top:0;padding-bottom:0}
.ob-team .ob-table td{padding:13px 16px;border-bottom-color:var(--line-soft);vertical-align:top}
.ob-team .ob-table td a{font-weight:500}
.ob-team .ob-table tbody tr:hover td{background:var(--surface-3)}
.ob-sort{display:inline-flex;align-items:center;gap:5px;min-height:44px;color:inherit}
.ob-sort:hover{color:var(--ink);text-decoration:none}
.ob-sort.on{color:var(--navy)}
.ob-sort-a{font-size:12px;letter-spacing:0;color:var(--ink-3)}
.ob-sort.on .ob-sort-a{color:var(--brand-ink)}
.ob-cname{display:flex;flex-direction:column;gap:1px}
.ob-team .ob-cname a{color:var(--ink);font-weight:700}
.ob-team .ob-table .ob-stage{font-weight:500}
.ob-team .ob-table a.ob-plainlink{color:var(--ink);font-weight:500}
.ob-nowrap{white-space:nowrap}
.ob-cname small{font-size:13px}

/* on a phone a long table reads as a list of small blocks: each row's cells
   stacked with their column names, the sortable headers a row of sort links
   above them. From 720px it is the table again. */
.ob-team .ob-table.ob-rt{min-width:0}
.ob-rt thead tr{display:flex;flex-wrap:wrap;gap:0 16px;padding:0 16px;background:var(--surface-3);border-bottom:1px solid var(--line-soft)}
.ob-team .ob-rt thead th{display:block;padding:0;border:0;background:none}
.ob-rt thead th:not(.ob-sortable){display:none}
.ob-rt tbody,.ob-rt tbody tr,.ob-rt tbody td{display:block}
.ob-rt tbody tr{padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.ob-rt tbody tr:last-child{border-bottom:0}
.ob-team .ob-rt tbody td{padding:2px 0;border:0;overflow-wrap:anywhere}
.ob-team .ob-rt tbody td[data-label]{position:relative;padding-left:96px}
.ob-rt tbody td[data-label]::before{content:attr(data-label);position:absolute;left:0;top:5px;font-size:11px;font-weight:700;letter-spacing:.1em;line-height:1.4;text-transform:uppercase;color:var(--ink-2)}
.ob-team .ob-rt tbody td:first-child{padding-left:0;padding-bottom:4px}
.ob-rt tbody td:first-child::before{display:none}
/* a stacked table with no sorting has no header row on a phone */
.ob-rt-plain thead{display:none}

/* a real on and off switch */
.ob-toggle-form{display:flex;margin:0}
.ob-switches{display:flex;flex-direction:column}
.ob-switchrow{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid var(--line-soft)}
.ob-switchrow:first-child{border-top:0;padding-top:0}
.ob-switchrow-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ob-switchrow-h b{font-size:15px}
.ob-switchrow small{font-size:13.5px;color:var(--ink-2);max-width:78ch}
.ob-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 2px;background:none;border:0;border-radius:14px;font:inherit;font-size:14px;font-weight:700;color:var(--ink-2);cursor:pointer}
.ob-toggle-track{position:relative;display:block;width:44px;height:26px;border-radius:13px;background:var(--muted);flex:none;transition:background-color .15s}
.ob-toggle-track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 3px rgba(11,29,58,.3);transition:transform .15s}
.ob-toggle[aria-checked="true"]{color:var(--good-ink)}
.ob-toggle[aria-checked="true"] .ob-toggle-track{background:var(--good)}
.ob-toggle[aria-checked="true"] .ob-toggle-track::after{transform:translateX(18px)}
.ob-toggle:hover .ob-toggle-track{filter:brightness(.95)}
.ob-toggle-word{min-width:24px;text-align:left}

/* the older pieces other team pages still draw, in the calmer frame */
.ob-team .ob-card{border-color:var(--line-soft);border-radius:14px;box-shadow:var(--shadow-soft)}
.ob-team .ob-card-h{padding:15px 20px;border-bottom-color:var(--line-soft)}
.ob-team .ob-card-b{padding:16px 20px}
.ob-team .ob-item{border-top-color:var(--line-soft)}
.ob-team .ob-kpi{border-color:var(--line-soft);border-radius:14px;box-shadow:var(--shadow-soft);padding:16px 20px}
.ob-team .ob-note{border-radius:12px}

@media (min-width:640px){
  .ob-metrics{gap:16px}
  .ob-metric{border-radius:16px;padding:18px 20px}
  .ob-metric-label{font-size:12px;letter-spacing:.12em}
  .ob-metric-value{font-size:40px;gap:0 7px;margin-top:6px}
  .ob-metric-unit{font-size:18px}
  .ob-metric-none{font-size:20px;padding:9px 0 6px;margin-top:6px}
  .ob-metric-sub{font-size:14px}
  .ob-dl>div{grid-template-columns:190px minmax(0,1fr)}
  .ob-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:720px){
  .ob-team .ob-table.ob-rt{min-width:560px}
  .ob-rt-plain thead{display:table-header-group}
  .ob-rt thead tr{display:table-row;padding:0;border:0}
  .ob-team .ob-rt thead th{display:table-cell;padding:0 16px;background:var(--surface-3);border-bottom:1px solid var(--line-soft)}
  .ob-rt thead th:not(.ob-sortable){display:table-cell;padding:12px 16px}
  .ob-rt tbody{display:table-row-group}
  .ob-rt tbody tr{display:table-row;padding:0;border:0}
  .ob-rt tbody td{display:table-cell}
  .ob-team .ob-rt tbody td,.ob-team .ob-rt tbody td[data-label],.ob-team .ob-rt tbody td:first-child{padding:13px 16px;border-bottom:1px solid var(--line-soft);overflow-wrap:normal}
  .ob-rt tbody tr:last-child td{border-bottom:0}
  .ob-rt tbody td[data-label]::before{content:none;display:none}
  .ob-rt tbody td:first-child{padding-bottom:13px}
}
@media (min-width:900px){
  .ob-sec{grid-template-columns:230px minmax(0,1fr);padding:24px 28px}
  .ob-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ob-stat{padding:18px 22px 20px}
  .ob-stat-value{font-size:28px}
}
@media (min-width:1000px){
  .ob-pipe{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ob-pipe-list,.ob-pipe-list:empty{display:flex;min-height:180px;padding:14px}
  .ob-cl{grid-template-columns:270px minmax(0,1fr);gap:28px}
  .ob-clsec{padding:0 28px 8px}
  .ob-secnav{flex-direction:column;gap:4px;overflow:visible;position:sticky;top:16px}
  .ob-secnav a{min-width:0;max-width:none}
}
@media (min-width:1100px){
  .ob-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .ob-metric{padding:24px 24px 22px}
  .ob-metric-value{font-size:46px}
  .ob-metric-unit{font-size:20px}
}
@media print{
  .ob-top-in{background:#FFFFFF}
  .ob-top{background:#FFFFFF;color:var(--ink)}
  .ob-nav,.ob-top-right,.ob-subnav,.ob-secnav{display:none}
  .ob-top-product{color:var(--ink)}
}

/* ===== The remaining pages (D106, second pass): Review, Knowledge, Guide,
   AI, New client, one outbox email, the item reads, the doors. The same
   pieces as above: a strip of numbers, one sheet of sections, rows that open
   in place, a record drawn as a quiet timeline. No capsule, no rail. ===== */

/* a page head with the way back up to its list */
.ob-phead{display:flex;flex-direction:column;gap:2px}
.ob-phead-t{display:flex;flex-direction:column;gap:4px;min-width:0;margin-right:auto}
.ob-phead-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ob-backlink{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:44px;font-size:14.5px;font-weight:500;color:var(--brand-ink)}
.ob-stat-value .ob-quiet-v{font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--ink-2)}
.ob-stat-value .ob-state{font-weight:700}
.ob-dl-sub{display:block;margin-top:2px;font-size:13px;color:var(--ink-2)}
.ob-wrap{overflow-wrap:anywhere}
.ob-extlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;overflow-wrap:anywhere;font-weight:500}
.ob-extlink .ob-icon{flex:none}

/* rows that open in place: the kind small above the name, the state in its
   colour on the right, a chevron; ruled like a table, never boxed */
.ob-dvs{display:flex;flex-direction:column;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.ob-dv+.ob-dv{border-top:1px solid var(--line-soft)}
.ob-dv{scroll-margin-top:12px}
.ob-team details.ob-orow>summary{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-height:64px;padding:12px 2px;list-style:none;color:var(--ink);font-size:inherit;font-weight:inherit}
.ob-orow>summary::-webkit-details-marker{display:none}
.ob-orow>summary::marker{content:""}
.ob-orow-t{order:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.ob-orow-k{font-size:11.5px;font-weight:700;letter-spacing:.1em;line-height:1.3;text-transform:uppercase;color:var(--ink-2)}
.ob-orow-n{font-size:16px;font-weight:700;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.ob-orow-m{font-size:13.5px;color:var(--ink-2)}
.ob-orow-c{order:2;flex:none;display:flex;color:var(--ink-2);transition:transform .15s}
.ob-orow-r{order:3;flex:1 1 100%;min-width:0;font-size:13.5px}
.ob-orow[open]>summary .ob-orow-c{transform:rotate(180deg);color:var(--brand-ink)}
.ob-orow>summary:hover .ob-orow-n{color:var(--brand-ink)}
.ob-orow-b{display:flex;flex-direction:column;gap:14px;padding:0 2px 22px;min-width:0}
.ob-orow-b>.ob-form{max-width:680px}

/* a record, oldest first: a small dot and a hairline down the side */
.ob-tl{list-style:none;margin:0;padding:4px 0 0}
.ob-tl-i{position:relative;padding:0 0 16px 22px;min-width:0}
.ob-tl-i::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.ob-tl-i::after{content:"";position:absolute;left:4px;top:19px;bottom:1px;width:1px;background:var(--line-soft)}
.ob-tl-i:last-child{padding-bottom:0}
.ob-tl-i:last-child::after{display:none}
.ob-tl-i.client::before{background:var(--brand)}
.ob-tl-i.team::before{background:var(--ink-3)}
.ob-tl-h{font-size:14.5px;font-weight:700;color:var(--ink)}
.ob-tl-i.quiet .ob-tl-h{font-weight:500;color:var(--ink-2)}
.ob-tl-b{display:flex;flex-direction:column;gap:4px;margin-top:3px;font-size:15px;overflow-wrap:anywhere}
.ob-tl-at{margin-top:3px;font-size:12.5px;color:var(--ink-2)}

/* the Review tab */
.ob-asked{display:flex;flex-direction:column;gap:4px;max-width:680px;padding:12px 14px;border-radius:12px;background:var(--warn-soft);overflow-wrap:anywhere}
.ob-asked-h{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warn-ink)}
.ob-asked .ob-quiet{color:var(--ink-2)}
.ob-going{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:15px}
.ob-addblock{display:flex;flex-direction:column;gap:12px;max-width:680px}
.ob-add-b{padding-top:6px;max-width:680px}
.ob-file-type.vid{background:var(--pt-vid-bg);color:var(--pt-vid)}
.ob-file-type.xls{background:var(--pt-xls-bg);color:var(--pt-xls)}
.ob-file-type.art{background:var(--pt-art-bg);color:var(--pt-art)}
.ob-file-a .ob-form{margin:0}
/* a deliverable's file on a phone: Download and Take out go under the name,
   lined up after the kind tile, so the name is not squeezed to a few letters
   a line; side by side again from 720px */
.ob-dv .ob-files>.ob-file{flex-wrap:wrap;row-gap:2px}
.ob-dv .ob-files>.ob-file>.ob-file-t{flex:1 1 calc(100% - 54px)}
.ob-dv .ob-files>.ob-file>.ob-file-a{flex:1 1 100%;padding-left:54px}
@media (min-width:720px){
  .ob-dv .ob-files>.ob-file{flex-wrap:nowrap}
  .ob-dv .ob-files>.ob-file>.ob-file-t{flex:1 1 auto}
  .ob-dv .ob-files>.ob-file>.ob-file-a{flex:none;padding-left:0}
}

/* the Knowledge tab: entries divided by hairlines, the kind small above the
   title, a Vuepoint AI draft on a soft ground (whole, never an edge) */
.ob-kentries{display:flex;flex-direction:column}
.ob-kentry{display:flex;flex-direction:column;gap:10px;padding:18px 0;border-top:1px solid var(--line-soft);scroll-margin-top:12px;min-width:0}
.ob-kentries>.ob-kentry:first-child{border-top:0;padding-top:4px}
.ob-kentry-in{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:760px}
.ob-kentry.draft>.ob-kentry-in{background:var(--surface-2);border-radius:12px;padding:14px 16px}
.ob-kentry-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font-size:13px}
.ob-kentry-kind{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ob-kentry-t{font-family:var(--ui);font-size:16.5px;font-weight:700;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.ob-kentry-m{font-size:13px;color:var(--ink-2)}
.ob-kbody{font-size:15px;line-height:1.55;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:8px}
.ob-kbody ul,.ob-kbody ol{margin:0;padding-left:20px}
.ob-ksrc{font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere}
.ob-ksrc-h{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ob-ksrc ul{margin:4px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
/* three levels, as on the checklist: a firmer rule before a new kind, a
   hairline between entries, only space between earlier versions of one entry
   (whose titles are medium weight, so none reads as the next entry) */
.ob-kolds{display:flex;flex-direction:column;gap:16px}
.ob-kold{display:flex;flex-direction:column;gap:4px}
.ob-kold>b{font-weight:500}
.ob-kgroup+.ob-kgroup{margin-top:4px;padding-top:14px;border-top:1px solid var(--line-2)}
.ob-kgroup-h{padding-bottom:2px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink)}
.ob-kstrat{display:flex;flex-direction:column;gap:6px}
.ob-kstrat+.ob-kstrat{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.ob-kstrat>.ob-kentry{border-top:0;padding-top:0}
.ob-critique{display:flex;flex-direction:column;gap:10px;max-width:760px;padding-top:14px;border-top:1px solid var(--line-soft)}
.ob-critique .ob-kentry{padding:4px 0 8px;border-top:0}
.ob-kdraws{padding-top:12px}
@media (min-width:720px){
  .ob-orow-r{order:2;flex:0 1 auto;max-width:48%;text-align:right}
  .ob-orow-c{order:3}
  .ob-team details.ob-orow>summary{flex-wrap:nowrap}
}

/* the Guide: articles as ruled rows; an article page is a publishing line,
   then the form beside the preview, which reads like the page a client sees */
.ob-arts{display:flex;flex-direction:column}
.ob-art{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 24px;padding:14px 2px;border-top:1px solid var(--line-soft);color:var(--ink);min-width:0}
.ob-arts>.ob-art:first-child{border-top:0;padding-top:2px}
.ob-art:hover{text-decoration:none}
.ob-art:hover .ob-art-t b{color:var(--brand-ink);text-decoration:underline}
.ob-art-t{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:3px}
.ob-art-t b{font-size:15.5px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.ob-art-t small{font-size:13.5px;line-height:1.45;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ob-art-r{flex:0 1 280px;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.ob-art-r small{font-size:12.5px;color:var(--ink-2)}
.ob-aline{font-size:14.5px;color:var(--ink);max-width:80ch}
.ob-team details.ob-more>summary{color:var(--brand-ink);font-size:14.5px;font-weight:500}
.ob-pane{display:flex;flex-direction:column;gap:14px;padding:18px 18px 20px;min-width:0}
.ob-pane-hr{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px}
.ob-pane-h{font-family:var(--ui);font-size:15.5px;font-weight:700;line-height:1.35;color:var(--ink)}
.ob-pane-k{display:flex;align-items:baseline;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ob-pane-form .ob-form{max-width:760px}
.ob-paper{font-size:16px;line-height:1.6;max-width:66ch;overflow-wrap:anywhere}
.ob-pubbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:18px 18px}
.ob-pubbar-t{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:4px}
.ob-pubbar-a{display:flex;flex-wrap:wrap;gap:10px;flex:none}
.ob-guide{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}

/* the AI page: the ledger as a plain ruled table inside its section */
.ob-ledger-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:760px}
.ob-ledger{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums}
.ob-ledger th{padding:0 12px 8px 0;text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line-soft);white-space:nowrap}
.ob-ledger td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line-soft);vertical-align:top;overflow-wrap:anywhere}
.ob-ledger .n{text-align:right;padding-right:0;padding-left:16px}
.ob-ledger th.n{padding-right:0}
.ob-ledger tr.t td{border-bottom:0;font-weight:700}
.ob-monthnav{display:flex;flex-wrap:wrap;gap:0 18px}
.ob-monthnav a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
.ob-bignum{display:block;font-size:24px;font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* the checklist review: what the client sent, without a box around each one.
   Their words in reading type, who and when beneath; a file as a row with its
   kind tile and, only when something is off, the platform's amber words (D114);
   past five files, the rest fold behind "Show all N files" */
.ob-subs{display:flex;flex-direction:column;gap:14px;max-width:760px}
.ob-sub{display:flex;flex-direction:column;gap:4px;min-width:0}
.ob-sub+.ob-sub{padding-top:14px;border-top:1px solid var(--line-soft)}
.ob-sub .ob-file{padding:0;border-top:0;min-height:0}
.ob-sub-words{font-size:15.5px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.ob-sub-by{font-size:12.5px;color:var(--ink-2)}
/* Round 3, Phase 3: a sent v1 form (formAnswersHtml): one row per field, the
   label in a narrow grey column and the value at reading size beside it (under
   it on a phone); the path picked in bold first, the team's next step in blue;
   a tick "Confirmed" in green or "Not ticked" in grey; kept from the
   questionnaire in grey, changed in amber. Weight and colour only, no pills.
   The questionnaire fold under an item uses the same rows. */
.ob-kv{display:flex;flex-direction:column;gap:10px;max-width:820px;min-width:0}
.ob-kv-r{display:flex;flex-direction:column;gap:1px;min-width:0}
.ob-kv-k{display:inline-flex;align-items:center;gap:5px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.ob-kv-k svg{width:14px;height:14px;flex:none}
.ob-kv-v{font-size:15.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.ob-kv-m{display:block;font-size:13px;line-height:1.45;color:var(--ink-3)}
.ob-kv-m.changed{color:var(--warn-ink);font-weight:600}
.ob-kv-r.path .ob-kv-v{color:var(--navy)}
.ob-kv-r.next .ob-kv-k,.ob-kv-r.next .ob-kv-v{color:var(--brand-ink)}
.ob-kv-r.next .ob-kv-k{font-weight:600}
.ob-kv-r.tick.yes .ob-kv-k{color:var(--good-ink);font-weight:600}
.ob-kv-r.tick.no .ob-kv-v{color:var(--ink-2)}
@media (min-width:720px){.ob-kv-r{display:grid;grid-template-columns:190px minmax(0,1fr);column-gap:20px;align-items:baseline}.ob-kv-r.one{display:flex}}
.ob-ctx{margin:0}
.ob-ctx>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;list-style:none;cursor:pointer;color:var(--brand-ink);font-weight:500;font-size:14.5px}
.ob-ctx>summary::-webkit-details-marker{display:none}
.ob-ctx>summary::marker{content:""}
.ob-ctx-b{padding:4px 0 6px}
.ob-sub.form .ob-sub-by{margin-top:4px}
.ob-sub-link .ob-extlink{min-height:0}
.ob-sub-status{font-size:13.5px}
.ob-ournote{display:flex;flex-direction:column;gap:4px;max-width:760px;padding:12px 14px;border-radius:12px;background:var(--brand-soft);overflow-wrap:anywhere}
.ob-ournote-h{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink)}
.ob-ournote small{font-size:13px;color:var(--ink-2)}
.ob-flag{color:var(--warn-ink);font-weight:500}
.ob-subs-more>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;list-style:none;cursor:pointer;color:var(--brand-ink);font-weight:500;font-size:14.5px}
.ob-subs-more>summary::-webkit-details-marker{display:none}
.ob-subs-more>summary::marker{content:""}
.ob-subs-more>summary .ob-icon{transition:transform .15s}
.ob-subs-more .o{display:none}
.ob-subs-more[open]>summary .c{display:none}
.ob-subs-more[open]>summary .o{display:inline}
.ob-subs-more[open]>summary .ob-icon{transform:rotate(180deg)}
.ob-subs-more>.ob-subs>.ob-sub:first-child{padding-top:14px;border-top:1px solid var(--line-soft)}

/* D114: the section's ONE AI look, under the section's heading and its help
   line. Closed, the verdict is the button: a sparkle, "AI:", the verdict in its
   colour (amber for a look needed, green for fine) and a quiet Show with a
   chevron. Open, the bar and the look are one bordered panel. No rail, no
   capsule. */
.ob-look{margin:14px 0 4px;max-width:760px;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.ob-look>summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;list-style:none;cursor:pointer;border-radius:11px;background:var(--surface-3);color:var(--ink);font-size:14.5px;line-height:1.4}
.ob-look>summary::-webkit-details-marker{display:none}
.ob-look>summary::marker{content:""}
.ob-look>summary>.ob-icon{flex:none;color:var(--brand-ink)}
.ob-look[open]>summary{border-radius:11px 11px 0 0;border-bottom:1px solid var(--line-soft)}
.ob-look>summary:hover .ob-look-show{color:var(--brand-ink)}
.ob-look-v{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ob-look-v>b{font-weight:700;color:var(--brand-ink)}
.ob-look-v .warn{color:var(--warn-ink);font-weight:700}
.ob-look-v .good{color:var(--good-ink);font-weight:700}
.ob-look-v .q{color:var(--ink-2)}
.ob-look-v>.o{display:none}
.ob-look[open]>summary .ob-look-v>.c{display:none}
.ob-look[open]>summary .ob-look-v>.o{display:inline}
.ob-look-show{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:13.5px;color:var(--ink-2)}
.ob-look-show .o{display:none}
.ob-look[open] .ob-look-show .c{display:none}
.ob-look[open] .ob-look-show .o{display:inline}
.ob-look-show .ob-icon{transition:transform .15s}
.ob-look[open] .ob-look-show .ob-icon{transform:rotate(180deg)}
.ob-look-b{display:flex;flex-direction:column;gap:16px;padding:14px 14px 16px;min-width:0}
/* the SOP check panel's parts (src/sop-check/view.ts) */
.ob-look-sec{display:flex;flex-direction:column;gap:6px;min-width:0}
.ob-look-k{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
/* Round 3 (Wes: "it's just a lot of text. I think that needs to be
   reorganized and reinvented. envisioned with typography and design"; the
   design is Claude's): the verdict is the headline, one grey line says
   what it looked at, In short reads at reading size, the files that need a
   look are two columns with thin rules, and the rest waits in closed folds
   named by their counts. Colour and weight carry it: no pills, no rail. */
.ob-look-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px}
.ob-look-hl{flex:1 1 280px;min-width:0;font-size:18px;line-height:1.35;font-weight:600;color:var(--ink);overflow-wrap:anywhere;text-wrap:balance}
.ob-look-hl.warn{color:var(--warn-ink)}
.ob-look-hl.good{color:var(--good-ink)}
.ob-look-hl.q{color:var(--ink-2)}
.ob-look-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.ob-look-act .ob-form{margin:0}
.ob-look-act .ob-btn{min-height:36px;padding:0 12px;font-size:13.5px;background:none;border-color:var(--line);color:var(--ink-2)}
.ob-look-act .ob-btn:hover{color:var(--brand-ink);border-color:var(--brand)}
.ob-look-new{font-size:13.5px;font-weight:700;color:var(--warn-ink)}
.ob-look-meta{margin-top:-4px;font-size:13px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere}
@media (min-width:640px){.ob-look-meta{margin-top:-8px}}
.ob-look-line{font-size:14px;line-height:1.5;color:var(--ink-2)}
.ob-look-short{font-size:15.5px;line-height:1.55;color:var(--ink);max-width:66ch}
.ob-look-needs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.ob-look-needs li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;padding:10px 0;min-width:0}
.ob-look-needs li+li{border-top:1px solid var(--line-soft)}
.ob-look-needs b{flex:1 1 100%;font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.ob-look-needs span{flex:1 1 0;min-width:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.ob-look-fine{font-size:14.5px;font-weight:500;color:var(--good-ink)}
.ob-look-folds{display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.ob-look-fold{border-bottom:1px solid var(--line-soft)}
.ob-look-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 0;list-style:none;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--ink)}
.ob-look-fold>summary::-webkit-details-marker{display:none}
.ob-look-fold>summary::marker{content:""}
.ob-look-fold>summary .ob-icon{flex:none;color:var(--ink-2);transition:transform .15s}
.ob-look-fold[open]>summary .ob-icon{transform:rotate(180deg)}
.ob-look-fold>summary:hover{color:var(--brand-ink)}
.ob-look-fold>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.ob-look-fold-b{display:flex;flex-direction:column;gap:8px;padding:0 0 14px}
.ob-look-ask{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.5}
.ob-look-notes{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.ob-look-note{font-size:13px;line-height:1.45;color:var(--ink-2)}
.ob-look-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ob-look-facts li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;padding:8px 0;border-top:1px solid var(--line-soft);min-width:0}
.ob-look-facts li:first-child{border-top:0;padding-top:2px}
.ob-look-fact{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:1px;overflow-wrap:anywhere}
.ob-look-fact span{font-size:14.5px;line-height:1.5;color:var(--ink)}
.ob-look-fact small,.ob-look-facts li>small{font-size:12.5px;color:var(--ink-2)}
.ob-look-facts .ob-form{margin:0}
.ob-look-facts .ob-btn{min-height:36px;padding:0 4px;background:none;border-color:transparent;font-size:14px;font-weight:500;color:var(--brand-ink)}
.ob-look-facts .ob-btn:hover{text-decoration:underline}
@media (min-width:760px){
  .ob-look-needs li{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) auto;gap:18px;align-items:baseline}
  .ob-look-needs b{font-size:14px}
}
/* Decline (round 3, 3.2): a quiet link beside Download and on a Needs a look
   row; it opens the item's Reopen with the file ticked. */
.ob-decline{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.ob-decline:hover{color:var(--warn-ink)}
/* A Needs a look row's Decline keeps the 44px touch target on a phone; from
   760px, where the row is a grid line, it sits tight in it. */
@media (min-width:760px){.ob-look-needs .ob-decline{min-height:0}}
.ob-linkbtn{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;font-weight:500;color:var(--brand-ink);cursor:pointer}
.ob-linkbtn:hover{text-decoration:underline}
.ob-linkbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.ob-file-a .ob-undo{margin:0}
.ob-subs-k{margin-top:6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warn-ink)}
.ob-sub.declined .ob-file-t b{font-weight:500;color:var(--ink-2)}
.ob-decl{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;border:0;min-width:0}
/* On a phone a file on the checklist keeps its name whole: Download and
   Decline (or Undo) go under it, in line with the name, not beside it; from
   640px they sit beside it again. */
.ob-clsec .ob-sub.file .ob-file{flex-wrap:wrap;row-gap:0}
.ob-clsec .ob-sub.file .ob-file-t{flex:1 1 0}
.ob-clsec .ob-sub.file .ob-file-a{flex:1 1 100%;padding-left:54px}
.ob-clsec .ob-sub.file .ob-file-a a,.ob-clsec .ob-sub.file .ob-file-a .ob-linkbtn{min-height:40px}
@media (min-width:640px){
  .ob-clsec .ob-sub.file .ob-file{flex-wrap:nowrap}
  .ob-clsec .ob-sub.file .ob-file-t{flex:1 1 auto}
  .ob-clsec .ob-sub.file .ob-file-a{flex:none;padding-left:0}
  .ob-clsec .ob-sub.file .ob-file-a a,.ob-clsec .ob-sub.file .ob-file-a .ob-linkbtn{min-height:44px}
}
.ob-decl .ob-help{margin-top:2px}
/* Past five files the Reopen's ticks fold, as the item's list does. */
.ob-decl-more>summary{min-height:40px}
.ob-decl-rest{display:flex;flex-direction:column;gap:2px}
.ob-ournote-by{margin-left:8px;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.ob-review-w{font-weight:700;color:var(--brand-ink)}
/* The Files tab (round 3, 2e): a section's files grouped by item, the item's
   name a link to its place on the checklist. */
.ob-btn-ext{gap:8px}
.ob-fgroup{display:flex;flex-direction:column;gap:6px;min-width:0}
.ob-fgroup+.ob-fgroup{padding-top:14px;border-top:1px solid var(--line-soft)}
.ob-fgroup-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;font-size:14.5px;font-weight:600}
.ob-fgroup-h span{font-size:13px;font-weight:500;color:var(--ink-2)}
.ob-fgroup-more{font-size:14px}
.ob-files-foot{padding:14px 18px 18px;border-top:1px solid var(--line-soft)}
@media (min-width:900px){.ob-files-foot{padding:16px 28px 20px}}
.ob-fgroup>.ob-subs-k{margin-top:4px}
/* The Files tab on a phone: its three areas share the width (there are only
   three to fit), and a file keeps its name whole, Open and Download going
   under it in line with the name, as a deliverable's file does (.ob-dv);
   from 640px they sit beside it again. */
.ob-filestab .ob-files>.ob-file{flex-wrap:wrap;row-gap:2px}
.ob-filestab .ob-files>.ob-file>.ob-file-t{flex:1 1 calc(100% - 54px)}
.ob-filestab .ob-files>.ob-file>.ob-file-a{flex:1 1 100%;padding-left:54px}
@media (min-width:640px){
  .ob-filestab .ob-files>.ob-file{flex-wrap:nowrap}
  .ob-filestab .ob-files>.ob-file>.ob-file-t{flex:1 1 auto}
  .ob-filestab .ob-files>.ob-file>.ob-file-a{flex:none;padding-left:0}
}

/* one email in the outbox: the decision across the top, then the email as it
   will arrive beside its facts */
.ob-caution{font-size:14.5px;color:var(--warn-ink);font-weight:500;max-width:90ch}
.ob-mailgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.ob-mailframe{display:block;width:100%;height:720px;border:1px solid var(--line-soft);border-radius:12px;background:var(--bg)}
.ob-pane .ob-dl>div{grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){
  .ob-mailgrid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px}
}

/* a client's Messages tab: a chat, the client on the left and the team on
   the right, as the portal draws it from the other side; one sheet with the
   reply box under a hairline */
.ob-chat{display:flex;flex-direction:column;gap:18px}
.ob-bub{display:flex;flex-direction:column;gap:4px;max-width:92%;min-width:0;align-self:flex-start;scroll-margin-top:12px}
.ob-bub.team{align-self:flex-end;align-items:flex-end}
.ob-bub-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:12.5px;color:var(--ink-2);padding:0 6px}
.ob-bub-who b{color:var(--ink);font-weight:700}
.ob-bub-who .ob-state{font-size:12.5px}
.ob-bub-b{padding:11px 15px;border-radius:18px;border-bottom-left-radius:6px;font-size:15.5px;line-height:1.45;overflow-wrap:anywhere;background:var(--surface-2);color:var(--ink);min-width:0}
.ob-bub-b p{margin:0}
.ob-bub.team .ob-bub-b{background:var(--brand);color:#FFFFFF;border-bottom-left-radius:18px;border-bottom-right-radius:6px}
.ob-bub.note .ob-bub-b{background:var(--warn-soft);color:var(--ink)}
.ob-bub.gone .ob-bub-b{background:var(--surface-3);color:var(--ink-2);border:1px dashed var(--line-2)}
.ob-bub-at{font-size:12px;color:var(--ink-2);padding:0 6px}
.ob-bub>.ob-row{justify-content:flex-end;gap:0 14px;font-size:13px;padding:0 6px;text-align:right}
.ob-bub>details{align-self:flex-end;padding:0 6px}
.ob-convo-w{border-top:1px solid var(--line-soft);padding-top:18px;margin-top:4px}
@media (min-width:720px){.ob-bub{max-width:74%}}

/* something a page could not find, the way the doors say it */
.ob-lost{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:36px 22px;max-width:640px}
.ob-lost-ic{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand-ink)}
.ob-lost-ic .ob-icon{width:26px;height:26px}
@media (min-width:720px){.ob-lost{padding:44px 40px}}

/* forms that are a whole sheet (New client): the parts named on the left,
   the buttons at the foot of the sheet */
.ob-narrow{max-width:440px}
.ob-tickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 18px;max-width:760px}
.ob-tickgrid label.ob-row{flex-wrap:nowrap}
.ob-tickgrid label.ob-row span{min-width:0}
.ob-formfoot{display:flex;flex-wrap:wrap;gap:10px;padding:18px;border-top:1px solid var(--line-soft)}
.ob-sec-b .ob-grid2{max-width:760px}
.ob-sec-b>.ob-field,.ob-sec-b>fieldset{max-width:760px}
@media (min-width:900px){
  .ob-stats.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ob-formfoot{padding:20px 28px 22px 290px}
  .ob-stats.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ob-art-r{align-items:flex-end;text-align:right}
  .ob-pane{padding:22px 26px 24px}
  .ob-pubbar{padding:20px 26px}
}
@media (min-width:1100px){
  .ob-guide{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px}
}

/* the shared side menu (railLayout in components.ts): the SOP library, the
   Campaign tab, Admin, the AI page, the Guide list. The checklist's section
   rail, generalised; the checklist keeps its own classes. On a phone the
   entries are one row that scrolls sideways inside itself, never the page;
   from 1000px a sticky 270px menu on the left. The current entry is a white
   ground and a soft ring, never a side border (rule 2). */
.ob-rail{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.ob-rail-nav{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px}
.ob-rail-nav::-webkit-scrollbar{display:none}
.ob-rail-nav a{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:none;min-width:150px;max-width:240px;min-height:44px;padding:10px 14px;border-radius:12px;color:var(--ink);font-size:14.5px;line-height:1.3}
.ob-rail-nav a:hover{text-decoration:none;background:var(--surface-2)}
.ob-rail-nav a[aria-current="page"]{background:var(--surface);box-shadow:0 0 0 1px var(--line-soft),var(--shadow-soft);font-weight:700;color:var(--navy)}
.ob-rail-nav a.gap{margin-left:14px}
.ob-rail-nav small{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;font-size:13px;font-weight:500;color:var(--ink-2)}
.ob-rail-nav small .ob-icon{flex:none}
.ob-rail-nav small .ob-state{display:inline-flex;align-items:center;gap:6px}
.ob-rail-body{display:flex;flex-direction:column;gap:20px;min-width:0}
@media (min-width:1000px){
  .ob-rail{grid-template-columns:270px minmax(0,1fr);gap:28px}
  .ob-rail-nav{flex-direction:column;gap:4px;overflow:visible;position:sticky;top:16px}
  .ob-rail-nav a{min-width:0;max-width:none}
  .ob-rail-nav a.gap{margin-left:0;margin-top:18px}
}
/* The Files tab's three areas share a phone's width (.ob-filestab, above);
   from 640px the shared rail is as it was. */
.ob-filestab .ob-rail-nav a{flex:1 1 0;min-width:0;padding:10px 12px}
@media (min-width:640px){.ob-filestab .ob-rail-nav a{flex:none;min-width:150px;padding:10px 14px}}
@media (min-width:1000px){.ob-filestab .ob-rail-nav a{min-width:0}}

/* round 3, Phase 5: the lead's welcome call hours on Admin's Google card,
   one row a weekday: the day, from, "to", until. */
.ob-hours{display:flex;flex-direction:column;gap:12px;margin:10px 0 16px;max-width:520px}
.ob-hours-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:4px 8px}
.ob-hours-d{grid-column:1/-1;font-weight:600}
.ob-hours-row .ob-input{min-width:0}
/* An empty anchor a redirect lands on (the client page's #call): nothing in
   it for the open from hash script to unfold. */
.ob-anchor{display:block;height:0;scroll-margin-top:12px}
.ob-anchor+div{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ob-anchor+div>form{align-self:stretch}
@media (min-width:560px){
  .ob-hours{gap:8px}
  .ob-hours-row{grid-template-columns:104px minmax(0,1fr) auto minmax(0,1fr)}
  .ob-hours-d{grid-column:auto}
}

/* ---------------- the client portal (src/ui/portal-styles.ts) ---------------- */
:root{
  --pt-r:18px; --pt-line:#E3E9F1; --pt-hover:#F7F9FC; --pt-step-done:#9CC0E4; --pt-badge:#B83A33; --pt-on-brand-2:#E3EEFA;
  --pt-sent:#7FAAD8;
  --pt-shadow:0 1px 2px rgba(11,29,58,.05),0 8px 28px rgba(11,29,58,.07);
  --pt-pdf:#A3322C; --pt-pdf-bg:#FBE4E2; --pt-img:#0E6466; --pt-img-bg:#DDF2F2; --pt-vid:#5A3AA6; --pt-vid-bg:#EEE8FB;
  --pt-xls:#176B46; --pt-xls-bg:#E2F4EA; --pt-doc:#0F4F8A; --pt-doc-bg:#E3EEFA; --pt-ppt:#94470E; --pt-ppt-bg:#FDEBDD;
  --pt-art:#8A5A06; --pt-art-bg:#FBF0D9; --pt-zip:#4A5A74; --pt-zip-bg:#EAF0F7;
}
.pt{background:var(--bg)}
.pt-i{width:20px;height:20px;flex:none;display:block}
.pt-i.sm{width:16px;height:16px}
.pt-i.lg{width:40px;height:40px}

/* the bar: logotype, label, the tabs (placed below on a phone), the account menu */
.pt-top{position:relative;flex-wrap:nowrap;z-index:30}
.pt-top .ob-bar-title{white-space:nowrap}
.pt-me{margin-left:auto;position:relative;flex:none}
.pt-me-s{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 2px 0 4px;list-style:none;cursor:pointer;color:var(--bar-ink);border-radius:12px}
.pt-me-s::-webkit-details-marker{display:none}
.pt-me-s::marker{content:""}
.pt-avatar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--brand);color:#FFFFFF;font-weight:700;font-size:14px;letter-spacing:.02em}
.pt-me-chev{color:var(--bar-muted);transition:transform .15s}
.pt-me[open] .pt-me-chev{transform:rotate(180deg)}
.pt-me-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(300px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--pt-line);border-radius:16px;box-shadow:0 14px 44px rgba(11,29,58,.2);padding:8px;display:flex;flex-direction:column}
.pt-me-menu form{margin:0}
.pt-me-menu :focus-visible{outline-color:var(--brand)}
.pt-me-who{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;margin-bottom:6px;overflow-wrap:anywhere;background:var(--pt-hover);border-radius:10px}
.pt-me-who b{color:var(--navy);font-size:15px}
.pt-me-who span{color:var(--ink-2);font-size:13.5px}
.pt-me-h{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-2);padding:12px 12px 4px}
.pt-me-a{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:500;text-align:left;cursor:pointer}
.pt-me-a:hover{background:var(--surface-2);text-decoration:none}
.pt-me-a .pt-i{color:var(--ink-2)}

/* the tabs: a bottom bar on a phone */
.pt-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--surface);border-top:1px solid var(--pt-line);box-shadow:0 -6px 24px rgba(11,29,58,.07);padding:0 4px env(safe-area-inset-bottom,0px)}
.pt-nav :focus-visible{outline-color:var(--brand)}
.pt-nav-a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:58px;padding:7px 2px 6px;color:var(--ink-2);font-size:11.5px;font-weight:600;line-height:1.1;text-align:center;white-space:nowrap}
.pt-nav-a:hover{text-decoration:none;color:var(--brand-ink)}
.pt-nav-a.on{color:var(--brand-ink);font-weight:700}
.pt-nav-a.on::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--brand)}
.pt-nav-ic{position:relative;display:inline-flex}
.pt-nav-ic .pt-i{width:24px;height:24px}
.pt-nav-l{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pt-nav-l.long{display:none}
.pt-badge{position:absolute;top:-6px;left:14px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--pt-badge);color:#FFFFFF;font-size:11px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--surface)}
.pt-page{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px));gap:18px}

/* type */
.pt-head{display:flex;flex-direction:column;gap:6px;padding-top:4px}
.pt-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.pt-h1{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.1;letter-spacing:-.02em;color:var(--navy);text-wrap:balance}
.pt-lede{color:var(--ink-2);font-size:16px;max-width:60ch;text-wrap:pretty}
.pt-h2{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.2;letter-spacing:-.01em;color:var(--navy)}
.pt-lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.pt-p{font-size:15.5px;line-height:1.55;color:var(--ink);max-width:62ch;overflow-wrap:anywhere}
.pt-sub{font-size:14px;color:var(--ink-2)}
.pt-state{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:13.5px;line-height:1.3}
.pt-state.good{color:var(--good-ink)}
.pt-state.warn{color:var(--warn-ink)}
.pt-state.brand{color:var(--brand-ink)}
.pt-state.muted{color:var(--ink-2);font-weight:500}
.pt-state.bad{color:var(--bad)}

/* buttons */
.pt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:12px;border:1px solid transparent;font:inherit;font-size:16px;font-weight:700;line-height:1.2;text-align:center;cursor:pointer}
.pt-btn:hover{text-decoration:none}
.pt-btn.primary{background:var(--brand);border-color:var(--brand);color:#FFFFFF}
.pt-btn.primary:hover{filter:brightness(.94)}
.pt-btn.primary:active{filter:brightness(.88)}
.pt-btn.secondary{background:var(--surface);border-color:var(--line-2);color:var(--navy)}
.pt-btn.secondary:hover{border-color:var(--brand)}
.pt-btn.quiet{background:var(--surface-2);border-color:var(--surface-2);color:var(--brand-ink)}
.pt-btn.wide{width:100%}
.pt-btns{display:flex;flex-direction:column;gap:10px;width:100%}
.pt-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;color:var(--brand-ink)}

/* cards, notes, flashes */
.pt-card{background:var(--surface);border:1px solid var(--pt-line);border-radius:var(--pt-r);box-shadow:var(--pt-shadow);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pt-card.focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft),var(--pt-shadow)}
.pt-card.flush{padding:0;gap:0;overflow:hidden}
.pt-card-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pt-card-h .pt-h2{flex:1;min-width:0}
.pt-flash{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--pt-line);box-shadow:var(--pt-shadow);color:var(--ink);font-size:15px;line-height:1.45}
.pt-flash p{margin:0}
.pt-flash.good .pt-i{color:var(--good)}
.pt-flash.warn .pt-i{color:var(--warn)}
.pt-flash.info .pt-i{color:var(--brand)}
.pt-note{background:var(--brand-soft);border-radius:12px;padding:12px 14px;font-size:14.5px;color:var(--ink);overflow-wrap:anywhere}
.pt-note.warn{background:var(--warn-soft)}
.pt-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 20px;background:var(--surface);border:1px solid var(--pt-line);border-radius:var(--pt-r)}
.pt-empty .pt-i{color:var(--brand);margin-bottom:4px}
.pt-empty-t{font-family:var(--display);font-weight:700;font-size:20px;color:var(--navy)}
.pt-empty-p{color:var(--ink-2);max-width:40ch}
.pt-disc>summary{display:flex;align-items:center;gap:6px;min-height:44px;padding:0;list-style:none;font-weight:700;color:var(--brand-ink);cursor:pointer}
.pt-disc>summary::-webkit-details-marker{display:none}
.pt-disc>summary::marker{content:""}
.pt-disc>summary .pt-i{transition:transform .15s}
.pt-disc[open]>summary .pt-i{transform:rotate(180deg)}
.pt-disc-b{display:flex;flex-direction:column;gap:12px;padding:4px 0 6px}

/* home: where we are */
.pt-home{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.pt-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.pt-hero{align-items:center;text-align:center;padding:24px 18px 20px;gap:10px}
.pt-hero-ic{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand-ink)}
.pt-hero-ic.good{background:var(--good-soft);color:var(--good-ink)}
.pt-hero-ic.warn{background:var(--warn-soft);color:var(--warn-ink)}
.pt-hero-ic .pt-i{width:28px;height:28px}
.pt-hero-t{font-family:var(--display);font-weight:700;font-size:23px;line-height:1.15;letter-spacing:-.015em;color:var(--navy);text-wrap:balance;max-width:22ch}
.pt-hero-p{color:var(--ink-2);font-size:15.5px;max-width:40ch;text-wrap:balance}
.pt-hero .pt-btns{max-width:360px}
.pt-hero .pt-state{font-size:14px}
.pt-big{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 8px}
.pt-big-n{font-size:46px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums}
.pt-big-u{font-size:15px;font-weight:500;color:var(--ink-2)}
/* D130: the checklist's count, "10 of 38 complete", in one size, number and words alike */
.pt-count{font-size:19px;font-weight:700;line-height:1.3;color:var(--navy);font-variant-numeric:tabular-nums}
.pt-bar{width:100%;max-width:300px;height:8px;border-radius:8px;background:var(--surface-2);overflow:hidden}
.pt-bar span{display:block;height:100%;border-radius:8px;background:var(--brand)}
/* round 3: the checklist's bar has two tones, green for what we accepted and
   light blue for what was sent and is with us; the words say both */
.pt-bar.two{display:flex}
.pt-bar.two span{border-radius:0}
.pt-bar.two span.done{background:var(--good)}
.pt-bar.two span.sent{background:var(--pt-sent)}
.pt-hero-states{display:flex;flex-direction:column;align-items:center;gap:4px}
.pt-track{width:100%;max-width:360px;display:flex;flex-direction:column;gap:9px;margin-top:6px;padding-top:16px;border-top:1px solid var(--pt-line)}
.pt-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.pt-steps span{height:5px;border-radius:5px;background:var(--line)}
.pt-steps span.done{background:var(--pt-step-done)}
.pt-steps span.now{background:var(--brand)}
.pt-step-t{font-size:13.5px;color:var(--ink-2)}
.pt-step-t b{color:var(--ink)}
.pt-greet{display:flex;flex-direction:column;gap:4px;padding-top:6px}

/* the welcome call: a banner at the top of the checklist (D108), gone once the call has happened */
.pt-banner{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--brand-soft);border-radius:16px;color:var(--ink);min-width:0}
.pt-banner-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.pt-banner-t{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:2px}
.pt-banner-h{font-weight:700;font-size:16px;line-height:1.3;color:var(--navy)}
.pt-banner-when-t{font-weight:600;font-size:15px;line-height:1.35;color:var(--ink)}
.pt-banner-p{font-size:14.5px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.pt-banner-p.strong{font-weight:600;color:var(--ink)}
.pt-banner-a{flex:1 1 100%;display:flex;min-width:0}
.pt-banner .pt-more{min-height:44px}
.pt-banner .pt-dtile{width:46px;height:50px;border-radius:12px}
.pt-banner .pt-dtile-m{font-size:10.5px;line-height:18px}
.pt-banner .pt-dtile-d{font-size:20px}
.pt-banner .pt-dtile.blank{background:var(--surface);border-color:var(--surface)}
.pt-banner .pt-dtile.blank .pt-i{width:24px;height:24px}
.pt-banner-when>summary{font-size:14.5px}
.pt-banner .pt-when-form{padding:2px 0 8px}
.pt-addr{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.pt-banner .pt-when-help{display:flex;flex-direction:column;gap:6px;padding:2px 0 8px}
.pt-dtile{width:58px;height:62px;flex:none;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--pt-line);box-shadow:0 1px 3px rgba(11,29,58,.08);text-align:center}
.pt-dtile-m{background:var(--brand);color:#FFFFFF;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:21px}
.pt-dtile-d{flex:1;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.pt-dtile.blank{align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand-soft);box-shadow:none}
.pt-dtile.blank .pt-i{width:30px;height:30px}
.pt-when-form{display:flex;flex-direction:column;gap:12px}
.pt-when-form .ob-grid2{gap:10px}

/* home: from your team */
.pt-upd{display:flex;gap:12px;align-items:flex-start;padding:14px 0}
.pt-upd:first-of-type{padding-top:2px}
.pt-upd+.pt-upd{border-top:1px solid var(--pt-line)}
.pt-upd-ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--good-soft);color:var(--good-ink)}
.pt-upd-ic.next{background:var(--brand-soft);color:var(--brand-ink)}
.pt-upd-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pt-upd-h{font-weight:700;color:var(--navy);font-size:15px}
.pt-upd-p{color:var(--ink);font-size:15px;overflow-wrap:anywhere}
.pt-upd-at{color:var(--ink-2);font-size:12.5px}

/* the landing (D108): the where we are card, the team's lines beside it on a
   wide screen, and the checklist stepper; on a phone the stepper comes right
   after the card, because the checklist is the main thing */
.pt-land{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"where" "steps" "upd";gap:16px;align-items:start}
.pt-land-where{grid-area:where;min-width:0}
.pt-land-upd{grid-area:upd;min-width:0}
.pt-land-steps{grid-area:steps;min-width:0;display:flex;flex-direction:column;gap:12px}

/* the checklist stepper, Tesla style: "Section 2 of 6 · Access and accounts"
   as a button that opens the list of sections, Previous and Next section
   either side (D130: real buttons, a border and a clear chevron, the word from
   720px, a 44px round arrow on a phone), and the section's items inside the
   one card below it. Without the script only the current card shows; with it
   every card sits in one row that scrolls and snaps, a swipe on a phone. */
.pt-stp{display:flex;flex-direction:column;gap:10px;min-width:0;scroll-margin-top:12px}
.pt-stp-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px;min-width:0}
.pt-stp-arrow{height:44px;min-width:44px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--surface);border:1.5px solid var(--brand);box-shadow:0 1px 2px rgba(11,29,58,.06);color:var(--brand-ink);font-size:15px;font-weight:700;line-height:1;white-space:nowrap}
.pt-stp-arrow .pt-i{width:22px;height:22px;stroke-width:2.3}
.pt-stp-arrow:hover{text-decoration:none;background:var(--brand-soft)}
.pt-stp-arrow[data-step="1"]{justify-self:end}
.pt-stp-arrow:not([href]){visibility:hidden}
.pt-stp-aw{display:none}
.pt-stp-pick{position:relative;min-width:0}
.pt-stp-pick>summary{display:flex;align-items:center;justify-content:center;gap:4px;min-height:48px;padding:4px 6px 4px 10px;list-style:none;cursor:pointer;border-radius:12px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(11,29,58,.06);color:var(--navy);line-height:1.25}
.pt-stp-pick>summary::-webkit-details-marker{display:none}
.pt-stp-pick>summary::marker{content:""}
.pt-stp-pick>summary:hover{border-color:var(--brand)}
.pt-stp-pick[open]>summary{border-color:var(--brand)}
.pt-stp-dn{color:var(--brand-ink);stroke-width:2.2;transition:transform .15s}
.pt-stp-pick[open] .pt-stp-dn{transform:rotate(180deg)}
.pt-stp-lbl{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.pt-stp-n{font-size:13px;font-weight:600;color:var(--ink-2)}
.pt-stp-sep{display:none}
.pt-stp-t{font-size:15.5px;font-weight:700;color:var(--navy);text-wrap:balance}
.pt-stp-menu{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);z-index:50;width:min(340px,calc(100vw - 32px));list-style:none;margin:0;padding:6px;background:var(--surface);border:1px solid var(--pt-line);border-radius:16px;box-shadow:0 14px 44px rgba(11,29,58,.2)}
.pt-stp-mi{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 10px;border-radius:10px;color:var(--ink)}
.pt-stp-mi:hover{text-decoration:none;background:var(--pt-hover)}
.pt-stp-mi[aria-current]{background:var(--brand-soft)}
.pt-stp-mi-n{width:28px;height:28px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-2);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.pt-stp-mi-n.done{background:var(--good);color:#FFFFFF}
.pt-stp-mi-n.review{background:var(--brand-soft);color:var(--brand-ink)}
.pt-stp-mi-n.done .pt-i{stroke-width:3}
.pt-stp-mi-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.pt-stp-mi-t b{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--navy)}
.pt-stp-mi .pt-state{font-size:12.5px}
.pt-stp-track{position:relative;min-width:0}
.pt-stp[aria-busy=true] .pt-stp-track{opacity:.7;transition:opacity .2s}
.pt-stp:not(.js) .pt-stp-card:not(.on){display:none}
.pt-stp.js .pt-stp-track{display:flex;align-items:flex-start;gap:10px;margin:0 -16px;padding:2px 26px 16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;transition:height .25s ease}
.pt-stp.js .pt-stp-track::-webkit-scrollbar{display:none}
.pt-stp.js .pt-stp-card{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;transition:opacity .2s}
.pt-stp.js .pt-stp-card:not(.on){opacity:.5}
.pt-stp-card{min-width:0;background:var(--surface);border:1px solid var(--pt-line);border-radius:var(--pt-r);box-shadow:var(--pt-shadow);overflow:hidden;scroll-margin-top:12px}
.pt-stp-ch{display:flex;align-items:center;gap:14px;padding:18px 16px 14px}
.pt-stp-cht{display:flex;flex-direction:column;gap:2px;min-width:0}
.pt-stp-state .pt-state{font-size:18px;gap:6px}
.pt-stp-card>.pt-bar{width:auto;max-width:none;margin:0 16px 16px}
.pt-stp-done{display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 20px 14px;text-align:center}
.pt-stp-tick{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:4px;background:var(--good-soft);color:var(--good)}
.pt-stp-tick .pt-i{width:34px;height:34px;stroke-width:2.6}
.pt-stp-done-t{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.15;color:var(--navy)}
/* round 3 (2.8): a section whose every item is sent, with us for review: a
   blue clock in a soft blue circle, never the green tick before we accept */
.pt-stp-tick.review{background:var(--brand-soft);color:var(--brand)}
.pt-stp-tick.review .pt-i{stroke-width:2.2}
.pt-stp-done.review .pt-sub{max-width:36ch;text-wrap:balance}
.pt-stp-more>summary{justify-content:center;padding:0 16px 6px}
.pt-items{list-style:none;margin:0;padding:0}
.pt-items>li+li,.pt-items>li:first-child{border-top:1px solid var(--pt-line)}
.pt-irow{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 12px 10px 16px;color:var(--ink);scroll-margin-top:12px}
.pt-irow:hover{text-decoration:none;background:var(--pt-hover)}
.pt-irow-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pt-irow-n{font-weight:600;font-size:15.5px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.pt-irow-m{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:13px;color:var(--ink-2)}
.pt-irow .pt-chev{width:22px;height:22px;stroke-width:2.3;color:var(--brand-ink);transition:transform .15s}
.pt-items>li.open{background:var(--bg)}
.pt-items>li.open>.pt-irow .pt-chev{transform:rotate(180deg)}
.pt-items>li.waived .pt-irow-n{color:var(--ink-2);font-weight:500}
.pt-tick{width:24px;height:24px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--line-2);background:var(--surface);color:#FFFFFF}
.pt-tick .pt-i{width:14px;height:14px;stroke-width:3}
.pt-tick.done{background:var(--good);border-color:var(--good)}
.pt-tick.checking{border-color:var(--brand);color:var(--brand)}
.pt-tick.checking .pt-i{stroke-width:2.4}
.pt-tick.needs{border-color:var(--warn);background:var(--warn-soft)}
.pt-tick.waived{border-style:dashed;background:var(--surface-2)}
/* round 3 (2.7): the row just sent is lit for a moment, then fades */
.pt-items>li[data-just-sent]{animation:pt-just-sent 2.8s ease-out}
@keyframes pt-just-sent{0%,35%{background:var(--brand-soft)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.pt-items>li[data-just-sent]{animation:none}}
/* round 3 (2.11): the line inside an item that is with us, kept until we decide */
.pt-withus{display:flex;align-items:flex-start;gap:8px;color:var(--brand-ink);font-weight:600;font-size:14.5px;line-height:1.45}
.pt-withus .pt-i{flex:none;margin-top:2px}
.pt-ibody{display:flex;flex-direction:column;gap:16px;padding:2px 16px 22px}
.pt-ibody .pt-card{padding:16px}
/* an open item (D130): one quiet row of help (Show me, Ask Vuepoint AI,
   Message the team) with Show me's box dropping out of it, then the choice
   of how to send. Show me is a checkbox and the choice is radio buttons, both
   visually hidden: their labels are what a person presses, CSS shows only
   what was picked, and the page needs no script for any of it. */
.pt-helpw{position:relative;display:flex;flex-direction:column;gap:1px;background:var(--pt-line);border:1px solid var(--pt-line);border-radius:14px;overflow:hidden}
.pt-help{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px}
.pt-help-a{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-height:64px;padding:12px 6px 10px;background:var(--surface);color:var(--brand-ink);font-size:13.5px;font-weight:600;line-height:1.2;text-align:center;text-wrap:balance;cursor:pointer}
.pt-help-a:hover{text-decoration:none;background:var(--pt-hover)}
.pt-how-cb:checked~.pt-help .pt-help-how{background:var(--brand-soft)}
/* the keyboard's ring, drawn inside each action: the panel clips (overflow:hidden)
   the site's outer ring, and a rounded action would show the grey panel at its corners */
.pt-help-a{position:relative}
.pt-help-a:focus-visible{outline:none}
.pt-how-cb:focus-visible~.pt-help .pt-help-how::after,.pt-help-a:focus-visible::after{content:"";position:absolute;inset:3px;border:2px solid var(--brand);border-radius:10px;pointer-events:none}
.pt-how{display:none;flex-direction:column;gap:8px;background:var(--surface);padding:14px 16px 16px}
.pt-how-cb:checked~.pt-how{display:flex}
.pt-how .pt-p+.pt-lbl{margin-top:8px}
.pt-send{margin:0;padding:0;border:0;min-width:0}
.pt-send>legend{padding:0;margin:0 0 10px}
.pt-m-opts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.pt-m-opts.n3,.pt-m-opts.n4{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
.pt-m-opts.n3 .pt-m-o:last-child{grid-column:1/-1}
.pt-m-o{display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 8px;border:1.5px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--navy);font-size:15px;font-weight:600;line-height:1.2;text-align:center;text-wrap:balance;cursor:pointer}
.pt-m-o:hover{border-color:var(--brand)}
.pt-m-r[value=form]:checked~.pt-m-opts [data-m=form],.pt-m-r[value=file]:checked~.pt-m-opts [data-m=file],.pt-m-r[value=link]:checked~.pt-m-opts [data-m=link],.pt-m-r[value=text]:checked~.pt-m-opts [data-m=text],.pt-m-r[value=none]:checked~.pt-m-opts [data-m=none]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--brand)}
.pt-m-r[value=form]:focus-visible~.pt-m-opts [data-m=form],.pt-m-r[value=file]:focus-visible~.pt-m-opts [data-m=file],.pt-m-r[value=link]:focus-visible~.pt-m-opts [data-m=link],.pt-m-r[value=text]:focus-visible~.pt-m-opts [data-m=text],.pt-m-r[value=none]:focus-visible~.pt-m-opts [data-m=none]{outline:2px solid var(--brand);outline-offset:2px}
.pt-m-p{display:none;margin-top:16px}
/* Round 3, Phase 3: a v1 item's own form (src/portal/pages/form.ts). Labels
   in navy over white boxes; the one line on top when something is already
   filled in; a confirmation as one ringed tick; choices as rows; a path as
   large choices side by side, only the picked one's fields shown (CSS pairs
   radio n with option n and box n, no script); people as rows in a white box. */
.pt-fform{display:flex;flex-direction:column;gap:20px;min-width:0}
.pt-fform .ob-label{font-size:14.5px;font-weight:600;color:var(--navy)}
.pt-fform .ob-input.area{min-height:92px}
.pt-f-lead{display:flex;align-items:flex-start;gap:8px;margin:0;color:var(--brand-ink);font-size:14.5px;font-weight:600;line-height:1.45}
.pt-f-lead .pt-i{flex:none;margin-top:2px}
.pt-src{color:var(--ink-2)}
.pt-fform .ob-field>.ob-help+.ob-help{margin-top:-3px}
.pt-f-em{font-weight:700;color:var(--brand-ink);overflow-wrap:break-word}
.pt-f-sub{display:block;font-size:15px;font-weight:500;color:var(--ink-2);overflow-wrap:anywhere}
.pt-f-when{display:contents}
.pt-tickbox{display:flex;align-items:flex-start;gap:12px;min-height:56px;padding:15px 16px;border:1.5px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--navy);font-size:15.5px;font-weight:600;line-height:1.45;cursor:pointer;overflow-wrap:break-word}
.pt-tickbox:hover{border-color:var(--brand)}
.pt-tickbox:has(input:checked){border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.pt-tickbox input,.pt-fform .pt-tickrow input,.pt-opt input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--brand)}
.pt-fform .pt-tickrow{align-items:flex-start;padding:10px 0 0;line-height:1.45;overflow-wrap:anywhere}
.pt-f-tick{gap:4px}
.pt-f-tick>.ob-help,.pt-f-tick>.ob-err{padding-left:34px}
.pt-f-tick.main>.ob-help,.pt-f-tick.main>.ob-err{padding-left:4px}
.pt-f-tick.main+.pt-f-tick:not(.main){margin-top:-8px}
.pt-f-choice,.pt-f-group,.pt-f-paths{margin:0;padding:0;border:0;min-width:0}
.pt-f-choice>legend,.pt-f-group>legend,.pt-f-paths>legend{padding:0;margin:0 0 8px}
.pt-opts{display:flex;flex-direction:column;gap:8px}
.pt-opt{display:flex;align-items:flex-start;gap:12px;min-height:52px;padding:14px;border:1.5px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--ink);font-size:15px;font-weight:500;line-height:1.4;cursor:pointer;overflow-wrap:anywhere}
.pt-opt:hover{border-color:var(--brand)}
.pt-opt:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--brand)}
.pt-path-opts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.pt-path-o{display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--navy);font-size:15px;font-weight:600;line-height:1.25;text-align:center;text-wrap:balance;cursor:pointer}
.pt-path-o:hover{border-color:var(--brand)}
.pt-path-r[data-n="1"]:checked~.pt-path-opts [data-n="1"],.pt-path-r[data-n="2"]:checked~.pt-path-opts [data-n="2"],.pt-path-r[data-n="3"]:checked~.pt-path-opts [data-n="3"],.pt-path-r[data-n="4"]:checked~.pt-path-opts [data-n="4"]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--brand)}
.pt-path-r[data-n="1"]:focus-visible~.pt-path-opts [data-n="1"],.pt-path-r[data-n="2"]:focus-visible~.pt-path-opts [data-n="2"],.pt-path-r[data-n="3"]:focus-visible~.pt-path-opts [data-n="3"],.pt-path-r[data-n="4"]:focus-visible~.pt-path-opts [data-n="4"]{outline:2px solid var(--brand);outline-offset:2px}
.pt-path{display:none;flex-direction:column;gap:18px;margin-top:18px}
.pt-path-r[data-n="1"]:checked~.pt-path[data-n="1"],.pt-path-r[data-n="2"]:checked~.pt-path[data-n="2"],.pt-path-r[data-n="3"]:checked~.pt-path[data-n="3"],.pt-path-r[data-n="4"]:checked~.pt-path[data-n="4"]{display:flex}
.pt-f-note{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink)}
.pt-f-shown{gap:2px}
.pt-f-val{margin:0;font-size:16px;font-weight:600;line-height:1.45;color:var(--navy);overflow-wrap:anywhere;white-space:pre-line}
.pt-f-group{display:flex;flex-direction:column;gap:10px}
.pt-f-group>.ob-help{margin-top:-6px}
.pt-f-row{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--pt-line);border-radius:14px;background:var(--surface)}
.pt-f-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.pt-f-row .ob-label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.pt-f-more>summary{font-size:14.5px;min-height:40px}
.pt-f-more>summary .pt-i{transition:none}
.pt-f-more[open]>summary .pt-i{transform:none}
.pt-f-more>.pt-disc-b{gap:10px;padding-top:0}
/* An open row has no "Add another" over it any more: folding it away would
   hide a person who is still sent (clearing its boxes drops the row). */
.pt-f-more[open]>summary{display:none}
/* A form that came back lands on its first box with an error, with that box's
   label in view above it. */
.pt-fform :is(input,select,textarea){scroll-margin-top:72px}
.pt-fform fieldset{scroll-margin-top:16px}
.pt-f-rep{display:flex;flex-direction:column;gap:6px}
.pt-f-link{margin:0}
.pt-f-link .pt-more{min-height:40px}
.pt-f-ro{display:flex;flex-direction:column;gap:6px}
.pt-f-ro p{margin:0}
/* Show me: numbered steps in small blue circles, the specs a plain list */
.pt-howl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:pt-howl}
.pt-howl>li{position:relative;min-height:24px;padding:1px 0 0 34px;font-size:15px;line-height:1.5;color:var(--ink);counter-increment:pt-howl;overflow-wrap:anywhere}
.pt-howl>li::before{content:counter(pt-howl);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);font-size:12.5px;font-weight:700;line-height:24px;text-align:center}
.pt-specl{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.5;color:var(--ink)}
.pt-specl>li::marker{color:var(--ink-2)}
.pt-how .pt-howl+.pt-lbl{margin-top:8px}
/* What you've sent, for a form: the label small over the value */
.pt-sent-form{display:flex;flex-direction:column;gap:8px}
.pt-sent-path{font-weight:700;color:var(--navy)}
.pt-sent-kv{display:flex;flex-direction:column;gap:1px}
.pt-sent-k{font-size:12.5px;color:var(--ink-2)}
.pt-sent-v{font-size:15px;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.pt-sent-tick{display:flex;align-items:flex-start;gap:6px;font-size:15px;line-height:1.4;color:var(--ink)}
.pt-sent .pt-sent-tick .pt-i{color:var(--good);margin-top:2px;stroke-width:2.6}
/* the Access section's header: the address once, in bold, with Copy */
.pt-intro{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 16px 16px;padding:14px 16px;border-radius:14px;background:var(--brand-soft)}
.pt-intro-t{flex:1 1 220px;min-width:0;margin:0;font-size:15px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.pt-intro-addr{color:var(--navy);font-weight:700;overflow-wrap:anywhere}
.pt-copy{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border:1.5px solid var(--brand);border-radius:12px;background:var(--surface);color:var(--brand-ink);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.pt-copy:hover{background:var(--pt-hover)}
.pt-m-r[value=form]:checked~.pt-m-p[data-m=form],.pt-m-r[value=file]:checked~.pt-m-p[data-m=file],.pt-m-r[value=link]:checked~.pt-m-p[data-m=link],.pt-m-r[value=text]:checked~.pt-m-p[data-m=text],.pt-m-r[value=none]:checked~.pt-m-p[data-m=none]{display:block}
/* an item that takes one way besides I don't have this: that way's box shows
   at once, and one checkbox AFTER the boxes (so Tab meets it where the eye
   does, under Send it over) swaps it for the I don't have this box */
.pt-send.one .pt-m-p{display:block;margin-top:0}
.pt-send.one .pt-m-p[data-m=none]{display:none}
.pt-send.one:has(.pt-m-none:checked) .pt-m-p{display:none}
.pt-send.one:has(.pt-m-none:checked) .pt-m-p[data-m=none]{display:block}
.pt-m-alt{display:flex;margin:6px 0 0}
.pt-m-alt label{display:none;align-items:center;min-height:44px;color:var(--brand-ink);font-size:14.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pt-m-none:not(:checked)~label[data-m=none],.pt-m-none:checked~label:not([data-m=none]){display:inline-flex}
.pt-m-none:focus-visible~label{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.pt-sendmore>summary{font-weight:600}
.pt-sendmore .pt-disc-b{padding-top:8px}
.pt-ro{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:20px}
.pt-ro .pt-drop{cursor:not-allowed}
.pt-btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.pt-sent{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--pt-line);border-radius:14px}
.pt-sent>li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px}
.pt-sent>li+li{border-top:1px solid var(--pt-line)}
.pt-sent-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.pt-sent-t a{font-weight:600}
.pt-sent .pt-i{color:var(--ink-2);margin-top:2px}
.pt-form{display:flex;flex-direction:column;gap:20px;margin:0}
/* round 3 (2.13): Send goes quiet while its one required box is empty, and
   still works; what comes back is drawn in red right above it (.ob-err). Quiet
   is the soft blue with dark blue words, never a faded button: its words keep
   AA contrast because it can still be pressed (Phase 1 review) */
.pt-form:has([required]:invalid) .pt-btn.primary{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand-ink)}
.pt-form:has([required]:invalid) .pt-btn.primary:hover{border-color:var(--brand)}
.pt-form .ob-err{margin-top:2px}
.pt-block{display:flex;flex-direction:column;gap:8px;min-width:0}
.pt-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 16px;border:1.5px dashed var(--line-2);border-radius:14px;background:var(--surface);color:var(--ink-2);text-align:center;cursor:pointer;font-size:14px}
.pt-drop .pt-i{color:var(--brand);width:28px;height:28px;margin-bottom:4px}
.pt-drop b{color:var(--brand-ink);font-size:15.5px}
.pt-drop.over{border-color:var(--brand);background:var(--brand-soft)}
.pt-drop:focus-within{outline:2px solid var(--brand);outline-offset:2px}
.pt-uplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.pt-tickrow{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:500}
.pt-tickrow input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--brand)}
.pt-ask{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.pt-ask .pt-more{gap:8px}

@media (min-width:560px){.pt-opts.n2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:720px){.pt-f-grid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.pt-f-grid.n3{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,.85fr)}}

/* files */
.pt-files{list-style:none;margin:0;padding:0}
.pt-files>li+li{border-top:1px solid var(--pt-line)}
.pt-file{display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 16px;color:var(--ink)}
.pt-file:hover{text-decoration:none;background:var(--pt-hover)}
.pt-file-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pt-file-n{font-weight:600;font-size:15.5px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.pt-file-m{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.pt-file .pt-dl{color:var(--brand-ink)}
.pt-ftile{width:44px;height:50px;flex:none;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.pt-ftile .pt-i{width:20px;height:20px}
.pt-ftile b{font-size:10px;letter-spacing:.06em;font-weight:700;line-height:1}
.pt-ftile.pdf{background:var(--pt-pdf-bg);color:var(--pt-pdf)}
.pt-ftile.image{background:var(--pt-img-bg);color:var(--pt-img)}
.pt-ftile.video{background:var(--pt-vid-bg);color:var(--pt-vid)}
.pt-ftile.sheet{background:var(--pt-xls-bg);color:var(--pt-xls)}
.pt-ftile.doc{background:var(--pt-doc-bg);color:var(--pt-doc)}
.pt-ftile.slides{background:var(--pt-ppt-bg);color:var(--pt-ppt)}
.pt-ftile.design{background:var(--pt-art-bg);color:var(--pt-art)}
.pt-ftile.archive,.pt-ftile.other{background:var(--pt-zip-bg);color:var(--pt-zip)}

/* messages and the assistant: a chat, yours on the right */
.pt-thread{display:flex;flex-direction:column;gap:16px}
.pt-bub{max-width:86%;display:flex;flex-direction:column;gap:4px;min-width:0;scroll-margin-top:12px}
.pt-bub.theirs{align-self:flex-start}
.pt-bub.mine{align-self:flex-end;align-items:flex-end}
.pt-bub-who{font-size:12.5px;font-weight:700;color:var(--ink-2);padding:0 6px}
.pt-bub-b{padding:11px 15px;border-radius:20px;font-size:15.5px;line-height:1.45;overflow-wrap:anywhere;min-width:0}
.pt-bub-b p{margin:0}
.pt-bub.theirs .pt-bub-b{background:var(--surface-2);color:var(--ink);border-bottom-left-radius:6px}
.pt-bub.mine .pt-bub-b{background:var(--brand);color:#FFFFFF;border-bottom-right-radius:6px}
.pt-bub.mine .pt-bub-b a{color:#FFFFFF;text-decoration:underline}
.pt-bub.ai .pt-bub-b{background:var(--surface);color:var(--ink);border:1px solid var(--pt-line);border-bottom-left-radius:6px}
.pt-bub.ai{max-width:100%}
.pt-bub-at{font-size:12px;color:var(--ink-2);padding:0 6px}
.pt-bub .ob-answer{display:flex;flex-direction:column;gap:8px}
.pt-bub .ob-answer ol,.pt-bub .ob-answer ul{padding-left:20px;margin:0}
.pt-bub-x{display:flex;flex-direction:column;gap:8px;padding:0 6px;font-size:13px;color:var(--ink-2)}
.pt-bub-x form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.pt-compose{display:flex;flex-direction:column;gap:12px;margin:0}
.pt-compose .ob-input.area{min-height:104px}
.pt-thread-card{gap:18px;width:100%;max-width:860px}
.pt-ai-head{display:flex;align-items:center;gap:14px}
.pt-ai-ic{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--brand-soft);color:var(--brand-ink)}
.pt-ai-ic .pt-i{width:26px;height:26px}

/* people, review */
.pt-rows{list-style:none;margin:0;padding:0}
.pt-rows>li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:60px;padding:12px 0}
.pt-rows>li+li{border-top:1px solid var(--pt-line)}
.pt-rows-t{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.pt-rows-t b{color:var(--ink);font-weight:600}
.pt-deliv-h{display:flex;flex-direction:column;gap:4px}
.pt-deliv-k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.pt-deliv-t{font-weight:700;font-size:18px;line-height:1.25;color:var(--navy);overflow-wrap:anywhere}
.pt-steps-list{list-style:none;margin:0;padding:0}
.pt-steps-list>li{display:flex;align-items:center;gap:12px;padding:12px 0}
.pt-steps-list>li+li{border-top:1px solid var(--pt-line)}

@media (min-width:560px){
  .pt-btns{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .pt-btns .pt-btn.wide{width:auto;flex:1 1 180px}
}
@media (min-width:720px){
  .pt-h1{font-size:36px}
  .pt-hero{padding:30px 32px 26px}
  .pt-hero-t{font-size:28px;max-width:30ch}
  .pt-card{padding:24px}
  .pt-ibody{padding:4px 24px 26px 52px;max-width:820px}
  .pt-help-a{flex-direction:row;justify-content:center;gap:8px;min-height:52px;padding:8px 6px;font-size:14.5px}
  .pt-m-opts.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pt-m-opts.n3 .pt-m-o:last-child{grid-column:auto}
  .pt-m-opts.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pt-banner{padding:14px 18px}
  .pt-banner-a{flex:none}
  .pt-banner .pt-btn.wide{width:auto}
  .pt-banner>.pt-banner-when{margin-left:60px}
  .pt-stp-head{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px}
  .pt-stp-arrow{height:48px;border-radius:12px;padding:0 16px 0 10px;justify-self:start}
  .pt-stp-arrow[data-step="1"]{padding:0 10px 0 16px}
  .pt-stp-arrow .pt-i{width:20px;height:20px}
  .pt-stp-aw{display:inline}
  .pt-stp-pick{justify-self:center}
  .pt-stp-pick>summary{gap:10px;padding:5px 12px 5px 18px}
  .pt-stp-lbl{flex-direction:row;align-items:baseline}
  .pt-stp-n{font-size:16px}
  .pt-stp-sep{display:inline;color:var(--ink-2);white-space:pre}
  .pt-stp-t{font-size:16px}
  /* wide screens: no peeking neighbours, the card lines up with the cards above it */
  .pt-stp.js .pt-stp-track{margin:0 -24px;padding:2px 24px 16px;gap:48px}
  .pt-stp-ch{padding:22px 24px 14px}
  .pt-stp-card>.pt-bar{margin:0 24px 18px}
}
@media (min-width:960px){
  .pt-top{padding-right:20px}
  .pt-nav{position:static;display:flex;align-items:center;gap:2px;margin:0 0 0 18px;padding:0;background:transparent;border:0;box-shadow:none;align-self:stretch}
  .pt-nav :focus-visible{outline-color:#FFFFFF}
  .pt-nav-a{flex-direction:row;gap:8px;min-height:44px;padding:0 12px;border-radius:10px;color:var(--bar-link);font-size:14.5px;font-weight:500}
  .pt-nav-a:hover{color:#FFFFFF;background:rgba(255,255,255,.08)}
  .pt-nav-a.on{color:#FFFFFF;font-weight:700}
  .pt-nav-a.on::before{top:auto;bottom:-10px;left:12px;right:12px;height:3px;border-radius:3px 3px 0 0;background:#FFFFFF}
  .pt-nav-ic .pt-i{width:20px;height:20px}
  .pt-nav-l.long{display:inline}
  .pt-nav-l.short{display:none}
  .pt-badge{top:-8px;left:11px;box-shadow:0 0 0 2px var(--navy)}
  .pt-page{padding-bottom:96px}
  .pt-home{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
  .pt-home.solo{grid-template-columns:minmax(0,1fr)}
  .pt-land{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-areas:"where upd" "steps steps"}
  .pt-land.solo{grid-template-areas:"where where" "steps steps"}
}
@media print{
  .pt-nav,.pt-me{display:none}
  .pt-page{padding-bottom:24px}
}

/* ---- D106, the remaining portal pages (review, people, what you've sent) ---- */
/* the review: a summary card, then every item a row that opens in place.
   Its own classes, so the checklist can change without moving it. */
.pt-rsum{display:flex;flex-direction:column;gap:12px}
.pt-rsum .pt-big{justify-content:flex-start;flex:none}
.pt-rsum-t{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.pt-rsum .pt-bar{max-width:none}
.pt-due{font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.pt-due.late .pt-state{font-size:15px}
.pt-rv{background:var(--surface);border:1px solid var(--pt-line);border-radius:var(--pt-r);box-shadow:var(--pt-shadow);overflow:hidden;min-width:0}
.pt-rv-h{display:flex;align-items:baseline;gap:10px;padding:16px 16px 12px}
.pt-rv-h .pt-h2{flex:1;min-width:0}
.pt-rv-c{font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.pt-rv-list{list-style:none;margin:0;padding:0}
.pt-rv-i{border-top:1px solid var(--pt-line)}
.pt-rv-i>section{scroll-margin-top:12px}
.pt-rv-i details>summary{list-style:none;cursor:pointer}
.pt-rv-i details>summary::-webkit-details-marker{display:none}
.pt-rv-i details>summary::marker{content:""}
.pt-rv-i details[open]{background:var(--bg)}
.pt-rv-row{display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 12px 12px 16px;color:var(--ink)}
.pt-rv-row:hover{background:var(--pt-hover)}
.pt-rv-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pt-rv-k{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.pt-rv-n{font-weight:700;font-size:16px;line-height:1.3;color:var(--navy);overflow-wrap:anywhere}
.pt-rv-m{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:13px;color:var(--ink-2)}
.pt-rv-chev{color:var(--ink-2);transition:transform .15s}
.pt-rv-i details[open]>summary .pt-rv-chev{transform:rotate(180deg);color:var(--brand-ink)}
.pt-rv-b{display:flex;flex-direction:column;gap:16px;padding:2px 16px 22px;min-width:0}
.pt-tick.look{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.pt-tick.look .pt-i,.pt-tick.pen .pt-i{width:14px;height:14px;stroke-width:2.2}
.pt-tick.pen{border-color:var(--line-2);background:var(--surface-2);color:var(--ink-2)}
.pt-next{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.pt-next>li{display:flex;align-items:flex-start;gap:12px;padding:10px 0}
.pt-next>li+li{border-top:1px solid var(--pt-line)}
.pt-next .pt-tick{margin-top:1px}
.pt-nextcard{gap:10px}

/* people: who is in, as rows with a face; the invite as a quiet second card */
.pt-face{width:40px;height:40px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand-ink);font-weight:700;font-size:14px;letter-spacing:.02em}
.pt-face.me{background:var(--brand);color:#FFFFFF}
.pt-people{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.pt-ppl{list-style:none;margin:0;padding:0}
.pt-ppl>li{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:64px;padding:12px 0}
.pt-ppl>li+li{border-top:1px solid var(--pt-line)}
.pt-ppl-t{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.pt-ppl-t b{color:var(--ink);font-weight:700;font-size:15.5px}

/* what you've sent, inside an item: the coloured file tiles of the Files page */
.pt-sent .pt-ftile{width:40px;height:46px;border-radius:10px}
.pt-sent .pt-ftile .pt-i{width:18px;height:18px;color:inherit;margin-top:0}
/* a photo's small picture (D130); its row's words line up with the tiles' */
.pt-sent .pt-thumb{width:56px;height:56px;flex:none;display:block;border-radius:10px;object-fit:cover;background:var(--surface-2);border:1px solid var(--pt-line)}
.pt-thumb-a{flex:none;display:block;border-radius:10px}
.pt-sent .pt-ftile{margin:0 8px}
.pt-uplist:empty{display:none}
.pt-sent-m{font-size:13px;color:var(--ink-2)}
.pt-sent-m>span{white-space:nowrap}
.pt-sent>li{align-items:center}
.pt-sent>li:has(.pt-sent-form){align-items:flex-start}
.pt-ftile.words{background:var(--surface-2);color:var(--ink-2)}
.pt-ppl form{margin:0 0 0 54px}

@media (min-width:720px){
  .pt-rsum{flex-direction:row;align-items:center;gap:24px}
  .pt-rv-h{padding:20px 24px 14px}
  .pt-rv-row{padding:12px 20px 12px 24px}
  .pt-rv-b{padding:4px 24px 26px 60px;max-width:860px}
  .pt-people{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px}
  .pt-ppl form{margin:0}
  .pt-next{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .pt-next>li{padding:4px 0}
  .pt-next>li+li{border-top:0}
}

/* ---- D116, View as client: the bar a team member sees across the top of
   every page while viewing a portal as a client. Never on a client's own page.
   A full width band of its own ground, no edge line (rule 2), words not a
   pill; it stays in view while the page scrolls, and anchors land below it. */
.pt-view{position:sticky;top:0;z-index:70;display:flex;align-items:center;gap:8px 12px;min-height:56px;padding:6px 10px 6px 16px;background:var(--warn-soft);color:var(--ink);font-size:14px;line-height:1.35;box-shadow:0 1px 0 rgba(11,29,58,.08)}
.pt-view-t{display:flex;align-items:flex-start;gap:8px;flex:1;min-width:0;margin:0;overflow-wrap:anywhere}
.pt-view-t .pt-i{color:var(--warn-ink);margin-top:1px}
.pt-view-t b{color:var(--navy);font-weight:700}
.pt-view-ro{color:var(--warn-ink);font-weight:700}
.pt-view-f{margin:0;flex:none}
.pt-view-x{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:10px;border:1px solid var(--navy);background:var(--navy);color:#FFFFFF;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer}
.pt-view-x:hover{filter:brightness(1.15)}
.pt-view :focus-visible{outline-color:var(--navy)}
html:has(.pt-view){scroll-padding-top:72px}
body:has(.pt-view) .ob-skip:focus{z-index:80}
@media (min-width:720px){
  .pt-view{padding:6px 16px 6px 24px;font-size:14.5px}
}
/* ---- Round 3, Phase 5: the welcome call booked inside the portal.
   The first step (Wes on 1.2: "this nice big step... light blue box"): full
   width under the greeting, the brand's soft blue, 20px corners, no border
   and no rail (rule 2). The picker opens inside it: days as white tiles, the
   day picked in solid brand blue, times as white buttons, then the
   confirmation on white. The booked call keeps the banner's look, with
   Reschedule and Add someone under it. States are words and weight, never a
   pill. */
.pt-first{display:flex;flex-direction:column;gap:10px;padding:26px 20px 22px;background:var(--brand-soft);border-radius:20px;color:var(--ink);min-width:0}
.pt-first-eye{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--brand-ink)}
.pt-first-t{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.12;letter-spacing:-.02em;color:var(--navy);text-wrap:balance;max-width:26ch}
.pt-first-p{font-size:16px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.pt-first-a{display:flex;padding-top:8px}
.pt-first-a .pt-btn{width:100%}
.pt-first-after{font-size:14.5px;color:var(--ink-2);text-align:center;text-wrap:balance}
.pt-pick{display:flex;flex-direction:column;gap:10px;padding-top:8px;min-width:0}
.pt-pick-h{font-weight:700;font-size:15px;color:var(--navy);padding-top:4px}
.pt-pick-off{font-size:15px;line-height:1.5;color:var(--ink-2)}
/* On a phone the days are one row that scrolls sideways inside the card
   (the page itself never does), so the times stay right under them; the day
   picked is brought into view. From 720px they are a grid. */
.pt-days{list-style:none;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;margin:0 -20px;padding:2px 20px 6px;scrollbar-width:none}
.pt-days::-webkit-scrollbar{display:none}
.pt-days>li{flex:0 0 74px;scroll-snap-align:start}
.pt-times{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pt-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;padding:8px 4px;border-radius:12px;background:var(--surface);border:1px solid var(--surface);color:var(--navy);text-align:center}
.pt-day:hover{text-decoration:none;border-color:var(--brand)}
.pt-day-w{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pt-day-d{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.pt-day.on{background:var(--brand);border-color:var(--brand);color:#FFFFFF}
.pt-day.on .pt-day-w{color:var(--pt-on-brand-2)}
.pt-time{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 6px;border-radius:12px;background:var(--surface);border:1px solid var(--line-2);font-weight:700;font-size:15.5px;color:var(--brand-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.pt-time:hover{text-decoration:none;border-color:var(--brand)}
.pt-time.now{flex-direction:column;gap:0;background:transparent;border-style:dashed;color:var(--ink-2);line-height:1.15}
.pt-time.now small{font-size:11.5px;font-weight:600;letter-spacing:.02em}
.pt-call .pt-days{margin:0 -16px;padding:2px 16px 6px}
.pt-confirm{background:var(--surface);border-radius:16px;padding:18px 16px;gap:8px;margin-top:4px}
.pt-confirm-when{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.01em;color:var(--navy);text-wrap:balance}
.pt-confirm-a{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding-top:6px}
.pt-confirm-a .pt-more{align-self:center;min-height:44px}
.pt-pick-guest>summary{font-size:15px}
.pt-pick-guest .ob-grid2{padding:4px 0 6px}
.pt-call-a{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px}
.pt-call-a .pt-btn{flex:1 1 140px;min-height:44px}
.pt-call-also{font-size:14.5px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere;padding-top:4px}
.pt-call-also span{font-weight:700;color:var(--ink)}
.pt-call .pt-banner-p a{font-weight:600}
.pt-call .pt-pick-lead{font-size:15px;color:var(--ink);padding-top:8px}
.pt-call .pt-more{min-height:44px}
.pt-guest{background:var(--surface);border-radius:16px;padding:16px;margin-top:8px}
/* The answer to a press sits first inside the section, where the page lands
   (#welcome-call): white on the soft blue, as a card of its own. */
#welcome-call{scroll-margin-top:12px}
.pt-first>.pt-flash,.pt-banner>.pt-flash{box-shadow:none;border-color:var(--surface)}
.pt-banner>.pt-flash{margin-bottom:8px}
/* A day's link lands on its times (#wc-times): the day row is kept in view
   above them (one row on a phone, up to three from 720px). */
.pt-pick-times{scroll-margin-top:132px}
@media (min-width:560px){
  .pt-times{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:720px){
  .pt-first{padding:34px 36px 30px;gap:12px}
  .pt-first-t{font-size:30px;max-width:none}
  .pt-days,.pt-call .pt-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible;margin:0;padding:0}
  .pt-days>li{flex:none}
  .pt-first-p{font-size:17px}
  .pt-first-a .pt-btn{width:auto;min-width:240px}
  .pt-times{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pt-confirm{padding:22px 24px;max-width:560px}
  .pt-confirm-a{flex-direction:row;align-items:center;gap:16px}
  .pt-confirm-a .pt-more{align-self:auto}
  .pt-call-a .pt-btn{flex:0 0 auto;min-width:160px}
  .pt-guest{max-width:640px}
  .pt-pick-times{scroll-margin-top:272px}
}

.ob-sop-k{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ob-sop-q{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.ob-sop-intro{font-size:14px;line-height:1.5;color:var(--ink-2);max-width:70ch}
.ob-sop-search{flex:none;width:100%;max-width:520px}
.ob-sop-list .ob-arts{margin-top:2px}
.ob-sop-row .ob-art-t b{font-size:15.5px}
.ob-sop-row .ob-art-r .ob-state{font-size:13.5px}
.ob-sop-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-width:760px}
.ob-sop-rules>li{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-top:1px solid var(--line-soft);min-width:0}
.ob-sop-rules>li:first-child{border-top:0;padding-top:0}
.ob-sop-rn{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ob-sop-rt{font-size:15.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.ob-sop-pk{display:flex;align-items:flex-start;gap:6px;font-size:13.5px;line-height:1.45;color:var(--brand-ink)}
.ob-sop-pk .ob-icon{flex:none;margin-top:1px}
.ob-sop-body{display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.6;max-width:70ch;overflow-wrap:anywhere}
.ob-p-h{font-family:var(--ui);font-size:15px;font-weight:700;line-height:1.35;color:var(--navy);margin-top:6px}
.ob-diff{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-width:820px;font-size:14px;line-height:1.5}
.ob-diff>li{padding:4px 10px;border-radius:6px;overflow-wrap:anywhere;min-width:0}
.ob-diff>li.same{color:var(--ink-2)}
.ob-diff>li.add{background:var(--good-soft);color:var(--good-ink)}
.ob-diff>li.del{background:var(--bad-soft);color:var(--bad)}
.ob-diff>li.gap{font-size:13px;font-style:italic;color:var(--ink-2)}
.ob-sop-where{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}
.ob-sop-where>li{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-top:1px solid var(--line-soft);min-width:0;overflow-wrap:anywhere}
.ob-sop-where>li:first-child{border-top:0}
.ob-sop-lt{font-size:14px;line-height:1.5;color:var(--ink)}
.ob-sop-rulelist{display:flex;flex-direction:column;gap:0;margin-top:6px}
.ob-sop-rule{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-top:1px solid var(--line-soft);min-width:0}
.ob-sop-rule:first-child{border-top:0;padding-top:4px}
.ob-sop-pc>summary{font-size:14px;color:var(--brand-ink);overflow-wrap:anywhere}
.ob-sop-pc .ob-help{margin:4px 0 2px}
.ob-sop-log{display:flex;flex-direction:column;gap:10px;padding:8px 4px 0;min-width:0}
.ob-sop-log-h{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ob-sop-log .ob-tl-h{font-size:13.5px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere}
.ob-sop-log .ob-tl-h a{display:inline-flex;align-items:center;min-height:44px}

/* ===== Campaign tab (SOP-SYSTEM-DESIGN.md section 5) ===== */
.ob-ctop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;min-width:0}
.ob-ctop .ob-h2{font-size:20px;margin:0}
.ob-cmeta{margin:2px 0 0;font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere}
.ob-cpick{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:0;max-width:100%}
.ob-cpick .ob-input{width:auto;max-width:100%}

/* the flow: five steps as one connected panel, divided by hairlines */
.ob-cflow{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-soft)}
.ob-cflow-col{background:var(--surface);display:flex;flex-direction:column;min-width:0}
.ob-cflow-h{display:flex;align-items:center;min-height:44px;padding:10px 16px;background:var(--surface-3);border-bottom:1px solid var(--line-soft);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.ob-cflow-h:hover{color:var(--brand-ink);text-decoration:none}
.ob-cflow-b{display:flex;flex-direction:column;gap:6px;padding:12px 16px 14px;min-width:0;overflow-wrap:anywhere;font-size:14px}
.ob-cflow-b p{margin:0}
.ob-cflow-n{font-size:13px;color:var(--ink-2)}

/* a piece of work: an ad, a page, a pathway, a KPI */
.ob-cpiece{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-top:1px solid var(--line-soft);min-width:0;scroll-margin-top:12px}
.ob-cpiece:first-child{border-top:0;padding-top:0}
.ob-cpiece-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.ob-cpiece-t{margin:0;font-size:16px;font-weight:700;color:var(--ink);overflow-wrap:anywhere;min-width:0}
.ob-cpiece-r{margin-left:auto;display:inline-flex;align-items:baseline;gap:6px;font-size:13.5px}
.ob-ccode{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ob-cbig{font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ob-cmark{display:inline-flex;align-items:center}
.ob-cmark.bad{color:var(--bad)}
.ob-cmark.warn{color:var(--warn-ink)}
.ob-cmark .ob-icon{color:inherit}
.ob-cfields{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.ob-cfields>div{min-width:0}
.ob-cfields dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ob-cfields dd{margin:2px 0 0;font-size:15px;min-width:0;overflow-wrap:anywhere}
.ob-cfields dd .ob-p{margin:0 0 6px}
.ob-cline{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;min-width:0;overflow-wrap:anywhere}
.ob-clabel{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ob-clink{display:inline-flex;align-items:center;gap:4px;min-height:44px;overflow-wrap:anywhere;word-break:break-word;min-width:0}
.ob-clink .ob-icon{color:var(--brand-ink)}
.ob-cfiles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ob-cfiles li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;min-height:44px;padding:4px 0;border-top:1px solid var(--line-soft);min-width:0;overflow-wrap:anywhere}
.ob-cfiles li:first-child{border-top:0}
.ob-cfiles a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.ob-cfiles small{flex:1 1 100%;font-size:13px;color:var(--ink-2)}
.ob-cread{max-height:320px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:1.5;color:var(--ink);background:var(--surface-3);border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px}

/* forms and tools that open in place */
.ob-ctools{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 24px;min-width:0}
.ob-cfold{min-width:0;max-width:100%}
.ob-cfold>summary{display:flex;align-items:center;min-height:44px;cursor:pointer}
.ob-cfold-b{padding:6px 0 12px;min-width:0}
.ob-cinline{display:inline-flex;margin:0;max-width:none}
.ob-cticks{border:0;padding:0;margin:0;max-width:none}
.ob-cticks .ob-row{min-height:44px}

/* the free platform checks: amber information, red when it is a deviation */
.ob-cflags{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ob-cflag{display:flex;align-items:flex-start;gap:8px;font-size:14.5px;line-height:1.45;min-width:0;overflow-wrap:anywhere}
.ob-cflag .ob-icon{margin-top:3px;color:var(--warn-ink)}
.ob-cflag.bad .ob-icon{color:var(--bad)}

/* a pathway's group of ads, and its send to client review line */
.ob-cgroup{display:flex;flex-direction:column;gap:4px;padding:10px 0 14px;border-top:1px solid var(--line-2);min-width:0}
.ob-cgroup:first-child{border-top:0;padding-top:0}
/* the pathway's name outranks its ads' titles (16px), and the firmer rule
   between pathways outranks the hairline between two ads, so the first ad
   sits under its heading with no rule of its own */
.ob-cgroup-h{margin:6px 0 2px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:17px;font-weight:700;color:var(--navy)}
.ob-cgroup-h+.ob-cpiece{border-top:0;padding-top:6px}
.ob-csend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding-top:6px;min-width:0}
.ob-csend-s{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px}
.ob-csend-s a{display:inline-flex;align-items:center;min-height:44px}
.ob-cstep-top{display:flex;flex-direction:column;gap:18px;padding:16px 18px 4px;min-width:0}
.ob-cstep-top>.ob-look{max-width:none;margin:0}
/* the Overview's three numbers: the third takes the whole row until they fit across */
.ob-cstats .ob-stats.three>.ob-stat:nth-child(3){grid-column:1/-1}

/* the Knowledge tab's add form behind its button (section 7) */
.ob-kadd>summary{list-style:none;width:max-content;max-width:100%;cursor:pointer}
.ob-kadd>summary::-webkit-details-marker{display:none}
.ob-kadd>summary::marker{content:""}

@media (min-width:720px){
  .ob-cfields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
  .ob-cstep-top{padding:20px 28px 4px}
}
@media (min-width:900px){
  .ob-cstats .ob-stats.three>.ob-stat:nth-child(3){grid-column:auto}
}
@media (min-width:1100px){
  .ob-cflow{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ob-cflow-b{min-height:150px}
}

.ob-sc-ic{display:inline-flex;align-items:center;gap:2px;flex:none}
.ob-sc-ic.good{color:var(--good-ink)}
.ob-sc-ic.bad{color:var(--bad)}
.ob-sc-ic.warn{color:var(--warn-ink)}
.ob-sc-ic.quiet{color:var(--ink-2)}
.ob-sc-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ob-sc-line{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-top:1px solid var(--line-soft);min-width:0}
.ob-sc-line:first-child{border-top:0;padding-top:2px}
.ob-sc-t{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.ob-sc-t .ob-icon{flex:none;margin-top:3px}
.ob-sc-line.open .ob-sc-t .ob-icon{color:var(--bad)}
.ob-sc-line.covered .ob-sc-t{color:var(--ink-2)}
.ob-sc-line.covered .ob-sc-t .ob-icon{color:var(--warn-ink)}
.ob-sc-line.stale .ob-sc-t{color:var(--ink-2)}
.ob-sc-line.stale .ob-sc-t .ob-icon{color:var(--ink-2)}
.ob-sc-q{font-size:13.5px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere;padding-left:24px}
.ob-sc-by{font-size:13.5px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere}
.ob-sc-act{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 16px;min-width:0}
.ob-sc-a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500}
.ob-sc-open{min-width:0;flex:0 1 auto}
.ob-sc-open>summary{display:inline-flex;align-items:center;min-height:44px;list-style:none;cursor:pointer;font-size:14px;font-weight:700;color:var(--brand-ink)}
.ob-sc-open>summary::-webkit-details-marker{display:none}
.ob-sc-open>summary::marker{content:""}
.ob-sc-open[open]{flex:1 1 100%}
.ob-sc-open-b{display:flex;flex-direction:column;gap:10px;padding:4px 0 8px;max-width:640px;min-width:0}
.ob-sc-open-b .ob-form{display:flex;flex-direction:column;gap:10px;margin:0}
.ob-sc-open-b .ob-btn{align-self:flex-start;white-space:normal;text-align:left}
.ob-sc-choice{font-size:14.5px;font-weight:700;color:var(--ink)}
.ob-sc-note{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.ob-sc-info{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.5;color:var(--warn-ink)}
.ob-sc-unsure{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.ob-sc-unsure b{font-weight:700;color:var(--ink)}
.ob-sc-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px}
.ob-sc-meta .ob-form{margin:0}
.ob-look.ob-sc>summary>.ob-look-v{flex:0 1 auto}
.ob-look.ob-sc>summary>.ob-look-show{margin-left:auto}
.ob-sc-flag{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;line-height:1;color:var(--bad);font-variant-numeric:tabular-nums;white-space:nowrap}
.ob-sc-busy{flex:none;display:inline-flex;align-items:center;color:var(--ink-2)}
.ob-sc-soplist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:0 24px}
.ob-sc-soplist>li{min-width:0}
.ob-sc-sopa{display:block;min-height:44px;padding:11px 0;font-size:14px;line-height:1.5;font-weight:500;overflow-wrap:anywhere}
.ob-sc-sopa .ob-state{font-size:13px;font-weight:500}
.ob-sc-soplist>li>.ob-state{font-size:13px}
.ob-sc-code{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink-2);margin-right:4px}
.ob-sc-nas>summary{font-weight:500;color:var(--ink-2)}
.ob-sc-nas>.ob-sc-open-b{gap:0}
.ob-sc-meta .ob-btn{padding:0 12px;font-size:14px}
.ob-sc-cell{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:13.5px;line-height:1.4;min-width:0;overflow-wrap:anywhere}
.ob-sc-cell .ob-state{display:inline}
.ob-sc-approve{display:flex;flex-direction:column;gap:8px;min-width:0}
.ob-sc-approve>.ob-form{margin:0;display:flex;flex-direction:column;align-items:flex-start}
.ob-sc-appr{font-size:15px;line-height:1.45}
.ob-sc-why{font-size:14px;line-height:1.45;color:var(--ink-2)}
.ob-sc-files{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px;overflow-wrap:anywhere}
.ob-sc-files small{color:var(--ink-2)}
.ob-sc-pre{margin:0;padding:12px;border-radius:10px;background:var(--surface-3);border:1px solid var(--line-soft);font-size:12.5px;line-height:1.5;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;max-height:480px;overflow:auto}

/* Admin: a switch's "What it does" folded under its name, quieter than a link */
.ob-team details.ob-adm-what>summary{padding:10px 0;font-size:13.5px}
.ob-adm-what small{display:block;padding-bottom:4px}
/* a connection's own section inside its closed row: the row already names
   it, so the section's heading is kept for a screen reader only and its
   body takes the row's width */
.ob-adm-conn .ob-orow-b>.ob-sec{display:block;padding:0;border-top:0;scroll-margin-top:88px}
.ob-adm-conn .ob-orow-b>.ob-sec>.ob-sec-l{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the text settings: three groups of one form, no box around a group */
.ob-adm-fs{border:0;padding:0;margin:0;min-width:0}
/* the Guide's article rows beside a side menu (the Guide list, the AI
   page's Client assistant and guide): the state column takes what is left
   of the line, so it never sits half way across on a line of its own */
@media (min-width:900px){
  .ob-rail-body .ob-art-r{flex:1 1 200px}
}
/* the Guide list's search above its sheet */
.ob-adm-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.ob-adm-tools .ob-search{flex:1 1 260px}
/* the client Overview: the rarely used parts as closed rows at the foot of
   the sheet, ruled like the rest, their state on the right */
.ob-ov-folds{display:flex;flex-direction:column;padding:4px 18px 6px;border-top:1px solid var(--line-soft)}
.ob-ov-folds>.ob-orow+.ob-orow{border-top:1px solid var(--line-soft)}
.ob-ov-fold{scroll-margin-top:12px}
@media (min-width:900px){
  .ob-ov-folds{padding:6px 28px 8px}
}

/* a refusal at the top of a sheet */
.ob-team .ob-note.warn{background:var(--warn-soft)}
/* rows in one sheet, connected by hairlines */
.ob-cla-list{display:flex;flex-direction:column;min-width:0}
.ob-cla-list>*+*{border-top:1px solid var(--line-soft)}
.ob-cla-t{display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--ink)}
.ob-cla-t b{font-size:15.5px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.ob-cla-t small{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;font-size:13.5px;color:var(--ink-2)}
.ob-cla-t small .ob-state{font-size:13.5px}
a.ob-cla-t:hover{text-decoration:none}
a.ob-cla-t:hover b{color:var(--brand-ink);text-decoration:underline}
/* a field whose sheet row already names it: its label is for a screen reader */
.ob-cla-one .ob-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* an item's words: each box as tall as its words */
.ob-cla-form textarea.ob-input{min-height:72px;field-sizing:content}
/* the landing: every item of a section, one line each */
.ob-sec-l h2 a{color:inherit}
.ob-sec-l h2 a:hover{color:var(--brand-ink)}
.ob-cla-li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 16px;min-height:44px;padding:8px 2px;color:var(--ink);font-size:15px;line-height:1.35}
.ob-cla-list>.ob-cla-li:first-child{padding-top:0;min-height:36px}
.ob-cla-li:hover{text-decoration:none}
.ob-cla-li:hover>span{color:var(--brand-ink);text-decoration:underline}
.ob-cla-li>span{min-width:0;overflow-wrap:anywhere}
.ob-cla-li.off>span{color:var(--ink-2)}
.ob-cla-li small .ob-state{font-size:13.5px}
/* a section's items: the place, the title, the two moves */
.ob-cla-irow{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:60px;padding:8px 0}
.ob-cla-n{font-size:13px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right}
.ob-cla-irow.off .ob-cla-t b{color:var(--ink-2)}
.ob-cla-mvs{display:flex;gap:6px}
.ob-cla-mvf{margin:0}
.ob-cla-mv{width:44px;padding:0;font-size:17px;line-height:1}
.ob-cla-mvx{display:block;width:44px}
/* a section's title and its Save on one line from 640px */
.ob-cla-inline{display:flex;flex-direction:column;gap:10px;max-width:560px}
.ob-cla-inline .ob-field{flex:1 1 auto}
@media (min-width:640px){
  .ob-cla-inline{flex-direction:row;align-items:flex-start}
}
/* How an item is answered: its ways, one after another */
.ob-cla-ways{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14.5px;font-weight:500;color:var(--ink)}
/* D203: New item, closed under a section's items, ruled off from them */
.ob-cla-new{margin-top:6px;border-top:1px solid var(--line-soft)}
.ob-team .ob-sec details.ob-cla-new>summary{display:flex;align-items:center;gap:8px;min-height:52px;list-style:none;cursor:pointer;color:var(--brand-ink);font-weight:700;font-size:15px}
.ob-cla-new>summary::-webkit-details-marker{display:none}
.ob-cla-new>summary::marker{content:""}
.ob-cla-new>summary .ob-icon{transition:transform .15s}
.ob-cla-new[open]>summary .ob-icon{transform:rotate(180deg)}
.ob-cla-new-b{padding:2px 0 8px}
.ob-cla-newf{display:flex;flex-direction:column;gap:14px;max-width:640px}
.ob-cla-fs{border:0;padding:0;margin:0;min-width:0;gap:10px}
.ob-cla-fs>legend{padding:0}
.ob-cla-fs>.ob-field{margin-top:2px}
/* Show me's three boxes, one soft block under their own name */
.ob-cla-fs.showme{padding:12px 14px 14px;border-radius:12px;background:var(--surface-3)}
.ob-cla-fs.showme>legend{float:left;width:100%;font-weight:700}
.ob-cla-fs.showme>legend+small{clear:both}
.ob-cla-waybox{display:flex;flex-wrap:wrap;gap:0 18px}
.ob-cla-reach{font-size:14px;font-weight:600;line-height:1.45;color:var(--ink-2)}
/* one item: its name over the two sheets, the way back above it */
.ob-cla-ihead{display:flex;flex-direction:column;gap:0}
.ob-cla-h{font-family:var(--display);font-size:22px;font-weight:700;line-height:1.25;color:var(--navy);overflow-wrap:anywhere}
.ob-cla-was{margin:-2px 0 0}
.ob-cla-was>summary{display:inline-flex;align-items:center;gap:6px;min-height:36px;list-style:none;cursor:pointer;color:var(--brand-ink);font-weight:500;font-size:13.5px}
.ob-cla-was>summary::-webkit-details-marker{display:none}
.ob-cla-was>summary::marker{content:""}
.ob-cla-was[open]>summary .ob-icon{transform:rotate(180deg)}
.ob-cla-was p{padding:8px 12px;border-radius:10px;background:var(--surface-3);font-size:14px;line-height:1.5;color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere}
.ob-cla-fixed{padding:10px 12px;border-radius:10px;background:var(--surface-3);font-size:14.5px;line-height:1.5;color:var(--ink);white-space:pre-line}
.ob-cla-lock{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.ob-cla-lock b{color:var(--ink)}
.ob-cla-switch{display:flex;flex-direction:column;gap:2px}
/* the latest changes on the landing */
.ob-cla-e{display:flex;flex-direction:column;gap:2px;padding:10px 0}
.ob-cla-list>.ob-cla-e:first-child{padding-top:0}
.ob-cla-e p{font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.ob-cla-e small{font-size:13px;color:var(--ink-2)}
/* History: a change, who and when, its before and after folded, Undo */
.ob-cla-hrow{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 20px;padding:14px 0;scroll-margin-top:12px}
.ob-cla-list>.ob-cla-hrow:first-child{padding-top:2px}
.ob-cla-hmain{display:flex;flex-direction:column;gap:2px;min-width:0}
.ob-cla-hmain>p{font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.ob-cla-hmain>small{font-size:13px;color:var(--ink-2)}
.ob-cla-hr{display:flex;align-items:flex-start}
.ob-cla-hr small{font-size:13px}
.ob-cla-diff>summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;list-style:none;cursor:pointer;color:var(--brand-ink);font-weight:500;font-size:14px}
.ob-cla-diff>summary::-webkit-details-marker{display:none}
.ob-cla-diff>summary::marker{content:""}
.ob-cla-diff[open]>summary .ob-icon{transform:rotate(180deg)}
.ob-cla-ba{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;background:var(--line-soft)}
.ob-cla-ba>div{padding:10px 12px;background:var(--surface-3)}
.ob-cla-ba>div+div{background:var(--surface)}
.ob-cla-k{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ob-cla-v{margin-top:2px;font-size:14px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
@media (min-width:720px){
  .ob-cla-hrow{grid-template-columns:minmax(0,1fr) auto}
  .ob-cla-hr{justify-content:flex-end;max-width:260px;text-align:right}
  .ob-cla-ba{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* D195 on a client's Checklist tab: Add an item, closed at the foot of the
   section, and the line under an item an admin added */
.ob-addi{margin:0 -18px;border-top:1px solid var(--line-2);background:var(--surface-3)}
.ob-addi>summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 18px;list-style:none;cursor:pointer;color:var(--brand-ink);font-size:15px}
.ob-addi>summary::-webkit-details-marker{display:none}
.ob-addi>summary::marker{content:""}
.ob-addi-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin-right:auto;min-width:0}
.ob-addi-t b{font-weight:700}
.ob-addi-t small{font-weight:500;font-size:13.5px;color:var(--ink-2)}
.ob-addi>summary .ob-icon{flex:none}
/* the last thing in the section's sheet: its ground runs to the sheet's rounded foot */
.ob-clsec>.ob-addi:last-child{margin-bottom:-6px;border-radius:0 0 16px 16px}
.ob-addi>summary .ob-icon{transition:transform .15s}
.ob-addi[open]>summary .ob-icon{transform:rotate(180deg)}
.ob-addi-b{padding:4px 18px 20px}
.ob-addi-form{display:flex;flex-direction:column;gap:14px;max-width:640px}
.ob-addi-ways{display:flex;flex-wrap:wrap;gap:0 18px}
.ob-addi-warn{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;background:var(--warn-soft);color:var(--warn-ink);font-size:14px;font-weight:600;line-height:1.45}
.ob-addi-warn .ob-icon{flex:none;margin-top:2px}
.ob-addi-no{padding:14px 0 18px;border-top:1px solid var(--line-soft)}
.ob-addi-line{display:flex;flex-direction:column;gap:4px;margin:0 0 10px}
.ob-addi-what{font-size:14.5px;line-height:1.5}
.ob-addi-by{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;font-size:13.5px}
.ob-addi-rm{display:inline-flex;margin:0}
.ob-addi-rm .ob-linkbtn{min-height:36px}
@media (min-width:1000px){
  .ob-addi{margin:0 -28px}
  .ob-clsec>.ob-addi:last-child{margin-bottom:-8px}
  .ob-addi>summary{padding:6px 28px}
  .ob-addi-b{padding:4px 28px 22px}
}

/* the standards pages: one sheet, a block per category, rows divided by hairlines */
.ob-cs .ob-cs-cat{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid var(--line-soft);min-width:0}
.ob-cs .ob-cs-cat:first-of-type{border-top:0;padding-top:4px}
.ob-cs-cat-hr{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.ob-cs-q{font-size:13.5px;color:var(--ink-3)}
.ob-cs-cat-h{display:flex;align-items:baseline;gap:10px;font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ob-cs-cat-h .ob-state{font-size:12.5px;letter-spacing:0;text-transform:none}
.ob-cs-rows{display:flex;flex-direction:column;min-width:0}
.ob-cs-rows>.ob-cs-row+.ob-cs-row{border-top:1px solid var(--line-soft)}
.ob-cs-row{display:flex;flex-direction:column;gap:4px;padding:12px 0;min-width:0;scroll-margin-top:12px}
.ob-cs-row-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 20px;min-width:0}
.ob-cs-name{font-size:15.5px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.ob-cs-name b{font-weight:700}
.ob-cs-name span{font-size:13.5px;color:var(--ink-2);margin-left:6px}
.ob-cs-name s{color:var(--ink-2)}
.ob-cs-figs{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px}
.ob-cs-f{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.ob-cs-f b{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.1;color:var(--navy);font-variant-numeric:tabular-nums}
.ob-cs-f small{font-size:12.5px;color:var(--ink-2)}
.ob-cs-src{font-size:13.5px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere}
.ob-cs-src .ob-state{font-size:13.5px}
.ob-cs-note{font-size:13.5px;line-height:1.45;color:var(--ink-3);max-width:70ch}
.ob-cs-none{font-size:14px;color:var(--ink-3);padding:6px 0}
.ob-cs-sev{font-size:14px}
.ob-cs-tools{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 24px;padding-top:2px}
.ob-cs-tools>details[open]{flex-basis:100%}
.ob-cs-many{font-size:15.5px;line-height:1.8;color:var(--ink);overflow-wrap:anywhere}
.ob-cs-many b{font-weight:700;white-space:nowrap}
.ob-cs-many span{color:var(--ink-3)}
.ob-cs-fold{padding-top:10px;max-width:760px}
.ob-cs-ex{display:flex;flex-direction:column;gap:8px;padding:6px 0 2px;max-width:70ch}
.ob-cs-ex-l{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ob-cs-ex-f p,.ob-cs-ex-f li{font-size:15px;line-height:1.5;color:var(--ink)}
.ob-cs-ex-f ul{margin:2px 0 0 18px}

/* the SOP form's Content ticks: a group a row on a wide screen */
.ob-cs-ticks{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 16px;max-width:820px}
.ob-cs-ticks.four{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ob-cs-ticks+.ob-cs-ticks{border-top:1px solid var(--line-soft);margin-top:4px}

/* the client's content profile: the fill, then four topics, each a section of one sheet */
.ob-prof-fill{display:flex;flex-direction:column;gap:8px}
.ob-prof-fill-on{font-size:14.5px;line-height:1.45}
.ob-prof-fill-why{font-size:14px;line-height:1.45;color:var(--ink-2)}
.ob-prof-topic{display:flex;flex-direction:column;gap:8px;min-width:0;scroll-margin-top:12px}
.ob-prof-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;min-width:0}
.ob-prof-lines>li+li{border-top:1px solid var(--line-soft)}
.ob-prof-line,.ob-prof-sug{display:flex;flex-direction:column;gap:3px;padding:10px 0;min-width:0;scroll-margin-top:12px}
.ob-prof-lines>li:first-child{padding-top:2px}
.ob-prof-t{font-size:15.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere;max-width:72ch}
.ob-prof-t .ob-state{font-weight:700;margin-right:2px}
.ob-prof-t.quote{font-size:16px;color:var(--navy)}
.ob-prof-do{font-weight:700;color:var(--ink);margin-right:2px}
.ob-prof-m{font-size:13px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere;max-width:72ch}
.ob-prof-m .ob-state{font-size:13px}
.ob-prof-acts{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin-top:2px}
.ob-prof-acts>form{display:inline-flex}
.ob-prof-acts .ob-btn.quiet{padding-left:2px;padding-right:2px;border-color:transparent;background:transparent;color:var(--ink-2);font-weight:500}
.ob-prof-acts .ob-btn.quiet:hover{color:var(--brand-ink);text-decoration:underline}
.ob-prof-acts .ob-btn.quiet.ob-prof-keep{color:var(--brand-ink);font-weight:700}
.ob-prof-acts details[open]{flex-basis:100%}
.ob-prof-acts .ob-prof-k+.ob-prof-k{margin-left:-4px}
.ob-team .ob-prof-acts details.ob-more>summary{display:inline-flex;align-items:center;min-height:44px}
.ob-prof-fold{padding:6px 0 4px;max-width:640px}
.ob-prof-box{min-height:72px;field-sizing:content}
.ob-prof-sugs{display:flex;flex-direction:column;gap:2px;background:var(--surface-3);border-radius:12px;padding:12px 14px 4px;min-width:0}
.ob-prof-sugs-h{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ob-prof-sugs .ob-prof-lines>li+li{border-top-color:var(--line)}
.ob-prof-industry{display:flex;flex-direction:column;gap:6px;padding-bottom:6px}
.ob-prof-ind{font-size:15px;line-height:1.45;color:var(--ink)}
.ob-prof-ind .ob-state{font-size:13.5px;margin-left:4px}
.ob-prof-ind-form{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 12px}
.ob-prof-ind-form .ob-field{min-width:200px;flex:0 1 300px}
.ob-prof-ind-form .ob-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ob-prof-ind-form .ob-row{flex:none}
.ob-prof-none{font-size:14px;color:var(--ink-3)}
/* the SOP a profile part follows: one quiet link under its name */
.ob-sec-l .ob-sec-link{margin-top:2px}
.ob-prof-sop{display:inline-block;padding:6px 0;font-size:13px;line-height:1.4;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;overflow-wrap:anywhere}
.ob-prof-sop:hover{color:var(--brand-ink);text-decoration-color:currentColor}
.ob-prof-add>summary{font-size:14.5px}

/* package C: the Content tab (D230 to D249). The side menu's group names on a
   wide screen only; a section's head is its name, its one quiet SOP link and
   the Write button; the library is one sheet whose rows are divided by
   hairlines; a variant sits under its first piece, set in a little, no rail. */
.ob-rail-h{display:none}
.ob-ct-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 16px;min-width:0}
.ob-ct-head-t{display:flex;flex-direction:column;gap:0;min-width:0}
.ob-ct-h{font-family:var(--display);font-size:22px;font-weight:700;line-height:1.2;color:var(--navy)}
.ob-ct-sop .ob-prof-sop{padding:4px 0}
.ob-ct-head-r{display:flex;align-items:center;gap:10px}
.ob-ct-sheet{padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.ob-ct-fill{padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.ob-ct-quietlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;color:var(--ink-2)}
.ob-ct-quietlink:hover{color:var(--brand-ink)}
.ob-ct-wait{font-size:14.5px;line-height:1.5;color:var(--ink-2);max-width:72ch}
.ob-ct-empty{font-size:15px;color:var(--ink-3);padding:4px 0}
.ob-ct-runs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14.5px}
.ob-ct-why{color:var(--ink-2)}
.ob-ct-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;min-width:0}
.ob-ct-rows>li+li{border-top:1px solid var(--line-soft)}
.ob-ct-row{display:flex;align-items:center;gap:8px;min-width:0}
.ob-ct-row-a{flex:1 1 auto;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:baseline;padding:12px 2px;min-width:0;color:var(--ink)}
.ob-ct-row-a:hover{text-decoration:none}
.ob-ct-row-a:hover .ob-ct-title{color:var(--brand-ink);text-decoration:underline}
.ob-ct-row.variant .ob-ct-row-a{padding-left:22px}
.ob-ct-code{font-weight:700;font-size:15px;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:3.2em}
.ob-ct-row-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.ob-ct-title{font-size:15.5px;line-height:1.35;overflow-wrap:anywhere}
.ob-ct-row-t small{font-size:13px;color:var(--ink-2)}
.ob-ct-row-s{grid-column:2;display:flex;flex-wrap:wrap;gap:2px 12px;font-size:13.5px}
.ob-ct-draft{color:var(--ink-2);font-weight:500}
.ob-ct-retired{color:var(--ink-3);font-weight:500}
.ob-ct-rowform{flex:none}
.ob-ct-mini{min-height:36px;padding:0 10px;font-size:13.5px}
.ob-ct-fold>summary{display:flex;align-items:center;min-height:44px;font-size:14.5px;color:var(--brand-ink);cursor:pointer}
.ob-ct-fold{border-top:1px solid var(--line-soft)}

/* Write: one short form */
.ob-ct-page{display:flex;flex-direction:column;gap:14px;min-width:0}
.ob-ct-write{display:flex;flex-direction:column;gap:12px;max-width:760px}
.ob-ct-wgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 16px}
.ob-ct-opts{display:flex;gap:18px}
.ob-ct-opts .ob-row{min-height:44px}
.ob-ct-wbtns{gap:10px}

/* the piece: the copy on the left, the record in folds on the right */
.ob-ct-phead{display:flex;flex-direction:column;gap:4px;min-width:0}
.ob-ct-ptitle{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-width:0}
.ob-ct-pcode{font-family:var(--display);font-size:24px;font-weight:700;color:var(--navy);white-space:nowrap}
.ob-ct-ph{font-family:var(--display);font-size:22px;font-weight:700;line-height:1.25;color:var(--navy);overflow-wrap:anywhere;min-width:0}
.ob-ct-pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;font-size:14.5px;color:var(--ink-2)}
.ob-ct-used{color:var(--ink)}
.ob-ct-pby{font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere}
.ob-ct-rename>summary,.ob-ct-acts details.ob-more>summary,.ob-ct-sign>summary,.ob-ct-vacts details>summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer}
.ob-ct-fold-b{padding:6px 0 10px;max-width:640px}
.ob-ct-acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;min-width:0}
.ob-ct-acts>details[open]{flex-basis:100%;order:2}
/* an open action (Rewrite, Make a variant, More) is one panel under the row, its name as its head */
.ob-ct-acts>details[open]{background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-soft);padding:0 18px 8px;margin-top:8px;max-width:760px}
.ob-ct-acts>details[open]>summary{font-weight:700;color:var(--ink)}
.ob-ct-acts>details[open]>.ob-ct-fold-b{padding-top:0;max-width:none}
.ob-ct-inline{display:inline-flex}
.ob-btn.ob-ct-plain{background:transparent;border-color:transparent;padding:0 2px;color:var(--brand-ink);font-weight:500;font-size:14.5px}
.ob-btn.ob-ct-plain:hover{text-decoration:underline;border-color:transparent}
.ob-btn.ob-ct-del{color:var(--bad)}
.ob-ct-busy{font-size:14.5px}
.ob-ct-morelist{display:flex;flex-direction:column;gap:0;max-width:640px}
.ob-ct-mitem{padding:6px 0;border-top:1px solid var(--line-soft)}
.ob-ct-mitem:first-child{border-top:0}
.ob-ct-mh{font-size:14.5px;font-weight:700;color:var(--ink);padding:6px 0 4px}
.ob-ct-dl{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px}
.ob-ct-piece{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;min-width:0}
.ob-ct-main{min-width:0}
.ob-ct-copyp{padding:4px 18px;min-width:0}
.ob-ct-f{padding:14px 0;border-top:1px solid var(--line-soft);min-width:0;scroll-margin-top:12px}
.ob-ct-f:first-child{border-top:0}
.ob-ct-old+.ob-ct-f{border-top:0}
.ob-ct-old{padding:12px 0 2px;font-size:14px}
.ob-ct-fh{display:flex;align-items:center;flex-wrap:wrap;gap:2px 12px;min-height:28px}
.ob-ct-fl{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-right:auto}
.ob-ct-cnt{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.ob-ct-cnt.amber{color:var(--warn-ink);font-weight:700}
.ob-ct-cnt.red{color:var(--bad);font-weight:700}
.ob-ct-lc{font-size:13px;color:var(--ink-2);order:3;flex-basis:100%}
.ob-ct-lc.red{color:var(--bad);font-weight:700}
.ob-ct-copy{min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--brand-ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.ob-ct-copy:hover{border-color:var(--brand)}
.ob-ct-fv{display:flex;flex-direction:column;gap:8px;padding-top:4px;font-size:16px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere;max-width:70ch}
.ob-ct-list{margin:4px 0 0;padding:0 0 0 1.6em;display:flex;flex-direction:column;gap:2px}
.ob-ct-list>li{font-size:15.5px;line-height:1.5;color:var(--ink);padding:3px 0}
.ob-ct-list>li::marker{color:var(--ink-3);font-size:13px}
.ob-ct-li{overflow-wrap:anywhere;margin-right:10px}
.ob-ct-none{font-size:14px;color:var(--ink-3);padding-top:2px}
.ob-ct-miss{margin:4px 0 0;padding-left:1.2em;font-size:14px;color:var(--ink-2)}
.ob-ct-flag{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.ob-ct-flag.red{text-decoration-color:var(--bad)}
.ob-ct-flag.amber{text-decoration-color:var(--warn)}
.ob-ct-flag.signed{text-decoration-color:var(--ink-3);text-decoration-style:dotted;text-decoration-thickness:1px}
.ob-ct-edit{display:flex;flex-direction:column;gap:14px;padding:14px 0;max-width:760px}
.ob-ct-edit .ob-field{margin:0}
.ob-ct-efh{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ob-ct-ef textarea{field-sizing:content;min-height:48px}
.ob-ct-record{display:flex;flex-direction:column;gap:10px;min-width:0}
.ob-ct-rec{background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-soft);min-width:0}
.ob-ct-rec>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 16px;cursor:pointer;font-weight:700;font-size:15px;color:var(--navy);list-style:none}
.ob-ct-rec>summary::-webkit-details-marker{display:none}
.ob-ct-sum{display:flex;gap:10px;font-size:13.5px}
.ob-ct-rec-b{padding:0 16px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ob-ct-chks,.ob-ct-srcs,.ob-ct-vers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;min-width:0}
.ob-ct-chks>li,.ob-ct-srcs>li,.ob-ct-vers>li{padding:9px 0;border-top:1px solid var(--line-soft);font-size:14px;line-height:1.45;overflow-wrap:anywhere;min-width:0}
.ob-ct-chks>li:first-child,.ob-ct-srcs>li:first-child,.ob-ct-vers>li:first-child{border-top:0;padding-top:2px}
.ob-ct-chk .ob-state{font-weight:500}
.ob-ct-where{font-weight:700;color:var(--ink)}
.ob-ct-q{color:var(--ink-2)}
.ob-ct-signed{font-size:13.5px;color:var(--ink-2)}
.ob-ct-st{color:var(--ink)}
.ob-ct-subh{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding-top:6px}
.ob-ct-cited{font-size:13.5px;color:var(--ink-2)}
.ob-ct-vacts{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;font-size:14px}
.ob-ct-vacts>a{display:inline-flex;align-items:center;min-height:44px}
.ob-ct-vacts details[open]{flex-basis:100%}
.ob-form.ob-ct-cmp{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:0 12px;padding-top:6px}
.ob-ct-cmp .ob-field{flex:1 1 110px;min-width:0}
.ob-ct-rec-b>.ob-form{align-self:flex-start}
@media (min-width:640px){
  .ob-ct-wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ob-ct-row-a{grid-template-columns:auto minmax(0,1fr) auto}
  .ob-ct-row-s{grid-column:3;justify-content:flex-end;text-align:right}
  .ob-ct-copyp{padding:4px 22px}
  .ob-ct-lc{order:0;flex-basis:auto}
}
@media (min-width:1000px){
  .ob-rail-h{display:block;padding:0 14px 2px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .ob-rail-h.gap{margin-top:18px}
  .ob-rail-h.gap+a.gap{margin-top:0}
  .ob-ct-piece{grid-template-columns:minmax(0,1fr) 380px;gap:22px}
  .ob-ct-record{position:sticky;top:16px}
}