/* Job's look ("architect's desk"), from the ChatGPT design of 2026-11-05: pale drafting
   paper with a faint blueprint grid, graphite ink, one deep ink-blue accent, the machine as a
   white sheet laid on the desk. Linked always, on top of
   job.css. --brass stays the accent's name. */
:root {
  --bg: #f3e9dd; --paper: #fdfbf8; --fg: #1f2023; --muted: #4f5359; --faint: #5f636a; --line: #e2dcd3; --edge: #cfc7bb;
  --brass: #123d6a; --brass-ink: #ffffff; --ok: #2e6b3f; --warn: #8a5f00; --bad: #a3262e;
  --grid-image: linear-gradient(rgba(60, 100, 160, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 100, 160, .13) 1px, transparent 1px),
    linear-gradient(rgba(60, 100, 160, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 100, 160, .065) 1px, transparent 1px),
    radial-gradient(70% 55% at 0% 0%, rgba(255, 244, 226, .9), transparent 70%), radial-gradient(80% 60% at 100% 100%, rgba(214, 196, 176, .45), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f151d; --paper: #161e28; --fg: #e8edf3; --muted: #b3bdc9; --faint: #98a3b0; --line: #243041; --edge: #34435a;
    --brass: #8db6e6; --brass-ink: #0c1420; --ok: #8cc49a; --warn: #e2b85a; --bad: #ec8a83;
    --grid-image: linear-gradient(rgba(141, 182, 230, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(141, 182, 230, .07) 1px, transparent 1px),
      linear-gradient(rgba(141, 182, 230, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(141, 182, 230, .035) 1px, transparent 1px),
      radial-gradient(90% 70% at 0% 0%, #172232, transparent 70%);
  }
}
:root[data-theme="dark"] {
  --bg: #0f151d; --paper: #161e28; --fg: #e8edf3; --muted: #b3bdc9; --faint: #98a3b0; --line: #243041; --edge: #34435a;
  --brass: #8db6e6; --brass-ink: #0c1420; --ok: #8cc49a; --warn: #e2b85a; --bad: #ec8a83;
  --grid-image: linear-gradient(rgba(141, 182, 230, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(141, 182, 230, .07) 1px, transparent 1px),
    linear-gradient(rgba(141, 182, 230, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(141, 182, 230, .035) 1px, transparent 1px),
    radial-gradient(90% 70% at 0% 0%, #172232, transparent 70%);
}

/* the desk: drafting paper with a fine blueprint grid (a stronger line every 5 squares) and soft
   light from the top left, drawn in CSS so the lines stay thin on every screen; at night the
   same grid in pale blue on ink */
.bg { background-color: var(--bg); background-image: var(--grid-image);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px, cover, cover; background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat; background-position: -1px -1px; }

/* the machine: a white sheet with a hairline edge and a soft shadow */
.machine, .step, .pass { background: var(--paper); border-color: var(--edge); box-shadow: 0 1px 2px rgba(20, 30, 45, .06), 0 18px 40px -24px rgba(20, 30, 45, .35); }
.brand::after { color: var(--brass); }