:root {
  --ink: oklch(25% 0.025 210);
  --ink-soft: oklch(44% 0.022 210);
  --petrol: oklch(35% 0.065 195);
  --petrol-deep: oklch(27% 0.052 195);
  --petrol-pale: oklch(93% 0.025 195);
  --paper: oklch(97% 0.012 78);
  --paper-deep: oklch(93% 0.018 78);
  --surface: oklch(99% 0.008 78);
  --line: oklch(84% 0.016 70);
  --line-strong: oklch(69% 0.025 70);
  --red: oklch(53% 0.19 27);
  --red-pale: oklch(94% 0.035 27);
  --amber: oklch(66% 0.14 72);
  --amber-pale: oklch(94% 0.04 75);
  --green: oklch(46% 0.1 150);
  --green-pale: oklch(93% 0.035 150);
  --blue: oklch(49% 0.1 235);
  --blue-pale: oklch(93% 0.03 235);
  --font-display: "Rockwell Nova", "Bookman Old Style", Georgia, serif;
  --font-body: Aptos, "Segoe UI Variable Text", "Trebuchet MS", sans-serif;
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --shadow-lift: 0 .75rem 2rem color-mix(in oklch, var(--ink) 10%, transparent);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 20rem; background: var(--paper); color: var(--ink); font-family: var(--font-body); }
body { margin: 0; min-height: 100vh; background: var(--paper); font-size: 1rem; line-height: 1.5; }
button, input, select, textarea { color: inherit; font: inherit; }
button, select, input[type="file"] { cursor: pointer; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
[hidden] { display: none !important; }
:focus-visible { outline: .2rem solid var(--amber); outline-offset: .18rem; }
::selection { background: var(--amber-pale); color: var(--ink); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: var(--space-sm); left: var(--space-sm); transform: translateY(-200%); background: var(--ink); color: var(--surface); padding: var(--space-sm) var(--space-md); }
.skip-link:focus { transform: translateY(0); }
.muted { color: var(--ink-soft); }

.topbar { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-sm) clamp(1rem, 4vw, 3rem); background: var(--petrol-deep); color: var(--surface); border-bottom: 1px solid color-mix(in oklch, var(--surface) 18%, transparent); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; background: var(--red); color: var(--surface); border-radius: var(--radius-sm); font: 800 1.35rem/1 var(--font-display); }
.brand > span:last-child { display: grid; line-height: 1.1; }
.brand strong { font-family: var(--font-display); font-size: 1rem; letter-spacing: -.015em; }
.brand small { margin-top: .18rem; color: color-mix(in oklch, var(--surface) 72%, var(--petrol)); font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; }
.brand--large .brand-mark { width: 3rem; height: 3rem; font-size: 1.6rem; }
.brand--large strong { font-size: 1.25rem; }
.user-cluster { display: flex; align-items: center; gap: var(--space-md); font-size: .875rem; }
.user-name { color: color-mix(in oklch, var(--surface) 78%, var(--petrol)); }
.logout-form { margin: 0; }
.text-action { min-height: 2.75rem; display: inline-flex; align-items: center; border: 0; background: transparent; padding: 0; color: var(--surface); font-weight: 700; }

.page-shell { width: min(100%, 90rem); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) 7rem; }
.page-shell--public { width: 100%; max-width: none; min-height: 100vh; padding: 0; }
.page-heading { display: grid; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.page-heading--split { grid-template-columns: 1fr auto; align-items: end; }
.eyebrow, .section-index { margin: 0; color: var(--petrol); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-block: 0; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.025em; line-height: 1.12; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
.heading-note { max-width: 56ch; color: var(--ink-soft); }
.breadcrumb { display: flex; gap: var(--space-xs); align-items: center; margin-bottom: var(--space-lg); color: var(--ink-soft); font-size: .875rem; }
.breadcrumb a { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--petrol); font-weight: 700; }

.button { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: 1px solid transparent; border-radius: var(--radius-sm); padding: .65rem 1rem; font-weight: 800; text-align: center; text-decoration: none; transition: transform .18s var(--ease-out), background-color .18s ease, color .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.button--primary { background: var(--red); color: var(--surface); }
.button--primary:hover { background: color-mix(in oklch, var(--red) 88%, var(--ink)); }
.button--secondary { background: var(--surface); border-color: var(--line-strong); color: var(--petrol-deep); }
.button--secondary:hover, .button--quiet:hover { border-color: var(--petrol); background: var(--petrol-pale); }
.button--ghost { background: transparent; color: var(--ink-soft); }
.button--quiet { background: var(--paper); border-color: var(--line); color: var(--petrol-deep); }
.button--upload { min-width: 5.75rem; background: var(--surface); border-color: var(--line-strong); color: var(--petrol-deep); }
.button--upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.button--full { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.icon-button { width: 2.75rem; height: 2.75rem; display: inline-grid; flex: 0 0 auto; place-items: center; border: 0; background: transparent; color: var(--petrol); text-decoration: none; }
.icon-button svg { width: 1.25rem; height: 1.25rem; }

.login-body { background: var(--petrol-deep); }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr); }
.login-intro { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg); padding: clamp(2rem, 7vw, 7rem); color: var(--surface); background: var(--petrol-deep); }
.login-intro::after { content: "ATPV"; position: absolute; right: -1.6rem; bottom: -3.2rem; color: color-mix(in oklch, var(--surface) 5%, transparent); font: 800 clamp(7rem, 18vw, 17rem)/.8 var(--font-display); letter-spacing: -.09em; pointer-events: none; }
.login-intro > * { position: relative; z-index: 1; }
.login-intro .eyebrow { margin-top: clamp(2rem, 8vh, 7rem); color: oklch(82% 0.08 75); }
.login-intro h1 { max-width: 12ch; font-size: clamp(2.8rem, 6vw, 5.8rem); }
.login-intro > p:not(.eyebrow) { max-width: 48ch; color: color-mix(in oklch, var(--surface) 78%, var(--petrol)); }
.login-steps { display: flex; flex-wrap: wrap; gap: var(--space-xl); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.login-steps li { display: grid; gap: var(--space-xs); font-size: .84rem; font-weight: 700; }
.login-steps span { color: oklch(82% 0.08 75); font-size: .7rem; letter-spacing: .1em; }
.login-panel { display: flex; flex-direction: column; justify-content: center; gap: var(--space-xl); padding: clamp(2rem, 7vw, 6rem); background: var(--paper); }
.login-panel h2 { margin-top: var(--space-xs); font-size: 2.2rem; }
.login-panel > div > p:last-child, .login-help { color: var(--ink-soft); }
.login-help { font-size: .8rem; text-align: center; }

.form-stack, .field { display: grid; gap: var(--space-xs); }
.form-stack { gap: var(--space-md); }
.field > span:first-child { color: var(--ink-soft); font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.field small { color: var(--ink-soft); font-size: .76rem; }
input, select, textarea { width: 100%; min-height: 2.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); padding: .7rem .8rem; }
textarea { min-height: 5.8rem; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--petrol); }
input::placeholder, textarea::placeholder { color: color-mix(in oklch, var(--ink-soft) 70%, var(--paper)); }
.password-wrap, .input-prefix { position: relative; display: flex; align-items: center; }
.reveal-password { position: absolute; right: .25rem; min-width: 4.3rem; min-height: 2.5rem; border: 0; background: transparent; color: var(--petrol); font-size: .78rem; font-weight: 800; }
.password-wrap input { padding-right: 5rem; }
.input-prefix b { position: absolute; left: .8rem; color: var(--ink-soft); font-size: .78rem; }
.input-prefix input { padding-left: 2.7rem; }
.alert { display: grid; gap: var(--space-xs); padding: var(--space-md); border: 1px solid; border-radius: var(--radius-sm); }
.alert--error { border-color: color-mix(in oklch, var(--red) 45%, var(--paper)); background: var(--red-pale); color: color-mix(in oklch, var(--red) 75%, var(--ink)); }
.alert ul { margin: 0; padding-left: 1.1rem; }

.status-ledger { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: var(--space-2xl); border-block: 1px solid var(--line-strong); }
.status-ledger > div { display: flex; flex-direction: column-reverse; gap: var(--space-xs); padding: var(--space-lg) clamp(.75rem, 2vw, 1.5rem); border-right: 1px solid var(--line); }
.status-ledger > div:last-child { border-right: 0; }
.status-ledger span { color: var(--ink-soft); font-size: .78rem; }
.status-ledger strong { font: 700 2.2rem/1 var(--font-display); }
.case-workspace { display: grid; gap: var(--space-md); }
.workspace-tools { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); }
.workspace-tools h2 { margin-top: var(--space-xs); }
.filter-row { display: flex; gap: var(--space-xs); }
.search-field { position: relative; }
.search-field svg { position: absolute; top: 50%; left: .8rem; width: 1.15rem; transform: translateY(-50%); color: var(--ink-soft); }
.search-field input { width: min(22rem, 42vw); padding-left: 2.5rem; }
.select-field select { min-width: 12rem; }
.case-list { border-top: 1px solid var(--line-strong); }
.case-row { border-bottom: 1px solid var(--line); transition: background .18s ease; }
.case-row:hover { background: var(--surface); }
.case-row[hidden] { display: none; }
.case-row__link { min-height: 6.2rem; display: grid; grid-template-columns: minmax(17rem, 2.2fr) minmax(10rem, 1fr) minmax(8rem, .8fr) minmax(9rem, .8fr) 2rem; gap: var(--space-lg); align-items: center; padding: var(--space-md) var(--space-sm); text-decoration: none; }
.case-identity { min-width: 0; display: flex; align-items: center; gap: var(--space-md); }
.case-identity > div, .case-owner { min-width: 0; display: grid; gap: .16rem; }
.case-identity strong, .case-identity span, .case-owner strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-identity > div > span, .case-owner span, .case-state small { color: var(--ink-soft); font-size: .78rem; }
.plate { display: inline-block; width: max-content; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--surface); padding: .3rem .55rem .24rem; font: 800 .9rem/1 var(--font-body); letter-spacing: .075em; }
.case-progress { display: grid; gap: .35rem; }
.case-progress > span { display: block; height: .28rem; overflow: hidden; background: var(--paper-deep); }
.case-progress i { display: block; width: var(--progress); height: 100%; background: var(--petrol); }
.case-progress small { color: var(--ink-soft); font-size: .75rem; }
.case-state { display: grid; justify-items: start; gap: .28rem; }
.status { display: inline-flex; width: max-content; min-height: 1.65rem; align-items: center; border-radius: 999px; padding: .22rem .55rem; background: var(--paper-deep); color: var(--ink-soft); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.status--pending, .status--review { background: var(--red-pale); color: var(--red); }
.status--documents, .status--missing { background: var(--amber-pale); color: color-mix(in oklch, var(--amber) 72%, var(--ink)); }
.status--signature, .status--generation { background: var(--blue-pale); color: var(--blue); }
.status--dispatcher, .status--sent { background: var(--petrol-pale); color: var(--petrol); }
.status--completed, .status--ready, .status--signed { background: var(--green-pale); color: var(--green); }
.row-arrow { width: 1.2rem; color: var(--petrol); }
.empty-state { min-height: 20rem; display: grid; place-items: center; align-content: center; gap: var(--space-sm); border: 1px dashed var(--line-strong); padding: var(--space-xl); text-align: center; }
.empty-state p { max-width: 48ch; color: var(--ink-soft); }
.empty-state__mark { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; background: var(--petrol-pale); color: var(--petrol); border-radius: 50%; font: 700 1rem var(--font-display); }

.case-form { display: grid; gap: var(--space-lg); }
.form-section { display: grid; grid-template-columns: minmax(12rem, .7fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 4rem); padding-block: var(--space-xl); border-top: 1px solid var(--line-strong); }
.form-section__intro { display: flex; gap: var(--space-md); align-items: start; }
.form-section__intro p { margin-top: var(--space-xs); color: var(--ink-soft); font-size: .88rem; }
.section-number { color: var(--red); font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.field--wide { grid-column: span 2; }
.field--plate input { font-size: 1.2rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.choice-card { position: relative; min-height: 6.5rem; display: flex; align-items: flex-start; gap: var(--space-sm); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); padding: var(--space-md); cursor: pointer; }
.choice-card:has(input:checked) { border-color: var(--petrol); background: var(--petrol-pale); }
.choice-card input { width: 1.2rem; min-height: 1.2rem; margin: .15rem 0 0; accent-color: var(--petrol); }
.choice-card span { display: grid; gap: var(--space-xs); }
.choice-card small { color: var(--ink-soft); line-height: 1.35; }
.form-actions { position: sticky; z-index: 4; bottom: 0; display: flex; justify-content: flex-end; gap: var(--space-sm); margin-inline: calc(clamp(1rem, 4vw, 3rem) * -1); padding: var(--space-md) clamp(1rem, 4vw, 3rem); background: color-mix(in oklch, var(--paper) 96%, transparent); border-top: 1px solid var(--line); }

.case-header { display: flex; justify-content: space-between; gap: var(--space-xl); align-items: end; margin-bottom: var(--space-xl); }
.case-title { display: flex; gap: var(--space-lg); align-items: center; }
.plate--large { padding: .65rem .8rem .55rem; font-size: 1.2rem; }
.case-title h1 { margin-block: .3rem .2rem; font-size: clamp(1.75rem, 4vw, 2.7rem); }
.case-title > div > p:last-child { color: var(--ink-soft); }
.case-header__meta { display: grid; justify-items: end; gap: var(--space-xs); color: var(--ink-soft); font-size: .76rem; }
.stepper { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: var(--space-xl); }
.step { position: relative; display: grid; justify-items: center; gap: var(--space-xs); color: var(--line-strong); text-align: center; }
.step::before { content: ""; position: absolute; z-index: -1; top: 1.05rem; left: 0; width: 100%; height: 1px; background: var(--line); }
.step:first-child::before { left: 50%; width: 50%; }
.step:last-child::before { width: 50%; }
.step > span { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--paper); font-size: .78rem; font-weight: 800; }
.step.is-current { color: var(--red); }
.step.is-current > span { border-color: var(--red); background: var(--red); color: var(--surface); }
.step.is-done { color: var(--petrol); }
.step.is-done > span { border-color: var(--petrol); background: var(--petrol); color: var(--surface); }
.step.is-done::before, .step.is-current::before { background: var(--petrol); }
.decision-banner { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-xl); border: 1px solid color-mix(in oklch, var(--red) 35%, var(--paper)); background: var(--red-pale); padding: var(--space-md); }
.decision-banner > span { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 50%; background: var(--red); color: var(--surface); font-weight: 900; }
.decision-banner p { color: color-mix(in oklch, var(--red) 65%, var(--ink)); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(17rem, .85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.detail-main { display: grid; gap: var(--space-lg); min-width: 0; }
.operation-section { border-top: 1px solid var(--line-strong); background: var(--surface); }
.operation-section > summary, .section-heading { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); cursor: pointer; }
.operation-section > summary::-webkit-details-marker { display: none; }
.operation-section > summary > span, .section-heading > span { display: flex; align-items: center; gap: var(--space-md); }
.operation-section > summary b, .section-heading b { color: var(--red); font-size: .7rem; letter-spacing: .1em; }
.operation-section > summary small, .section-heading small { color: var(--petrol); font-size: .75rem; font-weight: 800; }
.section-content { display: grid; gap: var(--space-lg); padding: 0 var(--space-md) var(--space-lg); }
.form-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inline-actions { display: flex; align-items: center; gap: var(--space-md); }
.save-hint { color: var(--green); font-size: .78rem; }
.document-list { border-top: 1px solid var(--line); }
.document-row { min-height: 5.1rem; display: grid; grid-template-columns: 2rem minmax(10rem, 1fr) auto auto 2.75rem; gap: var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--line); }
.document-state { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--line-strong); font-weight: 800; }
.document-row--ready .document-state, .document-row--signed .document-state, .document-row--sent .document-state { border-color: var(--green); background: var(--green); color: var(--surface); }
.document-row--review .document-state { border-color: var(--red); background: var(--red); color: var(--surface); }
.document-info { min-width: 0; display: grid; gap: .08rem; }
.document-info span, .document-info small { overflow: hidden; color: var(--ink-soft); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.upload-form { display: flex; }
.upload-note { padding: var(--space-sm) var(--space-md) var(--space-md); color: var(--ink-soft); font-size: .76rem; }
.empty-inline { display: grid; gap: .15rem; padding: var(--space-lg); color: var(--ink-soft); }
.route-form { grid-template-columns: minmax(12rem, .55fr) minmax(0, 1.45fr); align-items: end; }
.route-form .button { justify-self: start; }
.detail-side { display: grid; gap: var(--space-xl); }
.side-section { display: grid; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--line-strong); }
.pending-list, .timeline { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.pending-list li { display: flex; align-items: flex-start; gap: var(--space-sm); }
.pending-list li > span { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: 0 0 auto; border-radius: 50%; background: var(--red-pale); color: var(--red); font-size: .7rem; font-weight: 800; }
.pending-list div { display: grid; gap: .15rem; }
.pending-list small, .timeline small { color: var(--ink-soft); }
.clear-state { display: flex; gap: var(--space-sm); color: var(--green); }
.clear-state > span { font-weight: 900; }
.clear-state p { color: var(--ink-soft); font-size: .86rem; }
.clear-state strong { color: var(--green); }
.timeline { gap: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 1rem 1fr; gap: var(--space-sm); padding-bottom: var(--space-lg); }
.timeline li:not(:last-child)::after { content: ""; position: absolute; top: .8rem; bottom: 0; left: .24rem; width: 1px; background: var(--line); }
.timeline-dot { z-index: 1; width: .55rem; height: .55rem; margin-top: .25rem; border-radius: 50%; background: var(--petrol); }
.timeline div { display: grid; gap: .12rem; }
.timeline p, .timeline small { font-size: .77rem; }
.timeline p { color: var(--ink-soft); }
.note-form { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--line); }
.next-action { display: flex; align-items: end; justify-content: space-between; gap: var(--space-xl); margin-top: var(--space-2xl); padding: var(--space-xl); background: var(--petrol-deep); color: var(--surface); }
.next-action .section-index { color: oklch(82% 0.08 75); }
.next-action h2 { margin-block: var(--space-xs); }
.next-action p:not(.section-index) { max-width: 58ch; color: color-mix(in oklch, var(--surface) 72%, var(--petrol)); }

.toast-stack { position: fixed; z-index: 100; top: 5rem; right: var(--space-md); width: min(24rem, calc(100% - 2rem)); display: grid; gap: var(--space-xs); }
.toast { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-lift); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md); }
.toast--success { border-color: var(--green); }
.toast--error { border-color: var(--red); }
.loading-veil { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--space-md); background: color-mix(in oklch, var(--petrol-deep) 88%, transparent); color: var(--surface); }
.loader { width: 2rem; height: 2rem; border: .2rem solid color-mix(in oklch, var(--surface) 30%, transparent); border-top-color: var(--surface); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-page { min-height: 65vh; display: grid; place-items: start; align-content: center; gap: var(--space-md); max-width: 44rem; }
.error-code { color: var(--line-strong); font: 800 clamp(5rem, 20vw, 12rem)/.7 var(--font-display); letter-spacing: -.08em; }
.error-page > p:not(.eyebrow) { max-width: 55ch; color: var(--ink-soft); }
.bottom-nav { display: none; }

@media (max-width: 64rem) {
  .case-row__link { grid-template-columns: minmax(17rem, 2fr) minmax(9rem, 1fr) minmax(9rem, 1fr) 2rem; }
  .case-owner { display: none; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timeline-section { grid-column: span 1; }
}

@media (max-width: 48rem) {
  .topbar { position: sticky; z-index: 20; top: 0; min-height: 4rem; }
  .user-name { display: none; }
  .page-shell { padding: var(--space-lg) var(--space-md) 7rem; }
  .page-heading--split { grid-template-columns: 1fr; }
  .desktop-cta { display: none; }
  h1 { font-size: 2.15rem; }
  .status-ledger { grid-template-columns: repeat(2, 1fr); }
  .status-ledger > div:nth-child(2) { border-right: 0; }
  .status-ledger > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .workspace-tools { align-items: stretch; flex-direction: column; }
  .filter-row { flex-direction: column; }
  .search-field input, .select-field select { width: 100%; }
  .case-row__link { min-height: 8.2rem; grid-template-columns: 1fr auto; grid-template-areas: "identity arrow" "progress state"; gap: var(--space-sm); padding: var(--space-md) var(--space-xs); }
  .case-identity { grid-area: identity; align-items: flex-start; }
  .case-progress { grid-area: progress; }
  .case-state { grid-area: state; justify-items: end; }
  .row-arrow { grid-area: arrow; align-self: center; }
  .case-owner { display: none; }
  .form-section { grid-template-columns: 1fr; gap: var(--space-lg); }
  .form-section__intro { max-width: 28rem; }
  .form-actions { bottom: 4.65rem; }
  .case-header { align-items: flex-start; flex-direction: column; }
  .case-title { align-items: flex-start; flex-direction: column; gap: var(--space-sm); }
  .case-header__meta { justify-items: start; }
  .step small { font-size: .62rem; }
  .document-row { grid-template-columns: 2rem minmax(0, 1fr) auto; grid-template-areas: "state info badge" ". upload open"; }
  .document-state { grid-area: state; }
  .document-info { grid-area: info; }
  .document-row > .status { grid-area: badge; }
  .upload-form { grid-area: upload; }
  .document-row > .icon-button { grid-area: open; }
  .route-form { grid-template-columns: 1fr; }
  .detail-side { grid-template-columns: 1fr; }
  .next-action { align-items: stretch; flex-direction: column; }
  .next-action .button { width: 100%; }
  .bottom-nav { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(2, 1fr); padding: .35rem max(.5rem, env(safe-area-inset-right)) max(.35rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); background: var(--petrol-deep); color: color-mix(in oklch, var(--surface) 72%, var(--petrol)); }
  .bottom-nav__item { min-height: 4rem; display: grid; place-items: center; align-content: center; gap: .18rem; font-size: .68rem; font-weight: 700; text-decoration: none; }
  .bottom-nav__item svg { width: 1.35rem; height: 1.35rem; }
  .bottom-nav__item.is-active { color: var(--surface); }
  .bottom-nav__item--create { border-left: 1px solid color-mix(in oklch, var(--surface) 15%, transparent); }
}

@media (max-width: 36rem) {
  .login-layout { display: block; background: var(--paper); }
  .login-intro { min-height: 18rem; justify-content: flex-start; padding: var(--space-lg); }
  .login-intro .eyebrow { margin-top: var(--space-xl); }
  .login-intro h1 { font-size: 2.35rem; }
  .login-intro > p:not(.eyebrow), .login-steps { display: none; }
  .login-intro::after { font-size: 7rem; bottom: -1.2rem; }
  .login-panel { min-height: calc(100vh - 18rem); padding: var(--space-xl) var(--space-lg); }
  .brand--large .brand-mark { width: 2.6rem; height: 2.6rem; }
  .status-ledger strong { font-size: 1.8rem; }
  .case-identity { flex-direction: column; gap: var(--space-xs); }
  .case-row__link { min-height: 10rem; }
  .form-grid, .form-grid--compact, .choice-grid { grid-template-columns: 1fr; }
  .field--wide { grid-column: span 1; }
  .stepper { margin-inline: -.5rem; }
  .step small { max-width: 4rem; }
  .step:nth-child(2) small { font-size: 0; }
  .step:nth-child(2) small::after { content: "Gerar"; font-size: .62rem; }
  .document-row { padding-inline: var(--space-sm); }
  .document-row > .status { display: none; }
  .document-row { grid-template-columns: 2rem minmax(0, 1fr); grid-template-areas: "state info" ". upload" ". open"; }
  .document-row > .icon-button { width: auto; justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .topbar, .bottom-nav, .form-actions, .button, .upload-form, .toast-stack { display: none !important; }
  body, .page-shell { background: white; color: black; }
  .page-shell { width: 100%; padding: 0; }
  .detail-layout { grid-template-columns: 1fr; }
}