/* r11.css: round 11 (BRIEF-site-r11.md), two prospect-facing home sections (self-diagnosis, FAM concept) + the /fam page.
   Why tokens only: the live site already carries the palette (tokens.css) and the type scale (tokens-semantic.css); a new
   literal colour here would be a second palette nobody maintains. checks-r11.py counts hex literals in this file (0).
   Why no JS: both sections are reading content. Nothing here needs state, so nothing can break when a script fails.
   Why every FAM cell has one rule and no :nth-child: the map shows the FRAME only (Yim 2026-11-11, our copyright). A cell
   that differs from its neighbours would read as a rating; checks-r11.py compares every cell's computed style.
   Pairs with: frag-*.html, fam-page-*.html, build-r11.py, checks-r11.py */

/* ---------- Section 1: self-diagnosis ---------- */
.diag-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-6) var(--space-5);
  grid-template-columns: 1fr; }
@media (min-width: 760px) { .diag-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .diag-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.diag-list > li { border-top: 1px solid var(--foreground); padding-top: var(--space-3); display: flex; flex-direction: column;
  gap: var(--space-3); min-width: 0; }
.diag-list .n { font-family: var(--font-mono); font-size: var(--t-small-size); color: var(--muted-foreground); }
.diag-list h3 { margin: 0; }
.diag-q { margin: 0; padding-left: var(--space-3); border-left: 2px solid var(--rikyu-sabi); font-family: var(--font-serif);
  font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); }
.diag-q p { margin: 0; }
.diag-out { margin: auto 0 0; font-size: var(--t-body-size); line-height: var(--t-body-lh); }
.diag-lab { display: block; font-size: var(--t-small-size); color: var(--muted-foreground); }
.diag-note { margin: var(--space-6) 0 0; font-size: var(--t-small-size); max-width: var(--rikyu-measure-max); }
.diag-factory { margin: var(--space-3) 0 0; max-width: var(--rikyu-measure-max); }
.diag-close { margin: var(--space-6) 0 0; font-size: var(--t-section-size); font-weight: 600; max-width: var(--rikyu-measure-max); }
.diag-close + .ctas { margin-top: var(--space-4); }

/* ---------- Section 2: FAM concept (home) ---------- */
.fam-split { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .fam-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.fam-split .h2 { margin: var(--space-2) 0 var(--space-4); }
.fam-split .prose p { margin: 0 0 var(--space-3); }
.fam-split .ctas { margin-top: var(--space-4); }

/* The map. Narrow: each work line is a label above four cells. Wide (container >= 520px): label column + four columns.
   Container query, not a viewport query, so the same markup works in the home split and full width on /fam. */
.fam-map { margin: 0; min-width: 0; container-type: inline-size; }
.fam-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.fam-corner { display: none; }
.fam-ladder { grid-column: 1 / -1; color: var(--foreground); }
.fam-ladder svg { display: block; width: 100%; height: var(--space-6); overflow: visible; }
.fam-ladder .tread { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fam-ladder .ground { fill: none; stroke: var(--rikyu-sabi); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.fam-col { margin: 0; padding: var(--space-2) var(--space-1) var(--space-3) var(--space-2); font-size: var(--t-small-size);
  line-height: var(--t-small-lh); border-left: 1px solid var(--border); align-self: stretch; min-width: 0; overflow-wrap: anywhere; }
.fam-rows { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--foreground);
  border-bottom: 1px solid var(--foreground); }
.fam-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fam-row + .fam-row { border-top: 1px solid var(--border); }
.fam-fn { grid-column: 1 / -1; margin: 0; padding: var(--space-2) 0 var(--space-1); display: flex; flex-wrap: wrap;
  gap: 0 var(--space-2); align-items: baseline; font-size: var(--t-label-size); font-weight: 500; }
.fam-sub { font-size: var(--t-small-size); font-weight: 400; color: var(--muted-foreground); }
/* One rule for every cell: raked gravel, the same three lines in each. No modifier class exists on purpose. */
.fam-cell { display: block; height: var(--space-5); border-left: 1px solid var(--border);
  background-image: repeating-linear-gradient(to bottom, transparent 0 7px, var(--rikyu-stone) 7px 8px); }
.fam-map figcaption { margin: var(--space-3) 0 0; font-size: var(--t-small-size); color: var(--muted-foreground); }

@container (min-width: 520px) {
  .fam-grid, .fam-row { grid-template-columns: minmax(8.5rem, 1.25fr) repeat(4, minmax(0, 1fr)); }
  .fam-corner { display: block; grid-column: 1; }
  .fam-ladder { grid-column: 2 / -1; }
  .fam-col:nth-of-type(1) { grid-column: 2; }
  .fam-fn { grid-column: 1; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3) var(--space-2) 0; }
  .fam-cell { height: auto; min-height: var(--space-6); }
}

/* ---------- /fam page ---------- */
.fam-page .fam-map { margin-top: var(--space-6); }
.fam-page .fam-ladder svg { height: var(--space-7); }
.fam-page .fam-cell { height: var(--space-6); }
@container (min-width: 520px) { .fam-page .fam-cell { min-height: var(--space-7); } }
.fam-levels { margin-top: var(--space-5); }
@media (min-width: 900px) { .fam-levels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fam-own { margin: var(--space-6) 0 0; font-size: var(--t-small-size); max-width: var(--rikyu-measure-max); }

@media (prefers-reduced-motion: reduce) {
  /* Nothing in r11 animates; this block is the guard if a later round adds motion here. */
  .diag-list *, .fam-map * { transition: none; animation: none; }
}

/* ---------- /fam: illustrative industry examples (ex- classes on purpose: nothing here is a map cell or row) ---------- */
.ex-grid { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 960px) { .ex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ex-card { border-top: 1px solid var(--foreground); padding-top: var(--space-3); min-width: 0; }
.ex-card .h3 { margin: 0 0 var(--space-3); }
.ex-tasks { list-style: none; margin: 0; padding: 0; }
.ex-task { padding: var(--space-3) 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-2); }
.ex-task:first-child { border-top: 0; padding-top: 0; }
.ex-name { margin: 0; font-weight: 600; }
.ex-lv { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.ex-pips { display: inline-flex; gap: 2px; flex: none; }
.ex-pips i { display: block; width: var(--space-2); height: var(--space-3); border: 1px solid var(--foreground); }
.ex-pips i.on { background: var(--foreground); }
.ex-why { margin: 0; color: var(--muted-foreground); font-size: var(--t-small-size); line-height: var(--t-small-lh); }