/* ==================================================================
   materials -- area stylesheet, loaded after static/style.css.

   style.css remains the authoritative design system: its tokens, type
   ramp, radii and colour rules govern. Nothing here introduces a new
   colour; confidence is ink weight and border style, never hue, and the
   only two tints are caution-fill #F6F2E9 and calm-fill #EFF1EE.
   Money, grams and durations are Newsreader with tabular-nums, never
   DM Sans. See design/README.md and makecost_restyle_v2/README.md.

   The single exception is .swatch, whose fill is scraped from the store
   and depicts a physical product colour. It is not a status signal, it
   carries no meaning of its own, and the colour name beside it is what
   actually names the material -- so nothing here reads colour alone.
   ================================================================== */

/* -- catalogue: material groups -------------------------------------
   One data card holds the whole catalogue; inside it each material is a
   section with its own head, and each way that material is sold (refill,
   spool) is a <tbody> under a quiet band. Two levels of grouping without
   two levels of card. */

.material-group + .material-group { border-top: 1px solid var(--line-3); }

.material-group__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 16px 24px 10px;
}
.material-group__head .material-name {
  font-size: 15px; font-weight: 500; color: var(--ink);
}
.material-group__head .aux {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-3);
}

/* The catalogue is long -- 30-odd colours per material. Tighter rows than
   the default data table, and the header repeats per material rather than
   once per card, so a material read halfway down the page still has its
   column names above it. */
table.materials-rows th { padding: 9px 24px; }
table.materials-rows td { padding: 8px 24px; }
table.materials-rows tbody:last-child tr:last-child td { border-bottom: none; }

/* Sub-group band: refill vs spool. A row, not a card -- the distinction is
   a fold in one list, not two lists. */
table.materials-rows tr.form-band th {
  background: var(--surface-alt);
  border-top: 1px solid var(--line-3);
  border-bottom: 1px solid var(--line-3);
  padding: 7px 24px;
  text-align: left;
}
table.materials-rows tr.form-band .form-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
table.materials-rows tr.form-band .aux {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted-3);
  margin-left: 8px;
}

/* Column shape: the colour name gets the room, the figures stay narrow and
   right-aligned so they read down the column. */
table.materials-rows th:first-child, table.materials-rows td:first-child { width: auto; }
table.materials-rows th.num, table.materials-rows td.num { width: 108px; }

/* -- swatches -------------------------------------------------------
   20px, round, hairline. Two forms: a hex fill when the store states one,
   and the store's own swatch image when it does not. A colour with
   neither renders NO swatch -- the cell simply starts at the name. A
   guessed swatch would look measured, and this app never invents a number
   or a colour that looks like it was read from somewhere. */

/* Inline-block rather than a flex cell: `display:flex` on a <td> takes it
   out of the table box model and the columns stop lining up. */
.color-cell { font-size: 14px; color: var(--ink-2); }
.swatch {
  display: inline-block; vertical-align: -5px;
  width: 20px; height: 20px; border-radius: 999px;
  margin-right: 10px;
  border: 1px solid var(--chip-border);
  object-fit: cover;
}
/* A swatch image that never arrives would leave a bordered off-white circle,
   which reads as a pale filament rather than as a gap. The template removes
   the element on error, so the row falls back to the name alone -- the same
   outcome as a colour the store gives us nothing for. */
img.swatch { background: var(--surface-alt); }

/* -- your prices: add form ------------------------------------------ */

.materials-add { margin-top: 14px; }

/* -- narrow ---------------------------------------------------------
   Matches style.css's own 860px interior breakpoint. */

@media (max-width: 860px) {
  .material-group__head,
  table.materials-rows th, table.materials-rows td,
  table.materials-rows tr.form-band th { padding-left: 17px; padding-right: 17px; }
  table.materials-rows th.num, table.materials-rows td.num { width: auto; }
}

/* The store catalogue, collapsed. It is reference material, so it reads as
   a quiet disclosure rather than a card competing with your own prices. */
.catalogue > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 15px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
}
.catalogue > summary::-webkit-details-marker { display: none; }
.catalogue > summary:hover { border-color: var(--line-2); }
.catalogue > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.catalogue__title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
}
.catalogue__title::after { content: " ▸"; color: var(--muted-3); }
.catalogue[open] .catalogue__title::after { content: " ▾"; }
.catalogue__aux { font-family: var(--font-mono); font-size: 11px; color: var(--muted-3); }
.catalogue[open] > summary { border-radius: 18px 18px 0 0; border-bottom: none; }
.catalogue[open] .data-card { border-radius: 0 0 18px 18px; }

/* --- catalogue: reads across, not down --------------------------------
   Within a material sold one way every colour is the same price, so the
   old vertical table printed $19.99 thirty times to state one fact. The
   price is stated once per band; the strip carries what varies. --- */
.filament-type { border-bottom: 1px solid var(--line-3); }
.filament-type:last-of-type { border-bottom: none; }
.filament-type__name {
  margin: 0; padding: 16px 22px 0;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink);
}

.filament-band { padding: 10px 22px 18px; }
.filament-band__facts {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.filament-band__form {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
  border: 1px solid var(--line-3); border-radius: 999px; padding: 3px 9px;
}
/* Money is Newsreader with tabular numerals -- never DM Sans. */
.filament-band__price {
  font-family: var(--font-serif); font-size: 19px; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.filament-band__unit,
.filament-band__count {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted-3);
  font-variant-numeric: tabular-nums;
}
.filament-band__count { margin-left: auto; }

/* The strip itself. Wraps rather than scrolling sideways: a hidden
   horizontal overflow means colours you never find, and the whole point
   is seeing the range at a glance. */
.color-strip {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.color-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 6px;
  border: 1px solid var(--line-3); border-radius: 999px;
  background: var(--surface);
}
.color-chip__name {
  font-family: var(--font-sans); font-size: 12px; color: var(--muted); white-space: nowrap;
}
.color-chip .swatch {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--chip-border); flex: none; object-fit: cover;
}