/* Direction A, "Tech Order": the answer on the left, the sheet it came from on
   the right. Both themes are the same layout over one set of variables. */

:root {
  --ground: #f3efe4;  --ink: #1d1c18;      --muted: #5a564a;   --soft: #3a372e;
  --line: #c9c2ad;    --field: #fbf9f2;    --desk: #ddd6c1;
  --bar: #24231e;     --bar-ink: #f4f0e5;
  --accent: #4a5a23;  --on-accent: #ffffff; --link: #3d4a21;   --link-hover: #232b12;
  --caution-bg: #ece5cf; --caution-ink: #6b4a00;
  /* one tint per source, so the marker in the answer matches its box */
  --s1-bg: #e4ead0; --s1-mark: #d5dfb4; --s1-badge: #4a5a23; --s1-label: #4f5440;
  --s2-bg: #dfe5ee; --s2-mark: #cfd9e6; --s2-badge: #2f4a68; --s2-label: #46505c;
  --s3-bg: #efe2d0; --s3-mark: #e6d2b5; --s3-badge: #7a4a1e; --s3-label: #5c4a36;
  --s4-bg: #e8dfea; --s4-mark: #dccde0; --s4-badge: #5a3a66; --s4-label: #52465a;
  --serif: 'Source Serif 4', Georgia, serif;
  --label: 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
:root[data-theme="dark"] {
  --ground: #15181b;  --ink: #ece8dc;      --muted: #a39e8f;   --soft: #c4bfae;
  --line: #30363c;    --field: #0f1214;    --desk: #0b0d0f;
  --bar: #1e2328;     --bar-ink: #ece8dc;
  --accent: #a9bd62;  --on-accent: #15181b; --link: #b9c77e;   --link-hover: #d6e2a0;
  --caution-bg: #262217; --caution-ink: #e0b45a;
  --s1-bg: #222a17; --s1-mark: #3a4524; --s1-badge: #a9bd62; --s1-label: #a9b38c;
  --s2-bg: #1b232d; --s2-mark: #2a3a4d; --s2-badge: #8fb0d6; --s2-label: #9fb0c4;
  --s3-bg: #2a2117; --s3-mark: #46351f; --s3-badge: #e0a868; --s3-label: #c2ab8c;
  --s4-bg: #251c29; --s4-mark: #3d2c45; --s4-badge: #c79ad6; --s4-label: #b5a3bd;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--serif);
       font-size: 16px; line-height: 1.5; display: flex; flex-direction: column; }
a { color: var(--link); } a:hover { color: var(--link-hover); }
h1 { margin: 0; font-size: 25px; font-weight: 600; line-height: 1.25; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.mono { font-family: var(--mono); } .muted { color: var(--muted); }
.small { font-size: 14px; } .grow { flex-grow: 1; min-width: 0; }
.eyebrow { font-family: var(--label); font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
           text-transform: uppercase; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-s { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 8px; }
.row-between { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; }
.ruled { border-top: 2px solid var(--ink); padding-top: 16px; }
.lede { font-size: 19px; line-height: 1.45; color: var(--soft); }

/* ------------------------------------------------------------------ header */
.bar { display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 32px;
       border-bottom: 2px solid var(--ink); flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 12px; }
/* The AskJackson logo, in ONE colour. The blue original belongs to the main
   site; an aircraft site wears the same shapes in its own ink. The files in
   brand/site/ are outlines with no colour of their own (tools/make_logo.py),
   used as a mask, so the page paints them: ink on paper, cream on dark. */
.brand-name { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); }
.wordmark { display: block; height: 27px; aspect-ratio: 6.375; background: currentColor;
            -webkit-mask: url(/static/brand/site/wordmark.svg) center / contain no-repeat;
                    mask: url(/static/brand/site/wordmark.svg) center / contain no-repeat; }
.pitch-logo { display: block; width: 300px; max-width: 100%; aspect-ratio: 1076 / 376; background: var(--bar-ink);
              -webkit-mask: url(/static/brand/site/logo.svg) left center / contain no-repeat;
                      mask: url(/static/brand/site/logo.svg) left center / contain no-repeat; }
.brand .mono { font-size: 13px; }
.tabs { display: flex; gap: 20px; flex-grow: 1; font-family: var(--label); font-size: 15px;
        font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.tabs a { text-decoration: none; color: var(--muted); padding: 18px 0 15px; border-bottom: 3px solid transparent; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.tabs .coffee { display: flex; align-items: center; gap: 7px; color: var(--link); }
.tabs .coffee[aria-current="page"] { color: var(--ink); }
.menu { display: contents; }
.menu-btn { display: none; margin-left: auto; color: var(--ink); }
.who { display: flex; align-items: center; gap: 12px; }
.icon-link { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); }
.icon-link:hover { color: var(--accent); }
.chip { display: flex; flex-direction: column; justify-content: center; min-height: 44px; text-decoration: none;
        color: var(--ink); font-family: var(--mono); font-size: 13px; line-height: 1.3; text-align: right; }
.chip:hover { color: var(--ink); }
.chip .model { font-family: var(--label); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.chip.unset { color: var(--link); text-decoration: underline; font-family: var(--label); font-size: 15px; font-weight: 600; }

button, .btn-line, .btn-solid { font-family: var(--label); cursor: pointer; }
.btn-quiet { height: 44px; padding: 0 14px; border: 1px solid var(--ink); background: transparent;
             color: var(--ink); font-size: 15px; font-weight: 600; }
.btn-solid { height: 48px; padding: 0 22px; border: 0; background: var(--accent); color: var(--on-accent);
             font-size: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.btn-solid:disabled { opacity: 0.55; cursor: progress; }
.btn-line { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 18px;
            border: 2px solid var(--ink); background: transparent; color: var(--ink); text-decoration: none;
            font-size: 16px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.btn-line:hover { color: var(--ink); background: var(--field); }
.btn-line .mono { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.wide { width: 100%; justify-content: space-between; } .center { justify-content: center; }
.icon { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; }

input[type="text"], input[type="email"], input[type="number"] { border: 1px solid var(--ink); background: var(--field); color: var(--ink); }
input[type="text"], input[type="email"] { height: 48px; padding: 0 14px; font-family: var(--serif); font-size: 17px; width: 100%; }

/* ----------------------------------------------------------------- welcome */
.welcome { display: flex; flex-grow: 1; min-height: 0; }
.pitch { width: 520px; flex-shrink: 0; padding: 56px 48px; display: flex; flex-direction: column; gap: 24px;
         background: var(--bar); color: var(--bar-ink); }
.pitch h1 { font-size: 40px; line-height: 1.15; }
.pitch .lede { color: var(--bar-ink); opacity: 0.85; font-size: 18px; }
.ticks { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.ticks li { padding-left: 32px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 14px; height: 7px;
                    border-left: 3px solid #b9c77e; border-bottom: 3px solid #b9c77e; transform: rotate(-45deg); }
.pitch-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(244,240,229,0.25); }
.pitch-foot a { color: #d6e2a0; }
.door { flex-grow: 1; min-width: 0; padding: 56px 64px; display: flex; flex-direction: column; gap: 28px; max-width: 760px; overflow-y: auto; }
.providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.providers a { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1px solid var(--ink);
               background: var(--field); color: var(--ink); text-decoration: none; font-family: var(--label);
               font-size: 17px; font-weight: 600; }
.providers a:hover { border-width: 2px; }
.usage { font-size: 13px; color: var(--muted); white-space: nowrap; }
.usage b { color: var(--ink); font-weight: 500; }
.usage.out b { color: #a3271f; }

/* ------------------------------------------------------------------- split */
.split { display: flex; flex-grow: 1; min-height: 0; }
.left { width: 600px; flex-shrink: 0; padding: 28px 32px; display: flex; flex-direction: column;
        gap: 20px; border-right: 1px solid var(--line); overflow-y: auto; }
.ask { display: flex; flex-direction: column; gap: 8px; margin: 0; }

.answer { display: flex; flex-direction: column; gap: 12px; font-size: 19px; line-height: 1.5; }
.answer strong { font-weight: 600; }
.answer ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.asked { font-size: 17px; color: var(--soft); font-style: italic; }
.mark { display: inline-block; padding: 0 7px; margin-left: 2px; color: var(--ink); text-decoration: none;
        font-family: var(--mono); font-size: 13px; font-weight: 500; }
.mark:hover { color: var(--ink); outline: 1px solid var(--ink); }
.caution { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; font-size: 14px;
           line-height: 1.45; background: var(--caution-bg); border: 1px solid var(--line); }
.caution svg { flex-shrink: 0; margin-top: 2px; color: var(--caution-ink); }

/* does this page cover YOUR aircraft: said plainly, above everything but the answer */
.fit { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; font-size: 15px; line-height: 1.45;
       border: 2px solid var(--ink); background: var(--field); }
.fit.excluded { border-color: #a3271f; }
.fit h2 { margin: 0; font-family: var(--label); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.fit.excluded h2 { color: #a3271f; } :root[data-theme="dark"] .fit.excluded h2 { color: #ff8a80; }
:root[data-theme="dark"] .fit.excluded { border-color: #ff8a80; }
.says { margin: 0; padding: 8px 0 0; list-style: none; display: flex; flex-direction: column; gap: 6px;
        border-top: 1px solid rgba(127,127,127,0.35); font-size: 13px; line-height: 1.4; }
.says li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 2px 10px; align-items: baseline; }
.says q { font-family: var(--mono); quotes: "\201C" "\201D"; }
.says .why { grid-column: 2; color: var(--soft); }
.tag { font-family: var(--label); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
       padding: 1px 6px; text-align: center; border: 1px solid currentColor; align-self: start; }
.tag.applies { color: #2f5d1e; } .tag.excluded { color: #a3271f; } .tag.unknown { color: var(--muted); }
:root[data-theme="dark"] .tag.applies { color: #a9d08a; } :root[data-theme="dark"] .tag.excluded { color: #ff8a80; }
.optional { font-weight: 400; color: var(--muted); }
.help { font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--muted); }

/* sources: a shaded box each, labelled fields, small type */
.source { display: flex; gap: 12px; padding: 12px 14px; }
.source .num { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center;
               justify-content: center; color: var(--on-accent); font-family: var(--mono); font-size: 14px; font-weight: 500; }
:root:not([data-theme="dark"]) .source .num { color: #ffffff; }
.source-head { display: flex; gap: 12px; align-items: flex-start; }
.source h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; flex-grow: 1; padding-top: 4px; }
.source dl { margin: 0; display: grid; grid-template-columns: 78px minmax(0, 1fr) 62px minmax(0, 1fr);
             gap: 3px 10px; font-size: 13px; line-height: 1.4; }
.source dt { font-family: var(--label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.source dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
.source .show { flex-shrink: 0; min-height: 44px; margin: -8px -4px -8px 0; padding: 0 4px; border: 0; background: transparent;
                color: var(--link); font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
                text-transform: uppercase; white-space: nowrap; }
.source .show[aria-pressed="true"] { color: var(--ink); cursor: default; }
.t1 { background: var(--s1-bg); } .t1 .num, .badge.t1 { background: var(--s1-badge); } .t1 dt { color: var(--s1-label); } .mark.t1 { background: var(--s1-mark); }
.t2 { background: var(--s2-bg); } .t2 .num, .badge.t2 { background: var(--s2-badge); } .t2 dt { color: var(--s2-label); } .mark.t2 { background: var(--s2-mark); }
.t3 { background: var(--s3-bg); } .t3 .num, .badge.t3 { background: var(--s3-badge); } .t3 dt { color: var(--s3-label); } .mark.t3 { background: var(--s3-mark); }
.t4 { background: var(--s4-bg); } .t4 .num, .badge.t4 { background: var(--s4-badge); } .t4 dt { color: var(--s4-label); } .mark.t4 { background: var(--s4-mark); }

.pages-row { display: flex; gap: 10px; align-items: flex-end; }
.thumbs { display: flex; gap: 8px; align-items: flex-end; }
.thumbs button { padding: 0; border: 1px solid var(--line); background: #ffffff; width: 62px; height: 78px; overflow: hidden; }
.thumbs button[aria-pressed="true"] { border: 3px solid var(--accent); width: 74px; height: 94px; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.field-inline { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.field-inline label { flex-grow: 1; }
.field-inline input { width: 56px; height: 44px; font-family: var(--mono); font-size: 15px; text-align: center; }

.hint { display: flex; flex-direction: column; gap: 16px; padding: 22px; background: var(--field); border: 2px solid var(--ink); }
.hint-head { display: flex; gap: 12px; align-items: flex-start; }
.hint-head svg { flex-shrink: 0; margin-top: 3px; }
.earlier { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--s1-bg); }
.earlier .q { font-size: 18px; line-height: 1.35; }
.earlier .btn-solid { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 52px; text-decoration: none; }
.earlier .btn-solid .mono { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }

.links { display: flex; flex-direction: column; gap: 2px; }
.links a { display: flex; gap: 12px; align-items: baseline; min-height: 32px; font-size: 16px; text-decoration: none; }
.links a span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.links.roomy a span:first-child { text-decoration: none; }
.links a span:first-child { flex-grow: 1; }
.links .when { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.links.roomy a { min-height: 44px; align-items: center; border-bottom: 1px solid var(--line); text-decoration: none; }

/* ------------------------------------------------------------------ viewer */
.right { flex-grow: 1; min-width: 0; background: var(--desk); display: flex; flex-direction: column; }
.viewer-bar { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px; flex-shrink: 0;
              background: var(--bar); color: var(--bar-ink); font-size: 13px; }
.badge { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
         color: #ffffff; font-weight: 500; }
:root[data-theme="dark"] .badge { color: var(--on-accent); }
.viewer { flex-grow: 1; min-height: 0; overflow: auto; padding: 24px; display: flex; justify-content: center; align-items: flex-start; }
.page-tap { display: block; position: relative; width: 100%; max-width: 860px; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.page-tap img { display: block; width: 100%; height: auto; background: #ffffff; box-shadow: 0 12px 28px rgba(0,0,0,0.3); }
.tap-hint { display: none; }
.short { display: none; }

/* the page, full screen: the only way a scanned sheet is readable on a phone */
.zoom { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--desk); }
.zoom .viewer-bar { gap: 6px; padding: 0 8px 0 16px; }
.zoom-toggle { height: 40px; border-color: var(--bar-ink); color: var(--bar-ink); font-size: 14px; }
.zoom-stage { flex-grow: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px; touch-action: pan-x pan-y pinch-zoom; }
.zoom-stage img { display: block; width: 100%; max-width: 1100px; margin: 0 auto; height: auto; background: #ffffff; box-shadow: 0 8px 22px rgba(0,0,0,0.3); }
.zoom-stage.in img { width: 240%; max-width: none; margin: 0; }
.placeholder { width: 100%; max-width: 616px; aspect-ratio: 8.5 / 11; display: flex; flex-direction: column; align-items: center;
               justify-content: center; gap: 12px; padding: 0 15%; border: 2px dashed var(--muted); text-align: center; color: var(--muted); }

/* ------------------------------------------------------------ single pages */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.wide-field { grid-column: 1 / -1; } .tall-field { grid-row: span 3; }
.field select { flex-grow: 1; padding: 6px; border: 1px solid var(--ink); background: var(--field); color: var(--ink);
                font-family: var(--mono); font-size: 14px; line-height: 1.6; }
.field select option:checked { background: var(--accent); color: var(--on-accent); }
/* only once the person has had a go at it: an empty form is not a form full of mistakes */
.field input:user-invalid { border-color: #a3271f; border-width: 2px; }
.themes { margin: 0; padding: 14px 0 0; border: 0; border-top: 2px solid var(--ink); min-width: 0; }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; clear: both; }
#s-reg { text-transform: uppercase; } #s-reg::placeholder { text-transform: none; }
.themes legend { padding: 0; font-family: var(--label); font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
                 text-transform: uppercase; color: var(--muted); float: left; width: 100%; margin-bottom: 10px; }
.themes label { display: flex; gap: 12px; align-items: center; min-height: 64px; padding: 10px 14px;
                border: 1px solid var(--ink); background: var(--field); font-size: 14px; cursor: pointer; }
.themes label:has(input:checked) { border: 3px solid var(--accent); padding: 8px 12px; }
.themes input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.themes strong { display: block; font-size: 17px; font-weight: 600; }
.way { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--s1-bg); }
.way .kind { font-family: var(--label); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
             color: var(--s1-label); width: 70px; flex-shrink: 0; }
.way .mono { font-size: 17px; flex-grow: 1; overflow-wrap: anywhere; }
.single { width: 100%; max-width: 860px; margin: 0 auto; padding: 36px 32px 60px; display: flex; flex-direction: column; gap: 12px; }
.single.wide { max-width: 1240px; }
.form.three { grid-template-columns: 2fr 2fr 1fr; }
.field input[type="number"] { height: 48px; padding: 0 14px; font-family: var(--mono); font-size: 17px; width: 100%; }
#c-code { font-family: var(--mono); font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; height: 56px; }
#c-code::placeholder { letter-spacing: 0.08em; opacity: 0.45; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
     text-transform: uppercase; color: var(--muted); padding: 8px 10px 8px 0; border-bottom: 2px solid var(--ink); white-space: nowrap; }
td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td.mono, td .mono { font-family: var(--mono); font-size: 13px; }
td.code { font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em; white-space: nowrap; }
tr.off td { color: var(--muted); }
td .btn-quiet { height: 36px; font-size: 13px; padding: 0 10px; }
.pill { display: inline-block; padding: 1px 8px; border: 1px solid currentColor; font-family: var(--label); font-size: 12px;
        font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pill.on { color: #2f5d1e; } .pill.off { color: #a3271f; }
:root[data-theme="dark"] .pill.on { color: #a9d08a; } :root[data-theme="dark"] .pill.off { color: #ff8a80; }

.doc { padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.doc .mono { font-size: 13px; color: var(--soft); }

.signin-top { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px;
              text-decoration: none; font-size: 15px; white-space: nowrap; }
.signin-top:hover { color: var(--on-accent); }

/* ------------------------------------------------------------------- phone */
@media (max-width: 900px) {
  /* On a desk the page is one screen tall and its columns scroll inside it. On
     a phone that CLIPPED the page: the sign-in button sat 60px below the end of
     the scrollable area and could not be reached (George, on his phone,
     2026-09-21: "I touch it and nothing works"). Here the page is as tall as
     its content and scrolls like any other. */
  html, body { height: auto; min-height: 100%; }
  body { display: block; }

  /* ONE slim bar. It was 240px, over a third of the screen: logo, count, gear,
     aircraft, theme button and a five-item menu wrapping onto two lines.
     Everything but the logo now sits behind the menu button. */
  .bar { position: sticky; top: 0; z-index: 10; flex-wrap: wrap; height: auto; min-height: 56px; padding: 6px 8px 6px 16px;
         gap: 0 8px; background: var(--ground); }
  .brand .mono { display: none; }
  .wordmark { height: 22px; }
  .menu-btn { display: flex; align-items: center; justify-content: center; }
  .menu { display: none; width: 100%; flex-direction: column; gap: 4px; padding: 8px 8px 14px 0; }
  .menu.open { display: flex; }
  .menu .who { order: -1; margin: 0 0 6px; padding: 10px 12px; gap: 10px; background: var(--field); border: 1px solid var(--line); flex-wrap: wrap; }
  .menu .chip { text-align: left; flex-grow: 1; order: -1; }
  .menu .usage { width: 100%; order: 3; }
  .tabs { flex-direction: column; gap: 0; width: 100%; font-size: 17px; }
  .tabs a { display: flex; align-items: center; min-height: 48px; padding: 0 4px; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; }
  .tabs a[aria-current="page"] { border-bottom-color: var(--line); border-left-color: var(--accent); padding-left: 10px; }
  .menu #theme { align-self: flex-start; margin-top: 10px; }
  .signin-top { width: 100%; height: 48px; font-size: 16px; margin: 4px 8px 8px 0; }

  /* welcome: signing in comes before the pitch */
  .welcome { display: flex; flex-direction: column; min-height: 0; }
  .pitch { width: 100%; padding: 28px 20px; } .pitch h1 { font-size: 30px; }
  .door { order: -1; padding: 24px 20px; overflow: visible; }
  .providers { grid-template-columns: minmax(0, 1fr); }

  /* THE ANSWER PAGE. It was four screens with the manual page LAST, under the
     sources, the page picker and the list of previous answers. The sheet is
     the evidence: it now comes straight after the answer. The two desktop
     columns dissolve (display: contents) so their parts can be put in order. */
  .split { display: flex; flex-direction: column; gap: 16px; padding: 16px; min-height: 0; }
  .left, #state-answer { display: contents; }
  .ask { order: 1; }
  #state-idle, #state-busy, #state-previous { order: 2; }
  #answer-eyebrow { order: 2; margin-bottom: -8px; } #answer-question { order: 3; margin-bottom: -6px; }
  #answer-text { order: 4; font-size: 18px; }
  #answer-fit { order: 5; }
  .right { order: 6; margin: 0 -16px; min-height: 0; }
  #answer-caution { order: 7; }
  #state-answer > .ruled { order: 8; }
  #pages-block { order: 9; }
  #recent-block { order: 10; }
  /* while an answer is up, the list of other people's questions is in the menu */
  .split:has(#answer-text:not(:empty)):has(#state-answer:not([hidden])) #recent-block { display: none; }
  .viewer { padding: 10px; overflow: visible; }
  .viewer-bar { padding: 0 8px 0 16px; height: 48px; }
  .viewer-bar .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #viewer-pos, #zoom-pos { white-space: nowrap; }
  .tap-hint { display: block; position: absolute; right: 8px; bottom: 8px; padding: 6px 10px; background: var(--bar); color: var(--bar-ink);
              font-family: var(--label); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
  .placeholder { aspect-ratio: auto; padding: 28px 10%; }

  .source dl { grid-template-columns: 78px minmax(0, 1fr); }
  .pages-row { flex-direction: column; align-items: stretch; }
  .thumbs { overflow-x: auto; }
  .pages-row .stack-s { flex-direction: row; gap: 16px; }
  .field-inline { flex: 1; }
  .long { display: none; } .short { display: inline; }
  .btn-line { font-size: 15px; }

  .single { padding: 20px 16px 48px; }
  .form, .form.three, .theme-grid { grid-template-columns: minmax(0, 1fr); } .tall-field { grid-row: auto; }
  .field select { height: 220px; }
  .zoom .viewer-bar { height: 52px; font-size: 12px; }
}