/* Kaseki page. Builds on ../styles.css (tokens, bar, buttons, board, app fragments). */

.k-bar { padding-top: 22px; }
p code, dd code { font-size: 0.9em; background: var(--surface); padding: 0.05em 0.35em; border-radius: var(--radius); }

@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { animation: rise 900ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
}

/* ---------------- hero ---------------- */
.k-hero { display: grid; gap: 2.5rem; padding-top: clamp(3rem, 8vw, 7rem); padding-bottom: calc(var(--section) / 2); }
.k-hero-text { display: contents; }
.k-title { font-size: var(--step-display); line-height: 0.98; letter-spacing: -0.045em; max-width: 12em; }
.k-lede { font-size: var(--step-lead); line-height: 1.35; max-width: 30ch; }
.k-facts { margin: 0; display: grid; gap: 1.25rem; }
.k-facts dt { font-size: var(--step-head); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.k-facts dd { margin: 0.35rem 0 0; color: var(--muted); max-width: 22ch; }
.k-hero-film video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--surface); }
.k-hero-film figcaption { font-size: var(--step-small); color: var(--muted); margin-top: 12px; }
@media (min-width: 900px) {
  .k-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3.5rem; align-items: start; }
  .k-title { grid-column: 1 / -1; }
  .k-lede { grid-column: 1 / span 4; }
  .k-facts { grid-column: 1 / span 4; grid-row: 3; gap: 2rem; }
  .k-hero-film { grid-column: 6 / -1; grid-row: 2 / span 2; }
}

/* ---------------- the stack ---------------- */
.k-stack-grid { display: grid; gap: 3rem; }
.k-stack-pin h2 { max-width: 8em; }
.k-stack-note { margin: 1.25rem 0 2rem; max-width: 34ch; color: #d6d0c9; }
.k-layers { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.k-layers a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 14px 18px; background: var(--surface); border-radius: var(--radius); text-decoration: none; transition: background-color 240ms ease, color 240ms ease, transform 240ms var(--ease-out); }
.k-layers a:hover { background: var(--surface-2); transform: translateX(4px); }
.k-l-name { font-size: var(--step-body); font-weight: 600; letter-spacing: -0.01em; }
.k-l-thread { font-size: var(--step-small); color: var(--muted); transition: color 240ms ease; }
.k-layers a.is-on { background: var(--ink); color: var(--bg); }
.k-layers a.is-on .k-l-thread { color: #4a443e; }
.k-details { display: grid; gap: 0; }
.k-layer { padding-block: 2.5rem; scroll-margin-top: 96px; }
.k-layer h3 { font-size: var(--step-head); letter-spacing: -0.035em; line-height: 1; margin-bottom: 0.9rem; }
.k-says { font-size: var(--step-lead); line-height: 1.3; color: var(--accent); margin-bottom: 1.25rem !important; max-width: 26ch; }
.k-layer > p { max-width: 56ch; }
.k-layer > p + p { margin-top: 1em; }
.k-spec { margin: 1.75rem 0 0; display: grid; gap: 0.9rem; }
.k-spec > div { display: grid; gap: 0.15rem; }
.k-spec dt { font-size: var(--step-small); color: var(--muted); }
.k-spec dd { margin: 0; }
[data-ui].k-pb { margin-top: 1.75rem; max-width: 420px; border-radius: 6px; border: 1px solid var(--hc-border); }
.k-try { margin-top: 0.75rem; font-size: var(--step-small); color: var(--muted); max-width: 52ch; }
[data-ui] .k-vol { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 12px; color: var(--hc-muted); }
[data-ui] .k-vol input { flex: 1; accent-color: var(--hc-accent); }
[data-ui] .k-vol output { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; color: var(--hc-text); }
@media (min-width: 900px) {
  .k-stack-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .k-stack-pin { grid-column: 1 / span 5; position: sticky; top: 72px; }
  .k-details { grid-column: 7 / -1; }
  .k-layer { padding-block: 2.5rem 3rem; }
  .k-layer:first-child { padding-top: 0; }
  .k-spec { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
}

/* ---------------- gapless ---------------- */
.k-gap-head { display: grid; gap: 1.25rem; margin-bottom: 3rem; }
.k-gap-head p { max-width: 56ch; }
.k-buffer { margin: 0; }
.k-buf-bar { position: relative; display: flex; height: 150px; border-radius: var(--radius); overflow: hidden; }
.k-buf-a, .k-buf-b { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 18px 20px; }
.k-buf-a { flex: 62; background: var(--surface-2); }
.k-buf-b { flex: 38; background: #3b2d16; }
.k-buf-a b, .k-buf-b b { font-size: var(--step-body); font-weight: 600; }
.k-buf-a i, .k-buf-b i { font-style: normal; font-size: var(--step-small); color: #c9c2ba; }
.k-buf-mark { flex: none; width: 6px; background: var(--accent); }
.k-buf-head { position: absolute; inset: 0; pointer-events: none; transform: translateX(40%); }
.k-buf-head::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .k-buf-head { animation: k-play 7s linear infinite; }
}
@keyframes k-play { from { transform: translateX(34%); } to { transform: translateX(92%); } }
.k-buffer figcaption { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.k-buffer figcaption span { max-width: 48ch; }
.k-gap-note { margin-top: 2.5rem; max-width: 62ch; color: #d6d0c9; }
@media (min-width: 900px) {
  .k-gap-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .k-gap-head h2 { grid-column: 1 / span 5; max-width: 8em; }
  .k-gap-head p { grid-column: 7 / -1; }
  .k-buf-bar { height: 220px; }
  .k-buffer figcaption { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
}

/* ---------------- output rate ---------------- */
.k-rate-grid { display: grid; gap: 3rem; }
.k-rate-text p { margin: 1.25rem 0 1rem; max-width: 40ch; }
.k-rules { margin: 0; padding-left: 1.3em; display: grid; gap: 0.7rem; max-width: 44ch; }
.k-rules li::marker { color: var(--muted); }
.k-picker { background: var(--surface); border-radius: var(--radius); padding: clamp(20px, 3vw, 36px); display: grid; gap: 1.5rem; align-content: start; }
.k-picker-h { font-size: var(--step-lead); letter-spacing: -0.02em; }
.k-picker fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.k-picker legend { font-size: var(--step-small); color: var(--muted); padding: 0; margin-bottom: 0.6rem; }
.k-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.k-chips button { padding: 0.55em 0.9em; background: var(--surface-2); border-radius: var(--radius); font-size: var(--step-small); font-weight: 600; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.k-chips button:hover { background: #2e2720; }
.k-chips button:active { transform: scale(0.97); }
.k-chips button.is-on { background: var(--ink); color: var(--bg); }
.k-result { display: grid; gap: 0.6rem; }
.k-result-rate { font-size: var(--step-lead); color: var(--muted); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.k-result-why { color: #d6d0c9; max-width: 44ch; }
[data-ui].k-tech { justify-self: start; padding: 10px 14px; border-radius: 6px; font-size: 12px; color: var(--hc-muted); border: 1px solid var(--hc-border); }
[data-ui].k-tech b { color: var(--hc-accent-text); font-weight: 600; }
@media (min-width: 900px) {
  .k-rate-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .k-rate-text { grid-column: 1 / span 5; }
  .k-picker { grid-column: 7 / -1; }
}

/* ---------------- when things go wrong ---------------- */
.k-wrong h2 { margin-bottom: 3rem; }
.k-cases { margin: 0; display: grid; gap: 2.5rem; }
.k-cases dt { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.5rem; }
.k-cases dd { margin: 0; max-width: 40ch; color: #d6d0c9; }
@media (min-width: 900px) {
  .k-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3.5rem; }
}

/* ---------------- idle ---------------- */
.k-idle-grid { display: grid; gap: 3rem; }
.k-idle-text p { margin-top: 1.25rem; max-width: 44ch; }
.k-src { font-size: var(--step-small); color: var(--muted); }
.k-chart { margin: 0; display: grid; gap: 1.1rem; align-content: start; }
.k-bar-row { display: grid; grid-template-columns: 8.5em 1fr 4.5em; gap: 1rem; align-items: center; }
.k-bar-label { font-size: var(--step-small); color: var(--muted); }
.k-bar-track { height: 36px; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.k-bar-fill { display: block; height: 100%; width: var(--w); border-radius: var(--radius); transform-origin: left; }
.k-before { background: #5c554e; }
.k-after { background: var(--accent); }
.k-bar-val { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .js .k-chart .k-bar-fill { transform: scaleX(0); transition: transform 1200ms var(--ease-out); }
  .js .k-chart.is-in .k-bar-fill { transform: none; }
  .js .k-chart.is-in .k-after { transition-delay: 200ms; }
}
.k-table { margin-top: 1.5rem; border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: var(--step-small); }
.k-table th, .k-table td { padding: 0.6em 0.5em; text-align: right; border-bottom: 1px solid #2a241e; }
.k-table th:first-child { text-align: left; }
.k-table thead th { color: var(--muted); font-weight: 500; }
@media (min-width: 900px) {
  .k-idle-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .k-idle-text { grid-column: 1 / span 5; }
  .k-chart { grid-column: 7 / -1; }
}

.k-board .t-status code { font-size: 0.85em; }

/* each layer's parts rise in, heading first */
@media (prefers-reduced-motion: no-preference) {
  .js .k-layer > * { transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
  .js .k-layer:not(.is-in) > * { opacity: 0; transform: translateY(22px); }
  .js .k-layer > :nth-child(2) { transition-delay: 70ms; }
  .js .k-layer > :nth-child(3) { transition-delay: 140ms; }
  .js .k-layer > :nth-child(n+4) { transition-delay: 210ms; }
}

.k-stack-head { display: grid; gap: 1.25rem; margin-bottom: 3rem; }
.k-stack-head h2 { max-width: 9em; }
.k-stack-note { margin: 0; }
.k-fig { margin: 1.75rem 0 0; }
.k-fig img { width: 100%; height: auto; border-radius: var(--radius); background: var(--surface); }
.k-fig figcaption { font-size: var(--step-small); color: var(--muted); margin-top: 10px; max-width: 52ch; }
.k-fig-half { max-width: 360px; }
.k-fig-half img { aspect-ratio: 4 / 3; object-fit: cover; }
.k-fig-np { max-width: 259px; margin-top: 2rem; }
.k-board { margin-top: calc(var(--section) / 2); }
@media (min-width: 900px) {
  .k-stack-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .k-stack-head h2 { grid-column: 1 / span 5; }
  .k-stack-note { grid-column: 7 / -1; }
}
.k-result-rate span { display: inline; color: var(--ink); font-size: var(--step-head); font-weight: 600; letter-spacing: -0.035em; margin-left: 0.2em; }