/* Kitsuvo features page: the homepage's ruled column, with every feature as a ruled card. Only features.html loads
   this file, after landing.css, whose column, instruments, keys and entrances it reuses.
   BRAND.md applies: system fonts, flat paper tones, line art, no gradients and no glass.
   Verdict colours appear only on illustrated scores. */

/* ---------- Hero: a washi panel with the six groups as an index ---------- */
.ft-hero-panel { border-radius: 24px; background: var(--washi); box-shadow: inset 0 0 0 1px var(--lp-rule); padding-bottom: clamp(40px, 6vw, 72px); }
.ft-board-wrap { position: relative; isolation: isolate; width: min(940px, 100%); margin: clamp(36px, 5vw, 56px) auto 0; }
/* The foxfire aperture crowns the index: a wide arc that leaves through the panel's sides, as the homepage's rings do. */
.ft-board-wrap .lp-rings i:nth-child(1) { top: 676px; width: 1400px; height: auto; }
.ft-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; text-align: left; }
.ft-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; min-height: 76px; padding: 14px 16px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px rgba(28, 26, 23, 0.06), 0 14px 30px -16px rgba(28, 26, 23, 0.4); color: var(--sumi); text-decoration: none; transition: transform 0.25s var(--ease); }
.ft-tile svg { grid-row: 1 / span 2; width: 20px; height: 20px; fill: none; stroke: var(--vermilion-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ft-tile b { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.ft-tile small { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.ft-tile:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .ft-tile:hover { transform: translateY(-2px); } .ft-tile:hover b { color: var(--vermilion-ink); } }
/* The index rises once as the page loads, in the stagger the cards below use when they are scrolled to. */
@media (prefers-reduced-motion: no-preference) {
  .ft-board li { animation: ft-rise 0.5s var(--ease) both; }
  .ft-board li:nth-child(2) { animation-delay: 0.06s; }
  .ft-board li:nth-child(3) { animation-delay: 0.12s; }
  .ft-board li:nth-child(4) { animation-delay: 0.18s; }
  .ft-board li:nth-child(5) { animation-delay: 0.24s; }
  .ft-board li:nth-child(6) { animation-delay: 0.3s; }
}
@keyframes ft-rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Every feature as a ruled card ---------- */
.ft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--lp-rule); border-left: 1px solid var(--lp-rule); }
.ft-card { display: flex; flex-direction: column; gap: 8px; padding: 22px clamp(16px, 2.2vw, 24px) 20px; border-right: 1px solid var(--lp-rule); border-bottom: 1px solid var(--lp-rule); scroll-margin-top: calc(var(--lp-nav) + 16px); }
.ft-card h3 { font: 600 1rem/1.35 var(--font); letter-spacing: -0.01em; }
.ft-card p { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; text-wrap: pretty; }
.ft-card code, .ft-table code { font: 0.8125rem/1.4 var(--mono); overflow-wrap: anywhere; }
/* Where the feature runs: a quiet key at the foot of the card, never a verdict colour. */
.ft-card .ft-on { margin-top: auto; padding-top: 6px; color: var(--sumi); font-size: 0.75rem; font-weight: 600; line-height: 1.4; }
.ft-on::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--sumi); vertical-align: 1px; }
.ft-on-part::before { background: none; box-shadow: inset 0 0 0 1.5px var(--sumi); }
.ft-card:target { background: var(--lp-ember); }

/* ---------- Stages: a control on paper beside the picture it changes ----------
   Native switches and radios hold the state and :has() draws it, so each stage works without features.js. */
.ft-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); margin-top: clamp(40px, 6vw, 72px); border-radius: 14px; overflow: hidden; font-size: 0.8125rem; line-height: 1.4; }
.ft-stage-copy { display: grid; align-content: center; justify-items: start; gap: 12px; padding: clamp(20px, 3.4vw, 36px); background: var(--frame); }
.ft-stage-copy h3 { font: 600 clamp(1.25rem, 2.2vw, 1.5rem)/1.2 var(--font-display); letter-spacing: -0.02em; }
.ft-stage-copy p { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; text-wrap: pretty; }
.ft-stage-scene { display: grid; align-content: center; gap: 14px; min-width: 0; padding: clamp(20px, 3.4vw, 36px); }
.ft-stage-night { background: var(--night); color: var(--ink-dark); }
.ft-stage-night :focus-visible, .ft-stage-night .lp-rig-input:focus-visible + * { outline-color: var(--foxfire); }
.ft-stage-paper { background: var(--lp-ember); }
.ft-stage [data-when], .ft-level [data-when] { display: none; animation: lp-rig-in 0.3s var(--ease) both; }
.ft-status { min-height: 3em; color: var(--muted); font-size: 0.75rem; line-height: 1.5; text-wrap: pretty; }
.ft-stage-night .ft-status { color: var(--muted-dark); }
/* A switch as one 44px row: the label, then the drawn switch. */
.ft-control { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--lp-rule); font-size: 0.9375rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
/* Three choices as one segmented row. */
.ft-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; max-width: 100%; padding: 4px; border-radius: 14px; background: rgba(28, 26, 23, 0.07); }
.ft-seg label { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.ft-seg span { display: grid; place-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; font-weight: 600; text-align: center; transition: background-color 0.15s var(--ease); }
.ft-seg input:checked + span { background: var(--card); box-shadow: 0 0 0 1px var(--lp-rule); }
@media (hover: hover) and (pointer: fine) { .ft-seg input:not(:checked) + span:hover { background: rgba(28, 26, 23, 0.06); } }
@media (forced-colors: active) { .ft-seg input:checked + span { outline: 2px solid; } }

/* Local only: what Kitsuvo itself sends, as a ledger. Two rows change with the switch. */
.ft-ledger { margin: 0; padding: 0; list-style: none; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-dark); }
.ft-ledger li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 14px; }
.ft-ledger li + li { border-top: 1px solid var(--line-dark); }
.ft-ledger span { font-weight: 600; }
.ft-ledger small { color: var(--muted-dark); font-size: 0.75rem; text-align: right; }
.ft-ledger small span { font-weight: 400; }
.ft-stage-night .lp-rig-switch { background: rgba(241, 236, 228, 0.3); }
.ft-local:not(:has(#ft-local:checked)) [data-when="off"], .ft-local:has(#ft-local:checked) [data-when="on"] { display: inline-block; }
.ft-local:has(#ft-local:checked) .ft-ledger-live span { color: var(--muted-dark); text-decoration: line-through; }
.ft-local:has(#ft-local:checked) .ft-ledger-live small span { color: var(--foxfire); font-weight: 600; text-decoration: none; }

/* Sleeping tabs: four rows of a tab rail. The two protected tabs never change. */
.ft-tabs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ft-tab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1px rgba(28, 26, 23, 0.06); transition: opacity 0.3s var(--ease); }
.ft-fav { width: 18px; height: 18px; border-radius: 5px; background: rgba(28, 26, 23, 0.12); }
.ft-tab b { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ft-tab small { color: var(--muted); font-size: 0.6875rem; }
.ft-mem { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(28, 26, 23, 0.08); overflow: hidden; }
.ft-mem b { height: 100%; border-radius: inherit; background: var(--sumi); transform-origin: 0 50%; transition: transform 0.3s var(--ease); }
.ft-tab-idle .ft-mem b { transform: scaleX(0.7); }
.ft-sleep:has(#ft-sleep-0:checked) [data-when="0"], .ft-sleep:has(#ft-sleep-1:checked) [data-when="1"], .ft-sleep:has(#ft-sleep-2:checked) [data-when="2"] { display: inline-block; }
.ft-sleep:has(#ft-sleep-1:checked) .ft-tab-idle .ft-mem b { transform: scaleX(0.4); }
.ft-sleep:has(#ft-sleep-2:checked) .ft-tab-idle .ft-mem b { transform: scaleX(0.03); }
.ft-sleep:has(#ft-sleep-2:checked) .ft-tab-idle { opacity: 0.6; }

/* ---------- The evidence level: three choices, four results, what each level hides ---------- */
.ft-level .lp-rig-pane:nth-child(2) { background: var(--lp-ember); }
.ft-level .lp-rig-pane:nth-child(3) { background: var(--washi); }
.ft-level .lp-rig-control > span:first-child { display: grid; min-width: 0; padding: 6px 0; }
.ft-level .lp-rig-control small { font-size: 0.6875rem; line-height: 1.45; }
.ft-radio { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(28, 26, 23, 0.45); }
.ft-radio::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--vermilion); transform: scale(0); transition: transform 0.15s var(--ease); }
.lp-rig-input:checked + .ft-radio { box-shadow: inset 0 0 0 1.5px var(--vermilion); }
.lp-rig-input:checked + .ft-radio::after { transform: none; }
@media (forced-colors: active) { .ft-radio { display: none; } }
.ft-result { min-height: 52px; padding: 7px 0; }
.ft-name, .ft-veil { display: grid; min-width: 0; }
.ft-name b, .ft-name small, .ft-veil b, .ft-veil small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-name small, .ft-veil small { font: 0.6875rem/1.5 var(--mono); }
.ft-veil, .ft-veil small { color: var(--vermilion-ink); }
.ft-result .ft-veil { display: none; }
.ft-key-unclear { background: rgba(180, 154, 28, 0.16); color: var(--unclear-text); }
.ft-level:has(#ft-level-explicit:checked) [data-hide~="explicit"] .ft-name,
.ft-level:has(#ft-level-likely:checked) [data-hide~="likely"] .ft-name,
.ft-level:has(#ft-level-possible:checked) [data-hide~="possible"] .ft-name { display: none; }
.ft-level:has(#ft-level-explicit:checked) [data-hide~="explicit"] .ft-veil,
.ft-level:has(#ft-level-likely:checked) [data-hide~="likely"] .ft-veil,
.ft-level:has(#ft-level-possible:checked) [data-hide~="possible"] .ft-veil { display: grid; }
.ft-level:has(#ft-level-explicit:checked) [data-hide~="explicit"] .lp-key,
.ft-level:has(#ft-level-likely:checked) [data-hide~="likely"] .lp-key,
.ft-level:has(#ft-level-possible:checked) [data-hide~="possible"] .lp-key { opacity: 0.5; }
.ft-level:has(#ft-level-explicit:checked) [data-when="explicit"],
.ft-level:has(#ft-level-likely:checked) [data-when="likely"],
.ft-level:has(#ft-level-possible:checked) [data-when="possible"] { display: inline-block; }
.ft-count { display: flex; align-items: baseline; gap: 8px; padding-bottom: 6px; }
.ft-count b { font: 600 1.75rem/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ft-count span { color: var(--muted); }
/* Browsers without :has() show each example at rest instead of an empty well. */
@supports not selector(:has(a)) {
  .ft-stage [data-when="off"], .ft-stage [data-when="0"], .ft-level [data-when="likely"] { display: inline-block; }
}

/* ---------- Tables: what Plus adds, and what runs where ---------- */
.ft-table-wrap { max-width: 820px; margin: clamp(40px, 6vw, 64px) auto 0; }
.ft-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.ft-table caption { padding-bottom: 12px; color: var(--muted); font-size: 0.8125rem; text-align: left; }
.ft-table th, .ft-table td { padding: 12px 0; border-top: 1px solid var(--lp-rule); text-align: left; vertical-align: baseline; }
.ft-table thead th { padding: 0 0 8px; border-top: 0; color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.ft-table th[scope="row"] { padding-right: 12px; font-weight: 400; }
.ft-table td { width: 27%; padding-left: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ft-table thead th + th { padding-left: 12px; }
.ft-table td.is-yes { color: var(--sumi); font-weight: 600; }
.ft-table tbody tr:last-child > * { border-bottom: 1px solid var(--lp-rule); }
.ft-note { max-width: 820px; margin: 16px auto 0; color: var(--muted); font-size: 0.875rem; line-height: 1.7; text-wrap: pretty; }

/* ---------- Narrower screens ---------- */
@media (max-width: 900px) {
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-stage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ft-hero-panel { border-radius: 18px; }
  .ft-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ft-tile { min-height: 68px; padding: 12px; gap: 2px 10px; }
  .ft-tile b { font-size: 0.875rem; }
  .ft-table th, .ft-table td { font-size: 0.875rem; }
  .ft-table td { width: 30%; }
}
@media (max-width: 560px) {
  .ft-grid { grid-template-columns: minmax(0, 1fr); }
  .ft-seg { display: grid; width: 100%; }
}
@media (max-width: 380px) { .ft-board { grid-template-columns: minmax(0, 1fr); } }