/* Site theme "Mono Soft" (on top of styles.css, screen only): a softer brutalist dark look.
   Charcoal instead of black, grey rules instead of white, amber #ECB03D as the one strong accent.
   Bold mono for headings, labels, buttons and numbers; a plain sans for longer text. */
@media screen {
  :root {
    --bg: #17171a; --panel: #1e1e22; --panel-2: #27272c; --line: #3a3a41; --line-strong: #55555e;
    --text: #ecebe6; --muted: #a3a2a9;
    --accent: #ecb03d; --accent-ink: #1a1408; --pop: #ff5a3c; --focus: #ecb03d;
    --exact: #5ad08a; --close: #b5d65a; --rough: #ecb03d; --far: #ff7a63;
    --radius: 0; color-scheme: dark;
    --mono: "JetBrains Mono", ui-monospace, monospace;
    --sans: "Space Grotesk", system-ui, sans-serif;
  }
  body { font-family: var(--sans); font-size: 15px; }

  /* type: bold mono where it carries the look, sans where people read */
  h1, h2, .field, .btn, .seg button, .share, .quality, .total b, .list th, .faq summary, .step, .paint-btn, .row-controls select, .card-name {
    font-family: var(--mono);
  }
  h1 { font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; font-size: clamp(30px, 5.2vw, 60px); }
  h1::after { content: "_"; color: var(--accent); }
  h2 { text-transform: uppercase; font-size: 15px; font-weight: 800; letter-spacing: 0.05em; }
  .field { text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; font-weight: 700; }
  .tagline { color: var(--muted); }

  /* structure: one quiet line weight; panels carry the frame, inner parts mostly don't */
  .panel { border: 1.5px solid var(--line); border-radius: 0; }
  /* color rows sit on the panel itself with a thin outline, not on a third, lighter layer */
  .row { border: 1px solid var(--line); border-radius: 0; background: transparent; }
  .row:hover { border-color: var(--line-strong); }
  .row.active { border-color: var(--accent); }
  .row.base { border-style: solid; box-shadow: inset 4px 0 0 var(--accent); }
  .settings, .total, .seg, .drop, .canvas-box, #chart, .card { border-radius: 0; }
  .settings, .seg { border: 1.5px solid var(--line); }
  .total { background: var(--panel-2); }
  .drop { border: 1.5px dashed var(--line-strong); }
  .drop:hover, .drop.over { border-color: var(--accent); }
  .canvas-box { border: 0; }

  .step { border-radius: 0; background: var(--pop); color: #1a0d08; font-weight: 800; }

  input[type="number"], select, .paint-btn, .chart-tools input, textarea {
    border: 1.5px solid var(--line) !important; border-radius: 0 !important; background: #19191c;
  }
  input[type="number"]:hover, select:hover, .paint-btn:hover { border-color: var(--line-strong) !important; }
  input[type="range"] { accent-color: var(--accent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .btn { border: 1.5px solid var(--line-strong); border-radius: 0; background: transparent; text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; font-weight: 700; }
  .btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 800; font-size: 14px; }
  .btn.primary:hover:not(:disabled) { background: #f2c364; color: var(--accent-ink); }

  .icon { border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--muted); }
  .icon:hover { border-color: var(--line-strong); color: var(--text); }
  .icon[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

  .seg button { text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; font-weight: 700; }
  .seg button + button { border-left: 1.5px solid var(--line); }
  .seg button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }

  .sw { border-radius: 0; border: 1px solid rgba(255,255,255,.12); }
  .card-sw { border-radius: 0; border-bottom: 0; }
  .share { font-weight: 800; }
  .quality { border-radius: 0; border: 0; text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; font-weight: 800; padding: 2px 6px; color: #17171a !important; }
  .quality.q-exact { background: var(--exact); } .quality.q-close { background: var(--close); } .quality.q-rough { background: var(--rough); } .quality.q-far { background: var(--far); }

  .total b { font-size: 26px; font-weight: 800; }
  .list th { text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
  .list td, .list th { border-color: var(--line); }

  #chart { border: 1.5px solid var(--line-strong); }
  .card { border: 1px solid transparent; background: var(--panel-2); }
  .card:hover { border-color: var(--line-strong); }
  .card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .card-name { font-size: 12px; font-weight: 700; }

  .faq summary { text-transform: uppercase; font-size: 13px; letter-spacing: 0.03em; font-weight: 700; }
  .faq summary::after { color: var(--accent); }
  .faq details { border-color: var(--line); }
  .site-footer a { text-decoration-color: var(--accent); }
  .site-footer a:hover { color: var(--accent); }
}
@media screen {
  .field .hint, .field small { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; }
  input[type="checkbox"] { accent-color: var(--accent); }
}
@media screen {
  /* Safari/WebKit draws native rounded selects; replace with a square one that matches the inputs */
  select {
    -webkit-appearance: none; appearance: none;
    height: 38px; padding: 0 30px 0 10px !important; line-height: 36px;
    font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text);
    background: #19191c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a3a2a9' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center;
  }
  select:hover { background-color: #1d1d21; }
  input[type="number"] { height: 38px; font-family: var(--mono); font-weight: 700; font-size: 14px; }
  .row-controls select { height: 34px; line-height: 32px; font-size: 12px; }
  .paint-btn { min-height: 34px; }
}

/* Printed report: stays white, but uses the same type and square edges as the site. */
@media print {
  :root {
    --mono: "JetBrains Mono", ui-monospace, monospace;
    --sans: "Space Grotesk", system-ui, sans-serif;
    --accent: #ecb03d; --line: #cfcfcf;
  }
  body { font-family: var(--sans); }
  .site-header h1, .results h2, .list-title, .list th, .total b, .ps-meta b, figcaption, .total span {
    font-family: var(--mono);
  }
  .site-header h1 { font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; }
  .site-header h1::after { content: "_"; color: var(--accent); }
  .results h2 { text-transform: uppercase; font-weight: 800; letter-spacing: 0.04em; font-size: 15px; }
  .list-title { text-transform: uppercase; font-weight: 800; letter-spacing: 0.04em; font-size: 12px; margin-top: 16px; }
  .list th { text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; color: #444; border-bottom: 1.5px solid #222; }
  .ps-meta b { text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
  figcaption { text-transform: uppercase; letter-spacing: 0.05em; font-size: 9px !important; }
  .total { border: 1.5px solid #222 !important; border-radius: 0 !important; background: #fff !important; }
  .total b { font-weight: 800; }
  .total span { text-transform: uppercase; letter-spacing: 0.05em; font-size: 9px; }
  .print-summary canvas { border-radius: 0 !important; border: 1.5px solid #222 !important; }
  .list .sw { border-radius: 0 !important; border: 1px solid rgba(0,0,0,.25); }
  .list td:nth-child(2) { font-weight: 600; }
  .list .sub { font-family: var(--sans); font-weight: 400; }
}