/* Global header, footer and outer geometry have one owner. */
:root {
  --page-width: 1320px;
  --page-gutter: 32px;
  --page-top-gap: 32px;
  --section-gap: 24px;
  --header-height: 64px;
  --reader-toolbar-height: 0px;
}
html {
  scroll-padding-top: calc(var(--header-height) + var(--reader-toolbar-height) + var(--exam-toolbar-height,0px) + 20px);
  scroll-padding-bottom: calc(var(--attempt-navigation-height,0px) + 20px);
}
dialog { --attempt-navigation-height: 0px; scroll-padding-bottom: calc(var(--attempt-navigation-height) + 20px); }
.ui-icon { width:20px; height:20px; flex-shrink:0; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; }
.top { position:sticky; top:0; z-index:40; width:100%; background:var(--surface); border-bottom:1px solid var(--line); }
.header-inner,.reader-toolbar-inner,.footer-inner {
  width:100%; max-width:var(--page-width); margin-inline:auto; padding-inline:var(--page-gutter);
}
.header-inner { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:8px; }
.brand { display:inline-flex; align-items:center; gap:10px; min-height:44px; flex-shrink:0; color:var(--ink); font-size:20px; font-weight:750; line-height:1.4; letter-spacing:-.035em; text-decoration:none; white-space:nowrap; }
.brand img { width:32px; height:32px; }
.brand span { color:var(--muted); font-size:12px; font-weight:400; letter-spacing:0; margin-left:4px; }
.top nav { display:flex; align-items:center; gap:4px; }
.top nav a { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; width:120px; padding:10px 14px; border-radius:var(--radius-control); color:var(--muted); font-size:14px; line-height:1.4; text-align:center; text-decoration:none; white-space:nowrap; }
.top nav a:hover { color:var(--accent-strong); background:var(--surface-subtle); }
.top nav a[aria-current="page"] { color:var(--accent-strong); background:var(--soft); font-weight:650; }
.layout { width:100%; max-width:var(--page-width); margin-inline:auto; padding:var(--page-top-gap) var(--page-gutter) 32px; }
.layout.has-side { display:grid; grid-template-columns:208px minmax(0,1fr); align-items:start; gap:32px; }
.sidebar { position:sticky; align-self:start; top:calc(var(--header-height) + 24px); min-width:0; padding-top:4px; font-size:14px; }
.sidebar nav { display:grid; gap:4px; }
.sidebar nav a { display:block; min-height:44px; padding:10px 12px; border-radius:var(--radius-control); color:var(--text); line-height:1.6; text-decoration:none; }
.sidebar nav a:hover { color:var(--accent-strong); background:var(--surface); }
.sidebar nav a[aria-current] { color:var(--accent-strong); background:var(--soft); font-weight:650; }
.sidebar nav small { float:right; color:var(--muted); font-size:12px; }
.sidebar .button { width:100%; font-size:14px; }
.side-note { margin:24px 12px; color:var(--muted); font-size:14px; }
.side-note b { color:var(--text); }
.update-notice { width:calc(100% - 2 * var(--page-gutter)); max-width:calc(var(--page-width) - 2 * var(--page-gutter)); margin:16px auto 0; }
.foot { width:100%; margin-top:32px; color:var(--muted); font-size:13px; }
.footer-inner { display:grid; grid-template-columns:minmax(200px,.7fr) minmax(0,1.3fr); gap:8px 24px; padding-block:24px; border-top:1px solid var(--line); }
.footer-inner>.analytics-settings { grid-column:2; justify-self:start; font-size:13px; }
.foot p { margin:0; line-height:1.8; }
.foot nav { display:flex; align-content:start; flex-wrap:wrap; gap:0 20px; }
.foot nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); }
.foot nav button { font-size:13px; }
.reader-toolbar { position:sticky; top:var(--header-height); z-index:30; border-bottom:1px solid var(--line); background:var(--surface); }
.reader-toolbar-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; padding-block:6px; }
#reader-vehicle { color:var(--ink); font-size:14px; font-weight:650; white-space:nowrap; }
.reader-toolbar-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; width:336px; max-width:100%; min-width:0; gap:8px; }
.reader-toolbar-actions button,.reader-toolbar-actions a { display:inline-flex; align-items:center; justify-content:center; width:100%; min-width:0; min-height:44px; padding:8px 10px; font-size:14px; white-space:normal; text-align:center; }
.reader-toolbar-actions a { color:var(--muted); }
#reader-contents { display:none; }
.reader-return-question { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; color:var(--accent-strong); font-size:14px; white-space:nowrap; }
body:is([data-exam-view="running"],[data-exam-view="report"],[data-exam-view="result"],[data-review-view])>.foot .footer-inner { grid-template-columns:1fr; padding-block:8px; }
body:is([data-exam-view="running"],[data-exam-view="report"],[data-exam-view="result"],[data-review-view])>.foot .footer-inner>:not(.analytics-settings) { display:none; }
body:is([data-exam-view="running"],[data-exam-view="report"],[data-exam-view="result"],[data-review-view])>.foot .analytics-settings { grid-column:1; }
body:is([data-exam-view="running"],[data-exam-view="report"],[data-exam-view="result"],[data-review-view]) .layout { --page-top-gap:0px; padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
@media(max-width:1100px) {
  :root { --page-gutter:24px; --page-top-gap:24px; }
  .brand span { display:none; }
  .layout.has-side { grid-template-columns:180px minmax(0,1fr); gap:24px; }
  .sidebar nav small { display:none; }
}
@media(max-width:850px) {
  #reader-contents { display:inline-flex; }
  .reader-toolbar-actions { grid-template-columns:repeat(4,minmax(0,1fr)); width:448px; }
}
@media(max-width:800px) {
  .layout.has-side { display:block; }
  .sidebar { position:static; padding:0; margin-bottom:24px; }
  .sidebar .eyebrow,.sidebar .side-note,.sidebar>.button { display:none; }
  .sidebar nav { display:flex; gap:8px; overflow-x:auto; padding-block:2px 8px; }
  .sidebar nav a { flex-shrink:0; background:var(--surface); border:1px solid var(--line); white-space:nowrap; }
  .footer-inner { grid-template-columns:1fr; gap:12px; }
  .footer-inner>.analytics-settings { grid-column:1; }
}
@media(max-width:700px) {
  :root { --page-gutter:16px; --page-top-gap:24px; --header-height:60px; }
  .header-inner { gap:8px; min-height:60px; padding-block:6px; }
  .brand { min-width:32px; min-height:44px; justify-content:center; gap:0; font-size:0; }
  .brand img { width:28px; height:28px; }
  .top nav { flex:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; }
  .top nav a { width:auto; flex:1; min-width:0; gap:0; padding:10px 6px; font-size:13px; }
  .top nav .ui-icon { display:none; }
  .foot { margin-top:24px; }
  .reader-toolbar-inner { gap:8px; }
  .reader-toolbar-actions { gap:4px; }
  .reader-toolbar-actions button,.reader-toolbar-actions a { font-size:13px; padding-inline:8px; }
}
@media(max-width:420px) {
  .top nav { justify-content:space-between; }
  .top nav a { padding-inline:6px; font-size:12px; }
  .reader-toolbar-inner { flex-wrap:wrap; }
  #reader-vehicle { font-size:13px; }
  .reader-toolbar-actions { width:100%; gap:4px; }
  .reader-toolbar-actions button,.reader-toolbar-actions a { font-size:12px; padding-inline:6px; }
}
@media print {
  .top,.foot,.reader-toolbar { display:none; }
  .layout,.layout.has-side { max-width:none; display:block; padding:0; }
  .sidebar { display:none; }
}