/* ============================================================
   FRICTION LAB — shared shell design system
   Tone: an objective testing facility that measures the
   unmeasurable. Bureaucratic surfaces, cobalt interface blue,
   one acid seal, monospace specimen labels. Dead serious
   about nonsense.
   ============================================================ */

:root{
  --page:#0b0b10;            /* exam-room dark */
  --page-glow:#16161f;
  --paper:#f4f3ee;           /* off-white bureaucratic surface */
  --paper-2:#ecebe4;
  --card:#ffffff;
  --line:#d8d6cc;
  --line-dark:#b9b7ac;
  --ink:#26251f;
  --ink-dim:#6e6c62;
  --ink-faint:#9c9a8e;
  --blue:#2f5fd0;            /* cobalt interface blue */
  --blue-dark:#2449a8;
  --blue-wash:#e8eefb;
  --green:#1e8e3e;
  --red:#c5352b;
  --amber:#a07d00;
  --amber-wash:#fff8de;
  --acid:#d4ff4f;            /* inspection seal */
  --violet:#5b3aa8;
  --font-sans:'Libre Franklin','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  background:var(--page);
  color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:radial-gradient(ellipse at 50% -10%, var(--page-glow) 0%, var(--page) 60%);
}
/* faint calibration grid over the dark backdrop */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:56px 56px;
}

/* ---------- lab frame chrome (dark zone) ---------- */
.lab-topbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:#5d5a6e;
  padding:18px 22px;
}
.lab-topbar a{color:#8a87a0;text-decoration:none}
.lab-topbar a:hover{color:var(--acid)}
.lab-topbar .sep{opacity:.4}
.lab-topbar .live{color:var(--acid)}
.lab-topbar .live::before{content:"● ";animation:blink 2.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- institutional widget (paper zone) ---------- */
.widget{
  width:100%;max-width:560px;margin:0 auto;
  background:var(--card);border:1px solid var(--line);
  border-radius:4px;box-shadow:0 14px 50px rgba(0,0,0,.55);
  overflow:hidden;animation:pop .3s ease;
}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}

.whead{background:var(--blue);color:#fff;padding:18px 20px 16px}
.whead .step{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.85;margin-bottom:8px;
  display:flex;justify-content:space-between;gap:10px;
}
.whead h2{font-size:19px;line-height:1.35;font-weight:500}
.whead h2 b{font-weight:700}
.whead .sub{font-size:12.5px;opacity:.9;margin-top:6px;line-height:1.5}

.wbody{padding:18px 20px 20px}
.wfoot{border-top:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;gap:12px}
.wfoot .spacer{flex:1}

.why{
  padding:10px 20px 14px;font-size:11.5px;color:var(--ink-faint);
  line-height:1.55;border-top:1px dashed #e4e2d8;background:#fafaf6;
}
.why b{color:var(--ink-dim);font-weight:500}

/* ---------- controls ---------- */
button{
  font-family:var(--font-sans);font-size:14px;font-weight:500;
  border:none;border-radius:3px;padding:11px 24px;cursor:pointer;letter-spacing:.02em;
}
button:active{transform:scale(.98)}
button.primary{background:var(--blue);color:#fff}
button.primary:hover{background:var(--blue-dark)}
button.quiet{background:#fff;color:var(--ink-dim);border:1px solid var(--line)}
button.quiet:hover{background:#f6f5f0}
button:disabled{opacity:.45;cursor:not-allowed}

textarea,input[type=text]{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:3px;
  color:var(--ink);font-family:var(--font-sans);font-size:15px;padding:12px;
}
textarea{min-height:104px;resize:vertical;line-height:1.55}
textarea:focus,input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(47,95,208,.16)}

/* ---------- shared institutional bits ---------- */
.mono-label{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
}
.flash{
  margin:14px 0 0;padding:12px 14px;border-radius:3px;font-size:13.5px;line-height:1.5;
  background:#e9f4ec;border:1px solid #cfe8d6;color:var(--green);display:none;
}
.flash.bad{background:#fbeae8;border-color:#f0c9c4;color:var(--red)}
.flash.show{display:block;animation:pop .25s ease}

.seal{
  width:104px;height:104px;border-radius:50%;
  border:3px solid var(--acid);color:var(--acid);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-align:center;transform:rotate(-8deg);
}