/* Hallmark · shape: Conversational FAQ (draw c4) in C2: a split hero, the words beside the con's Events table on the one accent panel, then each question answered by the product: the schedule file and the importer's review of it, the program page and the app dealt as a pair, the named cons, the staff dialog, Analytics and the Players tab, then the close with the price and the big-show line a step down · genre: modern-minimal · theme: brand · job: hire (self-serve first: trial, plan or create a convention; Email us beside it and for big shows)
 * paper: oklch(17.6% 0.014 258) · accent: oklch(71.3% 0.117 253) · display: Inter 700 (the /subscribe heads) · body: Inter · outlier: JetBrains Mono for the schedule file only · hero: Split, the head, the lead and the actions on the left; the Events table (Name, Date, Filled) edge to edge in the page's one accent-edged panel on the right (owner, Oct 27: heroes are splits) · 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 from one curated fictional con (Harbor City Card Con), 4x where dealt: the Events table and the Players tab edge to edge in panels; the importer's review and the staff dialog flat on the page as the windows they are; Analytics as a slice whose cut edges fade; the program page and My Events in its PostSpark iPhone 17 frame dealt at 4 degrees and flattened into one still; narrow crops made for phones; no photographs · signature: the con's Events table, every event in one screen
 * axes: dark/grotesk-sans/cool · posture: restrained (flat panels; the accent on the hero panel's edge, links and focus; status colour only inside the captures) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V4 · weakest: P, a feature tour in question form; every answer is a screen, a file or a named con instead of a paragraph */
/* Hallmark · hero-review: none this pass (the hero's layout is the C2 pilot's; only its capture was reshot) · finish-review: subagent · 7 findings · 6 resolved 1 unresolved · gap: the phone half of the dealt pair reads under 13px at 375, as on On-demand; the board half holds 13px */
/* 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 · waive 49b · the named cons are links in table cells (.cv-case__index tbody th a) · a con's name is data that wraps at narrow widths, not a control */
/* 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 · the fourth weight is 500 on td-btn-secondary, the shared TopDeck recipe from enhancements.css; the page itself sets 400, 600 and 700 */
/* Hallmark · answered F25 · the schedule file is a labelled scroll region on a phone, with its Name column pinned so each row stays named */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Shared ---------- */

.td-mk {
  --cv-nav: 76px; /* navbar-solid's fixed height */
}

/* Resets at the theme's own weight, so a component's margin still wins */
:where(.td-mk) figure { margin: 0; }
:where(.td-mk) :is(ul, dl, dd) { margin: 0; padding: 0; list-style: none; }
.td-mk h3 { letter-spacing: -0.01em; }
.td-mk .lead { font-weight: 400; }

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

.cv-section { padding-block: var(--section-gap); }

.cv-head {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.cv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

.cv-actions a { white-space: nowrap; }

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

.cv-link:hover { color: var(--td-text-primary); }
.cv-link:active { color: var(--td-text-secondary); }

/* Icons here name things, not states, so they stay neutral */
.td-mk .fa-solid { color: var(--td-text-secondary); }

/* A capture fills its frame at its own shape: a <picture> is a plain box */
.td-mk picture,
.td-mk picture > img {
  display: block;
  width: 100%;
  height: auto;
}

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

.cv-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--td-border-default);
  border-radius: var(--td-radius-lg);
  background: var(--td-card-bg);
}

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

/* A window: a whole dialog lying flat on the page at its own edges. Its
   corners are transparent in the file, so nothing sits behind it. */
.cv-window {
  width: 100%;
  background: none;
}

/* A slice: a cut of the workspace on the page's own canvas. Its cut edges
   fade out under a mask (DESIGN.md Imagery 4); a mask reads only alpha, so
   any opaque token serves as its ink. */
.cv-slice {
  --fade-top: 0%;
  --fade-right: 0%;
  --fade-bottom: 0%;
  --fade-left: 0%;
  background: none;
  -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;
}

/* A ruled list of short answers: a head and its line */
.cv-answers > div {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-top: 1px solid var(--td-border-default);
}

.cv-answers > div:last-child { border-bottom: 1px solid var(--td-border-default); }

.cv-answers dt {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--td-text-primary);
}

.cv-answers dd {
  color: var(--td-text-secondary);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- Hero: a split, the words left and the Events table right ---------- */

.td-mk .cv-hero {
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--cv-nav));
  padding-block: var(--space-xl);
}

.cv-hero > .container { width: 100%; }

.cv-hero .cv-grid { align-items: center; }

.cv-hero__text {
  grid-column: 1 / span 5;
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
}

.cv-hero h1 { max-width: 11ch; text-wrap: balance; }

.cv-hero .cv-actions { margin-top: var(--space-xs); }

/* The table fills the panel edge to edge, every edge a cut: Name, Date and
   Filled, 612px of it at up to 782px (its 11px heads read 14px), from a
   1836px file */
.cv-panel--hero { grid-column: 6 / -1; }

/* ---------- Q: the schedule file, then the importer's review ---------- */

.cv-csv { padding-top: var(--section-gap-s); }

.cv-file {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid var(--td-border-default);
  border-radius: var(--td-radius-lg);
  background: var(--td-card-bg);
}

.cv-file__name {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--td-border-default);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--td-text-primary);
}

.cv-file__scroll { overflow-x: auto; }

.cv-file table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.cv-file th,
.cv-file td {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--td-border-subtle);
}

.cv-file .num { text-align: right; }

.cv-file thead th {
  padding-block: var(--space-sm);
  font-weight: 400;
  color: var(--td-text-secondary);
}

.cv-file tbody th {
  font-weight: 600;
  color: var(--td-text-primary);
  background: var(--td-card-bg);
}

.cv-file td { color: var(--td-text-secondary); }
.cv-file tbody tr:last-child > * { border-bottom: 0; }

/* The importer's review: 672px of dialog at 786px (its 12px text reads 14px) */
.cv-window--csv {
  grid-column: 1 / span 7;
  max-width: 786px;
  margin-top: var(--space-2xl);
}

.cv-facts {
  grid-column: 9 / -1;
  align-self: center;
  margin-top: var(--space-2xl);
}

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

.cv-facts li:last-child { border-bottom: 1px solid var(--td-border-default); }

.cv-facts__lead {
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.cv-facts .cv-facts__lead { color: var(--td-text-primary); }

/* ---------- Q: where players find the program ---------- */

.cv-where { border-top: 1px solid var(--td-border-default); }

/* The program page and My Events, dealt and flattened into one 9:8 still.
   At 786px the board's 10px pill counts read 14px. */
.cv-shot {
  grid-column: 1 / span 7;
  aspect-ratio: 9 / 8;
}

.cv-shot img {
  height: 100%;
  object-fit: cover;
}

.cv-where .cv-answers {
  grid-column: 9 / -1;
  align-self: center;
}

/* ---------- Case ---------- */

.cv-case {
  padding-block: var(--section-gap-s);
  background: var(--td-surface-2);
}

.cv-case h2 { grid-column: 1 / span 7; }

.cv-case__statement {
  grid-column: 1 / span 10;
  margin-top: var(--space-lg);
  font-size: var(--text-section);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--td-text-primary);
  text-wrap: balance;
}

.cv-case__index {
  grid-column: 1 / -1;
  margin-top: var(--space-2xl);
  overflow-x: auto;
}

.cv-case__index table {
  width: 100%;
  border-collapse: collapse;
}

.cv-case__index th,
.cv-case__index td {
  padding: var(--space-md) var(--space-lg) var(--space-md) 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--td-border-default);
}

.cv-case__index thead th {
  padding-block: 0 var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--td-text-secondary);
}

.cv-case__index tbody th {
  font-size: var(--text-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--td-text-primary);
}

/* Each named con opens its public page: a quiet underline that firms on hover */
.cv-case__index tbody th a {
  text-decoration: underline;
  text-decoration-color: var(--td-border-emphasis);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--td-duration-fast) var(--td-ease-out);
}

.cv-case__index tbody th a:hover {
  text-decoration-color: currentColor;
}

.cv-case__index td { color: var(--td-text-secondary); }

.cv-case__index .num {
  text-align: right;
  padding-right: 0;
  padding-left: var(--space-lg);
  white-space: nowrap;
}

.cv-case__index td.num {
  font-variant-numeric: tabular-nums;
  color: var(--td-text-primary);
}

/* A cell in words keeps Inter's own hyphen (tabular figures widen it) */
.cv-case__index td.num--words { font-variant-numeric: normal; }

.cv-case__more {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-2xl);
  margin-top: var(--space-lg);
  color: var(--td-text-secondary);
}

/* ---------- Q: staff ---------- */

.cv-staff { padding-block: var(--section-gap-l); }

/* The question stays in view while the rows and the dialog pass under it */
.cv-staff__head {
  grid-column: 1 / span 4;
  align-self: start;
  position: sticky;
  top: calc(var(--cv-nav) + var(--space-xl));
  display: grid;
  justify-items: start;
  gap: var(--space-md);
}

.cv-staff__body {
  grid-column: 6 / -1;
  display: grid;
  gap: var(--space-2xl);
}

.cv-rows { display: grid; }

/* Each row: the icon in its own column, the head and its line beside it */
.cv-rows li {
  display: grid;
  grid-template-columns: var(--space-lg) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--td-border-default);
}

.cv-rows li:last-child { border-bottom: 1px solid var(--td-border-default); }

.cv-rows .fa-solid {
  grid-row: 1;
  font-size: var(--text-md);
  text-align: center;
}

.cv-rows h3 {
  grid-column: 2;
  font-size: var(--text-lg);
  line-height: 1.35;
}

.cv-rows p {
  grid-column: 2;
  color: var(--td-text-secondary);
  line-height: 1.6;
}

/* The staff dialog: 672px at the body's 786px (its 12px text reads 14px) */
.cv-window--staff { max-width: 786px; }

/* ---------- Q: who came ---------- */

/* Analytics' filters and four counts: a cut of the workspace canvas, the
   page's own, at up to 1370px from a 3387px file (11px labels read 13px+) */
.cv-slice--analytics {
  --fade-left: 1.5%;
  --fade-right: 1.5%;
  --fade-bottom: 6%;
  grid-column: 1 / -1;
}

/* The Players tab: its table edge to edge in a panel; 794px at 1019px, so
   the 11px heads read 14px */
.cv-panel--players {
  grid-column: 1 / span 9;
  align-self: center;
  margin-top: var(--space-2xl);
}

.cv-answers--people {
  grid-column: 10 / -1;
  align-self: center;
  margin-top: var(--space-2xl);
}

/* ---------- What else: one ruled list, three columns, name and line ---------- */

/* The widest gap on the page, split by a hairline seam: the staff rows above
   and this list must not share a screen (DESIGN.md rule 3) */
.cv-runs {
  padding-block: calc(var(--section-gap-l) + var(--space-2xl)) var(--section-gap);
  border-top: 1px solid var(--td-border-default);
}

.cv-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap-columns);
}

.cv-list__row {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--td-border-default);
}

.cv-list__row:nth-last-child(-n + 3) { border-bottom: 1px solid var(--td-border-default); }

.cv-list dt {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--td-text-primary);
}

.cv-list dd {
  color: var(--td-text-secondary);
  text-wrap: pretty;
}

/* ---------- Close ---------- */

/* The close is a band: the page ends on its job */
.cv-close {
  padding-block: var(--section-gap-s);
  background: var(--td-surface-2);
}

.cv-close__main {
  grid-column: 1 / span 7;
  display: grid;
  justify-items: start;
  gap: var(--space-md);
}

.cv-close__main .cv-actions { margin-top: var(--space-lg); }

/* The big-show line beside the trial, on its own hairline, level with the
   actions */
.cv-close__side {
  grid-column: 9 / -1;
  align-self: end;
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--td-border-default);
}

.cv-close__side p {
  color: var(--td-text-secondary);
  text-wrap: balance;
}

.cv-mail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  color: var(--td-text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--td-border-emphasis);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--td-duration-fast) var(--td-ease-out);
}

.cv-mail:hover { text-decoration-color: var(--td-accent); }
.cv-mail:active { color: var(--td-text-secondary); }

/* ---------- Under 75rem the captures take the full row ----------
   A dialog or the dealt pair in seven columns would show under its own
   size; stacked, each keeps its 786px (or the row) and its 13px text. */

@media (max-width: 75rem) {
  .cv-window--csv,
  .cv-facts,
  .cv-shot,
  .cv-where .cv-answers,
  .cv-staff__head,
  .cv-staff__body,
  .cv-panel--players,
  .cv-answers--people { grid-column: 1 / -1; }

  .cv-shot { max-width: 786px; }
  .cv-facts,
  .cv-where .cv-answers,
  .cv-answers--people { max-width: 52ch; }
  .cv-where .cv-answers { margin-top: var(--space-2xl); }

  .cv-staff__head { position: static; margin-bottom: var(--space-xl); }
}

/* ---------- Under 60rem every split stacks ---------- */

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

  .cv-head,
  .cv-hero__text,
  .cv-panel--hero,
  .cv-case h2,
  .cv-case__statement,
  .cv-close__main,
  .cv-close__side { grid-column: 1 / -1; }

  .cv-hero .cv-grid { row-gap: var(--space-2xl); }
  .cv-panel--hero { max-width: 40rem; }

  .cv-close__side { margin-top: var(--space-2xl); }

  .cv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-list__row:nth-last-child(-n + 3) { border-bottom: 0; }
  .cv-list__row:nth-last-child(-n + 2) { border-bottom: 1px solid var(--td-border-default); }


}

@media (max-width: 40rem) {
  /* Phone crops arrive through <picture>, made narrow enough that their 12px
     text reads 13px at this width */
  .cv-panel--hero { padding: var(--space-md) var(--space-md) 0; }

  .cv-shot { aspect-ratio: 6 / 7; }

  .cv-window--csv,
  .cv-window--staff,
  .cv-panel--players { max-width: 22rem; }

  /* The review's phone crop is cut under its first rows */
  .cv-window--csv { --fade-bottom: 16%; }

  .cv-slice--analytics {
    --fade-left: 0%;
    --fade-right: 0%;
    --fade-bottom: 12%;
    max-width: 22rem;
  }

  /* The case statement a step under its head on a phone */
  .cv-case__statement { font-size: var(--text-title); line-height: 1.25; }

  .cv-list { grid-template-columns: minmax(0, 1fr); }
  .cv-list__row:nth-last-child(-n + 2) { border-bottom: 0; }
  .cv-list__row:last-child { border-bottom: 1px solid var(--td-border-default); }

  .cv-file tbody th { position: sticky; left: 0; }
  .cv-file th, .cv-file td { padding-inline: var(--space-md); }


  /* The convention index restacks: one block per convention, its figures labelled */
  .cv-case__index thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cv-case__index tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--td-border-default); }
  .cv-case__index th,
  .cv-case__index td { display: block; padding: 0; border: 0; }
  .cv-case__index tbody th { grid-column: 1 / -1; font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
  .cv-case__index td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-sm); color: var(--td-text-secondary); }
  .cv-case__index td:not(.num) { grid-column: 1 / -1; margin-bottom: var(--space-xs); }
  .cv-case__index td:not(.num)::before { display: none; }
  .cv-case__index .num { text-align: left; padding-left: 0; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .cv-link,
  .cv-mail { transition: none; }
}