/*
 * Mechanical button system, shared across every proposal page.
 * Import order matters: load this AFTER the page's own <style> block,
 * since it only adds the tokens/classes below and expects the page to
 * already define --mauve-*, --accent, --s1..--s8, --tap, --display, --mono.
 * Approved defaults per the mechanical-buttons proposal. Change values
 * here once; every page that includes this file picks them up.
 */
:root {
  --te-orange: #ff5a00;
  --te-orange-fill: #cc4800;
  --te-orange-shadow: #8a3200;
  --accent-rgb: 233,61,130;
  --cta-font: var(--mono);
  --cta-size: 16px;
  --cta-tracking: .08em;
  --nav-h: 44px;
  --nav-pad-x: 16px;
  --nav-num-size: 12px;
  --press-depth: 4px;
  --glow-intensity: .55;
  --spring-duration: .45s;
  --spring-overshoot: 1px;
}
[data-case="documentary"] { --accent-rgb: 233,61,130; }
[data-case="blueprint"]   { --accent-rgb: 0,162,199; }
[data-case="ledger"]      { --accent-rgb: 70,167,88; }

/* ================= MECHANICAL KEY SYSTEM ================= */
.key { position: relative; -webkit-appearance: none; appearance: none; border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; display: inline-block; -webkit-tap-highlight-color: transparent; text-decoration: none; }
.key::before { content: ""; position: absolute; inset: -8px; background: var(--mauve-1); border: 1px solid var(--mauve-7); z-index: 0; display: none; }
.show-socket .key::before { display: block; }
.key-face {
  position: relative; z-index: 1; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, var(--mauve-5) 0%, var(--mauve-4) 45%, var(--mauve-3) 100%);
  border: 1px solid var(--mauve-7);
  color: var(--text);
  transform: translateY(0);
  transition: transform .07s cubic-bezier(.2,.8,.2,1), box-shadow .07s cubic-bezier(.2,.8,.2,1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -10px 14px -10px rgba(0,0,0,.55),
    0 var(--press-depth) 0 0 var(--mauve-1),
    0 var(--press-depth) 0 1px rgba(0,0,0,.4),
    0 16px 22px -8px rgba(0,0,0,.7);
}
.key:hover .key-face { border-color: var(--mauve-8); }
.key.is-down .key-face, .key:active .key-face {
  transform: translateY(var(--press-depth));
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 0 var(--mauve-1),
    0 1px 3px rgba(0,0,0,.5);
}
.key.is-releasing .key-face { animation-name: keyRelease; animation-duration: var(--spring-duration); animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
@keyframes keyRelease { 0% { transform: translateY(var(--press-depth)); } 55% { transform: translateY(calc(-1 * var(--spring-overshoot))); } 100% { transform: translateY(0); } }
.key-gloss { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: .8; }
.key-gloss-css { position: absolute; inset: 0; pointer-events: none; opacity: var(--glow-intensity);
  background: radial-gradient(140px 90px at 50% -10%, rgba(255,255,255,.32), transparent 65%); }
.key-label { position: relative; z-index: 2; }
.key .ico { position: relative; z-index: 2; }
.reduce-motion .key.is-releasing .key-face { animation: none; }
.reduce-motion .key-face { transition: none; }

/* key sizes / shapes reusing the same physics */
.key--cta .key-face { min-height: 56px; padding: 0 24px; font-family: var(--cta-font); font-size: var(--cta-size); letter-spacing: var(--cta-tracking); text-transform: uppercase; }
.key--cta.key--primary .key-face { background: linear-gradient(180deg, var(--mauve-11) 0%, var(--text) 60%, #dcdce0 100%); color: var(--bg); border-color: var(--mauve-11); }
.key--cta.key--primary .key-face { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -10px 14px -10px rgba(0,0,0,.25), 0 var(--press-depth) 0 0 #8f8d97, 0 var(--press-depth) 0 1px rgba(0,0,0,.3), 0 16px 24px -8px rgba(0,0,0,.6); }
.key--cta.key--primary.is-down .key-face, .key--cta.key--primary:active .key-face { box-shadow: inset 0 2px 6px rgba(0,0,0,.25), 0 0 0 0 #8f8d97, 0 1px 3px rgba(0,0,0,.4); }
/* "dark" primary (name kept for history; it's now the orange-fill primary, contrasted with .claro's inverted white fill): a fixed Teenage Engineering-style orange body with white text/icon, not tied to the per-case accent color. */
.key--cta.key--primary.key--primary-dark .key-face { background: linear-gradient(180deg, var(--te-orange-fill) 0%, var(--te-orange-fill) 60%, var(--te-orange-shadow) 100%); color: #fff; border-color: var(--te-orange-shadow); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -10px 14px -10px rgba(0,0,0,.35), 0 16px 22px -8px rgba(0,0,0,.6); }
.key--cta.key--primary.key--primary-dark .key-face svg { color: #fff; }
.key--cta.key--primary.key--primary-dark.is-down .key-face, .key--cta.key--primary.key--primary-dark:active .key-face { box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 0 var(--te-orange-shadow), 0 1px 3px rgba(0,0,0,.5); }
.key--chip .key-face { min-height: var(--tap); padding: 0 16px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.key--nav .key-face { min-height: var(--nav-h); padding: 0 var(--nav-pad-x); }
/* nav chapter key: curved top highlight + bottom rim light at rest, both flatten away when sunken (approved "depois" look) */
.key--nav-chapter .key-face {
  flex-direction: column; gap: 2px; min-width: var(--nav-h); padding: 6px var(--nav-pad-x);
  background:
    radial-gradient(120% 70% at 50% -35%, rgba(255,255,255,.4), transparent 60%),
    linear-gradient(180deg, var(--mauve-5) 0%, var(--mauve-4) 45%, var(--mauve-3) 100%);
  box-shadow:
    inset 0 -2px 0 rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -10px 14px -10px rgba(0,0,0,.55),
    0 var(--press-depth) 0 0 var(--mauve-1),
    0 var(--press-depth) 0 1px rgba(0,0,0,.4),
    0 16px 22px -8px rgba(0,0,0,.7);
}
.key--nav-chapter.is-down .key-face,
.key--nav-chapter:active .key-face,
.key--nav-chapter[aria-current] .key-face {
  background: linear-gradient(180deg, var(--mauve-4) 0%, var(--mauve-3) 100%);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 0 var(--mauve-1),
    0 1px 3px rgba(0,0,0,.5);
}
.key--nav-chapter .key-num { display: none; font-family: var(--mono); font-weight: 700; font-size: var(--nav-num-size); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.key--nav-chapter .key-label-small { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); line-height: 1; }
.key--nav-chapter[aria-current] .key-num,
.key--nav-chapter[aria-current] .key-label-small { color: var(--accent); }
.show-nav-num .key-num { display: block; }

/* glued chapter group: a shared square frame around the whole row instead of one per key.
   the frame moves with the row (width: max-content) so it never gets clipped by a
   narrower scroll viewport around it. */
.nav-track { display: flex; flex: none; width: max-content; }
.nav-track .key + .key { margin-left: -1px; }
.show-socket .nav-track .key--nav-chapter::before { display: none; }
.show-socket .nav-track { background: var(--mauve-1); border: 1px solid var(--mauve-7); padding: 8px; }
.key--icon .key-face { min-height: var(--tap); min-width: var(--tap); padding: 0 12px; }
.key--round .key-face { border-radius: 50%; width: 64px; height: 64px; padding: 0; box-shadow:
    inset 0 2px 0 rgba(255,255,255,.14), inset 0 -12px 16px -10px rgba(0,0,0,.6),
    0 var(--press-depth) 0 0 var(--mauve-1), 0 var(--press-depth) 0 1px rgba(0,0,0,.4), 0 16px 22px -8px rgba(0,0,0,.7); }
.key--round.is-down .key-face, .key--round:active .key-face { box-shadow: inset 0 3px 8px rgba(0,0,0,.6); }
.key--round .key-gloss-css { background: radial-gradient(60% 40% at 35% 15%, rgba(255,255,255,.4), transparent 65%); }