/* P. 07 Accuracy (paper band): hero 93.2 + a printed benchmark sheet. Bars to scale on a 0..100 axis grow in sequence;
   hovering or focusing a row measures its gap to Sift-OCR with a red dimension line. */
.acc-mod { position: relative; overflow-x: clip; }
.acc-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px 56px; align-items: end; margin-bottom: clamp(48px, 6vw, 92px); }
.acc-copy .h2 { max-width: 13ch; }
.acc-copy .lead { max-width: 44ch; }

/* ---------- hero figure ---------- */
.acc-hero { justify-self: end; min-width: 0; }
.acc-hero__label { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 var(--t-label)/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-ink-2); }
.acc-hero__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--red); box-shadow: 0 0 0 3px rgba(183, 57, 31, 0.14); }
.acc-hero__num { margin: 12px 0 0 -0.06em; font: 700 clamp(6.4rem, 2.6rem + 10.6vw, 14.5rem)/0.82 var(--f-disp); letter-spacing: -0.065em; color: var(--red); white-space: nowrap; }
.acc-hero__val { display: inline-block; background: linear-gradient(180deg, #C9472B 0%, var(--red) 55%, #9C2F18 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: 0.04em; }
.acc-hero__deltas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.acc-hero__deltas li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(250, 250, 248, 0.7); box-shadow: inset 0 0 0 1px var(--p-line); font: 500 0.8rem/1 var(--f-mono); letter-spacing: 0.02em; color: var(--p-ink-2); white-space: nowrap; }
.acc-hero__deltas b { font-weight: 600; color: var(--red); }

/* ---------- the printed sheet ---------- */
.acc-paper { position: relative; isolation: isolate; }
.acc-sheet { position: absolute; z-index: -1; inset: 0; border-radius: var(--r-md); background: #F7F6F2; box-shadow: 0 0 0 1px rgba(21, 23, 27, 0.08), 0 24px 50px -36px rgba(21, 23, 27, 0.4); }
.acc-sheet--1 { transform: translate(-5px, 9px) rotate(-0.9deg); }
.acc-sheet--2 { transform: translate(7px, 15px) rotate(0.6deg); background: #F1EFEA; }
.acc-crop { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(21, 23, 27, 0.32); pointer-events: none; }
.acc-crop--tl { top: -26px; left: -26px; border-right-width: 1px; border-bottom-width: 1px; }
.acc-crop--tr { top: -26px; right: -26px; border-left-width: 1px; border-bottom-width: 1px; }
.acc-crop--bl { bottom: -26px; left: -26px; border-right-width: 1px; border-top-width: 1px; }
.acc-crop--br { bottom: -26px; right: -26px; border-left-width: 1px; border-top-width: 1px; }
.acc-card { position: relative; margin: 0; padding: clamp(22px, 3.4vw, 48px) clamp(20px, 3.6vw, 52px) clamp(20px, 2.6vw, 34px); border-radius: var(--r-md); background: var(--page); color: var(--p-ink); overflow: hidden; box-shadow: 0 0 0 1px rgba(21, 23, 27, 0.1), inset 0 1px 0 #fff, 0 50px 100px -60px rgba(21, 23, 27, 0.55), 0 16px 34px -24px rgba(21, 23, 27, 0.25); }
.acc-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 0% 0%, rgba(183, 57, 31, 0.035), transparent 60%); }
.acc-scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; background: linear-gradient(90deg, transparent, var(--red) 12%, var(--red) 88%, transparent); box-shadow: 0 0 16px rgba(183, 57, 31, 0.55), 0 0 2px rgba(183, 57, 31, 0.8); opacity: 0; pointer-events: none; }
.acc-scanline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 70px; background: linear-gradient(0deg, rgba(183, 57, 31, 0.07), transparent); }
.acc-card.is-run .acc-scanline { animation: acc-scan 1.25s var(--ease-io) both; }
@keyframes acc-scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.acc-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--p-line); }
.acc-card__title { margin: 0; font: 600 clamp(1.1rem, 0.98rem + 0.5vw, 1.45rem)/1.2 var(--f-disp); letter-spacing: -0.02em; color: var(--p-ink); }
.acc-card__sub { margin: 8px 0 0; font: 500 var(--t-label)/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-ink-2); }
.acc-card__fig { margin: 2px 0 0; flex: none; font: 500 var(--t-label)/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-ink-2); padding: 7px 10px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--p-line); }

/* ---------- chart ---------- */
.acc-chart { --name-w: clamp(130px, 15vw, 210px); --gutter: 76px; --row-h: clamp(70px, 6.4vw, 92px); --bar-h: 26px; position: relative; margin-top: clamp(20px, 2.4vw, 34px); }
.acc-grid { position: absolute; top: 0; bottom: 36px; left: var(--name-w); right: var(--gutter); pointer-events: none; }
.acc-grid span { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); width: 1px; background: rgba(21, 23, 27, 0.09); transform-origin: 50% 0; }
.acc-grid span:first-child { background: rgba(21, 23, 27, 0.4); }
.acc-grid i { position: absolute; top: calc(100% + 12px); left: 0; transform: translateX(-50%); font: 500 0.75rem/1 var(--f-mono); font-style: normal; color: var(--p-ink-2); font-variant-numeric: tabular-nums; }
.js .acc-grid span { transform: scaleY(0); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--x) * 4ms + 200ms); }
.js .acc-card.is-run .acc-grid span { transform: none; }
.acc-rows { list-style: none; margin: 0; padding: 0 0 36px; position: relative; }
.acc-row { position: relative; display: grid; grid-template-columns: var(--name-w) minmax(0, 1fr); align-items: center; height: var(--row-h); border-radius: 10px; outline: none; transition: opacity 0.4s var(--ease-out); }
.acc-row:focus-visible::before { content: ""; position: absolute; z-index: 1; inset: 6px -10px; border-radius: 10px; box-shadow: 0 0 0 2px var(--red); pointer-events: none; }
.acc-name { min-width: 0; padding-right: 18px; font: 600 clamp(0.98rem, 0.9rem + 0.3vw, 1.12rem)/1.2 var(--f-ui); letter-spacing: -0.01em; color: var(--p-ink); }
.acc-name__box { position: relative; display: inline-block; padding: 5px 8px; margin-left: -8px; border-radius: 6px; }
.acc-row.is-sift .acc-name { color: var(--red); }
.acc-row.is-sift .acc-name__box::after { content: ""; position: absolute; inset: 0; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(183, 57, 31, 0.75); background: rgba(183, 57, 31, 0.07); clip-path: inset(0 100% 0 0); transition: clip-path 0.9s var(--ease-out); }
.acc-card.is-done .acc-row.is-sift .acc-name__box::after { clip-path: inset(0 0 0 0); }
.acc-plot { position: relative; height: var(--bar-h); margin-right: var(--gutter); }
.acc-bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * var(--k, 1) * 1%); border-radius: 0 5px 5px 0; background: linear-gradient(180deg, #C4C0B7, #B2AEA4); overflow: hidden; transition: filter 0.4s, opacity 0.4s; }
.acc-row.is-sift .acc-bar { background: linear-gradient(180deg, #CC4A2E 0%, var(--red) 55%, #A3331B 100%); box-shadow: 0 12px 26px -12px rgba(183, 57, 31, 0.7); }
.acc-bar__sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: translateX(-120%); }
.acc-card.is-done .acc-bar__sheen { animation: acc-sheen 1.3s 0.15s var(--ease-io) both; }
@keyframes acc-sheen { to { transform: translateX(320%); } }
.acc-val { position: absolute; top: 50%; left: calc(var(--v) * var(--k, 1) * 1%); transform: translateY(-50%); margin-left: 8px; padding: 3px 6px; border-radius: 6px; background: var(--page); font: 600 clamp(1.05rem, 0.95rem + 0.4vw, 1.4rem)/1 var(--f-disp); letter-spacing: -0.02em; color: var(--p-ink); white-space: nowrap; z-index: 3; }
.acc-row.is-sift .acc-val { color: var(--red); }

/* focus + hover: dim the others */
.acc-chart.is-focus .acc-row:not(.is-active):not(.is-sift) .acc-bar { opacity: 0.45; }
.acc-chart.is-focus .acc-row:not(.is-active):not(.is-sift) .acc-val, .acc-chart.is-focus .acc-row:not(.is-active):not(.is-sift) .acc-name { opacity: 0.55; }
.acc-row .acc-val, .acc-row .acc-name { transition: opacity 0.4s var(--ease-out); }

/* gap annotations (positioned by JS) */
.acc-anns { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.acc-ann { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity 0.35s var(--ease-out); }
.acc-ann.is-on { opacity: 1; }
.acc-ann__guide { position: absolute; width: 1px; background: var(--red); transform-origin: 50% 0; transform: scaleY(0); transition: transform 0.45s var(--ease-out); }
.acc-ann__dim { position: absolute; height: 9px; border: 0 solid var(--red); border-left-width: 1px; border-right-width: 1px; transform-origin: 100% 50%; transform: scaleX(0); transition: transform 0.6s 0.12s var(--ease-out); }
.acc-ann__dim::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--red); }
.acc-ann__chip { position: absolute; transform: translate(-50%, -100%) translateY(4px); padding: 6px 9px; border-radius: 7px; background: var(--red); color: #fff; font: 600 0.78rem/1 var(--f-mono); letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(183, 57, 31, 0.8); opacity: 0; transition: opacity 0.35s 0.2s, transform 0.5s 0.2s var(--ease-out); }
.acc-ann.is-on .acc-ann__guide { transform: none; }
.acc-ann.is-on .acc-ann__dim { transform: none; }
.acc-ann.is-on .acc-ann__chip { opacity: 1; transform: translate(-50%, -100%); }

.acc-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 32px; padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid var(--p-line); }
.acc-readout { margin: 0; font: 400 0.98rem/1.5 var(--f-ui); color: var(--p-ink-2); max-width: 70ch; }
.acc-readout b { font-weight: 600; color: var(--p-ink); }
.acc-readout .acc-up { color: var(--red); }
.acc-src { margin: 0; font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.06em; color: var(--p-ink-2); }

@media (max-width: 900px) {
  .acc-top { grid-template-columns: minmax(0, 1fr); }
  .acc-hero { justify-self: start; }
}
@media (max-width: 700px) {
  .acc-crop { display: none; }
  .acc-chart { --gutter: 58px; --row-h: auto; --bar-h: 20px; }
  .acc-grid { left: 0; bottom: 34px; }
  .acc-rows { padding-bottom: 34px; }
  .acc-row { grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: 10px; height: auto; padding: 16px 0 14px; }
  .acc-name { padding-right: 0; }
  .acc-name__box { background: var(--page); margin-left: 4px; padding: 3px 6px; }
  .acc-row.is-sift .acc-name__box::after { background: rgba(183, 57, 31, 0.07); }
  .acc-card__fig { display: none; }
  .acc-hero__deltas li { height: 32px; padding: 0 12px; font-size: 0.75rem; }
  .acc-row:focus-visible::before { inset: 4px -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-card.is-run .acc-scanline { animation: none; }
  .acc-card.is-done .acc-bar__sheen { animation: none; }
}