/* Degree audit upload, #audit-upload (spec/page-audit-upload.md). Tokens and parts from dibs.css only.
   Columns follow the content box (container query), so the sidebar, the rail and the window give the same layout
   for the same room. References: C398 choose, SB56 chosen file and review, L437 steps and count strip, Q306 the
   confirmed figure and sentence checkboxes, C402 reading, C403 done, S363 read failed. */
main:has(> .au) { max-width: calc(var(--w-list) + 2 * var(--s-8)); }
.au { container: au / inline-size; }

/* header: back link, steps (L437), title */
.au-top { margin-bottom: var(--s-6); }
.au-back { margin-bottom: var(--s-3); }
.au-back .icon { width: 16px; height: 16px; }
.au-head h1 { margin: 0; font: var(--t-title); color: var(--ink); }
.au-head h1:focus { outline: none; }
.au-lead { margin: var(--s-1) 0 0; max-width: 720px; font: var(--t-body); color: var(--ink-2); }

.au-steps { display: flex; gap: var(--s-2); margin: 0 0 var(--s-4); padding: 0; list-style: none; max-width: 680px; }
.au-steps li { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 0; min-width: 0; font: var(--t-label); color: var(--muted); }
.au-steps li:not(:last-child)::after { content: ''; flex: 1 1 auto; min-width: var(--s-2); height: 1px; background: var(--line-strong); }
.au-steps li.is-done:not(:last-child)::after { background: var(--accent); }
.au-step-dot { display: inline-grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); font: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.au-step-dot .icon { width: 12px; height: 12px; stroke-width: 2.5; }
.au-steps li.is-current { color: var(--ink); }
.au-steps li.is-current .au-step-dot { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.au-steps li.is-done .au-step-dot { border-color: var(--accent); color: var(--accent); }
.au-step-l { white-space: nowrap; }

/* two columns at 880 and up: the step left, the aside right */
.au-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.au-main, .au-side { min-width: 0; }
@container au (min-width: 880px) {
  .au-grid { grid-template-columns: minmax(0, 680px) 300px; column-gap: var(--s-12); align-items: start; }
  .au-side { position: sticky; top: var(--s-8); }
}

/* the card (C398 left half) */
.au-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s-6); }
.au-label { margin: 0 0 var(--s-2); font: var(--t-item); color: var(--ink); }
.au-how { margin: 0 0 var(--s-2); padding-left: 20px; font: var(--t-body); color: var(--ink-2); }
.au-how li + li { margin-top: var(--s-1); }
.au-how strong, .au-note strong { color: var(--ink); font-weight: 600; }
.au-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.au-note { margin: 0 0 var(--s-4); font: var(--t-meta); color: var(--muted); }

.au-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: 148px; padding: var(--s-6) var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-panel);
  background: var(--bg); text-align: center; cursor: pointer; transition: border-color var(--dm-rail-ms, 206ms) var(--dm-rail-ease, linear), background-color var(--dm-rail-ms, 206ms) var(--dm-rail-ease, linear);
}
.au-zone:hover, .au-zone.is-over { border-color: var(--accent); background: var(--accent-subtle); }
.au-zone:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.au-zone.is-invalid { border-color: var(--danger); }
.au-zone-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s-1); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); color: var(--ink-2); }
.au-zone-ic .icon { width: 20px; height: 20px; }
.au-zone-t { font: var(--t-item); color: var(--accent); }
.au-zone-s { font: var(--t-meta); color: var(--muted); }
.au-zone-lim { margin-top: var(--s-1); font: var(--t-small); color: var(--muted); }
.au-err { display: flex; align-items: flex-start; gap: var(--s-2); margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--danger); }
.au-err .icon { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }

/* the chosen file (SB56) */
.au-chosen { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-panel); background: var(--surface); }
.au-chosen-ic { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-control); background: var(--accent-subtle); color: var(--accent); }
.au-chosen-ic .icon { width: 18px; height: 18px; }
.au-chosen-t { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.au-chosen-n { font: var(--t-item); color: var(--ink); overflow-wrap: anywhere; }
.au-chosen-s { font: var(--t-meta); color: var(--muted); }

.au-store { margin: var(--s-4) 0 0; font: var(--t-meta); color: var(--ink-2); }
.au-link { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.au-link:hover { background: none; color: var(--accent-hover); }

/* sentence checkboxes (Q306) */
.au-contrib, .au-session { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
label.au-check, .au label.au-check { display: flex; align-items: flex-start; gap: var(--s-3); font: var(--t-body); color: var(--ink); cursor: pointer; }
.au-check input { margin-top: 3px; }
.au-check strong { display: block; font-weight: 600; }
.au-check-d { display: block; margin-top: 2px; font: var(--t-meta); color: var(--muted); }
.au-more { margin: var(--s-2) 0 0 28px; }
.au-more > summary { font: var(--t-meta); color: var(--accent); }
.au-more > p { margin: var(--s-2) 0 0; color: var(--muted); }
.au-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }

/* read failed (S363): a tinted block above the same form */
.au-fail { display: flex; gap: var(--s-3); margin-bottom: var(--s-4); padding: var(--s-4); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-radius: var(--r-panel); background: var(--danger-subtle); }
.au-fail-ic { color: var(--danger); flex-shrink: 0; }
.au-fail-ic .icon { width: 20px; height: 20px; }
.au-fail h2 { margin: 0 0 var(--s-1); font: var(--t-item); color: var(--ink); }
.au-fail h2:focus { outline: none; }
.au-fail p { margin: 0; font: var(--t-body); color: var(--ink-2); }
.au-fail p + p { margin-top: var(--s-2); }

/* reading (C402) */
.au-reading { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s-12) var(--s-6); }
.au-reading .au-spin { width: 28px; height: 28px; margin-bottom: var(--s-4); border-color: var(--accent); border-right-color: transparent; }
.au-reading h2 { margin: 0 0 var(--s-1); font: var(--t-h2); color: var(--ink); }
.au-reading p { max-width: 420px; margin: 0 0 var(--s-4); font: var(--t-meta); color: var(--muted); }

/* aside cards (C398 tips panel) */
.au-side { display: flex; flex-direction: column; gap: var(--s-4); }
.au-side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--s-4); font: var(--t-meta); color: var(--ink-2); }
.au-side-card > :last-child { margin-bottom: 0; }
.au-side-h { margin: 0 0 var(--s-2); font: var(--t-item); color: var(--ink); }
.au-side-card p { margin: 0 0 var(--s-3); }
.au-adds { margin: 0 0 var(--s-3); padding-left: 18px; }
.au-adds li + li { margin-top: var(--s-1); }
.au-manual { font: var(--t-control); }
.au-src { color: var(--muted); }
.au-side-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
details.au-side-card > summary { font: var(--t-item); color: var(--ink); }
details.au-side-card ul { margin: var(--s-3) 0 0; padding-left: 18px; }
details.au-side-card li + li { margin-top: var(--s-2); }
details.au-side-card strong { color: var(--ink); font-weight: 600; }
.au-byhand { margin: 0; font: var(--t-meta); color: var(--muted); }

/* review */
.au-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); font: var(--t-meta); color: var(--muted); }
.au-warn { display: flex; gap: var(--s-3); margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-panel); background: var(--warning-subtle); color: var(--ink-2); font: var(--t-meta); }
.au-warn .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--warning); margin-top: 1px; }
.au-warn p { margin: 0; }

.au-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); margin: 0 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); overflow: hidden; }
.au-cnt { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4); border-right: 1px solid var(--line); box-shadow: 0 1px 0 var(--line); }
.au-cnt.is-lead { background: var(--accent-subtle); }
.au-cnt-n { font: var(--t-title); color: var(--ink); font-variant-numeric: tabular-nums; }
.au-cnt.is-lead .au-cnt-n { color: var(--accent); }
.au-cnt-l { font: var(--t-label); color: var(--muted); }

.au-props { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); margin: 0 0 var(--s-4); }
.au-props dt { font: var(--t-label); color: var(--muted); }
.au-props dd { margin: 0; font: var(--t-control); color: var(--ink); }

.au-read { margin: 0 0 var(--s-6); }
.au-read > summary { font: var(--t-control); color: var(--ink-2); }
.au-read-dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-4); max-width: 420px; margin: var(--s-2) 0 0; font: var(--t-meta); }
.au-read-dl > div { display: contents; }
.au-read-dl dt { color: var(--ink-2); }
.au-read-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.au-read > p { margin: var(--s-2) 0 0; max-width: 560px; color: var(--muted); }

.au-sec { margin: 0 0 var(--s-8); }
.au-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-1); }
.au-sec-head h2 { margin: 0; font: var(--t-h2); color: var(--ink); }
.au-count { margin-left: var(--s-2); font: 400 18px/24px var(--font-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.au-sec-sub { margin: 0 0 var(--s-3); max-width: 680px; font: var(--t-meta); color: var(--ink-2); }
.au-list-tools { display: flex; gap: var(--s-4); margin: 0 0 var(--s-2); }
.au-list { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.au-list > li { border-bottom: 1px solid var(--line); }
.au-list > li:last-child { border-bottom: 0; }
.au-list-empty { padding: var(--s-4); }
.au-list-empty p { margin: 0; font: var(--t-meta); color: var(--ink-2); }
.au-row { display: flex; align-items: flex-start; gap: var(--s-3); min-height: 44px; padding: var(--s-3) var(--s-4); }
.au label.au-row-check { cursor: pointer; align-items: flex-start; }
.au-row-check:hover { background: var(--bg); }
.au-row-check input { margin-top: 3px; }
.au-row-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.au-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.au-code, .au-req-t { font: var(--t-item); color: var(--ink); }
.au-row-title { font: var(--t-meta); color: var(--muted); }
.au-row-meta { flex-shrink: 0; font: var(--t-meta); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.au-needs { font: var(--t-small); letter-spacing: .02em; color: var(--warning); }
.au-repeat { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-panel); background: var(--surface-2); font: var(--t-meta); color: var(--ink-2); }
.au-repeat p { margin: 0; }
.au-repeat p + p { margin-top: var(--s-1); }
.au-repeat-h { font-weight: 600; color: var(--ink); }
.au-repeat-l span { color: var(--muted); }

.au-session { margin: 0 0 var(--s-6); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.au-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.au-bar-p, .au-bar-s { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }

/* what gets saved (aside) */
.au-plan > summary { font: var(--t-item); color: var(--ink); }
.au-plan-sub { margin: var(--s-1) 0 var(--s-3); color: var(--muted); }
.au-plan-g { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.au-plan-g + .au-plan-g { margin-top: var(--s-3); }
.au-plan-g h3 { margin: 0 0 var(--s-2); font: var(--t-label); color: var(--ink); }
.au-plan-g dl { margin: 0; }
.au-plan-g dl > div + div { margin-top: var(--s-2); }
.au-plan-g dt { font: var(--t-meta); color: var(--ink-2); }
.au-plan-g dd { margin: 0; font: var(--t-meta); color: var(--ink); font-weight: 600; }
.au-plan-g dd.au-plan-note { font-weight: 400; color: var(--muted); font-size: 13px; line-height: 18px; }
.au-plan-g.is-unsaved dd { font-weight: 400; color: var(--muted); }

/* done (C403) */
.au-done { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4) var(--s-6); max-width: 760px; padding: var(--s-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.au-done-tile { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--positive-subtle); color: var(--positive); }
.au-done-tile .icon { width: 32px; height: 32px; stroke-width: 2.5; }
.au-done-n { margin: 0; font: var(--t-title); font-size: 32px; line-height: 38px; color: var(--ink); font-variant-numeric: tabular-nums; }
.au-done-s { margin: 0 0 var(--s-3); font: var(--t-h2); color: var(--ink); }
.au-done-lines { margin: 0; padding: 0; list-style: none; font: var(--t-meta); color: var(--ink-2); }
.au-done-lines li { display: flex; align-items: flex-start; gap: var(--s-2); }
.au-done-lines li + li { margin-top: var(--s-1); }
.au-done-lines .icon { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; color: var(--muted); }
.au-done-note { margin: var(--s-3) 0 0; font: var(--t-meta); color: var(--muted); }
.au-done-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
.au-done-acts .btn-danger { margin-right: auto; }

/* one column (phones): the review's action bar sticks to the bottom with the primary on top, full width */
@container au (max-width: 599px) {
  .au-card { padding: var(--s-4); }
  .au-actions .primary { flex: 1 1 100%; }
  /* M2 (check 0): only the primary sticks, so the bar stays one button tall; the other two sit in flow under it */
  .au-bar { display: contents; }
  .au-bar-p { position: sticky; bottom: 0; z-index: 2; margin: 0 calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); background: var(--surface); }
  .au-bar-p .primary { flex: 1 1 100%; }
  .au-bar-s { padding: var(--s-2) 0 var(--s-4); }
  .au-bar-s > * { flex: 1 1 auto; }
  /* M1 (check 0): a zero basis keeps the code and title beside the checkbox; only the meta line wraps */
  .au-row-check, .au-row { flex-wrap: wrap; }
  .au-row-main { flex: 1 1 0; }
  .au-row-meta { flex-basis: 100%; text-align: left; padding-left: 0; }
  /* checked rows: a two-column grid, so the term line starts exactly under the code whatever the checkbox's size */
  .au label.au-row-check { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); row-gap: 0; }
  .au-row-check .au-row-meta { grid-column: 2; padding-left: 0; }
  .au-done { grid-template-columns: minmax(0, 1fr); padding: var(--s-6) var(--s-4); }
  .au-done-tile { width: 56px; height: 56px; }
  .au-done-acts { flex-direction: column-reverse; align-items: stretch; }
  .au-done-acts .btn-danger { margin-right: 0; }
  .au-steps .au-step-l { font-size: 12px; }
  .au-props { gap: var(--s-3) var(--s-6); }
  /* the count strip: the lead cell across the top, then two by two, so no blank cell is left (nit 2) */
  .au-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-cnt.is-lead { grid-column: 1 / -1; }
  .au-cnt.is-lead, .au-cnt:nth-child(odd) { border-right: 0; }
}
@media (max-width: 599px) {
  .au-back, .au-list-tools .text-btn { min-height: 44px; }
  .au-store .au-link { min-height: 0; } /* an inline link in a sentence, so it does not open a gap in the line (nit 1) */
  .au-zone { min-height: 128px; }
}