/* Round 1: brand values live in tokens.css. Staff-workspace extensions below
   are layout choices, not additional brand colours. See docs/design/CHANGES.md. */
@import url("tokens.css");

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-block: var(--dimension-space-24) calc(var(--mobile-nav-height) + var(--dimension-space-24)); }
body { margin: 0; font: var(--weight-body) var(--type-body)/var(--leading-body) var(--font-body); color: var(--color-text-primary); background: var(--color-surface-canvas); }
main { width: 100%; max-width: var(--width-workspace); margin: 0 auto; padding: var(--dimension-space-32); }
main > section { min-width: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-display); line-height: var(--leading-heading); overflow-wrap: anywhere; }
h1 { font-size: var(--type-title); margin: 0 0 var(--dimension-space-16); }
h2 { font-size: var(--type-section); margin: var(--dimension-space-24) 0 var(--dimension-space-12); }
h3 { font-size: var(--type-section); }
p { margin: 0 0 var(--dimension-space-16); }
a { color: var(--color-text-brand); text-underline-offset: var(--dimension-space-4); overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: var(--focus-width); }
:focus-visible { outline: var(--focus-width) solid var(--color-text-brand); outline-offset: var(--focus-width); }
button, input, select, textarea { font: inherit; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--dimension-space-8); min-height: var(--dimension-size-control-md); padding: var(--dimension-space-8) var(--dimension-space-16); border: var(--border-width) solid var(--color-control-border); border-radius: var(--dimension-radius-md); background: var(--color-surface-default); color: var(--color-text-primary); font-weight: var(--weight-label); text-align: center; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
button:hover, .button:hover { background: var(--color-surface-brand-faint); border-color: var(--color-text-brand); }
.primary, .login button, .searchbox button, button[value=assign_here], button[value=confirm], button[value=reconfirm], button[value=handled], .confirm-assign button[value=assign_other], .create > button { background: var(--color-surface-interactive); border-color: var(--color-surface-interactive); color: var(--color-text-inverse); }
.primary:hover, .login button:hover, .searchbox button:hover, button[value=assign_here]:hover, button[value=confirm]:hover, button[value=reconfirm]:hover, button[value=handled]:hover, .confirm-assign button[value=assign_other]:hover, .create > button:hover { background: var(--color-text-brand-on-tint); color: var(--color-text-inverse); }
button[value=decline], button[value=skip_phishing], .rule-retire form > button, .trail .correct button { color: var(--color-text-danger-on-tint); border-color: var(--color-text-danger-on-tint); }
button:disabled { color: var(--color-text-secondary); background: var(--color-surface-disabled); border-color: var(--color-border-strong); cursor: not-allowed; }
label, legend { font-weight: var(--weight-label); }
label { display: block; margin: var(--dimension-space-12) 0 var(--dimension-space-8); }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { display: block; width: 100%; min-width: 0; min-height: var(--dimension-size-control-md); padding: var(--dimension-space-8) var(--dimension-space-12); background: var(--color-surface-default); border: var(--border-width) solid var(--color-control-border); border-radius: var(--dimension-radius-md); color: var(--color-text-primary); }
input::placeholder { color: var(--color-text-secondary); opacity: 1; }
input[type=checkbox], input[type=radio] { width: var(--dimension-space-20); height: var(--dimension-space-20); accent-color: var(--color-surface-interactive); vertical-align: middle; margin: var(--dimension-space-12) var(--dimension-space-8) var(--dimension-space-12) 0; }
input[type=checkbox] + label, input[type=radio] + label { display: inline-flex; align-items: center; min-height: var(--dimension-size-control-md); width: calc(100% - var(--dimension-size-control-md)); vertical-align: middle; margin: 0; }
fieldset { min-width: 0; margin: var(--dimension-space-24) 0; padding: var(--dimension-space-16); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--dimension-radius-md); }
legend { max-width: 100%; padding: 0 var(--dimension-space-4); }
ul, ol { list-style: none; padding: 0; margin: 0; }
li, dd, span, pre { overflow-wrap: anywhere; }
dd { margin: 0 0 var(--dimension-space-16); }
dt { color: var(--color-text-secondary); font-size: var(--type-sm); font-weight: var(--weight-label); }
pre { white-space: pre-wrap; word-break: break-word; font: inherit; }
pre.text, pre.facts { padding: var(--dimension-space-16); background: var(--color-surface-canvas); border: var(--border-width) solid var(--color-border-default); border-radius: var(--dimension-radius-md); }
code { font-size: var(--type-sm); overflow-wrap: anywhere; }
summary { cursor: pointer; min-height: var(--dimension-size-control-md); padding: var(--dimension-space-12) 0; color: var(--color-text-brand); font-weight: var(--weight-label); }
details { border-top: var(--border-width) solid var(--color-border-default); }
details[open] > summary { margin-bottom: var(--dimension-space-8); }
.technical { margin: var(--dimension-space-16) 0; font-size: var(--type-sm); }
.technical summary { color: var(--color-text-secondary); }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; top: var(--dimension-space-8); left: var(--dimension-space-8); z-index: 10; padding: var(--dimension-space-12); background: var(--color-surface-default); }
.bar { background: var(--color-surface-brand); color: var(--color-text-inverse); }
.bar-inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dimension-space-24); max-width: var(--width-workspace); padding: var(--dimension-space-12) var(--dimension-space-32); margin: auto; }
.bar .brand { display: inline-flex; align-items: center; min-height: var(--dimension-size-control-md); font: var(--weight-display) var(--type-title)/var(--leading-heading) var(--font-display); color: var(--color-text-inverse); text-decoration: none; }
.product-name { color: var(--color-text-brand-inverse); font-size: var(--type-sm); }
.bar nav { display: flex; gap: var(--dimension-space-8); align-items: center; flex-wrap: wrap; margin-left: auto; }
.bar nav a, .bar button { color: var(--color-text-inverse); padding: var(--dimension-space-12); min-height: var(--dimension-size-control-md); border-radius: var(--dimension-radius-md); text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current=page] { background: var(--color-surface-subtle); color: var(--color-text-primary); }
.bar button { background: transparent; border-color: var(--color-text-brand-inverse); }
.bar :focus-visible { outline-color: var(--color-text-brand-inverse); }
.bar .who { color: var(--color-text-brand-inverse); font-size: var(--type-sm); padding: 0 var(--dimension-space-12); }
.demo-banner { margin: 0; padding: var(--dimension-space-8) var(--dimension-space-24); background: var(--color-surface-warning); color: var(--color-text-warning-on-tint); text-align: center; font-size: var(--type-xs); }
.page-intro, .eyebrow, .when, .seen, .hint, .shapes, .count, .needed, .empty { color: var(--color-text-secondary); }
.eyebrow { font-size: var(--type-xs); font-weight: var(--weight-label); margin-bottom: var(--dimension-space-8); }
.page-intro { max-width: var(--width-reading); margin-bottom: var(--dimension-space-24); }
.breadcrumb { margin-bottom: var(--dimension-space-20); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--dimension-size-control-md); }
.panel, .card:not(.review), .problem-page, .refusal, main > .prospect { background: var(--color-surface-default); border: var(--border-width) solid var(--color-border-default); border-radius: var(--dimension-radius-lg); box-shadow: var(--elevation-card); padding: var(--dimension-space-24); }
.panel > h2:first-child { margin-top: 0; }
.card:not(.review), main > .prospect { max-width: var(--width-reading); margin-inline: auto; }
.problem-page, .refusal { max-width: var(--width-form); margin: var(--dimension-space-32) auto; border-top: var(--dimension-space-4) solid var(--color-text-warning-on-tint); }
.problem-page h1 { font-size: var(--type-section); }
.problem, .problems, .warning, .changed-banner, .claim, .done, .closed-further { padding: var(--dimension-space-12) var(--dimension-space-16); border-radius: var(--dimension-radius-md); margin-bottom: var(--dimension-space-16); }
.problem, .problems { color: var(--color-text-danger-on-tint); background: var(--color-surface-danger); }
.warning, .changed-banner, .claim { color: var(--color-text-warning-on-tint); background: var(--color-surface-warning); }
.done, .closed-further { color: var(--color-text-success-on-tint); background: var(--color-surface-success); }
.none { color: var(--color-text-secondary); background: var(--color-surface-default); padding: var(--dimension-space-32); border: var(--border-width) dashed var(--color-border-strong); border-radius: var(--dimension-radius-md); }
.kind, .care, .status:not(h2), .conf, .escalated, .read-only:not(section), .open:not(a), .listed { display: inline-block; padding: var(--dimension-space-4) var(--dimension-space-8); border-radius: var(--dimension-radius-full); background: var(--color-surface-disabled); color: var(--color-text-secondary); font-size: var(--type-xs); font-weight: var(--weight-label); }
.conf.low, .conf.medium, .escalated, .status.suspended { background: var(--color-surface-warning); color: var(--color-text-warning-on-tint); }
.conf.high, .status.active { background: var(--color-surface-success); color: var(--color-text-success-on-tint); }
.hit.prospect .kind, .status.proposed { background: var(--color-surface-subtle); color: var(--color-text-brand-on-tint); }
.login-page { background: var(--color-surface-brand); }
.login-page main { padding-block: calc(var(--dimension-space-32) * 2); }
.login { max-width: var(--width-login); margin: auto; }
.login-brand { color: var(--color-text-inverse); font: var(--weight-display) var(--type-display)/var(--leading-heading) var(--font-display); margin-bottom: var(--dimension-space-8); }
.login-intro { color: var(--color-text-brand-inverse); margin-bottom: var(--dimension-space-32); }
.login .panel { padding: var(--dimension-space-32); }
.login input { font-family: var(--font-display); font-size: var(--type-title); text-align: center; letter-spacing: var(--dimension-space-4); }
.login button { width: 100%; min-height: var(--dimension-size-control-lg); margin-top: var(--dimension-space-24); }
.deck-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dimension-space-20); }
.deck-list > li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--dimension-space-8); padding: var(--dimension-space-24); background: var(--color-surface-default); border: var(--border-width) solid var(--color-border-default); border-radius: var(--dimension-radius-lg); box-shadow: var(--elevation-card); }
.deck-list > li:hover { border-color: var(--color-text-brand); }
.deck-name { display: inline-flex; align-items: center; min-height: var(--dimension-size-control-md); font: var(--weight-display) var(--type-section)/var(--leading-heading) var(--font-display); text-decoration: none; color: var(--color-text-primary); }
.deck-name::after { content: ""; position: absolute; inset: 0; border-radius: var(--dimension-radius-lg); }
.deck-list .open { font: var(--weight-display) var(--type-title)/var(--leading-heading) var(--font-display); background: var(--color-surface-brand-faint); color: var(--color-text-brand-on-tint); }
.deck-list .answered, .deck-list .oldest, .deck-list .share { color: var(--color-text-secondary); font-size: var(--type-xs); }
.deck-list .note { font-size: var(--type-sm); color: var(--color-text-secondary); }
.deck-list .warn { color: var(--color-text-warning-on-tint); font-size: var(--type-xs); }
.progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dimension-space-16); margin-bottom: var(--dimension-space-24); color: var(--color-text-secondary); }
.counts { background: var(--color-surface-subtle); color: var(--color-text-brand-on-tint); border-radius: var(--dimension-radius-full); padding: var(--dimension-space-4) var(--dimension-space-12); font-weight: var(--weight-label); }
.batch { display: grid; gap: var(--dimension-space-12); }
.card-line, .rule-line { background: var(--color-surface-default); border: var(--border-width) solid var(--color-border-default); border-radius: var(--dimension-radius-lg); padding: var(--dimension-space-20) var(--dimension-space-24); }
.card-line { display: grid; grid-template-columns: minmax(7rem, 0.22fr) minmax(0, 1fr); gap: var(--dimension-space-4) var(--dimension-space-24); }
.card-line > a { grid-column: 1; grid-row: 1 / span 3; align-self: start; display: inline-flex; align-items: center; min-height: var(--dimension-size-control-md); font-weight: var(--weight-label); }
.card-line > span { grid-column: 2; }
.card-line .subject { font-weight: var(--weight-label); }
.card-line .argument, .card-line .note { color: var(--color-text-secondary); }
.card-line .claim { margin: var(--dimension-space-8) 0 0; }
.rule-line { display: flex; flex-wrap: wrap; gap: var(--dimension-space-12); }
.rule-line > a { min-height: var(--dimension-size-control-md); display: inline-flex; align-items: center; }
.rule-line .sentence { flex-basis: 100%; font-weight: var(--weight-label); }
.rule-line .taught-by { flex-basis: 100%; color: var(--color-text-secondary); }
.rule-actions { width: 100%; background: var(--color-surface-canvas); border-radius: var(--dimension-radius-md); padding: var(--dimension-space-16); }
.rule-actions .hint { display: block; margin: var(--dimension-space-12) 0; }
.rule-actions button { margin: var(--dimension-space-4) var(--dimension-space-4) 0 0; }
.review-heading { margin-bottom: var(--dimension-space-24); }
.review-heading h1 { margin-bottom: var(--dimension-space-12); }
.review-heading .reason { max-width: var(--width-reading); color: var(--color-text-secondary); }
.review-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: var(--dimension-space-24); }
.review-grid > * { min-width: 0; }
.document-frame { background: var(--color-surface-disabled); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--dimension-radius-md); padding: var(--dimension-space-12); margin-bottom: var(--dimension-space-16); }
.preview { display: block; max-width: 100%; width: 100%; height: auto; background: var(--color-surface-default); border: var(--border-width) solid var(--color-border-default); }
.open-line { display: flex; flex-wrap: wrap; gap: var(--dimension-space-8); margin: var(--dimension-space-12) 0 0; align-items: center; }
a.open, a.retire { display: inline-flex; align-items: center; min-height: var(--dimension-size-control-md); font-weight: var(--weight-label); }
.mail { display: flex; flex-direction: column; gap: var(--dimension-space-4); }
.mail .subject { font-weight: var(--weight-label); }
.mail .sender, .mail .when { color: var(--color-text-secondary); font-size: var(--type-sm); }
.fields li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: start; gap: var(--dimension-space-8); padding: var(--dimension-space-12) 0; border-bottom: var(--border-width) solid var(--color-border-default); }
.fields .field { color: var(--color-text-secondary); }
.fields .value { font-weight: var(--weight-label); }
.argument li { padding: var(--dimension-space-8) 0; }
.candidate-block { border-left: var(--dimension-space-4) solid var(--color-text-brand); padding: var(--dimension-space-12) var(--dimension-space-16); background: var(--color-surface-brand-faint); border-radius: var(--dimension-radius-md); margin-bottom: var(--dimension-space-20); }
.candidate-block h2 { margin-top: 0; }
.teach { background: var(--color-surface-brand-faint); border-color: var(--color-text-brand); }
.teach:has(input:checked) { border-width: var(--focus-width); background: var(--color-surface-subtle); }
.teach .hint { margin-top: var(--dimension-space-8); font-size: var(--type-sm); }
.lessons { font-size: var(--type-sm); color: var(--color-text-secondary); }
.lessons li { margin-top: var(--dimension-space-8); }
.lessons .answer { color: var(--color-text-primary); font-weight: var(--weight-label); }
.corrections { margin-top: var(--dimension-space-16); }
.corrections fieldset { margin-top: 0; }
.buttons { display: flex; flex-wrap: wrap; gap: var(--dimension-space-8); margin-top: var(--dimension-space-24); }
.buttons button[value=assign_here] { flex-basis: 100%; min-height: var(--dimension-size-control-lg); }
.pick { margin-top: var(--dimension-space-24); padding-top: var(--dimension-space-8); border-top: var(--border-width) solid var(--color-border-strong); }
.searchbox { display: flex; flex-wrap: wrap; align-items: end; gap: var(--dimension-space-8); }
.searchbox label { flex-basis: 100%; margin-bottom: 0; }
.searchbox input { flex: 1 1 16rem; }
.searchbox .hint { flex-basis: 100%; margin-bottom: 0; }
.search .searchbox { max-width: var(--width-reading); margin-bottom: var(--dimension-space-24); padding: var(--dimension-space-24); border: var(--border-width) solid var(--color-border-default); border-radius: var(--dimension-radius-lg); background: var(--color-surface-default); }
.hits { display: grid; gap: var(--dimension-space-12); margin-top: var(--dimension-space-16); }
.hit { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dimension-space-8) var(--dimension-space-12); padding: var(--dimension-space-16) var(--dimension-space-20); background: var(--color-surface-default); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--dimension-radius-md); }
.hit .name { font-weight: var(--weight-label); }
.hit > a { display: inline-flex; min-height: var(--dimension-size-control-md); align-items: center; }
.hit .where { flex-basis: 100%; }
.hit .seen, .hit .why { flex-basis: 100%; color: var(--color-text-secondary); font-size: var(--type-sm); }
.hit form { margin-left: auto; }
.flow-steps { display: flex; flex-wrap: wrap; gap: var(--dimension-space-8) var(--dimension-space-16); margin: 0 0 var(--dimension-space-24); color: var(--color-text-secondary); font-size: var(--type-sm); }
.flow-steps [aria-current=step] { color: var(--color-text-primary); font-weight: var(--weight-label); }
.flow-steps a { display: inline-flex; min-height: var(--dimension-size-control-md); align-items: center; }
.flow-steps span { display: inline-flex; min-height: var(--dimension-size-control-md); align-items: center; }
.confirm-assign .household { display: flex; flex-direction: column; gap: var(--dimension-space-8); background: var(--color-surface-brand-faint); border-radius: var(--dimension-radius-md); padding: var(--dimension-space-20); }
.confirm-assign .household .name { font: var(--weight-display) var(--type-title)/var(--leading-heading) var(--font-display); }
.confirm-assign .answers > button, .create > button { min-height: var(--dimension-size-control-lg); width: 100%; margin-top: var(--dimension-space-20); }
.household-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.8fr); gap: var(--dimension-space-24); align-items: start; }
.household-grid > * { min-width: 0; }
.household-grid .panel { margin-bottom: var(--dimension-space-24); }
.timeline li, .orders li, .stored li, .trail li, .unattached li, ul.members li, .contacts li, .evidence li, .rule-decisions li, .values li, .findings li, .contact-points li { padding: var(--dimension-space-16) 0; border-bottom: var(--border-width) solid var(--color-border-default); }
.timeline li { border-left: var(--focus-width) solid var(--color-border-strong); padding-left: var(--dimension-space-20); }
.timeline .headline { display: block; font-weight: var(--weight-label); }
.timeline .line-details { margin-top: var(--dimension-space-8); }
.timeline .line-details[open] dl { display: grid; grid-template-columns: minmax(5rem, 0.3fr) minmax(0, 1fr); gap: var(--dimension-space-8); }
.timeline dd { margin: 0; }
.contact-points .label { display: block; font-size: var(--type-xs); color: var(--color-text-secondary); }
.trail .note, .stored .subject { display: block; }
.trail form { margin-top: var(--dimension-space-12); }
.orders li, .stored li, .evidence li { display: flex; flex-wrap: wrap; gap: var(--dimension-space-8) var(--dimension-space-12); align-items: center; }
.orders .ref { font-weight: var(--weight-label); }
.stored a, .evidence a { margin-left: auto; }
.quarantine { border-top: var(--dimension-space-4) solid var(--color-text-danger-on-tint) !important; }
.quarantine h1 { color: var(--color-text-danger-on-tint); }
.quarantine .release, .deck[data-deck=quarantine] > .note { padding: var(--dimension-space-16); background: var(--color-surface-danger); color: var(--color-text-danger-on-tint); border-radius: var(--dimension-radius-md); }
.deck[data-deck=quarantine] .card-line { border-left: var(--dimension-space-4) solid var(--color-text-danger-on-tint); }
.identity .values { display: grid; gap: var(--dimension-space-12); }
.identity .values li { padding: var(--dimension-space-16); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--dimension-radius-md); font-weight: var(--weight-label); }
.identity .recommended { margin-top: var(--dimension-space-20); padding: var(--dimension-space-16); background: var(--color-surface-brand-faint); border-radius: var(--dimension-radius-md); }
.identity .recommended strong { display: block; margin-bottom: var(--dimension-space-8); }
.mobile-step-nav { display: none; }
@media (min-width: 861px) { h1 { font-size: var(--type-display); } }
@media (max-width: 1050px) { .deck-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-name { display: none; } }
@media (max-width: 820px) {
  main { padding: var(--dimension-space-20) var(--dimension-space-16); }
  .bar-inner { padding: var(--dimension-space-8) var(--dimension-space-16); gap: var(--dimension-space-8); }
  .bar nav { gap: var(--dimension-space-4); }
  .bar .who { display: none; }
  .review-grid, .household-grid { grid-template-columns: minmax(0, 1fr); }
  .panel, .card:not(.review), main > .prospect { padding: var(--dimension-space-16); }
  .card-line { grid-template-columns: minmax(0, 1fr); padding: var(--dimension-space-16); }
  .card-line > a, .card-line > span { grid-column: 1; grid-row: auto; }
  .review { padding-bottom: var(--mobile-nav-height); }
  .mobile-step-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dimension-space-8); position: fixed; inset: auto 0 0; z-index: 5; padding: var(--dimension-space-12) var(--dimension-space-16) calc(var(--dimension-space-12) + env(safe-area-inset-bottom)); background: var(--color-surface-default); border-top: var(--border-width) solid var(--color-border-strong); box-shadow: var(--elevation-overlay); }
  .mobile-step-nav .primary { flex: 1; min-width: min(100%, var(--dimension-size-control-primary-w)); min-height: var(--dimension-size-control-lg); }
  body:has(form:focus-within) .mobile-step-nav { display: none; }
  input:not([type=radio]):not([type=checkbox]), select, textarea { font-size: var(--type-input); }
  .searchbox button { width: 100%; }
  .fields li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fields .conf { grid-column: 2; justify-self: start; }
}
@media (max-width: 560px) {
  .bar-inner { justify-content: space-between; }
  .bar .brand { font-size: var(--type-section); }
  .bar nav { margin-left: 0; }
  .bar nav a, .bar button { padding-inline: var(--dimension-space-8); font-size: var(--type-sm); }
  .demo-banner { text-align: left; padding-inline: var(--dimension-space-16); }
  .deck-list { grid-template-columns: minmax(0, 1fr); }
  .deck-list > li { padding: var(--dimension-space-16) var(--dimension-space-20); }
  .buttons button { width: 100%; }
  .login-page main { padding-block: var(--dimension-space-32); }
  .login .panel { padding: var(--dimension-space-24); }
  .rule-actions button { width: 100%; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media print { .bar, .mobile-step-nav, .answers, .pick { display: none; } main { max-width: none; } }

/* Compact working view: keep evidence and the answer within the first screen. */
.review-heading h2 { font: var(--weight-label) var(--type-body)/var(--leading-body) var(--font-body); margin: var(--dimension-space-12) 0 var(--dimension-space-8); }
.review-heading .reason { margin-bottom: 0; }
.document-frame .preview { max-height: var(--height-preview); object-fit: contain; }
.lesson-details { margin-top: var(--dimension-space-8); font-size: var(--type-sm); }
.lesson-details summary { font-size: var(--type-sm); }
.teach .hint { margin-bottom: 0; }
.card-line { position: relative; }
.card-line > a::after { content: ""; position: absolute; inset: 0; border-radius: var(--dimension-radius-lg); }
.card-line:hover { border-color: var(--color-text-brand); }
@media (max-width: 820px) {
  .bar .who { display: block; flex-basis: 100%; padding: 0 0 var(--dimension-space-4); }
}
@media (max-width: 820px) {
  main a { display: inline-flex; align-items: center; min-height: var(--dimension-size-control-md); max-width: 100%; }
}
.contacts .ident { display: block; margin-top: var(--dimension-space-4); }
.section-nav { display: flex; flex-wrap: wrap; gap: var(--dimension-space-8) var(--dimension-space-24); margin-bottom: var(--dimension-space-24); border-bottom: var(--border-width) solid var(--color-border-strong); }
.section-nav a { display: inline-flex; align-items: center; min-height: var(--dimension-size-control-md); font-weight: var(--weight-label); }
.lesson-details summary { color: var(--color-text-brand-on-tint); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--dimension-space-12) var(--dimension-space-16); text-align: left; vertical-align: top; border-bottom: var(--border-width) solid var(--color-border-default); overflow-wrap: anywhere; }
th { font-weight: var(--weight-label); color: var(--color-text-secondary); background: var(--color-surface-canvas); }