/* Checkride Binder — plain CSS, no build step */
:root {
  --bg: #f6f5f1; --panel: #ffffff; --panel-2: #f0eee8;
  --ink: #1d2126; --ink-2: #4a5059; --ink-3: #6f7680; --line: #dedbd2;
  --accent: #1f4e79; --link: #1a56c4; --mark: #ffe58a;
  --warn-bg: #fff6df; --warn-line: #efd9a6; --warn-ink: #4d3804;
  /* one type scale: body, small, smaller */
  --fs: 15px; --fs-s: 13.5px; --fs-xs: 12.5px;
  --measure: 46rem; /* ~80 characters */
  --radius: 10px; --hdr: 60px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
/* dark: chosen explicitly, or “Auto” with a dark system setting */
:root[data-theme="dark"] {
  --bg: #111418; --panel: #191d23; --panel-2: #222830; --ink: #e6e8eb; --ink-2: #b7bdc6; --ink-3: #8d949f;
  --line: #2d333c; --accent: #8cb8e8; --link: #8ab4ff; --mark: #6b5a12;
  --warn-bg: #2a2313; --warn-line: #5a4719; --warn-ink: #f1dca6;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #111418; --panel: #191d23; --panel-2: #222830; --ink: #e6e8eb; --ink-2: #b7bdc6; --ink-3: #8d949f;
    --line: #2d333c; --accent: #8cb8e8; --link: #8ab4ff; --mark: #6b5a12;
    --warn-bg: #2a2313; --warn-line: #5a4719; --warn-ink: #f1dca6;
    color-scheme: dark;
  }
}
/* large screens: a size you can read at a glance during the oral */
@media (min-width: 1400px) { :root { --fs: 16px; --fs-s: 14.5px; --fs-xs: 13px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--hdr) + 12px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs)/1.5 var(--sans); -webkit-text-size-adjust: 100%; }
p, li, td, .txt, summary { text-wrap: pretty; hanging-punctuation: first; }
a { color: var(--link); text-underline-offset: 2px; }
h2 { font-size: 1.4rem; line-height: 1.25; margin: 0 0 .75rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; line-height: 1.3; margin: 0 0 .5rem; }
h4 { font-size: var(--fs-s); }
sub { font-size: .72em; line-height: 0; vertical-align: -.25em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }
kbd { font: 600 var(--fs-xs)/1 var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; color: var(--ink-2); background: var(--panel); }
table, .code, .refs, kbd { font-variant-numeric: tabular-nums; }
.hbtn { font: inherit; font-size: var(--fs-s); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hbtn:not(:disabled):hover { background: var(--panel-2); }
.hbtn:disabled { color: var(--ink-3); cursor: default; }
/* after closing tasks: a short flash on the one you were in, so your eye finds it */
@keyframes here { from { background: var(--mark); } to { background: var(--panel); } }
.task.here > summary { animation: here 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .task.here > summary { animation: none; background: var(--mark); } }
.linkbtn { font: inherit; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between;
  padding: 10px 24px; background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; line-height: 1.25; }
/* the edition line sits under the name, so the header stays one row on a laptop */
.logo { font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.edition { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tools { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; flex: 1 1 640px; justify-content: flex-end; }
/* the header in two groups — find & move around | what the page shows — 24 px + a rule between them */
.hgroup { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.hfind { flex: 1 1 460px; justify-content: flex-end; } /* a fixed basis: “Collapse all (12)” growing doesn't push the other group to a new row */
.hsep { border-left: 1px solid var(--line); padding-left: 24px; gap: 6px 14px; }
.tools.wrapped .hsep { border-left: 0; padding-left: 0; }
.search { position: relative; flex: 1 1 200px; max-width: 440px; }
.search input { width: 100%; font: inherit; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 34px 7px 10px; }
.search .hint { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search input:focus + .hint, .search input:not(:placeholder-shown) + .hint { display: none; }
.ctl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-s); color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.ctl select { font: inherit; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.ctl input[type=checkbox] { margin: 0; width: 15px; height: 15px; accent-color: var(--accent); }
.search input:focus, .ctl select:focus, .linkbtn:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 36px; max-width: 1640px; margin: 0 auto; padding: 20px 24px; }
.side { position: sticky; top: calc(var(--hdr) + 12px); align-self: start; max-height: calc(100vh - var(--hdr) - 28px); overflow: auto; font-size: var(--fs-s); display: flex; flex-direction: column; gap: 1px; }
.side a { color: var(--ink-2); text-decoration: none; padding: 4px 8px; border-radius: 6px; display: flex; gap: 6px; line-height: 1.3; }
.side a:hover { background: var(--panel-2); color: var(--ink); }
.side a[aria-current] { background: var(--panel-2); color: var(--ink); }
.side a .rn { flex: none; width: 2.4em; color: var(--ink-3); font-family: var(--mono); font-size: var(--fs-xs); padding-top: 1px; }
.side-h { margin: 14px 8px 2px; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; }
/* the tasks of the area you're in, under it; open ones in bold, the one you're reading tinted */
.stasks { display: none; margin: 2px 0 6px 2.9em; padding-left: 6px; border-left: 1px solid var(--line); }
.side a[aria-current] + .stasks { display: flex; flex-direction: column; gap: 1px; }
.side .stasks a { padding: 3px 8px; font-size: var(--fs-xs); color: var(--ink-3); }
.side .stasks a .sc { flex: none; width: 1.1em; font-family: var(--mono); }
.side .stasks a.open { color: var(--ink); font-weight: 600; }
.side .stasks a[aria-current] { background: var(--panel-2); color: var(--ink); }
.side-theme { display: flex; align-items: center; gap: 8px; margin: 18px 8px 4px; font-size: var(--fs-xs); color: var(--ink-3); }
.side-theme select { font: inherit; }
/* the path in an open task's title: area → task */
.task > summary .path { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); font-size: var(--fs-s); }
/* short of room, the path gives way first (it ends in “…”), then the title wraps */
.task[open] > summary .path { display: block; flex: 0 100 auto; min-width: 3.5em; }
.task > summary .path a { color: inherit; text-decoration: none; }
.task > summary .path a:hover { color: var(--link); text-decoration: underline; }
main { min-width: 0; }
.block { margin-bottom: 44px; }
.h-sub { color: var(--ink-3); font-weight: 400; font-size: .95rem; margin-left: 6px; }
.searchinfo { margin: 0 0 16px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); }
/* disclaimer until "I understand"; the footer keeps the same text */
.ack { max-width: var(--measure); margin: 0 0 16px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.ack p { margin: 0 0 10px; }
.acked .ack { display: none; }
/* “Official sources only”: nothing personal on screen */
.exam .notes-only { display: none !important; }
#about p { max-width: var(--measure); margin: 0 0 10px; }
.foot { color: var(--ink-3); font-size: var(--fs-xs); border-top: 1px solid var(--line); padding-top: 12px; max-width: var(--measure); }

/* ---------- quick reference cards ---------- */
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.qcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; font-size: var(--fs-s); }
.qcard.wide { grid-column: 1 / -1; }
.qcard p { margin: .45rem 0; }
.qcard h3:not(:first-child) { margin-top: .9rem; }
.qcard table { width: 100%; border-collapse: collapse; }
.qcard th, .qcard td { text-align: left; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.qcard th { color: var(--ink-3); font-weight: 600; font-size: var(--fs-xs); }
.qcard tr:last-child td { border-bottom: 0; }
.qcard td:first-child { white-space: nowrap; font-weight: 500; }
.qcard tr.sub td { color: var(--ink-3); font-weight: 600; font-size: var(--fs-xs); padding-top: 10px; }
.qcard .note { color: var(--ink-2); }
.cite { font-weight: 500; font-size: var(--fs-s); margin-left: 6px; text-decoration: none; white-space: nowrap; }
.cite:hover { text-decoration: underline; }
.tight { margin: 0; padding-left: 1.1rem; }
.tight li { margin: 3px 0; }
.tight li.ind { list-style: none; margin-left: .2rem; color: var(--ink-2); }
.check { list-style: none; padding-left: 0; }
.check label { display: flex; gap: 8px; align-items: baseline; cursor: pointer; }
.check input { flex: none; accent-color: var(--accent); transform: translateY(2px); }
.check label:has(input:checked) { color: var(--ink-3); }
.lamp { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.lamp.g { background: #22a35a; } .lamp.r { background: #e0352b; } .lamp.w { background: #fff; border: 1px solid #999; }
.lamp.rg { background: linear-gradient(90deg, #e0352b 50%, #22a35a 50%); }
/* flashing = ring, not animation: nothing should blink on a page you stare at for an hour */
.lamp.blink { background: transparent; border: 3px solid; }
.lamp.g.blink { border-color: #22a35a; } .lamp.r.blink { border-color: #e0352b; } .lamp.w.blink { border-color: #999; }
@media (min-width: 1400px) { .qcard.wide { grid-column: span 2; } .qcard.full { grid-column: 1 / -1; } }

/* ---------- references: one link per line, columns aligned ---------- */
.refs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: fit-content(15em) minmax(0, 1fr) max-content; column-gap: 14px; font-size: var(--fs-s); line-height: 1.4; }
.refs > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.ref { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding: 3px 6px; margin: 0 -6px; border-radius: 6px; color: var(--ink-2); text-decoration: none; }
.ref:hover { background: var(--panel-2); }
.ref .rt { color: var(--link); font-weight: 600; }
.ref:hover .rt { text-decoration: underline; }
.ref .ft { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; text-align: right; }
.refs.sm { font-size: var(--fs-xs); margin-top: 3px; }
.refs.sm .ref { padding: 1px 6px; }
@supports not (grid-template-columns: subgrid) {
  .refs { display: block; } .refs > li { display: block; }
  .ref { display: flex; gap: 12px; } .ref .ft { margin-left: auto; }
}
.linkgroups { columns: 500px; column-gap: 14px; }
.linkgroups section { break-inside: avoid; margin-bottom: 14px; }
.linkgroups section { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.linkgroups h3 { font-size: var(--fs-s); color: var(--ink-2); }
.legend { font-size: var(--fs-xs); color: var(--ink-2); margin: -4px 0 14px; }

/* ---------- areas & tasks ---------- */
.area { margin-bottom: 26px; }
.area > h3 { display: flex; align-items: baseline; gap: 10px; font-size: 1.1rem; padding: 6px 0; border-bottom: 2px solid var(--line); margin-bottom: 8px; }
.area > h3 .rn { font-family: var(--mono); color: var(--ink-3); font-size: var(--fs-s); font-weight: 500; }
.task { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; }
.task > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 10px 16px; border-radius: var(--radius); }
.task > summary::-webkit-details-marker { display: none; }
.task > summary::before { content: "▸"; color: var(--ink-3); transition: transform .15s; display: inline-block; width: 10px; flex: none; }
.task[open] > summary::before { transform: rotate(90deg); }
.task > summary:hover { background: var(--panel-2); }
/* the open task's title stays visible while you read its elements */
.task[open] > summary { position: sticky; top: var(--hdr); z-index: 5; background: var(--panel); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.code { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.ttl { font-weight: 650; flex: 1 1 auto; min-width: 0; }
.badge { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.badge.notes { color: var(--warn-ink); }
.tbody { padding: 14px 16px 16px 36px; }
.trefs h4, .tmain > h4 { margin: 0 0 4px; color: var(--ink-2); }
.trefs { margin-bottom: 12px; max-width: var(--measure); }
.tmain > * { max-width: var(--measure); }
/* wide screens: references sit in their own column and stay in view while you read */
@media (min-width: 1200px) {
  .tbody.has-refs { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(18rem, 1fr); gap: 0 40px; align-items: start; }
  .tbody.has-refs .tmain { grid-column: 1; grid-row: 1; }
  /* scrolls up and down only; 6px of padding (offset by the margin) holds the rows' hover background, which
     reaches 6px past the text on each side, so it no longer spills over and adds a sideways scrollbar */
  .tbody.has-refs .trefs { grid-column: 2; grid-row: 1; margin: 0 -6px; padding: 0 6px; position: sticky; top: calc(var(--hdr) + 58px); max-height: calc(100vh - var(--hdr) - 76px); overflow-x: hidden; overflow-y: auto; }
}
.acsnote { font-size: var(--fs-s); color: var(--ink-2); font-style: italic; margin: 0 0 10px; }
.acsline { font-size: var(--fs-xs); color: var(--ink-3); margin: 14px 0 0; }
.partial { font-size: var(--fs-s); color: var(--ink-2); margin: 12px 0 0; }
.hiddennote { color: var(--ink-2); font-size: var(--fs-s); margin: 4px 0 0; }
.gotchas { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 8px; padding: 8px 14px; margin: 0 0 12px; color: var(--warn-ink); }
.gotchas h4 { margin: 0 0 4px; }
.gotchas ul { margin: 0; padding-left: 1.1rem; }
.gotchas li { margin: 5px 0; }
/* one emphasis per note: the bold lead-in; inner emphasis falls back to regular weight */
.gotchas li b { font-weight: inherit; }
.gotchas li > b:first-child { font-weight: 650; color: var(--ink); }
.els h4 { margin: 16px 0 4px; color: var(--ink-2); }
.el { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 2px 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.el:last-child { border-bottom: 0; }
.el .code { padding-top: 2px; }
.el.subel { padding-left: 1.2em; }
.el.arch .txt { color: var(--ink-3); font-style: italic; }
.el.hit { background: color-mix(in srgb, var(--mark) 30%, transparent); }
/* graded tolerance: an outline, not a colour, so blue stays for links and yellow for found */
.tol { border: 1px solid var(--ink-3); border-radius: 4px; padding: 0 3px; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.empty { color: var(--ink-3); font-style: italic; }

/* cross-country planning card: steps beside the formulas */
.xc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 8px 32px; align-items: start; }
.xc .steps { margin: 0; padding-left: 1.4rem; }
.xc .steps li { margin: 5px 0; }
.xc .formulas td:first-child { white-space: nowrap; font-weight: 500; color: var(--ink-2); }
@media (max-width: 900px) { .xc { grid-template-columns: 1fr; } }
.qcard a:not(.cite) { text-decoration: none; }
.qcard a:not(.cite):hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; padding: 12px 16px; }
  .top { padding: 10px 16px; }
  .side { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .side-h { display: none; }
  .stasks { display: none !important; }
  .side-theme { margin: 4px 0 0; }
  .hsep { border-left: 0; padding-left: 0; }
  .side a { background: var(--panel); border: 1px solid var(--line); padding: 2px 8px; font-size: var(--fs-xs); }
  .side a .rn { width: auto; }
  .side a .an { display: none; }
  #sideAreas { display: contents; }
}
@media (max-width: 560px) {
  .top { padding: 8px 12px; }
  .tbody { padding: 10px 12px 12px; }
  .el { grid-template-columns: 1fr; }
  .edition { display: none; }
  /* on a phone the header scrolls away, so the page gets the whole screen; open task titles still stick to the top */
  .top { position: static; }
  .task > summary { flex-wrap: wrap; row-gap: 2px; }
  .task[open] > summary .path { flex: 1 1 calc(100% - 30px); white-space: normal; }
  .ttl { flex: 1 1 60%; } /* the badges drop to their own line instead of squeezing the title into a column */
  .hfind .search { flex-basis: 100%; max-width: none; }
  .hfind .hbtn { flex: 1 1 0; }
  .qcard td:first-child { white-space: normal; }
  .refs { grid-template-columns: fit-content(9em) minmax(0, 1fr) max-content; }
}

/* ---------- print ---------- */
@media print {
  .top, .side, #searchinfo, .hiddennote { display: none !important; }
  .layout { display: block; padding: 0; }
  body { background: #fff; color: #000; font-size: 11px; }
  .task, .qcard, .linkgroups section { break-inside: avoid; border-color: #bbb; }
  .task[open] > summary { position: static; }
  .task > summary::before { display: none; }
  .tbody.has-refs .trefs { position: static; max-height: none; }
}