/* Shared styles for /tools/ pages. Builds on the site's tokens in /css/site.css. */
.tool-page main { padding-bottom: 2rem; }
.tool-wrap { padding-top: 2.2rem; }
.tool-head h1 { font: 780 clamp(1.8rem, 4vw, 2.4rem)/1.15 var(--sans); letter-spacing: -.02em; margin: .2rem 0 .4rem; }
.tool-head .lede { margin-bottom: .8rem; }
.tool-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; }
.tool-actions:empty { display: none; }
.t-btn.t-share { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent); }
.t-btn.t-share svg { flex: none; }
.t-share-url { flex: 1 1 18rem; min-width: 0; font-size: .8rem; color: var(--muted); }
.t-share-note { flex-basis: 100%; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tool-root { margin: 0 0 1.5rem; }
.tool-help { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: .2rem 1.1rem; margin: 1.5rem 0 .8rem; }
.tool-help summary { cursor: pointer; font-weight: 650; padding: .7rem 0; color: var(--muted); }
.tool-help[open] summary { border-bottom: 1px solid var(--line); margin-bottom: .8rem; }
.tool-privacy { color: var(--faint); font-size: .85rem; }
.tool-feedback { margin: 1.5rem 0 .25rem; padding: .7rem .9rem; border-radius: 10px; background: var(--wash); font-size: .92rem; }
.tool-feedback a { font-weight: 600; }

/* Panels and layout */
.t-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); margin: 0 0 1rem; min-width: 0; }
.t-panel > h3, .t-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .7rem; font-weight: 700; }
.t-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.t-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 860px) { .t-grid-2, .t-grid-3 { grid-template-columns: 1fr; } }
.t-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .7rem; }
.t-row:last-child { margin-bottom: 0; }
.t-spacer { flex: 1; }
.t-stack > * + * { margin-top: .7rem; }

/* Controls */
.t-label { font-size: .82rem; color: var(--muted); font-weight: 600; display: block; margin: 0 0 .3rem; }
.t-input, .t-select, .t-textarea {
  font: .95rem/1.4 var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: .5rem .65rem; min-width: 0; outline: none; }
.t-input:focus, .t-select:focus, .t-textarea:focus { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.t-input.t-mono, .t-textarea, .t-mono { font-family: var(--mono); font-size: .88rem; }
.t-textarea { width: 100%; min-height: 12rem; resize: vertical; line-height: 1.5; tab-size: 2; white-space: pre; }
.t-textarea.wrap { white-space: pre-wrap; word-break: break-all; }
.t-input.full { width: 100%; }
.t-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--muted); cursor: pointer; user-select: none; }
.t-btn { font: 600 .88rem var(--sans); border-radius: 8px; padding: .45rem .8rem; cursor: pointer; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); white-space: nowrap; }
.t-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.t-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.t-btn.danger { color: #c0392b; }
.t-btn.small { padding: .25rem .55rem; font-size: .8rem; }
.t-btn:disabled { opacity: .5; cursor: default; }
.t-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.t-seg button { font: 600 .82rem var(--sans); padding: .38rem .7rem; border: 0; background: var(--surface); color: var(--muted); cursor: pointer; border-right: 1px solid var(--line); }
.t-seg button:last-child { border-right: 0; }
.t-seg button.on { background: var(--accent); color: #fff; }

/* Tabs */
.t-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin: 0 0 1rem; flex-wrap: wrap; }
.t-tabs button { font: 600 .9rem var(--sans); padding: .55rem .9rem; border: 0; background: none; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.t-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }

/* Output */
.t-out { font: .88rem/1.5 var(--mono); background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem; white-space: pre-wrap; word-break: break-all; min-height: 2.6rem; overflow: auto; max-height: 32rem; }
.t-out.err, .t-err { color: #c0392b; }
.t-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.t-table th, .t-table td { text-align: left; padding: .4rem .55rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.t-table th { color: var(--muted); font-weight: 650; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.t-table td.t-mono, .t-table td code { font-family: var(--mono); font-size: .86rem; word-break: break-all; }
.t-table-wrap { overflow-x: auto; }
.t-kv { display: grid; grid-template-columns: max-content 1fr auto; gap: .35rem .9rem; align-items: center; font-size: .92rem; }
.t-kv dt { color: var(--muted); font-weight: 600; }
.t-kv dd { margin: 0; font-family: var(--mono); font-size: .88rem; word-break: break-all; }
.t-badge { display: inline-block; font: 700 .72rem var(--sans); padding: .12rem .5rem; border-radius: 999px; background: var(--wash); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.t-badge.ok { background: color-mix(in srgb, #27ae60 18%, transparent); color: #1e8449; }
.t-badge.err { background: color-mix(in srgb, #c0392b 16%, transparent); color: #c0392b; }
.t-badge.warn { background: color-mix(in srgb, #e67e22 18%, transparent); color: #b9650f; }
.t-hint { color: var(--faint); font-size: .84rem; margin: .3rem 0 0; }
.t-copy { font: 600 .75rem var(--sans); border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 6px; padding: .15rem .45rem; cursor: pointer; }
.t-copy:hover { color: var(--ink); }
.t-mark { background: color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 3px; }

/* Toast */
.t-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: .55rem .9rem; border-radius: 9px; font-size: .9rem; z-index: 60; opacity: 0; transition: opacity .2s; pointer-events: none; }
.t-toast.show { opacity: .95; }
.t-toast.err { background: #c0392b; color: #fff; }

/* Inline display styles (e.g. on k.field) must never defeat the hidden attribute. */
.tool-root [hidden] { display: none !important; }

/* In-page confirm/prompt (kit.confirm / kit.prompt) */
.t-dialog { border: 1px solid var(--line, #ccc); border-radius: 12px; padding: 1.1rem 1.2rem; max-width: min(28rem, 92vw); background: var(--bg, #fff); color: var(--ink, #111); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.t-dialog::backdrop { background: rgba(0,0,0,.35); }
.t-dialog-form p { margin: 0 0 .9rem; line-height: 1.45; }
.t-dialog-form .t-input { width: 100%; margin-bottom: .9rem; }
.t-dialog-actions { justify-content: flex-end; gap: .5rem; }

/* The gitwebsite app's companion (kit.companion): header chip, pairing code, panel */
.t-btn.t-companion-chip { color: var(--accent); font-weight: 650; }
.t-companion-code { font: 700 2rem/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-align: center; margin: .3rem 0 .9rem !important; }
.t-companion-uses { margin: 0 0 .9rem; padding-left: 1.2rem; line-height: 1.45; }
.t-companion-panel .t-dialog-actions, .t-companion-pair .t-dialog-actions { flex-wrap: wrap; }

/* Presentation mode (kit.present). A dark or light stage with its own colour variables, so tool
   content that uses var(--ink) etc. follows the presentation theme. Type scales with the viewport. */
.t-present { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; overflow: hidden; outline: none;
  --bg: #050608; --surface: #0e1013; --ink: #f4f2ee; --muted: #a9afb6; --faint: #6f757c; --line: #2b2f34; --wash: #1a1d21; --accent: #ff8a4c;
  --p-ok: #22c55e; --p-warn: #f59e0b; --p-bad: #ef4444; --p-rest: #38bdf8;
  background: var(--bg); color: var(--ink); font-family: var(--sans);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.t-present[data-theme="light"] { --bg: #fbfaf8; --surface: #ffffff; --ink: #121315; --muted: #4f545a; --faint: #8a9096; --line: #dcd8d2; --wash: #efebe5; --accent: #b4521f;
  --p-ok: #15803d; --p-warn: #b45309; --p-bad: #b91c1c; --p-rest: #0369a1; }
.t-present [hidden] { display: none !important; }
.t-present-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; transition: opacity .3s; position: relative; z-index: 2; }
.t-present-title { font-weight: 650; color: var(--muted); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-present-spacer { flex: 1; }
.t-present-btn { font: 600 .85rem var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .35rem .7rem; cursor: pointer; white-space: nowrap; }
.t-present-btn:hover { border-color: var(--accent); }
.t-present.idle { cursor: none; }
.t-present.idle .t-present-bar, .t-present.idle .pv-ctrls { opacity: 0; pointer-events: none; }
.t-present-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 3vw 3vh; overflow: auto; }
.t-btn.t-present-open { white-space: nowrap; }
/* Building blocks for presentation layouts */
.pv-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2vh; min-height: 0; }
.pv-huge { font: 800 min(24vw, 40vh)/.95 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.pv-big { font: 750 min(11vw, 16vh)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.pv-mid { font: 650 min(6vw, 8vh)/1.1 var(--sans); }
.pv-label { font: 700 min(3.2vw, 3.6vh)/1.1 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.pv-sub { font: 500 min(3vw, 3.4vh)/1.3 var(--sans); color: var(--muted); }
.pv-bar { width: min(86vw, 1400px); height: max(8px, 1.4vh); background: var(--wash); border-radius: 99px; overflow: hidden; }
.pv-bar > i { display: block; height: 100%; background: var(--p-ok); transition: width .2s linear; }
.pv-ctrls { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; transition: opacity .3s; }
.pv-ctrls .t-present-btn { font-size: min(1.6vw, 1.1rem); padding: .55rem 1rem; }
.pv-ok { color: var(--p-ok); } .pv-warn { color: var(--p-warn); } .pv-bad { color: var(--p-bad); } .pv-rest { color: var(--p-rest); }
.pv-grid { display: grid; gap: 2vh 2vw; width: 100%; flex: 1; align-content: center; }
.pv-card { border: 1px solid var(--line); border-radius: 18px; padding: 2vh 2vw; background: var(--surface); text-align: center; min-width: 0; }
@media (max-width: 640px) {
  .t-present-body { padding: 0 4vw 3vh; }
  .t-present-btn { padding: .3rem .5rem; font-size: .8rem; }
  .t-present-title { display: none; }
  .pv-huge { font-size: min(26vw, 30vh); }
  .pv-ctrls .t-present-btn { font-size: .95rem; }
}

.t-present-gate { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 4vh 4vw; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(2px); font-family: var(--sans); }
.t-present-gate-card { display: flex; flex-direction: column; align-items: center; gap: 1.6vh; max-width: min(90vw, 56rem); padding: 3.5vh 4vw; border: 1px solid var(--line); border-radius: 24px;
  background: var(--surface, var(--bg)); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.45); cursor: pointer; font: inherit; text-align: center; }
.t-present-gate-big { font: 800 min(6vw, 8vh)/1.1 var(--sans); padding: 1.8vh 3.5vw; border-radius: 18px; background: var(--accent); color: #fff; }
.t-present-gate-sub { font: 500 min(2.4vw, 2.6vh)/1.35 var(--sans); color: var(--muted); max-width: 60ch; }
.t-page-gate { position: fixed; z-index: 10001; --bg: #fbfaf8; --surface: #ffffff; --line: #d9d5cf; --ink: #121315; --muted: #4f545a; --accent: #b4521f; }
.t-present-fshint { background: var(--accent) !important; color: #fff !important; border-color: transparent !important; font-weight: 700; animation: t-fshint 1.6s ease-in-out 3; }
.t-present.idle .t-present-bar:has(.t-present-fshint) { opacity: 1; pointer-events: auto; }
@keyframes t-fshint { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); } }
.t-share-opts { display: inline-block; position: relative; font-size: .85rem; vertical-align: middle; }
.t-share-opts > summary { cursor: pointer; color: var(--muted); list-style: none; padding: .35rem .5rem; border-radius: 6px; }
.t-share-opts > summary::after { content: ' ▾'; }
.t-share-opts[open] > summary { color: var(--ink); }
.t-share-opts-body { position: absolute; right: 0; top: 100%; z-index: 30; min-width: 17rem; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; box-shadow: 0 8px 28px rgba(0,0,0,.18); display: grid; gap: .35rem; }
.t-share-opts-body .t-hint { margin: .2rem 0 0; font-size: .78rem; }
.t-share-modes { display: grid; gap: .2rem; margin-left: 1.4rem; }

/* Full screen for a tool's own UI (k.fullscreen): the element fills the viewport — the browser's
   full screen, or a fixed layer where that is unavailable — and the main visual fills what is left. */
.t-fs-home { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.t-fs-btn { white-space: nowrap; }
.t-fs-sidebtn { display: none; }
.t-fs .t-fs-sidebtn { display: inline-flex; }
.t-fs-sidebtn.on { color: var(--accent); }
.tool-root.t-fs, .t-fs { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100vh; width: 100dvw; height: 100dvh; max-width: none; max-height: none; margin: 0;
  box-sizing: border-box; padding: .5rem .7rem calc(.5rem + env(safe-area-inset-bottom)); background: var(--bg); color: var(--ink); overflow: auto; overscroll-behavior: contain; border-radius: 0; }
.t-fs::backdrop { background: var(--bg); }
.t-fs > .t-fs-bar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: flex-end; margin: 0 0 .4rem; pointer-events: none; }
.t-fs > .t-fs-bar > * { pointer-events: auto; }
.t-fs > .t-fs-bar .t-btn { background: var(--surface); box-shadow: var(--shadow); }
.t-fs .t-fs-visual { max-height: none; }
.t-fs.t-fs-hide-side .t-fs-side { display: none !important; }
html.t-fs-noscroll, html.t-fs-noscroll body { overflow: hidden; }
.t-fs .t-toast { z-index: 1100; }

/* ?bare=1 viewer mode (tools.js): only the tool, filling the window; header buttons in a compact bar */
html.gw-bare body > header.top, html.gw-bare body > footer.foot, html.gw-bare .tool-help, html.gw-bare .tool-privacy, html.gw-bare .tool-feedback,
html.gw-bare .tool-head > :not(.tool-actions) { display: none; }
html.gw-bare .tool-page main { padding: 0; }
html.gw-bare .tool-wrap { max-width: none; padding: .5rem .75rem .75rem; }
html.gw-bare .tool-head { margin: 0; }
html.gw-bare .tool-actions { gap: .35rem; margin: 0 0 .5rem; justify-content: flex-end; }
html.gw-bare .tool-actions .t-btn { padding: .25rem .55rem; font-size: .8rem; }
html.gw-bare .tool-root { margin: 0; }
@media (max-width: 640px) { html.gw-bare .tool-wrap { padding: .4rem .5rem .5rem; } }
/* ?embed=1 (iframes on other pages): no Works-with panel, no "Restore my settings" note */
html.gw-embed .works-with, html.gw-embed .t-share-note { display: none; }
.t-embed-note { margin: 0 auto 0 0; font-size: .8rem; align-self: center; }