/* Training reference library (/training/reference/).
   Built on the tokens in /css/styles.css. Written by lessonkit/reference.mjs (copied from reference-assets/).
   Nothing here needs the network. */

:root {
  --ref-yes: #166534;
  --ref-no: #5b6785;
  --ref-note: #B45309;
  --ref-note-bg: #FFF7ED;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ref-yes: #86EFAC;
    --ref-no: #A9B4D4;
    --ref-note: #FDBA74;
    --ref-note-bg: #2A1D12;
  }
}
:root[data-theme="dark"] {
  --ref-yes: #86EFAC;
  --ref-no: #A9B4D4;
  --ref-note: #FDBA74;
  --ref-note-bg: #2A1D12;
}

.ref { padding: var(--space-4) 0 var(--space-5); }
.ref-wrap { max-width: 1040px; }
@media (max-width: 520px) { .ref-wrap { padding-left: var(--space-3); padding-right: var(--space-3); } }

.ref p, .ref li, .ref dd, .ref td, .ref th { color: var(--color-foreground); }
.ref p { max-width: 72ch; }

.ref-back { margin: 0 0 var(--space-2); }
.ref-back a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.ref-kicker { margin: 0 0 var(--space-1); color: var(--color-accent-text) !important; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ref h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.1; margin-bottom: var(--space-2); }
.ref h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; margin: 0 0 var(--space-3); }
.ref h3 { font-size: 1.1rem; margin: var(--space-4) 0 var(--space-2); }
.ref-lede { font-size: 1.05rem; color: var(--color-muted-foreground) !important; margin-bottom: var(--space-3); }

.ref-role { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.ref-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-ink) 22%, var(--color-border)); background: var(--color-muted); color: var(--color-ink); font-weight: 700; font-size: 0.85rem; line-height: 1.5; }

.ref-built { margin: var(--space-5) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); color: var(--color-muted-foreground) !important; font-size: 0.875rem; }

/* ---------- landing cards ---------- */
.ref .ref-cards { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ref-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4); background: var(--color-card); color: var(--color-card-foreground); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.ref-card h2 { font-size: 1.2rem; margin: 0; }
.ref-card h2 a { color: var(--color-ink); text-decoration: none; }
.ref-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.ref-card h2 a:focus-visible { outline: none; }
.ref-card:focus-within { outline: 3px solid var(--color-ring); outline-offset: 2px; }
.ref-card:hover { border-color: var(--color-ink); }
.ref-card p { margin: 0; }
.ref-card__line { color: var(--color-foreground); }
.ref-card__who { color: var(--color-muted-foreground) !important; font-size: 0.9rem; margin-top: auto !important; }
.ref-card__who strong { color: var(--color-ink); }

/* ---------- search ---------- */
.ref-search { margin: var(--space-3) 0 var(--space-3); padding: var(--space-3); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ref-search[hidden] { display: none; }
.ref-search label { display: block; font-weight: 700; font-size: 0.9rem; color: var(--color-ink); margin-bottom: var(--space-1); }
.ref-search__row { display: flex; gap: var(--space-2); }
.ref-search input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 var(--space-3); font: inherit; font-size: 1rem; color: var(--color-foreground); background: var(--color-background); border: 1px solid var(--color-field-border, color-mix(in srgb, var(--color-ink) 35%, var(--color-border))); border-radius: var(--radius-sm); -webkit-appearance: none; appearance: none; }
.ref-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.ref-search .btn { flex: 0 0 auto; padding: 0 var(--space-3); }
.ref-count { margin: var(--space-2) 0 0 !important; font-size: 0.9rem; font-weight: 700; color: var(--color-muted-foreground) !important; }
.ref [hidden] { display: none !important; }

/* "Nothing matches": the status line is always in the page (so a screen reader announces it when its text appears) but takes
   no room until the search finds nothing */
.ref-empty { margin: 0; }
.ref-empty p { margin: 0; max-width: none; }
.ref-empty.is-on { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); padding: var(--space-3); border-left: 4px solid var(--ref-note); background: var(--ref-note-bg); border-radius: var(--radius-sm); }
.ref-empty.is-on p { flex: 1 1 14rem; font-weight: 700; color: var(--color-foreground); }
.ref-empty .btn { flex: 0 0 auto; padding: 0 var(--space-3); }

/* ---------- jump list ---------- */
.ref-jump { margin: var(--space-3) 0 var(--space-4); }
.ref .ref-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ref-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-card); color: var(--color-ink); font-weight: 700; text-decoration: none; }
.ref-jump a:hover { border-color: var(--color-ink); }

/* ---------- prose sections ---------- */
.ref-sec { margin: var(--space-4) 0 0; padding: var(--space-4); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); scroll-margin-top: 88px; }
@media (max-width: 520px) { .ref-sec { padding: var(--space-3); } }
.ref-sec > :last-child { margin-bottom: 0; }
.ref ul, .ref ol { margin: 0 0 var(--space-3); padding-left: 1.3em; }
.ref li { margin: 6px 0; overflow-wrap: anywhere; }
.ref li > ul, .ref li > ol { margin: 6px 0 0; }
.ref-sec p { margin-bottom: var(--space-2); }

.ref code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; padding: 0.1em 0.4em; border-radius: 6px; background: var(--color-muted); color: var(--color-ink); white-space: normal; overflow-wrap: anywhere; word-break: normal; }

.ref-note { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-left: 4px solid var(--ref-note); background: var(--ref-note-bg); border-radius: var(--radius-sm); }
.ref-note p { margin: 0; }

.ref-legend, .ref-intro, .ref-sec-note { margin: 0 0 var(--space-3); }
.ref-legend { padding: var(--space-3); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ref-legend p, .ref-intro p, .ref-sec-note { margin: 0; max-width: 78ch; }
.ref-legend p { font-size: 0.95rem; }
.ref-intro p + p { margin-top: var(--space-2); }
.msg-list { position: relative; }

/* ---------- glossary ---------- */
.ref-gloss { margin: 0; display: grid; gap: var(--space-2); }
.ref-gloss .entry { margin: 0; padding: var(--space-3); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.ref-gloss dt { margin: 0 0 4px; font-weight: 800; color: var(--color-ink); overflow-wrap: anywhere; }
.ref-gloss dt strong { font-weight: 800; }
.ref-gloss dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 800px) {
  .ref-gloss .entry { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
  .ref-gloss dt { margin: 0; }
}

/* ---------- tables ---------- */
.ref-tablewrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin: 0 0 var(--space-3); }
.ref-tablewrap:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; }
.ref-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; line-height: 1.5; }
.ref-table th, .ref-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); overflow-wrap: break-word; }
.ref-table thead th { background: var(--color-muted); color: var(--color-ink); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.ref-table tbody tr:last-child > * { border-bottom: 0; }
.ref-table tbody th { font-weight: 700; color: var(--color-ink); }
.ref-table td.long { min-width: 14rem; }
.ref-table td strong, .ref-table th strong { color: var(--color-ink); }

/* message dictionaries: several messages in one cell, one per line */
.msg-list code { display: block; margin: 0 0 6px; }
.msg-list code:last-child { margin-bottom: 0; }
.sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.ref-table--msg td:nth-child(1) { min-width: 8rem; }

/* sticky first column (override matrix, role card) */
.ref-table--sticky { width: 100%; min-width: 46rem; }
.ref-table--matrix { min-width: 58rem; }
.ref-table--matrix thead th:first-child, .ref-table--matrix tbody th { width: 13rem; min-width: 13rem; max-width: 13rem; }
.ref-table--sticky thead th:first-child, .ref-table--sticky tbody th { position: sticky; left: 0; z-index: 2; background: var(--color-card); width: 15rem; min-width: 15rem; max-width: 15rem; box-shadow: 1px 0 0 var(--color-border); white-space: normal; text-transform: none; letter-spacing: 0; }
.ref-table--sticky thead th:first-child { background: var(--color-muted); z-index: 3; text-transform: uppercase; letter-spacing: 0.04em; }
.ref-table--sticky tbody tr:hover > * { background: color-mix(in srgb, var(--color-muted) 55%, var(--color-card)); }
.ref-table--sticky td { min-width: 5.5rem; }
.ref-table--sticky td.long { min-width: 9rem; }
.ref-table thead th { vertical-align: middle; }
.ref-wrap--wide { max-width: 1180px; }
.ref-table--matrix thead th:not(:first-child), .ref-table--matrix td { text-align: center; }
.ref-table--matrix td.long { text-align: left; }
.ref-table--matrix td.span { text-align: left; }
@media (max-width: 720px) {
  .ref-table--sticky thead th:first-child, .ref-table--sticky tbody th { width: 9rem; min-width: 9rem; max-width: 9rem; padding-left: 10px; padding-right: 10px; font-size: 0.88rem; }
  .ref-table--sticky td { min-width: 5.5rem; padding-left: 10px; padding-right: 10px; }
  .ref-table--sticky td.long { min-width: 9rem; }
  .ref-table--matrix { min-width: 64rem; }
}
.m-yes { color: var(--ref-yes); font-weight: 800; font-size: 1.1em; }
.m-no { color: var(--ref-no); font-weight: 700; }
.m-view { color: var(--color-ink); font-weight: 800; }
.m-cond { color: var(--color-accent-text); font-weight: 800; }

/* small screens: a dictionary row becomes a stacked card, so nothing needs a sideways scroll */
@media (max-width: 720px) {
  .ref-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .ref-table--stack, .ref-table--stack tbody, .ref-table--stack tr, .ref-table--stack td { display: block; width: 100%; }
  .ref-table--stack tr { padding: 12px 14px; border-bottom: 1px solid var(--color-border); }
  .ref-table--stack tbody tr:last-child { border-bottom: 0; }
  .ref-table--stack td { padding: 4px 0; border: 0; min-width: 0; }
  .ref-table--stack td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--color-accent-text); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
  .ref-table--stack td:empty { display: none; }
  .ref-table--stack td.long { min-width: 0; }
  /* in the message tables the first cell (the area) heads the card instead of carrying a label */
  .ref-table--msg td:first-child { padding-bottom: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent-text); }
  .ref-table--msg td:first-child::before { display: none; }
}

@media (prefers-reduced-motion: reduce) { .ref * { scroll-behavior: auto !important; transition: none !important; } }