/* Tool chrome — theme-aware base, with each tool free to override --tool-accent.
   Follows the same four themes as the main site (ink · bone · blueprint · phosphor),
   synced via the saved theme so a tool page matches the rest of the site. */

:root, html[data-theme="ink"] {
  color-scheme:dark;
  --tbg:#0c0e12; --tsurface:#14171d; --tsurface-2:#191d25; --tline:#262b33; --tline-2:#323844;
  --ttext:#e7e9ec; --tmuted:#8b93a1; --tinput:#0e1117; --tacc-ink:#0b0d11;
  --tool-accent:#7ca9b0; --tshadow:0 20px 44px -26px rgba(0,0,0,.75);
}
html[data-theme="bone"] {
  color-scheme:light;
  --tbg:#f4f1ea; --tsurface:#fffdf8; --tsurface-2:#f8f4ec; --tline:#e4ded1; --tline-2:#d3cbbb;
  --ttext:#1b1a16; --tmuted:#807a6d; --tinput:#f3efe6; --tacc-ink:#fff8ec;
  --tool-accent:#2f6f6a; --tshadow:0 22px 44px -30px rgba(80,64,32,.4);
}
html[data-theme="blueprint"] {
  color-scheme:dark;
  --tbg:#081521; --tsurface:#0e2233; --tsurface-2:#123047; --tline:#1d3b52; --tline-2:#2a526f;
  --ttext:#e3f1fa; --tmuted:#6f93aa; --tinput:#0a1a28; --tacc-ink:#04141f;
  --tool-accent:#54c4e6; --tshadow:0 20px 44px -24px rgba(0,8,16,.75);
}
html[data-theme="phosphor"] {
  color-scheme:dark;
  --tbg:#07090a; --tsurface:#0e1213; --tsurface-2:#131819; --tline:#1d2624; --tline-2:#2c3a36;
  --ttext:#dcf0d2; --tmuted:#6f8a6a; --tinput:#0a0f10; --tacc-ink:#0a0d06;
  --tool-accent:#76d36a; --tshadow:0 20px 44px -26px rgba(0,0,0,.8);
}
:root {
  --tmono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tsans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing:border-box; }
body.tool-shell {
  margin:0; background:var(--tbg); color:var(--ttext);
  font-family:var(--tsans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  transition:background-color .4s ease, color .4s ease;
}
a { color:inherit; text-decoration:none; }
.muted { color:var(--tmuted); }
.mono { font-family:var(--tmono); }

.tool-bar {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 22px; border-bottom:1px solid var(--tline);
  background:color-mix(in srgb, var(--tbg) 86%, transparent); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:10;
}
.tool-bar__back, .tool-bar__home { font-family:var(--tmono); font-size:12.5px; color:var(--tmuted); letter-spacing:.04em; transition:color .2s; }
.tool-bar__back:hover, .tool-bar__home:hover { color:var(--tool-accent); }
.tool-bar__home { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; }
.tool-bar__logo { flex:0 0 auto; color:var(--ttext); transition:color .2s; }
.tool-bar__home:hover .tool-bar__logo { color:var(--tool-accent); }
.tool-bar__id { display:flex; align-items:center; gap:10px; }
.tool-bar__name { font-weight:600; font-size:14px; }
.tool-bar__lock { font-family:var(--tmono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--tool-accent); border:1px solid currentColor; border-radius:999px; padding:2px 8px; }
.tool-main { max-width:860px; margin:0 auto; padding:32px 22px 80px; }

.tool-card { background:var(--tsurface); border:1px solid var(--tline); border-radius:12px; padding:22px; }
.tool-btn { display:inline-block; font-family:var(--tmono); font-size:13px; padding:10px 18px; border-radius:8px; background:var(--tool-accent); color:var(--tacc-ink); font-weight:600; cursor:pointer; border:0; transition:filter .15s, transform .15s; }
.tool-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.tool-input, .tool-textarea { width:100%; background:var(--tinput); border:1px solid var(--tline); border-radius:9px; color:var(--ttext); font:inherit; padding:12px 14px; }
.tool-textarea { font-family:var(--tmono); font-size:14px; line-height:1.6; resize:vertical; min-height:160px; }
.tool-label { display:block; font-family:var(--tmono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tmuted); margin-bottom:8px; }
.tool-h1 { font-size:1.6rem; font-weight:650; letter-spacing:-.01em; margin:0 0 6px; }
.tool-lead { color:var(--tmuted); margin:0 0 26px; }

.tool-locked { max-width:460px; margin:16vh auto; text-align:center; padding:0 22px; }
.tool-locked__icon { font-size:40px; margin:0 0 14px; }
.tool-locked h1 { font-size:1.7rem; margin:0 0 10px; }
.tool-locked__msg { color:var(--tmuted); margin:0 0 26px; }
.tool-locked .tool-btn { margin-bottom:18px; }
.tool-link { display:block; font-family:var(--tmono); font-size:12.5px; color:var(--tmuted); }
.tool-link:hover { color:var(--tool-accent); }

:focus-visible { outline:2px solid var(--tool-accent); outline-offset:2px; }

/* ---------- phones ---------------------------------------------------------
   Five tools share this shell, so the groundwork for small screens lives here:
   chrome that shrinks, targets a finger can actually hit, and 16px form text
   so iOS stops zooming the page the moment a field takes focus. Individual
   tools layer their own rules on top. */

/* A tool page may scroll down, never sideways. `clip` rather than `hidden`
   because hidden makes body a scroll container and breaks the sticky bar. */
html, body.tool-shell { overflow-x:clip; }

/* Keep the chrome clear of a notch in landscape. */
.tool-bar { padding-left:max(22px, env(safe-area-inset-left)); padding-right:max(22px, env(safe-area-inset-right)); }

@media (max-width:640px) {
  .tool-bar { padding-top:11px; padding-bottom:11px; gap:8px;
    padding-left:max(14px, env(safe-area-inset-left)); padding-right:max(14px, env(safe-area-inset-right)); }
  .tool-bar__back, .tool-bar__home { font-size:12px; }
  /* Nothing in this bar shrinks on its own, so at 375px the last item is
     pushed off the right edge. In order of what can go: the "private" badge
     (the tool is behind a login regardless), then the site name, then the
     tool's own name. */
  .tool-bar__lock { display:none; }
  .tool-bar__id { min-width:0; }
  .tool-bar__name { font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* The mark says "home" on its own, so the site name is the first thing to go
     rather than being truncated to an ellipsis. */
  .tool-bar__homename { display:none; }
  .tool-bar__back { flex:0 0 auto; }
  .tool-main { padding:22px 16px calc(64px + env(safe-area-inset-bottom)); }
  .tool-card { padding:16px; border-radius:11px; }
  .tool-h1 { font-size:1.35rem; }
  .tool-lead { margin-bottom:20px; }
  .tool-locked { margin:11vh auto; padding:0 18px; }
  .tool-textarea { min-height:130px; }
}

/* iOS zooms the viewport whenever a focused control is under 16px, which then
   leaves the page scrolled sideways. Anything typed into gets 16px on a phone
   regardless of what the individual tool asked for. */
@media (max-width:860px) {
  .tool-input, .tool-textarea,
  input[type=text], input[type=email], input[type=password], input[type=search],
  input[type=number], input[type=date], input[type=time], input[type=datetime-local],
  input[type=url], input[type=tel], select, textarea { font-size:16px; }
}

/* Fingers are not cursors. */
@media (pointer:coarse) {
  .tool-btn { min-height:44px; padding:12px 20px; }
  .tool-bar__back, .tool-bar__home { padding:8px 0; }
}

@media (prefers-reduced-motion:reduce){ * { transition:none !important; } }