/* Hallmark · shape: Table (C2): a split hero, the LDXP proof with one table-tent figure, the four moments as a stepper beside one dealt pair, the needs on a band, the close · genre: modern-minimal · theme: brand · paper: oklch(17.6% 0.014 258) · accent: oklch(71.3% 0.117 253) · display: Inter 700 (the /subscribe heads) · body: Inter · job: try · hero: Split, the head left; the board and the phone dealt at 4 degrees on the page's one accent-edged panel · nav: kept, navbar-solid (sticky bar: mark left, sentence-case links, Sign in and Sign up right) · footer: kept, footer-simple (wordmark, one line, Discord and YouTube marks; Company and Support columns; app-store buttons) · imagery: art-directed product captures at 3x (curated fictional data, 2x for the real LDXP Stats tab), boards and phones (PostSpark iPhone 17 frames) dealt and flattened into one still per panel; the Stats tab and the Events tab as masked slices on the page; the event editor edge to edge in a panel · signature: Pod #14 and the call dealt like the logo's two cards
 * axes: dark/grotesk-sans/cool · posture: restrained (flat panels; the accent on the hero panel's edge, the picked moment, links and focus; amber and green only on the moments they mean) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V3 · weakest: V, the system is the owner's pick (C2) rebuilt in TopDeck's colours; the moments were redesigned from a plain list into a bordered stepper so the four steps read as a sequence */
/* Hallmark · waive 1 · Inter display with JetBrains Mono declared as --font-outlier · Inter 700 is the owner's choice, the /subscribe heads and the face of the shared TopDeck navbar and footer */
/* Hallmark · waive 29 · the zero-offset accent glow on the td-btn-primary hover only · the glow-lift button is the TopDeck signature the owner kept; panels, fields and washes carry no glow */
/* Hallmark · waive 39b · td-btn-primary and td-btn-secondary stand 56px · the shared TopDeck button recipe from enhancements.css keeps one height in the hero, the navbar and every page */
/* Hallmark · waive 30b · around-icons only in the navbar sign-in link and the back-to-top button · the TopDeck page body uses Font Awesome alone; the navbar and footer partials are shared chrome */
/* Hallmark · answered F4 · the navbar Sign up is the chrome's .btn-primary; the TopDeck page body uses td-btn-primary only */
/* Hallmark · answered F16 · the accent scrollbar comes from enhancements.css and head.pug; DESIGN.md Wiring step 2 took scrollbar-color out of base.css so the site's own stays */
/* Hallmark · answered F19 · td-btn-secondary's 500 comes from enhancements.css and the 70's 800 is the one figure DESIGN.md allows; the page itself sets 400, 600 and 700 */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Page grid: twelve columns inside Bootstrap's container ---------- */

.td-mk .od-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  align-items: center;
}

.td-mk .od-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.td-mk .od-actions > a {
  white-space: nowrap;
}

.td-mk .od-link {
  color: var(--td-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--td-duration-fast) var(--td-ease-out);
}

.td-mk .od-link:hover {
  color: var(--td-text-primary);
}

.td-mk .od-link:active {
  color: var(--td-text-secondary);
}

/* ---------- Panels: flat, a 1px border, no shadow of their own ---------- */

.td-mk .od-panel {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--td-border-default);
  border-radius: var(--td-radius-lg);
  background: var(--td-card-bg);
  color: var(--td-text-secondary);
}

/* The page's one accent edge: the hero panel. */
.td-mk .od-panel--hero {
  border: 2px solid var(--td-accent);
}

/* ---------- The shot: a dealt pair, flattened into one still ----------
   The board and the phone at the logo's lean, rendered at 3x on a
   transparent canvas. The still fills its
   panel edge to edge, so a card that runs off the canvas runs off the
   panel's edge. A video loop can later take the img's place. */

.td-mk .od-shot {
  aspect-ratio: 9 / 8;
}

/* ---------- Motion: each dealt pair as a loop ----------
   One video per moment: the board and the phone composited at the
   still's lean, on the panel's own colour, 1440x1280 for a panel that
   shows at 670px or less. */
.td-mk .od-shot > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The loop's own pause control, in the panel's free lower-right corner */
.td-mk .od-motion-toggle {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--td-border-emphasis);
  border-radius: var(--td-radius-sm);
  background: var(--td-surface-1);
  color: var(--td-text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--td-duration-fast) var(--td-ease-out), border-color var(--td-duration-fast) var(--td-ease-out);
}

.td-mk .od-motion-toggle:hover {
  border-color: var(--td-text-secondary);
  background: var(--td-surface-2);
}

.td-mk .od-motion-toggle:active {
  background: var(--td-card-bg);
}

.td-mk .od-motion-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Slices: a fragment of the app, dissolving into the page ----------
   A wide capture cut out of a larger screen sits on the page itself, at no
   more than half its source pixels, and its cut edges fade out under a mask.
   The --fade-* lengths say how far each edge fades; 0 keeps it crisp. A
   mask reads only alpha, so any opaque token serves as its ink. */

.td-mk .od-slice {
  --fade-top: 0%;
  --fade-right: 0%;
  --fade-bottom: 0%;
  --fade-left: 0%;
  margin: 0;
  -webkit-mask-image:
    linear-gradient(to right, transparent, var(--color-paper) var(--fade-left), var(--color-paper) calc(100% - var(--fade-right)), transparent),
    linear-gradient(to bottom, transparent, var(--color-paper) var(--fade-top), var(--color-paper) calc(100% - var(--fade-bottom)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, var(--color-paper) var(--fade-left), var(--color-paper) calc(100% - var(--fade-right)), transparent),
    linear-gradient(to bottom, transparent, var(--color-paper) var(--fade-top), var(--color-paper) calc(100% - var(--fade-bottom)), transparent);
  mask-composite: intersect;
}

.td-mk .od-slice {
  background: none;
}

.td-mk .od-slice picture,
.td-mk .od-slice img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Hero ---------- */

.td-mk .od-hero {
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--od-nav-h, 76px));
  padding-block: var(--space-2xl);
}

.td-mk .od-hero > .container {
  width: 100%;
}

.td-mk .od-hero__text {
  grid-column: 1 / span 6;
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
}

.td-mk .od-hero h1 {
  max-width: 11ch;
}

.td-mk .od-hero .od-actions {
  margin-top: var(--space-xs);
}

.td-mk .od-panel--hero {
  grid-column: 7 / span 6;
}

/* ---------- Before and after: LDXP, one table-tent figure ---------- */

.td-mk .od-ba {
  padding-block: var(--section-gap);
  border-top: 1px solid var(--td-border-default);
}

.td-mk .od-ba__grid {
  align-items: end;
}

.td-mk .od-ba__head {
  grid-column: 1 / span 7;
  grid-row: 1;
  max-width: 14ch;
}

.td-mk .od-ba__tally {
  grid-column: 1 / span 7;
  grid-row: 2;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2xl);
  margin: var(--space-2xl) 0 0;
}

.td-mk .od-ba__tally > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.td-mk .od-ba__tally dt {
  max-width: 22ch;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.45;
  color: var(--td-text-secondary);
  text-wrap: pretty;
}

.td-mk .od-fig {
  order: -1;
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0.86;
  white-space: nowrap;
}

.td-mk .od-fig__word {
  margin-inline: 0.3em;
  font-size: 0.32em;
  font-weight: 400;
  letter-spacing: 0;
}

.td-mk .od-ba__then .od-fig {
  font-size: var(--text-display-s);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  color: var(--td-text-secondary);
}

/* The 70, set like a table number on a tent card. */
.td-mk .od-ba__now .od-fig {
  font-size: var(--text-figure);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  color: var(--td-text-primary);
}

.td-mk .od-ba__facts {
  grid-column: 8 / span 5;
  grid-row: 1 / span 2;
  align-self: end;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--td-border-default);
}

.td-mk .od-ba__facts li {
  padding-block: var(--space-md);
  border-top: 1px solid var(--td-border-default);
  color: var(--td-text-secondary);
  text-wrap: pretty;
}

/* The LDXP Stats tab: production's numbers, captured at 3x with five columns
   hidden and shown at 1.2x its CSS size (1331px), so its 11px header caps
   read 13px. Its real edges stay; the fourth row, an empty queue, fades. */
.td-mk .od-slice--stats {
  --fade-bottom: 9%;
  max-width: 1331px;
  margin-top: var(--space-3xl);
}

.td-mk .od-ba__more {
  margin-top: var(--space-lg);
}

/* ---------- The moments: a pinned run, each moment's text beside its clip ---------- */

.td-mk .od-run {
  padding-block: var(--section-gap) var(--section-gap-l);
  border-top: 1px solid var(--td-border-default);
}

.td-mk .od-run__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
}

.td-mk .od-run__head {
  grid-column: 1 / span 6;
}

.td-mk .od-run__steps {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-3xl);
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
}

/* A moment's head and line, one unit, the icon in its own column */
.td-mk .od-step__row {
  display: grid;
  grid-template-columns: var(--space-lg) minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-sm);
  row-gap: var(--space-2xs);
}

.td-mk .od-step__icon {
  grid-row: 1;
  font-size: var(--text-md);
  text-align: center;
}

.td-mk .od-step h3 {
  grid-column: 2;
  max-width: none;
  font-size: var(--text-lg);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Each icon in the colour its moment has on the board. */
.td-mk .od-step--queue .od-step__icon {
  color: var(--td-accent);
}

.td-mk .od-step--call .od-step__icon {
  color: var(--color-warning);
}

.td-mk .od-step--launch .od-step__icon {
  color: var(--color-success);
}

.td-mk .od-step p {
  grid-column: 2;
  color: var(--td-text-secondary);
}

.td-mk .od-panel--step {
  max-width: 40rem;
  margin-top: var(--space-lg);
}

/* The run spans the grid under the head (partials/marketing-pin) */
.td-mk .od-run__pin {
  grid-column: 1 / -1;
}

.td-mk .td-pin__stage > .od-panel--step {
  max-width: none;
  margin: 0;
}

.td-mk .od-run__pin.is-pinned {
  margin-top: var(--space-2xl);
}

/* ---------- What it runs on: a band, the editor on a panel ---------- */

/* ---------- Formats, winners and Stats ---------- */

.td-mk .od-after {
  padding-block: var(--section-gap-s);
  border-top: 1px solid var(--td-border-default);
}

.td-mk .od-after .od-grid {
  row-gap: var(--space-xl);
}

.td-mk .od-after__head {
  grid-column: 1 / span 7;
  grid-row: 1;
}

/* The Events tab beside the three rows: its Structure column is the formats */
.td-mk .od-after__list {
  grid-column: 9 / span 4;
  grid-row: 2;
  align-self: start;
}

.td-mk .od-needs {
  padding-block: var(--section-gap-s);
  background: var(--td-surface-2);
}

.td-mk .od-needs__text {
  grid-column: 1 / span 5;
  display: grid;
  gap: var(--space-xl);
  justify-items: start;
}

.td-mk .od-needs__list {
  width: 100%;
  margin: 0;
}

.td-mk .od-needs__list > div {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-top: 1px solid var(--td-border-default);
}

.td-mk .od-needs__list dt {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--td-text-primary);
}

/* The needs are things, not states: their icons stay neutral. */
.td-mk .od-needs__list dt .fa-solid,
.td-mk .od-needs__list dt .fa-brands {
  flex-shrink: 0;
  color: var(--td-text-secondary);
}

.td-mk .od-marks {
  display: inline-flex;
  gap: var(--space-xs);
}

.td-mk .od-needs__list dd {
  margin: 0;
  color: var(--td-text-secondary);
  text-wrap: pretty;
}

/* The event editor sits on the band as a crisp window: its sheet is darker
   than the band, so a fade would read as a smudge. The capture fills the
   panel edge to edge, at no more than half its pixels (507px at 3x). */
.td-mk .od-panel--setup {
  grid-column: 7 / span 6;
  justify-self: center;
  width: 100%;
  max-width: 560px;
}

.td-mk .od-panel--setup picture,
.td-mk .od-panel--setup img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Close: the Events tab on a panel, then the action ---------- */

.td-mk .od-close {
  padding-block: var(--section-gap) var(--section-gap-l);
}

/* The Events tab, cut from its card: the row actions fade out at the
   right, the card's top and bottom into the page. */
.td-mk .od-slice--events {
  --fade-top: 3%;
  --fade-right: 7%;
  --fade-bottom: 12%;
  --fade-left: 1.2%;
  grid-column: 1 / span 7;
  grid-row: 2;
}

.td-mk .od-close__text {
  grid-column: 1 / span 10;
  grid-row: 1;
  display: grid;
  gap: var(--space-lg);
  justify-items: start;
}

/* The close is a statement, set at the hero's size: the page's bookend */
.td-mk .od-close h2 {
  max-width: 20ch;
  font-size: var(--text-display);
  letter-spacing: var(--tracking-display);
}

.td-mk .od-close .lead {
  max-width: 40rem;
  text-wrap: balance;
}

.td-mk .od-close .od-actions {
  margin-top: var(--space-xs);
}

/* ---------- Under 60rem every split stacks: text, then the panel ---------- */

@media (max-width: 60rem) {
  .td-mk .od-hero {
    min-height: 0;
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .td-mk .od-grid {
    row-gap: var(--space-xl);
  }

  .td-mk .od-hero__text,
  .td-mk .od-panel--hero,
  .td-mk .od-ba__head,
  .td-mk .od-ba__tally,
  .td-mk .od-ba__facts,
  .td-mk .od-run__head,
  .td-mk .od-after__head,
  .td-mk .od-after__list,
  .td-mk .od-needs__text,
  .td-mk .od-panel--setup,
  .td-mk .od-close__text,
  .td-mk .od-slice--events {
    grid-column: 1 / -1;
  }

  .td-mk .od-panel--hero {
    width: 100%;
    max-width: 40rem;
  }

  .td-mk .od-panel--setup {
    justify-self: start;
  }

  .td-mk .od-ba__facts {
    grid-row: 3;
    margin-top: var(--space-xl);
  }

  .td-mk .od-slice--events {
    grid-row: 2;
  }

  .td-mk .od-after__list {
    grid-row: 3;
  }
}

/* The phone crops hold until the wide captures read 13px again */
@media (max-width: 60rem) {
  /* The Stats tab's own phone card for the trials queue: the full table
     would show its 11px heads at 6 to 9px here */
  .td-mk .od-slice--stats {
    --fade-bottom: 18%;
    max-width: 351px;
    margin-top: var(--space-2xl);
  }
}

@media (max-width: 52rem) {
  /* The Events tab's phone layout: the five cards whole, inside their own
     rounded border, so nothing fades. 309px of cards shows at 345 to 360px,
     its 12px lines at 13.4 to 14px. */
  .td-mk .od-slice--events {
    --fade-top: 0%;
    --fade-right: 0%;
    --fade-bottom: 0%;
    --fade-left: 0%;
    max-width: 22.5rem;
  }
}

@media (max-width: 40rem) {
  /* The panel is half as wide; the corner leaves the phone's bezel almost clear */
  .td-mk .od-motion-toggle {
    right: var(--space-2xs);
    bottom: var(--space-2xs);
  }

  .td-mk .od-ba__tally {
    flex-wrap: wrap;
    row-gap: var(--space-xl);
  }

  .td-mk .od-fig {
    white-space: normal;
  }



  /* The editor's phone layout fills the panel edge to edge: 354px at 343 to
     358px, its 14px labels at 13.6px or more */
  .td-mk .od-panel--setup {
    max-width: 22.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-mk .od-link,
  .td-mk .od-motion-toggle {
    transition: none;
  }
}