/* ============================================================
   Design system page — "How this wall is built"
   The blueprint: the wall, a faint ink drafting grid, ink lines.
   Loaded after site.css (tokens, curtain, back link).
   ============================================================ */

body.system-page{
  --chalk:var(--ink);              /* lines and headings */
  --note:var(--muted);             /* annotations */
  --soft:var(--slate);             /* body copy */
  --rule:rgba(31,37,56,.16);
  background-color:var(--wall);
  background-image:
    linear-gradient(rgba(31,37,56,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,37,56,.04) 1px,transparent 1px),
    linear-gradient(rgba(31,37,56,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,37,56,.014) 1px,transparent 1px);
  background-size:48px 48px,48px 48px,8px 8px,8px 8px;
  color:var(--chalk);
}
.sys{max-width:1100px;margin:0 auto;padding:40px 32px 96px}

/* ---------- top bar ---------- */
.sys-bar{display:flex;justify-content:space-between;align-items:center;gap:16px}
.system-page .back-link{color:var(--chalk)}
.system-page .back-link:hover{color:var(--lime-deep)}
/* pinned so it's reachable anywhere on the page */
.inspect-toggle{position:fixed;top:32px;right:32px;z-index:9100;
  backdrop-filter:blur(6px);display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font:500 12px/16px 'Author',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 16px;border-radius:999px;border:1px solid rgba(31,37,56,.22);
  background:rgba(240,238,233,.88);color:var(--chalk);transition:background var(--ease),color var(--ease),border-color var(--ease)}
.inspect-toggle:hover{border-color:rgba(31,37,56,.5)}
.inspect-toggle[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.inspect-toggle kbd{font:inherit;opacity:.6;border:1px solid currentColor;border-radius:4px;padding:0 5px}

/* ---------- page head ---------- */
.sys-head{margin-top:96px;padding-bottom:40px;border-bottom:1px solid var(--rule)}
.label{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--note)}
.sys-head h1{font-size:80px;line-height:86px;font-weight:600;letter-spacing:-.02em;margin-top:24px}
.sys-head p{font-size:20px;line-height:30px;max-width:640px;margin-top:24px;color:var(--soft)}
.sys-head .meta{display:flex;justify-content:space-between;margin-top:40px}

/* ---------- sections ---------- */
.sys-sec{padding-top:96px}
.sys-sec h2{font-size:32px;line-height:40px;font-weight:500;margin-top:12px}
.sys-sec .lede{font-size:20px;line-height:30px;max-width:640px;color:var(--soft);margin-top:12px}
.sys-sec .caption{font-size:16px;line-height:24px;color:var(--note)}

/* 01 — the mark */
.mark-stage{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;margin-top:40px}
.mark-svg{width:100%;height:auto;overflow:visible;display:block}
.mark-svg .ghost{fill:none;stroke:rgba(143,212,28,.22);stroke-width:48;stroke-linecap:round;stroke-linejoin:round}
.mark-svg .ink{fill:none;stroke:var(--lime);stroke-width:48;stroke-linecap:round;stroke-linejoin:round}
.mark-svg .spine{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:5 5;opacity:.45}
.mark-svg .note-line{stroke:var(--note);stroke-width:1}
.mark-svg text{font:500 12px 'Author',sans-serif;letter-spacing:.06em;text-transform:uppercase;fill:var(--note)}
.mark-svg .pen{fill:var(--chalk)}
.mark-svg .pen-ring{fill:none;stroke:var(--chalk);stroke-width:1}
.mark-ctrl{display:flex;flex-direction:column;gap:24px}
.readout{font-size:48px;line-height:56px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.slider{width:100%;accent-color:var(--lime);height:32px;cursor:pointer}
.btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;cursor:pointer;
  font:600 15px/1 'Author',sans-serif;padding:12px 20px;border-radius:999px;border:0;
  background:var(--lime);color:var(--ink);transition:transform 200ms cubic-bezier(.2,.7,.3,1)}
.btn:hover{transform:translateY(-1px)}
.spec-list{list-style:none;border-top:1px solid var(--rule)}
.spec-list li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule);
  font-size:16px;line-height:24px}
.spec-list li span:first-child{color:var(--note)}

/* 02 — colour */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:40px}
/* swatches are framed because they're clickable (they copy their hex) */
.swatch{display:block;text-align:left;cursor:pointer;font:inherit;color:inherit;
  background:var(--paper);border:1px solid rgba(31,37,56,.22);padding:10px 10px 12px;border-radius:2px;
  box-shadow:var(--rest);
  transition:transform 260ms cubic-bezier(.2,.7,.3,1),box-shadow 260ms ease}
.swatch:hover{transform:scale(1.02);box-shadow:var(--lift)}
.swatch i{display:block;aspect-ratio:16/9;border-radius:1px;box-shadow:inset 0 0 0 1px rgba(31,37,56,.1)}
.swatch b{display:block;margin-top:10px;font-size:16px;line-height:24px;font-weight:500}
.swatch small{display:block;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--note)}
.swatch.copied small{color:var(--lime-deep)}

.checker{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;margin-top:64px;align-items:start}
.picker + .picker{margin-top:24px}
.picker .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dot{width:36px;height:36px;border-radius:50%;cursor:pointer;border:1px solid rgba(31,37,56,.25);padding:0;
  outline-offset:3px;transition:transform 160ms ease}
.dot:hover{transform:scale(1.08)}
.dot[aria-pressed="true"]{outline:2px solid var(--chalk)}
.proof{border-radius:2px;padding:32px;border:1px solid rgba(31,37,56,.16);box-shadow:var(--rest);transition:background var(--ease),color var(--ease)}
.proof .big{font-size:32px;line-height:40px;font-weight:500}
.proof .small{font-size:16px;line-height:24px;margin-top:8px}
.verdict{display:flex;align-items:baseline;gap:24px;margin-top:20px;flex-wrap:wrap}
.ratio{font-size:48px;line-height:56px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pass-list{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;border:1px solid rgba(31,37,56,.22);color:var(--note)}
.pill.ok{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.pill.no{color:var(--pink-deep);border-color:rgba(179,16,94,.45)}
.why{font-size:16px;line-height:24px;color:var(--soft);margin-top:12px;max-width:520px;min-height:48px}

/* ---------- Inspect mode ---------- */
.insp{position:fixed;inset:0;pointer-events:none;z-index:9000;display:none}
body.inspecting .insp{display:block}
body.inspecting,body.inspecting *{cursor:crosshair}
body.inspecting .inspect-toggle{cursor:pointer}
.insp-box{position:fixed;border:1px solid var(--lime-deep);background:rgba(143,212,28,.1);
  transition:all 120ms cubic-bezier(.2,.7,.3,1)}
.insp-pad{position:fixed;border:1px dashed rgba(79,122,18,.7);transition:all 120ms cubic-bezier(.2,.7,.3,1)}
.insp-tag{position:fixed;max-width:320px;background:var(--lime);color:var(--ink);border-radius:3px;
  padding:6px 9px;font:500 12px/16px 'Author',sans-serif;letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 6px 16px rgba(31,37,56,.2)}
.insp-tag b{font-weight:600}
.insp-tag span{display:block;opacity:.75}
.insp-hint{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--paper);border:1px solid rgba(31,37,56,.2);border-radius:999px;padding:8px 16px;box-shadow:var(--rest);
  font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--note)}

/* ---------- small screens ---------- */
@media (max-width:760px){
  .sys{padding:24px 16px 72px}
  .sys-head{margin-top:56px}
  .sys-head h1{font-size:48px;line-height:56px}
  .sys-head p,.sys-sec .lede{font-size:18px;line-height:28px}
  .sys-head .meta{flex-direction:column;gap:8px}
  .sys-sec{padding-top:72px}
  .mark-stage,.checker{grid-template-columns:1fr;gap:32px}
  .inspect-toggle kbd{display:none}
  .inspect-toggle{top:16px;right:16px}
}