/* Tools kit look — one stylesheet for every tool, restyled on the IndoImage product-pack tokens.
   The literals below are the pack palette (docs/design.md §4); on the site they resolve to the same
   custom properties src/assets/style.css already sets. Standalone (python -m http.server over
   src/tools/) the literals apply directly, so the kit still looks like itself away from the shell. */
:root {
  /* surfaces and text (pack tokens) */
  --bg: #07131f;
  --surface: #102334;
  --surface-2: #162d40;
  --border: #294457;
  --text: #f7fbff;
  --text-muted: #a9bac8;
  --canvas: #eef4f8;
  --ink-on-canvas: #07131f;
  /* accents */
  --blue: #2f80ff;
  --blue-fill: #1c66d6;
  --green: #45d483;
  --danger: #ff6d78;
  --white: #ffffff;
  /* kit aliases kept for the tool glue (tool.js reads none of these; the classes below do) */
  --card: var(--surface);
  --ink: var(--text);
  --muted: var(--text-muted);
  --line: var(--border);
  --accent: var(--blue);
  --accent-ink: var(--white);
  --err: var(--danger);
  --ok: var(--green);
  /* pack geometry: 12 px control radius, 44 px tap targets (same values as src/assets/style.css) */
  --r: var(--r-s, 12px);
  --tap: 44px;
  color-scheme: dark;
}

/* Light theme (OPEN-0466): the same token names, selected by html[data-theme="light"] - the
   attribute /assets/theme.js writes before the first paint. Only the literals change; the aliases
   above are var() references, so they follow. Standalone (python -m http.server over src/tools/,
   no shell) a page with no attribute keeps the dark default. Every pair is >= WCAG AA in both
   themes; the measured table is in docs/design/theme/reports/s1.md. */
html[data-theme="light"] {
  --bg: #f1f6fa;
  --surface: #ffffff;
  --surface-2: #e8f0f7;
  --border: #c7d5e1;
  --text: #07131f;
  --text-muted: #4a5f70;
  --canvas: #eef4f8;
  --ink-on-canvas: #07131f;
  --blue: #2f80ff;
  --blue-fill: #1c66d6;
  --green: #0f7a44;
  --danger: #b3261e;
  --white: #ffffff;
  /* the accent where it carries TEXT on a light surface: #2f80ff is AA as a border, not as ink */
  --accent: #1c66d6;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: Inter, "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}
main { max-width: 1120px; margin: 0 auto; padding: 24px 16px 64px; }
/* the site shell already frames the page; the kit only owns what is inside #app */
#app { display: grid; gap: 4px; }
header h1 { margin: 8px 0 4px; font-size: 1.75rem; }
.sub { margin: 0; color: var(--muted); }
.back { color: var(--accent); text-decoration: none; font-size: .9rem; min-height: var(--tap); display: inline-flex; align-items: center; }
.steps { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0 0 0 18px; color: var(--muted); font-size: .9rem; }
.drop { margin: 16px 0; padding: 28px; border: 2px dashed var(--border); border-radius: var(--r); background: var(--card);
  display: grid; gap: 6px; text-align: center; cursor: pointer; }
.drop:hover, .drop:focus-visible, .drop.over { border-color: var(--accent); outline: none; }
.drop:focus-visible { box-shadow: 0 0 0 2px var(--blue); }
.drop span { color: var(--muted); font-size: .9rem; }
.work { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .work { grid-template-columns: 1fr; } }
.controls, .out { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; }
.controls:empty { display: none; }
/* The output panel stays hidden until ui.js reveals it (ui.show / a status / an action), so no empty
   light --canvas paints before an image is loaded; a stray empty preview is hidden too. */
.out[hidden] { display: none !important; }
.preview:empty { display: none; }
.controls h2 { font-size: 1rem; margin: 12px 0 4px; }
.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field label, .field .label { font-weight: 600; font-size: .9rem; color: var(--text); }
.field small { color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; }
.row input[type=range] { flex: 1; }
input[type=text], input[type=number], select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r);
  min-height: var(--tap); width: 100%; background: var(--surface-2); color: var(--text); }
input[type=range] { accent-color: var(--blue); min-height: var(--tap); }
input[type=color] { min-height: var(--tap); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.toggle { display: flex; align-items: center; gap: 8px; min-height: var(--tap); margin-bottom: 10px; color: var(--text); }
.toggle input { width: 20px; height: 20px; accent-color: var(--blue); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
button { font: inherit; min-height: var(--tap); padding: 10px 16px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; }
button:hover { border-color: var(--blue); }
#app button[aria-pressed=true] { background: var(--blue-fill); color: var(--accent-ink); border-color: var(--blue-fill); }  /* kit chips only: the shell's theme toggle also carries aria-pressed */
button.primary { background: var(--blue-fill); color: var(--accent-ink); border-color: var(--blue-fill); }
button:disabled { opacity: .5; cursor: progress; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* the light pack canvas is the image surface: dark ink sits on it for AA contrast */
.preview { min-height: 120px; display: grid; gap: 8px; justify-items: center; background: var(--canvas);
  color: var(--ink-on-canvas); border-radius: var(--r); padding: 12px; }
.preview canvas, .preview img, .preview svg { max-width: 100%; height: auto;
  background: repeating-conic-gradient(rgba(7, 19, 31, .08) 0 25%, transparent 0 50%) 0 0/16px 16px; }
.preview pre, .preview textarea { width: 100%; white-space: pre-wrap; word-break: break-all; color: var(--text); background: var(--surface-2); }
.pair { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pair-figure { margin: 0; display: grid; gap: 4px; justify-items: center; }
/* tool glue that used to be inline `style` attributes (the site CSP is style-src 'self') */
.pages { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; width: 100%; }
.page-row { display: flex; gap: 8px; align-items: center; }
.page-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-wrap { position: relative; display: inline-block; }
.loupe { border: 1px solid var(--border); border-radius: 50%; position: absolute; pointer-events: none; display: none; }
.swatch { display: inline-block; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); }
.swatch-btn { width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 6px; }
.badge { position: absolute; top: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(0, 0, 0, .6);
  color: var(--white); font: 12px/1.6 system-ui, sans-serif; pointer-events: none; }
.badge.left { left: 8px; }
.badge.right { right: 8px; }
.cmp-handle { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); outline-offset: 4px; }
.cmp-knob { position: absolute; top: 50%; left: -14px; width: 26px; height: 26px; margin-top: -13px;
  border-radius: 50%; background: var(--white); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.cmp-stage { position: relative; display: inline-block; line-height: 0; touch-action: none; cursor: ew-resize; user-select: none; }
.cmp-scroller { max-width: 100%; max-height: 70vh; overflow: auto; }
.cmp-stats { justify-self: stretch; }
.cmp-table { border-collapse: collapse; font-size: .9rem; }
.cmp-cell { text-align: left; padding: 2px 12px 2px 0; }
.cmp-top { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* crop box + its eight handles sit on the pack blue; positions come from a data attribute so no
   inline style is needed (the site CSP is 'style-src self') */
.crop-stage { position: relative; }
.crop-box { position: absolute; border: 2px solid var(--blue); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35);
  cursor: move; touch-action: none; }
.crop-handle { position: absolute; width: 12px; height: 12px; background: var(--blue);
  border: 1px solid var(--white); border-radius: 2px; }
.crop-handle[data-handle=n]  { top: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.crop-handle[data-handle=s]  { bottom: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.crop-handle[data-handle=e]  { right: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.crop-handle[data-handle=w]  { left: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.crop-handle[data-handle=ne] { top: -6px; right: -6px; cursor: nesw-resize; }
.crop-handle[data-handle=nw] { top: -6px; left: -6px; cursor: nwse-resize; }
.crop-handle[data-handle=se] { bottom: -6px; right: -6px; cursor: nwse-resize; }
.crop-handle[data-handle=sw] { bottom: -6px; left: -6px; cursor: nesw-resize; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.status { min-height: 1.5em; margin: 8px 0 0; color: var(--muted); }
.status[data-kind=error] { color: var(--err); }
.status[data-kind=ok] { color: var(--ok); }
table.kv { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.kv td { border-bottom: 1px solid var(--border); padding: 4px 6px; vertical-align: top; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 14px;
  text-decoration: none; color: inherit; display: grid; gap: 4px; min-height: var(--tap); }
.card:hover { border-color: var(--accent); }
.card strong { color: var(--text); }
.card small { color: var(--muted); }
/* the /tools/ gallery (kit-gallery body) and the tool pages' privacy line */
.kit-privacy { margin: 16px 0 0; color: var(--muted); font-size: .875rem; }
.kit-cat { margin: 24px 0; }
.kit-cat h2 { font-size: 1.1rem; margin: 0 0 10px; }
.page-intro { margin: 8px 0 24px; }
.page-intro h1 { margin: 4px 0 8px; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--muted); }
.lead { margin: 0; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}