/* specialties.css — the Cascadia line roster and the line pages.
   SITE-SPECIALTIES-SPEC-REV2 §2 (roster), §3 (status vocabulary),
   §4 (template variants), §5 (knife line), §6 (portfolio cross-link).

   Loaded by build.js on any page declaring `specialties:` in its own meta
   block — `roster` on the section index, `line` on a line page. The roster
   also loads library.css, because its cards ARE library cards: this file adds
   the status chip and the line-page furniture and nothing else.

   Palette discipline (CLAUDE.md): green stays reserved for bench-verified
   and availability claims, so it colours an `open` status and nothing more.
   Gold is structure — the roster, the rules, the section spines. Oxblood
   stays the action colour. A `wait` or `closed` status is deliberately
   hammertone and quiet: a line that is not selling should not shout in the
   colour that means it is. */

/* ---------- roster (§2) ---------- */

/* The roster is a small, fixed set — six cards, not a growing library — so it
   wants a slightly roomier cell than the document grid's. Everything else
   about the card comes from library.css. */
.spec-roster { margin: 1.6rem 0 2.4rem; }

/* Three lines of description, not library.css two.
   The shared .lib-sub clamps to 2 lines because the library grid holds a
   dozen-plus cards and needs them uniform. The roster holds five, and its
   descriptions are sentences Ilya wrote rather than generated subtitles -
   the Long-Reach line runs to three lines and was silently losing its last
   clause ("and cert included") to the clamp. Measured: the card body has
   38px of slack inside its fixed 172px and a line costs 24px, so the third
   line fits with room to spare and the card height does not move.
   Scoped to .spec-roster so the Site Map grid, Collection Index and Store
   cards keep the two-line rule. */
.spec-roster .lib-sub { -webkit-line-clamp: 3; }

/* The status chip, in the card's meta row next to the working-name label.
   `data-state` is the §3 vocabulary key, written by libCardHtml; the tone
   buckets below are the only thing that reads it, so a new status is a table
   entry in build.js plus one rule here. */
.lib-status {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.12rem 0.44rem;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--hammertone) 55%, transparent);
  color: var(--ink-soft);
  white-space: nowrap;
}
.lib-status[data-state="live"],
.lib-status[data-state="limited run"],
.lib-status[data-state="commissions open"] {
  border-color: var(--green);
  color: var(--green);
}

/* ---------- line-page status banner (§3) ---------- */

/* One banner per line page, and one more per track on a two-track line
   (§5 / R10). Every word of it is generated from src/data/specialties.json —
   a status flip is a data edit, so nothing here may be hand-set on a page. */
.spec-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.7rem;
  margin: 1.4rem 0;
  padding: 0.7rem 1rem;
  background: var(--paper-panel);
  border-left: 4px solid var(--hammertone);
}
.spec-status[data-tone="open"] { border-left-color: var(--green); }
.spec-status[data-tone="wait"] { border-left-color: var(--gold); }
.spec-status[data-tone="closed"] { border-left-color: var(--hammertone); }

/* the track name, on the per-track banners only */
.spec-status-for {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.spec-status-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--ink-soft);
}
.spec-status[data-tone="open"] .spec-status-chip { color: var(--green); }
.spec-status-note {
  font-family: var(--body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  /* the sentence takes the rest of the row, and the whole row on a phone */
  flex: 1 1 22ch;
}

/* ---------- line-page section furniture (§4, §5) ---------- */

/* A line page is a stack of named, currently empty sections. The spine keeps
   them legible as structure rather than as a column of stray headings — the
   same job the policy shells' `.page-pending ~ section` margin does, which
   this page set also relies on (store.css). */
.spec-section {
  margin: 2.2rem 0;
  padding-left: 1rem;
  border-left: 2px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.spec-section > h2,
.spec-section > h3 { margin-top: 0; }

/* The two production-model blocks on the knife page (§5.2) and the SKU shell
   on a stocked line: named, spec-shaped, and empty until the designations
   land (O13). Side by side where there is room, stacked on a phone. */
.spec-models {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
  margin: 1.2rem 0;
}
.spec-model {
  padding: 1rem 1.1rem;
  background: var(--paper-panel);
  border-top: 3px solid var(--gold);
}
.spec-model > :first-child { margin-top: 0; }
.spec-model > :last-child { margin-bottom: 0; }
.spec-model h3 {
  font-family: var(--disp);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The commerce SHELL. Not a buy block: SP1 ships no buy flow, and this is the
   visible statement of where one will go, so it must not borrow the green
   verification rail that store.css gives a real .sale-block. */
.spec-commerce {
  margin: 1.6rem 0;
  padding: 1rem 1.2rem;
  background: var(--paper-panel);
  border-left: 4px solid var(--hammertone);
}
.spec-commerce > :first-child { margin-top: 0; }
.spec-commerce > :last-child { margin-bottom: 0; }

/* The inquiry route on a commission page (T3). Oxblood, because it is the one
   action on the page — and it points at the existing contact route: the
   structured intake form is open item O11 and is not built here. */
.spec-inquiry {
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  background: var(--paper-panel);
  border-left: 4px solid var(--oxblood);
}
.spec-inquiry > :first-child { margin-top: 0; }
.spec-inquiry > :last-child { margin-bottom: 0; }
.spec-inquiry-head {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

/* ---------- portfolio strip (§6) ---------- */

/* A curated subset of the Portfolio, not the gallery — and not a lightbox:
   the zoom belongs to the portfolio page, and each thumbnail here is a link
   into it. Empty is the ordinary state today and gets the quiet line. */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.9rem;
  margin: 1.2rem 0;
}
.spec-strip-item {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  background: var(--paper-panel);
}
.spec-strip-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.spec-strip-cap {
  display: block;
  padding: 0.4rem 0.6rem;
  font-family: var(--disp);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.spec-strip-item:hover { border-color: var(--oxblood); }
.spec-strip-item:hover .spec-strip-cap { color: var(--oxblood); }
.spec-strip-empty,
.spec-strip-more {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- roster link out of the store (§2, reachability) ---------- */

.store-lines {
  margin: 2rem 0 0;
  font-size: 1.02rem;
}

/* ---------- roster on a phone ---------- */
/* The shared lib-card is landscape and fixed-height (120px on a phone), which
   leaves the text column 175px wide. Measured with Ilya's Long-Reach copy in
   it: 195 characters need EIGHT lines at that width, and the card's fixed
   height cut it to two — the clamp above was not even the binding constraint,
   the card height was. Two lines of a five-line sentence is not a teaser, it
   is a page that hides what the line actually sells.

   So on a phone the roster card grows to its content and the generated dial
   cover gives up width. That cover is a placeholder — these lines have no
   artwork — and it does not outrank the sentence describing the product.
   Scoped to .spec-roster: the Site Map grid, Collection Index and Store cards
   keep the uniform fixed-height card, which is right for a long list. */
@media (max-width: 40rem) {
  .spec-roster .lib-card { height: auto; min-height: 120px; }
  .spec-roster .lib-cov { width: 96px; }
  .spec-roster .lib-sub { -webkit-line-clamp: 8; }
}