@import url("/static/plex.css");
/* The redesigned desk (plan 019, "The redesign"), from the approved mockups of 20 October 2026
   (research/ui/02_desk_mockups.html). IBM Plex is served by the desk
   (static/fonts). No inline style anywhere: sizes to scale are SVG attributes. */
:root {
  --paper: #f3f6f5; --sheet: #ffffff; --sunk: #eaf0ee; --ink: #13232a; --ink-2: #4b5c63;
  --ink-3: #6f8086; --line: #d6e0de; --teal: #0d6a66; --teal-soft: #e0efec; --decided: #1c7a4c;
  --decided-soft: #e2f2e9; --open: #8f5506; --open-soft: #fbf0dc; --fact: #4f6170;
  --fact-soft: #e9eef2; --bad: #a3271c; --bad-soft: #fbe6e3; --mark: #ffe17a; --mark-ink: #13232a;
  --bar-a: #0d6a66; --bar-b: #3d8f8a; --bar-c: #7cb8b1; --bar-d: #b9d9d4;
  --font-ui: "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-display: "IBM Plex Sans Condensed","Avenir Next Condensed","Arial Narrow",-apple-system,"Helvetica Neue",sans-serif;
  --font-source: "IBM Plex Serif",Georgia,"Times New Roman",serif;
  --font-mono: "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) {
    --paper: #0e1618; --sheet: #142024; --sunk: #0b1214; --ink: #e4eeee; --ink-2: #a2b4b7;
    --ink-3: #82959a; --line: #26373b; --teal: #5bbcb2; --teal-soft: #11302e; --decided: #52c690;
    --decided-soft: #10291d; --open: #e8a64a; --open-soft: #33240c; --fact: #a5b7c6; --fact-soft: #1a2730;
    --bad: #f08a7e; --bad-soft: #3a1714; --mark: #7a6514; --mark-ink: #fff8d8;
    --bar-a: #5bbcb2; --bar-b: #3f938b; --bar-c: #2c6d67; --bar-d: #1d4a46; color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper: #0e1618; --sheet: #142024; --sunk: #0b1214; --ink: #e4eeee; --ink-2: #a2b4b7;
  --ink-3: #82959a; --line: #26373b; --teal: #5bbcb2; --teal-soft: #11302e; --decided: #52c690;
  --decided-soft: #10291d; --open: #e8a64a; --open-soft: #33240c; --fact: #a5b7c6; --fact-soft: #1a2730;
  --bad: #f08a7e; --bad-soft: #3a1714; --mark: #7a6514; --mark-ink: #fff8d8;
  --bar-a: #5bbcb2; --bar-b: #3f938b; --bar-c: #2c6d67; --bar-d: #1d4a46; color-scheme: dark;
}
*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body.d2{ margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 15px; line-height: 1.5; }
.d2:not(.legacy) h1,.d2:not(.legacy) h2,.d2:not(.legacy) h3{ text-wrap: balance; margin: 0; }
.d2:not(.legacy) p{ margin: 0; }
.d2 a{ color: var(--teal); }
.wrap{ max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
body:not(.legacy) .mono{ font-family: var(--font-mono); }
.tnum{ font-variant-numeric: tabular-nums; }
.vh{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; left: 0; top: 0; }
.skip{ position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--sheet); padding: 6px 10px; border-radius: 6px; z-index: 20; }
.skip:focus{ left: 8px; }
:focus-visible{ outline: 2px solid var(--teal); outline-offset: 2px; }

/* The top bar and the menu */
.top2{ background: var(--sunk); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.top2-in{ display: flex; align-items: center; gap: 14px; min-height: 52px; flex-wrap: wrap; padding-block: 6px; }
.brand{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink) !important; text-decoration: none; letter-spacing: 0.01em; }
.brand img{ display: block; }
.crumbs{ display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; font-size: 13px; color: var(--ink-2); }
.crumbs a{ color: var(--ink-2); text-decoration: none; }
.crumbs a:hover{ color: var(--ink); text-decoration: underline; }
.crumbs i{ font-style: normal; color: var(--ink-3); }
.who{ margin-left: auto; font-size: 12.5px; color: var(--ink-2); }
.tools{ display: flex; gap: 8px; align-items: center; margin-left: auto; }
.who + .tools{ margin-left: 0; }
.menu{ position: relative; }
.theme{ display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--sheet); }
.theme button{ font: inherit; font-size: 12px; color: var(--ink-2); background: transparent; border: 0; padding: 4px 9px; cursor: pointer; }
.theme button[aria-pressed="true"]{ background: var(--ink); color: var(--sheet); }
.brand picture,.brand img{ display: block; height: 26px; width: auto; }
.menu summary{ list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; background: var(--sheet); }
.menu summary::-webkit-details-marker{ display: none; }
.menu nav{ position: absolute; right: 0; top: calc(100% + 6px); background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: grid; min-width: 230px; box-shadow: 0 18px 40px -24px rgba(10, 30, 35, 0.45); }
.menu nav a{ padding: 7px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14px; }
.menu nav a:hover{ background: var(--sunk); }
.vmenu summary{ font-weight: 500; }
.vmenu nav{ left: 0; right: auto; min-width: 300px; }
.vmenu nav a{ display: grid; gap: 2px; }
.vmenu nav a small{ color: var(--ink-2); font-size: 12px; }
.vmenu nav a[aria-current="page"]{ background: var(--sunk); }
.vmenu nav a.cmp{ border-top: 1px solid var(--line); margin-top: 4px; padding-top: 9px; font-weight: 600; }
.actions.newer{ margin: -6px 0 14px; }
.band{ background: var(--open-soft); color: var(--open); font-size: 13px; text-align: center; padding: 6px 16px; }
.main2{ padding-block: 22px 56px; display: grid; gap: 18px; }
.main2:focus{ outline: none; }

/* Atoms */
.head2{ display: grid; gap: 8px; padding-top: 6px; }
.eyebrow{ font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.head2 h1,.runtop h1{ font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 4vw, 38px); line-height: 1.08; letter-spacing: -0.01em; }
.lede{ color: var(--ink-2); max-width: 68ch; font-size: 16px; }
.private{ font-size: 12.5px; color: var(--ink-3); }
body:not(.legacy) .label{ font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.chip{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; border-radius: 999px; padding: 2px 10px; border: 1px solid transparent; white-space: nowrap; width: fit-content; }
.chip::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.decided{ color: var(--decided); background: var(--decided-soft); }
body:not(.legacy) .chip.open{ color: var(--open); background: var(--open-soft); }
.chip.fact{ color: var(--fact); background: var(--fact-soft); }
.chip.plain{ color: var(--ink-2); border-color: var(--line); }
.chip.plain::before{ display: none; }
.rcpt{ position: relative; display: inline-block; font-family: var(--font-mono); font-size: 11.5px; color: var(--teal); background: var(--teal-soft); border: 1px solid transparent; border-radius: 4px; padding: 1px 7px; cursor: pointer; white-space: nowrap; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.rcpt:hover,.rcpt[aria-current]{ border-color: var(--teal); }
.rcpt[aria-current]{ background: var(--teal); color: var(--sheet); }
.rcpt::before{ content: "§ "; opacity: 0.6; }
body:not(.legacy) .rcpt.ok::after{ content: " ✓"; }
body:not(.legacy) .rcpt.bad{ color: var(--bad); background: var(--bad-soft); }
.rcpt.plain{ color: var(--ink-3); background: var(--sunk); cursor: default; }
body:not(.legacy) .btn{ display: inline-block; font: inherit; font-weight: 600; font-size: 14px; border-radius: 8px; padding: 9px 16px; cursor: pointer; border: 1px solid var(--ink); background: var(--ink); color: var(--sheet) !important; text-decoration: none; }
body:not(.legacy) .btn.ghost{ background: transparent; color: var(--ink) !important; border-color: var(--line); }
body:not(.legacy) .btn:hover{ filter: brightness(1.08); }
.panel{ background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: grid; gap: 12px; min-width: 0; align-content: start; }
.row2{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.row2.wide-left{ grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.row2.wide-right{ grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); }
@media (max-width: 820px) { .row2,.row2.wide-left,.row2.wide-right{ grid-template-columns: minmax(0, 1fr); } }
.stack-col{ display: grid; gap: 14px; min-width: 0; align-content: start; }
.row-between{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
body:not(.legacy) .actions{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
body:not(.legacy) .actions small{ color: var(--ink-3); }
body:not(.legacy) .notice{ border-radius: 8px; padding: 10px 14px; font-size: 14px; background: var(--fact-soft); color: var(--ink); border-left: 4px solid var(--fact); }
body:not(.legacy) .notice.bad{ background: var(--bad-soft); border-left-color: var(--bad); }
body:not(.legacy) .notice.info{ background: var(--teal-soft); border-left-color: var(--teal); }
.more summary{ cursor: pointer; font-size: 13px; color: var(--ink-2); }
.more[open] summary{ margin-bottom: 8px; }
.more ul{ margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-2); font-size: 13.5px; }

/* Forms */
.fld{ display: grid; gap: 4px; }
.fld label{ font-size: 13px; font-weight: 600; }
body:not(.legacy) .fld .hint{ font-size: 12.5px; color: var(--ink-3); }
.check-note{ display: block; font-size: 12.5px; color: var(--bad); }
.paid-row{ white-space: nowrap; }
/* The blind review (plan 047) */
.big-line{ font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 4px 0 0; letter-spacing: .01em; }
.blind-bar{ list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 0 0 10px; counter-reset: step; }
.blind-bar li{ border-top: 4px solid var(--line); padding-top: 6px; font-size: 13px; color: var(--ink-3); }
.blind-bar li.done{ border-top-color: var(--teal); color: var(--ink-2); }
.blind-bar li.now{ border-top-color: var(--teal); color: var(--ink); font-weight: 600; }
@media (max-width: 640px){ .blind-bar{ grid-template-columns: minmax(0, 1fr); } }
.blind-steps{ margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.blind-steps time{ color: var(--ink-3); font-size: 12.5px; margin-right: 6px; }
.verdict-card h2{ font-family: var(--font-display); font-size: 30px; margin: 4px 0 10px; }
.verdict-card{ border-left: 6px solid var(--teal); }
.verdict-card.verdict-right-file{ border-left-color: var(--decided); }
.verdict-card.verdict-right-filed{ border-left-color: var(--open); }
.verdict-card .reveal-line{ color: var(--ink-3); margin-top: 8px; }
.sides{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
@media (max-width: 760px){ .sides{ grid-template-columns: minmax(0, 1fr); } }
.side{ border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--sheet); min-width: 0; }
.side-right{ border-color: var(--decided); background: var(--decided-soft); }
.side-wrong{ border-color: var(--bad); background: var(--bad-soft); }
.side-head{ display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.side-why{ font-size: 14px; margin: 8px 0 0; }
.badge{ font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.badge-right{ background: var(--decided); color: var(--sheet); }
.badge-wrong{ background: var(--bad); color: var(--sheet); }
.badge-open{ background: var(--fact-soft); color: var(--ink); }
.tariff-rows{ list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 3px; font-size: 13.5px; color: var(--ink-2); }
.tariff-rows li.parts-here{ background: var(--fact-soft); border-left: 3px solid var(--fact); padding: 2px 6px; color: var(--ink); font-weight: 600; }
.glance{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; margin-top: 8px; }
.glance-item{ border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--sheet); min-width: 0; }
.glance-item.glance-differs{ border-left-color: var(--bad); }
.glance-item.glance-same{ border-left-color: var(--decided); }
.glance-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.glance-pair small{ display: block; color: var(--ink-3); font-size: 12px; }
.glance-pair b{ font-size: 15px; white-space: nowrap; }
.glance-money{ font-family: var(--font-display); font-size: 24px; font-weight: 600; margin: 6px 0 2px; }
.d2:not(.legacy) input:not([type="checkbox"]):not([type="file"]),.d2:not(.legacy) textarea,.d2:not(.legacy) select{ font: inherit; font-size: 15px; color: var(--ink); background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; width: 100%; min-width: 0; }
.d2:not(.legacy) textarea{ resize: vertical; }
.d2:not(.legacy) input:focus,.d2:not(.legacy) textarea:focus,.d2:not(.legacy) select:focus{ border-color: var(--teal); }
.title-in{ font-family: var(--font-display) !important; font-size: 22px !important; font-weight: 600; }

/* 1 New file */
.drop{ border: 2px dashed var(--teal); border-radius: 10px; background: var(--teal-soft); padding: 22px; display: grid; gap: 6px; cursor: pointer; }
.drop b{ font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.drop span{ color: var(--ink-2); font-size: 14px; }
.drop .pick{ justify-self: start; margin-top: 6px; font-weight: 600; color: var(--teal); border: 1px solid var(--teal); border-radius: 999px; padding: 3px 12px; font-size: 13px; }
.drop.over{ background: var(--decided-soft); border-color: var(--decided); }
.file-in{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-in:focus-visible + .inputs,.dropform:focus-within .drop{ outline: 2px solid var(--teal); outline-offset: 2px; }
.inputs{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.input{ display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--sheet); }
.ftype{ font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; text-align: center; border-radius: 4px; padding: 6px 0; background: var(--sunk); color: var(--ink-2); overflow: hidden; }
.input .nm{ font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
.k{ color: var(--ink-3); font-size: 12.5px; }
body:not(.legacy) .ok{ color: var(--decided); font-size: 12.5px; font-weight: 600; }
.filelist{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.filelist li{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.filelist li:last-child{ border-bottom: 0; }
.filelist a{ display: grid; text-decoration: none; color: var(--ink); min-width: 0; }
.filelist a b{ font-weight: 600; overflow-wrap: anywhere; }
.filelist a span{ font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.facts{ width: 100%; border-collapse: collapse; font-size: 14px; }
.facts td{ padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts td:first-child{ color: var(--ink-3); width: 26%; padding-right: 10px; font-size: 13px; padding-top: 14px; }
.facts td:last-child{ text-align: right; padding-left: 8px; width: 210px; }
.facts .rcpt{ max-width: 200px; }
.facts td input{ padding: 6px 8px !important; font-size: 14px !important; }
.qr{ display: inline-block; text-align: left; max-width: 100%; }
.qr summary{ list-style: none; }
.qr summary::-webkit-details-marker{ display: none; }
.qr blockquote{ margin: 6px 0 0; font-family: var(--font-source); font-size: 13px; color: var(--ink-2); background: var(--sunk); border-radius: 6px; padding: 8px 10px; }
.qr blockquote small{ display: block; font-family: var(--font-ui); color: var(--ink-3); margin-top: 4px; }
.keep{ display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.ask ul,.conflicts ul{ margin: 6px 0 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.ask li{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 8px 10px; border-radius: 6px; background: var(--fact-soft); }
.ask .why,.group .why{ display: block; font-size: 12.5px; color: var(--fact); }
.conflicts li{ padding: 8px 10px; border-radius: 6px; background: var(--open-soft); color: var(--open); font-size: 13.5px; }

/* 2 The engine at work */
.runtop{ display: grid; gap: 10px; }
body:not(.legacy) .sub{ color: var(--ink-2); font-size: 14px; }
.bar{ height: 12px; background: var(--sunk); border-radius: 999px; overflow: hidden; position: relative; border: 1px solid var(--line); }
.bar svg{ display: block; width: 100%; height: 100%; }
.bar .fill{ fill: var(--bar-a); }
.bar.indeterminate i{ position: absolute; inset: 0 auto 0 0; width: 35%; background: linear-gradient(90deg, var(--bar-a), var(--bar-b)); border-radius: 999px; animation: slide 1.6s ease-in-out infinite; }
@keyframes slide { from{ transform: translateX(-100%); } to{ transform: translateX(300%); } }
.stages{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; font-size: 12px; color: var(--ink-3); }
.stages li{ border-top: 3px solid var(--line); padding-top: 6px; }
body:not(.legacy) .stages .done{ border-color: var(--teal); color: var(--ink-2); }
.stages .now{ border-color: var(--open); color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .stages{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.six{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .six{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body:not(.legacy) .q{ background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: grid; gap: 6px; min-width: 0; align-content: start; }
body:not(.legacy) .q .t{ font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
body:not(.legacy) .q .v{ font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.q .qh{ display: block; font-size: 12.5px; margin-top: 4px; overflow-wrap: anywhere; }
.q .qtop{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.q .qo{ display: block; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.q details.qh{ margin-top: 2px; }
.q details.qh summary{ cursor: pointer; color: var(--teal); list-style: none; font-size: 12.5px; }
.q details.qh summary::-webkit-details-marker{ display: none; }
.q details.qh summary::before{ content: "+ "; }
.q details.qh[open] summary::before{ content: "− "; }
.q details.qh ul{ margin: 4px 0 0; padding-left: 16px; color: var(--ink-2); }
body:not(.legacy) .q.working{ border-color: var(--open); background: var(--open-soft); }
body:not(.legacy) .q.donebox{ border-color: var(--decided); }
.counters{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .counters{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.counter{ background: var(--sunk); border-radius: 8px; padding: 10px 12px; }
.counter b{ font-family: var(--font-display); font-size: 28px; font-weight: 600; display: block; line-height: 1.1; }
.counter span{ font-size: 12.5px; color: var(--ink-2); }
.reading{ display: grid; gap: 8px; }
.doc{ display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; background: var(--sheet); }
.doc.live{ border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
body:not(.legacy) .doc .tag{ font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal); }
.doc .tt{ font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.doc .where{ font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
body:not(.legacy) .feed{ list-style: none; margin: 0; padding: 0; display: grid; max-height: 520px; overflow-y: auto; }
body:not(.legacy) .feed li{ display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
body:not(.legacy) .feed li span{ overflow-wrap: anywhere; }
body:not(.legacy) .feed time{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding-top: 2px; }
body:not(.legacy) .feed li.now span{ color: var(--teal); font-weight: 500; }
body:not(.legacy) .feed li.now span::after{ content: " ▍"; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50%{ opacity: 0; } }

/* The file's tabs */
.tabs2{ display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); padding-bottom: 8px; scrollbar-width: thin; }
.tabs2 a{ font-weight: 500; font-size: 14px; color: var(--ink-2); border: 1px solid transparent; border-radius: 999px; padding: 6px 14px; text-decoration: none; white-space: nowrap; }
.tabs2 a:hover{ color: var(--ink); border-color: var(--line); }
.tabs2 a[aria-current]{ color: var(--sheet); background: var(--ink); }
.tabs2 .old{ margin-left: auto; color: var(--teal); }

body:not(.legacy) /* 3 The product file */
.answers{ display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 900px) { body:not(.legacy) .answers{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { body:not(.legacy) .answers{ grid-template-columns: minmax(0, 1fr); } }
.ans{ background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 6px; align-content: start; min-width: 0; color: var(--ink) !important; text-decoration: none; }
.ans:hover{ border-color: var(--teal); }
body:not(.legacy) .ans .t{ font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.ans .big{ font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.1; }
body:not(.legacy) .ans .code{ font-family: var(--font-mono); font-weight: 500; font-size: 24px; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.ans .s{ font-size: 13px; color: var(--ink-2); }
.ans.hero{ background: var(--teal-soft); border-color: var(--teal); }
body:not(.legacy) .strip{ display: flex; gap: 10px 22px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
body:not(.legacy) .strip span{ display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body:not(.legacy) .strip b{ color: var(--ink); font-weight: 600; }
body:not(.legacy) .ladder{ list-style: none; margin: 0; padding: 0; display: grid; counter-reset: step; }
body:not(.legacy) .ladder li{ display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
body:not(.legacy) .ladder li:last-child{ border-bottom: 0; }
body:not(.legacy) .ladder li::before{ counter-increment: step; content: counter(step); font-family: var(--font-mono); font-size: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--sheet); }
body:not(.legacy) .ladder .h{ font-weight: 600; font-size: 14.5px; }
body:not(.legacy) .ladder .d{ color: var(--ink-2); font-size: 13.5px; }
body:not(.legacy) .r{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.aside-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aside-list li{ display: grid; gap: 2px; padding: 8px 10px; border-radius: 6px; background: var(--sunk); font-size: 13.5px; }
.aside-list .ln{ font-family: var(--font-mono); font-size: 13px; text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-2); overflow-wrap: anywhere; }
.change li{ background: var(--fact-soft); }

/* 4 The source,marked */
.srcpick{ display: flex; gap: 6px; flex-wrap: wrap; }
.srcwrap{ display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .srcwrap{ grid-template-columns: minmax(0, 1fr); } }
.claim{ display: grid; gap: 10px; }
.claim .q1{ font-weight: 600; }
.verified{ display: grid; gap: 4px; font-size: 13px; padding: 10px; border-radius: 8px; background: var(--decided-soft); color: var(--decided); }
.verified.warn{ background: var(--open-soft); color: var(--open); }
.verified b{ font-weight: 600; }
body:not(.legacy) .meta{ font-size: 12.5px; color: var(--ink-2); display: grid; gap: 4px; overflow-wrap: anywhere; }
.page{ background: var(--sheet); border: 1px solid var(--line); border-radius: 4px; padding: 28px 28px 34px; font-family: var(--font-source); font-size: 14px; line-height: 1.65; color: var(--ink); box-shadow: 0 10px 28px -22px rgba(10, 30, 35, 0.5); position: relative; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .page{ padding: 18px 14px 22px; } }
.page .runhead{ font-family: var(--font-ui); font-size: 11px; color: var(--ink-3); display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 14px; margin-top: 14px; gap: 10px; flex-wrap: wrap; }
.page p + p{ margin-top: 10px; }
.page mark{ background: var(--mark); color: var(--mark-ink); padding: 1px 2px; border-radius: 2px; box-shadow: 0 0 0 2px var(--mark); }
.pin{ position: absolute; top: 10px; right: 12px; font-family: var(--font-ui); font-size: 11px; font-weight: 600; background: var(--teal); color: var(--sheet); border-radius: 999px; padding: 2px 8px; }
.paranum{ font-family: var(--font-ui); font-size: 11px; color: var(--ink-3); margin-right: 6px; }
.pdfpage{ position: relative; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 10px 28px -22px rgba(10, 30, 35, 0.5); overflow: hidden; min-width: 0; }
.pdfpage img{ display: block; width: 100%; height: auto; }
.pdfpage .marks{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pdfpage .mark{ fill: #ffd43b; fill-opacity: 0.42; stroke: #e0a800; stroke-width: 1.5; }
:root[data-theme="dark"] .pdfpage img{ filter: brightness(0.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pdfpage img{ filter: brightness(0.9); } }

/* 5 The money */
.moneytop{ display: grid; gap: 8px; }
.stack-head{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stack-head .total{ font-size: 22px; font-weight: 500; }
.stackbar{ display: block; width: 100%; height: 46px; border-radius: 8px; border: 1px solid var(--line); overflow: hidden; }
.stackbar .s1{ fill: var(--bar-a); } .stackbar .s2{ fill: var(--bar-b); } .stackbar .s3{ fill: var(--bar-c); } .stackbar .s4{ fill: var(--bar-d); }
.stackbar .rest{ fill: var(--sunk); }
.stackbar .lbl{ fill: var(--sheet); font-family: var(--font-mono); font-size: 13px; text-anchor: middle; }
.stackbar .lbl.dark,.stackbar .lbl.rest{ fill: var(--ink-2); }
.scale{ display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.layers{ display: grid; gap: 8px; min-width: 0; }
.layer{ display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); }
.sw{ width: 12px; height: 12px; border-radius: 3px; margin-top: 4px; background: var(--line); }
.sw.s1{ background: var(--bar-a); } .sw.s2{ background: var(--bar-b); } .sw.s3{ background: var(--bar-c); } .sw.s4{ background: var(--bar-d); }
body:not(.legacy) .layer .n{ font-weight: 600; font-size: 14px; }
.layer .d{ font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.layer .p{ font-family: var(--font-mono); font-weight: 500; font-size: 15px; text-align: right; max-width: 12ch; overflow-wrap: anywhere; }
.layer .p small{ display: block; font-size: 12.5px; color: var(--ink-2); }
.calc{ display: grid; gap: 10px; background: var(--sunk); border-radius: 10px; padding: 14px; align-content: start; }
.calc label{ font-size: 13px; font-weight: 600; }
.calc input{ font-family: var(--font-mono) !important; font-size: 18px !important; }
.calc table{ width: 100%; border-collapse: collapse; font-size: 14px; }
.calc td{ padding: 5px 0; border-bottom: 1px solid var(--line); }
.calc td:last-child{ text-align: right; font-family: var(--font-mono); }
.calc tr.branch td{ color: var(--ink-2); }
.calc tr.branch small{ display: block; font-size: 11px; }
.calc tr.total td{ font-weight: 600; border-bottom: 0; padding-top: 8px; font-size: 15px; }
.known{ font-size: 14px; }

/* 6 May it enter */
.tally{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tally div{ border-radius: 10px; padding: 12px; display: grid; gap: 2px; }
.tally b{ font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1; }
.tally .t1{ background: var(--sunk); }
.tally .t2{ background: var(--decided-soft); color: var(--decided); }
.tally .t3{ background: var(--fact-soft); color: var(--fact); }
.tally span{ font-size: 13px; }
.rules{ list-style: none; margin: 0; padding: 0; display: grid; }
.rules li{ display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; overflow-wrap: anywhere; }
.ag{ font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; text-align: center; padding: 2px 0; height: fit-content; overflow: hidden; }
.rules .w{ color: var(--ink-3); font-size: 12.5px; }
.group{ border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: grid; gap: 6px; background: var(--fact-soft); }
.group b{ font-size: 14px; }
.group .codes{ display: flex; gap: 6px; flex-wrap: wrap; }
.group .codes span{ font-family: var(--font-mono); font-size: 11px; color: var(--fact); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; background: var(--sheet); }
.msg{ font-family: var(--font-source); font-size: 13.5px; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; padding: 12px; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .bar.indeterminate i,body:not(.legacy) .feed li.now span::after{ animation: none; }
}

/* Phone width: the facts stack,the header tools wrap */
@media (max-width: 600px){
  .facts, .facts tbody, .facts tr, .facts td { display: block; width: auto !important; }
  .facts tr{ border-bottom: 1px solid var(--line); padding: 8px 0; }
  .facts td{ border: 0 !important; padding: 2px 0 !important; text-align: left !important; }
  .facts td:first-child{ padding-top: 0 !important; }
  .tools{ flex-wrap: wrap; justify-content: flex-end; }
  .ask li{ grid-template-columns: minmax(0, 1fr); }
}

/* The engine at work: motion with purpose,never in the way (off for reduced motion). */
.bar:not(.indeterminate)::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.38) 50%, transparent 100%); transform: translateX(-100%); animation: sheen 2.6s ease-in-out infinite; pointer-events: none; }
[data-over="1"] .bar::after{ display: none; }
@keyframes sheen { to{ transform: translateX(100%); } }
.bar .fill{ transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.stages .now{ animation: stagepulse 2.2s ease-in-out infinite; }
@keyframes stagepulse { 50%{ border-top-color: var(--line); } }
body:not(.legacy) .q{ transition: border-color .4s ease, background-color .4s ease, transform .4s ease; }
body:not(.legacy) .q.working{ animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 50%{ box-shadow: 0 0 0 4px var(--open-soft); } }
body:not(.legacy) .q.settled{ animation: settle .9s ease-out 1; }
@keyframes settle { 0%{ transform: scale(.97); box-shadow: 0 0 0 0 var(--decided-soft); } 40%{ transform: scale(1.02); box-shadow: 0 0 0 8px var(--decided-soft); } 100%{ transform: none; box-shadow: none; } }
body:not(.legacy) .feed li.fresh{ animation: arrive .7s cubic-bezier(.2, .7, .2, 1) 1; }
@keyframes arrive { from{ opacity: 0; transform: translateY(8px); background: var(--teal-soft); } to{ opacity: 1; transform: none; background: transparent; } }
.doc.live{ position: relative; overflow: hidden; }
.doc.live::after{ content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: 0; background: linear-gradient(90deg, transparent, var(--teal-soft), transparent); opacity: .7; animation: scan 2.4s linear infinite; pointer-events: none; }
@keyframes scan { from{ transform: translateX(-100%); } to{ transform: translateX(260%); } }
.counter b{ transition: color .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .bar::after,.stages .now,body:not(.legacy) .q.working,body:not(.legacy) .q.settled,body:not(.legacy) .feed li.fresh,.doc.live::after,.bar.indeterminate i{ animation: none !important; }
  .bar .fill,body:not(.legacy) .q{ transition: none; }
}

/* The intake while it reads: its steps light up one after the other. */
.intake-steps{ list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--ink-3); }
.intake-steps li{ display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: baseline; animation: steplit 10s ease-in-out infinite; }
.intake-steps li::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: translateY(-1px); }
.intake-steps li:nth-child(2){ animation-delay: 2s; }
.intake-steps li:nth-child(3){ animation-delay: 4s; }
.intake-steps li:nth-child(4){ animation-delay: 6s; }
.intake-steps li:nth-child(5){ animation-delay: 8s; }
@keyframes steplit { 0%,100%{ color: var(--ink-3); } 8%,18%{ color: var(--teal); } }
@media (prefers-reduced-motion: reduce) { .intake-steps li{ animation: none; } }

/* The watchtower (plan 009) */
.reopened{ border: 1px solid var(--open); background: var(--open-soft); border-radius: 8px; padding: 12px 14px; display: grid; gap: 6px; }
.reopened ul{ margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.impacts{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.impact{ padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.impact-head{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.impact p{ margin: 0; color: var(--ink-2); font-size: 14px; overflow-wrap: anywhere; }
body:not(.legacy) .impact .actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.impact form{ margin: 0; }

/* The intake at work: its steps and each product as it is recorded. */
.intake-steps.live li{ animation: none; color: var(--ink-3); }
.intake-steps.live li::before{ background: var(--teal); }
.intake-steps.live li.now{ color: var(--ink); }
.intake-steps.live li.now::before{ animation: livepulse 1.4s ease-in-out infinite; }
@keyframes livepulse { 0%,100%{ opacity: .25; } 50%{ opacity: 1; } }
.live-product{ margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.live-product .k{ margin: 4px 0 0; font-size: 13px; }
.live-product.arrive{ animation: arrive .5s ease-out; }
.live-facts{ list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13.5px; }
.live-facts li{ display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 10px; overflow-wrap: anywhere; }
.live-facts li span:first-child{ color: var(--ink-3); }
.live-facts .more-facts{ color: var(--ink-3); }
@keyframes arrive { from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .live-product.arrive,.intake-steps.live li.now::before{ animation: none; } }

/* The missing facts: likely answers to pick with one click,body:not(.legacy) or another typed. */
.answers{ list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.answer{ border: 0; margin: 0; padding: 0; min-width: 0; }
.answer legend{ font-weight: 600; font-size: 14px; padding: 0; }
.answer .why{ display: block; color: var(--ink-3); font-size: 12.5px; margin: 2px 0 6px; }
.opts{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.opt{ position: relative; display: inline-flex; }
.opt input{ position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span{ display: inline-block; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s; }
.opt input:checked + span{ background: var(--teal); border-color: var(--teal); color: var(--bg, #fff); }
.opt input:focus-visible + span{ outline: 2px solid var(--teal); outline-offset: 2px; }
.opts input[type="text"],.opts input:not([type]){ flex: 1 1 180px; min-width: 0; padding: 6px 8px; font-size: 13.5px; }

/* The run at work: room between the stage strip,the six questions,the counters and the panels. */
#d2-live{ display: grid; gap: 20px; }
#d2-live .runtop{ gap: 14px; }
#d2-live .stages{ margin-top: 2px; }
#d2-live .stages li{ padding-top: 8px; line-height: 1.3; }
@media (max-width: 720px) {
  #d2-live .stages{ grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; }
  #d2-live .six,#d2-live .counters{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The dossier's title,given by the intake. */
.dossier{ font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.25; margin: 6px 0 10px; color: var(--ink); }

/* What it found so far: a box of fixed size; the newest line stays in view at its bottom and the
   line of what the engine does now is pinned there,body:not(.legacy) while older lines move up. */
#d2-live .feed{ height: 440px; max-height: 440px; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
body:not(.legacy) #d2-live .feed li.now{ position: sticky; bottom: 0; background: var(--sheet); border-top: 1px solid var(--line); border-bottom: 0; z-index: 1; }
@media (max-width: 720px) { body:not(.legacy) #d2-live .feed{ height: 320px; max-height: 320px; } }

/* A started file's live line,the bar of the files at work,and the lobby. */
.live-line{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.live-line .dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--open); flex: none; }
.live-line.building .dot{ background: var(--teal); animation: livepulse 1.4s ease-in-out infinite; }
body:not(.legacy) .live-line.done .dot{ background: var(--teal); }
.live-line.stopped .dot{ background: var(--bad); }
.live-line .k{ color: var(--ink-3); font-size: 13.5px; }
.runbar{ position: sticky; top: 0; z-index: 5; margin: 0 0 12px; }
.runbar-in{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); font-size: 13.5px; }
.runbar-in .dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--teal); animation: livepulse 1.4s ease-in-out infinite; }
.runbar-in .lobby-link{ margin-left: auto; }
.lobby{ list-style: none; margin: 0; padding: 0; display: grid; }
.lobby-row{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lobby-row:last-child{ border-bottom: 0; }
.lobby-row .bar{ margin-bottom: 6px; }
.lobby-acts{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; justify-content: flex-end; }
@media (max-width: 720px) { .lobby-row{ grid-template-columns: 1fr; } .lobby-acts{ justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .live-line.building .dot,.runbar-in .dot{ animation: none; } }

/* The first desk's pages in this design (20 October 2026): their sheet loads first,and its
   variables take this design's colours,fonts and dark mode. */
:root,:root:not([data-theme="light"]),:root[data-theme="dark"],:root[data-theme="light"]{
  --canvas: var(--paper); --surface: var(--sheet); --surface-2: var(--sunk); --rule: var(--line);
  --rule-2: var(--line); --accent: var(--teal); --accent-ink: var(--teal); --accent-tint: var(--teal-soft);
  --ok: var(--decided); --open-tint: var(--open-soft); --bad-tint: var(--bad-soft); --grey: var(--ink-3);
  --grey-tint: var(--sunk); --hover: var(--sunk); --hl: var(--mark); --control: var(--ink-3);
  --sans: var(--font-ui); --serif: var(--font-source); --mono: var(--font-mono);
}
body.legacy{ background: var(--paper); color: var(--ink); font: 15px/1.5 var(--font-ui); }
.legacy .legacy-body{ min-width: 0; }
.legacy .legacy-actions{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 0 0 12px; }
.legacy .legacy-body h1,.legacy .legacy-body h2{ font-family: var(--font-display); letter-spacing: -0.01em; }
.legacy .legacy-body .page-head h1{ font-size: 30px; line-height: 1.15; margin: 0 0 6px; }
.legacy .legacy-body a{ color: var(--teal); }
.legacy .legacy-body table.t th, .legacy .legacy-body table.t td{ border-color: var(--line); }
.legacy .legacy-body .btn-primary,.legacy .legacy-body button.btn-primary{ background: var(--teal); border-color: var(--teal); color: var(--sheet); border-radius: 8px; }
.legacy .legacy-body input,.legacy .legacy-body textarea,.legacy .legacy-body select{ font: inherit; border-radius: 8px; }
.legacy main.main2{ padding-top: 18px; }

/* Review and sign in the new file. */
.review-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 14px; }
.review-side { position: sticky; top: 12px; }
.review-bar { width: 100%; height: 10px; border-radius: 999px; background: var(--sunk); overflow: hidden; display: block; margin: 8px 0 10px; }
.review-bar .s-ok { fill: var(--decided); } .review-bar .s-bad { fill: var(--bad); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters .filter { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--ink-2); }
.filters .filter[aria-current] { background: var(--teal); border-color: var(--teal); color: var(--sheet); }
.claims-list { list-style: none; margin: 0; padding: 0; display: grid; }
.claim { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.claim:last-child { border-bottom: 0; }
.claim-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.claim .cid { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.claim:target { background: var(--teal-soft); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.decide { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.decide input { flex: 1 1 220px; }
.decided { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.failures { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.comments p { margin: 2px 0 0; }
.assign { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.btn.small { padding: 6px 12px; font-size: 13.5px; }
@media (max-width: 960px) { .review-cols { grid-template-columns: 1fr; } .review-side { position: static; } }

/* Dossiers: the six answers at a glance and the documents. */
.six-mini { display: flex; gap: 4px; margin-top: 6px; }
.six-q { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--sunk); color: var(--ink-3); }
.six-q.decided { background: var(--decided-soft); color: var(--decided); }
.six-q.open { background: var(--open-soft); color: var(--open); }
.six-q.bad { background: var(--bad-soft); color: var(--bad); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.search { display: flex; gap: 8px; margin: 0 0 12px; }
.search input { flex: 1 1 auto; }
.docs { list-style: none; margin: 0; padding: 0; display: grid; }
.docs .doc-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.docs .doc-row:last-child { border-bottom: 0; }
.h1 { font-family: var(--font-display); font-size: 30px; line-height: 1.15; margin: 0; }
@media (max-width: 720px) { .docs .doc-row { grid-template-columns: 1fr; } }

/* The worklist. */
.work-row { display: grid; grid-template-columns: 120px minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, 0.9fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.work-row:last-child { border-bottom: 0; }
.work-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13.5px; }
@media (max-width: 760px) { .work-row { grid-template-columns: 1fr; } .work-meta { align-items: flex-start; } }

/* The requests. */
.req-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 12.5px; }
.req-steps li { padding: 2px 8px; border-radius: 999px; background: var(--sunk); color: var(--ink-3); }
.req-steps li.done { background: var(--decided-soft); color: var(--decided); }
.req-steps li.now { background: var(--teal); color: var(--sheet); }
.req-link { padding: 10px 12px; background: var(--sunk); border-radius: 8px; overflow-wrap: anywhere; }
.req-message { white-space: pre-wrap; font: inherit; background: var(--sunk); padding: 12px; border-radius: 8px; margin: 0; }

/* Facts and missing facts. */
.facts-list, .req-items { list-style: none; margin: 0; padding: 0; display: grid; }
.fact-row, .miss-row { display: grid; grid-template-columns: 44px minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 0.6fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; font-size: 14px; }
.fact-row:last-child, .miss-row:last-child { border-bottom: 0; }
.fact-row .cid, .miss-row .cid { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding-top: 2px; }
.req-items li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.req-items li:last-child { border-bottom: 0; }
.days { width: 90px !important; }
@media (max-width: 760px) { .fact-row, .miss-row { grid-template-columns: 1fr; } }

/* The forms (a new dossier, a consent, a product, documents, a description), in this design. */
.form2 { max-width: 760px; display: grid; gap: 14px; }
.form2.wide { max-width: 1040px; }
.form2 .lead { margin: -4px 0 4px; }
.form2 form { display: grid; gap: 14px; }
.form2 .form-sec { background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: grid; gap: 12px; }
.form2 .form-sec h2 { font-family: var(--font-display); font-size: 18px; margin: 0; }
.form2 .field { display: grid; gap: 4px; min-width: 0; border: 0; margin: 0; padding: 0; }
.form2 .field > label, .form2 legend { font-weight: 600; font-size: 14px; padding: 0; }
.form2 .hint { color: var(--ink-3); font-size: 13px; }
.form2 .error-text { color: var(--bad); font-size: 13px; font-weight: 600; }
.form2 .field-error input, .form2 .field-error select, .form2 .field-error textarea { border-color: var(--bad); }
.form2 .field-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.form2 .field-row > .field { flex: 1 1 200px; }
.form2 .w-s { max-width: 200px; } .form2 .w-m { max-width: 360px; }
.form2 .choice-list { display: grid; gap: 6px; }
.form2 .choice-list.grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.form2 .choice { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); cursor: pointer; }
.form2 .choice:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.form2 .choice.is-fixed { opacity: 0.8; cursor: default; }
.form2 .choice .hint { display: block; }
.form2 input[type="radio"], .form2 input[type="checkbox"] { width: auto !important; margin: 3px 0 0; accent-color: var(--teal); }
.form2 .form-actions { display: flex; gap: 12px; align-items: center; }
.form2 .btn-primary { font: inherit; font-weight: 600; background: var(--teal); color: var(--sheet); border: 1px solid var(--teal); border-radius: 8px; padding: 9px 16px; cursor: pointer; }
.form2 .error-summary { border: 2px solid var(--bad); border-radius: 10px; padding: 12px 16px; background: var(--bad-soft); }
.form2 .error-summary h2 { font-size: 16px; margin: 0 0 6px; }
.form2 .doc-row { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet); }
.form2 .doc-head { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.form2 .doc-n { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.form2 .small { font-size: 13px; color: var(--ink-3); }

/* The remaining first-desk pages drawn natively (settings, find, reopen, compare, run plan): their
   few components in this design. "body .native" outweighs the scoped rules of shared names. */
body .native .page-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: end; }
body .native .page-head h1, body .native > h1 { font-family: var(--font-display); font-size: 30px; line-height: 1.15; margin: 0; }
body .native h2 { font-family: var(--font-display); font-size: 18px; margin: 18px 0 8px; }
body .native .meta, body .native .sub { display: block; color: var(--ink-3); font-size: 13px; }
body .native .label { display: block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; color: var(--ink-3); font-weight: 600; }
body .native .tw { overflow-x: auto; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; }
body .native table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
body .native table.t th, body .native table.t td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
body .native table.t thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
body .native table.t .n { text-align: right; }
body .native .kv { display: grid; grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1.4fr); gap: 6px 14px; margin: 0; }
body .native .kv dt { color: var(--ink-3); font-size: 13.5px; } body .native .kv dd { margin: 0; }
body .native .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
body .native .cols > section, body .native .sec { background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
body .native .notice { display: block; padding: 10px 14px; border-radius: 10px; background: var(--teal-soft); border: 1px solid var(--line); }
body .native .notice.bad, body .native .notice.open { background: var(--open-soft); }
body .native .empty { color: var(--ink-3); }
body .native ul.prose { margin: 6px 0 0; padding-left: 18px; }
body .native .btn, body .native button:not(.btn-primary) { font: inherit; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); border-radius: 8px; padding: 8px 14px; cursor: pointer; text-decoration: none; display: inline-block; }
body .native .form-actions, body .native .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.done-next { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--decided); border-radius: 10px; background: var(--decided-soft); }

/* The first desk's state marks, on its pages drawn in this design (the comparison of versions,
   21 October 2026): without a size, their icons filled the whole column. */
body:not(.legacy) .mk{ display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; vertical-align: -1px; }
body:not(.legacy) .mk svg{ width: 12px; height: 12px; flex: none; overflow: visible; }
body:not(.legacy) .mk .cut{ fill: var(--sheet); }
body:not(.legacy) .mk-w, body:not(.legacy) .mk-ink{ color: var(--ink); }
body:not(.legacy) .mk-ok{ color: var(--decided); }
body:not(.legacy) .mk-open{ color: var(--open); }
body:not(.legacy) .mk-bad{ color: var(--bad); }
body:not(.legacy) .mk-grey{ color: var(--ink-3); }
body:not(.legacy) .mk-accent{ color: var(--teal); }
body:not(.legacy) .mk.loud{ padding: 1px 8px 1px 6px; border-radius: 3px; }
body:not(.legacy) .mk.loud.mk-open{ background: var(--open-soft); }
body:not(.legacy) .mk.loud.mk-bad{ background: var(--bad-soft); }

/* Buttons on those pages: the outlined button keeps its ink text (the general button rule makes
   text white), and the primary one stays teal. */
body .native .btn{ color: var(--ink) !important; }
body .native .btn-primary{ background: var(--teal); border-color: var(--teal); color: var(--sheet) !important; }

/* The file page: six questions, then the file in plain words (21 October 2026). */
.ans.muted{ background: transparent; border-style: dashed; color: var(--ink-3) !important; }
.plain-words{ margin-top: 14px; }
.plain-words .headline{ font-family: var(--font-display); font-size: 21px; line-height: 1.35; margin: 6px 0 14px; color: var(--ink); }
.pw-sections{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.pw-sections > .pw:only-child{ grid-column: 1 / -1; max-width: 860px; }
.pw h3, .pw-open h3{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 0 0 4px; }
.pw .finding{ font-weight: 600; margin: 0 0 6px; }
.pw ul, .pw-open ul{ margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 14.5px; line-height: 1.5; }
.pw-open{ margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.plain-words .method{ margin-top: 12px; }
a.src-link{ color: var(--teal); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.details-head{ display: block; margin: 22px 0 8px; }
@media (max-width: 760px){ .answers{ grid-template-columns: 1fr 1fr; } .pw-sections{ grid-template-columns: 1fr; } }
body:not(.legacy) .answers.n3{ grid-template-columns: 1.3fr 1fr 1fr; }
body:not(.legacy) .answers.n2{ grid-template-columns: 1.3fr 1fr; }
body:not(.legacy) .answers.n1{ grid-template-columns: minmax(0, 1fr); }
.unasked{ margin: 8px 0 0; }
@media (max-width: 760px){ body:not(.legacy) .answers.n3, body:not(.legacy) .answers.n2{ grid-template-columns: 1fr; } }
.orders{ list-style: none; margin: 0; padding: 0; display: grid; }
.orders li{ display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.orders li:last-child{ border-bottom: 0; }
.orders .ln{ font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; }
.orders .d{ color: var(--ink-2); font-size: 13.5px; margin-top: 4px; }
@media (max-width: 760px){ .orders li{ grid-template-columns: minmax(0, 1fr); gap: 4px; } }
@media (min-width: 761px){ .tabs2{ flex-wrap: wrap; row-gap: 6px; } }
.orders .ln .prod{ display: block; font-family: var(--font-ui); font-weight: 600; font-size: 14px; margin-bottom: 2px; }
/* The questions to answer, in the open on the new-file screen: a field like the others. */
fieldset.qs{ border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
fieldset.qs legend{ font-weight: 600; font-size: 13px; padding: 0; margin-bottom: 2px; }
/* The hand-off page that signs a browser in, in the desk's look (22 October 2026). */
.handoff{ min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--ink-2); font-size: 15px; }

/* ==========================================================================================
   UI option A, "Passport" (23 October 2026): calm and neutral, as Altana's product passport
   and Harvey: white sheets, one navy accent from the logo (#13294B), system type, a side
   menu, text tabs, and each answer as a row of label and value. Only the look changes.
   ========================================================================================== */
:root{
  --paper: #ffffff; --sheet: #ffffff; --sunk: #f7f7f6; --ink: #15181d; --ink-2: #5c626a;
  --ink-3: #8a9097; --line: #e9e9e7; --teal: #1d3d70; --teal-soft: #eef2f8; --decided: #1d7a4b;
  --decided-soft: #ebf6f0; --open: #96580a; --open-soft: #fcf3e2; --fact: #56606b; --fact-soft: #f2f4f6;
  --bad: #b42318; --bad-soft: #fdeceb; --mark: #ffe58a; --mark-ink: #15181d;
  --bar-a: #13294b; --bar-b: #3e5c8f; --bar-c: #8ea4c6; --bar-d: #cdd7e6;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "IBM Plex Mono", Menlo, Consolas, monospace;
  --side: 236px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper: #0f1114; --sheet: #15181c; --sunk: #1a1d22; --ink: #e9ebee; --ink-2: #a6acb4;
    --ink-3: #7e858e; --line: #262a30; --teal: #9db8e8; --teal-soft: #1b2535; --decided: #55c48f;
    --decided-soft: #13281d; --open: #e9a94f; --open-soft: #322510; --fact: #a9b4c0; --fact-soft: #1d2229;
    --bad: #f28b80; --bad-soft: #3a1815; --bar-a: #9db8e8; --bar-b: #6f8fc6; --bar-c: #445f8f; --bar-d: #2a3a57;
  }
}
:root[data-theme="dark"]{
  --paper: #0f1114; --sheet: #15181c; --sunk: #1a1d22; --ink: #e9ebee; --ink-2: #a6acb4;
  --ink-3: #7e858e; --line: #262a30; --teal: #9db8e8; --teal-soft: #1b2535; --decided: #55c48f;
  --decided-soft: #13281d; --open: #e9a94f; --open-soft: #322510; --fact: #a9b4c0; --fact-soft: #1d2229;
  --bad: #f28b80; --bad-soft: #3a1815; --bar-a: #9db8e8; --bar-b: #6f8fc6; --bar-c: #445f8f; --bar-d: #2a3a57;
}
body.d2{ font-size: 14.5px; -webkit-font-smoothing: antialiased; }

/* The shell: a side menu beside the page; on a phone, the top bar's menu as before. */
.shell{ display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.shell-main{ min-width: 0; }
.side{ position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--sunk); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; padding: 18px 12px 16px; }
.side .brand{ padding: 2px 8px; }
.side .brand img,.side .brand picture{ height: 22px; }
.side-nav{ display: grid; gap: 1px; }
.side-nav a{ color: var(--ink-2); text-decoration: none; font-size: 14px; padding: 7px 10px; border-radius: 7px; border: 1px solid transparent; }
.side-nav a:hover{ background: var(--line); color: var(--ink); }
.side-nav a[aria-current]{ background: var(--sheet); color: var(--ink); font-weight: 600; border-color: var(--line); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.side-foot{ margin-top: auto; padding: 0 6px; }
.side-foot .theme{ display: flex; width: 100%; }
.side-foot .theme button{ flex: 1 1 0; }
.shell-main .top2 .brand,.shell-main .top2 .tools{ display: none; }
@media (max-width: 960px){
  .shell{ grid-template-columns: minmax(0, 1fr); }
  .side{ display: none; }
  .shell-main .top2 .brand,.shell-main .top2 .tools{ display: flex; }
}
.top2{ background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.top2-in{ min-height: 56px; }
.wrap{ max-width: 1180px; padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
@media (max-width: 600px){ .wrap{ padding-left: 16px; padding-right: 16px; } }
.crumbs{ font-size: 13.5px; }
.crumbs span:last-child{ color: var(--ink); font-weight: 500; }
.menu summary,.vmenu summary{ border-radius: 8px; font-weight: 500; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.theme{ border-radius: 8px; }
.theme button[aria-pressed="true"]{ background: var(--sheet); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.side-foot .theme{ background: var(--sunk); padding: 2px; gap: 2px; }
.band{ font-size: 12.5px; padding: 5px 16px; border-bottom: 1px solid var(--line); }
.main2{ padding-block: 26px 64px; gap: 22px; }

/* Type: sentence-case labels, quieter headings. */
.head2 h1,.runtop h1,.h1{ font-weight: 600; letter-spacing: -0.02em; }
.eyebrow{ letter-spacing: 0.02em; text-transform: none; font-size: 13px; color: var(--ink-3); font-weight: 500; }
body:not(.legacy) .label{ font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 600; }
.details-head{ margin: 30px 0 4px; font-size: 17px !important; }
.pw h3,.pw-open h3{ font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--ink-3); font-weight: 600; }

/* Chips: a dot and a word, quiet. */
.chip{ font-size: 12px; border-radius: 6px; padding: 1px 8px; font-weight: 500; }
.chip::before{ width: 6px; height: 6px; }

/* Panels: thin lines, no fill on fill. */
.panel{ border-radius: 12px; padding: 20px; gap: 14px; }
body:not(.legacy) .btn{ border-radius: 8px; padding: 8px 14px; font-weight: 500; font-size: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); }
body:not(.legacy) .btn.ghost{ background: var(--sheet); }

/* The file's tabs: words with a line under the one in use. */
.tabs2{ gap: 24px; padding-bottom: 0; }
.tabs2 a{ border: 0; border-radius: 0; padding: 10px 0 12px; font-size: 14px; color: var(--ink-2); }
.tabs2 a:hover{ color: var(--ink); border-color: transparent; }
.tabs2 a[aria-current]{ background: transparent; color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
@media (min-width: 761px){ .tabs2{ flex-wrap: nowrap; } }

/* The six answers as the passport's rows: the label, the value, its note, its state. */
body:not(.legacy) .answers,body:not(.legacy) .answers.n3,body:not(.legacy) .answers.n2{ grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
.answers .ans{ grid-template-columns: 210px minmax(0, 1fr) auto; column-gap: 28px; row-gap: 2px; align-items: baseline; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 15px 10px; background: transparent; }
.answers .ans:hover{ background: var(--sunk); border-color: var(--line); }
.answers .ans.hero{ background: transparent; border-color: var(--line); }
body:not(.legacy) .answers .ans .t{ grid-column: 1; grid-row: 1 / span 2; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-2); }
.answers .ans .big{ grid-column: 2; font-family: var(--font-ui); font-size: 16px; font-weight: 500; line-height: 1.4; }
body:not(.legacy) .answers .ans .code{ grid-column: 2; font-size: 16px; font-weight: 500; letter-spacing: 0.01em; color: var(--teal); }
body:not(.legacy) .answers .ans.hero .code{ font-size: 19px; }
.answers .ans .s{ grid-column: 2; font-size: 13px; color: var(--ink-3); }
.answers .ans > span:last-child{ grid-column: 3; grid-row: 1; justify-self: end; }
@media (max-width: 640px){
  .answers .ans{ grid-template-columns: minmax(0, 1fr) auto; }
  body:not(.legacy) .answers .ans .t{ grid-column: 1 / -1; grid-row: auto; }
  .answers .ans .big,body:not(.legacy) .answers .ans .code,.answers .ans .s{ grid-column: 1; }
  .answers .ans > span:last-child{ grid-column: 2; grid-row: 2; }
}

/* Receipts: a quiet tag under each value; it turns navy when pointed at. */
.rcpt{ background: var(--sheet); border-color: var(--line); color: var(--ink-2); border-radius: 6px; font-size: 11.5px; padding: 1px 7px; }
.rcpt::before{ color: var(--teal); opacity: 1; }
.rcpt:hover{ color: var(--teal); border-color: var(--teal); }
.rcpt[aria-current]{ background: var(--teal); border-color: var(--teal); color: var(--sheet); }
.rcpt[aria-current]::before{ color: var(--sheet); }

/* The steps and the side lists: lines, not boxes. */
body:not(.legacy) .ladder li::before{ background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.aside-list li{ background: transparent; border-radius: 0; border-left: 2px solid var(--line); padding: 3px 0 3px 12px; }
.change li{ border-left-color: var(--open); background: transparent; }

/* The money: rows and a slim bar. */
.stackbar{ height: 36px; border-radius: 8px; }
.layer{ border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 12px 2px; }
.layers{ gap: 0; border-top: 1px solid var(--line); }
.calc{ background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.tally div{ border: 1px solid var(--line); }

/* The dossiers and the source. */
.six-q{ border-radius: 5px; }
.page{ border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.drop{ border-width: 1.5px; border-color: var(--line); background: var(--sunk); border-radius: 12px; }
.drop .pick{ border-radius: 8px; }

/* ==========================================================================================
   The Passport desk on every page (23 October 2026): the side column, the product's header,
   and the run as the file filling in.
   ========================================================================================== */
.shell{ background: linear-gradient(90deg, var(--sunk) 0 var(--side), var(--paper) var(--side)); }
.side{ background: transparent; }
@media (max-width: 960px){ .shell{ background: var(--paper); } }
.side-nav a{ display: flex; align-items: center; gap: 10px; }
.side-nav .ico{ flex: 0 0 auto; color: var(--ink-3); }
.side-nav a:hover .ico,.side-nav a[aria-current] .ico{ color: var(--ink); }
.side-nav .count{ margin-left: auto; font-size: 11px; font-weight: 600; line-height: 18px; min-width: 18px; text-align: center; padding: 0 6px; border-radius: 999px; background: var(--teal); color: var(--sheet); }

/* The product's header, above its tabs on every page of the file. */
.file-head{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.file-icon{ width: 42px; height: 42px; border-radius: 11px; background: var(--ink); color: var(--paper); display: grid; place-items: center; flex: 0 0 auto; }
.file-icon .ico{ width: 22px; height: 22px; }
.file-id{ min-width: 0; }
.file-id h1,.run-id h1{ font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.file-id p{ font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.file-id p a{ color: var(--ink-2); text-decoration: none; }
.file-id p a:hover{ text-decoration: underline; }
.file-head .actions{ flex-wrap: nowrap; }
@media (max-width: 760px){ .file-head{ grid-template-columns: auto minmax(0, 1fr); } .file-head .actions{ grid-column: 1 / -1; flex-wrap: wrap; } }
.main2 > .file-head + .tabs2,.main2 > .file-head + .notice{ margin-top: -4px; }

/* The run: a header with its state, a thin bar, the file filling in, and beside it the steps. */
.runtop{ gap: 16px; }
.run-head{ display: flex; gap: 14px; align-items: center; }
.run-id{ min-width: 0; }
.run-state{ display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }
.run-state b{ color: var(--ink); font-weight: 600; }
.run-state .pulse{ width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: ring 1.8s ease-out infinite; }
.run-state.ready .pulse{ background: var(--decided); animation: none; }
.run-state.ended .pulse{ background: var(--bad); animation: none; }
@keyframes ring{ 0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 45%, transparent); } 100%{ box-shadow: 0 0 0 9px transparent; } }
.runtop .bar{ height: 4px; border: 0; background: var(--line); }
.done-next{ border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--decided-soft); }
.run-grid{ display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; align-items: start; }
@media (max-width: 1060px){ .run-grid{ grid-template-columns: minmax(0, 1fr); } }
.run-main{ display: grid; gap: 30px; min-width: 0; }
.run-sec{ display: grid; gap: 10px; min-width: 0; }
.run-side{ display: grid; gap: 14px; position: sticky; top: 76px; min-width: 0; }
@media (max-width: 1060px){ .run-side{ position: static; } }

/* The six answers as the file's rows: the label, what is known so far, the state. */
body:not(.legacy) .six{ grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
body:not(.legacy) .six .q{ grid-template-columns: 200px minmax(0, 1fr) auto; column-gap: 24px; align-items: baseline; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 15px 8px; }
body:not(.legacy) .six .q .t{ font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.six .q .qv{ display: grid; gap: 2px; min-width: 0; }
body:not(.legacy) .six .q .v{ font-size: 15px; font-weight: 500; color: var(--ink-3); }
body:not(.legacy) .six .q.donebox .v{ color: var(--ink); }
body:not(.legacy) .six .q.working{ background: transparent; border-color: var(--line); }
body:not(.legacy) .six .q.working .v{ color: transparent; background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink) 45%, var(--ink-3) 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 2.4s linear infinite; }
@keyframes shimmer{ from{ background-position: 110% 0; } to{ background-position: -110% 0; } }
.chip.working{ color: var(--teal); background: var(--teal-soft); }
.chip.working::before{ animation: blinkdot 1.2s ease-in-out infinite; }
@keyframes blinkdot{ 50%{ opacity: 0.25; } }
@media (max-width: 640px){ body:not(.legacy) .six .q{ grid-template-columns: minmax(0, 1fr) auto; } body:not(.legacy) .six .q .t{ grid-column: 1 / -1; } }

/* The steps: a checklist. */
.run-side .stages{ grid-template-columns: minmax(0, 1fr); gap: 0; font-size: 13.5px; }
.run-side .stages li{ border: 0; padding: 6px 0; display: flex; align-items: center; gap: 10px; color: var(--ink-3); animation: none; }
.run-side .stages .mark{ position: relative; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); flex: 0 0 auto; }
.run-side .stages .done{ color: var(--ink-2); }
.run-side .stages .done .mark{ background: var(--ink); border-color: var(--ink); }
.run-side .stages .done .mark::after{ content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--paper); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.run-side .stages .now{ color: var(--ink); font-weight: 600; }
.run-side .stages .now .mark{ border-color: var(--teal); background: var(--teal-soft); animation: ring 1.8s ease-out infinite; }

/* So far: counts as quiet lines. */
.run-side .counters{ grid-template-columns: minmax(0, 1fr); gap: 0; }
.run-side .counter{ background: transparent; border-radius: 0; padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.run-side .counter:last-child{ border-bottom: 0; }
.run-side .counter b{ display: inline; font-family: var(--font-ui); font-size: 15px; font-weight: 600; }
.run-side .counter span{ font-size: 13.5px; color: var(--ink-2); }

/* Reading now: a line for each document, the one open marked. */
.run-side .reading{ gap: 10px; }
.run-side .doc{ grid-template-columns: minmax(0, 1fr); gap: 1px; border: 0; border-left: 2px solid var(--line); border-radius: 0; padding: 2px 0 2px 11px; background: transparent; }
.run-side .doc.live{ border-left-color: var(--teal); box-shadow: none; }
body:not(.legacy) .run-side .doc .tag{ color: var(--ink-3); letter-spacing: 0.04em; }
.run-side .doc .tt{ font-size: 13.5px; }

/* Activity: a timeline. */
body:not(.legacy) .run-main .feed{ max-height: 520px; }
body:not(.legacy) .run-main .feed li{ grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 0; border-bottom: 0; }
body:not(.legacy) .run-main .feed li span{ position: relative; padding: 0 0 18px 20px; border-left: 1px solid var(--line); }
body:not(.legacy) .run-main .feed li span::before{ content: ""; position: absolute; left: -4.5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink-3); }
body:not(.legacy) .run-main .feed li.now span::before{ background: var(--teal); border-color: var(--teal); }
body:not(.legacy) .run-main .feed li:last-child span{ border-left-color: transparent; padding-bottom: 4px; }
body:not(.legacy) .run-main .feed time{ text-align: right; }
@media (prefers-reduced-motion: reduce){ .run-state .pulse,.run-side .stages .now .mark,body:not(.legacy) .six .q.working .v,.chip.working::before{ animation: none !important; } body:not(.legacy) .six .q.working .v{ color: var(--ink-2); background: none; } }
body:not(.legacy) .six .q.working{ animation: none; box-shadow: inset 2px 0 0 var(--teal); }
body:not(.legacy) #d2-live .run-main .feed li.now{ background: var(--paper); border-top: 0; }
.run-side .doc.live::after{ opacity: .35; }

/* Every page: no underlined links in the lists, counts as white cards, the name capitalised. */
body:not(.legacy) .main2 a:not(.btn):not(.src-link){ text-decoration: none; }
body:not(.legacy) .main2 a:not(.btn):not(.rcpt):hover{ text-decoration: underline; }
.tally div,.counters .counter{ background: var(--sheet) !important; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-2) !important; }
.run-side .counters .counter{ border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.run-side .counters .counter:last-child{ border-bottom: 0; }
.tally b{ font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.tally .t2 b{ color: var(--decided); }
.tally .t3 b{ color: var(--fact); }
.file-id h1::first-letter,.run-id h1::first-letter{ text-transform: uppercase; }
.d2 label.row{ display: inline-flex; align-items: center; gap: 7px; margin: 4px 22px 4px 0; }
.d2 label.row input{ accent-color: var(--teal); }
.ico{ stroke-linecap: round; stroke-linejoin: round; }

/* The hosted trial (plan 038, B2): the firm's free files left, in the side and the top bar. */
.files-left{ display: block; margin: 0 0 10px; padding: 6px 8px; border-radius: 8px; font-size: 13px; color: var(--ink-2); background: var(--sunk); text-decoration: none; }
.tools .files-left{ display: inline-block; margin: 0 8px 0 0; }
.trial-kind .opts{ display: grid; gap: 6px; }
.trial-page{ max-width: 680px; margin: 40px auto; padding: 0 16px; display: grid; gap: 16px; }
.trial-page .prose li{ margin: 0 0 8px; }

/* "What I understood" for a first-time user (5 November 2026): a card for each product, the
   shared facts once, each product's own facts in groups, the questions once, one "Start all". */
.lw-intake{ display: grid; gap: 14px; max-width: 1000px; }
.lw-title{ font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.25; }
.lw-lede{ font-size: 15px; color: var(--ink-2); }
.lw-files{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lw-files li{ display: inline-flex; align-items: center; gap: 8px; font-size: 13px; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; }
.lw-ftype{ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.lw-ok{ color: var(--decided); font-size: 12.5px; }
.lw-cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.lw-card{ display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; padding: 14px; color: var(--ink) !important; text-decoration: none; }
.lw-card:hover{ border-color: var(--teal); }
.lw-num{ display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--ink); color: var(--sheet); font-weight: 600; font-size: 15px; }
.lw-card-body{ display: grid; gap: 6px; min-width: 0; }
.lw-card-body b{ font-size: 15px; line-height: 1.35; }
.lw-k{ font-size: 12px; color: var(--ink-3); }
.lw-dl{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 2px 0 4px; font-size: 13.5px; }
.lw-dl dt{ color: var(--ink-3); }
.lw-dl dd{ margin: 0; overflow-wrap: anywhere; }
mark.lw-diff{ background: var(--mark); color: var(--mark-ink); border-radius: 3px; padding: 0 3px; }
.lw-group{ background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; }
.lw-product .lw-group{ background: transparent; }
.lw-group > summary{ list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-weight: 600; font-size: 14.5px; }
.lw-group > summary::-webkit-details-marker{ display: none; }
.lw-group > summary::before{ content: "›"; display: inline-block; width: 10px; color: var(--ink-3); transition: transform .15s; }
.lw-group[open] > summary::before{ transform: rotate(90deg); }
.lw-grow{ flex: 1; min-width: 0; }
.lw-rows{ display: grid; padding: 0 14px 10px 34px; }
.lw-note{ padding: 0 14px 12px 34px; }
.lw-fact{ display: grid; grid-template-columns: 200px minmax(0, 1fr) auto auto; gap: 10px; align-items: start; padding: 6px 0; border-top: 1px dashed var(--line); }
.lw-fact:first-child{ border-top: 0; }
.lw-fl{ font-size: 13px; color: var(--ink-3); padding-top: 6px; }
body:not(.legacy) .lw-fv,body:not(.legacy) .lw-fl-in{ font: inherit; font-size: 14px; width: 100%; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 5px 8px; color: var(--ink); }
body:not(.legacy) .lw-fv:hover{ border-color: var(--line); }
body:not(.legacy) .lw-fv:focus{ border-color: var(--teal); background: var(--sheet); outline: none; }
body:not(.legacy) .lw-fv[readonly]{ cursor: default; border-color: transparent; }
body:not(.legacy) .lw-fl-in{ border-color: var(--line); }
.lw-src{ font-size: 12.5px; color: var(--teal); padding-top: 6px; text-align: right; }
.lw-src summary{ list-style: none; cursor: pointer; white-space: nowrap; }
.lw-src summary::-webkit-details-marker{ display: none; }
.lw-src.plain{ color: var(--ink-3); }
.lw-src.bad summary{ color: var(--bad); }
.lw-src blockquote{ margin: 6px 0 0; max-width: 360px; text-align: left; white-space: normal; font-family: var(--font-source); font-size: 13px; color: var(--ink-2); background: var(--sunk); border-left: 3px solid var(--decided); border-radius: 0 6px 6px 0; padding: 8px 10px; }
.lw-src.bad blockquote{ border-left-color: var(--bad); }
.lw-src blockquote small{ display: block; font-family: var(--font-ui); color: var(--ink-3); margin-top: 4px; overflow-wrap: anywhere; }
.lw-keep{ display: inline-flex; align-items: center; gap: 4px; padding-top: 6px; font-size: 12px; color: var(--ink-3); opacity: .5; }
.lw-fact:hover .lw-keep,.lw-keep:has(input:not(:checked)){ opacity: 1; }
body:not(.legacy) .lw-fact:has(.lw-keep input:not(:checked)) .lw-fv{ text-decoration: line-through; color: var(--ink-3); }
.lw-fact.is-trouble .lw-fl{ color: var(--bad); font-weight: 600; }
.lw-head{ display: flex; align-items: center; gap: 12px; }
.lw-started-name{ font-size: 16px; }
.lw-product.is-started{ gap: 8px; }
.lw-ask-own{ display: grid; gap: 6px; }
.lw-bar{ position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }
@media (max-width: 700px){
  .lw-fact{ grid-template-columns: minmax(0, 1fr) auto; }
  .lw-fl{ grid-column: 1 / -1; padding-top: 0; }
  .lw-fact .lw-fv{ grid-column: 1 / -1; }
  .lw-rows,.lw-note{ padding-left: 14px; }
}
/* The next step of a file, with one main button (5 November 2026). */
.lw-next{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 14px 0; padding: 14px 16px; border: 1px solid var(--teal); border-radius: 10px; background: var(--teal-soft); }
.lw-next b{ font-size: 15.5px; }
.lw-next p{ margin-top: 2px; font-size: 14px; color: var(--ink-2); max-width: 720px; }
.lw-next .actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.lw-more{ align-items: center; }
/* A product's rarer actions, under "More" (5 November 2026). */
.lw-menu{ position: relative; display: inline-block; }
.lw-menu > summary{ list-style: none; }
.lw-menu > summary::-webkit-details-marker{ display: none; }
.lw-menu > summary::after{ content: " ▾"; font-size: 11px; }
.lw-menu-list{ position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; display: grid; gap: 2px; padding: 6px; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.lw-menu-list a,.lw-menu-list button{ display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; font: inherit; font-size: 14px; color: var(--ink) !important; background: none !important; border: 0 !important; text-decoration: none; cursor: pointer; font-weight: 400; }
.lw-menu-list a:hover,.lw-menu-list button:hover{ background: var(--sunk) !important; }
.lw-menu-list form{ margin: 0; }
.lobby-acts{ align-items: center; }
/* The questions for the client, one list with their answers (5 November 2026). */
.lw-qlist{ list-style: none; margin: 0; padding: 0; display: grid; }
.lw-q{ display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.lw-q:first-child{ border-top: 0; }
.lw-qn{ display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sunk); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.lw-qb{ display: grid; gap: 4px; min-width: 0; }
.lw-qh{ display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.lw-stake{ font-size: 13px; font-weight: 600; color: var(--open); white-space: nowrap; }
.lw-qb .opts{ margin-top: 6px; }
/* Review and sign in three steps; each answer's points closed under it (5 November 2026). */
.lw-steps{ list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.lw-steps li a{ display: grid; gap: 2px; padding: 10px 12px; border-bottom: 3px solid var(--line); color: var(--ink-3) !important; text-decoration: none; }
.lw-steps li b{ font-size: 14px; color: var(--ink-2); }
.lw-steps li span{ font-size: 12.5px; }
.lw-steps li.now a{ border-color: var(--ink); }
.lw-steps li.now b{ color: var(--ink); }
.lw-steps li.done a{ border-color: var(--decided); }
.lw-steps li.done b::after{ content: " ✓"; color: var(--decided); }
@media (max-width: 640px){ .lw-steps{ grid-template-columns: minmax(0, 1fr); } }
.lw-points{ border-top: 1px solid var(--line); padding-top: 8px; }
.lw-points > summary{ cursor: pointer; font-size: 13.5px; color: var(--teal); font-weight: 500; }
.lw-points[open] > summary{ margin-bottom: 6px; }
/* New dossier on one path (5 November 2026): the files first, typing behind a click. */
.lw-one{ display: grid; gap: 14px; max-width: 820px; }
.lw-typed-box > summary{ cursor: pointer; font-weight: 600; }
.lw-typed{ display: grid; gap: 12px; margin-top: 12px; }
/* The green and red chips (accepted, signed; failed, law changed) had no colour of their own. */
.chip.ok{ color: var(--decided); background: var(--decided-soft); }
body:not(.legacy) .chip.bad{ color: var(--bad); background: var(--bad-soft); }
/* The worklist's rows: what to do, why, then money and dates (5 November 2026). */
body:not(.legacy) .work-row.lw-work{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(120px, auto); }
@media (max-width: 760px){ body:not(.legacy) .work-row.lw-work{ grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px){ .lw-bar .k{ display: none; } .lw-bar{ padding: 10px 12px; } .lw-bar .btn{ width: 100%; text-align: center; } }
/* A product reached from its card: under the top bar, outlined for a moment (5 November 2026). */
.lw-product{ scroll-margin-top: 72px; transition: box-shadow .5s; }
.lw-product.lw-landed{ box-shadow: 0 0 0 2px var(--teal); }
body:not(.legacy) .lw-menu-list .btn{ padding: 8px 10px; font-size: 14px; font-weight: 400; border-radius: 6px; }
/* The footer of every page: where a client's data goes (plan 046, step 4). */
.foot2{ padding-top: 4px; padding-bottom: 28px; font-size: 13px; color: var(--ink-3); }
.foot2 a{ color: var(--ink-2); }
.actions small.cost{ color: var(--ink-2); }
.data-page{ max-width: 820px; }
.data-page h2{ margin-top: 22px; }