/* Paper-and-ink skin for the older single-page tools. Loaded after each tool's own <style>, so it
   only has to remap their colour variables and undo the dark-glass effects; layout stays theirs. */
body.skin {
  --bg: var(--paper); --bg-soft: var(--paper-2);
  --panel: #FBF8F2; --panel-2: #FBF8F2; --card: #FBF8F2;
  --border: var(--line); --border-soft: var(--line);
  --text: var(--ink); --muted: #6E675C;
  --primary: var(--ink); --primary-2: var(--ink); --accent: var(--teal);
  --blue: var(--teal); --blue-hover: var(--ink);
  --green: var(--moss); --yellow: var(--ochre); --red: #A3402F;
  --green-bg: rgba(94,122,53,.12); --red-bg: rgba(163,64,47,.10);
  --shadow: none;
  --line: #DCD3C3; --panel2: var(--paper-2); --ok: var(--moss); --warn: var(--ochre); --bad: var(--red);
  background: var(--paper);
  color: var(--ink);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  body.skin { --panel: #221F1B; --panel-2: #221F1B; --card: #221F1B; --red: #E07A66; --muted: #A39A8B; --line: #3A352E; }
}
.skin .page { max-width: 1080px; padding: 0 24px; }
.skin .shell { background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; overflow: visible; }
.skin .workspace { min-height: 0; border-top: 1px solid var(--line); }
.skin .left, .skin .right { background: transparent; }
.skin .right { border-color: var(--line); }
.skin .panel, .skin .card, .skin .mini-card, .skin .check-item, .skin .bot-row, .skin .stat, .skin .result {
  background: var(--panel); border-color: var(--line); box-shadow: none; backdrop-filter: none;
}
.skin label { color: var(--ink-2); }
.skin input, .skin textarea, .skin select {
  background: var(--paper); color: var(--ink); border-color: var(--line);
}
.skin input::placeholder, .skin textarea::placeholder { color: var(--muted); }
.skin input:focus, .skin textarea:focus, .skin select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(35,32,28,.10); }
.skin .btn, .skin button.btn { font-family: inherit; font-weight: 600; border-radius: 10px; transform: none; }
.skin .btn-primary { background: var(--ink); color: var(--paper); box-shadow: none; border: 1px solid var(--ink); }
.skin .btn-primary:hover { transform: none; opacity: .9; }
.skin .btn-secondary, .skin .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.skin .btn-secondary:hover, .skin .btn-ghost:hover { background: var(--paper-2); }
.skin .example-chip, .skin .chip, .skin .preset { background: transparent; color: var(--ink-2); border-color: var(--line); font-weight: 500; }
.skin .example-chip:hover, .skin .chip:hover, .skin .preset:hover { background: var(--paper-2); }
.skin .eyebrow { color: var(--muted); font-weight: 600; letter-spacing: .06em; }
.skin .good, .skin .badge.good { background: rgba(94,122,53,.14); color: var(--moss); }
.skin .warn, .skin .badge.warn { background: rgba(160,114,26,.14); color: var(--ochre); }
.skin .bad, .skin .badge.bad { background: rgba(163,64,47,.12); color: var(--red); }
.skin .score-ring::after { background: var(--panel); border-color: var(--line); }
.skin pre, .skin code, .skin .output, .skin .code-box {
  background: var(--paper-2); color: var(--ink); border-color: var(--line);
}
.skin a { color: inherit; }

/* Intro block that replaces each tool's old dark header. */
.tool-intro { max-width: 1080px; margin: 0 auto; padding: 24px 24px 20px; }
.tool-intro .crumb { font-size: 15px; color: var(--muted); margin: 0 0 10px; }
.tool-intro .crumb a { color: var(--ink-2); }
.tool-intro h1 { font: 400 clamp(34px, 5vw, 50px)/1.08 var(--display); letter-spacing: -0.02em; margin: 0 0 12px; }
.tool-intro p.sub { font-size: 18px; color: var(--ink-2); max-width: 42em; margin: 0; }
@media (max-width: 760px) {
  .skin .page, .tool-intro { padding-left: 16px; padding-right: 16px; }
  .skin .left, .skin .right { padding-left: 0; padding-right: 0; }
}

/* Plain <button> submits on the simpler tools */
.skin form button, .skin button.primary { background: var(--ink); color: var(--paper); font-weight: 600; }
.skin .app { background: transparent; border-color: var(--line); box-shadow: none; }
.skin .app > .header { background: transparent; border-color: var(--line); justify-content: flex-end; }
.skin .container { max-width: 1080px; padding: 0 24px; }
.skin .chart-panel, .skin .stat { background: var(--panel); border-color: var(--line); }
.skin .info h2 { font: 400 26px/1.2 var(--display); margin: 32px 0 8px; }
.skin .info p, .skin .info li { color: var(--ink-2); }
.skin .tooltip { background: var(--ink); color: var(--paper); border: 0; }
.skin .tooltip b { color: var(--paper); }
.skin .note a { color: var(--ink-2); }
.skin .stat.rev .v { color: var(--moss); } .skin .stat.def .v { color: var(--red); } .skin .stat.out .v { color: var(--ink); }
@media (max-width: 760px) { .skin .container { padding: 0 16px; } }
.skin .page { margin: 0 auto; }
.skin .wrap { max-width: 1080px; padding: 8px 24px 64px; }
.skin .wrap form, .skin .wrap .msg { max-width: 760px; }
.skin .panel-head { background: transparent; border-color: var(--line); }
/* Tabs, presets, chips and toggles: selected = ink outline on paper, no blue/purple glow */
.skin .tab, .skin .policy-card, .skin .bot-card, .skin .toggle, .skin .chip, .skin .task-row, .skin .timeline-row {
  background: var(--panel); border-color: var(--line); color: var(--ink-2); box-shadow: none;
}
.skin .tab.active, .skin .chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.skin .policy-card.active { background: var(--paper-2); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.skin .policy-card h3, .skin .policy-card strong { color: var(--ink); }
.skin .toggle.active.allow { background: rgba(94,122,53,.14); border-color: var(--moss); color: var(--moss); }
.skin .toggle.active.block { background: rgba(163,64,47,.12); border-color: var(--red); color: var(--red); }
.skin .toggle.active.limit { background: rgba(160,114,26,.14); border-color: var(--ochre); color: var(--ochre); }
/* Simulations: page chrome in paper; the simulation itself keeps its dark "screen". */
body.skin-sim { background: var(--paper); }
.skin-sim .site-head { background: var(--paper); color: var(--ink); }
.skin-sim .site-head { max-width: none; padding: 14px 24px; border-bottom: 1px solid #DCD3C3; }
.skin-sim .site-head .wordmark { font-size: 22px; }
.skin-sim .site-head nav a { font-family: "Instrument Sans", system-ui, sans-serif; }
.skin-sim .site-foot { font-family: "Instrument Sans", system-ui, sans-serif; }
@media (max-width: 760px) { .skin-sim .site-head { padding: 12px 16px; } }
.skin main.workspace { max-width: none; margin: 0; padding: 0; }