/* Shared themes. Load after page CSS. Native controls work without JS. */
a[href^="mailto:"] { overflow-wrap: anywhere; }

:root {
  color-scheme: dark;
  --paper: #0f1826;
  --white: #182538;
  --ink: #f0f4fa;
  --muted: #b5c4d6;
  --line: #607997;
  --accent: #ffb58b;
  --soft: #23344b;
  --focus: #ffe182;
  --blue: #a9d8ff;
  --soft-blue: #22384d;
  --soft-orange: #3b2d26;
  --green: #b3dfc4;
  --field: #101e30;
  --field-line: #6b829f;
  --primary-ink: #172034;
  --accent-hover: #ffd0b3;
  --hub-bg: #dae6f3;
  --hub-ink: #102031;
  --hub-accent: #994020;
  --result-line: #b88a62;
  --result-ink: #f5d7bc;
  --warning-bg: #362b20;
  --warning-ink: #f2d6a8;
  --error-bg: #3a2329;
  --error-line: #d18675;
  --error-ink: #ffc8c0;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --paper: #f6f7f9;
    --white: #ffffff;
    --ink: #182d43;
    --muted: #455a70;
    --line: #7c8b9a;
    --accent: #a53f21;
    --soft: #e9eff5;
    --focus: #1b609d;
    --blue: #185983;
    --soft-blue: #e7f2fa;
    --soft-orange: #fff1e3;
    --green: #205d42;
    --field: #ffffff;
    --field-line: #7c8b9a;
    --primary-ink: #ffffff;
    --accent-hover: #832e17;
    --hub-bg: #183449;
    --hub-ink: #ffffff;
    --hub-accent: #ffb88d;
    --result-line: #aa7044;
    --result-ink: #703d1d;
    --warning-bg: #fff3d9;
    --warning-ink: #623f10;
    --error-bg: #fff0ed;
    --error-line: #b75a44;
    --error-ink: #893221;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1826;
  --white: #182538;
  --ink: #f0f4fa;
  --muted: #b5c4d6;
  --line: #607997;
  --accent: #ffb58b;
  --soft: #23344b;
  --focus: #ffe182;
  --blue: #a9d8ff;
  --soft-blue: #22384d;
  --soft-orange: #3b2d26;
  --green: #b3dfc4;
  --field: #101e30;
  --field-line: #6b829f;
  --primary-ink: #172034;
  --accent-hover: #ffd0b3;
  --hub-bg: #dae6f3;
  --hub-ink: #102031;
  --hub-accent: #994020;
  --result-line: #b88a62;
  --result-ink: #f5d7bc;
  --warning-bg: #362b20;
  --warning-ink: #f2d6a8;
  --error-bg: #3a2329;
  --error-line: #d18675;
  --error-ink: #ffc8c0;
}
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #f6f7f9;
  --white: #ffffff;
  --ink: #182d43;
  --muted: #455a70;
  --line: #7c8b9a;
  --accent: #a53f21;
  --soft: #e9eff5;
  --focus: #1b609d;
  --blue: #185983;
  --soft-blue: #e7f2fa;
  --soft-orange: #fff1e3;
  --green: #205d42;
  --field: #ffffff;
  --field-line: #7c8b9a;
  --primary-ink: #ffffff;
  --accent-hover: #832e17;
  --hub-bg: #183449;
  --hub-ink: #ffffff;
  --hub-accent: #ffb88d;
  --result-line: #aa7044;
  --result-ink: #703d1d;
  --warning-bg: #fff3d9;
  --warning-ink: #623f10;
  --error-bg: #fff0ed;
  --error-line: #b75a44;
  --error-ink: #893221;
}
@supports selector(:has(*)) {
  :root:has(#theme-dark:checked) {
    color-scheme: dark;
    --paper: #0f1826;
    --white: #182538;
    --ink: #f0f4fa;
    --muted: #b5c4d6;
    --line: #607997;
    --accent: #ffb58b;
    --soft: #23344b;
    --focus: #ffe182;
    --blue: #a9d8ff;
    --soft-blue: #22384d;
    --soft-orange: #3b2d26;
    --green: #b3dfc4;
    --field: #101e30;
    --field-line: #6b829f;
    --primary-ink: #172034;
    --accent-hover: #ffd0b3;
    --hub-bg: #dae6f3;
    --hub-ink: #102031;
    --hub-accent: #994020;
    --result-line: #b88a62;
    --result-ink: #f5d7bc;
    --warning-bg: #362b20;
    --warning-ink: #f2d6a8;
    --error-bg: #3a2329;
    --error-line: #d18675;
    --error-ink: #ffc8c0;
  }
  :root:has(#theme-dark:not(:checked)) {
    color-scheme: light;
    --paper: #f6f7f9;
    --white: #ffffff;
    --ink: #182d43;
    --muted: #455a70;
    --line: #7c8b9a;
    --accent: #a53f21;
    --soft: #e9eff5;
    --focus: #1b609d;
    --blue: #185983;
    --soft-blue: #e7f2fa;
    --soft-orange: #fff1e3;
    --green: #205d42;
    --field: #ffffff;
    --field-line: #7c8b9a;
    --primary-ink: #ffffff;
    --accent-hover: #832e17;
    --hub-bg: #183449;
    --hub-ink: #ffffff;
    --hub-accent: #ffb88d;
    --result-line: #aa7044;
    --result-ink: #703d1d;
    --warning-bg: #fff3d9;
    --warning-ink: #623f10;
    --error-bg: #fff0ed;
    --error-line: #b75a44;
    --error-ink: #893221;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--blue); text-underline-offset: 4px; }
input, select, textarea, button { font: inherit; }
button, input, select, textarea { accent-color: var(--accent); }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
.panel, .metric, .tool, .notice { background: var(--white); border-color: var(--line); }
.preview-badge, .chance-badge { background: var(--soft); color: var(--muted); }
.preview-pill { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--result-line); }
.preview-dot { background: var(--warning-ink); }
.notice-icon { color: var(--warning-ink); }
.tag { background: var(--soft-blue); color: var(--green); }
.tag.research { background: var(--soft-blue); color: var(--blue); }
.url, .tool-details { background: var(--soft); border-color: var(--line); }
.brand { color: var(--ink); }
.brand-icon, .brand-mark { background: var(--hub-bg); color: var(--hub-ink); }
.brand-dot, .eyebrow, .text-button { color: var(--accent); }
.local-note > span:first-child { color: var(--green); }
input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),
select, textarea { background: var(--field); color: var(--ink); border-color: var(--field-line); }
input[aria-invalid="true"]:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),
select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error-line); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.entry-row input[type=color] { background: var(--field); border-color: var(--field-line); }
.secondary, .add-button { background: var(--soft); color: var(--ink); border-color: var(--field-line); }
.remove-button { color: var(--muted); }
.primary, .button { background: var(--accent); color: var(--primary-ink); border-color: var(--accent); }
.primary:not(:disabled):hover, .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.wheel-hub { background: var(--hub-bg); color: var(--hub-ink); border-color: var(--white); }
.wheel-hub:not(:disabled):hover { background: var(--hub-bg); box-shadow: 0 0 0 3px var(--focus); }
.wheel-hub .brand-dot { color: var(--hub-accent); }
.pointer { border-top-color: var(--hub-bg); filter: drop-shadow(0 2px 0 var(--paper)); }
.result { background: var(--soft-orange); border-color: var(--result-line); color: var(--result-ink); }
.result-label, .result p, .result > p:first-child, .result > p:last-child { color: var(--result-ink); }
.message:not(.error), .no-js-note { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--result-line); }
.error { background: var(--error-bg); color: var(--error-ink); border-color: var(--error-line); }
summary { color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* One moon icon controls the native dark-mode checkbox. */
.theme-switcher {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0; padding: 0; border: 0;
}
.theme-switcher > input[type=checkbox][name=theme] {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  border: 0;
}
.theme-switcher > label {
  display: grid; place-items: center; width: 44px; height: 44px;
  min-width: 44px; min-height: 44px; margin: 0; padding: 10px;
  color: var(--ink); background: transparent; border: 0; border-radius: 50%;
  cursor: pointer; user-select: none;
}
.theme-switcher svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.theme-switcher > input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; }
.theme-switcher > label:hover { background: var(--soft); }
.header-inner { position: relative; padding-right: 60px; }
.header-inner > .theme-switcher { right: 0; top: 18px; }
.utility-header { position: relative; padding-right: 88px; }
.utility-header > .theme-switcher { right: 28px; top: 20px; }
.site-header:has(> .theme-switcher) { position: relative; padding-right: 98px; }
.site-header > .theme-switcher { right: 38px; top: 22px; }
.page > header:has(> .theme-switcher) { position: relative; padding-right: 60px; }
.page > header > .theme-switcher { right: 0; top: 26px; }
.site-header, .utility-header, .page > header { flex-wrap: wrap; }
.no-js-note, noscript .message {
  font-size: 13px; line-height: 1.5; padding: 9px 12px;
  margin: 0 0 18px; border: 1px solid var(--result-line); border-radius: 8px;
}
.no-js-note a, noscript .message a { color: inherit; }
.skip-link { position: absolute; left: 16px; top: -100px; padding: 12px; background: var(--white); color: var(--ink); z-index: 10; }
.skip-link:focus { top: 12px; }

/* Basic shell for new utilities; existing tools retain their own layout. */
.utility-header, .utility-main, .utility-footer { max-width: 1244px; margin: auto; }
.utility-header { display: flex; align-items: center; gap: 20px; padding: 20px 28px; border-bottom: 1px solid var(--line); }
.utility-header .brand { font-size: 28px; font-weight: 800; text-decoration: none; letter-spacing: -1px; }
.utility-header h1 { margin: 0; font-size: clamp(21px, 3.2vw, 30px); line-height: 1.25; letter-spacing: -.02em; }
.utility-header .header-link { margin-left: auto; font-size: 14px; }
.utility-main { padding: 34px 28px; }
.utility-main .page-heading { margin-bottom: 24px; }
.utility-main h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.15; margin: 8px 0 12px; }
.utility-main h2 { font-size: 22px; line-height: 1.3; margin: 0 0 12px; }
.utility-main p { line-height: 1.6; }
.utility-main .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }
.utility-main .intro, .template-help p, .privacy-details { color: var(--muted); }
.template-panel { border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.template-help { margin: 30px 0; }
.utility-main .privacy-details { border-top: 1px solid var(--line); padding-top: 16px; font-size: 14px; }
.utility-main summary { cursor: pointer; font-weight: 650; }
.utility-footer { display: flex; flex-wrap: wrap; gap: 20px; padding: 22px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
/* Dormant slots stay absent from layout/accessibility until authorised filling. */
.ad-slot[data-ad-state="empty"], .ad-slot[hidden] { display: none; }
.ad-slot[data-ad-state="filled"] {
  margin: 32px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line);
  color: var(--muted); clear: both;
}
.ad-label { margin: 0 0 10px; font-size: 12px; font-weight: 600; }
@media (max-width: 700px) {
  .utility-header, .utility-footer { padding-left: 16px; padding-right: 16px; }
  .utility-main { padding: 26px 16px; }
  .utility-header { padding-right: 76px; }
  .utility-header > .theme-switcher { right: 16px; }
  .site-header:has(> .theme-switcher) { padding-right: 78px; }
  .site-header > .theme-switcher { right: 18px; top: 18px; }
}

@media (max-width: 600px) {
  .page > header > .theme-switcher { top: 18px; }
}