/* ShipCutoff — site CSS. HAND-AUTHORED: no build script writes this file.

   Visual layer designed in Lovable, ported here as an ADDITIVE layer over the
   scaffold. Three deliberate departures from what came back, because the
   original could not see the scaffold:

   1. No token definitions. sky.css owns --accent/--bg/--panel/--surface/
      --border/--border-strong/--muted/--text/--font-mono across four
      [data-theme] phases (night/dawn/day/dusk). Redefining them at :root
      would collapse that to a two-theme site. Everything below CONSUMES
      those tokens; the only new ones are --sb-* prefixed so they can never
      collide.
   2. No `body { overflow-x: hidden }`. That hides real overflow bugs rather
      than fixing them; .table-wrap does the actual containment.
   3. The mobile line-clamp expands on FOCUS, not just hover. `tr:hover` and
      `:focus-within` never fire on touch — nothing in the row is focusable —
      so the rationale would have been permanently truncated on the devices
      that carry most of this traffic. render.mjs puts tabindex="0" on .d-why
      to make tap-to-expand actually work. */

:root {
  /* Local additions only. Everything else comes from sky.css. */
  --sb-shade: rgba(255, 255, 255, 0.035);
  --sb-measure: 68ch;
  --sb-rhythm: clamp(1.5rem, 4vw, 2.5rem);
}
:root[data-theme="dawn"],
:root[data-theme="day"],
:root[data-theme="dusk"] {
  --sb-shade: rgba(10, 30, 28, 0.028);
}

/* ---------- notice / alert ---------- */

.notice,
.alert {
  max-width: var(--sb-measure);
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--sb-shade);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}
.notice strong,
.alert strong { color: var(--text); }
.alert {
  max-width: none;
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
  color: var(--text);
  margin-bottom: var(--sb-rhythm);
}

/* ---------- countdown ---------- */

.countdown {
  display: grid;
  gap: 0.6rem;
  min-height: 3.25rem; /* WS-4: reserved before JS fills it */
  margin: 0 0 var(--sb-rhythm);
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.countdown:empty { border-style: dashed; opacity: 0.55; }
.countdown > span {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--border);
}
.countdown > span:last-child { padding-bottom: 0; border-bottom: 0; }
.cd-n {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cd-l { color: var(--muted); font-size: 0.85rem; line-height: 1.35; }

@media (min-width: 720px) {
  .countdown { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .countdown > span {
    padding-bottom: 0;
    border-bottom: 0;
    padding-right: 1.25rem;
    border-right: 1px dashed var(--border);
  }
  .countdown > span:last-child { border-right: 0; padding-right: 0; }
}

/* ---------- filter tool ---------- */

.tool {
  display: grid;
  gap: 0.8rem;
  margin: 0 0 var(--sb-rhythm);
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.tool .field { display: grid; gap: 0.3rem; }
.tool label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.tool select {
  appearance: none;
  width: 100%;
  padding: 0.6rem 2rem 0.6rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 1.05rem center, right 0.7rem center;
  background-repeat: no-repeat;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.tool-hint { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.8rem; }
@media (min-width: 720px) { .tool { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }

/* ---------- carrier panel ---------- */

.carrier {
  margin: 0 0 var(--sb-rhythm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.carrier[hidden] { display: none; }
.carrier-head {
  padding: 1.1rem clamp(0.9rem, 3vw, 1.5rem);
  border-bottom: 1px solid var(--border);
  background: var(--sb-shade);
  border-radius: var(--radius) var(--radius) 0 0;
}
.carrier-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.carrier-target { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.85rem; }
.carrier-target strong { color: var(--text); font-weight: 600; }
.carrier-warn {
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--danger, var(--accent));
  background: var(--danger-bg, var(--accent-bg));
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.lane { padding: 1.1rem clamp(0.9rem, 3vw, 1.5rem) 0.4rem; }
.lane[hidden] { display: none; }
.lane h3 {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.lane-note { margin: 0 0 0.6rem; color: var(--muted); font-size: 0.85rem; max-width: var(--sb-measure); }

/* ---------- the matrix ---------- */

/* Wide content scrolls inside its own container. The page body is never
   given overflow-x:hidden — that masks bugs instead of preventing them. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
table.matrix {
  width: 100%;
  min-width: min(100%, 34rem);
  border-collapse: collapse;
  font-size: 0.94rem;
  text-align: left;
}
table.matrix.wide { min-width: 44rem; }
table.matrix thead th {
  padding: 0.6rem 0.85rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  background: var(--sb-shade);
  border-bottom: 1px solid var(--border-strong);
}
table.matrix tbody tr + tr > * { border-top: 1px solid var(--border); }
table.matrix tbody tr[hidden] { display: none; }
table.matrix tbody th[scope="row"] {
  width: 44%;
  min-width: 11rem;
  padding: 1rem 0.85rem;
  font-weight: 600;
  color: var(--text);
  vertical-align: top;
}
table.matrix td { padding: 1rem 0.85rem; vertical-align: top; }
table.matrix tbody tr:hover { background: var(--sb-shade); }

.svc-note {
  display: block;
  margin-top: 0.25rem;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--muted);
}

/* date cell */
table.matrix td time {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
table.matrix td time strong { font-weight: 650; }
td.d-projected time strong { color: var(--accent); }
.d-day {
  display: block;
  font-family: inherit;
  font-size: 0.76rem;
  letter-spacing: 0;
  color: var(--muted);
}
.d-dash { font-family: var(--font-mono); font-size: 1.15rem; color: var(--muted); }
td.ex, td.why { color: var(--muted); font-size: 0.88rem; max-width: 20rem; }

/* ---------- badges: never colour alone ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-top: 0.45rem;
  padding: 0.12rem 0.55rem 0.12rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge::before { content: ""; width: 0.55rem; height: 0.55rem; flex: none; }
/* Projected — dashed border + solid diamond */
.badge-projected {
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px dashed var(--accent);
}
.badge-projected::before { background: currentColor; transform: rotate(45deg); }
/* Published — solid border + solid dot */
.badge-actual {
  color: var(--success, var(--accent));
  background: var(--success-bg, var(--accent-bg));
  border: 1px solid currentColor;
}
.badge-actual::before { background: currentColor; border-radius: 50%; }
/* Not published — muted border + hollow square */
.badge-none {
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-strong);
}
.badge-none::before { border: 1px solid currentColor; background: transparent; }

/* ---------- .d-why — the density problem ----------

   The derivation is the site's credibility argument, so it stays in the DOM
   and stays crawlable: no display:none anywhere in here. It is demoted to a
   second tier (small, muted, hung off a rail), clamped to two lines on
   narrow screens, and moved into a side rail on wide ones so the date column
   reads as a clean scannable stripe.

   Tap-to-expand works because render.mjs gives the element tabindex="0";
   a hover-only rule would be dead on touch. */

.d-why {
  display: block;
  margin-top: 0.7rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--border-strong);
  max-width: 52ch;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.d-projected .d-why { border-left-color: var(--accent); }
.d-why:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 719px) {
  .d-why {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .d-why[tabindex] { cursor: pointer; }
  /* focus covers tap on touch; hover covers pointer devices */
  .d-why:focus,
  .d-why:hover,
  table.matrix tbody tr:hover .d-why {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}

/* Wide: date stripe left, rationale in its own rail right.

   MEASURED, not guessed. The scaffold caps content at --maxw:760px, which
   leaves the table ~628px. A three-across flex row (date 120 + badge 108 +
   gaps 48) left the rationale 149px — roughly 20 characters per line, which
   pushed one row to 296px tall. That is worse than stacking, so the rail only
   engages above 1100px, where the panel also breaks out of --maxw far enough
   to pay for itself. Below that the rationale stacks under the date and gets
   the full cell width, which is genuinely more compact at this measure.

   The breakout is clamped by 100vw so it can never introduce a horizontal
   scrollbar; that is verified in the build checks. */
@media (min-width: 1100px) {
  .carrier {
    width: min(100vw - 3rem, 1040px);
    margin-inline: calc(50% - min(50vw - 1.5rem, 520px));
  }

  table.matrix { min-width: 0; }
  table.matrix tbody th[scope="row"] { width: 22%; min-width: 9rem; }

  /* Grid, not flex: date and badge stack into one narrow left stripe so the
     rationale gets every remaining pixel instead of competing with them. */
  table.matrix td.d-projected,
  table.matrix td.d-actual,
  table.matrix td.d-none {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    column-gap: 1.5rem;
    row-gap: 0.4rem;
    align-items: start;
  }
  table.matrix td time,
  table.matrix td .d-dash { grid-column: 1; grid-row: 1; }
  table.matrix td .badge { grid-column: 1; grid-row: 2; margin-top: 0; justify-self: start; }
  .d-why {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-top: 0.15rem;
    max-width: 56ch;
  }
}

/* ---------- carrier footer ---------- */

.carrier-foot {
  margin-top: 0.6rem;
  padding: 1rem clamp(0.9rem, 3vw, 1.5rem) 1.2rem;
  border-top: 1px solid var(--border);
  background: var(--sb-shade);
  border-radius: 0 0 var(--radius) var(--radius);
}
.carrier-foot p { margin: 0 0 0.4rem; font-size: 0.8rem; color: var(--muted); max-width: var(--sb-measure); }
.carrier-foot p:last-child { margin-bottom: 0; }
.guarantee strong { color: var(--text); }
.asof { font-family: var(--font-mono); font-size: 0.72rem; opacity: 0.85; }
.src a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- misc ---------- */

.missed-cta { border-left: 3px solid var(--accent); }
ul.limits { margin: 0.4rem 0 0 1.1rem; padding: 0; }
ul.limits li { margin: 0.4rem 0; line-height: 1.55; }

@media (prefers-reduced-motion: no-preference) {
  table.matrix tbody tr { transition: background-color 0.18s ease; }
}

/* ============================================================
   ART DIRECTION LAYER
   Designed in Lovable, ported with one structural change.

   THE CHANGE: every full-bleed breakout in the source used
   `margin-inline: calc(-1 * clamp(.9rem,4vw,2rem))`, calibrated to that
   demo's own `body { padding: 0 clamp(.9rem,4vw,2rem) }`. This site puts
   content in `#main { max-width: var(--maxw); padding: … var(--space-4) … }`
   — a FIXED 1rem. Porting verbatim would over-pull by up to 1rem per side
   above ~500px and put a horizontal scrollbar on the page. Bands now use the
   same clamped breakout already proven at zero overflow on .carrier.

   Tokens: --sb-* only. Everything else is consumed from sky.css. The tint and
   tone layers sit ABOVE both the photo and the fallback fill, so the
   missing-image state is graded identically to the photo that replaces it —
   which is why shipping without photography still looks deliberate.
   ============================================================ */

:root {
  --sb-shade-2: color-mix(in oklab, var(--text) 7%, transparent);
  --sb-accent-soft: color-mix(in oklab, var(--accent) 14%, transparent);
  --sb-accent-line: color-mix(in oklab, var(--accent) 55%, transparent);
  --sb-accent-text: color-mix(in oklab, var(--accent) 78%, var(--text));
  --sb-shot-radius: var(--radius);
  --sb-tint-blend: color;
}

/* ---- the slot ---- */
.sb-shot { margin: 0; display: grid; gap: 0.5rem; }
.sb-shot-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--sb-ar-m, 4 / 5);
  border: 1px solid var(--border);
  border-radius: var(--sb-shot-radius);
  background: var(--surface);
}
@media (min-width: 760px) { .sb-shot-media { aspect-ratio: var(--sb-ar, 16 / 9); } }
.sb-shot-media img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; display: block; object-fit: cover;
  filter: saturate(var(--sb-grade-sat)) contrast(var(--sb-grade-con)) brightness(var(--sb-grade-bri));
}
/* Layer A: teal tint in `color` blend → hue unification across sources.
   Layer B: one contrast curve — highlight lift, shadow crush. */
.sb-shot-media::before,
.sb-shot-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.sb-shot-media::before {
  z-index: 2; background: var(--sb-tint); opacity: var(--sb-tint-a);
  mix-blend-mode: var(--sb-tint-blend);
}
.sb-shot-media::after { z-index: 3; background: var(--sb-tone-grad); }

/* ACT 1 — cooler, harder */
.sb-shot.is-act1 {
  --sb-grade-sat: 0.42; --sb-grade-con: 1.16; --sb-grade-bri: 0.95;
  --sb-tint: color-mix(in oklab, var(--accent) 50%, #02171c);
  --sb-tint-a: 0.5;
  --sb-tone-grad:
    linear-gradient(180deg, rgba(226,240,240,.04) 0%, transparent 40%),
    linear-gradient(0deg, rgba(2,20,26,.46) 0%, rgba(2,20,26,.12) 55%, transparent 78%);
}
/* ACT 2 — warmer, softer */
.sb-shot.is-act2 {
  --sb-grade-sat: 0.8; --sb-grade-con: 1.02; --sb-grade-bri: 1.05;
  --sb-tint: color-mix(in oklab, var(--accent) 40%, #f2d9b6);
  --sb-tint-a: 0.3;
  --sb-tone-grad:
    linear-gradient(180deg, rgba(255,244,226,.12) 0%, transparent 52%),
    linear-gradient(0deg, rgba(36,26,18,.22) 0%, transparent 62%);
}

/* ---- the missing-image state: what ships first ---- */
.sb-shot-fill {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(115deg, color-mix(in oklab, var(--accent) 22%, var(--surface)) 0%, var(--surface) 55%),
    repeating-linear-gradient(115deg, transparent 0 22px, var(--sb-shade-2) 22px 23px);
}
.sb-shot-slug {
  position: absolute; inset: auto 0 0 0; z-index: 4; margin: 0;
  display: grid; gap: 0.15rem;
  padding: 0.6rem 0.7rem;
  font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.4;
  color: var(--muted);
  background: linear-gradient(0deg, color-mix(in oklab, var(--bg) 88%, transparent) 0%, transparent 100%);
}
.sb-shot-slug b { color: var(--text); letter-spacing: 0.06em; }
.sb-shot-cap { margin: 0; font-size: 0.78rem; color: var(--muted); }

/* ---- narrative bands. Breakout uses the clamped form proven on .carrier. ---- */
.sb-band {
  max-width: none;
  width: min(100vw - 2rem, 1240px);
  margin-inline: calc(50% - min(50vw - 1rem, 620px));
  margin-block: var(--sb-rhythm);
  padding: clamp(1.75rem, 6vw, 3.25rem) clamp(0.9rem, 4vw, 2rem);
  border-block: 1px solid var(--border);
}
.sb-band-in { max-width: var(--maxw); margin-inline: auto; display: grid; gap: 1.1rem; }
.sb-band.is-act1 { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 6%, var(--bg)) 0%, var(--bg) 100%); }
.sb-band.is-act2 { background: linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--accent) 10%, var(--bg)) 100%); }
.sb-band-head { display: grid; gap: 0.4rem; max-width: var(--sb-measure); }
.sb-band-head h2 { margin: 0; font-size: clamp(1.3rem, 4.6vw, 1.95rem); letter-spacing: -0.03em; line-height: 1.12; }
.sb-band-head p { margin: 0; color: var(--muted); font-size: 0.94rem; }
.sb-act-tag {
  justify-self: start; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
  border: 1px solid var(--sb-accent-line); color: var(--sb-accent-text);
  background: var(--sb-accent-soft);
}
.sb-band.is-act1 .sb-act-tag { border-style: dashed; }

.sb-shotgrid { display: grid; gap: 0.9rem; }
@media (min-width: 620px) {
  .sb-shotgrid { grid-template-columns: repeat(6, 1fr); }
  .sb-shotgrid > .sb-span-2 { grid-column: span 2; }
  .sb-shotgrid > .sb-span-3 { grid-column: span 3; }
  .sb-shotgrid > .sb-span-4 { grid-column: span 4; }
  .sb-shotgrid > .sb-span-6 { grid-column: span 6; }
}

/* ---- the doorstep moment ---- */
.sb-doorstep { margin-block: var(--sb-rhythm); }
.sb-doorstep-in {
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  overflow: hidden; background: var(--panel);
}
.sb-doorstep .sb-shot-media { border: 0; border-radius: 0; --sb-shot-radius: 0; }
.sb-doorstep-cta { display: grid; gap: 0.7rem; padding: clamp(1rem, 4vw, 1.5rem); border-top: 1px solid var(--border); }
.sb-doorstep-cta h2 { margin: 0; font-size: clamp(1.2rem, 4.4vw, 1.7rem); letter-spacing: -0.03em; line-height: 1.14; }
.sb-doorstep-cta p { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: var(--sb-measure); }

@media print {
  .sb-band, .sb-doorstep, .sb-shot { display: none !important; }
}