/* history.css — "Your files": the print log page (#filesPage) and the right rail of
   recent files (#rail). Quiet design §4.5, §5.7, §5.8. Owner: the files lane.

   Stated plainly: the page title (32 px) and the empty-state title (24 px) are the
   design's two named one-off sizes (DESIGN §2) and are set with the `font` shorthand, as
   the prototype writes them. tools/css-audit.mjs counts `font-size:` only, and that
   ratchet is at its budget, so these two sizes are NOT counted by it. If the ratchet is
   meant to cover them, raise the budget by two or map them to tokens. */

/* Tester-only surfaces (build plan §3). Scoped to this lane's components so they hide
   correctly even before the shell ships its global rule. */
html:not([data-detail="full"]) .files [data-detail-only],
html:not([data-detail="full"]) .frail [data-detail-only] { display: none; }

/* ══ The page ══════════════════════════════════════════════════════════════════════ */
.files {
  max-width: 960px; margin: 0 auto;
  padding: 40px var(--sn-space-5) 96px;
  min-width: 0;
}
/* Inside the shell's #filesPageBody, which already centres at 960 and pads the page. */
.files-page__inner > .files { max-width: none; padding: 0; }
.files__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sn-space-5);
}
.files__title {
  margin: 0 0 var(--sn-space-1);
  font: 800 32px/1.1 var(--sn-font-display); letter-spacing: -.02em;
}
.files__title:focus-visible { outline-offset: 4px; }
.files__sub { margin: 0; color: var(--sn-ink-dim); }

/* The one green on the page: New print, or Prepare a model on the empty log. */
.files__go {
  display: inline-flex; align-items: center; gap: var(--sn-space-2);
  min-height: 40px; padding: 0 var(--sn-space-4);
  border-radius: var(--sn-radius-md);
  background: var(--sn-accent); color: var(--sn-accent-ink);
  font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color var(--sn-dur-fast) var(--sn-ease-out), transform var(--sn-dur-fast) var(--sn-ease-out);
}
.files__go:hover { background: var(--sn-accent-hover); }
.files__go:active { background: var(--sn-accent-press); transform: scale(.98); }

/* Printer chips: a radio group with counts. Zero-count chips stay readable (mute, never
   opacity — DESIGN §2 contrast rule). */
.files__tools { display: flex; align-items: center; gap: var(--sn-space-2); margin: var(--sn-space-6) 0 var(--sn-space-2); }
.files__chips { display: flex; flex-wrap: wrap; gap: var(--sn-space-1); }
.files__chip {
  display: inline-flex; align-items: center; gap: var(--sn-space-2);
  min-height: 32px; padding: 0 var(--sn-space-3);
  border: 0; border-radius: var(--sn-radius-pill);
  background: none; color: var(--sn-ink-dim);
  font: inherit; font-weight: 500; cursor: pointer;
  transition: background-color var(--sn-dur-fast), color var(--sn-dur-fast);
}
.files__chip:hover { background: var(--sn-surface-1); color: var(--sn-ink); }
.files__chip[aria-checked="true"] { background: var(--sn-surface-2); color: var(--sn-ink); }
.files__chip i { font-style: normal; font-size: var(--sn-text-2xs); color: var(--sn-ink-mute); }
.files__chip.is-zero { color: var(--sn-ink-mute); }

.history__filters {
  display: flex; flex-wrap: wrap; gap: var(--sn-space-3);
  margin: var(--sn-space-2) 0;
}
.history__filter { display: grid; gap: var(--sn-space-1); min-width: 180px; }
.history__filter span { color: var(--sn-ink-mute); font-size: var(--sn-text-2xs); }
.history__filter select {
  min-height: 32px; padding: 0 var(--sn-space-2);
  border: 1px solid var(--sn-line); border-radius: var(--sn-radius-sm);
  background: var(--sn-surface-2); color: var(--sn-ink); font: inherit;
}

/* Loading and "Download started." are announced, not painted: the rows are the visible
   answer. An error is painted, next to the list it failed to load. */
.history__status:not(.is-error) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.history__status.is-error { margin: var(--sn-space-2) var(--sn-space-4) 0; color: var(--sn-bad); font-size: var(--sn-text-xs); }
.history__empty { padding: var(--sn-space-7) var(--sn-space-4); color: var(--sn-ink-mute); }
.history__more { margin: var(--sn-space-4) var(--sn-space-4) 0; }

/* Sticky day headers. The list is flat, so each header sticks until the next one
   (painted later, opaque) covers it. */
.files__day {
  position: sticky; top: 0; z-index: 2;
  margin: 0; padding: var(--sn-space-5) var(--sn-space-4) var(--sn-space-2);
  font-size: var(--sn-text-xs); font-weight: 600; line-height: 1;
  color: var(--sn-ink-mute);
  background: linear-gradient(var(--sn-surface-0) 80%, rgb(var(--sn-surface-0-rgb) / 0));
}
.files__day b { color: var(--sn-ink-dim); font-weight: 600; }

/* ══ A file row (§5.8) ════════════════════════════════════════════════════════════ */
.frow {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: var(--sn-space-5);
  align-items: start; padding: var(--sn-space-4);
  scroll-margin-top: var(--sn-space-7);
  border-radius: var(--sn-radius-lg);
  transition: background-color var(--sn-dur-base);
}
.frow + .frow { margin-top: var(--sn-space-1); }
.frow:hover, .frow:focus-within, .frow.is-live { background: var(--sn-surface-1); }

/* No thumbnail source exists: a neutral tile with the file's initials. */
.frow__thumb {
  width: 120px; height: 120px; display: grid; place-items: center;
  border-radius: var(--sn-radius-md);
  background: radial-gradient(circle at 50% 38%, var(--sn-surface-3), var(--sn-surface-1) 85%);
  color: var(--sn-ink-dim);
  font: 700 var(--sn-text-lg)/1 var(--sn-font-display); letter-spacing: .04em;
}

/* At least as tall as the thumbnail and centred on it; a row that grows (the feedback
   editor, tester details) grows downward and the thumbnail stays at the top. */
.frow__main { min-width: 0; min-height: 120px; display: flex; flex-direction: column; justify-content: center; }
.frow__name {
  display: flex; align-items: baseline; gap: var(--sn-space-3); min-width: 0; margin: 0;
  font: 700 var(--sn-text-lg)/1.2 var(--sn-font-display); letter-spacing: -.005em;
}
.frow__name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow__here {
  display: inline-flex; align-items: center; gap: var(--sn-space-2); flex: none;
  font: 500 var(--sn-text-xs)/1 var(--sn-font); color: var(--sn-ink-soft);
}
.frow__here::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sn-ink-soft); }
.frow__sum { margin: var(--sn-space-1) 0 0; color: var(--sn-ink-dim); overflow-wrap: anywhere; }
.frow__state { margin: var(--sn-space-2) 0 0; font-size: var(--sn-text-xs); color: var(--sn-ink-soft); }
.frow__state.is-bad { color: var(--sn-bad); }
/* Regression review B3: a fallback file and a plate whose slicer check was not a clean
   pass are caveats, said on the row in amber at full strength (DESIGN §2). */
.frow__state.is-warn { color: var(--sn-warn); }
.history-card__failure { margin: var(--sn-space-1) 0 0; font-size: var(--sn-text-xs); color: var(--sn-ink-dim); overflow-wrap: anywhere; }
.history-card__material-unavailable { margin: var(--sn-space-1) 0 0; font-size: var(--sn-text-xs); color: var(--sn-warn); overflow-wrap: anywhere; }

/* "After you print, tell us how it went ›": a quiet text disclosure (§5.6, §5.8). */
.frow__feedback { margin-top: var(--sn-space-2); min-width: 0; }
.history-card__outcome-change {
  display: inline-flex; align-items: center; gap: var(--sn-space-1);
  min-height: 32px; margin-left: calc(var(--sn-space-2) * -1); padding: 0 var(--sn-space-2);
  border: 0; border-radius: var(--sn-radius-sm);
  background: none; color: var(--sn-ink-dim);
  font: inherit; font-size: var(--sn-text-xs); cursor: pointer;
  transition: background-color var(--sn-dur-fast), color var(--sn-dur-fast);
}
.history-card__outcome-change:hover { background: var(--sn-surface-2); color: var(--sn-ink); }
.history-card__outcome-change svg { transition: transform var(--sn-dur-base) var(--sn-ease-out); }
.history-card__outcome-change[aria-expanded="true"] svg { transform: rotate(90deg); }
.history-card__outcome-editor { min-width: 0; }
.history-card__outcome-editor .print-outcome { margin-top: var(--sn-space-2); }

/* Days left, how it printed, then the actions. */
.frow__side {
  align-self: stretch; min-height: 120px; display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; gap: var(--sn-space-3); text-align: right;
  padding: var(--sn-space-1) 0; min-width: 0;
}
.frow__side-top { display: grid; justify-items: end; gap: var(--sn-space-1); }
.frow__left { margin: 0; font-weight: 500; }
.frow__left:empty { display: none; }
.frow__left.is-low { color: var(--sn-warn); }
.frow__left b { font-weight: 500; margin-right: var(--sn-space-1); }
.frow__how { display: inline-flex; align-items: center; gap: var(--sn-space-2); margin: 0; font-size: var(--sn-text-xs); color: var(--sn-ink-mute); }
.frow__how.is-great { color: var(--sn-ink-soft); }
.frow__how.is-great svg { color: var(--sn-ok); }
.frow__how.is-okay svg { color: var(--sn-warn); }
.frow__how.is-failed { color: var(--sn-bad); }
.history-output__error { margin: 0; max-width: 280px; font-size: var(--sn-text-xs); color: var(--sn-warn); }

/* Actions: shown on hover AND keyboard focus, and always on the row on the bed. They
   are present (and tabbable) at all times; only their paint waits, so :focus-within can
   reveal them. */
.frow__acts {
  display: flex; align-items: center; gap: var(--sn-space-1);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--sn-dur-fast), transform var(--sn-dur-base) var(--sn-ease-out);
}
.frow:hover .frow__acts, .frow:focus-within .frow__acts, .frow__acts.is-pinned { opacity: 1; transform: none; }
.frow__btn { border-color: transparent; background: var(--sn-surface-2); font-weight: 500; }
.frow__btn:hover:not(:disabled) { background: var(--sn-surface-3); }
.frow__btn[aria-busy="true"] { color: var(--sn-ink-mute); }

/* Several plates: Download opens a small list, one file per plate. */
.frow__dl { position: relative; }
.frow__plates {
  position: absolute; right: 0; bottom: calc(100% + var(--sn-space-1)); z-index: 3;
  display: grid; gap: var(--sn-space-1); min-width: 140px; padding: var(--sn-space-1);
  border-radius: var(--sn-radius-md);
  background: var(--sn-surface-3); box-shadow: 0 0 0 1px var(--sn-line), var(--sn-shadow-overlay);
}
.frow__plate {
  min-height: 32px; padding: 0 var(--sn-space-3); white-space: nowrap;
  border: 0; border-radius: var(--sn-radius-sm);
  background: none; color: var(--sn-ink-soft); font: inherit; text-align: left; cursor: pointer;
}
.frow__plate:hover { background: var(--sn-line); color: var(--sn-ink); }
.frow__btn.is-warn, .frow__plate.is-warn, .frow__plate.is-warn:hover { color: var(--sn-warn); }

/* Everything the old history card showed — tester view only. */
.frow__details {
  display: grid; gap: var(--sn-space-2); margin-top: var(--sn-space-3); padding-top: var(--sn-space-3);
  border-top: 1px solid var(--sn-line); font-size: var(--sn-text-xs); color: var(--sn-ink-dim);
}
.history-card__meta, .history-card__material-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sn-space-2); margin: 0;
}
.history-card__meta dt, .history-card__material-specs dt { color: var(--sn-ink-mute); font-size: var(--sn-text-2xs); }
.history-card__meta dd, .history-card__material-specs dd { margin: 0; color: var(--sn-ink-soft); min-width: 0; overflow-wrap: anywhere; }
.history-card__material-base, .history-card__lineage, .history-card__outcome-note, .history-card__fallback { margin: 0; overflow-wrap: anywhere; }
.history-card__outputs { display: grid; gap: var(--sn-space-2); }
.history-output { display: grid; gap: var(--sn-space-1); min-width: 0; }
.history-output__top { display: flex; flex-wrap: wrap; gap: var(--sn-space-2); }
.history-output__top a { color: var(--sn-ink); }
.history-output small { color: var(--sn-ink-mute); }
.history-card__id { color: var(--sn-ink-mute); font-family: var(--sn-font-mono); overflow-wrap: anywhere; }

/* ══ The empty log ════════════════════════════════════════════════════════════════ */
.files__empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 72px var(--sn-space-5) var(--sn-space-7);
}
.files__empty h2 { margin: 0; font: 700 24px/1.2 var(--sn-font-display); }
.files__empty p { max-width: 400px; margin: var(--sn-space-2) 0 var(--sn-space-5); color: var(--sn-ink-dim); }
.files__bed { width: 360px; max-width: 100%; height: auto; margin-bottom: var(--sn-space-6); }
.files__bed-shadow { fill: rgb(var(--sn-black-rgb) / .35); }
.files__bed-top { fill: var(--sn-surface-2); }
.files__bed-edge { fill: var(--sn-surface-1); }
.files__bed-grid line { stroke: var(--sn-line); stroke-width: 1; stroke-opacity: .6; }
.files__bed-grid line.is-mid { stroke-opacity: 1; }
.files__bed-rim { fill: none; stroke: var(--sn-line-strong); stroke-width: 1; }
.files__bed-spot { fill: none; stroke: var(--sn-line-raised); stroke-width: 1.2; stroke-dasharray: 4 4; }

.files__note {
  display: flex; align-items: center; gap: var(--sn-space-2);
  margin: var(--sn-space-6) var(--sn-space-4) 0;
  color: var(--sn-ink-mute); font-size: var(--sn-text-xs);
}

@media (max-width: 760px) {
  .frow { grid-template-columns: 64px minmax(0, 1fr); }
  .frow__thumb { width: 64px; height: 64px; font-size: var(--sn-text-md); }
  .frow__main, .frow__side { min-height: 0; }
  .frow__side { grid-column: 1 / -1; align-items: flex-start; text-align: left; }
  .frow__side-top { justify-items: start; }
  .frow__acts { opacity: 1; transform: none; flex-wrap: wrap; }
  .files__head { flex-wrap: wrap; align-items: flex-start; }
}

/* ══ The rail (§5.7): 64 px strip, expands to a 288 px overlay ══════════════════════
   #rail is the shell's grid cell (.rail-pane). files-rail.js wraps the shell's #railNew,
   #railList and #railAll in .frail__in, which is what grows; the cell stays 64 px, so
   the viewport never reflows. `.rail-pane.frail` outranks the shell's `.rail-pane`. */
.rail-pane.frail {
  position: relative; z-index: 6; display: block; min-width: 0; min-height: 0;
  padding: 0; background: none; overflow: visible;
}
.frail__in {
  position: absolute; top: 0; right: 0; bottom: 0; width: 64px;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--sn-radius-md); background: var(--sn-surface-1);
  transition: width var(--sn-dur-base) var(--sn-ease-out), box-shadow var(--sn-dur-base);
}
.frail:hover .frail__in, .frail:focus-within .frail__in, .frail.is-open .frail__in {
  width: 288px; box-shadow: var(--sn-shadow-overlay);
}
.frail:hover .frail__in { transition-delay: 120ms; }
.frail__head { display: flex; align-items: center; gap: var(--sn-space-3); height: 56px; padding: 0 var(--sn-space-4); flex: none; }
.frail__title { margin: 0; font: 700 var(--sn-text-md)/1 var(--sn-font-display); white-space: nowrap; }
.frail__pin {
  width: 32px; height: 32px; margin-left: auto; display: grid; place-items: center; flex: none;
  border: 0; border-radius: var(--sn-radius-sm); background: none; color: var(--sn-ink-mute); cursor: pointer;
  transition: background-color var(--sn-dur-fast), color var(--sn-dur-fast);
}
.frail__pin:hover, .frail__pin[aria-expanded="true"] { background: var(--sn-surface-3); color: var(--sn-ink); }

/* One row shape for "+", every file and "All files": 40 px tile, then the text. */
.frail .rail__new, .frail__item, .frail .rail__all {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: var(--sn-space-3); flex: none; width: 272px; height: auto; margin: 0 var(--sn-space-2);
  padding: var(--sn-space-1); border: 0; border-radius: var(--sn-radius-md);
  background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--sn-dur-fast);
}
.frail .rail__new:hover, .frail__item:hover, .frail .rail__all:hover { background: var(--sn-surface-2); color: inherit; }
.frail .rail__new > svg, .frail .rail__all > svg {
  width: 40px; height: 40px; padding: var(--sn-space-3); flex: none; box-sizing: border-box;
  border-radius: var(--sn-radius-sm); color: var(--sn-ink-dim);
}
.frail .rail__new > svg { background: radial-gradient(circle at 50% 35%, var(--sn-surface-3), var(--sn-surface-2)); }
.frail .rail__list {
  flex: 1 1 auto; min-height: 0; width: auto; margin-top: var(--sn-space-1);
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sn-space-1);
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
}
.frail__thumb {
  position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--sn-radius-sm);
  background: radial-gradient(circle at 50% 35%, var(--sn-surface-3), var(--sn-surface-2));
  color: var(--sn-ink-dim); font: 700 var(--sn-text-2xs)/1 var(--sn-font-display); letter-spacing: .04em;
}
.frail__item.is-current .frail__thumb { box-shadow: 0 0 0 2px var(--sn-surface-1), 0 0 0 4px var(--sn-ink-dim); }
.frail__low {
  position: absolute; right: 3px; top: 3px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--sn-warn); box-shadow: 0 0 0 2px var(--sn-surface-1);
}
.frail__text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.frail__text b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.frail__text small { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--sn-ink-mute); font-size: var(--sn-text-2xs); }
.frail__text .is-low { color: var(--sn-warn); }
.frail__foot { flex: none; padding: var(--sn-space-2) 0; }
.frail__note { width: 272px; margin: 0 var(--sn-space-2); padding: var(--sn-space-1) var(--sn-space-2) var(--sn-space-2); color: var(--sn-ink-mute); font-size: var(--sn-text-2xs); }
.frail .rail__all { color: var(--sn-ink-dim); font-weight: 500; }
.frail__all-long { display: none; }

/* Collapsed: the tiles only. "All files" folds to its icon over "All" (the shell's own
   collapsed form). Text is hidden with visibility, never dimmed with opacity. */
.frail__title, .frail__text, .frail__note { visibility: hidden; }
.frail:not(:hover):not(:focus-within):not(.is-open) .rail__all {
  flex-direction: column; gap: 0; width: 48px; padding: var(--sn-space-1) 0; font-size: var(--sn-text-2xs);
}
.frail:not(:hover):not(:focus-within):not(.is-open) .rail__all > svg { height: 28px; padding: var(--sn-space-1) var(--sn-space-3); }
.frail:hover :is(.frail__title, .frail__text, .frail__note),
.frail:focus-within :is(.frail__title, .frail__text, .frail__note),
.frail.is-open :is(.frail__title, .frail__text, .frail__note) { visibility: visible; }
.frail:hover .frail__all-short, .frail:focus-within .frail__all-short, .frail.is-open .frail__all-short { display: none; }
.frail:hover .frail__all-long, .frail:focus-within .frail__all-long, .frail.is-open .frail__all-long { display: inline; }