/*
 * The home page on Last Table. Loads after /site.css and the two /last-table/ files, and reads only --lt-* tokens.
 * The tool cards, search input, details blocks, reserve block, bill, hero sky and scroll reveal are the shared lt-
 * components; this file only fits them into the page shell and adds what the home page has of its own: the compact
 * tool list with its search, its most-used cards and its closed job groups.
 * The shell (rail, top bar, side panel, status bar) still uses the /site.css names, so this page points those names at
 * Last Table values instead of keeping a second palette.
 */

/* Home page tokens. The terminal on the right half keeps fixed carbon inks in light and dark, so they are not themed. */
:root {
  --home-term-bg: #141413;
  --home-term-code-bg: #111110;
  --home-term-raised: #1a1a18;
  --home-term-rule: #2a2a26;
  --home-term-edge: #3a3a35;
  --home-term-ink: #d8d6ce;
  --home-term-ink-strong: #f4f2ec;
  --home-term-ink-body: #ecebe6;
  --home-term-ink-row: #c9c7bf;
  --home-term-ink-dim: #9e9c94;
  --home-term-prompt: #d9ff5b;
  --home-size-display: clamp(2.25rem, 1.2rem + 3.6vw, 3.875rem);
}

.lt-page {
  --bg: var(--lt-surface-1);
  --fg: var(--lt-text-1);
  --muted: var(--lt-text-2);
  --line: var(--lt-line);
  --code: var(--lt-surface-3);
  --accent: var(--lt-teal);
  --accent-hover: var(--lt-teal);
  --rail-bg: var(--lt-surface-2);
  --panel-bg: var(--lt-surface-2);
  --card-bg: var(--lt-surface-2);
  --badge-bg: var(--lt-teal-wash);
  --badge-fg: var(--lt-teal);
  font-family: var(--lt-font-ui);
}
.lt-page .rail-brand,
.lt-page .rail-item[data-active="true"] { color: var(--lt-glow-ink); }
.lt-page code,
.lt-page pre { font-family: var(--lt-font-mono); }
.lt-page .layout-main h1,
.lt-page .layout-main h2,
.lt-page .layout-main h3 {
  font-family: var(--lt-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: var(--lt-leading-tight);
}
.lt-page .layout-main h2 { font-size: var(--lt-step-3); margin: 0 0 var(--lt-space-3); }
.lt-page .lede,
.connect > p,
.tools > p,
.showcase > p:first-of-type,
.paid > p { color: var(--lt-text-2); }
.connect,
.tools,
.showcase,
.paid,
.proof,
.for-agents { margin: 0 0 var(--lt-space-7); }

/* The home column runs wider than a reading page: the bench and the tool grid need two real halves. Prose inside it
   keeps its own 54ch measure from /site.css. */
[data-route="home"] .layout-main { max-width: 68rem; }

/* The hero: a flat paper stage. A mono eyebrow, a heavy headline whose turning words switch to the serif in the accent
   ink, then the bench: the install steps on the left, a real answer printed as a dark terminal on the right. */
.hero.lt-hero {
  margin: 0 0 var(--lt-space-8);
  padding: var(--lt-space-6) 0 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.hero .lf-eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lt-space-2);
  margin: 0 0 var(--lt-space-4);
  padding: var(--lt-space-1) var(--lt-space-3);
  border-radius: var(--lt-radius-chip);
  background: var(--lt-surface-3);
  color: var(--lt-text-2);
  font: 600 var(--lt-step--1) / 1.4 var(--lt-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lf-live { width: 6px; height: 6px; border-radius: 50%; background: var(--lt-success); }
.lf-eyebrow-facts { color: var(--lt-text-3); }
.hero .lt-display {
  max-width: 18ch;
  margin: 0 0 var(--lt-space-4);
  font-family: var(--lt-font-ui);
  font-size: var(--home-size-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.03;
}
.hero .lt-display em { font-family: var(--lt-font-serif); font-style: italic; font-weight: 600; letter-spacing: -0.02em; color: var(--lt-glow-ink); }
.hero .lt-lede { max-width: 38rem; margin: 0 0 var(--lt-space-6); font-size: var(--lt-step-1); line-height: 1.55; }

/* The bench: one ink-ruled box, two halves. */
.lf-bench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-2);
  overflow: hidden;
}
.lf-banner {
  margin: 0 0 var(--lt-space-4);
  padding: var(--lt-space-3) var(--lt-space-4);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-2);
  color: var(--lt-text-2);
}
.lf-banner strong { color: var(--lt-text-1); }
.lf-install { display: flex; flex-direction: column; gap: var(--lt-space-3); min-width: 0; margin: 0; padding: var(--lt-space-5); border-right: 1px solid var(--lt-line); }
.lf-step { margin: 0; color: var(--lt-text-2); font: 600 var(--lt-step--1) / 1.4 var(--lt-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.lf-step span { color: var(--lt-glow-ink); }
.lf-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lt-space-2) var(--lt-space-4); margin: auto 0 0; padding-top: var(--lt-space-3); border-top: 1px solid var(--lt-line); }
.lf-alt { color: var(--lt-text-2); font-size: var(--lt-step--1); }
/* The clients as one segmented control on a stone tray. */
.lf-clients { display: flex; flex-wrap: wrap; gap: var(--lt-space-1); padding: var(--lt-space-1); border-radius: var(--lt-radius-control); background: var(--lt-surface-3); font: 500 var(--lt-step--1) / 1.4 var(--lt-font-mono); }
.lf-works { display: none; }
.lf-clients input { position: absolute; margin: 0; opacity: 0; pointer-events: none; }
.lf-clients label { padding: var(--lt-space-2) var(--lt-space-3); border-radius: var(--lt-radius-chip); color: var(--lt-text-2); cursor: pointer; }
.lf-clients label:hover { color: var(--lt-text-1); }
.lf-clients input:checked + label { background: var(--lt-text-1); color: var(--lt-surface-1); }
.lf-clients input:focus-visible + label { outline: 2px solid var(--lt-glow-fill); outline-offset: 2px; }
/* Each client's step shows by CSS alone, so a visitor with no script still picks a client and reads it. */
.lf-panel { display: none; }
.lf-install:has(#lf-c-claude-code:checked) .lf-panel[data-client="claude-code"],
.lf-install:has(#lf-c-cursor:checked) .lf-panel[data-client="cursor"],
.lf-install:has(#lf-c-chatgpt:checked) .lf-panel[data-client="chatgpt"],
.lf-install:has(#lf-c-claude:checked) .lf-panel[data-client="claude"],
.lf-install:has(#lf-c-n8n:checked) .lf-panel[data-client="n8n"] { display: block; }
/* The command sits in a carbon box; Copy drops under it when the command is wider than the box, so it stays whole. */
.lf-code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lt-space-3); margin: 0 0 var(--lt-space-3); padding: var(--lt-space-3) var(--lt-space-4); border-radius: var(--lt-radius-control); background: var(--home-term-code-bg); }
.lf-panel pre { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; background: none; overflow-x: auto; color: var(--home-term-prompt); font: var(--lt-step--1) / 1.6 var(--lt-font-mono); }
.lf-panel pre code { padding: 0; background: none; color: inherit; font: inherit; }
.lf-code .copy-btn { flex: none; min-height: 30px; border-color: var(--home-term-edge); background: var(--home-term-raised); color: var(--home-term-ink-strong); font-family: var(--lt-font-mono); }
.lf-code .copy-btn:hover { border-color: var(--home-term-prompt); background: var(--home-term-raised); color: var(--home-term-prompt); }
.lf-panel p { margin: 0; color: var(--lt-text-2); font-size: var(--lt-step--1); }
.lf-panel p code { background: var(--lt-surface-3); color: var(--lt-text-1); }
.lf-more { margin: var(--lt-space-5) 0 0; color: var(--lt-text-2); font-size: var(--lt-step--1); }

/* The real answer, printed as a terminal: the ask as the prompt line, the rows as output, the source as the footer.
   The carbon and its inks are fixed, not themed, so the right half reads the same in light and dark. */
.hero .answer-card { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: var(--lt-space-5); border: 0; border-radius: 0; background: var(--home-term-bg); color: var(--home-term-ink); font: var(--lt-step--1) / 1.6 var(--lt-font-mono); }
.hero .answer-ask { margin: 0 0 var(--lt-space-4); padding: 0 0 var(--lt-space-3); background: none; border-bottom: 1px solid var(--home-term-rule); color: var(--home-term-ink-strong); font: inherit; }
.hero .answer-ask code { padding: 0; background: none; color: var(--home-term-prompt); font: inherit; overflow-wrap: anywhere; }
.hero .answer-who { color: var(--home-term-ink-dim); font: 600 var(--lt-step--2) / 1.4 var(--lt-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.hero .answer-body { display: flex; flex-direction: column; flex: 1; padding: 0; }
.hero .answer-body > p { margin: 0 0 var(--lt-space-3); color: var(--home-term-ink-body); }
.hero .answer-body > p.answer-who { margin: 0 0 var(--lt-space-2); }
.hero .answer-rows { margin: 0 0 var(--lt-space-4); padding: 0; list-style: none; }
.hero .answer-rows li { max-width: none; padding: var(--lt-space-2) 0; border-top: 1px solid var(--home-term-rule); color: var(--home-term-ink-row); }
.hero .answer-rows strong { color: var(--home-term-ink-strong); }
.hero .answer-date { color: var(--home-term-ink-dim); font: inherit; }
.hero .answer-body .answer-source { margin: auto 0 0; padding-top: var(--lt-space-3); border-top: 1px solid var(--home-term-rule); color: var(--home-term-ink-dim); font-size: var(--lt-step--2); }
.hero .answer-source a { color: var(--home-term-ink-strong); }

/* Connect */
.connect-box {
  gap: var(--lt-space-2);
  padding: var(--lt-space-2) var(--lt-space-2) var(--lt-space-2) var(--lt-space-4);
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-radius-card);
  background: var(--lt-surface-2);
}
.connect-url { font-family: var(--lt-font-mono); color: var(--lt-text-1); }
.connect-steps { color: var(--lt-text-2); }
.connect-steps strong { color: var(--lt-text-1); }

/* Copy buttons. home.js adds lt-burst, the shared burst of light when an address lands on the clipboard. */
.copy-btn {
  position: relative;
  min-height: 36px;
  padding: 0 var(--lt-space-3);
  border: 1px solid var(--lt-line-strong);
  border-radius: var(--lt-radius-control);
  background: var(--lt-surface-1);
  color: var(--lt-text-1);
  font: 600 var(--lt-step--1) / 1 var(--lt-font-ui);
  cursor: pointer;
  transition: background var(--lt-dur-fast) var(--lt-ease), border-color var(--lt-dur-fast) var(--lt-ease);
}
.copy-btn.lt-burst { overflow: visible; }
.copy-btn:hover { background: var(--lt-surface-3); border-color: var(--lt-line-strong); }
.copy-btn[data-copied] { border-color: var(--lt-glow-ink); color: var(--lt-glow-ink); background: var(--lt-glow-wash); }
/* Find a tool: a search box, then every tool in a closed group. */
.tools > p { margin: 0 0 var(--lt-space-4); }
.tool-search { margin: 0 0 var(--lt-space-4); }
.tool-search[hidden] { display: none; }
.tool-search .lt-input { width: 100%; max-width: 36rem; }
.tool-search-status { margin: var(--lt-space-2) 0 0; color: var(--lt-text-2); font-size: var(--lt-step--1); }
.tool-search-status:empty { display: none; }

/* Made with Live Card: 4 gallery cards in a row, each a 3:4 still with its loop, linking to the gallery. */
.showcase-grid { display: grid; gap: var(--lt-space-3); grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--lt-space-4) 0; }
.showcase-card { display: block; border: 1px solid var(--lt-line); border-radius: var(--lt-radius-card); overflow: hidden; }
.showcase-card:hover { border-color: var(--lt-line-strong); }
/* The still and the loop share one 3:4 cell (grid stacking), so a card is one frame tall whichever has loaded. The loop
   stays clear until home.js marks its first frame playing, so the still never flashes to black under it. */
.showcase-media { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); aspect-ratio: 3 / 4; overflow: clip; background: var(--lt-surface-2); }
.showcase-media > * { grid-area: 1 / 1; }
.showcase-media img,
.showcase-media video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.showcase-media video { opacity: 0; }
.showcase-media.is-playing video { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .showcase-media video { transition: opacity var(--lt-dur-slow) var(--lt-ease); }
}

/* Every tool, by job: one summary row per group, two to a line on a wide screen; an open group takes the full line. */
.tool-groups > h3 {
  margin: 0 0 var(--lt-space-3);
  color: var(--lt-text-3);
  font-family: var(--lt-font-ui);
  font-size: var(--lt-step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tool-groups { display: grid; gap: var(--lt-space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.tool-groups > h3 { grid-column: 1 / -1; }
.lt-page .tool-group { margin: 0; padding: 0; }
.tool-group[open] { grid-column: 1 / -1; }
.tool-group[hidden] { display: none; }
.tool-group > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--lt-space-3);
  align-items: baseline;
  padding: var(--lt-space-2) var(--lt-space-4);
  list-style: none;
}
.tool-group > summary::-webkit-details-marker { display: none; }
.tool-group > summary:hover .group-name { color: var(--lt-teal); }
.group-name { font-weight: 600; }
.group-count { color: var(--lt-text-3); font-size: var(--lt-step--1); font-weight: 500; }
.group-count::after { content: " +"; }
.tool-group[open] .group-count::after { content: " \2212"; }
/* The tool names in the group, on one line under its name, so a closed row still says what it holds. */
.tool-group > summary::after {
  content: attr(data-peek);
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--lt-text-2);
  font-size: var(--lt-step--1);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-group[open] > summary::after { display: none; }
.lt-page .tool-group .group-note { margin: 0; padding: 0 var(--lt-space-4) var(--lt-space-2); color: var(--lt-text-2); font-size: var(--lt-step--1); }
.lt-page .tool-group > .tool-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--lt-space-5);
  padding: 0 var(--lt-space-4) var(--lt-space-2);
}

/* One row per tool: name and short line, then its actions. */
.tool-card.tool-row {
  display: grid;
  gap: 0;
  padding: var(--lt-space-3) 0;
  border: 0;
  border-top: 1px solid var(--lt-line);
  border-radius: 0;
  background: none;
}
.tool-row[hidden] { display: none; }
.lt-page .tool-row-name { margin: 0; font-size: var(--lt-step-0); font-weight: 600; }
.lt-page .tool-row p { margin: 0; font-size: var(--lt-step--1); line-height: 1.5; }
.tool-row-line { color: var(--lt-text-2); }
.lt-page .tool-row .tool-actions { margin: 0; padding-top: var(--lt-space-1); }
.tool-row .copy-btn { min-height: 28px; padding: 0 var(--lt-space-2); }
.tool-card:target { box-shadow: inset 3px 0 0 var(--lt-glow-ink); padding-left: var(--lt-space-3); }
.tool-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--lt-space-1) var(--lt-space-4); padding-top: var(--lt-space-2); font-size: var(--lt-step--1); }

/* The paid service as one ruled line, the same single line a free tool page carries. */
.paid { padding: var(--lt-space-4) 0; border-top: 1px solid var(--lt-line); border-bottom: 1px solid var(--lt-line); }
.paid .paid-line { display: block; margin: 0; color: var(--lt-text-2); }
.paid-line a { font-weight: 600; }

/* The numbers: four instrument readouts in one ink-ruled strip. */
.proof-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lt-line-strong); }
.proof-list li { display: flex; flex-direction: column; gap: var(--lt-space-1); max-width: none; margin: 0; padding: var(--lt-space-4) var(--lt-space-4) var(--lt-space-4) 0; border: 0; color: var(--lt-text-2); font: 600 var(--lt-step--1) / 1.4 var(--lt-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.proof-list strong { color: var(--lt-text-1); font-family: var(--lt-font-mono); font-weight: 600; font-size: var(--lt-step-5); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 1; text-transform: none; }
.proof .proof-note { margin: var(--lt-space-2) 0 0; color: var(--lt-text-2); font-size: var(--lt-step--1); }
.proof .proof-stat { margin: var(--lt-space-4) 0 0; max-width: 44rem; color: var(--lt-text-1); }
.connect-guides { margin: var(--lt-space-3) 0 0; color: var(--lt-text-2); font-size: var(--lt-step--1); }
.agent-strip { margin: 0; color: var(--lt-text-2); font: var(--lt-step--1) / 1.6 var(--lt-font-mono); }
.tries,
.for-agents { margin: 0 0 var(--lt-space-8); }
.try-lede,
.tools-lede { margin: 0 0 var(--lt-space-5); color: var(--lt-text-2); }


.lt-page details { border-color: var(--lt-line); border-radius: var(--lt-radius-card); background: var(--lt-surface-2); }
.lt-page .note-card { border-color: var(--lt-line); border-radius: var(--lt-radius-card); }

@media (max-width: 720px) {
  .hero.lt-hero { padding-top: var(--lt-space-4); margin-bottom: var(--lt-space-7); }
  /* The facts would wrap the label to 2 lines on a phone, and the lede already says no key. */
  .lf-eyebrow-facts { display: none; }
  .hero .lt-lede { font-size: var(--lt-step-0); }
  .lf-bench { grid-template-columns: minmax(0, 1fr); }
  .lf-install { padding: var(--lt-space-4); border-right: 0; border-bottom: 1px solid var(--lt-line); }
  .hero .answer-card { padding: var(--lt-space-4); }
  /* The client row stays one line on a phone and scrolls sideways if it does not fit, so no client sits alone. */
  .lf-clients { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
  .lf-clients label { flex: none; }
  .proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-groups,
  .lt-page .tool-group > .tool-rows { grid-template-columns: 1fr; }
}