/* VPG Appraisals -- design tokens and components.
   Lifted from design/*.dc.html (Material 3 Expressive, VPG navy & amber).
   Amber (tertiary) is reserved for moments a human makes the call; red (error)
   means only "a figure could not be confirmed on its line". */

@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/static/fonts/figtree-latin.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/static/fonts/space-grotesk-latin.woff2) format('woff2')}

:root{
  color-scheme:light;
  --primary:#243469;--on-primary:#ffffff;--primary-container:#dde1ff;--on-primary-container:#0a1a52;
  --secondary:#565a71;--secondary-container:#dde1f9;--on-secondary-container:#131b2c;
  --tertiary:#7a5900;--on-tertiary:#ffffff;--tertiary-container:#ffdf9e;--on-tertiary-container:#261900;
  --error:#ba1a1a;--error-container:#ffdad6;--on-error-container:#410002;
  --success:#1f6b43;--success-container:#a6f2c4;--on-success-container:#00210f;
  --surface:#faf8ff;--surface-container-lowest:#ffffff;--surface-container-low:#f4f2fb;
  --surface-container:#eeecf5;--surface-container-high:#e8e6f0;--surface-container-highest:#e2e0ea;
  --on-surface:#1a1b21;--on-surface-variant:#45464f;--outline:#767680;--outline-variant:#c7c5d0;
  --brand-deep:#2b3d7a;--brand-ink:#141d44;--inverse-surface:#22242c;--inverse-on-surface:#f2f0fa;
  --on-error:#ffffff;
  /* the two 'ink' stages (concluded value, live sync) and the sign-in brand panel */
  --ink-surface:#141d44;--on-ink:#f2f0fa;--ink-line:rgba(255,255,255,.16);--success-on-ink:#8fe3b0;
  --brand-grad-a:#2b3d7a;--brand-grad-b:#141d44;
  --select-arrow:url(/static/chevron.svg);
  --r-sm:12px;--r-md:16px;--r-lg:24px;--r-full:999px;
  --e1:0 1px 2px rgba(18,20,45,.10),0 1px 3px rgba(18,20,45,.05);
  --e2:0 4px 12px rgba(18,20,45,.12),0 2px 4px rgba(18,20,45,.06);
  --font-body:'Figtree',system-ui,sans-serif;
  --font-display:'Space Grotesk','Trebuchet MS',system-ui;
  /* motion: two durations, two easings (M3 standard / emphasized). Disabled under reduced-motion. */
  --motion-fast:150ms;--motion-base:220ms;--ease-standard:cubic-bezier(.2,0,0,1);--ease-emphasized:cubic-bezier(.3,0,0,1);
  /* focus ring */
  --focus:var(--primary);
}

/* ---- base ---------------------------------------------------------------- */
*{box-sizing:border-box}
/* Every line-drawn icon is 24px-grid SVG; a container that forgets to size it must never
   get a viewport-sized drawing (the Work page chevron and the sign-in denied mark did). */
svg{width:1.25em;height:1.25em;flex:0 0 auto}
html,body{height:100%}
body{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--on-surface);
  -webkit-font-smoothing:antialiased;background:var(--surface)}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:600;letter-spacing:-.015em;line-height:1.15}
p{margin:0}
a{color:var(--primary);text-decoration:none}a:hover{color:var(--on-primary-container)}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer}
.tab{font-family:var(--font-display);font-variant-numeric:tabular-nums}
.muted{color:var(--on-surface-variant)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow{font:600 12px/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--on-surface-variant)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot-lg{width:9px;height:9px}
.small{font-size:13px;color:var(--on-surface-variant)}
.meta{font-size:12.5px;color:var(--on-surface-variant)}
.strong{font-weight:600}

/* ---- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;height:auto;padding:11px 22px;max-width:100%;
  border-radius:var(--r-full);font:600 14px/1.35 var(--font-body);border:0;cursor:pointer;white-space:normal;overflow-wrap:break-word;
  color:inherit;background:transparent;text-decoration:none}
.btn svg{width:18px;height:18px;flex:0 0 18px}
.btn-filled{background:var(--primary);color:var(--on-primary)}
.btn-filled:hover{background:var(--brand-deep);color:var(--on-primary)}
.btn-tonal{background:var(--secondary-container);color:var(--on-secondary-container)}
.btn-outline{background:transparent;color:var(--primary);border:1px solid var(--outline)}
.btn-amber{background:var(--tertiary-container);color:var(--on-tertiary-container)}
/* disabled reads as disabled by its dashed outline, not by low contrast alone (text stays >= 4.5:1) */
.btn-disabled,.btn[disabled]{background:var(--surface-container-highest);color:var(--on-surface-variant);outline:1px dashed var(--outline);outline-offset:-1px;cursor:default}
.btn-lg{min-height:50px;padding:0 26px;font-size:15px}
.btn-block{width:100%}
.btn-text{background:transparent;color:var(--primary);min-height:44px;padding:11px 14px;font-size:13.5px}
.btn-text:hover{background:var(--surface-container-low)}
/* keyboard focus: one ring for every control, drawn outside the shape */
.btn:focus-visible,.icon-btn:focus-visible,.google:focus-visible,.rail-link:focus-visible,.navcol:focus-visible,
.grid-row:focus-visible,.crumb:focus-visible,a:focus-visible,.check input:focus-visible,
.file:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
.btn:focus-visible,.icon-btn:focus-visible,.google:focus-visible,.rail-link:focus-visible{border-radius:var(--r-full)}
/* a form that is talking to the AI or to Jotform: the pressed button says so and refuses a second press */
.btn.is-busy{pointer-events:none;opacity:.85}
.btn.is-busy svg{display:none}
.btn.is-busy::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;flex:0 0 16px}
@media (prefers-reduced-motion:no-preference){.btn.is-busy::before{animation:spin .8s linear infinite}}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn{width:44px;height:44px;padding:0;border-radius:50%;border:0;background:transparent;color:var(--on-surface-variant);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;text-decoration:none}
.icon-btn svg{width:20px;height:20px}
.icon-btn-outline{border:1px solid var(--outline);color:var(--primary)}

/* ---- chips --------------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-sm);
  font:600 12.5px/1 var(--font-body);background:var(--surface-container-high);color:var(--on-surface-variant);white-space:nowrap}
.chip svg{width:15px;height:15px}
.chip-amber{background:var(--tertiary-container);color:var(--on-tertiary-container)}
.chip-success{background:var(--success-container);color:var(--on-success-container)}
.chip-primary{background:var(--primary);color:var(--on-primary)}
.chip-outline{background:var(--surface-container-lowest);border:1px solid var(--outline-variant)}
.chip-error{background:var(--error-container);color:var(--on-error-container)}
.chip-wrap{white-space:normal;height:auto;min-height:30px;padding:6px 12px;line-height:1.3;word-break:break-word}

/* ---- cards --------------------------------------------------------------- */
.card{background:var(--surface-container-lowest);border:1px solid var(--outline-variant);border-radius:var(--r-lg);padding:24px}
.card-tonal{background:var(--surface-container-low);border-radius:var(--r-lg);padding:24px}
.card-flush{padding:0;overflow:hidden}
.card h2{font-size:19px}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.card-head .right{margin-left:auto;font-size:13px;color:var(--on-surface-variant)}
.stack{display:flex;flex-direction:column;gap:24px;min-width:0}
.stack-sm{display:flex;flex-direction:column;gap:10px}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.two-col-wide{grid-template-columns:minmax(0,1fr) 340px}

/* ---- identity ------------------------------------------------------------ */
.logo{width:46px;height:46px;border-radius:16px;background:linear-gradient(140deg,var(--brand-deep),var(--brand-ink));
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:22px;box-shadow:var(--e2);flex:0 0 auto}
.logo-lg{width:60px;height:60px;font-size:26px}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--secondary-container);color:var(--on-secondary-container);
  display:flex;align-items:center;justify-content:center;font:700 16px/1 var(--font-display);text-transform:uppercase;flex:0 0 auto}
.tile{width:38px;height:38px;border-radius:12px;background:var(--secondary-container);color:var(--on-secondary-container);
  display:flex;align-items:center;justify-content:center;font:700 15px/1 var(--font-display);text-transform:uppercase;flex:0 0 auto}
.tile-icon{width:40px;height:40px;border-radius:12px;background:var(--primary-container);color:var(--on-primary-container);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tile-icon svg{width:20px;height:20px}
.pdf{width:40px;height:40px;border-radius:12px;background:var(--error-container);color:var(--on-error-container);
  display:flex;align-items:center;justify-content:center;font:700 11px/1 var(--font-body);flex:0 0 auto}
.docx{width:42px;height:42px;border-radius:12px;background:var(--primary-container);color:var(--on-primary-container);
  display:flex;align-items:center;justify-content:center;font:700 11px/1 var(--font-body);flex:0 0 auto}

/* ---- app shell ----------------------------------------------------------- */
.shell{min-height:100vh;min-height:100dvh;display:flex;background:var(--surface)}
.rail{width:96px;flex:0 0 96px;background:var(--surface-container-low);display:flex;flex-direction:column;align-items:center;
  padding:22px 0;gap:24px;border-right:1px solid var(--outline-variant);position:sticky;top:0;height:100vh;height:100dvh}
.rail nav{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:4px}
.rail-link{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:inherit}
.rail-item{width:64px;height:44px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;color:var(--on-surface-variant)}
.rail-item svg{width:24px;height:24px}
.rail-item.active{background:var(--secondary-container);color:var(--on-secondary-container)}
.rail-label{font:500 12px/1 var(--font-body);color:var(--on-surface-variant)}
.rail-label.active{font-weight:600;color:var(--on-surface)}
.rail-divider{width:40px;height:1px;background:var(--outline-variant);margin:2px 0}
.shell-main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:76px;flex:0 0 76px;display:flex;align-items:center;gap:14px;padding:0 40px;border-bottom:1px solid var(--outline-variant);background:var(--surface)}
.topbar .title{font-family:var(--font-display);font-weight:600;font-size:19px;margin-top:2px}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.crumb{color:var(--on-surface-variant);font-weight:500;font-size:14px}
.crumb-sep{width:16px;height:16px;color:var(--outline)}
/* overflow-x:clip, never auto: an auto/hidden main becomes the scroll container and every
   position:sticky inside it (review actions, source panel, topbar) sticks to it instead of the viewport */
.content{flex:1;padding:34px 40px 40px;overflow:visible;overflow-x:clip;width:100%}
.content:not(.content-flush){max-width:1640px;align-self:center}
.content-flush{padding:0;display:flex;flex-direction:column}
.content-flush .flash{margin:20px 40px 0}
.content-flush .review{flex:1}
.flash{display:flex;align-items:flex-start;gap:12px;background:var(--tertiary-container);color:var(--on-tertiary-container);border-radius:var(--r-lg);padding:14px 20px;margin-bottom:24px;font-size:14px;line-height:1.5;white-space:pre-line}
.flash svg{flex:0 0 20px;width:20px;height:20px;margin-top:1px}
.flash-warn{background:var(--tertiary-container);color:var(--on-tertiary-container)}
.flash-success{background:var(--success-container);color:var(--on-success-container)}
.flash-info{background:var(--surface-container-high);color:var(--on-surface)}
.flash-error{background:var(--error-container);color:var(--on-error-container)}
/* twelve-state stepper: done = filled check, current = primary ring, gates = amber */
.stepper{list-style:none;margin:0;padding:0;display:flex;gap:0;min-width:max-content}
.step{display:flex;flex-direction:column;align-items:center;gap:6px;width:92px;position:relative;font:500 11.5px/1.25 var(--font-body);color:var(--on-surface-variant);text-align:center}
.step:not(:last-child)::after{content:"";position:absolute;top:13px;left:calc(50% + 14px);width:calc(100% - 28px);height:2px;background:var(--outline-variant)}
.step.done:not(:last-child)::after{background:var(--primary)}
.step-dot{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-container-high);color:var(--on-surface-variant);font:700 12px/1 var(--font-display)}
.step-dot svg{width:14px;height:14px}
.step.done .step-dot{background:var(--primary);color:var(--on-primary)}
.step.current .step-dot{background:var(--surface-container-lowest);color:var(--primary);outline:3px solid var(--primary)}
.step.current .step-label{color:var(--on-surface);font-weight:600}
.step.gate .step-dot{outline:2px solid var(--tertiary);outline-offset:1px}
.step.gate.done .step-dot{outline:0}
.step.gate.current .step-dot{background:var(--tertiary-container);color:var(--on-tertiary-container);outline:3px solid var(--tertiary)}
.step-label{max-width:88px}
.warn{background:var(--tertiary-container);color:var(--on-tertiary-container);border-radius:var(--r-sm);padding:11px 12px;white-space:pre-line;font-size:13.5px;line-height:1.45}
.warn ul{margin:6px 0 0;padding-left:18px}
.warn-error{background:var(--error-container);color:var(--on-error-container)}
.banner{display:flex;align-items:flex-start;gap:14px;border-radius:var(--r-lg);padding:16px 20px;font-size:14px;line-height:1.5}
.banner[hidden]{display:none}
.banner svg{flex:0 0 24px;width:24px;height:24px;margin-top:1px}
.banner-info{background:var(--primary-container);color:var(--on-primary-container)}
.banner-amber{background:var(--tertiary-container);color:var(--on-tertiary-container)}
.banner-error{background:var(--error-container);color:var(--on-error-container)}
.banner .title{font-weight:600;font-size:15px}
.banner details{margin-top:6px}.banner summary{cursor:pointer;font-weight:600}
/* the practice hero's one-line facts, separated by CSS so no stray dot wraps alone */
.hero-meta{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:8px;font-size:14px;color:var(--on-surface-variant)}
.hero-meta span+span::before{content:"\00b7";margin:0 8px;color:var(--outline)}
.banner ul{margin:6px 0 0;padding-left:18px}

/* ---- page header --------------------------------------------------------- */
.page-head{display:flex;align-items:flex-end;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.page-head h1{font-size:40px;line-height:1.05}
.page-head .lede{margin:10px 0 0;font-size:16px;color:var(--on-surface-variant)}
.page-head .actions{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap}
.section-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.section-head .btn-text{white-space:nowrap}
.section-head h2{font-size:20px}
.section-head .more{margin-left:auto;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:4px}
.section-head .more svg{width:18px;height:18px}
.section-head .right{margin-left:auto}

/* ---- inputs -------------------------------------------------------------- */
.input{height:52px;border-radius:var(--r-sm);border:1px solid var(--outline);background:var(--surface-container-lowest);
  display:flex;align-items:center;padding:0 16px;font:600 16px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--on-surface);width:100%}
.input-focus{border:2px solid var(--primary)}
.input:has(input:disabled),.select:disabled,.field:disabled{background:var(--surface-container-low);border-color:var(--outline-variant);color:var(--on-surface-variant);cursor:not-allowed}
.input input:disabled{color:var(--on-surface-variant);cursor:not-allowed;-webkit-text-fill-color:currentColor;opacity:1}
.input .bare{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:inherit;padding:0;height:100%}
.input .bare:focus{outline:0}
.input:focus-within{outline:2px solid var(--primary);outline-offset:1px}
.seg{cursor:pointer;position:relative}
.seg svg{display:none}
.seg.on svg{display:inline}
.seg.has-focus{outline:2px solid var(--focus);outline-offset:2px}
.input-readonly{background:var(--surface-container-low);border-color:transparent;font-weight:500}
.input-readonly .unit a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.input .unit{margin-left:auto;font:500 13px/1 var(--font-body);color:var(--on-surface-variant)}
.input .prefix{color:var(--on-surface-variant);margin-right:6px}
.fieldlabel{font:600 12.5px/1 var(--font-body);color:var(--on-surface-variant);margin-bottom:8px}
.field{height:44px;border-radius:var(--r-sm);border:1px solid var(--outline);background:var(--surface-container-lowest);
  padding:0 14px;font:500 14px/1 var(--font-body);color:var(--on-surface);width:100%}
.field:focus,.select:focus,.textarea:focus,.override:focus{outline:2px solid var(--primary);outline-offset:1px}
.field-sm{width:auto;min-width:96px}
.select{height:44px;border-radius:var(--r-sm);border:1px solid var(--outline);background:var(--surface-container-lowest);
  padding:0 40px 0 14px;color:var(--on-surface);font:600 14px/1 var(--font-body);appearance:none;-webkit-appearance:none;
  background-image:var(--select-arrow);
  background-repeat:no-repeat;background-position:right 12px center;width:100%}
.textarea,#settings-form textarea{width:100%;min-height:24rem;border-radius:var(--r-md);border:1px solid var(--outline);background:var(--inverse-surface);color:var(--inverse-on-surface);
  padding:14px 16px;font:500 12.5px/1.7 var(--font-display);resize:vertical}
.file{font:500 13px/1.4 var(--font-body);color:var(--on-surface-variant);min-width:0}
.file::file-selector-button{height:44px;padding:0 16px;margin-right:10px;border-radius:var(--r-full);border:1px solid var(--outline);
  background:var(--surface-container-lowest);color:var(--primary);font:600 13.5px/1 var(--font-body);cursor:pointer}
.file::file-selector-button:hover{background:var(--surface-container-low)}
.seg-group{display:inline-flex;background:var(--surface-container-high);border-radius:var(--r-full);padding:4px;gap:2px}
.seg{height:44px;padding:0 22px;border-radius:var(--r-full);display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--font-body);color:var(--on-surface-variant)}
.seg svg{width:16px;height:16px}
.seg.on{background:var(--secondary-container);color:var(--on-secondary-container)}
.effect{min-height:52px;display:flex;align-items:center;padding:0 16px;border-radius:var(--r-sm);background:var(--primary-container);color:var(--on-primary-container);font-size:13.5px;line-height:1.4}
.readout{display:flex;align-items:center;gap:16px;border-radius:var(--r-md);background:var(--surface-container-low);padding:14px 18px;flex-wrap:wrap}
.readout .right{margin-left:auto;font-size:12.5px;color:var(--on-surface-variant)}
.inline-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:10px;font-size:14px}
.check input{width:20px;height:20px;accent-color:var(--primary)}

/* ---- stats and value strip ---------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat{border:1px solid var(--outline-variant);border-radius:var(--r-md);padding:16px}
.stat .value{font-weight:600;font-size:26px;margin-top:6px}
.stat .sub{font-size:13px;color:var(--on-surface-variant);margin-top:2px}
.value-strip{margin-top:16px;border-radius:var(--r-md);background:var(--ink-surface);color:var(--on-ink);border:1px solid transparent;padding:20px 22px;
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;align-items:center}
.value-strip .label{font:600 12px/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;opacity:.75}
.value-strip .big{font-weight:600;font-size:36px;margin-top:8px}
.value-strip .sub{font-size:12.5px;opacity:.75;margin-top:4px}
.value-strip .method{border-left:1px solid var(--ink-line);padding-left:18px}
.value-strip .method .name{font-size:12.5px;opacity:.75}
.value-strip .method .amt{font-weight:600;font-size:20px;margin-top:4px}
.ink-card{border-radius:var(--r-lg);padding:24px;background:var(--ink-surface);color:var(--on-ink);border:1px solid transparent}
.ink-card .label{display:flex;align-items:center;gap:9px;font:600 12px/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;opacity:.8}
.ink-card .big{font-weight:600;font-size:34px;margin-top:14px}
.ink-card .sub{opacity:.82;font-size:14px;margin-top:2px}
.ink-card hr{border:0;height:1px;background:var(--ink-line);margin:18px 0}
.ink-card .kv{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;opacity:.88;margin-top:8px;gap:12px}
.ink-card .kv:first-of-type{margin-top:0}
.ink-card .ok{display:inline-flex;align-items:center;gap:5px}
.ink-card a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ink-card .ok svg{width:14px;height:14px;color:var(--success-on-ink)}
.dot-ok{background:var(--success-on-ink)}.dot-error{background:var(--error)}
.ink-card .btn{margin-top:16px}

/* ---- tables (grid rows) -------------------------------------------------- */
.table-wrap{overflow-x:auto}
.financial-source-review .table-wrap{overflow-x:auto;max-width:100%}
.financial-source-review table{border-collapse:collapse;width:100%;min-width:480px}
.financial-source-review th,.financial-source-review td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--outline-variant);overflow-wrap:anywhere}
.financial-source-review th{background:var(--surface-container-low)}
.financial-source-review .source-amount{white-space:nowrap;font-variant-numeric:tabular-nums}
.grid-head{display:grid;gap:16px;padding:14px 22px;background:var(--surface-container-low)}
.grid-row{display:grid;gap:16px;padding:18px 22px;align-items:center;border-top:1px solid var(--outline-variant)}
.grid-row:hover{background:var(--surface-container-low)}
.cols-practices{grid-template-columns:2.4fr 1.5fr 1.6fr 40px;min-width:600px}
.cols-dismissed{grid-template-columns:2fr 1.6fr 1fr 1.6fr auto;min-width:720px}
.cols-people{grid-template-columns:minmax(0,2.6fr) 90px minmax(0,1.1fr) minmax(0,1.3fr) auto;min-width:760px}
.cols-addbacks{grid-template-columns:minmax(190px,1.6fr) minmax(130px,1fr) minmax(100px,1.8fr) 160px;gap:12px;padding-left:18px;padding-right:18px}
.cols-addbacks.grid-row{grid-template-areas:"main amt sug pills" "notes notes notes notes";row-gap:8px;padding-top:12px;padding-bottom:12px}
.cols-figures{grid-template-columns:1.7fr 1fr 64px 96px 1.2fr;gap:14px;min-width:720px}
.cols-figures.grid-row{padding-top:14px;padding-bottom:14px}
.figure-row .labelwrap{order:1;min-width:0}.figure-row .val{order:2}.figure-row .page{order:3}.figure-row .confirmed{order:4}.figure-row .fix{order:5;min-width:0}
.cols-timeline{grid-template-columns:auto 1fr auto}
.cols-forms{grid-template-columns:1.6fr 1fr 130px 1.6fr;min-width:640px}
.cols-calls{grid-template-columns:110px 1fr 1.4fr 130px 70px 150px;min-width:720px}
.cols-forms.grid-row,.cols-calls.grid-row{padding-top:12px;padding-bottom:12px}
/* Activity: the feed (when, who, practice, what) and the people summary */
.cols-activity{grid-template-columns:150px minmax(0,1fr) minmax(0,1.1fr) minmax(0,2.4fr);min-width:720px}
.cols-activity-people{grid-template-columns:minmax(0,1.6fr) 1fr 1fr 80px 120px;min-width:640px}
.cols-activity.grid-row,.cols-activity-people.grid-row{padding-top:12px;padding-bottom:12px;align-items:start}
.activity-refused{background:color-mix(in srgb,var(--tertiary-container) 38%,transparent);box-shadow:inset 4px 0 0 var(--tertiary)}
.stack-label{display:none}
.name-cell{display:flex;align-items:center;gap:12px;min-width:0}
.name-cell .name{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.name-cell .sub{overflow-wrap:anywhere}
.name-cell .sub{font-size:12.5px;color:var(--on-surface-variant)}
.chev{width:20px;height:20px;color:var(--on-surface-variant)}
.years{display:flex;align-items:center;gap:6px}
.years .count{font-size:13px;color:var(--on-surface-variant);margin-left:4px}
.bordered{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--outline-variant)}
.rounded-table{background:var(--surface-container-lowest);border:1px solid var(--outline-variant);border-radius:var(--r-lg);overflow:hidden}

/* ---- documents ----------------------------------------------------------- */
.docrow{display:flex;align-items:center;gap:14px;background:var(--surface-container-low);border-radius:var(--r-md);padding:12px 16px;flex-wrap:wrap}
.docrow .body{flex:1;min-width:160px}
.docrow .name{font-weight:600;font-size:14.5px;word-break:break-word}
.docrow .sub{font-size:12.5px;color:var(--on-surface-variant)}
.docrow .actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.upload{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---- add-backs ----------------------------------------------------------- */
.pill-off{height:44px;padding:0 16px;border-radius:var(--r-full);border:1px solid var(--outline);color:var(--on-surface-variant);font:600 13px/1 var(--font-body);display:inline-flex;align-items:center;background:transparent;cursor:pointer}
.pill-off svg{display:none}
.pills{display:flex;gap:8px;justify-content:center}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;inset:0}
.pill input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px}
.suggestion{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.suggestion .why{font-size:12.5px;color:var(--on-surface-variant)}
/* One native <details> per tax year: the summary is the heading, the AI and bulk buttons sit under it. */
.year-head{display:flex;align-items:center;gap:10px;min-height:44px;margin:0 0 6px;cursor:pointer;list-style:none}
.year-head::-webkit-details-marker{display:none}
.year-head::before{content:"";width:7px;height:7px;border:solid var(--on-surface-variant);border-width:0 2px 2px 0;transform:rotate(-45deg);flex:0 0 7px;margin:0 4px 0 2px}
.year-group[open]>.year-head::before{transform:rotate(45deg)}
.year-group{margin-bottom:6px}
.year-group[open]{margin-bottom:18px}
.year-title{font-size:17px}
.year-tools{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:0 0 12px}
.year-tools .btn[hidden],.ab-apply[hidden]{display:none}
/* Row = ledger line: label + provenance | amount | AI suggestion | Keep/Drop, notes underneath. */
.ab-main{grid-area:main;min-width:0}.ab-amount{grid-area:amt;display:block}.cols-addbacks .suggestion{grid-area:sug}.cols-addbacks .pills{grid-area:pills}
.ab-label{font-size:14.5px;overflow-wrap:anywhere}
.ab-origin{overflow-wrap:anywhere}
.ab-apply{padding:4px 0;font-size:12.5px;justify-content:flex-start}
.ab-apply:hover{background:transparent;text-decoration:underline}
.ab-cap{display:none;margin-bottom:4px;font:600 12px/1 var(--font-body);color:var(--on-surface-variant)}
.ab-mismatch{display:block;height:auto;padding:6px 12px;font-size:13px;line-height:1.4;white-space:normal}
.ab-note-help{grid-column:1/-1}
.ab-notes{grid-area:notes;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.ab-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start}
.ab-note>.small{padding-top:12px}
.ab-note .field-textarea{field-sizing:content;min-height:44px;max-height:240px;padding:10px 12px}
/* Restack by the card's own width, not the window's: 721-1290px windows leave the card narrow too. */
#adjustments{container:addbacks / inline-size}
@container addbacks (max-width:760px){
  .grid-head.cols-addbacks{display:none}
  .cols-addbacks.grid-row{grid-template-columns:minmax(0,1fr) 128px;grid-template-areas:"main amt" "sug sug" "pills pills" "notes notes";gap:8px 12px;padding:14px 16px;align-items:start}
  .ab-cap{display:block}
  .cols-addbacks .pills{justify-content:flex-start}
  .ab-notes{gap:8px}
  .ab-notes.is-filled{grid-template-columns:minmax(0,1fr)}
  .ab-note{grid-template-columns:minmax(0,1fr);gap:4px}
  .ab-note>.small{padding-top:0}
}
@container addbacks (min-width:481px) and (max-width:760px){
  /* room for Keep/Drop beside the amount: the suggestion drops to its own line */
  .cols-addbacks.grid-row{grid-template-columns:minmax(0,1fr) 128px auto;grid-template-areas:"main amt pills" "sug sug sug" "notes notes notes"}
  .cols-addbacks .pills{margin-top:16px}
}
@container addbacks (max-width:480px){
  .cols-addbacks .pill{flex:1}
  .cols-addbacks .pill-off{width:100%;justify-content:center}
}
/* Save decisions + "14 of 21 decided", pinned above the bottom nav on a phone. */
.form-savebar{position:sticky;bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));z-index:5;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;
  margin:16px -16px 0;padding:10px 16px;background:var(--surface-container-lowest);border-top:1px solid var(--outline-variant)}
.ab-status{flex:1 1 200px;min-width:0}
@media (min-width:721px){.form-savebar{bottom:0;margin:16px -24px 0;padding:12px 24px}}
/* Tabbing to a field must never leave it under the pinned bar (same guard as .review-actions). */
html:has(.form-savebar){scroll-padding-bottom:110px}
@media (max-width:720px){html:has(.form-savebar){scroll-padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 110px)}}

/* ---- extraction review --------------------------------------------------- */
.tick{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px}
.tick svg{width:15px;height:15px}
.tick[hidden]{display:none}
.tick-ok{background:var(--success-container);color:var(--on-success-container)}
.tick-no{background:var(--error);color:var(--on-error)}
/* the model found the line but doubts its own reading: amber, a human decides; not red, not green */
.tick-unsure{background:var(--tertiary);color:var(--on-tertiary);font:700 14px/1 var(--font-display)}
.figure-row.flagged.unsure{background:var(--tertiary-container);color:var(--on-tertiary-container)}
.figure-row.flagged.unsure .line,.figure-row.flagged.unsure .page{color:var(--on-tertiary-container)}
.figure-row.flagged.unsure .override{border-color:var(--tertiary)}
.pline.unsure{background:var(--tertiary-container);outline:2px solid var(--tertiary)}
.pline.flagged{background:var(--error-container);outline:2px solid var(--error)}
.tick-sm{width:20px;height:20px;flex-basis:20px}.tick-sm svg{width:12px;height:12px}
.figure-row.flagged{background:var(--error-container);color:var(--on-error-container)}
.figure-row .label{font-weight:600;font-size:14.5px}
.figure-row .line{font-size:12px;color:var(--on-surface-variant)}
.figure-row.flagged .line{color:var(--on-error-container)}
.figure-row .val{text-align:right;font-size:15px}
.figure-row.flagged .val{text-decoration:none}
.confirm-reading{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13.5px;margin-bottom:4px;cursor:pointer}
.confirm-reading input{flex:0 0 22px;width:22px;height:22px;accent-color:var(--primary)}
.figure-row .page{display:flex;justify-content:center;text-align:center;color:var(--on-surface-variant);font-size:14px}
.figure-row .page a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-weight:600;text-decoration:underline;color:inherit}
.figure-row.flagged .page{color:var(--on-error-container)}
.figure-row .confirmed{display:flex;justify-content:center;align-items:center;gap:6px}
.none{height:44px;border-radius:var(--r-sm);background:var(--surface-container-low);display:flex;align-items:center;padding:0 12px;font:500 14px/1 var(--font-body);color:var(--on-surface-variant)}
.override{height:44px;width:100%;border-radius:var(--r-sm);border:2px solid var(--error);background:var(--surface-container-lowest);padding:0 12px;font:600 14px/1 var(--font-body);color:var(--on-surface)}
.override::placeholder{color:var(--on-surface-variant);font-weight:600}
.checks{display:flex;flex-direction:column;gap:10px}
.check-tile{display:flex;align-items:center;gap:10px;background:var(--surface-container-low);border-radius:var(--r-md);padding:12px 16px}
.check-tile .k{font-size:12px;color:var(--on-surface-variant)}
.check-tile .v{font-weight:600;font-size:14px}
.explainer{flex:1;background:var(--surface-container-low);border-radius:var(--r-md);padding:16px 18px;font-size:13.5px;line-height:1.5;color:var(--on-surface-variant)}
.explainer>summary{min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--on-surface);cursor:pointer}
.explainer>p{margin:0 0 4px}
.review{flex:1;display:grid;grid-template-columns:1fr 470px;min-height:0}
.review-main{padding:28px 40px 32px;display:flex;flex-direction:column;min-width:0}
.review-intro{display:flex;gap:16px;margin-bottom:18px;align-items:flex-start}
.source-toggle,.source-close{display:none}
.review-actions{display:flex;align-items:center;gap:12px;margin-top:20px;padding:12px 0;flex-wrap:wrap;position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--outline-variant)}
.review-actions .status{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--on-surface-variant)}
.review-actions .buttons{margin-left:auto;display:flex;gap:12px}
.source{background:var(--surface-container);padding:28px;display:flex;flex-direction:column;border-left:1px solid var(--outline-variant)}
.source .head{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.source .head .file{margin-left:auto;font-size:12.5px;color:var(--on-surface-variant);word-break:break-all}
.source .sheet{background:var(--surface-container-lowest);border-radius:var(--r-md);box-shadow:var(--e2);padding:34px 30px;font-family:var(--font-display);color:var(--on-surface)}
.source .sheet .kicker{font-size:12px;letter-spacing:.14em;color:var(--on-surface-variant);text-transform:uppercase}
.source .sheet hr{border:0;height:1px;background:var(--outline-variant);margin:14px 0 18px}
.source .note{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:12.5px;line-height:1.5;color:var(--on-surface-variant)}
.source .note svg{flex:0 0 17px;width:17px;height:17px;margin-top:1px;color:var(--primary)}
.pline{display:flex;justify-content:space-between;padding:9px 8px;font-size:14px;border-radius:8px;gap:12px}

/* ---- reports & timeline -------------------------------------------------- */
.report{border:1px solid var(--outline-variant);border-radius:var(--r-md);padding:16px}
.report .file{font-weight:600;font-size:14.5px;margin:10px 0 3px;word-break:break-all}
.report-old{display:flex;align-items:center;gap:10px;padding:14px 4px 2px;color:var(--on-surface-variant);flex-wrap:wrap}
.report-old .file{font-size:13px;word-break:break-all}
.report-old .right{font-size:12.5px;margin-left:auto}
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:14px}
.tl-rail{display:flex;flex-direction:column;align-items:center}
.tl-dot{width:11px;height:11px;border-radius:50%;background:var(--primary);flex:0 0 11px}
.tl-line{flex:1;width:2px;background:var(--outline-variant)}
.tl-body{padding-bottom:18px;min-width:0}
.tl-body .what{font-weight:600;font-size:14px}
.tl-body .who{font-size:12.5px;color:var(--on-surface-variant)}

/* ---- login --------------------------------------------------------------- */
.login{min-height:100vh;min-height:100dvh;display:flex;background:var(--surface)}
.brand{width:760px;flex:0 0 760px;position:relative;overflow:hidden;color:#fff;padding:64px;
  background:radial-gradient(120% 120% at 18% 8%,var(--brand-grad-a) 0%,var(--brand-grad-b) 100%)}
.brand .blob-a{position:absolute;width:520px;height:520px;border-radius:44% 56% 62% 38%/48% 42% 58% 52%;background:rgba(255,223,158,.16);right:-140px;top:-120px}
.brand .blob-b{position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(126,141,201,.28);left:-90px;bottom:-70px}
.brand .blob-c{position:absolute;width:150px;height:150px;border-radius:40px;background:rgba(255,255,255,.08);right:130px;bottom:150px;transform:rotate(18deg)}
.brand .inner{position:relative;display:flex;flex-direction:column;height:100%;min-height:calc(100vh - 128px);min-height:calc(100dvh - 128px)}
.brand .mark{display:flex;align-items:center;gap:14px}
.brand .mark .v{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:26px}
.brand .mark .name{font-family:var(--font-display);font-weight:600;font-size:18px}
.brand .mark .sub{opacity:.7;font-size:13px;letter-spacing:.04em}
.brand .pitch{margin-top:auto;max-width:520px}
.brand .pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:var(--r-full);background:rgba(255,255,255,.12);font:600 12.5px/1 var(--font-body);letter-spacing:.05em;margin-bottom:22px}
.brand .pill .dot{background:#8fe3b0}
.brand .headline{margin:0;font-family:var(--font-display);font-weight:600;font-size:54px;line-height:1.04;letter-spacing:-.02em}
.brand .lede{font-size:17px;line-height:1.55;opacity:.82;margin:22px 0 0}
.brand .stats{margin-top:44px;display:flex;gap:34px;opacity:.9;grid-template-columns:none}
.brand .stats .n{font-weight:600;font-size:30px}
.brand .stats .l{font-size:13px;opacity:.7}
.brand .stats .vr{width:1px;background:rgba(255,255,255,.16)}
.signin{flex:1;display:flex;align-items:center;justify-content:center;padding:48px}
.signin .box{width:100%;max-width:400px}
.signin h1{font-size:34px;letter-spacing:-.02em}
.signin .lede{margin:12px 0 34px;font-size:15.5px;color:var(--on-surface-variant);line-height:1.5}
.google{width:100%;height:58px;border-radius:var(--r-full);border:1px solid var(--outline);background:var(--surface-container-lowest);
  display:flex;align-items:center;justify-content:center;gap:12px;font:600 15.5px/1 var(--font-body);color:var(--on-surface);cursor:pointer;text-decoration:none}
.google svg{width:22px;height:22px}
.divider{display:flex;align-items:center;gap:10px;margin:26px 0;color:var(--on-surface-variant)}
.divider span{flex:1;height:1px;background:var(--outline-variant)}
.divider em{font-style:normal;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.lock{display:flex;align-items:flex-start;gap:12px;background:var(--surface-container-low);border-radius:16px;padding:16px 18px;font-size:13px;color:var(--on-surface-variant);line-height:1.5}
.lock svg{flex:0 0 20px;width:20px;height:20px;color:var(--primary)}
.lock strong{color:var(--on-surface)}
.denied svg{flex:0 0 18px;width:18px;height:18px;margin-top:1px}
.denied{display:flex;align-items:flex-start;gap:10px;background:var(--error-container);color:var(--on-error-container);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:20px;font-size:13.5px;line-height:1.45}

/* ---- bottom navigation (phone, and any short landscape screen) ---------- */
.bottom-nav{display:none}
@media (max-width:720px),(max-height:500px) and (orientation:landscape){
  .rail{display:none}
  .shell{flex-direction:column}
  .shell-main{padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom))}
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    background:var(--surface-container-low);border-top:1px solid var(--outline-variant);align-items:center;
    padding:0 max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left));z-index:10}
  .navcol{flex:1;min-width:0;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--on-surface-variant);text-decoration:none;font:500 12px/1 var(--font-body)}
  .navcol.active{color:var(--on-secondary-container);font-weight:600}
  .navpill{width:min(56px,100%);height:32px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center}
  .navpill svg{width:22px;height:22px}
  .navcol.active .navpill{background:var(--secondary-container)}
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1100px){
  .two-col,.two-col-wide{grid-template-columns:1fr}
  .review{grid-template-columns:1fr}
  .source{border-left:0;border-top:1px solid var(--outline-variant)}
  .brand{width:46%;flex-basis:46%;padding:44px}
  .brand .headline{font-size:40px}
}
@media (max-width:720px){
  .topbar{height:auto;flex-basis:auto;padding:12px 18px;gap:12px;flex-wrap:wrap}
  .content{padding:18px 18px 28px}
  .review-main{padding:18px 18px 24px}
  .source{padding:18px}
  .page-head h1{font-size:30px}
  .page-head .actions{margin-left:0;width:100%}
  .page-head .actions .btn{flex:1}
  .stats{grid-template-columns:1fr 1fr}
  .value-strip{grid-template-columns:1fr}
  .value-strip .method{border-left:0;padding-left:0;border-top:1px solid var(--ink-line);padding-top:12px}
  .value-strip .big{font-size:30px}
  .card,.card-tonal{padding:16px;border-radius:var(--r-lg)}
  .card-flush{padding:0}
  .grid-head.cols-practices{display:none}
  .cols-practices{min-width:0}
  .cols-practices.grid-row{grid-template-columns:1fr auto;padding:14px 16px}
  .grid-head.cols-dismissed{display:none}
  .cols-dismissed{min-width:0}
  .cols-dismissed.grid-row{grid-template-columns:1fr;gap:6px;padding:14px 16px}
  .grid-head.cols-people{display:none}
  .cols-people{min-width:0}
  .cols-people.grid-row{grid-template-columns:1fr;gap:6px;padding:14px 16px}
  .table-wrap{overflow-x:visible}
  .review-actions{position:sticky;bottom:78px;background:var(--surface);border-top:1px solid var(--outline-variant);margin:16px -18px 0;padding:12px 18px 12px}
  .review-actions .buttons{width:100%;margin-left:0}
  .review-actions .buttons .btn{flex:1}
  .review-actions .buttons .btn-outline{flex:0 0 96px}
  .review-intro{flex-direction:column}
  /* each figure becomes a stacked card */
  .rounded-table{background:transparent;border:0;border-radius:0;overflow:visible}
  .grid-head.cols-figures{display:none}
  .cols-figures{min-width:0}
  .cols-figures.grid-row{grid-template-columns:26px 1fr auto;
    background:var(--surface-container-lowest);border:1px solid var(--outline-variant);border-radius:var(--r-md);padding:14px 16px;margin-bottom:10px;gap:4px 12px;border-top:1px solid var(--outline-variant)}
  .figure-row.flagged{border-color:var(--error)}
  .figure-row.flagged.unsure{border-color:var(--tertiary)}
  .figure-row .confirmed{order:1;justify-content:flex-start;align-self:center;flex-direction:column;gap:2px}
  .figure-row .labelwrap{order:2}
  .figure-row .page{display:none}
  .figure-row .val{order:3;font-size:16px;align-self:center}
  .figure-row .fix{order:5;grid-column:1 / -1;margin-top:8px}
  .figure-row .none{display:none}
  .figure-row .override{height:48px}
  .brand{display:none}
  .login{flex-direction:column}
  .signin{padding:32px 20px;align-items:stretch;flex-direction:column;justify-content:flex-start}
  .figure-row .confirmed .meta{display:none}
  .signin::before{content:"Visionary Practice Group";display:block;font:600 12px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--on-surface-variant);margin-bottom:12px}
  .hide-phone{display:none}
}

/* keep/drop radios: the selected pill is filled primary with a check; nothing is
   pre-selected from the AI suggestion. */
.pill input:checked + .pill-off{background:var(--primary);color:var(--on-primary);border-color:transparent}
.pill input:checked + .pill-off svg{display:inline;width:14px;height:14px}
.pill input:checked + .pill-off{gap:6px}

/* ---- utilities (replace the inline styles the templates repeated) ------- */
.mb-6{margin-bottom:6px}.mb-12{margin-bottom:12px}.mb-14{margin-bottom:14px}.mb-16{margin-bottom:16px}.mb-18{margin-bottom:18px}
.mb-22{margin-bottom:22px}.mb-24{margin-bottom:24px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}.mt-16{margin-top:16px}
.ta-r{text-align:right}.ta-c{text-align:center}.minw0{min-width:0}.ml-auto{margin-left:auto}.flex1{flex:1;min-width:0}
.row{display:flex;align-items:center;gap:10px}.row-wrap{flex-wrap:wrap}.gap-8{gap:8px}
.h-sub{font-size:18px}.h-sm{font-size:16px}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prose{font-size:14px;line-height:1.5;color:var(--on-surface-variant)}
.page-max{max-width:1100px}
.grid-empty{grid-template-columns:1fr;color:var(--on-surface-variant)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px}
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.field-grid-sm{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.doc-tile{display:flex;align-items:center;gap:14px;background:var(--surface-container-low);border-radius:var(--r-md);padding:16px}
.tl-dot.first{background:var(--primary)}.tl-dot.mid{background:var(--secondary)}.tl-dot.last{background:var(--outline)}

/* ---- empty states -------------------------------------------------------- */
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:8px 0 4px;color:var(--on-surface-variant);font-size:14px;line-height:1.5}
.empty .title{font-weight:600;color:var(--on-surface);font-size:15px}
.empty-hero{text-align:center;padding:40px 24px;border:1px dashed var(--outline-variant);border-radius:var(--r-lg)}
.empty-hero .tile-icon{margin:0 auto 14px}
.empty-hero .title{font-family:var(--font-display);font-size:20px;color:var(--on-surface);font-weight:600}
.empty-hero p{margin:8px auto 0;max-width:440px;color:var(--on-surface-variant);font-size:14px;line-height:1.5}

/* ---- error page (403 / 404 / 413) ---------------------------------------- */
.error-page{max-width:560px;margin:8vh auto 0;text-align:center}
.error-page .code{font:600 12px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--on-surface-variant)}
.error-page h1{font-size:32px;margin-top:10px}
.error-page p{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--on-surface-variant)}
.error-page .actions{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}

/* ---- motion ---------------------------------------------------------------
   State layers and small transitions. Every rule sits under no-preference so a
   reduced-motion setting gets an instant, still-correct UI. */
@media (prefers-reduced-motion:no-preference){
  .btn,.icon-btn,.google,.pill-off,.seg,.rail-item,.navpill,.chip-outline,.grid-row,.docrow,.field,.select,.override,.input{
    transition:background-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),
      border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard),
      transform var(--motion-fast) var(--ease-standard),outline-color var(--motion-fast) var(--ease-standard)}
  .btn:active:not(.is-busy),.icon-btn:active,.google:active,.pill-off:active{transform:scale(.97)}
  .btn-disabled:active{transform:none}
  .step-dot{transition:background-color var(--motion-base) var(--ease-emphasized),color var(--motion-base) var(--ease-emphasized),outline-color var(--motion-base) var(--ease-emphasized)}
  .step:not(:last-child)::after{transition:background-color var(--motion-base) var(--ease-emphasized)}
  .flash{animation:flash-in var(--motion-base) var(--ease-emphasized) both}
  @keyframes flash-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  [data-accept-button]{transition:background-color var(--motion-base) var(--ease-emphasized),color var(--motion-base) var(--ease-emphasized),transform var(--motion-base) var(--ease-emphasized)}
  .rail-item.active,.navcol.active .navpill{animation:pill-in var(--motion-base) var(--ease-emphasized)}
  @keyframes pill-in{from{transform:scaleX(.6);opacity:.4}to{transform:none;opacity:1}}
}
/* hover state layers (M3 8% / pressed 12%), colour-independent so they work on every button */
.btn-tonal:hover{background:color-mix(in srgb,var(--secondary-container),var(--on-secondary-container) 8%)}
.btn-outline:hover{background:color-mix(in srgb,transparent,var(--primary) 8%)}
.btn-amber:hover{background:color-mix(in srgb,var(--tertiary-container),var(--on-tertiary-container) 8%)}
.icon-btn:hover{background:color-mix(in srgb,transparent,var(--on-surface) 8%)}
.pill-off:hover{background:color-mix(in srgb,transparent,var(--primary) 8%)}
.pill input:checked + .pill-off:hover{background:var(--brand-deep)}
.rail-link:hover .rail-item{background:color-mix(in srgb,transparent,var(--on-surface) 8%)}
.rail-link:hover .rail-item.active{background:var(--secondary-container)}
.google:hover{background:var(--surface-container-low)}
.seg:hover:not(.on){background:color-mix(in srgb,transparent,var(--on-surface) 6%)}
.btn-filled:active,.pill input:checked + .pill-off:active{background:var(--brand-ink)}
.btn-disabled:hover,.btn[disabled]:hover{background:var(--surface-container-highest);color:var(--on-surface-variant)}

/* ---- dark theme -----------------------------------------------------------
   M3 roles re-tuned for dark, defined once for the OS preference and once for the
   [data-theme="dark"] hook; [data-theme="light"] wins over the OS preference. Elevation
   reads lighter = higher (page < card < tonal card < chip). The ink stages sit in a deep
   navy well, clearly darker than the blue --primary-container banners, with a hairline so
   the concluded value keeps its stage; the sign-in panel keeps its gradient. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --primary:#b8c3ff;--on-primary:#0a1a52;--primary-container:#243469;--on-primary-container:#dde1ff;
    --secondary:#bec6dc;--secondary-container:#3e4459;--on-secondary-container:#dde1f9;
    --tertiary:#f5be48;--on-tertiary:#402d00;--tertiary-container:#5c4200;--on-tertiary-container:#ffdf9e;
    --error:#ffb4ab;--on-error:#690005;--error-container:#93000a;--on-error-container:#ffdad6;
    --success:#8fe3b0;--success-container:#0f5132;--on-success-container:#a6f2c4;
    --surface:#12131a;--surface-container-lowest:#181921;--surface-container-low:#1e1f27;
    --surface-container:#23242d;--surface-container-high:#2c2d37;--surface-container-highest:#363740;
    --on-surface:#e3e1ec;--on-surface-variant:#c6c5d0;--outline:#90909a;--outline-variant:#45464f;
    --brand-deep:#3b4f94;--brand-ink:#1b2a5e;--inverse-surface:#e3e1ec;--inverse-on-surface:#2f3038;
    --ink-surface:#0f1846;--on-ink:#eef0ff;--ink-line:rgba(255,255,255,.18);
    --brand-grad-a:#2b3d7a;--brand-grad-b:#0f1740;
    --focus:#b8c3ff;color-scheme:dark;--select-arrow:url(/static/chevron-dark.svg);
    --e1:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.3);--e2:0 4px 12px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.3);
  }
  :root:not([data-theme="light"]) .value-strip,:root:not([data-theme="light"]) .ink-card{border-color:var(--outline-variant)}
  :root:not([data-theme="light"]) .textarea,:root:not([data-theme="light"]) #settings-form textarea{background:var(--surface-container-lowest);color:var(--on-surface)}
  :root:not([data-theme="light"]) .btn-filled:hover{background:#cdd5ff;color:var(--on-primary)}
  :root:not([data-theme="light"]) .btn-filled:active,:root:not([data-theme="light"]) .pill input:checked + .pill-off:active{background:#9fadf5}
  :root:not([data-theme="light"]) .pill input:checked + .pill-off:hover{background:#cdd5ff}
  :root:not([data-theme="light"]) .logo{color:#fff}
  :root:not([data-theme="light"]) .brand .mark .v{background:rgba(255,255,255,.1)}
}
[data-theme="dark"]{
  --primary:#b8c3ff;--on-primary:#0a1a52;--primary-container:#243469;--on-primary-container:#dde1ff;
  --secondary:#bec6dc;--secondary-container:#3e4459;--on-secondary-container:#dde1f9;
  --tertiary:#f5be48;--on-tertiary:#402d00;--tertiary-container:#5c4200;--on-tertiary-container:#ffdf9e;
  --error:#ffb4ab;--on-error:#690005;--error-container:#93000a;--on-error-container:#ffdad6;
  --success:#8fe3b0;--success-container:#0f5132;--on-success-container:#a6f2c4;
  --surface:#12131a;--surface-container-lowest:#181921;--surface-container-low:#1e1f27;
  --surface-container:#23242d;--surface-container-high:#2c2d37;--surface-container-highest:#363740;
  --on-surface:#e3e1ec;--on-surface-variant:#c6c5d0;--outline:#90909a;--outline-variant:#45464f;
  --brand-deep:#3b4f94;--brand-ink:#1b2a5e;--inverse-surface:#e3e1ec;--inverse-on-surface:#2f3038;
  --ink-surface:#0f1846;--on-ink:#eef0ff;--ink-line:rgba(255,255,255,.18);
  --brand-grad-a:#2b3d7a;--brand-grad-b:#0f1740;
  --focus:#b8c3ff;color-scheme:dark;--select-arrow:url(/static/chevron-dark.svg);
  --e1:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.3);--e2:0 4px 12px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.3);
}
[data-theme="dark"] .value-strip,[data-theme="dark"] .ink-card{border-color:var(--outline-variant)}
[data-theme="dark"] .textarea,[data-theme="dark"] #settings-form textarea{background:var(--surface-container-lowest);color:var(--on-surface)}
[data-theme="dark"] .btn-filled:hover{background:#cdd5ff;color:var(--on-primary)}
[data-theme="dark"] .btn-filled:active,[data-theme="dark"] .pill input:checked + .pill-off:active{background:#9fadf5}
[data-theme="dark"] .pill input:checked + .pill-off:hover{background:#cdd5ff}
[data-theme="dark"] .logo{color:#fff}
[data-theme="dark"] .brand .mark .v{background:rgba(255,255,255,.1)}

/* ---- small named pieces that used to be inline styles ------------------- */
.field-name{width:220px}
.field-days{width:96px;font-size:20px;font-weight:600}
.stage-cell{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.topbar-crumb-title{font-family:var(--font-display);font-weight:600;font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero{align-items:flex-start;margin-bottom:24px}
.hero-title{font-size:32px}
.stepper-card{padding:16px 20px;overflow-x:auto}
.gate-card{border-color:transparent}
@media (max-width:720px){
  .field-name{width:100%}
  .hero-title{font-size:26px}
  .hero-meta{font-size:13px;flex-direction:column;gap:2px}
  .hero-meta span+span::before{content:none}
  .btn{white-space:normal;text-align:center;height:auto;min-height:44px;padding-top:10px;padding-bottom:10px}
  .btn-lg{min-height:50px}
  .cols-forms,.cols-calls{min-width:0}
  .grid-head.cols-forms,.grid-head.cols-calls{display:none}
  .cols-forms.grid-row,.cols-calls.grid-row{grid-template-columns:1fr;gap:6px;padding:14px 16px}
  .cols-calls .ta-r{text-align:left}
  /* the avatar stays top-right on every page: the title block shrinks, the crumbs ellipsize */
  .topbar{flex-wrap:nowrap}
  .topbar>div:first-child,.topbar>.topbar-crumb-title,.topbar>.minw0{flex:1 1 0;min-width:0}
  .topbar>div:first-child .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .right{flex:0 0 auto;margin-left:8px}
  .topbar .right .chip{max-width:150px;overflow:hidden;text-overflow:ellipsis}
}
.field-textarea{height:auto;width:100%;padding:12px 14px;font-size:14.5px;line-height:1.5;resize:vertical;font-family:var(--font-body)}
label.eyebrow{display:block;margin-bottom:6px}

/* while the theme switches, no transition may run: one restyle, not hundreds of tweens */
html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:none!important;animation:none!important}

/* ---- account menu (top right) and skip link ------------------------------ */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--primary);color:var(--on-primary);padding:10px 16px;border-radius:var(--r-full);font:600 14px/1 var(--font-body)}
.skip-link:focus{top:12px;outline:2px solid var(--focus);outline-offset:2px}
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.menu[open]>summary{box-shadow:0 0 0 2px var(--primary)}
.menu-panel{max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;position:absolute;right:0;top:calc(100% + 8px);width:260px;background:var(--surface-container-lowest);border:1px solid var(--outline-variant);
  border-radius:var(--r-md);box-shadow:var(--e2);padding:8px;z-index:30;text-align:left}
.menu-head{padding:10px 12px 12px;border-bottom:1px solid var(--outline-variant);margin-bottom:6px}
.menu-group{border:0;margin:0;padding:4px 0;display:flex;flex-direction:column;gap:2px;min-width:0}
.menu-group+.menu-group{border-top:1px solid var(--outline-variant);margin-top:4px;padding-top:8px}
.menu-group legend{padding:6px 12px 4px}
.menu-item{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border-radius:var(--r-sm);font:500 14px/1 var(--font-body);color:var(--on-surface);cursor:pointer;text-decoration:none}
.menu-item svg{width:18px;height:18px;color:var(--on-surface-variant)}
.menu-item:hover{background:var(--surface-container-low);color:var(--on-surface)}
.menu-item input{width:18px;height:18px;margin:0;accent-color:var(--primary)}
.menu-item.on{background:var(--secondary-container);color:var(--on-secondary-container)}
.menu-item input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.menu[open] .menu-panel{animation:menu-in var(--motion-fast) var(--ease-emphasized)}}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:720px){.topbar .right .avatar{display:flex}.menu-panel{right:-6px}}

/* Public legal pages (/privacy, /terms): a plain reading column, no shell */
.legal{max-width:720px;margin:0 auto;padding:48px 24px 64px}
.legal h1{font-size:30px;margin:8px 0 4px}
.legal h2{font-size:18px;margin:28px 0 8px}
.legal p{margin:0 0 12px}
.legal-footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--outline-variant);font-size:13px;color:var(--on-surface-variant)}
.login .legal-links{margin-top:20px;font-size:12.5px;color:var(--on-surface-variant);text-align:center}

/* Totals are advisory; unmatched readings remain legible for human review. */
.totals-review{padding:18px 24px;background:var(--surface-container-low);border-block:1px solid var(--outline-variant)}
.totals-table{width:100%;border-collapse:collapse;font-size:13px}
.totals-table th,.totals-table td{padding:10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--outline-variant)}
.totals-table .tab{white-space:nowrap}
.totals-review{margin:22px 0}
.totals-review>summary,.header-details>summary{min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:2px 12px;cursor:pointer}
.totals-review>summary h2,.header-details>summary h2{margin:0;font-size:17px}
.totals-review>summary .small,.header-details>summary .small{color:var(--on-surface-variant)}

.figure-row:not(.flagged) .override{border-color:var(--outline)}
.totals-review .table-wrap{overflow-x:auto}
/* Flagged figures come first in their own group; the matched group follows. */
.figure-group{margin-bottom:22px}
.figure-group-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-bottom:4px}
.figure-group-head h2{margin:0;font-size:17px}
.figure-group-head .count{font-weight:400;color:var(--on-surface-variant)}
.figure-group-actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-left:auto}
.figure-group>.small{margin:0 0 10px}
.header-details{padding:0}
.header-details[open]>summary{margin-bottom:6px}
.review-reject{display:flex;justify-content:flex-end;margin-top:8px}

/* Original-document review and explicit private progress. */
.source-page-scroll{max-height:75vh;max-height:75dvh;overflow:auto;border:1px solid var(--outline-variant);background:white}
.source-pdf{display:block;width:100%;height:auto}
.source-pdf[hidden]{display:none}
.review-progress{margin-bottom:18px}
.review-progress [data-save-status]{display:block;margin-top:8px}
/* the topbar only sticks on a phone, so on a desktop the panel pins to the very top and gets the whole viewport */
@media(min-width:1200px){.source{position:sticky;top:0;align-self:start;max-height:100vh;max-height:100dvh;overflow:auto}}
.review-main{container-type:inline-size}
@container (max-width:760px){
  .grid-head.cols-figures{display:none}
  .cols-figures{min-width:0}
  .cols-figures.grid-row{grid-template-columns:26px minmax(0,1fr) auto;gap:8px}
  .figure-row .confirmed{order:1;grid-row:1;grid-column:1;flex-direction:column}
  .figure-row .confirmed .meta{display:none}
  .figure-row .labelwrap{order:2;grid-row:1;grid-column:2}
  .figure-row .val{order:3;grid-row:1;grid-column:3}
  .figure-row .page{display:block;order:4;grid-row:2;grid-column:2;text-align:left}
  .figure-row .page a::before{content:"Source page\00a0"}
  .figure-row .fix{order:5;grid-row:3;grid-column:1 / -1;margin-top:8px}
}
.source-pdf.zoomed{width:1800px;max-width:none}

.header-review{margin-bottom:22px}
.header-choice{padding:16px;margin:10px 0;border:1px solid var(--outline-variant);border-radius:var(--r-md);display:flex;flex-direction:column;gap:8px}

/* Shared responsive form rhythm and action groups. */
:root{--action-gap:12px;--mobile-nav-height:64px}
.page-flow{display:grid;gap:24px;min-width:0}
.page-flow>.page-head{margin-bottom:0}
.section-flow{display:grid;gap:12px;min-width:0}
.form-flow{display:grid;gap:20px;min-width:0}
.form-flow>label:not(.check),.field-group{display:grid;gap:8px;min-width:0}
.form-flow>.btn,.section-flow>.btn{justify-self:start}
.form-flow fieldset{min-width:0}
.form-flow>.check{align-items:flex-start}
.form-flow>.check input{flex:0 0 20px;margin:2px 0 0}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--action-gap)}
.actions>form{max-width:100%}
.practice-sections{gap:4px}
.practice-sections .btn{min-height:44px}
main :is(section,div,details,form)[id]{scroll-margin-top:100px}
@media(max-width:600px){.attachment-library-head{flex-direction:column;align-items:stretch}}
.form-actions{border-top:1px solid var(--outline-variant);padding-top:20px;margin-top:4px}
.editor-shell{max-width:1040px;margin-inline:auto}
.editor-header h1{font-size:clamp(26px,2.8vw,36px);line-height:1.2;overflow-wrap:anywhere}
.editor-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.editor-fields .wide-field{grid-column:1/-1}
.field-group>label{font-weight:600;font-size:14px}
.field-group>.field{min-width:0}
.back-link{display:inline-flex;align-items:center;min-height:44px;justify-self:start}
.catalog-nav{display:flex;gap:8px;flex-wrap:wrap}
.catalog-nav a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:var(--r-full);border:1px solid var(--outline-variant)}
.catalog-nav a[aria-current=page]{background:var(--secondary-container);color:var(--on-secondary-container);border-color:transparent;font-weight:600}
.catalog-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,220px) auto;align-items:end;gap:16px}
.catalog-filters label{display:grid;gap:8px;min-width:0;font-weight:600;font-size:14px}
.catalog-table{width:100%;border-collapse:collapse;text-align:left;table-layout:fixed}
.catalog-table th,.catalog-table td{padding:16px 20px;border-bottom:1px solid var(--outline-variant);vertical-align:top;overflow-wrap:anywhere}
.catalog-table th{background:var(--surface-container-low);font-size:13px;color:var(--on-surface-variant)}
.catalog-table th:first-child{width:46%}
.catalog-table th:last-child{width:15%}
.catalog-table tr:last-child td{border-bottom:0}
.catalog-table tbody tr:hover{background:var(--surface-container-low)}
.catalog-table td:first-child a{font-weight:600;display:block}
.catalog-table td::before{display:none}
.disclosure>summary{cursor:pointer;font-weight:600;min-height:44px;display:list-item;align-content:center;overflow-wrap:anywhere}
.disclosure[open]>summary{margin-bottom:16px}
.disclosure>details+details{margin-top:12px}
.content pre,.content dd{overflow-wrap:anywhere;white-space:pre-wrap}
.content dd{margin:4px 0 16px}
.content .meta,.tl-body{overflow-wrap:anywhere}
/* headings and buttons break only a word that cannot fit its line: `anywhere` lowers the
   min-content size, so a squeezed flex row cut "Practices" to "Practic/es" */
.content h1,.content h2{overflow-wrap:break-word}
.worksheet-changes.table-wrap{overflow-x:auto;max-width:100%}
.worksheet-changes table,.disclosure-table{width:100%;table-layout:fixed}
.worksheet-changes th,.worksheet-changes td,.disclosure-table th,.disclosure-table td{white-space:normal;overflow-wrap:anywhere;vertical-align:top}
.two-col>*,.card-head>*{min-width:0}
input[type=file]{max-width:100%}
.card>h2+p{margin-top:8px}
.card>p+.btn{margin-top:16px}
.workflow-attestation{margin-top:24px}
.rail{overflow-y:auto}
html{scroll-padding-bottom:24px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:1000px){
  .grid-head.cols-people{display:none}
  .cols-people{min-width:0}
  .cols-people.grid-row{grid-template-columns:1fr;gap:10px;padding:16px}
  .cols-people .ta-r{text-align:left}
}
@media (max-width:720px){
  .field,.select,.field-textarea,.input .bare{font-size:16px}
  .page-head>*,.page-head .actions>form{max-width:100%}
  .page-head .actions>form{width:100%}
  .page-head .actions>form>.btn{width:100%}
  .catalog-filters{grid-template-columns:minmax(0,1fr) auto}
  .catalog-filters>label:first-of-type{grid-column:1/-1}
  .catalog-filters>.btn{width:100%}
  .editor-fields{grid-template-columns:1fr}
  .form-actions>.btn{flex:1 1 160px}
  .catalog-table,.catalog-table tbody{display:block}
  .catalog-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .catalog-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:20px 16px;border-bottom:1px solid var(--outline-variant)}
  .catalog-table tr:last-child{border-bottom:0}
  .catalog-table td{display:block;border:0;padding:0}
  .catalog-table td:first-child{grid-column:1/-1;font-size:16px}
  .catalog-table td[data-label]::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;color:var(--on-surface-variant);margin-bottom:4px}
  .catalog-table .catalog-empty{grid-column:1/-1}
  .review-actions{bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom))}
  html{scroll-padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 24px)}
  .content{scroll-padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 24px)}
}

@media (max-width:400px){.stats{grid-template-columns:minmax(0,1fr)}}
@media (max-width:360px){.catalog-filters{grid-template-columns:1fr}}

.settings-panels{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px}
@media (max-width:400px){
  .seg-group{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:4px;border-radius:var(--r-md)}
  .seg-group .seg{justify-content:center;min-width:0}
}

/* Keep template recommendations attached to the action they describe. */
.email-recipient{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.email-recipient label{display:grid;gap:8px;flex:1 1 220px;max-width:360px;min-width:0}
.email-recipient label:nth-of-type(2){flex-basis:160px;max-width:240px}
.email-recipient .field{width:100%;min-width:0}
.email-draft-section{border-top:1px solid var(--outline-variant);padding-top:20px}
.email-draft-section h3,.email-history-title{margin:0;font-size:14px}
.email-draft-section p{margin:6px 0 12px}
.email-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.email-template-grid form{min-width:0;display:flex}
.email-template.btn{width:100%;justify-content:flex-start;text-align:left;border-radius:16px;padding:12px 16px;gap:12px;min-height:76px}
.email-template-copy{display:grid;gap:6px;min-width:0}
.email-suggestion{font-size:12px;font-weight:500;color:var(--on-surface-variant);line-height:1.4}
.email-template-suggested.btn{border-color:var(--primary);background:var(--surface-container)}
.email-history-title{margin:24px 0 12px}
@media(max-width:600px){
  .email-template-grid{grid-template-columns:minmax(0,1fr)}
  .email-recipient label,.email-recipient label:nth-of-type(2){max-width:none;flex-basis:100%}
}

/* On-demand guidance stays in the reading flow and works without JavaScript. */
.help-content{padding:0 16px 16px;font-size:14px;line-height:1.6;color:var(--on-surface-variant)}
.help-content p{margin:0 0 12px}.help-content p:last-child{margin-bottom:0}
.guide-steps{padding-left:22px;margin:12px 0}.guide-steps li+li{margin-top:12px}
.help-content a{ text-decoration:underline;text-underline-offset:3px }

.help-heading{display:flex;align-items:center;gap:8px;min-width:0}
.help-heading h1,.help-heading h2{min-width:0;margin-bottom:0}
.context-help{display:inline-flex;flex:none;vertical-align:middle}
.help-trigger,.help-close{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:50%;background:transparent;color:var(--primary);cursor:pointer;font:600 16px var(--font-body)}
.help-trigger>span{display:grid;place-items:center;border:1px solid var(--outline-variant);border-radius:50%;width:24px;height:24px}
.help-trigger:hover,.help-close:hover{background:var(--surface-container-high)}
.help-trigger:focus-visible,.help-close:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.help-popover{position:fixed;inset:0;margin:auto;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;box-sizing:border-box;padding:16px;border:1px solid var(--outline-variant);border-radius:16px;background:var(--surface-container-low);color:var(--on-surface);box-shadow:var(--e2)}
.help-popover::backdrop{background:rgb(0 0 0 / .15)}
.help-popover-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.help-popover .help-content{display:block;padding:0;overflow-wrap:anywhere}
.page-help{display:flex;justify-content:flex-end;margin-bottom:8px}

/* Reserve the upper-right corner for help without crowding headings or status. */
.help-heading{justify-content:space-between;flex:1}
.help-heading>.context-help{margin-left:auto;align-self:flex-start}
.card:has(> .help-heading),.card:has(> .card-head > .help-heading){position:relative}
.card>.help-heading,.card>.card-head:has(> .help-heading){padding-right:48px}
.card>.help-heading>.context-help,.card>.card-head>.help-heading>.context-help{position:absolute;right:16px;top:16px;margin:0}
.page-head>div:has(> .help-heading){flex:1 1 auto;min-width:min-content}
/* on a page heading the "?" sits right after the title it explains, not at the far edge */
.page-head .help-heading{justify-content:flex-start;flex:0 1 auto}
.page-head .help-heading>.context-help{margin-left:0;align-self:center}
.quick-guide{width:min(600px,calc(100vw - 32px));text-align:left;white-space:normal}
.quick-guide .help-popover-head{position:sticky;top:-16px;background:var(--surface-container-low);padding:8px 0;z-index:1}
@media(max-width:600px){
  .help-popover{max-height:calc(100dvh - 32px);padding:16px}
  .card>.help-heading>.context-help,.card>.card-head>.help-heading>.context-help{right:12px;top:12px}
}

/* ---- shell: app-wide layer (ui-panel "shell") ---------------------------------------
   Sticky and scroll containers, anchor offsets, focus, forced colours, phone chrome. Page
   rules stay with their page. --topbar-h is measured by app.js; --jump-bar-h is for a page
   that adds its own sticky bar under the topbar (set it on main or :root). */
:root{--topbar-h:69px}
.bordered.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* grid tables restack by their own width, not the window's: a 96px rail eats 100-200px, so the
   phone breakpoint left 721-800px windows scrolling sideways with the row arrow cut off */
.table-wrap:has(.grid-row):not(.rounded-table):not(:has(.cols-addbacks)){container:rows / inline-size}
@container rows (max-width:760px){
  .grid-head:is(.cols-practices,.cols-dismissed,.cols-people,.cols-forms,.cols-calls,.cols-activity,.cols-activity-people){display:none}
  .cols-practices,.cols-dismissed,.cols-people,.cols-forms,.cols-calls,.cols-activity,.cols-activity-people{min-width:0}
  .cols-practices.grid-row{grid-template-columns:1fr auto;padding:14px 16px}
  .cols-dismissed.grid-row,.cols-people.grid-row,.cols-forms.grid-row,.cols-calls.grid-row,.cols-activity.grid-row,.cols-activity-people.grid-row{grid-template-columns:1fr;gap:6px;padding:14px 16px}
  .cols-people .ta-r,.cols-calls .ta-r{text-align:left}
  .stack-label{display:inline;color:var(--on-surface-variant)}
}
html:has(.review-actions){scroll-padding-bottom:96px}
::placeholder{color:var(--on-surface-variant);opacity:1}
.btn,.icon-btn,.pill,.pill-off,.navcol,.rail-link,.seg,.grid-row,summary{touch-action:manipulation}
.btn[aria-disabled="true"]{cursor:default}
/* the flash after a redirect is focused by app.js; after a scroll restore it can be pinned in view */
.flash.is-pinned{position:sticky;top:calc(var(--jump-bar-h,0px) + 12px);z-index:12;box-shadow:var(--e2)}
/* a form with data-track-dirty marks the page so the phone's pull-to-refresh cannot throw the edits away */
html.is-dirty,html.is-dirty body{overscroll-behavior-y:contain}
/* email delivery is off: a quiet topbar chip on most pages, the full banner only where email matters */
.email-off-chip{position:relative;text-decoration:none}
.email-off-chip::after{content:"";position:absolute;inset:-7px -4px}
kbd{font:600 12px/1 var(--font-display);padding:2px 6px;border:1px solid var(--outline);border-radius:6px;background:var(--surface-container-high);color:var(--on-surface)}

/* focus: one ring for anything focusable, including the controls that fall back to native styling */
.flash:focus-visible,.warn:focus-visible,[tabindex="-1"]:focus-visible,#settings-form textarea:focus-visible,
.stepper-card:focus-visible,.table-wrap:focus-visible,main:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
main:focus:not(:focus-visible){outline:0}
:is(input:not([type=checkbox],[type=radio],[type=file],[type=hidden]),textarea,select):focus-visible{outline:2px solid var(--focus);outline-offset:1px}
/* the ink surface is dark in both themes, so its ring is the light text colour */
.ink-card :is(a,.btn,summary):focus-visible,.value-strip :is(a,.btn):focus-visible{outline-color:var(--on-ink)}
/* state must not rest on a pale fill alone (1.2:1 against the rail): a ring says which item is current */
.rail-item.active,.navcol.active .navpill,.seg.on{box-shadow:inset 0 0 0 1.5px var(--outline)}
.step:not(.done):not(.current):not(.gate) .step-dot{outline:1px solid var(--outline);outline-offset:-1px}

@media (max-width:720px),(pointer:coarse){
  .field,.select,.field-textarea,.input .bare,.override,.textarea,#settings-form textarea,.file{font-size:16px}
  summary:not(.avatar){min-height:44px;align-content:center}
  .check{min-height:44px}
  :where(label:has(> input[type=checkbox])){min-height:44px;display:flex;align-items:center;gap:10px}
  .crumb,.section-head .more{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:720px){
  /* the topbar stays on screen; anchors and focus clear it (and a page's own jump bar) */
  .topbar{position:sticky;top:0;z-index:15}
  html{scroll-padding-top:calc(var(--topbar-h) + var(--jump-bar-h,0px) + 8px)}
  main :is(section,div,details,form)[id]{scroll-margin-top:calc(var(--topbar-h) + var(--jump-bar-h,0px) + 16px)}
  .flash.is-pinned{top:calc(var(--topbar-h) + var(--jump-bar-h,0px) + 8px)}
  /* the page title is the H1; the topbar keeps only help and the account */
  body:has(main .page-head h1) .topbar>div:first-child{display:none}
  body:has(main .page-head h1) .topbar .right{margin-left:auto}
  .content{position:relative}
  .page-help{position:absolute;top:2px;right:8px;margin:0;z-index:1}
  .banner-info[role=status]{padding:8px 14px;font-size:13px;line-height:1.35;margin-bottom:12px}
  /* the review bar: status on its own line, then the two buttons, ~85px instead of 122 */
  .review-actions{padding:6px 18px;gap:6px 8px;min-height:64px}
  .review-actions .status{flex:1 1 100%;font-size:12.5px;line-height:1.3}
  html:has(.review-actions){scroll-padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 96px)}
  .topbar,.content:not(.content-flush),.review-main,.source{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
}
@media (max-height:500px) and (orientation:landscape){
  /* a phone on its side: the bottom nav replaces the rail (see "bottom navigation"), kept slim */
  :root{--mobile-nav-height:52px}
  .navcol{flex-direction:row;gap:8px;height:44px}
  .navpill{width:44px}
  .topbar{position:static;height:auto;flex-basis:auto;padding-top:6px;padding-bottom:6px}
  .review-actions{position:static}
}
@media (min-width:721px) and (max-height:500px) and (orientation:landscape){
  .topbar,.content:not(.content-flush),.review-main,.source{padding-left:max(40px,env(safe-area-inset-left));padding-right:max(40px,env(safe-area-inset-right))}
}
/* on a phone the topbar has room for help and the account only; the pages where email matters show the full banner */
@media (max-width:720px){.email-off-chip{display:none}}
/* 200% zoom on a phone leaves ~195 CSS px: nothing may push the account button off screen */
@media (max-width:240px){
  .topbar{flex-wrap:wrap;gap:4px}
  .topbar .right{gap:4px;margin-left:0;flex-wrap:wrap;justify-content:flex-end;max-width:100%}
  .topbar .right .chip{max-width:100%}
  .menu-panel{width:calc(100vw - 24px)}
}
/* Windows high contrast: fills vanish, so name every control and state by an outline */
@media (forced-colors:active){
  .btn-filled,.btn-tonal,.btn-amber,.chip,.tick,.avatar,.tile,.tile-icon,.seg,.pill-off,.effect,.banner,.flash,.warn,.docrow{outline:1px solid ButtonText;outline-offset:-1px}
  .btn-disabled,.btn[disabled]{color:GrayText;outline-color:GrayText}
  .rail-item.active,.navcol.active .navpill,.seg.on{outline:2px solid Highlight;outline-offset:-2px}
  .pill input:checked + .pill-off{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .step.done .step-dot{outline:2px solid ButtonText;outline-offset:-2px}
  :is(a,button,input,select,textarea,summary,.grid-row):focus-visible{outline:3px solid Highlight;outline-offset:2px}
}

/* Source-backed structural expense review. */
.expense-repair { display:grid; gap:10px; margin:12px 0; padding:14px; border:1px solid var(--outline-variant, #ddd); border-radius:10px; }
.expense-repair label { display:grid; gap:5px; font-size:13px; }
.expense-repair label.check { display:flex; }
.expense-repair .field { min-width:0; width:100%; box-sizing:border-box; }
.expense-metadata { order:6; grid-column:1 / -1; font-size:12px; }
.expense-repair { grid-template-columns:repeat(2,minmax(0,1fr)); }
.expense-repair h3, .expense-repair label:last-child { grid-column:1 / -1; }
@media (max-width:600px) { .expense-repair { grid-template-columns:minmax(0,1fr); } }

/* Text links remain recognizable without relying on color alone. */
p a:not(.btn), li a:not(.btn), .warn a:not(.btn), .meta a:not(.btn){text-decoration:underline;text-underline-offset:3px}
.ink-card .small{color:inherit}
.worksheet-reviews{padding-left:20px}
.worksheet-reviews li{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:10px}

/* Keep financial comparisons readable without horizontal panning on phones. */
.financial-source-review tbody th{font-weight:400;background:transparent}
@media(max-width:600px){
 .financial-source-review table,.financial-source-review tbody,.financial-source-review tr{display:block;width:100%;min-width:0}
 .financial-source-review thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .financial-source-review tbody tr{border:1px solid var(--outline-variant);border-radius:12px;margin-bottom:12px;overflow:hidden}
 .financial-source-review tbody th,.financial-source-review tbody td{display:block;padding:10px 12px;border:0;white-space:normal}
 .financial-source-review tbody th{background:var(--surface-container-low);font-weight:600}
 .financial-source-review [data-label]::before{content:attr(data-label);display:block;font-size:12px;font-weight:400;color:var(--on-surface-variant);margin-bottom:4px}
}

/* ---- Work and Practices: attach list, list filter, quiet status card (ui-panel "work") ---- */
.grid-row[hidden]{display:none}
.cols-practices.grid-row{padding-top:12px;padding-bottom:12px}
.attach-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.85fr) auto;gap:10px 16px;align-items:center;padding:12px 22px;border-top:1px solid var(--outline-variant)}
.attach-list>.attach-row:first-child{border-top:0}
.attach-row .name-cell .name{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.attach-row .name-cell .sub{font-size:12.5px;color:var(--on-surface-variant);overflow-wrap:anywhere}
.attach-form{display:flex;align-items:center;gap:10px;min-width:0}
.attach-form .select{flex:1 1 220px;min-width:0;width:auto;text-overflow:ellipsis}
.attach-dismiss{justify-self:end}
.attach-more>summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--primary);min-height:44px;display:flex;align-items:center;padding:0 22px;border-top:1px solid var(--outline-variant)}
.attach-more>summary:hover{background:var(--surface-container-low)}
.filter-bar{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-bottom:16px}
.filter-bar[hidden]{display:none}
.filter-bar .field{width:260px;max-width:100%}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip-filter{min-height:36px;padding:0 14px;border-radius:var(--r-full);border:1px solid var(--outline-variant);background:transparent;color:var(--on-surface-variant);font:600 13px/1 var(--font-body);cursor:pointer}
.chip-filter:hover{background:var(--surface-container-low)}
.chip-filter[aria-pressed=true]{background:var(--secondary-container);color:var(--on-secondary-container);border-color:transparent}
.chip-filter:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Healthy sync is a low-emphasis card; the ink surface is kept for failing or not connected. */
.ink-card.is-quiet{background:var(--surface-container-low);color:var(--on-surface);border-color:var(--outline-variant)}
.ink-card.is-quiet hr,.ink-card.is-quiet .kv{border-color:var(--outline-variant)}
.ink-card.is-quiet .ok svg{color:var(--success)}
.ink-card .label+.kv{margin-top:16px}
/* Practice names wrap on word boundaries, never mid-word; on a phone the chip stacks over the "Your move" text. */
.cols-practices .name,.cols-practices .sub{overflow-wrap:break-word}
@media (max-width:720px){
  .cols-practices.grid-row{grid-template-columns:minmax(0,1fr) minmax(0,42%)}
  .cols-practices .stage-cell{flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
  .cols-practices .chip{white-space:normal;height:auto;min-height:30px;padding:6px 10px;line-height:1.25}
  .new-practice{flex-wrap:nowrap;width:100%}
  .new-practice .field{flex:1 1 auto;min-width:0;width:auto}
  .page-head .actions>form.new-practice>.btn{width:auto;flex:0 0 auto}
  .ink-card .kv a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:400px){.cols-practices .tile{display:none}}
/* Work at tablet and phone width: the recommended move comes before the queue it points into. */
@media (max-width:1100px){
  .work-cols>.stack{display:contents}
  .work-cols{gap:20px;grid-template-columns:minmax(0,1fr)}
  .work-cols>.stack>*{min-width:0}
  .work-tip{order:-1}
}
/* Sign-in brand panel: a figure stays on one line with its label; the three stats stack when the panel is narrow. */
.brand .stats .n{white-space:nowrap}
@media (max-width:1100px){
  .brand .stats{flex-direction:column;gap:14px}
  .brand .stats .vr{display:none}
  .brand .stats .n{font-size:24px}
}
/* Settings: collapsible Claude card, rule inside a card, keyboard ring that needs no script. */
.cols-proposals{grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) auto;gap:12px 16px}
.cols-proposals .name a{font-weight:600}
@media (max-width:720px){.cols-proposals.grid-row{grid-template-columns:minmax(0,1fr);padding:14px 16px}}
.summary-title{display:inline;font-size:19px;margin-right:10px}
.rule{border:0;height:1px;background:var(--outline-variant);margin:22px 0}
.seg:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:720px){
  .attach-row{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px 16px}
  .attach-row>.name-cell,.attach-row>.none{grid-column:1/-1}
  .attach-form{flex-wrap:wrap}
  .attach-form .select{flex:1 1 100%}
  .attach-form .btn{flex:1 1 auto}
  .attach-more>summary{padding:0 16px}
  .chip-filter{min-height:44px}
  .filter-bar .field{width:100%}
}

/* ---- extraction review and email draft: touch targets, phone layout, source sheet (UI panel) ---- */
.explainer>summary,.totals-review>summary,.header-details>summary,.expense-metadata>summary{list-style:none}
.explainer>summary::-webkit-details-marker,.totals-review>summary::-webkit-details-marker,.header-details>summary::-webkit-details-marker,.expense-metadata>summary::-webkit-details-marker{display:none}
.explainer>summary::before,.totals-review>summary::before,.header-details>summary::before,.expense-metadata>summary::before{content:"";width:7px;height:7px;border:solid var(--on-surface-variant);border-width:0 2px 2px 0;transform:rotate(-45deg);flex:0 0 7px;margin:0 6px 0 2px}
.explainer[open]>summary::before,.totals-review[open]>summary::before,.header-details[open]>summary::before,.expense-metadata[open]>summary::before{transform:rotate(45deg)}
.expense-metadata>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.expense-repair label.check,.replace-year label.check{min-height:44px;align-items:center;gap:10px}
.expense-repair label.check input,.replace-year label.check input{width:22px;height:22px;flex:0 0 22px;accent-color:var(--primary)}
.review-actions .btn-filled{padding:0 30px}
.source-skip{z-index:30}
#email-attachments label.row{min-height:44px;align-items:center;gap:10px}
#email-attachments input[type=checkbox]{width:22px;height:22px;flex:0 0 22px;accent-color:var(--primary)}
.email-attach-summary{margin:0}
.wrap-any{overflow-wrap:anywhere}
#body.field-textarea{resize:vertical}
.email-actions{margin-top:16px}
@media (max-width:1100px){
  .source-skip{display:none}
  .source-toggle{display:inline-flex}
  .source-close{display:inline-flex;margin-left:auto}
  .source .head .file{margin-left:0}
  [data-source-zoom]{display:none}
  /* The source is a bottom sheet the page links open; the figures keep the whole page. */
  .source{position:fixed;left:96px;right:0;bottom:0;z-index:20;max-height:70vh;max-height:70dvh;overflow:auto;border:0;border-top:1px solid var(--outline-variant);
    border-radius:24px 24px 0 0;box-shadow:var(--e2);transform:translateY(calc(100% + 120px));visibility:hidden;transition:transform .2s,visibility 0s .2s}
  body.source-open .source{transform:none;visibility:visible;transition:transform .2s}
  .source-page-scroll{max-height:none;overflow:visible;touch-action:pinch-zoom pan-x pan-y}
  .source-pdf.zoomed{width:100%;max-width:100%}
}
@media (prefers-reduced-motion:reduce){.source{transition:none}}
@media (max-width:720px){
  .source{left:0;bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom))}
  .review-intro{flex-direction:column;align-items:stretch}
  .review-intro .explainer{padding:4px 16px 8px}
  .figure-group-actions{width:100%;margin-left:0}
  .figure-group-actions .btn-tonal{flex:1}
  .review-actions .buttons{gap:8px}
  .review-actions .buttons .btn,.review-actions .btn-filled{padding:0 10px;font-size:13.5px;text-align:center}
  .review-actions .buttons .btn-tonal{flex:1 1 0}
  .review-actions .btn-filled svg{display:none}
  .review-reject{justify-content:center}
  /* Totals restack: one card per total, label left and figure right, so nothing scrolls sideways. */
  .totals-review{padding:8px 16px 16px}
  .totals-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .totals-table,.totals-table tbody,.totals-table tr,.totals-table th,.totals-table td{display:block}
  .totals-table tr{padding:12px 0;border-bottom:1px solid var(--outline-variant)}
  .totals-table th,.totals-table td{border:0;padding:2px 0}
  .totals-table td{display:flex;justify-content:space-between;gap:12px}
  .totals-table td::before{content:attr(data-label);color:var(--on-surface-variant);font-size:12.5px}
  .email-actions{position:sticky;bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));z-index:5;background:var(--surface);
    margin:16px -18px 0;padding:10px 18px;border-top:1px solid var(--outline-variant)}
  .email-actions .btn{flex:1 1 0}
  .email-actions .small{flex:1 1 100%;order:3}
  #body.field-textarea{height:16rem;min-height:16rem}
}

/* ---- practice page (ui-panel "practice") -------------------------------------------
   Hero facts, the compressed progress line, the Next step card, the sticky jump bar,
   collapsible sections and the sticky right rail. practice.js sets --jump-bar-h. */
.chip-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 8px}
.hero-facts{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:10px;font-size:14px}
.hero-facts .label{color:var(--on-surface-variant)}
.hero-facts .tab{font-size:18px}
.stat .value .chip{vertical-align:middle;font-size:12px;height:24px}
/* progress: one line and a slim segmented bar; the labelled list opens on demand */
.progress-strip{margin:0 0 20px}
.progress-line{margin:0 0 8px;font-size:14px;color:var(--on-surface-variant)}
.progress-line strong{color:var(--on-surface)}
.progress-bar{display:flex;gap:3px;align-items:center}
.progress-bar .pstep{flex:1;height:6px;border-radius:3px;background:var(--surface-container-high);box-shadow:inset 0 0 0 1px var(--outline-variant)}
.progress-bar .pstep.gate{background:var(--tertiary-container);box-shadow:inset 0 0 0 1px var(--tertiary)}
.progress-bar .pstep.done{background:var(--primary);box-shadow:none}
.progress-bar .pstep.current{height:10px;background:var(--primary);box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--primary)}
.progress-bar .pstep.gate.current{background:var(--tertiary);box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--tertiary)}
.progress-key{margin:6px 0 0;font-size:13px;color:var(--on-surface-variant)}
.progress-all>summary{cursor:pointer;font-weight:600;font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.progress-all .stepper{flex-wrap:wrap;min-width:0;gap:14px 0;padding:8px 0 4px}
.progress-all .step:not(:last-child)::after{display:none}
/* Next step: the one card that says what to do now */
.next-step .card-head{margin-bottom:8px}
.next-title{font-size:22px;line-height:1.3;margin:0}
.next-rest{margin:8px 0 0;color:var(--on-surface-variant)}
.next-step .small{color:var(--on-surface-variant)}
.next-step summary,.approve>summary,.earlier-versions>summary,.other-templates>summary,.recipient-edit>summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.next-step .step-footer{border-top:1px solid var(--outline-variant);margin-top:16px}
.blocker-line{margin:8px 0 0}
.claude-line{margin:14px 0 0}
.gate-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;align-items:end}
.gate-form label{display:grid;gap:6px;font-weight:600;font-size:14px}
.gate-form .gate-note{grid-column:1/-1}
.gate-form .check{display:flex;align-items:center;gap:10px;font-weight:400}
.gate-form .btn{justify-self:start}
/* jump bar: real section names, sticky, scrolls sideways instead of wrapping */
.jump-bar{position:sticky;top:0;z-index:14;display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;padding:6px 0;background:var(--surface);border-bottom:1px solid var(--outline-variant);scrollbar-width:none}
.jump-bar::-webkit-scrollbar{display:none}
.jump-link{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-full);font:600 14px/1.2 var(--font-body);color:var(--primary);text-decoration:none}
.jump-link:hover{background:var(--surface-container)}
.jump-bar .jump-link[aria-current]{background:var(--secondary-container);color:var(--on-secondary-container)}
@media (min-width:721px){.practice-cols :is(details,div,section,form)[id],#workflow-step{scroll-margin-top:calc(var(--jump-bar-h,0px) + 16px)}}
/* collapsible sections: a native <details> whose summary is heading + one live line */
.section-sum>summary{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;list-style:none}
.section-sum>summary::-webkit-details-marker{display:none}
.section-sum>summary::before{content:"";width:7px;height:7px;border:solid var(--on-surface-variant);border-width:0 2px 2px 0;transform:rotate(-45deg);flex:0 0 7px;margin:0 4px 0 2px}
.section-sum[open]>summary::before{transform:rotate(45deg)}
.section-sum>summary h2{margin:0;flex:0 0 auto}
.sum-line{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--on-surface-variant)}
.sum-line::before{content:"\00b7";margin-right:8px;color:var(--outline)}
.section-sum[open]>summary{margin-bottom:12px}
.section-body{min-width:0}
.section-sum .card-head{margin-bottom:12px}
.section-help{display:flex;justify-content:flex-end;margin-left:auto}
.card-head .section-help{order:2;margin-left:0}
.period-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:16px}
.period-row label{font-weight:600}
.period-row .small{flex:1 1 100%;margin:0}
.upload-label{font-weight:600;font-size:14px}
.recipient-summary{margin:0 0 8px}
.recipient-edit{margin-bottom:16px}
.report-downloads{display:flex;flex-wrap:wrap;gap:8px}
.report-downloads .btn{flex:1 1 130px}
/* right rail: the deliverable and the record stay in view on a wide screen; on a phone the
   report card comes straight after the jump bar and History comes last */
@media (min-width:1101px){
  .practice-rail{position:sticky;top:calc(var(--jump-bar-h,0px) + 12px);align-self:start;max-height:calc(100vh - var(--jump-bar-h,0px) - 24px);overflow-y:auto;overscroll-behavior:contain;padding:2px}
}
@media (max-width:1100px){
  .practice-cols>.stack{display:contents}
  /* Visual order differs from DOM/Tab order for exactly these cards, on purpose: the report card is
     after Emails in the DOM (it lives in the right rail). With a report it moves to the top, right
     after Next step; with none it sits after Add-backs, where the jump bar lists it; History is last. */
  .practice-cols>.practice-rail>#appraisal-reports{order:1}
  .practice-cols>.practice-main>#emails{order:2}
  .practice-cols>.practice-rail>#timeline{order:99}
  .practice-cols.has-report>.practice-rail>#appraisal-reports{order:-1}
}
@media (max-width:720px){
  .jump-bar{top:var(--topbar-h,60px);margin-left:-18px;margin-right:-18px;padding:6px 18px}
  .hero-meta{flex-direction:row;flex-wrap:wrap}
  .hero-meta span+span::before{content:"\00b7";margin:0 8px}
  .hero .logo-lg{display:none}
  .email-template-grid{grid-template-columns:1fr 1fr;gap:8px}
  .email-template.btn{min-height:56px;padding:8px 12px;font-size:13.5px}
  .email-recipient{gap:10px}
  #seller-details textarea{min-height:64px}
  .gate-form{grid-template-columns:1fr}
}
/* practice page, second pass: help sits at the card corner; a chevron on the step list; a compact period select */
.section-sum{position:relative}
.section-sum>summary{padding-right:44px}
.section-sum .section-help,.card-head .section-help{position:absolute;top:16px;right:16px;margin:0;order:0}
.progress-all>summary::before{content:"";display:inline-block;width:7px;height:7px;border:solid var(--on-surface-variant);border-width:0 2px 2px 0;transform:rotate(-45deg);margin:0 10px 0 2px}
.progress-all[open]>summary::before{transform:rotate(45deg)}
.period-row .select{width:auto;max-width:100%;flex:0 1 320px}
.next-step .next-title,.next-step .next-rest{padding-right:36px}
.other-templates>summary::before,.recipient-edit>summary::before,.earlier-versions>summary::before,.approve>summary::before,.step-replace>summary::before,.next-step .step-footer>summary::before,.workflow-attestation>summary::before{content:"";display:inline-block;flex:0 0 7px;width:7px;height:7px;border:solid var(--on-surface-variant);border-width:0 2px 2px 0;transform:rotate(-45deg);margin:0 10px 0 2px}
:is(.other-templates,.recipient-edit,.earlier-versions,.approve,.step-replace,.step-footer,.workflow-attestation)[open]>summary::before{transform:rotate(45deg)}
/* grid children must be allowed to shrink: with display:contents the cards are direct grid items */
.practice-cols{grid-template-columns:minmax(0,1fr) 380px}
.practice-cols>*,.practice-cols>.stack>*{min-width:0}
@media (max-width:1100px){.practice-cols{grid-template-columns:minmax(0,1fr)}}
.delivered-note{margin:0 0 12px;color:var(--on-surface-variant)}
.not-ready{color:var(--on-surface-variant)}

/* Extraction and email follow-ups (UI panel review): resolved rows, help beside the intro, focus clear of the email bar. */
.figure-row.flagged.unsure.resolved{background:transparent;color:var(--on-surface)}
.figure-row.flagged.unsure.resolved .line,.figure-row.flagged.unsure.resolved .page{color:var(--on-surface-variant)}
.figure-row.flagged.unsure.resolved .override{border-color:var(--outline)}
.figure-row.flagged.unsure.resolved .meta{color:var(--on-surface-variant)}
.source>*{flex-shrink:0}
.review-intro .page-help{margin:0;position:static;flex:0 0 auto}
.review-intro .explainer{flex:1 1 0;min-width:0}
html:has(.email-actions){scroll-padding-bottom:96px}
@media (max-width:720px){
  .review-intro{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .review-intro .source-toggle{flex:1 1 100%}
  .figure-row.flagged.unsure.resolved{border-color:var(--outline-variant)}
  html:has(.email-actions){scroll-padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 96px)}
  .crumb-root{display:none}
  .topbar>.crumb{min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar>.topbar-crumb-title{flex:1 1 30%}
}
.review-reject{align-items:center;flex-wrap:wrap;gap:4px 16px}
.next-review-top{margin:0 0 10px}
/* Practice profile: the profile forms that could be attached to this practice */
.profile-candidates{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.profile-candidate{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;padding:14px 16px;border:1px solid var(--outline-variant);border-radius:var(--r-md)}
.profile-candidate .name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-weight:600}
.profile-candidate p{margin:4px 0 0}
.profile-candidate .sub{font-size:13.5px;color:var(--on-surface-variant);margin-top:2px}
.rename-practice>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600}
.rename-practice>summary::before{content:"";display:inline-block;flex:0 0 7px;width:7px;height:7px;border:solid var(--on-surface-variant);border-width:0 2px 2px 0;transform:rotate(-45deg);margin:0 10px 0 2px}
.rename-practice[open]>summary::before{transform:rotate(45deg)}
/* ---- feedback: the topbar dialog on every signed-in page, and the owners' inbox ---- */
.feedback-trigger{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 12px;border-radius:var(--r-full);border:1px solid var(--outline-variant);color:var(--primary);font:600 14px/1 var(--font-body);text-decoration:none;white-space:nowrap}
.feedback-trigger svg{width:18px;height:18px;flex:none}
.feedback-trigger:hover{background:var(--surface-container-high)}
.feedback-trigger:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
@media(max-width:720px){
  /* a phone's topbar has no room for the word: a 44px outlined icon button, still named for a screen reader */
  .feedback-trigger{width:44px;height:44px;padding:0;justify-content:center}
  .feedback-trigger-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* the smallest phones (320px): the topbar is full, so feedback lives in the account menu only */
@media(max-width:359px){.feedback-trigger{display:none}}
.feedback-dialog{width:min(520px,calc(100vw - 32px))}
.feedback-dialog .form-flow{gap:16px}
.feedback-kinds{display:flex;flex-wrap:wrap;gap:8px 18px;border:0;padding:0;margin:0;min-width:0}
.feedback-legend{flex:0 0 100%;padding:0;margin:0 0 4px;font-weight:600;font-size:14px}
.feedback-kinds .check{min-height:44px}
.feedback-file{max-width:100%;min-width:0;font:inherit;font-size:14px;color:var(--on-surface-variant)}
.feedback-file::file-selector-button{height:40px;margin-right:12px;padding:0 16px;border:1px solid var(--outline);border-radius:var(--r-full);background:var(--surface-container-lowest);color:var(--primary);font:600 14px/1 var(--font-body);cursor:pointer}
@media(pointer:coarse){.feedback-paste-hint{display:none}}
.feedback-status.is-success{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);background:var(--secondary-container);color:var(--on-secondary-container);font-weight:600}
.feedback-detail .card>*,.feedback-detail .card{min-width:0}
.feedback-detail{overflow-wrap:anywhere}
.feedback-crash summary{overflow-wrap:anywhere}
.feedback-shot-link{display:block;max-width:560px}
.feedback-disclosure{color:var(--on-surface-variant);margin:0}
.feedback-status{margin:0}
.feedback-status:empty{display:none}
.feedback-status.is-error{color:var(--error)}
.menu-count{height:22px;padding:0 8px;margin-left:auto}
.cols-feedback{grid-template-columns:190px minmax(0,1fr) minmax(0,2.4fr) 110px;min-width:720px}
.cols-feedback.grid-row{padding-top:12px;padding-bottom:12px;align-items:start}
a.row-link{color:inherit;text-decoration:none}
a.row-link:hover{background:color-mix(in srgb,transparent,var(--on-surface) 4%)}
a.row-link:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}
.feedback-excerpt{margin-top:6px;overflow-wrap:anywhere}
.feedback-message{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.feedback-shot{display:block;max-width:100%;max-height:360px;width:auto;height:auto;object-fit:contain;border:1px solid var(--outline-variant);border-radius:var(--r-sm)}
.feedback-pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.feedback-events{margin:0;padding-left:18px;display:grid;gap:4px;overflow-wrap:anywhere}
@container rows (max-width:760px){
  .grid-head.cols-feedback{display:none}
  .cols-feedback{min-width:0}
  .cols-feedback.grid-row{grid-template-columns:1fr;gap:6px;padding:14px 16px}
}

/* Email preview: the message as the seller's mail client lays it out */
.email-preview > summary{cursor:pointer;font-weight:600}
.email-preview-body{padding:16px 20px;margin-top:12px;font-size:14.5px;line-height:1.55;max-width:760px;overflow-wrap:anywhere}
.email-preview-body p{margin:0 0 12px}
.email-preview-body ul{margin:0 0 12px;padding-left:22px}
.email-preview-body li{margin-bottom:4px}

/* Add-back notes show their first lines and scroll inside the box, so a filled explanation no longer
   triples the height of every row. A fixed cap, not a focus toggle: nothing moves while tabbing. */
.ab-note .field-textarea{max-height:70px}

/* Financials review: the figure already on file, and where it came from */
.gate-evidence{color:var(--on-surface);margin:12px 0 4px;padding:12px 14px;border-radius:12px;background:var(--surface);font-size:14.5px;line-height:1.5}