/* Framework TLDR tab (2026-07-16). Standalone, namespaced `ftl-*`; uses the app's
   theme tokens (every palette, light/dark, for free) + the shared radius scale.
   Responsive at 760/520px. Hard-codes no colours — every value is a bare token.

   SURFACE v3: this page is a DOCUMENT, so it gets the card architecture at the level a
   reader actually navigates by — the lede, the revision caveat, the search bar and each
   subject group are separate objects floating on the ground with a gap between them. The
   full-width rules that used to divide them are gone; the only hairlines left are the ones
   INSIDE a group card, between its section rows, where they separate peers rather than
   subjects. Labels are tracked mono capitals, refs and counts are mono, and every run of
   prose is capped at 70-72ch, which is the whole point of a plain-English rulebook. */

#view-framework-tldr { padding: 0; }

.ftl-wrap {
  max-width: 900px; margin: 0 auto; padding: 18px 4px 40px;
  display: flex; flex-direction: column; gap: clamp(12px, 1.5vw, 18px);
}

/* The dead-end states get the design's dashed "nothing here" box rather than bare text. */
.ftl-empty {
  padding: 40px 24px; color: var(--text-muted); font-size: 14px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--r-lg);
}

/* hero */
.ftl-hero {
  padding: clamp(16px, 1.5vw, 22px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
/* Serif, weight and optical tracking come from surface.css's headline rule — headlines are
   the only serif on the site, and this is one. */
.ftl-title {
  font-size: 24px; line-height: 1.3; margin: 0 0 10px;
  color: var(--text);
}
.ftl-intro {
  font-size: 14px; line-height: 1.65; margin: 0; max-width: 72ch;
  color: var(--text-2); text-wrap: pretty;
}

/* stale notice — the artifact predates the latest framework revision */
.ftl-stale {
  margin: 0; padding: 12px 16px; max-width: 74ch;
  font-size: 12.5px; line-height: 1.55; text-wrap: pretty;
  background: var(--warn-tint);
  border: 1px solid var(--warn-edge); border-radius: var(--r-lg);
  color: var(--warn-text);
}

/* toolbar: search + count + expand/collapse-all.
   It stays sticky, but it is now a card that floats over the groups rather than a bar with
   a rule under it — so it needs a shadow to sit above them, and a top offset that clears
   the app header (itself a sticky card, 56px tall at its own clamped inset). */
.ftl-tools {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px;
  position: sticky; top: calc(56px + clamp(8px, 1.4vw, 16px) + 10px); z-index: 3;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.ftl-search { position: relative; flex: 1 1 260px; min-width: 200px; }
.ftl-search-input {
  width: 100%; box-sizing: border-box; font-size: 13.5px; padding: 8px 30px 8px 10px;
  color: var(--text); background: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.ftl-search-input:focus { outline: none; border-color: var(--accent); }
.ftl-search-input::-webkit-search-cancel-button { display: none; }
.ftl-clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer; font-size: 16px;
  line-height: 1; padding: 4px 8px; color: var(--colhead);
}
.ftl-clear:hover { color: var(--text); }
.ftl-count {
  font: 400 11px/1.4 var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--colhead); white-space: nowrap;
}
.ftl-tools-btns { display: flex; gap: 6px; margin-left: auto; }
.ftl-tool {
  font: 500 11px/1 var(--font-sans); letter-spacing: .06em;
  padding: 8px 12px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: transparent; color: var(--accent);
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}
.ftl-tool:hover { background: var(--surface-sunken); border-color: var(--accent-edge); }

/* group cards — one subject, one object on the ground */
.ftl-group {
  padding: 6px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.ftl-group-h {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 12px 0 4px; cursor: pointer; border: none; background: transparent;
}
.ftl-group-t {
  font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4;
}
.ftl-group-n {
  font: 500 10px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .04em;
  padding: 1px 6px; margin-left: auto;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  color: var(--colhead);
}
/* The gloss under a group title — plain language, sentence case. */
.ftl-group-s {
  font: 400 12.5px/1.55 var(--font-sans); color: var(--text-muted);
  padding: 0 0 12px 26px; max-width: 72ch; text-wrap: pretty;
}
.ftl-group-b { padding: 0 0 0 26px; }

/* section rows — hairlines between PEERS inside one card, which is the one place a rule
   still belongs in this design. */
.ftl-sec { border-top: 1px solid var(--line); }
.ftl-sec:first-child { border-top: none; }
.ftl-sec-h {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  padding: 10px 2px; cursor: pointer; border: none; background: transparent;
}
.ftl-sec-t { font-size: 13.5px; font-weight: 500; color: var(--text-2); line-height: 1.5; }
.ftl-sec.is-open > .ftl-sec-h .ftl-sec-t { color: var(--text); }
.ftl-sec-h:hover .ftl-sec-t { color: var(--text); }
.ftl-ref {
  font: 400 10px/1.4 var(--font-sans); letter-spacing: .06em;
  padding: 2px 6px; margin-left: auto; white-space: nowrap;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  color: var(--colhead);
}
.ftl-sec-b { padding: 0 2px 14px 22px; }
.ftl-sec-b p {
  font-size: 13.5px; line-height: 1.7; margin: 0 0 10px; max-width: 70ch;
  color: var(--text-2); text-wrap: pretty;
}
.ftl-sec-b p:last-child { margin-bottom: 0; }

.ftl-caret {
  flex: 0 0 auto; font-size: 11px; color: var(--colhead); width: 14px;
}

/* search highlight */
.ftl-wrap mark {
  background: var(--accent); color: var(--on-accent);
  padding: 0 1px; border-radius: var(--r-xs);
}

/* Provenance sits on the GROUND under the cards: it dates the whole document rather than
   belonging to any group in it. */
.ftl-foot {
  padding: 4px 4px 8px;
  font: 400 11px/1.5 var(--font-sans); color: var(--colhead);
}

/* responsive */
@media (max-width: 760px) {
  .ftl-title { font-size: 20px; }
  .ftl-intro, .ftl-group-s, .ftl-sec-b p, .ftl-stale { max-width: 100%; }
  .ftl-group-b { padding-left: 14px; }
  .ftl-group-s { padding-left: 14px; }
  .ftl-sec-b { padding-left: 14px; }
  .ftl-tools { position: static; }
}
@media (max-width: 520px) {
  .ftl-tools { gap: 8px; }
  .ftl-tools-btns { margin-left: 0; }
  .ftl-count { flex-basis: 100%; }
  .ftl-ref { display: none; }
}