/*
 * 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.
 */

/* 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; }

/* Buttons: one primary per page. The primary glows; everything else is quiet. */
.lt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lt-space-2);
  min-height: 44px;
  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);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--lt-dur-fast) var(--lt-ease), box-shadow var(--lt-dur-base) var(--lt-ease), transform var(--lt-dur-fast) var(--lt-ease);
}
.lt-page a.lt-btn { color: var(--lt-text-1); }
.lt-btn:hover { background: var(--lt-surface-3); }
.lt-btn:active { transform: translateY(1px); }
.lt-btn-primary,
.lt-page a.lt-btn-primary {
  background: var(--lt-glow-fill);
  border-color: var(--lt-glow-fill);
  color: var(--lt-on-glow);
  box-shadow: 0 0 0 0 var(--lt-glow-halo);
}
.lt-btn-primary:hover { background: var(--lt-glow-fill); box-shadow: 0 0 24px 2px var(--lt-glow-halo); }

/* The glow itself, for anything that changed or needs the person. */
.lt-glow {
  box-shadow: 0 0 0 1px var(--lt-glow-ink), 0 0 20px 0 var(--lt-glow-halo);
  background: var(--lt-glow-wash);
}

/* Status chip */
.lt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--lt-space-2);
  padding: 2px var(--lt-space-3);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-control);
  background: var(--lt-surface-2);
  color: var(--lt-text-2);
  font: 600 var(--lt-step--1) / 1.6 var(--lt-font-ui);
  white-space: nowrap;
}
.lt-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.lt-chip[data-tone="ok"] { color: var(--lt-success); background: var(--lt-success-wash); border-color: transparent; }
.lt-chip[data-tone="warn"] { color: var(--lt-warning); background: var(--lt-warning-wash); border-color: transparent; }
.lt-chip[data-tone="danger"] { color: var(--lt-danger); background: var(--lt-danger-wash); border-color: transparent; }
.lt-chip[data-tone="attention"] {
  color: var(--lt-glow-ink);
  background: var(--lt-glow-wash);
  border-color: var(--lt-glow-ink);
  box-shadow: 0 0 14px 0 var(--lt-glow-halo);
}

/* Card */
.lt-card {
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  padding: var(--lt-space-5);
  box-shadow: var(--lt-shadow-1);
}

/* 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="page"] { 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); }

/* Answer first: the one input and the one result sit together above the fold. */
.lt-ask { margin-top: var(--lt-space-5); max-width: 44rem; }
.lt-prompt {
  display: flex;
  align-items: flex-start;
  gap: var(--lt-space-2);
  margin-top: var(--lt-space-2);
}
.lt-input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--lt-space-4);
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-radius-control);
  background: var(--lt-surface-2);
  color: var(--lt-text-1);
  font: var(--lt-step-0) / 1.4 var(--lt-font-ui);
  transition: border-color var(--lt-dur-fast) var(--lt-ease), box-shadow var(--lt-dur-base) var(--lt-ease);
}
textarea.lt-input {
  padding: var(--lt-space-3) var(--lt-space-4);
  resize: none;
  field-sizing: content;
}
.lt-input::placeholder { color: var(--lt-text-3); }
.lt-input:focus { outline: none; border-color: var(--lt-glow-ink); box-shadow: 0 0 0 3px var(--lt-glow-wash); }
.lt-prompt-hint { margin: var(--lt-space-2) 0 0; font-size: var(--lt-step--1); color: var(--lt-text-3); }
@media (max-width: 480px) {
  .lt-prompt { flex-direction: column; }
}

/* Result panel. A finished task plays one gentle burst of light, once. */
.lt-result {
  position: relative;
  margin-top: var(--lt-space-5);
  max-width: 44rem;
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  box-shadow: var(--lt-shadow-1);
  overflow: hidden;
}
.lt-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lt-space-3);
  padding: var(--lt-space-3) var(--lt-space-5);
  border-bottom: 1px solid var(--lt-line);
  background: var(--lt-surface-3);
}
.lt-result-body { padding: var(--lt-space-5); }
.lt-result-answer {
  margin: 0;
  font: 560 var(--lt-step-3) / var(--lt-leading-tight) var(--lt-font-display);
  color: var(--lt-text-1);
}
.lt-result-note { margin: var(--lt-space-3) 0 0; color: var(--lt-text-2); }
.lt-burst::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--lt-burst-x, 24px) var(--lt-burst-y, 24px), var(--lt-glow-halo), transparent 60%);
  opacity: 0;
}
.lt-burst[data-burst="on"]::after { animation: lt-burst var(--lt-dur-slow) var(--lt-ease) 1 both; }
@keyframes lt-burst {
  0% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) { .lt-burst[data-burst="on"]::after { animation: none; } }

/* 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); }

/* Sections and courses */
.lt-section { padding: var(--lt-space-8) 0 0; }
.lt-section-lede { margin: var(--lt-space-2) 0 var(--lt-space-5); color: var(--lt-text-2); max-width: var(--lt-measure); }
.lt-course + .lt-course { margin-top: var(--lt-space-7); }
.lt-course-head {
  display: flex;
  align-items: baseline;
  gap: var(--lt-space-3);
  margin-bottom: var(--lt-space-4);
  padding-bottom: var(--lt-space-2);
  border-bottom: 1px solid var(--lt-line);
}
.lt-grid {
  display: grid;
  gap: var(--lt-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* Tool card: poster first; a demo video plays on hover or when the card is in view, and pauses when it leaves. */
.lt-tool {
  display: flex;
  flex-direction: column;
  background: var(--lt-surface-2);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  overflow: hidden;
  transition: border-color var(--lt-dur-base) var(--lt-ease), box-shadow var(--lt-dur-base) var(--lt-ease), transform var(--lt-dur-base) var(--lt-ease);
}
.lt-tool:hover { border-color: var(--lt-line-strong); box-shadow: var(--lt-shadow-2); transform: translateY(-2px); }
.lt-tool-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--lt-surface-3);
  border-bottom: 1px solid var(--lt-line);
}
.lt-tool-media video,
.lt-tool-media img,
.lt-tool-media svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.lt-tool-body { display: flex; flex-direction: column; gap: var(--lt-space-2); padding: var(--lt-space-4) var(--lt-space-5) var(--lt-space-5); flex: 1; }
.lt-tool-name { margin: 0; font: 600 var(--lt-step-1) / 1.25 var(--lt-font-display); }
.lt-tool-name a { color: var(--lt-text-1); text-decoration: none; }
.lt-page .lt-tool-name a { color: var(--lt-text-1); }
.lt-tool-name a::after { content: ""; position: absolute; inset: 0; }
.lt-tool { position: relative; }
.lt-tool-ask { margin: 0; color: var(--lt-text-2); font-size: var(--lt-step--1); }
.lt-tool-meta { display: flex; flex-wrap: wrap; gap: var(--lt-space-2); margin-top: auto; padding-top: var(--lt-space-2); }

/* Featured tool of the day: the one card that may glow at rest. */
.lt-featured {
  display: grid;
  gap: var(--lt-space-5);
  padding: var(--lt-space-5);
  border: 1px solid var(--lt-glow-ink);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-2);
  box-shadow: 0 0 32px -8px var(--lt-glow-halo);
}
.lt-featured > * { min-width: 0; }
@media (min-width: 800px) { .lt-featured { grid-template-columns: 1.1fr 1fr; align-items: center; } }

/* Twin diff: the waiter repeats your order back. Left is what you asked, right is what was understood. Only the
   differences glow. */
.lt-twin {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-2);
  overflow: hidden;
}
@media (min-width: 720px) { .lt-twin { grid-template-columns: 1fr 1fr; } }
.lt-twin-side { padding: var(--lt-space-4) var(--lt-space-5); }
.lt-twin-side + .lt-twin-side { border-top: 1px solid var(--lt-line); }
@media (min-width: 720px) { .lt-twin-side + .lt-twin-side { border-top: 0; border-left: 1px solid var(--lt-line); } }
.lt-twin-list { list-style: none; margin: var(--lt-space-3) 0 0; padding: 0; display: grid; gap: var(--lt-space-2); }
.lt-twin-list li { padding: var(--lt-space-2) var(--lt-space-3); border-radius: var(--lt-radius-control); }
.lt-twin-list li[data-diff] {
  background: var(--lt-glow-wash);
  box-shadow: inset 3px 0 0 var(--lt-glow-ink), 0 0 18px -6px var(--lt-glow-halo);
}
.lt-twin-list li[data-diff]::after {
  content: attr(data-diff);
  display: block;
  font-size: var(--lt-step--1);
  font-weight: 600;
  color: var(--lt-glow-ink);
}

/* Code block with a copy button. Lines never wrap; the block scrolls sideways. */
.lt-code {
  position: relative;
  background: var(--lt-surface-3);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-control);
}
.lt-code pre {
  margin: 0;
  padding: var(--lt-space-4);
  padding-right: 88px;
  overflow-x: auto;
  font: var(--lt-step--1) / 1.6 var(--lt-font-mono);
  color: var(--lt-text-1);
  white-space: pre;
}
.lt-copy {
  position: absolute;
  top: var(--lt-space-2);
  right: var(--lt-space-2);
  min-height: 32px;
  padding: 0 var(--lt-space-3);
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-radius-control);
  background: var(--lt-surface-2);
  color: var(--lt-text-2);
  font: 600 var(--lt-step--1) / 1 var(--lt-font-ui);
  cursor: pointer;
}
.lt-copy:hover { color: var(--lt-text-1); }
.lt-copy[data-copied] { color: var(--lt-success); border-color: var(--lt-success); }

/* Tables scroll inside their own box on a phone. */
.lt-table-wrap { overflow-x: auto; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-card); background: var(--lt-surface-2); }
.lt-table { width: 100%; border-collapse: collapse; font-size: var(--lt-step--1); }
.lt-table th,
.lt-table td { padding: var(--lt-space-3) var(--lt-space-4); text-align: left; border-bottom: 1px solid var(--lt-line); white-space: nowrap; }
.lt-table th { font-weight: 600; color: var(--lt-text-3); background: var(--lt-surface-3); }
.lt-table tr:last-child td { border-bottom: 0; }
.lt-table td.lt-mono { font-family: var(--lt-font-mono); }
.lt-table td.lt-num { font-family: var(--lt-font-mono); text-align: right; }

/* Empty and error states: say what happened, then the one thing to do next. */
.lt-state {
  display: grid;
  justify-items: start;
  gap: var(--lt-space-2);
  padding: var(--lt-space-6) var(--lt-space-5);
  border: 1px dashed var(--lt-line-strong);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-2);
}
.lt-state-title { margin: 0; font: 600 var(--lt-step-1) / 1.3 var(--lt-font-display); }
.lt-state p { margin: 0; color: var(--lt-text-2); max-width: var(--lt-measure); }
.lt-state[data-kind="error"] { border-style: solid; border-color: var(--lt-danger); background: linear-gradient(var(--lt-danger-wash), var(--lt-danger-wash)), var(--lt-surface-2); }
.lt-state[data-kind="error"] .lt-state-title { color: var(--lt-danger); }

/* Reserve a table: the paid service, offered once, quietly. */
.lt-reserve {
  display: grid;
  gap: var(--lt-space-3);
  padding: var(--lt-space-6);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-3);
}
.lt-reserve > * { margin: 0; }

/* Agent-facing detail lives behind a link or a closed details block. */
.lt-details { border: 1px solid var(--lt-line); border-radius: var(--lt-radius-card); background: var(--lt-surface-2); }
.lt-details summary { cursor: pointer; padding: var(--lt-space-4) var(--lt-space-5); font-weight: 600; }
.lt-details > :not(summary) { margin: 0; padding: 0 var(--lt-space-5) var(--lt-space-5); }

/* 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); }

/* Scroll reveal: content rises a little as it enters. Without script, or with reduced motion, it is simply shown. */
.lt-js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--lt-dur-slow) var(--lt-ease), transform var(--lt-dur-slow) var(--lt-ease);
}
.lt-js [data-reveal][data-in] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lt-js [data-reveal] { opacity: 1; transform: none; }
}

.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; }

/* Style guide specimens: used by /design to show the tokens. A tool page does not need them. */
.lt-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lt-space-3); margin: 0 0 var(--lt-space-4); }
.lt-theme-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lt-space-2); margin: 0 0 var(--lt-space-5); }
.lt-theme-switch .lt-btn[aria-pressed="true"] { border-color: var(--lt-glow-ink); color: var(--lt-glow-ink); }
.lt-swatches { display: grid; gap: var(--lt-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.lt-swatch { display: flex; gap: var(--lt-space-3); align-items: center; margin: 0; padding: var(--lt-space-3); border: 1px solid var(--lt-line); border-radius: var(--lt-radius-card); background: var(--lt-surface-2); }
.lt-swatch-chip { flex: none; width: 48px; height: 48px; border-radius: var(--lt-radius-control); border: 1px solid var(--lt-line-strong); }
.lt-swatch figcaption { display: grid; font-size: var(--lt-step--1); line-height: 1.4; min-width: 0; }
.lt-swatch code { color: var(--lt-text-2); overflow-wrap: anywhere; }
.lt-type-row { display: grid; gap: var(--lt-space-1); margin: 0; padding-bottom: var(--lt-space-3); border-bottom: 1px solid var(--lt-line); overflow-wrap: anywhere; }
.lt-space-row { display: flex; align-items: center; gap: var(--lt-space-3); font-size: var(--lt-step--1); }
.lt-space-row code { width: 7.5em; color: var(--lt-text-2); }
.lt-space-bar { display: block; height: 12px; background: var(--lt-teal); border-radius: 2px; }
.lt-shape-demo, .lt-motion-demo { display: flex; flex-wrap: wrap; gap: var(--lt-space-3); }
.lt-shape-demo span { padding: var(--lt-space-4); background: var(--lt-surface-3); border: 1px solid var(--lt-line); font-size: var(--lt-step--1); }
.lt-motion-demo span {
  padding: var(--lt-space-3) var(--lt-space-4);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-control);
  background: var(--lt-surface-3);
  font: var(--lt-step--1) / 1 var(--lt-font-mono);
  transition-property: transform, background;
  transition-timing-function: var(--lt-ease);
}
.lt-motion-demo span:hover { transform: translateY(-6px); background: var(--lt-teal-wash); }