/* ==========================================================================
   Chrome — the drawing set around the editorial pages:
   sheet frame + zone marks, CAD crosshair, title block, plotted lines,
   and the checker's red pencil (revision clouds + handwritten notes).
   ========================================================================== */

/* ---------- Sheet frame: a paper mat with zone letters and numbers ---------- */
.frame { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.frame::before {
  content: "";
  position: absolute; inset: 0;
  border: var(--mat) solid var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: border-color .4s ease;
}
.zones { position: absolute; display: flex; justify-content: space-around; font-family: var(--mono); font-size: 8px; color: var(--muted); letter-spacing: .08em; }
.zones-top, .zones-bottom { left: var(--mat); right: var(--mat); height: var(--mat); align-items: center; }
.zones-top { top: 0; }
.zones-bottom { bottom: 0; }
.zones-left, .zones-right { top: var(--mat); bottom: var(--mat); width: var(--mat); flex-direction: column; align-items: center; }
.zones-left { left: 0; }
.zones-right { right: 0; }
.zones span { transition: color .2s ease; }
.zones span.is-hot { color: var(--red); }

/* ---------- CAD crosshair (fine pointers only) ---------- */
.crosshair { position: fixed; inset: 0; z-index: 310; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.crosshair.is-active { opacity: 1; }
.crosshair-x, .crosshair-y { position: absolute; background: var(--nonphoto); opacity: .55; }
.crosshair-x { left: 0; right: 0; height: 1px; top: 0; transform: translateY(var(--cy, -10px)); }
.crosshair-y { top: 0; bottom: 0; width: 1px; left: 0; transform: translateX(var(--cx, -10px)); }
.pickbox {
  position: absolute; left: 0; top: 0;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border: 1px solid var(--ink);
  transform: translate(var(--cx, -20px), var(--cy, -20px));
  transition: width .2s var(--ease-out), height .2s var(--ease-out), margin .2s var(--ease-out), border-color .2s ease, border-radius .2s ease;
}
.crosshair.is-snap .pickbox { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-color: var(--red); border-width: 1.5px; transform: translate(var(--cx), var(--cy)) rotate(45deg); }
.readout {
  position: absolute; left: 0; top: 0;
  padding: 3px 6px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 9px; letter-spacing: .04em; white-space: nowrap;
  transform: translate(calc(var(--cx) + 16px), calc(var(--cy) + 16px));
}
.readout b { color: var(--red); font-weight: 500; }
/* The native cursor hides only while the crosshair is actually drawn. */
@media (hover: hover) and (pointer: fine) { .crosshair-live, .crosshair-live a, .crosshair-live button { cursor: none; } .crosshair-live input, .crosshair-live textarea, .crosshair-live select { cursor: text; } }

/* ---------- Title block (fixed, bottom right) ---------- */
.title-block {
  position: fixed; right: calc(var(--mat) + 14px); bottom: calc(var(--mat) + 14px); z-index: 290;
  width: 316px;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 10px; font-stretch: 80%; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 12%, transparent);
  transition: transform .5s var(--ease-out), opacity .3s ease, background-color .4s ease;
}
.title-block.is-away { opacity: 0; transform: translateY(20px); pointer-events: none; }
.tb-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); border-top: 1px solid var(--line-strong); }
.tb-row:first-of-type { border-top: 0; }
.tb-row dt { padding: 6px 8px; border-right: 1px solid var(--line-strong); color: var(--muted); }
.tb-row dd { margin: 0; padding: 6px 8px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-sheet dd { font-weight: 700; padding-right: 34px; }
.tb-check dd { color: var(--muted); }
[data-check="on"] .tb-check dd { color: var(--red); font-family: var(--hand); font-size: 17px; text-transform: none; line-height: .8; }
.title-block dl { margin: 0; }
.tb-toggle { position: absolute; top: -1px; right: -1px; width: 26px; height: 26px; border: 1px solid var(--ink); background: var(--paper); font-size: 12px; line-height: 1; cursor: pointer; }
.title-block.is-collapsed dl .tb-row:not(.tb-sheet) { display: none; }

/* ---------- Plotted linework: <svg class="plot"> with pathLength="1" ---------- */
.has-js .plot [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
.has-js .plot.is-visible [pathLength], .has-js .is-visible .plot [pathLength] { stroke-dashoffset: 0; }

/* ---------- Check mode: revision clouds + red pencil notes ---------- */
[data-check="on"] .reveal, [data-check="on"] .line-inner { opacity: 1 !important; transform: none !important; transition: none !important; }
.check-layer { position: absolute; left: 0; top: 0; z-index: 280; width: 100%; pointer-events: none; }
.check-layer svg { position: absolute; left: 0; top: 0; overflow: visible; }
/* Each cloud rides on a paper-coloured halo so the red pencil reads on paper, blue and night alike. */
.cloud, .cloud-halo { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: plot-cloud 1.1s var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
.cloud { stroke: var(--red); stroke-width: 1.6; }
.cloud-halo { stroke: var(--paper); stroke-width: 5; opacity: .92; }
@keyframes plot-cloud { to { stroke-dashoffset: 0; } }
.delta { position: absolute; display: grid; place-items: center; width: 24px; height: 22px; color: var(--red); font-family: var(--mono); font-size: 10px; font-weight: 700; opacity: 0; animation: pop .4s var(--ease-out) forwards; animation-delay: calc(var(--d, 0ms) + 500ms); }
.delta svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.delta path { fill: var(--paper); }
.delta span { position: relative; margin-top: 5px; }
.note {
  position: absolute; max-width: 250px;
  padding: 3px 7px 2px;
  background: var(--paper); color: var(--red);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 55%, transparent);
  font-family: var(--hand); font-size: 21px; line-height: 1;
  transform: rotate(-2deg); opacity: 0;
  animation: pop .5s var(--ease-out) forwards; animation-delay: calc(var(--d, 0ms) + 700ms);
}
@keyframes pop { from { opacity: 0; transform: translateY(6px) rotate(-2deg); } to { opacity: 1; transform: rotate(-2deg); } }
.check-summary {
  position: fixed; left: 50%; bottom: calc(var(--mat) + 16px); z-index: 295;
  padding: 10px 16px;
  background: var(--red); color: var(--paper);
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  transform: translate(-50%, 140%); opacity: 0; visibility: hidden;
  transition: transform .5s var(--ease-out), opacity .3s ease, visibility 0s linear .5s;
}
[data-check="on"] .check-summary { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }

/* First-visit demo: one clouded claim and an invitation to check the rest. */
.check-demo { transition: opacity .5s ease; }
.check-demo.is-out { opacity: 0; }
.check-invite {
  position: fixed; left: calc(var(--mat) + 22px); bottom: calc(var(--mat) + 22px); z-index: 300;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 14px;
  width: min(400px, calc(100vw - 2 * var(--mat) - 44px));
  padding: 16px 44px 16px 20px;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--red);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--red) 22%, transparent);
  transform: translateY(24px); opacity: 0; visibility: hidden;
  transition: transform .6s var(--ease-out), opacity .35s ease, visibility 0s linear .6s;
}
.check-invite.is-in { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.check-invite p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.check-invite .check-invite-hand { margin-bottom: 4px; font-family: var(--hand); font-size: 26px; line-height: 1; color: var(--red); }
.check-invite-go {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 14px; border: 0; background: var(--red); color: var(--paper);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  transition: transform .3s var(--ease-out);
}
.check-invite-go:hover { transform: translateY(-2px); }
.check-invite-go kbd { display: grid; place-items: center; min-width: 20px; height: 20px; border: 1px solid currentColor; font: inherit; font-size: 10px; }
.check-invite-close { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.check-invite-close:hover { color: var(--red); }
@media (max-width: 600px) {
  .check-invite { grid-template-columns: 1fr; left: calc(var(--mat) + 10px); right: calc(var(--mat) + 10px); width: auto; }
}

@media (max-width: 1100px) { .title-block { display: none; } }
@media (max-width: 850px) {
  :root { --mat: 6px; }
  .zones { display: none; }
  .note { font-size: 18px; max-width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .crosshair { display: none; }
  .cloud, .cloud-halo, .delta, .note { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .check-invite, .check-demo { transition: none; }
}
@media print {
  .frame, .crosshair, .title-block, .reading-progress, .check-summary, .check-layer, .check-invite { display: none; }
}

/* ---------- Intro: the sheet is plotted, then lifted ---------- */
html.intro-pending body { visibility: hidden; }
/* Hold the page's own reveals until the sheet lifts, so they play in view. */
.has-js.intro-running .reveal.is-visible { opacity: 0; transform: translateY(36px); }
.has-js.intro-running .is-visible .line-inner { transform: translateY(108%) rotate(3deg); }
.intro {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  clip-path: inset(0 0 0 0);
  transition: clip-path .85s var(--ease-in-out);
  cursor: pointer;
}
.intro.is-leaving { clip-path: inset(0 0 100% 0); }
.intro-frame { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 1; }
.intro-frame path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-plot 1.1s var(--ease-out) forwards; animation-delay: calc(var(--i) * 180ms); }
.intro-frame path:nth-child(3) { stroke: var(--line-strong); }
@keyframes intro-plot { to { stroke-dashoffset: 0; } }
.intro-center { display: grid; justify-items: center; gap: 14px; text-align: center; }
.intro-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; background: var(--block); color: var(--block-ink);
  font-size: 26px; font-weight: 700; letter-spacing: -.1em;
  animation: intro-mark 1s var(--ease-out) .25s both;
}
@keyframes intro-mark { from { opacity: 0; transform: rotate(-90deg) scale(.4); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
.intro-name { margin: 12px 0 0; font-size: clamp(34px, 5vw, 64px); font-weight: 500; letter-spacing: -.07em; line-height: 1; animation: intro-rise .8s var(--ease-out) .55s both; }
.intro-sub { margin: 0; color: var(--muted); animation: intro-rise .8s var(--ease-out) .7s both; }
@keyframes intro-rise { from { opacity: 0; transform: translateY(18px); } }
.intro-block { position: absolute; right: 64px; bottom: 64px; width: 280px; margin: 0; border: 1px solid var(--ink); font-size: 9px; }
.intro-row { display: grid; grid-template-columns: 76px 1fr; border-top: 1px solid var(--line-strong); animation: intro-rise .5s var(--ease-out) both; animation-delay: calc(.8s + var(--i) * 140ms); }
.intro-row:first-child { border-top: 0; }
.intro-row dt { padding: 6px 8px; border-right: 1px solid var(--line-strong); color: var(--muted); }
.intro-row dd { margin: 0; padding: 6px 8px; }
.intro-count { position: absolute; left: 64px; bottom: 64px; color: var(--coral-ink); font-variant-numeric: tabular-nums; }
.intro-skip { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); color: var(--muted); opacity: .7; }
@media (max-width: 600px) {
  .intro-block { right: 24px; bottom: 90px; width: auto; left: 24px; }
  .intro-count { left: 24px; bottom: 40px; }
  .intro-skip { display: none; }
}