/* the hidden attribute always wins over a component's display rule (the progress line showed on load) */
[hidden] { display: none !important; }

:root { --bg:#0f1115; --panel:#181b22; --ink:#e8e8ea; --dim:#9a9ca6; --accent:#ff5252; --ok:#4caf50; --warn:#ffb300; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 880px; margin: 0 auto; padding: 2rem 1rem 4rem; }
h1 { font-size: 2.4rem; margin: 0 0 .25rem; letter-spacing: -.02em; }
.nope { color: var(--accent); }
.tag { color: var(--dim); margin: 0 0 .75rem; }
.mode { font-size: .85rem; padding: .4rem .6rem; border-radius: 6px; display:inline-block; }
.mode-zero { background: #163a1f; color: #bde5c4; }
.mode-instrumented { background: #4a3300; color: #ffe0a3; }
form.ask { background: var(--panel); padding: 1rem; border-radius: 10px; margin-top: 1rem; }
label { display:block; font-size:.9rem; color: var(--dim); margin-bottom:.25rem; }
textarea, select { width:100%; background:#0c0e12; color:var(--ink); border:1px solid #2a2e38; border-radius:6px; padding:.6rem; font:inherit; }
.row { display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; align-items:end; margin-top:.75rem; }
@media (max-width:640px) { .row { grid-template-columns: 1fr; } }
.actions { margin-top: .9rem; }
button { background: var(--accent); color:#fff; border:0; border-radius:6px; padding:.65rem 1rem; font:inherit; cursor:pointer; }
button:hover { filter: brightness(1.1); }
/* visible, high-contrast keyboard focus on every interactive control (WCAG 2.4.7 / 1.4.11) */
a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible,
input:focus-visible, summary:focus-visible {
  outline: 3px solid #8ab4f8; outline-offset: 2px; border-radius: 4px;
}
.care { background:#1f3a2a; color:#e6fff0; padding:.9rem 1.1rem; border-radius:8px; margin:1rem 0 0; border-left:4px solid #6fd39a; }
.care h2 { margin:.1rem 0 .5rem; font-size:1.1rem; }
.care ul { margin:.5rem 0 0; padding-left:1.2rem; }
.intake-error { background:#4a1f1f; color:#ffd6d6; padding:.5rem .8rem; border-radius:6px; margin:1rem 0 0; }
.hint { color: var(--dim); font-size: .8rem; margin: .5rem 0 0; }
.tone { margin-top: 1rem; }
.tone > label { color: var(--ink); font-size: .85rem; }
.tone input[type=range] { width: 100%; margin: .5rem 0 .25rem; accent-color: var(--accent); }
.tone input[type=range]:focus-visible { outline: 3px solid #8ab4f8; outline-offset: 3px; }
.tone .ticks { position: relative; height: 1.4rem; margin: 0 0 .25rem; padding: 0; list-style: none; font-size: .72rem; color: var(--dim); }
.tone .ticks li { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.tone .ticks li:first-child { transform: none; }
.tone .ticks li:last-child { transform: translateX(-100%); }
.tone-readout { margin: .35rem 0 0; font-size: .9rem; color: var(--ink); }
@media (max-width:640px) { .tone .ticks { display: none; } }
.working { margin-top: .75rem; padding: .6rem .8rem; border-radius: 6px; background:#12233a; color:#bcd6f5; font-size:.9rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.working .dim { color: var(--dim); }
.spinner { width: 1rem; height: 1rem; border: 2px solid #3a5f8f; border-top-color: transparent; border-radius: 50%; display:inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
button:disabled { filter: brightness(.7); cursor: progress; }
.result { margin-top: 1.5rem; background: var(--panel); padding: 1rem; border-radius: 10px; }
.live-status { color: var(--dim); font-size: .85rem; margin: .25rem 0; }
.result h2 small { color: var(--dim); font-weight: normal; font-size: .8em; }
pre { white-space: pre-wrap; word-wrap: break-word; background:#0c0e12; padding: 1rem; border-radius: 6px; font: 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.meta { display:flex; gap:.75rem; align-items:center; color: var(--dim); font-size:.85rem; flex-wrap: wrap; }
.meta button { background:#2a2e38; }
.balance { font-size: .85rem; margin: .5rem 0 0; }
.balance-ok { color: #bde5c4; }
.balance-off { color: #ffe0a3; }
.balance .tags { color: var(--dim); }
details { margin-top: 1rem; color: var(--dim); font-size: .9rem; }
.research { padding-left: 1.2rem; }
.research code { color: var(--warn); }
.research a { color: #8ab4f8; }
.sum { color: #777; }
.status { font-size: .8rem; }
footer { margin-top: 2rem; color: var(--dim); font-size: .85rem; }
footer a { color: #8ab4f8; }

/* Print stylesheet (5.4): print the nope itself — especially the dissertation — as clean flowing
   text on white; drop the form, controls, banners, buttons, research panel and chrome. */
@media print {
  body { background: #fff; color: #000; }
  .wrap { max-width: none; padding: 0; margin: 0; }
  header, form.ask, .tone, .actions, .hint, #working, footer,
  .meta, .balance, details, .live-status, .mode { display: none !important; }
  .result { background: #fff; padding: 0; margin: 0; border: 0; }
  .result h2 { font: 14pt/1.4 Georgia, "Times New Roman", serif; margin: 0 0 .5rem; }
  .result h2 small { color: #333; }
  pre#nope-text, #live-text {
    white-space: pre-wrap; background: #fff; color: #000; border: 0; padding: 0;
    font: 12pt/1.55 Georgia, "Times New Roman", serif;
  }
}