/*
  capabilities.css · Avian Technology — Capabilities page (re-skinned to "Field Notes")
  Purpose: PAGE-SCOPED styles for capabilities.html only. Loaded after site.css and builds on its
           tokens (--paper, --rule, --bold, --gold, --font-mono, etc.) — nothing here overrides the
           base system. Re-skins the four-pillar "how we build" page from the old boxed-card/gradient
           look to the paper Field Notes idiom: mono eyebrows, hairline option rows instead of shadowed
           cards, and a gold "Avian pick" chip (gold fill + navy ink, never gold text on paper).
  Key contents: .cap-toc (in-page jump links), .cap-principles (hairline-divided "how we choose" strip),
                .layer / .layer__title / .layer__what (a decision inside a pillar), .opts / .opt (hairline
                option rows — term/definition layout, not a card grid) + .opt__tag / .pick-badge / .chips,
                .pick-note ("why we pick" aside), .figure (inline emphasised numbers), .table-scroll /
                .matrix (the summary matrix, kept scrollable on narrow screens).
  Related: site.css (tokens + shared components: .section, .page-header, .ledger, .cta-band, .reveal — all
           reused directly in capabilities.html), capabilities.html (the only page that loads this file),
           D:\Claude\avian\_build\BUILD-BRIEF.md §5.8 (the re-skin contract).
*/

/* =========================================================================
   In-page contents links (page-header addition)
   ========================================================================= */
.cap-toc {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--rule);
}
.cap-toc a {
  position: relative; font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-link); padding: 4px 2px;
}
.cap-toc a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 1px;
  background: currentColor; opacity: .6; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-interact) var(--ease);
}
.cap-toc a:hover::after { transform: scaleX(1); }

/* =========================================================================
   "How we choose" — a quiet, unnumbered strip of four working principles.
   Hairline dividers, no boxes, no icons.
   ========================================================================= */
.cap-principles__label { margin-top: var(--sp-7); color: var(--ink-link); }
.cap-principles { margin-top: var(--sp-3); display: grid; grid-template-columns: 1fr; }
.cap-principle { padding: var(--sp-4) 0; border-top: 1px solid var(--rule); }
.cap-principle:last-child { border-bottom: 1px solid var(--rule); }
.cap-principle h3 {
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--ink);
  margin-bottom: 4px;
}
.cap-principle p { font-size: .92rem; color: var(--ink-body); max-width: 42ch; }

@media (min-width: 768px) {
  .cap-principles { grid-template-columns: repeat(4, 1fr); column-gap: var(--sp-5); }
  .cap-principle {
    border-top: none; border-left: 1px solid var(--rule); padding: 0 0 0 var(--sp-4);
  }
  .cap-principle:last-child { border-bottom: none; }
}

/* =========================================================================
   Layer — one decision inside a pillar (e.g. "Choosing the framework")
   ========================================================================= */
.layer { margin-top: var(--sp-7); }
.layer:first-child { margin-top: var(--sp-6); }
.layer__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.22rem;
  letter-spacing: -.01em; color: var(--ink);
}
.layer__what { margin-top: var(--sp-2); max-width: 68ch; color: var(--ink-body); font-size: .96rem; }
.layer__what strong { color: var(--ink); font-weight: 600; }

/* =========================================================================
   Option rows — a hairline "spec sheet" list, not a shadowed card grid.
   Desktop: name/tag/badge sits in a fixed-width left column; the essence,
   mastery bullets and chips sit in the right column. Mobile: stacked.
   ========================================================================= */
.opts { margin-top: var(--sp-2); }
.opt {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3);
  padding: var(--sp-5) 0; border-top: 1px solid var(--rule);
}
.opt:last-child { border-bottom: 1px solid var(--rule); }
.opt--pick { position: relative; padding-left: var(--sp-4); }
.opt--pick::before {
  content: ""; position: absolute; left: -1px; top: var(--sp-5); bottom: var(--sp-5); width: 2px;
  background: var(--gold);
}
.opt__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.opt__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink);
  letter-spacing: -.005em;
}
.opt__tag {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-link);
  background: color-mix(in srgb, var(--bold) 10%, transparent);
  border-radius: var(--radius-pill); padding: 3px 9px; white-space: nowrap;
}
/* The single re-skinned emphasis: gold FILL + dark navy ink text, never gold-on-paper text */
.pick-badge {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cta-ink); background: var(--gold);
  border-radius: var(--radius-pill); padding: 4px 10px; white-space: nowrap;
}
.opt__detail > * + * { margin-top: var(--sp-3); }
.opt__essence { max-width: 60ch; color: var(--ink-body); font-size: .94rem; line-height: 1.55; }
.opt__mastery { display: flex; flex-direction: column; gap: 6px; }
.opt__mastery li {
  position: relative; padding-left: 16px; font-size: .88rem; color: var(--ink-body); line-height: 1.5;
}
.opt__mastery li::before {
  content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-link); opacity: .6;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .02em; color: var(--ink-body);
  border: 1px solid var(--rule-ink); border-radius: var(--radius-pill); padding: 4px 10px;
}
.chip--cost { border-style: dashed; }

/* Emphasised inline figures (store fees, etc.) */
.figure { font-weight: 600; color: var(--bold-deep); font-feature-settings: "tnum" 1; }

/* "Why we pick" aside */
.pick-note {
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--bold); background: color-mix(in srgb, var(--bold) 5%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .94rem; color: var(--ink);
}
.pick-note .lbl {
  display: block; font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-link); margin-bottom: 6px;
}
.pick-note strong { color: var(--bold-deep); font-weight: 600; }
.pick-note a { color: var(--bold-deep); font-weight: 600; }

/* =========================================================================
   Summary matrix — kept scrollable on narrow screens (own overflow-x container)
   ========================================================================= */
.table-scroll {
  overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  -webkit-overflow-scrolling: touch; margin-top: var(--sp-2);
}
.matrix { border-collapse: collapse; width: 100%; min-width: 680px; background: var(--surface); }
.matrix th, .matrix td {
  text-align: left; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--rule);
  font-size: .88rem; vertical-align: top; color: var(--ink-body);
}
.matrix thead th {
  font-family: var(--font-mono); background: var(--paper-2); color: var(--ink); font-weight: 600;
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
}
.matrix tbody tr:last-child td, .matrix tbody tr:last-child th { border-bottom: none; }
.matrix .layercell { color: var(--ink); font-weight: 600; white-space: nowrap; }
.matrix .pick em {
  font-style: normal; font-weight: 600; color: var(--bold-deep);
  background: color-mix(in srgb, var(--bold) 10%, transparent); padding: 1px 7px; border-radius: 6px;
  margin-right: 2px; display: inline-block;
}

/* =========================================================================
   Responsive — desktop opt-row layout engages with the site rail breakpoint
   ========================================================================= */
@media (min-width: 768px) {
  .opt { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
  .opt__head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}