/* Shared appearance control and semantic palette. Media is never inverted. */
:root {
  --tools-bg:#f4f2eb; --tools-surface:#fbfcf7; --tools-raised:#e6eadf;
  --tools-text:#263226; --tools-muted:#626e5b; --tools-border:#bcc7b2;
  --tools-accent:#d3e798; --tools-accent-ink:#26351b;
}
html[data-theme="dark"] {
  color-scheme:dark;
  --tools-bg:#141a17; --tools-surface:#1e2721; --tools-raised:#27322a;
  --tools-text:#edf2e8; --tools-muted:#b1bdac; --tools-border:#435047;
  --tools-accent:#d3e798; --tools-accent-ink:#26351b;
  background:var(--tools-bg); color:var(--tools-text);
}
.tools-theme-control {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; min-width:44px; min-height:44px; margin:0 0 0 5px; padding:0;
  border:1px solid var(--tools-border); border-radius:999px;
  background:var(--tools-surface); color:var(--tools-text);
  font:inherit; line-height:1; letter-spacing:normal; cursor:pointer; appearance:none;
}
.tools-theme-control svg { width:20px; height:20px; flex:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; fill:none; pointer-events:none }
.tools-theme-control:hover {background:var(--tools-raised)}
.tools-theme-control:focus-visible {outline:2px solid #6e8a4c;outline-offset:3px}
html[data-theme="dark"] .tools-theme-control:focus-visible,
html[data-theme="dark"] :focus-visible {outline-color:var(--tools-accent)}
html[data-theme="dark"] body {background:var(--tools-bg);color:var(--tools-text)}
html[data-theme="dark"] ::selection {background:#d3e798;color:#172011}
html[data-theme="dark"] .top,
html[data-theme="dark"] footer {border-color:var(--tools-border)}
html[data-theme="dark"] .top .brand,
html[data-theme="dark"] .top nav a {color:var(--tools-text)}
html[data-theme="dark"] :is(.brand span,footer,.page-context,.tools-footnote,.viewer-intro) {color:var(--tools-muted)}
html[data-theme="dark"] .top nav a:hover {background:var(--tools-raised)}
html[data-theme="dark"] .top nav a[aria-current="page"] {background:#35402a;color:#e0efb4}
html[data-theme="dark"] .skip-link {background:var(--tools-accent);color:var(--tools-accent-ink)}
html[data-theme="dark"] .tools-heading .eyebrow {color:var(--tools-muted)}
html[data-theme="dark"] .tools-heading h1 em {color:#c2dba7}
html[data-theme="dark"] .tool-card {background:var(--tools-surface);border-color:var(--tools-border)}
html[data-theme="dark"] .tool-card:hover {border-color:#91a27f;box-shadow:0 12px 28px #0003}
html[data-theme="dark"] .tool-art {background:#303d2c}
html[data-theme="dark"] .viewer-tool .tool-art {background:#342d3e}
html[data-theme="dark"] .intensity-tool .tool-art {background:#41352e}
html[data-theme="dark"] .tool-category {color:#d4dec9}
html[data-theme="dark"] .viewer-tool .tool-category {color:#dfc9ed}
html[data-theme="dark"] .tool-card p {color:var(--tools-muted)}
html[data-theme="dark"] .tool-meta {color:#c0d2ad}
html[data-theme="dark"] .viewer-tool .tool-meta {color:#d1b9e0}
html[data-theme="dark"] .tool-meta>span:last-child,
html[data-theme="dark"] .tool-go {border-color:var(--tools-border)}
html[data-theme="dark"] .viewer-page :is(.workspace,.input-wrap,#embed) {background:var(--tools-surface);border-color:var(--tools-border)}
html[data-theme="dark"] .viewer-page :is(.compact h1,input,.post-caption) {color:var(--tools-text)}
html[data-theme="dark"] .viewer-page :is(.hint,.privacy,#status,.result-bar button,.result-actions button) {color:var(--tools-muted)}
html[data-theme="dark"] .viewer-page :is(.input-wrap>span,.result-actions a) {color:var(--tools-accent)}
html[data-theme="dark"] .viewer-page input::placeholder {color:#a1b29a;opacity:1}
html[data-theme="dark"] .viewer-page .input-wrap:focus-within {border-color:var(--tools-accent);box-shadow:0 0 0 3px #d3e79826}
html[data-theme="dark"] .viewer-page .primary {background:var(--tools-accent);color:var(--tools-accent-ink)}
html[data-theme="dark"] .viewer-page .primary:hover {background:#e1f1b4}
html[data-theme="dark"] .viewer-page .notice {background:var(--tools-raised);color:var(--tools-text)}
html[data-theme="dark"] .viewer-page .error {color:#ffb2a4}
html[data-theme="dark"] .viewer-page .result-bar {border-color:var(--tools-border)}
/* Intensómetro uses a nonstandard header; leave the rest of its UI unchanged. */
.site-header:has(button.tools-theme-control) nav {flex-wrap:wrap;gap:10px 18px;min-width:0}
.site-header:has(button.tools-theme-control) nav > button {min-height:44px}
@media(max-width:720px) {
  .site-header:has(button.tools-theme-control) nav {justify-content:space-between;width:100%;margin-left:0;gap:8px}
  .site-header nav button.tools-theme-control {margin-left:auto}
}
@media(max-width:360px) {.site-header:has(button.tools-theme-control) {column-gap:10px}}
@media(max-width:650px) {
  .top:has(.tools-theme-control) {flex-wrap:wrap;row-gap:8px;padding-block:12px}
  .top:has(.tools-theme-control) nav {flex-wrap:wrap;justify-content:flex-start;gap:4px;width:100%}
  .top:has(.tools-theme-control) nav a {padding-inline:9px}
  .top nav .tools-theme-control {margin-left:auto}
}
@media(prefers-reduced-motion:reduce) {.tools-theme-control {transition:none}}