/*
 * Last Table components. Load after tokens.css. Every class starts with lt- so a page can adopt the system
 * without clashing with /site.css. Only .lt-glow, .lt-btn-primary, the attention chips and twin differences
 * use the brass glow: glow means attention.
 *
 * A reading page (a guide, a role page, an answer page) loads reading.css instead: this file without the blocks
 * between "tool pages only {" and "} tool pages only", which hold the parts only a tool page uses. npm run generate
 * writes it. A reading page on a slow phone then paints sooner, since it waits on less CSS. A rule that a reading page
 * needs stays outside those blocks.
 */

/* Base */
.lt-page {
  margin: 0;
  background: var(--lt-surface-1);
  color: var(--lt-text-1);
  font-family: var(--lt-font-ui);
  font-size: var(--lt-step-0);
  line-height: var(--lt-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.lt-page *,
.lt-page *::before,
.lt-page *::after { box-sizing: border-box; }
.lt-page a { color: var(--lt-teal); text-underline-offset: 3px; }
.lt-page a:hover { text-decoration-thickness: 2px; }
.lt-page :focus-visible {
  outline: 2px solid var(--lt-glow-ink);
  outline-offset: 2px;
  border-radius: var(--lt-radius-control);
}
.lt-wrap {
  width: 100%;
  max-width: var(--lt-page-max);
  margin: 0 auto;
  padding: 0 var(--lt-gutter);
}
@media (min-width: 720px) { .lt-wrap { padding: 0 var(--lt-space-6); } }

/* Type */
.lt-display,
.lt-h1,
.lt-h2,
.lt-h3 {
  font-family: var(--lt-font-display);
  font-weight: 560;
  line-height: var(--lt-leading-tight);
  letter-spacing: -0.01em;
  color: var(--lt-text-1);
  margin: 0;
  text-wrap: balance;
}
.lt-display { font-size: clamp(var(--lt-step-4), 6vw, var(--lt-step-6)); }
.lt-h1 { font-size: clamp(var(--lt-step-3), 4.5vw, var(--lt-step-5)); }
.lt-h2 { font-size: var(--lt-step-3); }
.lt-h3 { font-size: var(--lt-step-1); }
.lt-lede { font-size: var(--lt-step-1); color: var(--lt-text-2); max-width: var(--lt-measure); margin: var(--lt-space-4) 0 0; }
.lt-body { max-width: var(--lt-measure); }
.lt-muted { color: var(--lt-text-2); }
.lt-faint { color: var(--lt-text-3); }
.lt-label {
  font-size: var(--lt-step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lt-text-3);
}
.lt-mono, .lt-page code { font-family: var(--lt-font-mono); font-size: 0.92em; }


/* Header and nav. The bar never wraps: on a phone the least used links hide instead. */
.lt-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--lt-surface-1);
  border-bottom: 1px solid var(--lt-line);
}
.lt-header-bar {
  display: flex;
  align-items: center;
  gap: var(--lt-space-4);
  min-height: 60px;
  white-space: nowrap;
}
.lt-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--lt-space-2);
  font: 600 var(--lt-step-1) / 1 var(--lt-font-display);
  color: var(--lt-text-1);
  text-decoration: none;
}
.lt-page a.lt-brand { color: var(--lt-text-1); }
.lt-brand svg { color: var(--lt-glow-ink); flex: none; }
.lt-nav { display: flex; gap: var(--lt-space-1); margin-left: auto; }
/* Header and footer links stay at least 44 px tall so a thumb can hit them on a phone. */
.lt-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: var(--lt-space-2) var(--lt-space-3);
  border-radius: var(--lt-radius-control);
  color: var(--lt-text-2);
  text-decoration: none;
  font-weight: 500;
  transition: background var(--lt-dur-fast) var(--lt-ease), color var(--lt-dur-fast) var(--lt-ease);
}
.lt-page .lt-nav a { color: var(--lt-text-2); }
.lt-page .lt-nav a:hover { color: var(--lt-text-1); background: var(--lt-surface-3); }
.lt-page .lt-nav a[aria-current] { color: var(--lt-text-1); background: var(--lt-surface-3); }
@media (max-width: 600px) {
  .lt-nav [data-nav-rank="low"] { display: none; }
  .lt-header-bar { gap: var(--lt-space-2); }
  .lt-brand { font-size: var(--lt-step-0); }
  .lt-nav a { padding: var(--lt-space-2); }
}

/* Hero: the dome. Midnight in both themes, with the only ambient motion on the site: a slow drift of our star field. */
.lt-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--lt-space-8) 0 var(--lt-space-7);
  background:
    radial-gradient(ellipse 70% 60% at 85% 0%, var(--lt-teal-wash), transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 100%, var(--lt-glow-wash), transparent 70%),
    var(--lt-surface-1);
  color: var(--lt-text-1);
}
.lt-hero::before {
  content: "";
  position: absolute;
  inset: -480px 0 0 0;
  z-index: -1;
  background: url("/last-table/star-field.svg") repeat;
  opacity: 0.8;
  animation: lt-drift var(--lt-drift) linear infinite;
}
.lt-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60%;
  width: 160%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  z-index: -1;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 1px solid var(--lt-line-strong);
  opacity: 0.6;
}
@keyframes lt-drift { to { transform: translateY(480px); } }
@media (prefers-reduced-motion: reduce) { .lt-hero::before { animation: none; } }
.lt-hero .lt-lede { color: var(--lt-text-2); }
.lt-eyebrow { display: block; margin-bottom: var(--lt-space-3); color: var(--lt-glow-ink); }

/* The live sky: when the kit's star field runs in a hero, it replaces the drawn star field. */
.lt-hero[data-shader="live"]::before { display: none; }

/* Document hero: a reading page (guide, role, policy) opens with a short dome that holds the trail, the title and the lede. */
.lt-hero-doc { padding: var(--lt-space-7) 0 var(--lt-space-6); }
/* Its still sky is drawn in CSS from three star tiles of different sizes, so a reading page fetches no sky image and
   its first paint is not held back. With motion welcome, the live star field from sky.js replaces it after load. */
.lt-hero-doc::before {
  inset: 0;
  opacity: 0.75;
  animation: none;
  background:
    radial-gradient(1.2px 1.2px at 8% 18%, var(--lt-text-1), transparent),
    radial-gradient(1px 1px at 37% 64%, var(--lt-text-1), transparent),
    radial-gradient(1.4px 1.4px at 71% 31%, var(--lt-glow-fill), transparent),
    radial-gradient(1px 1px at 22% 86%, var(--lt-teal), transparent),
    radial-gradient(1px 1px at 58% 9%, var(--lt-text-1), transparent),
    radial-gradient(1.1px 1.1px at 88% 77%, var(--lt-text-1), transparent),
    radial-gradient(1px 1px at 47% 41%, var(--lt-text-2), transparent),
    radial-gradient(1.3px 1.3px at 93% 12%, var(--lt-text-1), transparent),
    radial-gradient(1px 1px at 15% 52%, var(--lt-text-2), transparent),
    radial-gradient(1px 1px at 66% 92%, var(--lt-teal), transparent);
  background-size: 280px 190px, 280px 190px, 280px 190px, 410px 260px, 410px 260px, 410px 260px, 530px 330px, 530px 330px, 530px 330px, 530px 330px;
}
.lt-hero-doc .lt-h1 { max-width: 24ch; }
/* On a phone the lede drops to body size, so the title and the first lines of the guide share the first screen. */
@media (max-width: 719px) { .lt-hero-doc .lt-lede { font-size: var(--lt-step-0); } }
/* A phone hero is tall and narrow, so the horizon set by the hero's height would cross the lede and the bill. On a
   reading page it sits in the bottom padding instead, under the last line of text. */
@media (max-width: 719px) { .lt-hero-doc::after { bottom: auto; top: calc(100% - var(--lt-space-5)); } }
.lt-crumbs { margin: 0 0 var(--lt-space-3); font-size: var(--lt-step--1); color: var(--lt-text-3); overflow-wrap: anywhere; }
.lt-page .lt-crumbs a { color: var(--lt-text-2); text-decoration: none; }
.lt-page .lt-crumbs a:hover { color: var(--lt-text-1); text-decoration: underline; }
.lt-doc-bill { max-width: 26rem; }


/* The bill: what a call cost, in plain words. */
.lt-bill {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--lt-space-1) var(--lt-space-4);
  margin: var(--lt-space-4) 0 0;
  padding: var(--lt-space-3) 0 0;
  border-top: 1px dashed var(--lt-line-strong);
  font-size: var(--lt-step--1);
  color: var(--lt-text-2);
}
.lt-bill dt { margin: 0; }
.lt-bill dd { margin: 0; text-align: right; font-family: var(--lt-font-mono); color: var(--lt-text-1); }


/* Prose: the body of a reading page, written as plain HTML (headings, paragraphs, lists, code, tables, FAQ details). */
.lt-prose { max-width: var(--lt-measure); padding-top: var(--lt-space-7); overflow-wrap: break-word; }
.lt-prose > :first-child { margin-top: 0; }
.lt-prose h2 {
  margin: var(--lt-space-7) 0 var(--lt-space-3);
  font: 560 var(--lt-step-3) / var(--lt-leading-tight) var(--lt-font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.lt-prose h3 { margin: var(--lt-space-6) 0 var(--lt-space-2); font: 600 var(--lt-step-1) / 1.3 var(--lt-font-display); text-wrap: balance; }
.lt-prose h4 { margin: var(--lt-space-5) 0 var(--lt-space-2); font-size: var(--lt-step-0); }
.lt-prose p,
.lt-prose ul,
.lt-prose ol { margin: 0 0 var(--lt-space-4); }
.lt-prose ul,
.lt-prose ol { padding-left: var(--lt-space-5); }
.lt-prose li + li { margin-top: var(--lt-space-2); }
.lt-prose li::marker { color: var(--lt-text-3); }
.lt-prose :not(pre) > code {
  padding: 1px var(--lt-space-1);
  border-radius: var(--lt-radius-control);
  background: var(--lt-surface-3);
  overflow-wrap: anywhere;
}
.lt-prose pre {
  margin: 0 0 var(--lt-space-4);
  padding: var(--lt-space-4);
  overflow-x: auto;
  background: var(--lt-surface-3);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-control);
  font: var(--lt-step--1) / 1.6 var(--lt-font-mono);
  white-space: pre;
}
.lt-prose pre code { font-size: inherit; }
.lt-prose table {
  display: block;
  /* The box hugs its rows, so a narrow table has no empty band inside its border; a wide one stops at the column. */
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 var(--lt-space-4);
  border-collapse: collapse;
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-2);
  font-size: var(--lt-step--1);
}
/* A wide table scrolls in its own box instead of squeezing every column into the reading width, so a date or a short
   name stays on one line and a long cell wraps at a readable width. */
.lt-prose th,
.lt-prose td { min-width: 12ch; padding: var(--lt-space-2) var(--lt-space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--lt-line); }
.lt-prose th { font-weight: 600; color: var(--lt-text-3); background: var(--lt-surface-3); white-space: nowrap; }
.lt-prose tr:last-child td { border-bottom: 0; }
.lt-prose details {
  margin: 0 0 var(--lt-space-3);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-2);
}
.lt-prose summary { cursor: pointer; padding: var(--lt-space-3) var(--lt-space-4); font-weight: 600; }
.lt-prose details > :not(summary) { margin: 0; padding: 0 var(--lt-space-4) var(--lt-space-4); }
.lt-prose aside { margin: var(--lt-space-6) 0; padding: var(--lt-space-4) var(--lt-space-5); border: 1px solid var(--lt-line); border-radius: var(--lt-radius-card); background: var(--lt-surface-2); }
.lt-prose blockquote { margin: 0 0 var(--lt-space-4); padding-left: var(--lt-space-4); border-left: 2px solid var(--lt-line-strong); color: var(--lt-text-2); }
.lt-prose .meta { margin-top: var(--lt-space-6); font-size: var(--lt-step--1); color: var(--lt-text-3); }
/* A date never breaks at its hyphens on a phone. */
.lt-prose .meta time { white-space: nowrap; }
/* A form in the body (the Match Desk age gate): quiet buttons in the button shape, without the tool-page button rules. */
.lt-prose button {
  min-height: 44px;
  margin: 0 var(--lt-space-2) var(--lt-space-2) 0;
  padding: 0 var(--lt-space-5);
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-radius-control);
  background: var(--lt-surface-2);
  color: var(--lt-text-1);
  font: 600 var(--lt-step-0) / 1 var(--lt-font-ui);
  cursor: pointer;
}
.lt-prose button:hover { background: var(--lt-surface-3); }

/* Footer: links, then exactly one ad line for the paid service. */
.lt-footer {
  margin-top: var(--lt-space-9);
  padding: var(--lt-space-6) 0 var(--lt-space-7);
  border-top: 1px solid var(--lt-line);
  color: var(--lt-text-3);
  font-size: var(--lt-step--1);
}
.lt-footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--lt-space-4); }
.lt-footer-links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.lt-page .lt-footer-links a { color: var(--lt-text-2); text-decoration: none; }
.lt-page .lt-footer-links a:hover { color: var(--lt-text-1); text-decoration: underline; }
.lt-ad { margin: var(--lt-space-4) 0 0; color: var(--lt-text-2); }


.lt-stack > * + * { margin-top: var(--lt-space-4); }
.lt-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }