/* ---------------------------------------------------------------------------
   Shared design system for the tools hub.
   Tokens first, then primitives. Every tool page includes only this file
   plus whatever it uniquely needs.
   --------------------------------------------------------------------------- */

:root{
  --bg:#f6f7f9; --panel:#ffffff; --ink:#12151a; --muted:#646c7a;
  --line:#e3e6ec; --line-soft:#eef0f4; --accent:#3b5bfd; --accent-ink:#fff;
  --ok:#0f7a4d; --ok-bg:#e4f6ec; --no:#8a3d3d; --no-bg:#f6e7e7;
  --warn:#8a6a1f; --warn-bg:#faf1dc; --field:#fbfbfd;
  --shadow:0 1px 2px rgba(16,20,30,.05), 0 8px 24px rgba(16,20,30,.05);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:12px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0d1015; --panel:#151a21; --ink:#e8ecf2; --muted:#8d97a6;
    --line:#262d38; --line-soft:#1d232c; --accent:#6f88ff; --accent-ink:#0b0e13;
    --ok:#5fdc9e; --ok-bg:#10281e; --no:#ff9d9d; --no-bg:#2a1717;
    --warn:#e8c069; --warn-bg:#2a2214; --field:#10151b;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 var(--sans);
     -webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:1080px; margin:0 auto; padding:32px 20px 80px}
.wrap.narrow{max-width:720px}

/* ---- page header + breadcrumb ---- */
.crumb{display:flex; align-items:center; gap:8px; margin-bottom:18px; font-size:13px}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb span{color:var(--line)}
header.page{margin-bottom:22px}
header.page h1{margin:0; font-size:22px; letter-spacing:-.02em}
header.page p{margin:6px 0 0; color:var(--muted); font-size:13.5px; max-width:64ch}

/* ---- surfaces ---- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:14px;
       box-shadow:var(--shadow)}
.pad{padding:20px}

/* ---- form controls ---- */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.f{display:flex; flex-direction:column; gap:6px}
.f.c2{grid-column:span 2} .f.c3{grid-column:span 3} .f.c4{grid-column:span 4}
.f.c5{grid-column:span 5} .f.c6{grid-column:span 6} .f.c8{grid-column:span 8}
.f.c12{grid-column:span 12}
@media (max-width:760px){ .f[class*=c]{grid-column:span 12} }

label{font-size:12px; font-weight:600; letter-spacing:.03em;
      text-transform:uppercase; color:var(--muted)}
input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:9px;
  background:var(--field); color:var(--ink); font-size:14px; font-family:inherit;
}
input.mono,textarea.mono{font-family:var(--mono)}
input:focus,select:focus,textarea:focus{
  outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);
  outline-offset:1px; border-color:var(--accent)}
.hint{font-size:12px; color:var(--muted)}

.toggles{display:flex; flex-wrap:wrap; gap:8px}
.tog{display:flex; align-items:center; gap:7px; border:1px solid var(--line);
     background:var(--field); border-radius:9px; padding:8px 12px; cursor:pointer;
     font-size:13.5px; user-select:none}
.tog:has(input:checked){border-color:var(--accent);
     background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.tog input{accent-color:var(--accent); margin:0}
.tog code{font-family:var(--mono); font-size:12px; color:var(--muted)}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
.chip{border:1px solid var(--line); background:transparent; color:var(--muted);
      border-radius:999px; padding:3px 10px; font-size:12px; cursor:pointer;
      font-family:var(--mono)}
.chip:hover{border-color:var(--accent); color:var(--accent)}
.chip[aria-pressed=true]{border-color:var(--accent); color:var(--accent);
      background:color-mix(in srgb,var(--accent) 12%,transparent)}

button{font:inherit; font-weight:600; border-radius:10px; cursor:pointer;
       border:1px solid transparent}
.go{background:var(--accent); color:var(--accent-ink); padding:10px 22px; font-size:14px}
.go:disabled{opacity:.45; cursor:not-allowed}
.ghost{background:transparent; border-color:var(--line); color:var(--ink);
       padding:9px 16px; font-size:13.5px}
.ghost:hover{border-color:var(--accent); color:var(--accent)}
.actions{display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap}

/* ---- messages ---- */
.err{color:var(--no); font-size:13px; margin-top:10px}
.callout{border-radius:var(--r); padding:13px 15px; font-size:13.5px; line-height:1.5;
         display:flex; gap:11px; align-items:flex-start}
.callout .ic{flex:none; font-size:15px; line-height:1.3}
.callout .body{flex:1; min-width:0}
.callout b{display:block; margin-bottom:2px}
.callout.warn{background:var(--warn-bg); color:var(--warn)}
.callout.info{background:var(--line-soft); color:var(--muted)}
.callout.good{background:var(--ok-bg); color:var(--ok)}
.callout .cta{margin-top:9px; display:flex; gap:8px; flex-wrap:wrap}
.callout .cta button{background:transparent; border:1px solid currentColor;
      color:inherit; font-size:12.5px; padding:5px 11px; border-radius:8px; opacity:.85}
.callout .cta button:hover{opacity:1}

/* ---- results / tables ---- */
table{width:100%; border-collapse:collapse}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
   color:var(--muted); font-weight:600; padding:12px 14px;
   border-bottom:1px solid var(--line-soft)}
td{padding:10px 14px; border-bottom:1px solid var(--line-soft); font-size:14px}
tbody tr:hover{background:var(--line-soft)}
.scroll{overflow-x:auto}
.badge{display:inline-block; font-size:11.5px; font-weight:600; padding:3px 9px;
       border-radius:99px}
.b-available{background:var(--ok-bg); color:var(--ok)}
.b-likely-available{background:var(--warn-bg); color:var(--warn)}
.b-taken{background:var(--no-bg); color:var(--no)}
.b-unknown{background:var(--line-soft); color:var(--muted)}

.stats{display:flex; gap:22px; flex-wrap:wrap; align-items:baseline}
.stat b{font-size:20px; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.stat span{font-size:12px; color:var(--muted); margin-left:6px}
.stat.good b{color:var(--ok)}

/* ---- big readout, used by calculator / date diff / converter ---- */
.readout{background:var(--field); border:1px solid var(--line); border-radius:var(--r);
         padding:18px 20px; text-align:right; overflow-x:auto}
.readout .sub{font-family:var(--mono); font-size:13px; color:var(--muted);
              min-height:18px; white-space:nowrap}
.readout .main{font-family:var(--mono); font-size:32px; letter-spacing:-.02em;
               margin-top:4px; white-space:nowrap}

.keys{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px}
.keys button{padding:16px 0; font-size:17px; background:var(--field);
             border:1px solid var(--line); color:var(--ink); font-weight:500}
.keys button:hover{border-color:var(--accent)}
.keys button.op{color:var(--accent)}
.keys button.eq{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.keys button.fn{color:var(--muted); font-size:14px}
.keys button.wide{grid-column:span 2}

.kv{display:grid; grid-template-columns:1fr auto; gap:2px 16px}
.kv dt{color:var(--muted); font-size:13.5px; padding:8px 0;
       border-bottom:1px solid var(--line-soft)}
.kv dd{margin:0; padding:8px 0; text-align:right; font-variant-numeric:tabular-nums;
       font-family:var(--mono); font-size:14px; border-bottom:1px solid var(--line-soft)}
.kv dt:last-of-type,.kv dd:last-of-type{border-bottom:none}