/* Client portal: the client screens (step 4), from the walk 4 mock-up (artifacts/portal-mockup.src.html).
   Brand tokens and the red three-square detail follow the LinkedIn banner of 08/10/2026. Mobile first:
   checked at 390 px and 1440 px with no sideways scroll. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format("woff2")}
/* Atkinson Hyperlegible Next (SIL OFL, fonts/OFL-atkinson-hyperlegible-next.txt): the reading face since step 6d */
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-next-400.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-next-700.woff2) format("woff2")}
:root{
  color-scheme:light;
  --ink:#152A43;--ink-soft:#33475C;--muted:#5E7183;--faint:#5E7183;  /* step 6d: faint text failed contrast, so it is the muted grey now */
  --ground:#EAF1F3;--surface:#FFFFFF;--surface-2:#F1F6F8;
  --border:#D7E2E6;--border-strong:#7D8F9C;--border-mid:#BCD0D7;  /* strong: inputs, radios, ticks (3.3:1); mid: decoration */
  --placeholder:#647684;--coral-text:#B5483F;--step-now:#1A7A90;--soft:#F4F7F8;--hair:#DCE5E9;
  --teal:#066980;--teal-dark:#04505F;--teal-tint:#E2F0F3;--blue-mid:#2692AE;--blue-pale:#91CAD4;
  --coral:#E26F66;--coral-light:#E8A397;--red:#C93939;--pink:#FCEEEC;--pink-border:#F5D9D4;
  --band:#F3F4F6;--band-line:#E2E5E9;
  --green:#1F7A55;--green-bg:#E7F6EE;--green-line:#BFE6D1;--green-ink:#1F5E43;
  --amber-bg:#FFF7EC;--amber-line:#F3DFBF;--amber-ink:#6B4E1E;
  --shadow:0 1px 2px rgba(21,42,67,.05),0 8px 24px rgba(21,42,67,.07);
  --shadow-lg:0 12px 40px rgba(21,42,67,.16);
  --r:12px;--r-sm:9px;
  --sans:"Poppins","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --read:"Atkinson Hyperlegible Next","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--read);color:var(--ink);background:var(--ground);line-height:1.5;-webkit-font-smoothing:antialiased;font-size:16px;overflow-x:hidden}
/* Poppins stays on headings, the top bar and buttons (step 6d) */
h1,h2,h3,h4,h5,.btn,.cta,.topbar,.tbtn,.signout,.sw,.staff-badge{font-family:var(--sans)}
body.modal-open{overflow:hidden}
button{font:inherit;color:inherit}
a{color:var(--teal)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.loading{max-width:1140px;margin:0 auto;padding:60px 16px;color:var(--muted)}

/* the three-square mark: dark red, coral, pale coral */
.sq3{display:inline-flex;gap:3px;vertical-align:middle;flex:none}
.sq3 i{width:9px;height:9px;border-radius:2px;display:block;background:#C93939}
.sq3 i:nth-child(2){background:#E26F66}
.sq3 i:nth-child(3){background:#E8A397}

/* top bar */
.topbar{position:sticky;top:0;z-index:30;background:var(--ink)}
.topbar-in{max-width:1140px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px}
.wordmark{height:26px;width:auto;display:block;flex:none}
.tb-space{flex:1;min-width:0}
.who{display:flex;align-items:center;gap:10px;flex:none;min-width:0}
.who .nm{display:flex;flex-direction:column;line-height:1.2;text-align:right;min-width:0}
.who .nm small{color:var(--blue-pale);font-size:11px;font-weight:500}
.who .nm b{color:#fff;font-size:13px;font-weight:600}
.cmark{width:36px;height:36px;border-radius:50%;display:block;flex:none;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.18);object-fit:contain}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(150deg,var(--blue-mid),var(--teal));color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.akmark{width:30px;height:31px;display:block;flex:none}
.staff-badge{background:var(--coral);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:4px 9px;white-space:nowrap;flex:none}

.wrap{max-width:1140px;margin:0 auto;padding:28px 24px 40px}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-text);font-weight:700;margin:0 0 8px;display:flex;align-items:center;gap:10px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;min-width:0}
.card h2{font-size:16px;margin:0 0 4px;font-weight:600;letter-spacing:-.01em}
.card .sub{color:var(--muted);font-size:15px;margin:0 0 14px}
.card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.card-h h2{display:flex;align-items:center;gap:10px}
.lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
.btn{font-weight:600;font-size:14.5px;border-radius:10px;padding:11px 20px;cursor:pointer;border:1.5px solid transparent;transition:.15s;display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 5px 14px rgba(21,42,67,.25)}
.btn-primary:hover{background:var(--teal);border-color:var(--teal)}
.btn-primary[disabled]{opacity:.5;cursor:default}
.btn-ghost{background:var(--surface);color:var(--ink-soft);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.linkbtn{background:none;border:0;color:var(--teal);font-weight:700;font-size:14px;cursor:pointer;padding:4px 0}
.linkbtn:hover{text-decoration:underline}
.saves{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin:0}
.saves svg{flex:none;width:16px;height:16px;color:var(--teal)}
.stack{display:flex;flex-direction:column;gap:20px;margin-top:20px}
.duo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px}
.privacy{max-width:1140px;margin:0 auto;padding:6px 24px 30px;font-size:14px;color:var(--ink-soft);text-align:center}
.privacy a{color:var(--teal-dark)}

/* welcome */
.hero{background:linear-gradient(158deg,#1E3A5A,#132539);border-radius:var(--r);color:#fff;padding:30px 32px;position:relative;overflow:hidden;box-shadow:var(--shadow);display:flex;gap:28px;align-items:center}
.hero::after{content:"";position:absolute;right:-60px;top:-70px;width:280px;height:280px;border-radius:48px;background:var(--blue-pale);opacity:.09;transform:rotate(16deg);pointer-events:none}
.hero .hero-txt{flex:1;min-width:0;position:relative;z-index:1}
.hero .eyebrow{color:var(--blue-pale)}
.hero h1{margin:0 0 10px;font-size:27px;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.hero p.wel{margin:0;color:rgba(255,255,255,.9);font-size:16px;max-width:60ch}
.hero .clogo{flex:none;position:relative;z-index:1;width:300px;max-width:38%;background:#fff;border-radius:12px;padding:14px 18px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.hero .clogo img{width:100%;height:auto;display:block}

/* the six phases, each opening to its detail (walk 4 point 1) */
.phases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.phases li{min-width:0;position:relative}
.phases li::before{content:"";position:absolute;top:13px;left:-50%;right:50%;height:3px;background:var(--border)}
.phases li:first-child::before{display:none}
.ph{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;background:none;border:0;padding:0 4px 8px;cursor:pointer;text-align:center;border-radius:10px;position:relative}
.ph .d{width:29px;height:29px;border-radius:50%;background:var(--surface);border:2px solid var(--border-mid);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--faint);z-index:1;flex:none}
.ph .d svg{width:13px;height:13px}
.ph .pn{font-size:14px;font-weight:500;color:var(--ink-soft);line-height:1.3}
.ph .ps{font-size:14px;color:var(--muted);line-height:1.35}
/* the "you are here" pointer, brand red so it is clearly visible (Jordan 08/10/2026) */
.ph:hover .pn{color:var(--ink)}
.ph:focus-visible{outline:2px solid var(--blue-mid);outline-offset:2px}
.phases li.done .d{background:var(--ink);border-color:var(--ink);color:#fff}
.phases li.done::before,.phases li.now::before{background:var(--ink)}
.phases li.now .d{border-color:var(--step-now);background:var(--step-now);color:#fff;box-shadow:0 0 0 4px rgba(38,146,174,.2)}  /* secondary blue, used sparingly (Jordan 08/10/2026: less red) */
.phases li.now .pn{color:var(--ink);font-weight:700}
/* a small soft notch joining the open phase to its detail: panel colour, rounded tip (Jordan 08/10/2026: the red square was too loud) */
.ph[aria-expanded="true"]::after{content:"";position:absolute;left:50%;bottom:-16px;width:11px;height:11px;background:var(--surface-2);border-left:1px solid var(--border);border-top:1px solid var(--border);border-top-left-radius:3px;transform:translateX(-50%) rotate(45deg);z-index:2}
.phase-detail{margin-top:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 28px}
.phase-detail h3{grid-column:1/-1;margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.phase-detail .pdx{font-size:15px;color:var(--ink-soft)}
.phase-detail .pdx p{margin:0 0 8px}
.phase-detail h4{font-size:14px;color:var(--muted);font-weight:600;margin:4px 0 8px}
/* the steps as a timeline: one line joins the circles; a done step is a green tick, the current one red */
ol.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
ol.steps li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14.5px;color:var(--ink-soft);position:relative;min-height:22px}
ol.steps li:not(:last-child)::before{content:"";position:absolute;left:10px;top:50%;width:2px;height:calc(100% + 10px);background:var(--border-mid)}
ol.steps li.done:not(:last-child)::before{background:var(--green-line)}
ol.steps .sd{width:20px;height:20px;border-radius:50%;border:2px solid var(--border-mid);background:#fff;justify-self:center;display:grid;place-items:center;position:relative;z-index:1;box-sizing:border-box;color:#fff}
ol.steps .sd svg{width:11px;height:11px;display:block}
ol.steps li.done .sd{background:var(--green);border-color:var(--green)}
ol.steps li.done{color:var(--muted)}
ol.steps li.now{color:var(--ink);font-weight:600}
ol.steps li.now .sd{background:var(--step-now);border-color:var(--step-now);box-shadow:0 0 0 3px rgba(38,146,174,.2)}
ol.steps .dt{font-size:14px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:400}
/* the launch line */
.due{display:flex;align-items:flex-start;gap:12px;margin:18px 0 0;padding:12px 16px;border-radius:10px;background:rgba(21,42,67,.04);border:1px solid rgba(21,42,67,.10);font-size:14.5px;color:var(--ink);line-height:1.5}
.due svg{width:22px;height:22px;color:var(--ink-soft);flex:none;margin-top:1px}
.due b{color:var(--ink);font-weight:600}

/* progress */
.progress{display:flex;flex-direction:column;gap:7px;width:280px;max-width:100%}
.progress b{font-size:15px}
.bar{height:8px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;width:100%}
.bar i{display:block;height:100%;background:var(--teal);border-radius:99px;transition:width .3s}


/* Drive card, on a neutral background (walk 4 point 2) */
.drive-big{display:flex;align-items:center;gap:16px;width:100%;height:100%;text-align:left;background:linear-gradient(135deg,rgba(232,163,151,.18),rgba(244,201,195,.10)),var(--surface);color:var(--ink);border:1px solid rgba(226,111,102,.22);border-radius:var(--r);padding:20px 22px;cursor:pointer;box-shadow:var(--shadow);transition:.15s;text-decoration:none}
.drive-big:hover{border-color:rgba(226,111,102,.45)}
.drive-big .ic{width:48px;height:48px;border-radius:12px;background:#fff;border:1px solid rgba(226,111,102,.25);color:var(--red);display:grid;place-items:center;flex:none}
.drive-big .ic svg{width:26px;height:26px}
.drive-big b{display:block;font-size:16.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.drive-big span{font-size:14.5px;color:var(--muted)}
.drive-big .arr{margin-left:auto;font-size:20px;flex:none;color:var(--red)}
.devsite{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1.5px dashed var(--border-mid);border-radius:var(--r-sm);background:var(--surface-2);color:var(--muted);font-size:14.5px}
.devsite svg{width:26px;height:26px;color:var(--faint);flex:none}
.help-in{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.help{display:flex;flex-direction:column;gap:9px;font-size:15px;min-width:0;flex:1 1 280px;max-width:520px}
.help .row{display:flex;gap:10px;align-items:flex-start}
.help .row svg{width:18px;height:18px;color:var(--teal);flex:none;margin-top:1px}
.help a{word-break:break-all;color:var(--ink);font-weight:600;text-decoration:none}
.help a:hover{text-decoration:underline}
.help a b{font-weight:inherit}
.help .hrs{display:block;font-size:14px;color:var(--muted);margin:-6px 0 0 28px}

/* status marks: a tick once checked (the coral dot became words on the cards, step 6d) */
.mk{width:20px;height:20px;flex:none;display:grid;place-items:center}
.mk.done{border-radius:50%;background:var(--green);color:#fff}
.mk.done svg{width:12px;height:12px}

/* the project brief: cards three to a row (two on a tablet, one on a phone) */
.group{margin-top:18px}
.group-h{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;flex-wrap:wrap}
.group-h h3{font-size:15px;margin:0;font-weight:600}
.group-h span{color:var(--muted);font-size:15px}
.sgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sgrid>li{min-width:0;display:flex}
.scard{display:flex;align-items:flex-start;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px;min-width:0;width:100%;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.scard:hover{border-color:var(--blue-pale);box-shadow:var(--shadow)}
.scard:focus-visible{outline:2px solid var(--blue-mid);outline-offset:2px}
.ti{width:44px;height:44px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;flex:none;color:var(--ink)}
.ti svg{width:26px;height:26px}
.scard .tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:1px}
.scard .tt b{font-size:16px;font-family:var(--sans);font-weight:600;line-height:1.3}
.scard .tt .sm{color:var(--muted);font-size:14.5px;line-height:1.4}
.scard.is-done{background:#FBFDFD}
.scard.is-hidden{opacity:.65;background:repeating-linear-gradient(135deg,#fff,#fff 10px,#F6F8F9 10px,#F6F8F9 20px)}
.hidtag{align-self:flex-start;font-size:12px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:6px;padding:1px 7px;margin-top:4px}
.brief-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}

/* the pop-up (a tile). Step 6d, 09/10/2026 (artifacts/tile-redesign.html): the gist and key points
   first, then the asks, then the folded detail; red only for the needs-you dot and count; the reading
   face is Atkinson Hyperlegible Next, Poppins on headings and buttons. Phone first; from 1024 px the
   pop-up widens and splits: reading on the left, "Over to you" on the right, each scrolling on its own. */
.ov{position:fixed;inset:0;z-index:80;background:rgba(14,29,48,.55);display:flex;align-items:flex-start;justify-content:center;padding:40px 24px;overflow:auto;animation:fadeIn .15s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes rise{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}
.pop{background:var(--surface);border-radius:16px;box-shadow:0 24px 70px rgba(14,29,48,.35);width:100%;max-width:720px;display:flex;flex-direction:column;max-height:calc(100vh - 80px);overflow:hidden;animation:rise .18s ease-out;font-size:17px;line-height:1.5}
.pop:focus{outline:none}
.pop-hd{display:flex;align-items:center;gap:14px;padding:16px 20px 14px 22px;border-bottom:1px solid var(--hair);flex:none}
.pop-hd .ti{width:46px;height:46px;background:var(--soft);border:0}
.pop-hd .ti svg{width:26px;height:26px}
.pop-hd .tt{flex:1;min-width:0}
.pop-hd h2{margin:0;font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.pop-need{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-soft);margin:3px 0 0}
.pop-need i{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none}
.pop-need.ok i{background:var(--green)}
.pop-need.look i{background:var(--teal)}
.pop-step{font-size:14px;color:var(--muted);white-space:nowrap;flex:none}
.x{width:44px;height:44px;border-radius:10px;border:1px solid var(--hair);background:var(--surface);cursor:pointer;display:grid;place-items:center;flex:none;color:var(--ink-soft)}
.x:hover{background:var(--surface-2)}
.x:focus-visible{outline:3px solid var(--step-now);outline-offset:2px}
.x svg{width:18px;height:18px}
.pop-bd{overflow:auto;flex:1;overscroll-behavior:contain}
.pop-read{padding:18px 22px 6px}
.pop-ask{padding:6px 22px 18px}
.staffnote{font-size:14px;color:var(--amber-ink);background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:9px;padding:8px 12px;margin:0 0 14px}
/* the gist, key points and folds */
.gist{font-size:1.06em;line-height:1.5;margin:0 0 14px;color:var(--ink)}
.found{color:var(--ink);line-height:1.55}
.found p{margin:0 0 12px}
.found h5{font-size:16px;margin:14px 0 6px;font-weight:600}
ul.plist{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
ul.plist li{color:var(--ink-soft);line-height:1.5;padding-left:22px;position:relative}
ul.plist li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--teal)}
ul.plist li b{color:var(--ink);font-weight:700}
ul.plist ul.plist{margin:8px 0 0}
ul.plist ul.plist li::before{background:none;border:1.5px solid var(--teal);width:7px;height:7px}
/* a sitemap: a plain indented list */
ul.tree{list-style:none;margin:4px 0 12px;padding:0}
ul.tree li{padding:3px 0}
ul.tree li b{font-weight:700;color:var(--ink)}
ul.tree ul{list-style:none;margin:4px 0 2px 7px;padding:0 0 0 18px;border-left:2px solid var(--border)}
ul.tree ul li{position:relative}
ul.tree ul li::before{content:"";position:absolute;left:-18px;top:16px;width:12px;border-top:2px solid var(--border)}
.tblwrap{overflow-x:auto;margin:6px 0 12px;-webkit-overflow-scrolling:touch;max-width:100%}
table.kwt{width:100%;border-collapse:collapse;font-size:15px}
.kwt th{text-align:left;font-size:14px;color:var(--muted);font-weight:700;padding:6px 8px;border-bottom:2px solid var(--border)}
.kwt td{padding:7px 8px;border-bottom:1px solid var(--border);color:var(--ink-soft)}
.folds{margin:4px 0 8px}
/* a fold at the end of the research runs straight on into the Why row: one rule between them, not two */
.found>.folds:last-child{margin-bottom:0}
.found>.folds:last-child>.fold:last-child{border-bottom:0}
.found:has(>.folds:last-child)+.folds{margin-top:0}
.fold.more{border-top:0}
.fold.more>summary{color:var(--teal);min-height:44px;padding-top:2px}
.fold{border-top:1px solid var(--hair)}
.folds>.fold:last-child{border-bottom:1px solid var(--hair)}
.fold>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;min-height:48px;font-weight:700;color:var(--ink)}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary:focus-visible{outline:3px solid var(--step-now);outline-offset:2px;border-radius:4px}
.fold-t{min-width:0}
.fold-n{font-weight:400;color:var(--muted)}
.fold .chev{width:20px;height:20px;flex:none;color:var(--teal);transition:transform .15s}
.fold[open]>summary .chev{transform:rotate(180deg)}
.fold-b{padding:0 0 14px}
.fold-b>:last-child,.fold-b>.found>:last-child{margin-bottom:0}
.fold.why .fold-b p{color:var(--ink-soft)}
.fold.why .fold-b p b{color:var(--ink)}
/* Over to you */
.over{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 12px;flex-wrap:wrap}
.over h3{font-size:18px;font-weight:600;margin:0;letter-spacing:-.01em}
.over .cnt{font-size:14px;color:var(--muted)}
.recnote{font-size:15px;color:var(--ink-soft);margin:-4px 0 12px}
.need{margin:0 0 14px;color:var(--ink-soft)}
.need p{margin:0 0 8px}
.note-flag{padding:10px 12px;border-radius:10px;background:var(--soft);border-left:4px solid var(--teal);color:var(--ink-soft);font-size:15px;margin:0 0 14px;line-height:1.55}
.ask{background:var(--soft);border-radius:14px;padding:16px;margin:0 0 12px}
.ask .qn{font-size:14px;color:var(--muted);margin:0 0 4px}
.ask .q{font-weight:700;margin:0 0 4px;line-height:1.35;color:var(--ink)}
.ask .qsub{font-size:15px;color:var(--ink-soft);margin:0 0 10px}
input[type=text],input[type=email],textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);border:1.5px solid var(--border-strong);border-radius:10px;padding:11px 12px;background:var(--surface);transition:.15s}
textarea{min-height:84px;resize:vertical;line-height:1.5}
input:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(6,105,128,.22)}
::placeholder{color:var(--placeholder)}
.choices{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.choices.stacked{flex-direction:column;align-items:stretch}
.choice{font-size:16px;border:1.5px solid var(--border-strong);background:var(--surface);color:var(--ink);border-radius:10px;padding:11px 14px;min-height:48px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:12px;text-align:left;min-width:0;max-width:100%}
.choice:hover{border-color:var(--teal)}
.choice:focus-visible{outline:3px solid var(--step-now);outline-offset:2px}
.choice.on{border-color:var(--teal);background:var(--teal-tint);font-weight:700}
.choice .bx{width:20px;height:20px;border-radius:5px;border:2px solid var(--border-strong);display:grid;place-items:center;flex:none;color:transparent;background:#fff}
.choice .bx svg{width:12px;height:12px}
.choice.radio .bx{border-radius:50%}
.choice.radio .bx svg{display:none}
.choice.radio.on .bx{background:#fff;border-color:var(--teal)}
.choice.radio.on .bx::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--teal)}
.choice.on:not(.radio) .bx{background:var(--teal);border-color:var(--teal);color:#fff}
.choice .cl{min-width:0;overflow-wrap:anywhere}
/* the Recommended tag drops under a long choice instead of squeezing it */
.choice:has(.rec){flex-wrap:wrap;row-gap:6px}
.choice:has(.rec) .cl{flex:1 1 9em}
.rec{display:inline-flex;align-items:center;font-size:14px;font-weight:700;color:var(--teal-dark);border:1px solid var(--teal);border-radius:6px;padding:0 6px;white-space:nowrap;line-height:1.6;margin-left:auto}
.addlbl{font-size:15px;font-weight:700;color:var(--ink-soft);margin:12px 0 5px}
.addrow{display:flex;gap:8px;align-items:center}
.addrow input{flex:1;min-width:0;margin:0}
.addplus{width:46px;height:46px;border-radius:10px;border:1.5px solid var(--teal);background:var(--teal-tint);color:var(--teal-dark);font-size:22px;font-weight:500;cursor:pointer;display:grid;place-items:center;flex:none;padding:0;line-height:1;font-family:inherit}
.addplus:hover{background:var(--teal);color:#fff}
ul.listed{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
ul.listed li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:9px;padding:7px 8px 7px 12px;font-size:16px;min-width:0}
ul.listed li span{flex:1;min-width:0;overflow-wrap:anywhere}
.rm{width:36px;height:36px;border-radius:7px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0;flex:none}
.rm:hover{color:var(--ink);border-color:var(--border);background:var(--surface-2)}
.rm svg{width:16px;height:16px}
.drivebtn{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--teal-dark);background:#fff;border:1.5px solid var(--teal);border-radius:10px;padding:11px 14px;min-height:48px;cursor:pointer;text-decoration:none;max-width:100%}
.drivebtn:hover{background:var(--teal-tint)}
.drivebtn svg{width:20px;height:20px;flex:none}
.drivebtns{display:flex;flex-direction:column;gap:8px;margin:4px 0 6px}
.securenote{font-size:14px;color:var(--muted);margin:0 0 14px}
/* "Saved" against each answer */
.stamp{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--muted);margin-top:8px;min-height:20px}
.stamp:empty{display:none}
.stamp .tk{width:16px;height:16px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;flex:none}
.stamp .tk svg{width:10px;height:10px}
.stamp.saving .tk{background:var(--border-mid)}
.stamp.err{color:var(--red);align-items:flex-start}
.stamp.err .tk{background:var(--red);margin-top:2px}
/* the character counter near the 20,000 limit (risk analysis R13) */
.count{font-size:14px;color:var(--muted);margin:6px 0 0;text-align:right}
.count.over{color:var(--red);font-weight:700;text-align:left}
/* someone else changed this answer meanwhile: the choice (R9, R10) */
.clash{margin:10px 0 0;padding:12px 14px;border:1.5px solid var(--amber-line);background:var(--amber-bg);border-radius:var(--r-sm);font-size:15px;color:var(--amber-ink)}
.clash-h{margin:0 0 8px}
.clash-h b{font-weight:700;color:var(--ink)}
.clash-v{background:#fff;border:1px solid var(--amber-line);border-radius:7px;padding:8px 10px}
.clash-v small{display:block;font-size:14px;font-weight:700;color:var(--amber-ink);margin-bottom:2px}
.clash-t{white-space:pre-wrap;word-break:break-word;color:var(--ink);max-height:9.5em;overflow:auto}
.clash-y{margin:8px 0 10px}
.clash-b{display:flex;flex-wrap:wrap;gap:8px}
.clash-b .btn{padding:8px 16px;font-size:14px}
/* an answer akoca typed in for the client: shown to staff and client alike */
.byak{display:inline-block;font-size:14px;font-weight:700;color:var(--teal-dark);background:var(--teal-tint);border-radius:5px;padding:0 6px;margin-left:4px;white-space:nowrap;vertical-align:1px}
.history{margin:6px 0 0;padding:6px 10px;border-left:3px solid var(--amber-line);background:#fff;font-size:14px;color:var(--muted);border-radius:0 6px 6px 0}
.history b{color:var(--amber-ink);font-weight:700}
.history ol{margin:4px 0 0;padding-left:18px}
.history s{color:var(--muted)}
/* the notes: one line until opened, and open when there is a note */
.fb{margin:6px 0 4px}
.addnote{display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 0;background:none;border:0;color:var(--teal);font-weight:700;font-size:16px;cursor:pointer;text-align:left}
.addnote:hover{text-decoration:underline}
.addnote:focus-visible{outline:3px solid var(--step-now);outline-offset:2px;border-radius:4px}
.nbox{background:var(--soft);border-radius:14px;padding:16px;margin:6px 0 0}
.nbox label{display:block;font-weight:700;margin:0 0 4px}
.nbox .qsub{font-size:15px;color:var(--ink-soft);margin:0 0 10px}
/* the footer: the confirm button ("Looks right, mark as checked") and the next-section link */
.pop-ft{display:flex;flex-direction:column;gap:6px;padding:12px 16px 12px;border-top:1px solid var(--hair);background:var(--surface);flex:none}
.cta{font-size:16px;font-weight:600;border-radius:12px;border:0;padding:13px 18px;min-height:50px;background:var(--ink);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;box-shadow:0 5px 14px rgba(21,42,67,.22)}
.cta:hover{background:var(--teal)}
.cta:focus-visible{outline:3px solid var(--step-now);outline-offset:3px}
.cta[disabled]{opacity:.55;cursor:default}
.ft-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0}
.pop-hint{margin:0;font-size:14px;color:var(--muted);min-width:0}
.pop-hint .hint-d{display:none}
.nextlink{font-size:15px;padding:6px 0;white-space:nowrap;flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.nextlink .sk-d{display:none}
.nextlink:focus-visible{outline:3px solid var(--step-now);outline-offset:2px;border-radius:4px}
.confirmed{display:flex;gap:12px;align-items:center;color:var(--green-ink);background:var(--green-bg);border:1px solid var(--green-line);border-radius:12px;padding:8px 14px;min-height:50px}
.confirmed .tk{width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;flex:none}
.confirmed .tk svg{width:15px;height:15px}
.confirmed .cf-t{flex:1;min-width:0}
.confirmed b{display:block;font-size:16px;font-weight:700}
.confirmed small{display:block;font-size:14px;color:var(--green-ink)}
.confirmed .linkbtn{color:var(--green-ink);font-size:15px;padding:6px 2px;flex:none;text-decoration:underline}
.confirmed .linkbtn:focus-visible{outline:3px solid var(--step-now);outline-offset:2px}
/* the brief's cards say the state in words (step 6d point 10) */
.st-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;border-radius:99px;padding:3px 11px;margin-top:8px;white-space:nowrap}
.st-chip i{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.st-chip.need{background:var(--pink);color:#A3302A}
.st-chip.look{background:var(--surface-2);color:var(--ink-soft)}
.st-chip.ok{background:var(--green-bg);color:var(--green-ink)}
.st-chip svg{width:13px;height:13px}
@media (min-width:1024px){
  .ov{padding:28px 24px}
  .pop{max-width:1040px;width:min(1040px,100%);height:min(860px,calc(100vh - 56px));max-height:none}
  .pop-hd{padding:16px 22px}
  .pop-hd .tt{display:flex;align-items:baseline;gap:4px 16px;flex-wrap:wrap}
  .pop-hd h2{font-size:22px}
  .pop-need{margin:0}
  .pop-bd{display:grid;grid-template-columns:minmax(0,1fr) 400px;overflow:hidden}
  .pop-read{overflow-y:auto;overscroll-behavior:contain;padding:24px 32px 24px 26px}
  .pop-read>*{max-width:65ch}
  .pop-ask{overflow-y:auto;overscroll-behavior:contain;background:var(--soft);border-left:1px solid var(--hair);padding:6px 22px 20px}
  .pop-ask .over{margin-top:18px}
  .pop-ask .ask,.pop-ask .nbox{background:#fff;border:1px solid var(--hair)}
  .pop-ask .note-flag{background:#fff}
  .pop-ft{flex-direction:row;align-items:center;gap:16px;padding:12px 22px}
  .pop-ft .ft-row{flex:1;min-width:0;gap:16px}
  .pop-ft .nextlink{order:-1;max-width:50%}
  .nextlink .sk-d{display:inline}
  .nextlink .sk-m{display:none}
  .pop-hint{flex:1;text-align:right}
  .pop-hint .hint-d{display:inline}
  .pop-ft .cta,.pop-ft .confirmed{width:auto;min-width:300px;flex:none;order:2}
}
@media (prefers-reduced-motion:reduce){
  .ov,.pop{animation:none}
  .fold .chev,.toast,.bar i,.choice,.scard{transition:none}
}

/* sign-in (step 4b), the walk 4 mock-up's login stop */
.login{min-height:100vh;display:grid;place-items:center;padding:32px 16px;background:linear-gradient(158deg,#1E3A5A,#132539);position:relative;overflow:hidden}
.login::after{content:"";position:absolute;right:-90px;bottom:-110px;width:420px;height:420px;border-radius:64px;background:var(--blue-pale);opacity:.08;transform:rotate(14deg);pointer-events:none}
.login::before{content:"";position:absolute;right:120px;bottom:-40px;width:260px;height:260px;border-radius:44px;background:var(--coral);opacity:.08;transform:rotate(-8deg);pointer-events:none}
.login-in{width:100%;max-width:420px;position:relative;z-index:1}
.login .wordmark{height:30px;margin:0 auto 14px}
.addr{display:flex;align-items:center;gap:7px;justify-content:center;color:rgba(255,255,255,.75);font-size:12.5px;margin:0 0 18px;word-break:break-all;text-align:center}
.addr svg{width:14px;height:14px;flex:none}
.login-card{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);padding:30px 30px 26px}
.login-card h1{font-size:22px;margin:0 0 6px;letter-spacing:-.02em;line-height:1.25}
.login-card p{color:var(--muted);margin:0 0 18px;font-size:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label,.login-card .clbl{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.login-card .clbl{display:block;margin-bottom:6px}
.code{display:flex;gap:8px;justify-content:space-between;margin:4px 0 16px}
.code input{width:100%;min-width:0;text-align:center;font-size:22px;font-weight:600;padding:10px 0;border:1.5px solid var(--border-strong);border-radius:10px;font-family:inherit;color:var(--ink)}
.code input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(38,146,174,.18)}
.login-card .btn{width:100%}
.login-card .more{margin:14px 0 0;font-size:13px;text-align:center;color:var(--muted)}
.login-card .spamtip{margin:-4px 0 14px;font-size:13px}
.sentto{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 13px;font-size:13px;color:var(--ink-soft);margin-bottom:14px;word-break:break-word}
.signerr{background:var(--pink);border:1px solid var(--pink-border);color:#8A2424;border-radius:var(--r-sm);padding:9px 12px;font-size:13px;margin:0 0 14px}
.tostaff h1{margin:0 0 8px}
.tostaff p{margin:0 0 18px;color:var(--muted)}
.tostaff .btn{width:100%;justify-content:center;text-decoration:none}
.login-foot{color:rgba(255,255,255,.62);font-size:12px;text-align:center;margin:18px 6px 0;line-height:1.55}
.login-foot a{color:rgba(255,255,255,.75)}
.signout{background:none;border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:8px;font-size:12px;font-weight:500;padding:5px 10px;cursor:pointer;flex:none}
.signout:hover{background:rgba(255,255,255,.1)}

/* the name step (walk 2 point 4) */
.namestep{min-height:100vh;display:grid;place-items:center;padding:32px 16px;background:linear-gradient(158deg,#1E3A5A,#132539)}
.namestep-in{width:100%;max-width:420px}
.namestep .wordmark{height:30px;margin:0 auto 22px}
.namecard{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);padding:30px 30px 26px}
.namecard h1{font-size:22px;margin:0 0 6px;letter-spacing:-.02em;line-height:1.25}
.namecard p{color:var(--muted);margin:0 0 18px;font-size:14px}
.namecard label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin:0 0 6px}
.namecard input{margin-bottom:14px}
.namecard .btn{width:100%}
.namefoot{color:rgba(255,255,255,.62);font-size:12px;text-align:center;margin:18px 6px 0;line-height:1.55}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-size:13.5px;font-weight:500;box-shadow:var(--shadow-lg);transition:.3s;z-index:120;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:1023.98px){
  .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .duo{grid-template-columns:1fr}
  /* the phases become a list: dot, phase, line */
  .phases{grid-template-columns:1fr}
  .phases li::before,.phases li:first-child::before{display:block;top:30px;bottom:-4px;left:14px;right:auto;width:3px;height:auto}
  .phases li:last-child::before{display:none}
  .phases li.now::before{background:var(--border)}
  .ph{flex-direction:row;align-items:center;text-align:left;gap:12px;padding:3px 6px 9px 0}
  .ph .tx{display:flex;flex-direction:column;min-width:0}
  .ph[aria-expanded="true"]{background:linear-gradient(90deg,var(--teal-tint),rgba(226,240,243,0))}
  .ph[aria-expanded="true"]::after{display:none}
  .phase-detail{grid-template-columns:1fr;margin:2px 0 12px 0}
}
@media (min-width:901px){
  .ph .tx{display:flex;flex-direction:column;align-items:center;gap:2px}
}
@media (max-width:640px){
  .topbar-in{padding:10px 16px;gap:10px}
  .wordmark{height:22px}
  .who .nm{display:none}
  .cmark{width:32px;height:32px}
  .wrap{padding:18px 16px 32px}
  .hero{padding:22px 20px;flex-direction:column-reverse;align-items:flex-start;gap:16px}
  .hero h1{font-size:23px}
  .hero .clogo{width:230px;max-width:80%;padding:10px 14px}
  .card{padding:18px 16px}
  .card-h .progress{width:100%}
  .due{font-size:13.5px;padding:10px 12px}
  .sgrid{grid-template-columns:1fr;gap:8px}
  .scard{padding:12px}
  .scard .ti{width:40px;height:40px}
  .scard .ti svg{width:23px;height:23px}
  .drive-big{padding:16px}
  .drive-big b{font-size:15px}
  .namecard{padding:24px 20px 22px}
  .login-card{padding:24px 20px 22px}
  .code{gap:6px}
  .code input{font-size:20px}
  .privacy{padding:6px 16px 30px}
  /* the pop-up becomes a full-screen sheet: 17 px reading text, the step count above the title */
  body{font-size:17px}
  .due{font-size:15px}
  .ov{padding:0;align-items:stretch;background:var(--surface)}
  .pop{max-width:none;border-radius:0;max-height:none;height:100%;box-shadow:none;animation:none}
  .pop-hd{padding:10px 12px 12px 16px;gap:12px;flex-wrap:wrap;position:relative}
  .pop-hd .ti{width:42px;height:42px}
  .pop-hd .ti svg{width:24px;height:24px}
  .pop-hd .tt{padding-right:40px}
  .pop-hd h2{font-size:20px}
  .pop-step{order:-1;flex:0 0 100%;padding:2px 56px 0 0;margin-bottom:-4px}
  .pop-hd .x{position:absolute;top:8px;right:10px}
  .pop-read{padding:16px 16px 4px}
  .pop-ask{padding:4px 16px 16px}
  .ask,.nbox{padding:14px}
}

/* ===================== akoca staff only (step 6): public/staff.js =====================
   None of this applies to a client: the classes only appear in a staff session. */
.stools{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap}
.tbtn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:8px;font-size:12.5px;font-weight:600;padding:6px 11px;cursor:pointer;white-space:nowrap}
.tbtn:hover{background:rgba(255,255,255,.16)}
.sw{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px;font-size:12.5px;font-weight:600;padding:4px 11px 4px 5px;cursor:pointer}
.sw .knob{width:30px;height:18px;border-radius:999px;background:rgba(255,255,255,.25);position:relative;transition:.15s;flex:none}
.sw .knob::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s}
.sw[aria-checked="true"]{border-color:var(--coral);background:rgba(226,111,102,.15)}
.sw[aria-checked="true"] .knob{background:var(--coral)}
.sw[aria-checked="true"] .knob::after{left:14px}
.pv-strip{background:var(--amber-bg);border-bottom:1px solid var(--amber-line);color:var(--amber-ink);font-size:13px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:8px 16px;text-align:center}
.pv-strip .tbtn{background:var(--ink);border-color:var(--ink)}

/* edit mode: every piece of text is outlined faintly; template wording amber, this client's teal */
.editing [data-ed]{outline:1px dashed #A9D3DC;outline-offset:2px;border-radius:3px;cursor:text}
.editing [data-ed^="template."],.editing [data-ed^="settings.copy."],.editing [data-ed^="phase."]{outline-color:#E9CF86}
.editing [data-ed]:hover,.editing [data-ed]:focus-visible{outline:2px solid #6DB3C3;background:rgba(226,240,243,.45)}
.editing [data-ed^="template."]:hover,.editing [data-ed^="settings.copy."]:hover,.editing [data-ed^="phase."]:hover,
.editing [data-ed^="template."]:focus-visible,.editing [data-ed^="settings.copy."]:focus-visible,.editing [data-ed^="phase."]:focus-visible{outline-color:#E0B94F;background:rgba(255,244,214,.45)}
.editing .hero [data-ed]:hover{background:rgba(255,255,255,.1)}
.editing [data-ed]:empty::before{content:"Empty: click to write";color:var(--faint);font-style:italic;font-weight:400;font-size:13px}
.ed-pen{position:fixed;z-index:200;pointer-events:none;display:flex;align-items:center;gap:5px;background:#0E7489;color:#fff;border-radius:7px;padding:3px 7px;font-size:11px;font-weight:700;box-shadow:0 3px 10px rgba(14,29,48,.2)}
.ed-pen svg{width:13px;height:13px}
.ed-pen.tpl{background:#B7862A}
.ed-box{position:fixed;z-index:210;background:#fff;border:2px solid var(--teal);border-radius:10px;box-shadow:0 14px 40px rgba(14,29,48,.25);padding:8px;display:flex;flex-direction:column;gap:6px}
.ed-box.tpl{border-color:#D9A54A}
.ed-box textarea{width:100%;min-height:38px;resize:vertical;border:1px solid var(--border);border-radius:7px;padding:6px 8px;font-family:var(--sans);color:var(--ink);background:#fff;margin:0}
.ed-box textarea:focus{outline:none;border-color:var(--teal)}
.ed-box.saving textarea{opacity:.7}
.ed-fail{margin:0;font-size:12px;font-weight:600;color:var(--red)}
.ed-warn{margin:0;font-size:12px;line-height:1.4;color:var(--amber-ink);background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:7px;padding:6px 8px}
.ed-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#F6E4B5;color:#6B4E1E;border-radius:5px;padding:1px 6px;margin-right:4px}
.ed-ft{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.ed-ft .linkbtn{font-size:12px;padding:0}
/* template wording in a section: change it in every section, or just this one (template-exceptions-2026-10-09.md) */
.ed-pick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ed-pick .btn{font-size:13.5px;padding:8px 12px;min-height:40px;border-radius:8px;flex:1 1 auto}
.ed-pick .linkbtn{font-size:13px;flex:1 0 100%;text-align:left;min-height:32px}
.t-own{display:inline-block;vertical-align:middle;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#F6E4B5;color:#6B4E1E;border-radius:5px;padding:1px 6px;margin:0 6px;line-height:1.5;white-space:nowrap}
.over .t-own{margin-right:auto}
.cta+.t-own,.nbox>.t-own{margin:6px 0 0}
.ed-stamp{position:fixed;z-index:205;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--green-line);color:var(--green-ink);border-radius:9px;padding:5px 10px;font-size:12px;font-weight:600;box-shadow:var(--shadow)}
.ed-stamp .tk{width:15px;height:15px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;flex:none}
.ed-stamp .tk svg{width:9px;height:9px}
.ed-stamp .linkbtn{font-size:12px;padding:0}
.ed-stamp-fixed{left:50%;bottom:74px;transform:translateX(-50%)}

/* cards in edit mode */
.editing .sgrid>li{flex-direction:column;gap:6px}
.sgrid>li.dragging{opacity:.4}
.sgrid>li.dropto .scard{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-tint)}
.cctl{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.cb{display:inline-flex;align-items:center;gap:4px;height:30px;min-width:30px;justify-content:center;border:1px solid var(--border-mid);background:#fff;color:var(--ink-soft);border-radius:7px;font-size:12px;font-weight:600;padding:0 7px;cursor:pointer}
.cb svg{width:15px;height:15px}
.cb:hover:not([disabled]){border-color:var(--teal);color:var(--teal-dark)}
.cb[disabled]{opacity:.35;cursor:default}
.cb.on{background:var(--pink);border-color:var(--pink-border);color:var(--red)}
.cb.ci svg{width:18px;height:18px}
/* Visible to client: one switch per card, its state in words as well as the knob */
.vsw{display:inline-flex;align-items:center;gap:7px;height:30px;border:1px solid var(--border-mid);background:#fff;color:var(--ink-soft);border-radius:999px;font-size:12px;font-weight:600;padding:0 10px 0 5px;cursor:pointer}
.vsw .knob{width:30px;height:18px;border-radius:999px;background:#C9D2D8;position:relative;transition:.15s;flex:none}
.vsw .knob::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(14,29,48,.25)}
.vsw b{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.vsw[aria-checked="true"]{border-color:var(--green-line);background:#F1FAF4;color:var(--green-ink)}
.vsw[aria-checked="true"] .knob{background:var(--green)}
.vsw[aria-checked="true"] .knob::after{left:14px}
.vsw[aria-checked="true"] b{color:var(--green-ink)}
.vsw:hover{border-color:var(--teal)}
.ed-hint{margin:0;font-size:12px;line-height:1.4;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:6px 8px}
/* edit mode: the client's answers are read only for staff */
.editing .pop .choice[aria-disabled="true"],.editing .pop .confirm-btn[aria-disabled="true"]{cursor:default}
.editing .pop .choice[aria-disabled="true"]:hover{border-color:var(--border-mid)}
.editing .pop .choice.on[aria-disabled="true"]:hover{border-color:var(--teal)}
.editing .pop .confirm-btn[aria-disabled="true"]:hover{background:#fff}
.editing .pop .ask textarea[readonly],.editing .pop .fb textarea[readonly]{background:var(--surface-2);cursor:default}
.editing .pop .addrow input:disabled{background:var(--surface-2)}
.ipick{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:4px;background:#fff;border:1px solid var(--border);border-radius:9px;padding:6px;max-width:100%}
.ipk{height:38px;border:1px solid transparent;background:none;border-radius:7px;cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.ipk svg{width:22px;height:22px}
.ipk:hover{background:var(--surface-2)}
.ipk.on{border-color:var(--teal);background:var(--teal-tint)}
.add-row{width:100%;border:1.5px dashed var(--border-mid);background:none;border-radius:var(--r);padding:12px;color:var(--teal-dark);font-weight:600;font-size:13.5px;cursor:pointer}
.add-row:hover{background:var(--surface-2);border-color:var(--teal)}
.addsec-w{margin-top:14px}
.addsec{border:1px solid var(--border);border-radius:var(--r);padding:12px;background:var(--surface-2);display:flex;flex-direction:column;gap:8px}
.addsec .r{display:flex;gap:8px;flex-wrap:wrap}
.addsec input[type=text]{flex:1 1 220px;min-width:0;font-size:14px;padding:8px 11px;margin:0}
.addsec select,.qctl select,.afilt select{font:inherit;font-size:13px;border:1px solid var(--border-mid);border-radius:8px;padding:6px 8px;background:#fff;color:var(--ink)}
.addsec .qsub{margin:0}
.sbtn{padding:8px 14px;font-size:13px}

/* settings card */
.scard-settings summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:2px}
.scard-settings summary::-webkit-details-marker{display:none}
.scard-settings summary h2{display:flex;align-items:center;gap:10px;margin:0}
.scard-settings summary h2::after{content:"Show";margin-left:auto;font-size:12px;font-weight:600;color:var(--teal)}
.scard-settings details[open] summary h2::after{content:"Hide"}
.scard-settings .sub{color:var(--muted);font-size:13px}
.akonly{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--coral);border-radius:5px;padding:2px 7px}
.sh3{font-size:14px;margin:18px 0 8px}
.sgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin-top:14px}
.sf{display:flex;flex-direction:column;gap:4px;min-width:0}
.sf label{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.sf input,.sr-row input{font:inherit;font-size:13.5px;border:1px solid var(--border-mid);border-radius:8px;padding:7px 9px;min-width:0;width:100%;color:var(--ink);background:#fff;margin:0}
.sf .r{display:flex;gap:6px;flex-wrap:wrap}
.sf .r input{flex:1 1 130px}
.fstamp{min-height:16px;font-size:12px}
.fstamp .linkbtn{font-size:12px;padding:0}
.stages-ed{display:flex;flex-direction:column;gap:6px}
.sr-row{display:grid;grid-template-columns:24px minmax(0,1fr) 150px auto;gap:8px;align-items:center}
.sr-row .cur{display:grid;place-items:center}
.sr-row .cur input{width:auto}
.dtin{font:inherit;font-size:12.5px;border:1px solid var(--border-mid);border-radius:7px;padding:2px 5px;color:var(--ink);background:#fff;max-width:140px}
.editing ol.steps li{grid-template-columns:22px minmax(0,1fr) 140px 58px 78px}
.stdone{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;cursor:pointer}
.stdone input{width:auto;margin:0}
.sethere{font-size:11.5px;padding:0;white-space:nowrap}

/* inside a section, edit mode */
.qctl{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:0 0 8px;padding:6px 8px;background:#fff;border:1px dashed var(--border-mid);border-radius:8px}
.qlbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:auto}
.chctl{margin:8px 0 0;padding:8px;background:#fff;border:1px dashed var(--border-mid);border-radius:8px}
.chctl .addlbl{margin-top:0}
.chctl ol{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px}
.chctl li{display:flex;align-items:center;gap:4px}
.chctl .cn{flex:1;min-width:0;font-size:13px;overflow-wrap:anywhere}
.addq{margin:0 0 18px}

/* akoca's view: the Answers screen */
.answers{display:flex;flex-direction:column;gap:16px}
.ahead h1{margin:0 0 4px;font-size:24px;letter-spacing:-.015em;overflow-wrap:anywhere}
.ahead .sub{margin:0 0 10px;color:var(--muted)}
.asum{margin:0 0 6px;font-size:13.5px;color:var(--ink-soft)}
.afilt{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.afilt label{font-size:13px;font-weight:600}
.afilt input[type=search]{flex:1 1 220px;min-width:0;font:inherit;font-size:14px;border:1px solid var(--border-mid);border-radius:8px;padding:7px 10px;margin:0}
.alist{display:flex;flex-direction:column;gap:12px}
.asec-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.asec-h .ti{width:40px;height:40px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;flex:none}
.asec-h .ti svg{width:23px;height:23px}
.asec-h .tt{flex:1 1 200px;min-width:0}
.asec-h h2{margin:0;font-size:17px}
.asec-h .sub{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.chip{font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--amber-bg);color:var(--amber-ink);border:1px solid var(--amber-line);white-space:nowrap}
.chip.ok{background:var(--green-bg);color:var(--green-ink);border-color:var(--green-line)}
.chip.fb{background:var(--pink);color:var(--red);border-color:var(--pink-border)}
.chip.quiet{background:var(--surface-2);color:var(--muted);border-color:var(--border)}
.arow{padding:10px 0;border-top:1px solid var(--border)}
.aq{margin:0 0 3px;font-size:13px;font-weight:600;color:var(--ink-soft)}
.av{margin:0;font-size:14.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.av.none,.none{color:var(--faint);font-style:italic;font-size:13px}
.am{margin:2px 0 0;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.aprev{margin:6px 0 0;padding:0 0 0 12px;list-style:none;border-left:2px solid var(--border);font-size:12px;color:var(--faint)}
.aprev li{margin:2px 0;overflow-wrap:anywhere}
.aprev .pv{color:var(--muted)}
.aconf{margin:0;font-size:13.5px;display:flex;align-items:center;gap:6px;color:var(--muted)}
.aconf.yes{color:var(--green-ink);font-weight:600}
.aconf svg{width:14px;height:14px}
.aopen{margin:8px 0 0}
.aempty{color:var(--muted);text-align:center;padding:20px}

@media (max-width:900px){
  .is-staff .topbar-in{flex-wrap:wrap;row-gap:8px}
  .is-staff .stools{order:5;flex-basis:100%}
}
@media (max-width:640px){
  .sgrid2{grid-template-columns:1fr}
  .sr-row{grid-template-columns:24px minmax(0,1fr)}
  .sr-row input[type=date],.sr-row .fstamp{grid-column:2}
  .is-staff .who{order:2}
  /* edit mode steps: the name on its own line, the date, Done and Set as now beneath it */
  .editing ol.steps li{grid-template-columns:22px auto auto minmax(0,1fr);row-gap:4px}
  .editing ol.steps li>.sd{grid-row:1/span 2}
  .editing ol.steps li>span:nth-child(2){grid-column:2/-1}
  .editing ol.steps .sethere{justify-self:end}
  .editing ol.steps li{column-gap:8px}
  .editing ol.steps .dtin{max-width:122px;font-size:12px}
  .tbtn{padding:6px 9px;font-size:12px}
}

/* ===================== answers as a thread (09/10/2026, thread-and-drive-2026-10-09.md) ===================== */
/* "What's been said so far" and comments (09/10/2026, comments-2026-10-09.md): a white box only once
 * there is something in it; the newest two show, older ones fold; long words clamp to four lines */
.said{margin:6px 0 0}
.said.has{margin-top:12px;padding:10px 12px;background:#fff;border:1px solid var(--hair);border-radius:var(--r-sm)}
.said-h{font-size:14px;font-weight:700;color:var(--ink-soft);margin:0 0 6px}
.said-none{font-size:14px;color:var(--muted);margin:0}
.said-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.said-i{border-left:3px solid var(--blue-pale);padding:2px 0 2px 10px}
.said-m{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:0 0 2px;font-size:14px;color:var(--muted);min-height:32px;min-width:0}
.said-m b{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.said-m>span{white-space:nowrap}
.said-m b{flex:0 0 auto;max-width:60%}
.said-m .said-e{flex:1 1 0;overflow:hidden;text-overflow:ellipsis;min-width:0}
.said-edited{font-style:italic}
.ctools{margin-left:auto;display:flex;gap:2px;flex:none}
.cbtn{width:32px;height:32px;border-radius:7px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0}
.cbtn:hover{color:var(--ink);border-color:var(--border);background:var(--surface-2)}
.cbtn:focus-visible{outline:3px solid var(--step-now);outline-offset:1px}
.cbtn svg{width:16px;height:16px}
.said-t.clamp{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.said-more{font-size:14px;padding:2px 0;min-height:24px}
.said-fold{border-left:0;padding:0}
.said-fold>.fold{border-top:0}
.said-fold>.fold>summary{min-height:48px;padding:8px 0}
.said-fold .said-l{margin:2px 0 10px}
.cadd{min-height:44px;font-size:15px;padding:8px 0}
.cadd:focus-visible,.said-more:focus-visible{outline:3px solid var(--step-now);outline-offset:2px;border-radius:4px}
.cbox{margin-top:8px}
.cbox label{display:block;font-size:14px;font-weight:700;color:var(--ink-soft);margin:0 0 4px}
.cbox textarea{min-height:72px}
.cbtns{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:8px}
.cpost{padding:9px 20px;min-height:44px}
.cmsg{color:var(--red);font-size:14px;margin:6px 0 0}
.cdel{margin-top:8px;padding:10px 12px;border:1px solid var(--pink-border);background:var(--pink);border-radius:10px}
.cdel p{margin:0;font-size:15px;color:var(--ink)}
.cdanger{background:var(--red);color:#fff;border-color:var(--red);min-height:44px}
.cdanger:hover{background:#A92F2F;border-color:#A92F2F}
.cdel .btn-ghost{min-height:44px}
.listmore>summary{min-height:48px}
.listmore ul.listed{margin:2px 0 8px}
.said-ak{font-weight:400;color:var(--teal-dark)}
.said-e{font-size:14px}
.said-t{font-size:16px;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.stamp.wait{color:var(--amber-ink);align-items:flex-start}
.stamp.wait .tk{background:var(--amber-ink);margin-top:1px}
/* staff: a card's Drive folder buttons, and the folder list */
.drivectl{margin:0 0 16px;padding:10px 12px;background:#fff;border:1px dashed var(--border-mid);border-radius:8px}
.drivectl .addlbl{margin:4px 0 6px}
.dfl{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:4px}
.dfl label{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.dfl svg{width:16px;height:16px;color:var(--teal-dark);flex:none}
.dmiss{color:var(--muted)}
.dnew{display:flex;flex-wrap:wrap;gap:6px}
.dnew input{flex:1 1 220px;min-width:0;width:100%;font:inherit;font-size:13.5px;padding:7px 9px;margin:0;color:var(--ink);background:#fff;border:1.5px solid var(--border-strong);border-radius:var(--r-sm)}
.sf-fold{display:flex;flex-direction:column;min-width:0}
.sf-rm{align-self:flex-start;font-size:12px;padding:2px 0}
.nowthen{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-soft)}
/* the staff Answers screen: each question's comments, deleted ones greyed and marked (09/10/2026) */
.acomments{margin:8px 0 0;padding:8px 0 0 12px;border-left:3px solid var(--blue-pale)}
.acm-h{font-size:14px;font-weight:700;color:var(--ink-soft);margin:0 0 4px}
.acm-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.acm.gone .av{color:var(--muted);text-decoration:line-through}
.acm .adel{color:var(--red);font-weight:700}

/* comments first (09/10/2026, comments-first-2026-10-09.md): every question is a prompt with a reply box */
.suggest{margin:6px 0 4px;font-size:16px;color:var(--ink);line-height:1.5}
.suggest .sg-l{font-weight:700;color:var(--teal-dark);margin-right:2px}
.suggest .sg-dot{color:var(--muted)}
.suggest.plain .sg-l{color:var(--ink-soft)}
.opts{margin:0 0 4px;border-top:0}
.opts>summary{min-height:40px;padding:6px 0;font-size:15px}
.optl{margin:2px 0 8px;padding-left:20px;font-size:15px;color:var(--ink-soft)}
.optl li{margin:2px 0}
.cnew textarea{min-height:64px}
.chint{font-size:14px;color:var(--muted);margin:4px 0 0}
.ask .said{margin-top:8px}
/* akoca's sign-off (Elle's status flow) */
.signed{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:15px;font-weight:700;color:var(--green-ink);background:var(--green-bg);border:1px solid var(--green-line);border-radius:10px;padding:6px 12px}
.signed .tk{width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;flex:none}
.signed .tk svg{width:12px;height:12px}
.signed .linkbtn{color:var(--green-ink);text-decoration:underline;font-size:14px;min-height:32px}
.sobtn{min-height:44px;align-self:flex-start}
.soask{margin-top:0}
.st-chip.sochip{white-space:normal;text-align:left;border:0;padding:3px 11px;font-size:14px}
@media (min-width:900px){.pop-ft .signed,.pop-ft .sobtn,.pop-ft .soask{order:1}}
.cbox .btn:focus-visible,.cdel .btn:focus-visible,.sobtn:focus-visible,.signed .linkbtn:focus-visible{outline:3px solid var(--step-now);outline-offset:2px}

/* ---------- the Feedback tab (feedback/run-sheet.md step 5, 20/10/2026), from the signed-off mock-up
   feedback/mockups/portal.html. Everything is prefixed fb- (or sits under .fbtab) so nothing on the home
   page changes. The tab bar shows only on a portal with feedback switched on. ---------- */
.sf select{font:inherit;font-size:13.5px;border:1px solid var(--border-mid);border-radius:8px;padding:7px 9px;min-width:0;width:100%;color:var(--ink);background:#fff;margin:0}
.navtabs{max-width:1140px;margin:0 auto;padding:0 24px;display:flex;gap:6px;overflow-x:auto}
.navtabs a{color:#C9DCE3;text-decoration:none;font:600 14.5px var(--sans);padding:10px 14px 9px;border-bottom:3px solid transparent;white-space:nowrap}
.navtabs a:hover{color:#fff}
.navtabs a.on{color:#fff;border-bottom-color:var(--coral)}
.navtabs a:focus-visible{outline:3px solid var(--blue-pale);outline-offset:-3px;border-radius:6px}
.on-feedback #editSw{display:none}
.fbtab{display:grid;gap:16px}
.fbtab .btn-sm{padding:7px 12px;font-size:13.5px}
.fbtab .btn-primary{box-shadow:none}
.fbtab .btn-primary:hover{background:#1E3A5A;border-color:#1E3A5A}
.fbtab .btn-light{background:#fff;color:var(--ink);border-color:#fff}
.fbtab .btn-light:hover{background:var(--teal-tint)}
.fbtab .btn-ghostd{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.fbtab .btn-ghostd:hover{background:rgba(255,255,255,.12)}
.fbtab .btn{white-space:nowrap}
.fb-sp{flex:1}
.fb-sum{background:linear-gradient(158deg,#1E3A5A,#132539);color:#fff;border-radius:var(--r);padding:18px 22px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow)}
.fb-sum .t{flex:1;min-width:240px}
.fb-sum .eyebrow{color:var(--blue-pale);margin:0 0 4px}
.fb-sum h1{margin:0;font-size:21px;letter-spacing:-.01em;line-height:1.3}
.fb-prog{width:240px;max-width:100%;display:grid;gap:6px;font:600 14px var(--sans)}
.fb-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.fb-bar i{display:block;height:100%;background:var(--blue-pale);border-radius:99px}
.fb-sumb{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fb-rfin{display:flex;gap:8px;align-items:center;margin:0;font:600 14px var(--sans);color:#9FE0BF}
.fb-rfin svg{width:16px;height:16px;flex:none}
.fb-rask{display:grid;gap:8px;max-width:420px}
.fb-rask p{margin:0;font-size:14.5px}
.fb-rbtns{display:flex;gap:8px;flex-wrap:wrap}
.fb-qbox{background:#fff;border:1.5px solid var(--teal);border-radius:var(--r);padding:14px 18px;box-shadow:var(--shadow)}
.fb-qbox h2{margin:0 0 8px;font-size:16px;color:var(--teal-dark);display:flex;align-items:center;gap:8px}
.fb-qn{background:var(--teal);color:#fff;border-radius:99px;min-width:22px;height:22px;display:grid;place-items:center;font-size:12px;padding:0 6px}
.fb-qrow{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:var(--teal-tint);border:0;border-radius:10px;padding:10px 12px;margin-top:6px;font:inherit;color:var(--ink);cursor:pointer}
.fb-qrow:hover{background:#D3E8ED}
.fb-qrow span{flex:1;min-width:0;overflow-wrap:anywhere}
.fb-qrow small{display:block;color:var(--teal-dark);font:600 12.5px var(--sans)}
.fb-qrow b{font:600 13.5px var(--sans);color:var(--teal-dark);white-space:nowrap}
.fb-ptabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.fb-ptab{flex:none;display:flex;align-items:center;gap:8px;border:1.5px solid var(--border);background:#fff;border-radius:999px;padding:8px 14px;font:600 14px var(--sans);color:var(--ink-soft);cursor:pointer}
.fb-ptab:hover{border-color:var(--border-strong)}
.fb-ptab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fb-ptab .b{min-width:22px;height:22px;border-radius:99px;display:grid;place-items:center;font-size:12px;background:var(--pink);color:#8E3029;padding:0 6px}
.fb-ptab.on .b{background:#fff;color:var(--ink)}
.fb-ptab .ok{color:var(--green);font-size:15px}
.fb-ptab.on .ok{color:#9FE0BF}
.fb-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);min-width:0;overflow:hidden}
.fb-ph{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 20px;border-bottom:1px solid var(--border)}
.fb-ph h2{margin:0;font-size:19px}
.fb-state{font-size:14px;color:var(--muted)}
.fb-state.fin{color:var(--green-ink);font-weight:700}
.fb-bar2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--border);background:#FBFDFD}
.fb-hint{font-size:13.5px;color:var(--muted)}
.fb-seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px}
.fb-seg button{border:0;background:none;border-radius:8px;padding:6px 12px;font:600 13.5px var(--sans);color:var(--ink-soft);cursor:pointer}
.fb-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(21,42,67,.15)}
.fb-rows{list-style:none;margin:0;padding:0}
.fb-row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--surface-2);cursor:pointer;background:#fff}
.fb-row:hover{background:var(--surface-2)}
.fb-row:focus-visible{outline:3px solid var(--blue-pale);outline-offset:-3px}
.fb-num{width:26px;height:26px;border-radius:50% 50% 50% 4px;color:#fff;font:700 12px/26px var(--sans);text-align:center;flex:none}
.fb-txt{flex:1;min-width:0}
.fb-txt p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-txt small{color:var(--muted);font-size:13px}
.fb-ans{color:var(--teal-dark)}
.fbtab .pill,.fb-menu .pill,.fb-modal .pill{font:700 12px var(--sans);border-radius:999px;padding:4px 10px;border:1px solid;white-space:nowrap;flex:none;display:inline-block}
.s-prog{background:var(--amber-bg);color:var(--amber-ink);border-color:var(--amber-line)}
.s-done{background:var(--green-bg);color:var(--green-ink);border-color:var(--green-line)}
.s-q{background:var(--teal-tint);color:var(--teal-dark);border-color:var(--border-mid)}
.fbtab button.pill{cursor:pointer}
.fbtab button.pill::after{content:" \25BE";font-size:10px}
.fb-pinbtn{width:34px;height:34px;flex:none;border:1px solid var(--border);background:#fff;border-radius:8px;display:grid;place-items:center;color:var(--ink-soft);cursor:pointer;padding:0}
.fb-pinbtn:hover{background:var(--teal-tint);color:var(--ink)}
.fb-pinbtn svg{width:17px;height:17px}
.fb-chev{color:var(--muted);flex:none}
.fb-empty{padding:28px 20px;color:var(--muted);text-align:center}
.fb-empty p{margin:0 0 10px}
.fb-foot{padding:14px 20px;color:var(--muted);font-size:14px}
.fb-menu{position:absolute;z-index:60;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;width:min(300px,calc(100vw - 32px))}
.fb-menu button{display:flex;width:100%;align-items:center;gap:10px;border:0;background:none;padding:8px 10px;border-radius:8px;text-align:left;font:600 14px var(--sans);cursor:pointer;flex-wrap:wrap}
.fb-menu button:hover,.fb-menu button:focus-visible{background:var(--surface-2)}
.fb-menu button[aria-current]{background:var(--surface-2)}
.fb-menu small{font:400 12.5px var(--read);color:var(--muted);flex:1 1 140px}
.fb-modal{position:fixed;inset:0;z-index:80;background:rgba(10,20,32,.55);display:flex;justify-content:flex-end}
.fb-sheet{background:#fff;width:min(620px,100vw);height:100%;overflow:auto;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;outline:none;overscroll-behavior:contain}
.fb-sh{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);padding:12px 18px;display:flex;align-items:center;gap:10px;z-index:2}
.fb-sh h3{margin:0;font-size:16px;flex:1;min-width:0}
.fb-sb{padding:18px;display:grid;gap:18px}
.fb-sb>div{min-width:0}
.fb-label{font:700 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--coral-text);margin:0 0 8px}
.fb-status{display:flex;flex-wrap:wrap;gap:6px}
.fb-status button{border:1.5px solid var(--border);background:#fff;border-radius:99px;padding:6px 12px;font:600 13px var(--sans);color:var(--ink-soft);cursor:pointer}
.fb-status button.on{border-color:var(--ink);background:var(--ink);color:#fff}
.fb-sees{margin:6px 0 0;font-size:13px;color:var(--muted)}
.fb-cb .fb-sees{flex-basis:100%;margin:0;order:1}
.fb-pinline{margin:6px 0 0}
.fb-pinline .linkbtn{display:inline-flex;gap:6px;align-items:center}
.fb-pinline svg{width:16px;height:16px}
.fb-shots{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;margin-top:4px}
.fb-zoom{border:0;padding:0;background:none;cursor:zoom-in;border-radius:8px}
.fb-zoom img{width:150px;height:96px;object-fit:cover;object-position:center;border-radius:8px;border:1px solid var(--border);display:block;background:var(--surface-2)}
.fb-file{font-size:14px;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;display:inline-flex;gap:6px;align-items:center;max-width:100%;overflow-wrap:anywhere;text-decoration:none}
a.fb-file:hover{background:var(--teal-tint)}
.fb-file svg{width:15px;height:15px;flex:none}
.fb-thread{display:grid;gap:12px}
.fb-msg{display:flex;gap:10px;align-items:flex-start}
.fb-msg .avatar{width:30px;height:30px;font-size:12px}
.fb-msg .av-ak{background:var(--ink)}
.fb-bubble{flex:1;min-width:0;background:var(--surface-2);border-radius:4px 12px 12px 12px;padding:10px 12px}
.fb-msg.ak .fb-bubble{background:var(--teal-tint)}
.fb-msg.int .fb-bubble{background:var(--band);border:1px dashed #BCC5CE}
.fb-meta{font:600 13px var(--sans);display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.fb-meta span{font:400 12.5px var(--read);color:var(--muted)}
.fb-meta .fb-tag{font:600 11.5px var(--sans);color:var(--teal-dark);background:#fff;border-radius:99px;padding:1px 8px}
.fb-bubble p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.fb-quick{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fb-or{color:var(--muted);font-size:13.5px}
.fb-composer{border:1.5px solid var(--border-strong);border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .15s}
/* 6h: the reply box stays at the foot of the conversation while it scrolls; feedback switched off says so at the top; who
   else is writing shows under the conversation, the brand's three squares one after another */
.fb-sheet .fb-composer{position:sticky;bottom:12px;z-index:2;box-shadow:0 -8px 24px rgba(255,255,255,.95)}
.fb-closed{margin:0 0 16px;padding:12px 16px;border-radius:12px;background:#F4C9C3;color:var(--ink);font-size:15px}
.fb-typing{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.fb-dots{display:inline-flex;gap:3px}.fb-dots i{width:8px;height:8px;border-radius:2px;background:#C93939;animation:fbdots 1.2s infinite ease-in-out}
.fb-dots i:nth-child(2){background:#E26F66;animation-delay:.2s}.fb-dots i:nth-child(3){background:#E8A397;animation-delay:.4s}
@keyframes fbdots{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-3px);opacity:1}}
@media (prefers-reduced-motion:reduce){.fb-dots i{animation:none}}
.fb-composer:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(145,202,212,.55)}
.fb-composer.is-int{background:var(--band);border-style:dashed}
.fb-composer textarea{display:block;width:100%;min-height:76px;border:0;border-radius:12px 12px 0 0;padding:10px 12px;font:16px/1.45 var(--read);color:var(--ink);resize:vertical;background:transparent;margin:0}
.fb-composer textarea:focus{outline:none}
.fb-cb{display:flex;align-items:center;gap:10px;padding:8px 10px;border-top:1px solid var(--surface-2);flex-wrap:wrap}
.fb-err{margin:0;padding:8px 12px;font-size:13.5px;color:#8E3029;background:var(--pink);border-top:1px solid var(--pink-border)}
.fb-toggle{display:flex;align-items:center;gap:8px;font:600 13px var(--sans);color:var(--ink-soft)}
.fb-toggle input{width:18px;height:18px;accent-color:var(--ink);margin:0}
/* the two choice buttons' words, staff only, under "Give them a choice" (6g, rehearsal 3 E2) */
.fb-labels{flex-basis:100%;order:1;display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.fb-labels label{display:flex;flex-direction:column;gap:4px;font:600 12.5px var(--sans);color:var(--ink-soft)}
.fb-labels input{font:15px var(--read);padding:8px 10px;border:1.5px solid var(--border-strong);border-radius:9px;min-width:0}
.fb-labels .fb-sees{grid-column:1/-1;margin:0}
@media (max-width:600px){.fb-labels{grid-template-columns:1fr}}
.fb-lightbox{position:fixed;inset:0;z-index:95;background:rgba(10,20,32,.8);display:grid;place-items:center;padding:16px;cursor:zoom-out;outline:none}
.fb-lightbox img{max-width:min(1100px,100%);max-height:calc(100vh - 136px);max-height:calc(100dvh - 136px);object-fit:contain;border-radius:10px;display:block;background:#fff}
.fb-lbx{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:10px;border:0;background:rgba(255,255,255,.9);display:grid;place-items:center;cursor:pointer}
.fb-lbx svg{width:18px;height:18px}
@media (max-width:640px){
  .navtabs{padding:0 16px}
  .fb-sum{padding:16px}
  .fb-sum .t{min-width:0;flex-basis:100%}
  .fb-prog{width:100%}
  .fb-row{padding:12px 14px;flex-wrap:wrap}
  .fb-row .fb-txt{flex-basis:calc(100% - 64px)}
  .fb-row .pill{margin-left:38px}
  .fb-row .fb-chev{margin-left:auto}
  .fb-ph,.fb-bar2{padding-left:14px;padding-right:14px}
  .fb-ph .btn{white-space:normal;text-align:left}
  .fb-sb{padding:14px}
  .fb-sh{padding:10px 14px}
}

/* ---------- the Feedback tab, step 6c (20/10/2026: Jordan's 6b answers and the copy pass). Brand-led status colours:
   navy for "with us", coral for "your input" (6b answer 5); the "Needs your input" filter in the brand's soft light
   red (6b answer 8); the conversation as chat bubbles (6b answer 10); revision rounds as a step line (6b answer 3). */
.s-with{background:#E6EEF7;color:#1E3A5A;border-color:#BFD3E6}
.s-q{background:#FCEEEC;color:#8E3029;border-color:#F5D9D4}
.fbtab .pill .ps,.fb-modal .pill .ps,.fb-seg .ps{display:none}
.fb-qbox{border-color:#C93939}
.fb-qbox h2{color:#8E3029}
.fb-qn{background:#C93939}
.fb-qx{margin:0 0 4px;font-size:14px;color:var(--ink-soft)}
.fb-qrow{background:#FCEEEC;border:1px solid #F5D9D4;margin-top:10px}
.fb-qrow:hover{background:#F9E1DD}
.fb-qrow small,.fb-qrow b{color:#8E3029}
.fb-qrow .fb-num{flex:none;border-radius:99px;width:auto;min-width:26px;padding:0 6px}
.fb-seg .fb-fin{color:#8E3029;background:#FCEEEC}
.fb-seg .fb-fin.on{background:#C93939;color:#fff;box-shadow:none}
.fb-num{width:auto;min-width:26px;padding:0 4px}
.fb-stepw{padding:12px 20px;border-bottom:1px solid var(--border)}
.fb-steps{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.fb-steps li{flex:1;min-width:0;border-top:4px solid var(--border);padding-top:6px}
.fb-steps li b{display:block;font:600 13px var(--sans);color:var(--muted)}
.fb-steps li small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.fb-steps li.done{border-color:var(--green)}.fb-steps li.done b{color:var(--green-ink)}
.fb-steps li.now{border-color:#C93939}.fb-steps li.now b{color:var(--ink)}
.fb-steps li.later{opacity:.7}
.fb-steps .ss{display:none}
.fb-first{padding:22px}
.fb-first h2{margin:0 0 14px;font-size:20px}
.fb-steps3{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fb-steps3 li{display:flex;gap:12px;align-items:flex-start}
.fb-steps3 li span{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font:700 14px var(--sans);background:#C93939}
.fb-steps3 li:nth-child(2) span{background:#E26F66}.fb-steps3 li:nth-child(3) span{background:#24476B}
.fb-steps3 p{margin:4px 0 0}
.fb-msg{max-width:88%}
.fb-msg.me{align-self:flex-end;margin-left:auto}
/* 6j (rehearsal 6 B3): the client's bubbles blue and akoca's the brand's very light red with a pale pink edge, in both
   views; .me is the reader's side (the right), so the two sides alternate for the client and for us */
.fb-msg .fb-bubble{background:#E6EEF7;border:1px solid #BFD3E6}
.fb-msg.me .fb-bubble{border-radius:12px 12px 4px 12px}
.fb-msg.ak .fb-bubble{background:#FCEEEC;border:1px solid #F4C9C3}
.fb-msg.ak .fb-meta{color:var(--ink)} /* "Comment by akoca" in navy (rehearsal 7 A2) */
.fb-msg.int .fb-bubble{background:var(--band);border:1px dashed #BCC5CE}.fb-msg.int .fb-meta{color:inherit}
.fb-msg.orig{max-width:100%}
.fb-msg.orig .fb-bubble{background:#fff;border:1.5px solid var(--ink);border-radius:12px}
.fb-orig{margin:0 0 4px!important;font:700 11px var(--sans)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-text)}
.fb-thread{display:flex;flex-direction:column}
.fb-wtabs{display:flex;border-bottom:1px solid var(--surface-2)}
.fb-wtabs button{flex:1;border:0;background:none;padding:10px 12px;font:600 13.5px var(--sans);color:var(--muted);cursor:pointer;border-bottom:3px solid transparent}
.fb-wtabs button.on{color:var(--ink);border-bottom-color:var(--coral)}
.fb-clabel{display:block;padding:10px 12px 0;font:600 13px var(--sans);color:var(--ink-soft)}
.fb-set{background:var(--surface);border:1.5px dashed var(--border-strong);border-radius:var(--r);padding:14px 18px}
.fb-set h2{margin:0 0 10px;font-size:16px;display:flex;gap:8px;align-items:center}
/* 6e (Jordan's rehearsal 2, B1): one grid of two columns. Each field is three rows (label, control, note) on the grid's
   own rows (subgrid), so labels, controls and notes sit on the same lines across the columns; every control is 40 px */
.fb-setg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:4px}
.fb-set .sf{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-items:start;min-width:0;margin-bottom:10px}
.fb-set label{font:600 13px var(--sans);align-self:end}
.fb-set small{color:var(--muted);font-size:12.5px;line-height:1.4}
.fb-set input,.fb-set select{font:inherit;font-size:14px;color:var(--ink);background-color:#fff;border:1px solid var(--border-strong);border-radius:8px;height:40px;padding:0 10px;min-width:0;width:100%;margin:0}
/* the dropdown's arrow drawn by us, 12 px in from the edge, with room for it (6e, rehearsal 2 F3) */
.fb-set select{-webkit-appearance:none;appearance:none;padding-right:38px;cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23152A43' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.fb-set select:disabled{color:var(--muted);cursor:default;background-color:var(--surface-2)}
.fb-set .btn-sm{height:40px;padding-top:0;padding-bottom:0;flex:none}
.fb-inl{display:flex;gap:6px;min-width:0}
.fb-inl input,.fb-inl select{flex:1}
/* opening a revision round: the brand's deep blue, apart from the navy ink (6e, Jordan's rehearsal 2 F3) */
.btn-round{background:#066980;color:#fff;border-color:#066980}
.btn-round:hover{background:#04505F;border-color:#04505F}
.btn-round[disabled]{opacity:.5;cursor:default}
/* staff: the confirm before a third or later revision round (6d): may be chargeable */
.fb-extra{margin:10px 18px 0;background:#FFF7EC;border:1px solid #F3DFBF;border-left:4px solid var(--coral);border-radius:10px;padding:10px 14px;color:#33475C}
.fb-extra p{margin:0 0 8px}.fb-extra b{color:#152A43}
.fb-extra .fb-inl{flex-wrap:wrap}
@media (max-width:640px){
  .fbtab .pill .pl,.fb-modal .pill .pl,.fb-seg .pl{display:none}
  .fbtab .pill .ps,.fb-modal .pill .ps,.fb-seg .ps{display:inline}
  .fb-steps .sl{display:none}.fb-steps .ss{display:inline}
  .fb-stepw{padding:10px 14px}
  .fb-seg{flex-wrap:wrap}
  .fb-inl{flex-wrap:wrap}
  .fb-setg{grid-template-columns:minmax(0,1fr)}
  .fb-set .fb-inl{flex-wrap:nowrap}
}
/* Step 6f (Jordan's decision page, rehearsal 2). The client's banner: the eyebrow and the revision-round line only (3: A) */
.fb-sum.slim{padding:14px 22px;gap:10px 18px}
.fb-sum.slim .t{flex:1 1 auto;min-width:0}
.fb-sum.slim .eyebrow{margin:0}
.fb-none p{margin:0 0 14px;color:var(--ink-soft)}
/* the shared folder, read from the Your project tab's Drive link: shown, not typed (B1) */
.fb-set .lbl{font:600 13px var(--sans);align-self:end}
.fb-ro{display:flex;align-items:center;height:40px;padding:0 10px;border:1px dashed var(--border-strong);border-radius:8px;font-size:14px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted)}
.fb-ro a{color:var(--ink);overflow:hidden;text-overflow:ellipsis}
/* "Internal note", with "akoca only, not visible to the client" beside it (D1) */
.fb-wtabs .fb-wnote{align-self:center;flex:none;padding:0 10px;font-size:12px;color:var(--muted)}
@media (max-width:640px){.fb-sum.slim{padding:12px 16px}.fb-wtabs{flex-wrap:wrap}.fb-wtabs .fb-wnote{flex-basis:100%;padding:4px 12px 8px}}