/* ==========================================================================
   ClerkWork: theme for the tool pages
   Matches the ClerkWork home page: cool grey page, white panels, one steel-blue
   accent for anything you can press, Bricolage Grotesque for page titles,
   Manrope for text and IBM Plex Mono for figures. Loaded last on every tool
   page so it overrides each page's own palette. Follows the system light/dark
   setting.

   Colour jobs (keep them strict):
     accent   = buttons, links, focus, selected, figures that matter
     good/bad = success and errors only
   The --ob-* token names are kept so the tool pages work unchanged.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --ob-paper: #f6f7f9;
  --ob-card: #ffffff;
  --ob-card-2: #f9fafb;
  --ob-sunk: #eef1f4;
  --ob-rule: #dfe3e9;
  --ob-rule-hi: #c8ced7;
  --ob-ink: #18222f;
  --ob-copy: #3f4a58;
  --ob-muted: #5b6676;
  --ob-accent: #1f5f8b;
  --ob-accent-hi: #164a6d;
  --ob-accent-ink: #ffffff;
  --ob-accent-soft: #e6eff6;
  --ob-highlight: #1f5f8b;
  --ob-highlight-soft: #eef4f9;
  --ob-highlight-ink: #164a6d;
  --ob-good: #2f7a4f;
  --ob-good-bg: #e7f3ec;
  --ob-bad: #b4372f;
  --ob-bad-bg: #fbeceb;
  --ob-warn: #9a6200;
  --ob-warn-bg: #fdf3e1;
  --ob-shadow: 0 1px 2px #18222f14, 0 8px 24px #18222f0f;
  --ob-font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ob-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --ob-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ob-radius: 10px;
  --ob-radius-sm: 6px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ob-paper: #12171e;
    --ob-card: #1a212b;
    --ob-card-2: #1f2732;
    --ob-sunk: #0e1218;
    --ob-rule: #2b3440;
    --ob-rule-hi: #3b4654;
    --ob-ink: #e7ebf0;
    --ob-copy: #bcc5d0;
    --ob-muted: #9aa5b3;
    --ob-accent: #7fb4dc;
    --ob-accent-hi: #a4cbe8;
    --ob-accent-ink: #0d1b27;
    --ob-accent-soft: #1f2e3d;
    --ob-highlight: #7fb4dc;
    --ob-highlight-soft: #1b2733;
    --ob-highlight-ink: #a4cbe8;
    --ob-good: #7cc79a;
    --ob-good-bg: #17302a;
    --ob-bad: #f08a80;
    --ob-bad-bg: #3a1f1e;
    --ob-warn: #e7b25a;
    --ob-warn-bg: #352a17;
    --ob-shadow: 0 1px 2px #0006, 0 10px 30px #0005;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ob-paper: #12171e; --ob-card: #1a212b; --ob-card-2: #1f2732; --ob-sunk: #0e1218; --ob-rule: #2b3440; --ob-rule-hi: #3b4654;
  --ob-ink: #e7ebf0; --ob-copy: #bcc5d0; --ob-muted: #9aa5b3; --ob-accent: #7fb4dc; --ob-accent-hi: #a4cbe8; --ob-accent-ink: #0d1b27; --ob-accent-soft: #1f2e3d;
  --ob-highlight: #7fb4dc; --ob-highlight-soft: #1b2733; --ob-highlight-ink: #a4cbe8; --ob-good: #7cc79a; --ob-good-bg: #17302a;
  --ob-bad: #f08a80; --ob-bad-bg: #3a1f1e; --ob-warn: #e7b25a; --ob-warn-bg: #352a17; --ob-shadow: 0 1px 2px #0006, 0 10px 30px #0005;
  color-scheme: dark;
}

/* ---------- Base ---------- */
html, body { background: var(--ob-paper) !important; background-image: none !important; }
body {
  font-family: var(--ob-font) !important;
  color: var(--ob-ink);
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
body::before, body::after { content: none !important; display: none !important; }
h1, h2, h3, h4 { font-family: var(--ob-font) !important; letter-spacing: -.01em !important; color: var(--ob-ink) !important; text-shadow: none !important; text-wrap: balance; }
h1 { font-family: var(--ob-display) !important; font-weight: 700 !important; line-height: 1.12 !important; }
h2, h3 { font-weight: 700 !important; }
::selection { background: var(--ob-accent-soft); color: var(--ob-ink); }
a { color: var(--ob-accent); }

:focus-visible {
  outline: 2px solid var(--ob-accent) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ob-accent) 22%, transparent) !important;
}

input, select, textarea, button { font-family: var(--ob-font) !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea {
  background: var(--ob-card) !important;
  border: 1px solid var(--ob-rule-hi) !important;
  color: var(--ob-ink) !important;
  border-radius: var(--ob-radius-sm) !important;
  box-shadow: none !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: var(--ob-accent) !important; }
input::placeholder, textarea::placeholder { color: var(--ob-muted) !important; opacity: .8; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--ob-accent); }
* { scrollbar-color: var(--ob-rule-hi) transparent; scrollbar-width: thin; }

/* ---------- Page header: ClerkWork name, back link, tool title ---------- */
header.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: var(--ob-card) !important; border-bottom: 1px solid var(--ob-rule) !important;
  padding: 12px max(24px, env(safe-area-inset-right, 0px)) 12px max(24px, env(safe-area-inset-left, 0px)) !important;
}
header.top { gap: 10px 20px !important; }
header.top .brand { font: 700 20px/1 var(--ob-display); color: var(--ob-ink); letter-spacing: -.01em; text-decoration: none; }
header.top .brand span { color: var(--ob-accent); }
header.top .home { padding-left: 20px; border-left: 1px solid var(--ob-rule); }
header.top h1 { font-size: 18px !important; margin: 0 !important; margin-left: auto !important; }
.home { color: var(--ob-muted) !important; font-weight: 600 !important; }
.home:hover { color: var(--ob-accent) !important; }
@media (max-width: 640px) { header.top h1 { margin-left: 0 !important; width: 100%; } }

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--ob-radius-sm) !important;
  font-family: var(--ob-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn::before, .btn::after { content: none !important; }
.btn.primary, .btn.pri, .btn.gold, .btn.green {
  background: var(--ob-accent) !important;
  border: 1px solid var(--ob-accent) !important;
  color: var(--ob-accent-ink) !important;
}
.btn.primary:hover:not(:disabled), .btn.pri:hover:not(:disabled), .btn.gold:hover:not(:disabled), .btn.green:hover:not(:disabled) {
  background: var(--ob-accent-hi) !important; border-color: var(--ob-accent-hi) !important;
}
.btn:not(.primary):not(.pri):not(.gold):not(.green) {
  background: var(--ob-card) !important;
  border: 1px solid var(--ob-rule-hi) !important;
  color: var(--ob-ink) !important;
}
.btn:not(.primary):not(.pri):not(.gold):not(.green):hover:not(:disabled) {
  border-color: var(--ob-accent) !important; color: var(--ob-accent) !important;
}
.btn.danger, .btn.warn { color: var(--ob-bad) !important; border-color: color-mix(in srgb, var(--ob-bad) 45%, transparent) !important; }
.btn:disabled, button:disabled { opacity: .45 !important; filter: none !important; cursor: not-allowed; }

/* Privacy note: quiet accent panel rather than a warning */
.privacy { background: var(--ob-highlight-soft) !important; border-color: var(--ob-rule) !important; border-left-color: var(--ob-accent) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Shared: numbers that matter get a light accent underline */
.ob-figure {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--ob-accent) 22%, transparent) 62% 94%, transparent 94%);
  padding: 0 .1em;
}
.ob-mono { font-family: var(--ob-mono); }
.ob-muted { color: var(--ob-muted); }

/* Printing: plain black on white whatever the screen theme */
@media print {
  html, body { background: #fff !important; }
  header.top { position: static; }
}