/* ─────────────────────────────────────────────────────────────────────────
   legal-shell.css — terminal-style layout for the public About / Changelog /
   Privacy / Terms pages. Builds on the tokens and primitives in
   /public-shell.css. Legal documents use the `.ld-*` block at the bottom.
   ───────────────────────────────────────────────────────────────────────── */

.ls-main { padding-bottom: 32px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.ls-hero { padding: 64px 0 28px; }
.ls-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 40px;
  align-items: start;
}
.ls-h1 {
  margin: 14px 0 18px;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text);
}
.ls-lede {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-dim);
}
.ls-lede em { color: var(--text); font-style: normal; }
.ls-meta.tl-term { margin-top: 0; }
.ls-meta .tl-row, .ls-kv .tl-row, .cl-metrics .tl-row, .cl-summary .tl-row {
  display: grid;
  align-items: baseline;
}
.ls-meta .tl-row .v, .ls-kv .tl-row .v, .cl-metrics .tl-row .v, .cl-summary .tl-row .v { text-align: left; }
.ls-meta .tl-row { grid-template-columns: 112px 1fr; }

/* ── Sections ─────────────────────────────────────────────────────────── */
.ls-section { padding: 36px 0; border-top: 1px solid var(--line-soft); }
.ls-section:first-of-type { border-top: 0; }
.ls-num {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  vertical-align: 0.2em;
}
.ls-h2 {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--text);
}
.ls-section p {
  margin: 0 0 14px;
  max-width: 70ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dim);
}
.ls-section p em { color: var(--text); font-style: italic; }
.ls-section p a { color: var(--live); text-decoration: none; border-bottom: 1px solid var(--live-dim); }
.ls-section p a:hover { border-bottom-color: var(--live); }

/* prompt list: each item is a `>` line */
.ls-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; max-width: 70ch; }
.ls-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}
.ls-list li::before {
  content: ">";
  position: absolute; left: 0; top: 0;
  color: var(--live);
  font-weight: 600;
}
.ls-list--tick li::before { content: "✓"; }

/* two-column blocks */
.ls-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 36px;
  align-items: start;
}
.ls-grid--rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }

/* founder photo in a terminal frame */
.ls-photo { margin: 0; }
.ls-photo .tl-term-body { padding: 0; }
.ls-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.9);
}
.ls-photo figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--text-faint);
}
.ls-photo figcaption b { color: var(--text); font-weight: 600; }

/* mission statement — one step above body copy, not a second hero */
.ls-mission {
  margin: 6px 0 16px !important;
  max-width: 52ch !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text) !important;
}
.ls-mission .live { color: var(--live); }

/* callout: rendered as a `[note]` line in a panel */
.ls-callout .tl-term-body { font-size: 14px; line-height: 1.7; color: var(--text); }
.ls-callout .tag { color: var(--amber); margin-right: 8px; }

/* company key/value */
.ls-kv .tl-row { grid-template-columns: 180px 1fr; }
.ls-kv .tl-row .v { color: var(--text); }
.ls-kv time { color: inherit; }

/* ── Changelog ────────────────────────────────────────────────────────── */
.cl-list { display: grid; gap: 18px; padding: 8px 0 40px; }
.cl-entry {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cl-entry:first-child { border-color: var(--live-dim); }
.cl-entry:first-child .cl-hd::after {
  content: "latest";
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid var(--live-dim);
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--live);
}
.cl-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-raised);
  font-size: 12px;
  color: var(--text-faint);
  flex-wrap: wrap;
}
.cl-hd .ver { color: var(--live); font-weight: 600; }
.cl-hd .ver::before { content: "["; color: var(--text-faint); }
.cl-hd .ver::after { content: "]"; color: var(--text-faint); }
.cl-hd time { color: var(--text-faint); }
.cl-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 24px;
  padding: 18px 16px 18px;
}
.cl-title {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text);
}
.cl-desc { margin: 0 0 14px; font-size: 13.5px; line-height: 1.7; color: var(--text-dim); }
.cl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cl-items li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}
.cl-items li::before { content: "+"; position: absolute; left: 0; color: var(--live); font-weight: 700; }
.cl-metrics {
  align-self: start;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--bg);
  padding: 10px 12px;
  font-size: 12px;
}
.cl-metrics .lbl {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  color: var(--text-faint);
  text-transform: lowercase;
}
.cl-metrics .lbl .tl-dot { width: 6px; height: 6px; }
.cl-metrics .tl-row { grid-template-columns: 90px 1fr; padding: 3px 0; }
.cl-metrics .tl-row .v { color: var(--live); }
.cl-action {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  color: var(--live);
  text-decoration: none;
  font-size: 13px;
}
.cl-action::before { content: "$ "; color: var(--text-faint); }
.cl-summary .tl-row { grid-template-columns: 130px 1fr; }

/* ── Footer for legal pages (mirrors landing) ─────────────────────────── */
.ls-footer .tl-foot-legal { margin-top: 8px; }

/* ── Legal documents (Privacy / Terms) ────────────────────────────────── */
.ld-hero { padding-bottom: 8px; }
.ld-hero .ls-h1 { margin-bottom: 14px; }
.ld-hero .ls-lede { max-width: 78ch; }
.ld-hero .ls-lede strong { color: var(--text); font-weight: 600; }
.ld-meta.tl-term { margin-top: 22px; max-width: 520px; }
.ld-meta .tl-row { display: grid; grid-template-columns: 130px 1fr; align-items: baseline; }
.ld-meta .tl-row .v { text-align: left; }

/* table of contents: numbered prompt list */
.legal-toc {
  margin: 20px 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-panel);
  box-shadow: var(--shadow);
}
.legal-toc-title {
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.legal-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
}
.legal-toc-list li { counter-increment: toc; font-size: 12.5px; line-height: 1.6; }
.legal-toc-list li::before {
  content: counter(toc, decimal-leading-zero) " ";
  color: var(--text-faint);
  margin-right: 6px;
}
.legal-toc-list a { color: var(--text-dim); text-decoration: none; }
.legal-toc-list a:hover { color: var(--live); }

/* sections */
.legal-section { padding: 30px 0; border-top: 1px solid var(--line-soft); scroll-margin-top: 72px; }
.legal-section h2 {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--text);
}
.legal-section h3 {
  margin: 18px 0 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.legal-num {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  vertical-align: 0.15em;
}
.legal-section p, .legal-section li {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dim);
}
.legal-section p { margin: 0 0 12px; max-width: 78ch; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section strong { color: var(--text); font-weight: 600; }
.legal-section a { color: var(--live); text-decoration: none; border-bottom: 1px solid var(--live-dim); }
.legal-section a:hover { border-bottom-color: var(--live); }
.legal-section ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; max-width: 78ch; }
.legal-section ul li { position: relative; padding-left: 20px; }
.legal-section ul li::before {
  content: ">";
  position: absolute; left: 0; top: 0;
  color: var(--live);
  font-weight: 600;
}
.legal-section time { color: inherit; }

/* callout: `[note]` panel */
.legal-callout {
  position: relative;
  margin: 14px 0 0;
  padding: 12px 14px 12px 64px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-panel);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
}
.legal-callout::before {
  content: "[note]";
  position: absolute; left: 14px; top: 12px;
  color: var(--amber);
}

/* tables */
.legal-table {
  width: 100%;
  margin: 8px 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--bg-panel);
  font-size: 13px;
  line-height: 1.6;
}
.legal-table th, .legal-table td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px dashed var(--line-soft);
  color: var(--text-dim);
}
.legal-table th {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line-soft);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table td:first-child { color: var(--text); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ls-hero-grid, .ls-grid, .ls-grid--rev { grid-template-columns: 1fr; gap: 24px; }
  .cl-body { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ls-hero { padding: 40px 0 16px; }
  .ls-kv .tl-row, .ls-meta .tl-row, .ld-meta .tl-row { grid-template-columns: 1fr; gap: 2px; }
  .cl-metrics .tl-row { grid-template-columns: 1fr; }
  .legal-toc-list { grid-template-columns: 1fr; }
  .legal-table { display: block; overflow-x: auto; }
}