/* vantage · public/css/serials.css · Fix 1 · v2
   v2 (37.11 — Pete, 2026-10-25: "I want to be able to upload photos in the ser number list" · "Multiple photos not just
   one"): the Photos column is one line of thumbnails that slides sideways, Add Photo at its end (a dashed square), a photo
   going up wearing its band (Going up… · Try Again); the form's photos a line of squares, each with ×; on a narrow page the
   photos are the card's last line, the whole card's width.
   v1 (37.5 — Pete, 2026-10-25: "I need a serial number page where we list out the tool name … the manufacturer the Eagan
   number the manufacturer serial number and then a column with the photo or a link to the photo … certification dates
   column, and entry date and exit date columns"): SERIAL NUMBERS (serials.js). Every colour a token; every measure rem, %,
   or the type scale — never a fixed width. A line a tool on a page with room, the columns in Pete's order under a head row
   that stays put while the page scrolls; on a narrow page each tool is a card — its photo left, each value under its own
   small label — and the page never goes sideways. */

.sn { max-width: 80rem; container: sn / inline-size; }
.sn__head { gap: calc(var(--pad) / 2); }
.sn__head h1 { margin: 0; }
.sn__head p { margin: 0; }
.sn__why { margin: 0; }
.sn .file { font: inherit; }   /* (the photo's hidden file boxes — Roboto like everything else) */

/* THE BAR: Add Tool · Find · All | On Site · Sort · Download CSV — one line where it fits, wrapping where it does not */
.sn__bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: calc(var(--pad) / 2); width: 100%; }
.sn__bar > .btn, .sn__seg > .btn { width: auto; flex: 0 0 auto; min-height: 2.75rem; }   /* (a finger's target, on a phone in gloves) */
.sn__add[aria-pressed='true'] { --lift: 6; border: var(--selected-border); }
.sn__find, .sn__sort, .sn__in { font: inherit; font-size: var(--t-body); line-height: var(--lh); min-width: 0; padding: calc(var(--pad) * 0.6) calc(var(--pad) * 0.75); background: var(--card); color: var(--text); border: var(--border); border-radius: var(--radius-cap); }
.sn__find { flex: 1 1 12rem; }
.sn__sort { flex: 0 1 auto; font-size: var(--t-small); }
.sn__find::placeholder, .sn__in::placeholder { color: var(--text2); }
.sn__find:focus-visible, .sn__sort:focus-visible, .sn__in:focus-visible { outline: var(--selected-border); outline-offset: calc(var(--pad) / 4); }
.sn__seg { display: inline-flex; gap: calc(var(--pad) / 3); flex: 0 0 auto; }
.sn__seg > .btn { width: auto; min-width: 4.5rem; }

/* THE FORM — in place under the bar, never floating */
.sn__form { scroll-margin-block: var(--gap); display: flex; flex-direction: column; gap: calc(var(--pad) * 0.75); width: 100%; padding: var(--pad); background: var(--panel); border: var(--border); border-radius: var(--radius-cap); }
.sn__form[hidden] { display: none; }
.sn__formtitle { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.sn__fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: calc(var(--pad) * 0.75) var(--pad); width: 100%; }
.sn__field { display: flex; flex-direction: column; gap: calc(var(--pad) / 3); min-width: 0; }
.sn__field--photo { grid-column: 1 / -1; }
.sn__label { font-weight: 700; color: var(--text2); }
.sn__in { width: 100%; }
.sn__in[type='date'] { color-scheme: light dark; }
.sn__dayrow { display: flex; gap: calc(var(--pad) / 2); align-items: stretch; min-width: 0; }
.sn__dayrow > .sn__in { flex: 1 1 auto; }
.sn__today { flex: 0 0 auto; width: auto; }
.sn__photorow { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--pad) / 2); }
.sn__photobtn { width: auto; flex: 0 0 auto; cursor: pointer; }
.sn__previews[hidden], .sn__off[hidden] { display: none; }
.sn__previews { display: flex; flex-wrap: wrap; gap: calc(var(--pad) / 2); }
.sn__preview { position: relative; display: inline-flex; width: 4.5rem; height: 4.5rem; flex: 0 0 auto; overflow: hidden; border: var(--border); border-radius: var(--radius-cap); background: var(--card); }
.sn__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sn__preview[data-going] img { opacity: 0.55; }
.sn__unpic { position: absolute; top: 0.15rem; right: 0.15rem; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; font: inherit; font-weight: 700; line-height: 1; color: var(--text); background: color-mix(in oklch, var(--panel) 82%, transparent); border: var(--border); border-radius: var(--radius-cap); cursor: pointer; }
.sn__unpic:focus-visible { outline: var(--selected-border); outline-offset: 0.05rem; }
.sn__photosaid:empty, .sn__twin:empty, .sn__formsaid:empty { display: none; }
.sn__twin, .sn__formsaid { margin: 0; color: var(--text); font-weight: 700; }
.sn__chips { display: flex; flex-wrap: wrap; gap: calc(var(--pad) / 3); }
.sn__chips:empty { display: none; }
.sn__chip { font: inherit; font-size: var(--t-small); display: inline-flex; align-items: center; gap: calc(var(--pad) / 2); min-height: 2.25rem; padding: calc(var(--pad) / 4) calc(var(--pad) * 0.6); background: var(--card); color: var(--text); border: var(--border); border-radius: var(--radius-cap); cursor: pointer; }
.sn__chip:hover { background: var(--card-hover); }
.sn__chip:focus-visible { outline: var(--selected-border); outline-offset: calc(var(--pad) / 4); }
.sn__chipx { font-weight: 700; color: var(--text2); }
.sn__formbar { display: flex; flex-wrap: wrap; gap: calc(var(--pad) / 2); align-items: stretch; }
.sn__formbar > .btn { width: auto; }
.sn__save { min-width: 9rem; }
.sn__off { margin-left: auto; }

/* THE ONE LINE: what was last done, and its steps — stuck at the panel's foot while the page scrolls */
.sn__line { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--pad) / 2) var(--pad); width: 100%; padding: calc(var(--pad) / 2) var(--pad); background: var(--panel); color: var(--text); border: var(--border); border-radius: var(--radius-cap); box-shadow: 0 -0.25rem 0.75rem oklch(0 0 0 / 0.25); }
.sn__line[hidden] { display: none; }
.sn__said { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.sn__steps { display: inline-flex; flex-wrap: wrap; gap: calc(var(--pad) / 2); margin-left: auto; }
.sn__steps:empty { display: none; }
.sn__step { width: auto; }

/* THE LIST — a head row, then a line a tool */
.sn__count { margin: 0; }
.sn__list { display: flex; flex-direction: column; width: 100%; min-width: 0; border: var(--border); border-radius: var(--radius-cap); background: var(--raised); gap: 0.06rem; overflow: clip; }
.sn__body { display: flex; flex-direction: column; gap: 0.06rem; }
.sn__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.1fr) minmax(7.5rem, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.8fr); gap: 0 calc(var(--pad) * 0.75); align-items: center; min-height: 3.75rem; padding: calc(var(--pad) / 3) calc(var(--pad) * 0.75); background: var(--card); color: var(--text); font-size: var(--t-small); line-height: 1.3; }
.sn__row[data-zebra='true'] { background: color-mix(in oklch, var(--card) 88%, var(--panel)); }
.sn__row.is-editable { cursor: pointer; }
.sn__row.is-editable:hover { background: var(--card-hover); }
.sn__row.is-editable:focus-visible, .sn__row.is-selected { outline: var(--selected-border); outline-offset: -0.15rem; }
.sn__row[data-off='true'] { color: var(--text2); }
.sn__row--head { position: sticky; top: 0; z-index: 2; min-height: 2.75rem; background: var(--panel); color: var(--text2); font-weight: 700; }
.sn__row--skel { height: 3.75rem; padding: 0; }
.sn__cell { min-width: 0; overflow-wrap: anywhere; }
.sn__cell--tool { font-weight: 700; font-size: var(--t-label); }
.sn__cell--egan, .sn__cell--serial { font-variant-numeric: tabular-nums; }
.sn__cell--entry, .sn__cell--exit, .sn__dates { font-variant-numeric: tabular-nums; }
.sn__sorter { font: inherit; font-weight: 700; color: inherit; background: none; border: 0; padding: calc(var(--pad) / 3) 0; text-align: left; cursor: pointer; min-height: 2.5rem; }
.sn__sorter:hover { color: var(--text); }
.sn__sorter:focus-visible { outline: var(--selected-border); outline-offset: calc(var(--pad) / 6); }
.sn__dates { display: flex; flex-direction: column; }
.sn__thumb { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; overflow: hidden; border-radius: var(--radius-cap); background: var(--raised); color: var(--text); font-size: var(--t-small); font-weight: 700; text-decoration: none; }
.sn__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sn__thumb--none { background: transparent; }
.sn__thumb--link { width: auto; min-width: 3rem; padding: 0 calc(var(--pad) / 2); }
/* (v2) the photos: one line that slides sideways, Add Photo at its end */
.sn__pics { display: flex; align-items: center; gap: calc(var(--pad) / 3); max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-block: 0.1rem; }
.sn__thumb--add { position: relative; cursor: pointer; border: 0.12rem dashed var(--text2); background: transparent; text-align: center; line-height: 1.1; font-size: 0.85em; padding: 0.15rem; overflow-wrap: normal; }
.sn__thumb--add:hover { background: var(--card-hover); }
.sn__thumb--add:focus-visible, .sn__thumb--going:focus-visible { outline: var(--selected-border); outline-offset: 0.05rem; }
.sn__thumb--going { position: relative; padding: 0; border: 0; font: inherit; color: var(--text); }
button.sn__thumb--going { cursor: pointer; }
.sn__thumb--going img { opacity: 0.6; }
.sn__band { position: absolute; inset: auto 0 0 0; padding: 0.1rem 0.15rem; background: color-mix(in oklch, var(--panel) 82%, transparent); color: var(--text); font-size: 0.75em; font-weight: 700; line-height: 1.15; text-align: center; }
.sn__empty { margin: 0; padding: var(--pad); background: var(--card); }

/* A NARROW PAGE: each tool a card — its photo left, every value under its own small label — never sideways */
@container sn (max-width: 48rem) {
  .sn__row--head { display: none; }
  .sn__row:not(.sn__row--skel) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 't t t' 'e s m' 'c n x' 'p p p'; gap: calc(var(--pad) / 3) calc(var(--pad) * 0.75); align-items: start; padding: calc(var(--pad) / 2) calc(var(--pad) * 0.75); }
  .sn__row--skel { height: 11rem; }
  .sn__cell--photo:empty { display: none; }
  .sn__cell--tool { grid-area: t; }
  .sn__cell--maker { grid-area: m; }
  .sn__cell--egan { grid-area: e; }
  .sn__cell--serial { grid-area: s; }
  .sn__cell--photo { grid-area: p; }
  .sn__cell--certs { grid-area: c; }
  .sn__cell--entry { grid-area: n; }
  .sn__cell--exit { grid-area: x; }
  .sn__cell[data-label]:not(.sn__cell--tool):not(.sn__cell--photo)::before { content: attr(data-label); display: block; font-size: 0.85em; font-weight: 400; color: var(--text2); overflow-wrap: normal; word-break: normal; }   /* (a label breaks between words, never inside one) */
  .sn__thumb { width: 4.5rem; height: 4.5rem; }
  .sn__thumb--link { width: 4.5rem; padding: 0; }
}
@media print { .sn__bar, .sn__form, .sn__line { display: none; } .sn__list { border: 0; } }