/* ════════════════════════════════════════════════════════════════════════
   KEYVARN OS — /tools/ : shared UI for the free, client-side tools.
   Layers on kv-pages.css (dark cinematic system). NEW + page-local — does not
   touch the locked keyvarn.css. TWO-COLOUR CONTRACT (locked):
     INDIGO (--indigo)  = action / interactive / brand  (buttons, links, active state)
     EMERALD (--positive) = proof / result / count / ✓   (never a button, never a link)
   Everything here runs in the visitor's browser: no upload, no signup, no tracking.
   ════════════════════════════════════════════════════════════════════════ */

/* ── tool hero (compact, sits under the shared header) ─────────────────── */
.tool-hero{position:relative;padding:clamp(48px,7vw,84px) 0 clamp(28px,4vw,44px)}
.tool-hero .wrap{max-width:960px}
.tool-hero .backlink{display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);
  font-size:.82rem;color:var(--txt-dim);letter-spacing:.02em}
.tool-hero .backlink:hover{color:var(--accent-text);text-decoration:none}
.tool-hero .eyebrow{display:block;margin:22px 0 14px}
.tool-hero h1{font-size:clamp(2rem,4.6vw,3.3rem);max-width:16ch}
.tool-hero .dek{margin-top:16px;color:var(--txt-dim);font-size:clamp(1.02rem,1.6vw,1.18rem);
  line-height:1.55;max-width:60ch}
.tool-hero .local-badge{display:inline-flex;align-items:center;gap:.5em;margin-top:22px;
  padding:7px 14px;border-radius:999px;font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;
  color:var(--positive);background:var(--positive-soft);border:1px solid rgba(54,229,164,.28)}
.tool-hero .local-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--positive);
  box-shadow:0 0 10px rgba(54,229,164,.9)}

/* ── the tool panel (glass card that holds the interactive surface) ─────── */
.tool-panel{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--panel-hair);border-radius:var(--rad);box-shadow:var(--sh-card);
  padding:clamp(20px,3vw,34px);margin:0 auto;max-width:960px}
.tool-panel + .tool-panel{margin-top:26px}
.tool-panel h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.tool-panel .panel-note{color:var(--txt-faint);font-size:.9rem;margin-top:6px;line-height:1.5}

/* ── search field (finder + reference) ─────────────────────────────────── */
.tool-search{position:relative;display:flex;align-items:center}
.tool-search svg{position:absolute;left:18px;width:20px;height:20px;color:var(--txt-faint);pointer-events:none}
.tool-search input{width:100%;font-family:var(--display);font-size:1.06rem;color:var(--txt);
  background:var(--soft);border:1px solid var(--hair-2);border-radius:var(--rad-s);
  padding:16px 18px 16px 50px;transition:border-color .18s,box-shadow .18s}
.tool-search input::placeholder{color:var(--txt-faint)}
.tool-search input:focus{outline:none;border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(58,91,255,.22)}
.tool-search .clear{position:absolute;right:12px;width:30px;height:30px;border:0;border-radius:8px;
  background:transparent;color:var(--txt-faint);cursor:pointer;font-size:1.1rem;line-height:1;
  display:none;align-items:center;justify-content:center;transition:background .15s,color .15s}
.tool-search .clear:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.tool-search.has-value .clear{display:flex}

/* ── filter chips (categories) — INDIGO when active ────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{font-family:var(--mono);font-size:.78rem;letter-spacing:.01em;color:var(--txt-dim);
  background:var(--soft);border:1px solid var(--hair);border-radius:999px;padding:7px 13px;
  cursor:pointer;transition:color .15s,background .15s,border-color .15s;white-space:nowrap}
.chip:hover{color:var(--txt);border-color:var(--hair-2)}
.chip[aria-pressed="true"]{color:#fff;background:linear-gradient(180deg,var(--indigo-2),var(--indigo));
  border-color:transparent;box-shadow:0 8px 20px -10px rgba(58,91,255,.7)}
.chip .cnt{opacity:.7;margin-left:.4em;font-size:.72rem}

/* ── result meta bar — count in EMERALD (proof) ────────────────────────── */
.res-meta{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:22px 0 12px;flex-wrap:wrap}
.res-count{font-family:var(--mono);font-size:.9rem;color:var(--txt-dim)}
.res-count b{color:var(--positive);font-size:1.02rem;font-variant-numeric:tabular-nums}
.res-sort{font-family:var(--mono);font-size:.8rem;color:var(--txt-faint)}

/* ── result cards ──────────────────────────────────────────────────────── */
.res-list{display:grid;gap:10px}
.res-card{background:var(--soft);border:1px solid var(--hair);border-radius:var(--rad-s);
  padding:16px 18px;transition:border-color .16s,transform .16s,background .16s}
.res-card:hover{border-color:var(--hair-2);background:var(--soft-2);transform:translateY(-1px)}
.res-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.res-dir{font-family:var(--mono);font-size:.92rem;color:var(--accent-text);font-weight:600;
  word-break:break-word}
.res-tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--txt-faint);
  background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:6px;padding:2px 8px}
.res-desc{margin-top:8px;color:var(--txt-dim);font-size:.95rem;line-height:1.5}
.res-desc mark{background:rgba(58,91,255,.24);color:var(--txt);border-radius:3px;padding:0 2px}
.res-empty{text-align:center;padding:40px 20px;color:var(--txt-faint);font-size:.98rem}
.res-more{text-align:center;margin-top:16px}
.res-more button{font-family:var(--mono);font-size:.84rem;color:var(--accent-text);
  background:transparent;border:1px solid var(--hair-2);border-radius:999px;padding:10px 22px;cursor:pointer;
  transition:background .15s,border-color .15s}
.res-more button:hover{background:rgba(58,91,255,.10);border-color:var(--indigo)}

/* ── forms (generator) ─────────────────────────────────────────────────── */
.tf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 20px}
@media(max-width:640px){.tf-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.86rem;font-weight:600;color:var(--txt-dim)}
.field .lhint{font-weight:400;color:var(--txt-faint);font-size:.8rem;margin-left:.4em}
.field input,.field select,.field textarea{font-family:var(--display);font-size:.98rem;color:var(--txt);
  background:var(--soft);border:1px solid var(--hair-2);border-radius:var(--rad-xs);padding:11px 13px;
  transition:border-color .16s,box-shadow .16s;width:100%}
.field textarea{font-family:var(--mono);font-size:.9rem;line-height:1.5;resize:vertical;min-height:84px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(58,91,255,.20)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237B879C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
.seg{display:flex;gap:0;border:1px solid var(--hair-2);border-radius:var(--rad-xs);overflow:hidden;width:max-content;max-width:100%}
.seg button{font-family:var(--display);font-size:.88rem;font-weight:600;color:var(--txt-dim);
  background:var(--soft);border:0;padding:10px 16px;cursor:pointer;transition:color .15s,background .15s}
.seg button + button{border-left:1px solid var(--hair-2)}
.seg button[aria-pressed="true"]{color:#fff;background:linear-gradient(180deg,var(--indigo-2),var(--indigo))}
.tf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;align-items:center}

/* ── code / output block with copy ─────────────────────────────────────── */
.codeblock{position:relative;background:#06080F;border:1px solid var(--hair);border-radius:var(--rad-s);
  margin-top:4px;overflow:hidden}
.codeblock .cb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--hair);background:rgba(255,255,255,.02)}
.codeblock .cb-name{font-family:var(--mono);font-size:.78rem;color:var(--txt-faint);letter-spacing:.02em}
.codeblock pre{margin:0;padding:16px 18px;overflow-x:auto;max-height:60vh}
.codeblock code{font-family:var(--mono);font-size:.86rem;line-height:1.6;color:#D7E0F5;white-space:pre;tab-size:2}
.copy-btn{display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);font-size:.76rem;
  color:var(--accent-text);background:rgba(58,91,255,.10);border:1px solid var(--hair-2);
  border-radius:8px;padding:6px 12px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.copy-btn:hover{background:rgba(58,91,255,.18);border-color:var(--indigo)}
.copy-btn.done{color:var(--positive);border-color:rgba(54,229,164,.4);background:var(--positive-soft)}

/* ── score meter (checker) — EMERALD/AMBER/RED by band ─────────────────── */
/* register --val so the ring fill can actually interpolate (unregistered
   custom props are discrete → the transition below would just snap).
   Ignored by older engines: value still applies, it just doesn't tween. */
@property --val{syntax:"<number>";inherits:false;initial-value:0}
.score-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.score-ring{--val:0;--col:var(--positive);position:relative;width:132px;height:132px;flex:none;border-radius:50%;
  background:conic-gradient(var(--col) calc(var(--val)*1%),rgba(255,255,255,.07) 0);
  display:grid;place-items:center;transition:--val .8s var(--ease)}
.score-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--panel)}
.score-ring .num{position:relative;font-family:var(--mono);font-weight:700;font-size:2.1rem;color:var(--txt);
  font-variant-numeric:tabular-nums}
.score-ring .num small{font-size:1rem;color:var(--txt-faint)}
.score-verdict{min-width:200px}
.score-verdict .grade{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.score-verdict h3{margin:6px 0 4px;font-size:1.3rem}
.score-verdict p{color:var(--txt-dim);font-size:.94rem;line-height:1.5}

/* ── checklist (checker + reference facets) ────────────────────────────── */
.checklist{display:grid;gap:8px;margin-top:8px}
.check-row{display:flex;gap:12px;align-items:flex-start;background:var(--soft);border:1px solid var(--hair);
  border-radius:var(--rad-xs);padding:13px 15px}
.check-row .ic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:.8rem;font-weight:800;margin-top:1px}
.check-row.pass .ic{color:var(--positive);background:var(--positive-soft);border:1px solid rgba(54,229,164,.4)}
.check-row.warn .ic{color:#FFC24B;background:rgba(255,194,75,.12);border:1px solid rgba(255,194,75,.4)}
.check-row.fail .ic{color:var(--pain-red);background:rgba(255,99,87,.12);border:1px solid rgba(255,99,87,.4)}
.check-row .ct b{font-size:.96rem;color:var(--txt)}
.check-row .ct span{display:block;color:var(--txt-faint);font-size:.86rem;margin-top:3px;line-height:1.45}

/* ── tools hub grid ────────────────────────────────────────────────────── */
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:12px}
@media(max-width:720px){.tools-grid{grid-template-columns:1fr}}
.tool-card{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--panel-hair);border-radius:var(--rad);padding:26px;text-decoration:none;color:inherit;
  box-shadow:var(--sh-card);transition:transform .16s var(--ease),box-shadow .2s,border-color .2s}
.tool-card:hover{transform:translateY(-3px);border-color:var(--hair-2);box-shadow:var(--sh-lift);text-decoration:none}
.tool-card .tc-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(58,91,255,.12);border:1px solid var(--hair-2);color:var(--accent-text);margin-bottom:16px}
.tool-card .tc-ic svg{width:22px;height:22px}
.tool-card h3{font-size:1.22rem}
.tool-card p{color:var(--txt-dim);font-size:.96rem;line-height:1.5;margin-top:8px;flex:1}
.tool-card .tc-go{margin-top:16px;font-family:var(--mono);font-size:.84rem;color:var(--accent-text);
  display:inline-flex;align-items:center;gap:.4em}
.tool-card:hover .tc-go{gap:.7em}

/* ── generic proof note strip ──────────────────────────────────────────── */
.tool-assure{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--hair)}
.tool-assure span{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);
  font-size:.82rem;color:var(--txt-dim)}
.tool-assure span::before{content:"✓";color:var(--positive);font-weight:800}

/* ── toast (copied / downloaded) ───────────────────────────────────────── */
.kv-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--panel-2);border:1px solid var(--hair-2);border-radius:999px;padding:11px 20px;
  font-family:var(--mono);font-size:.84rem;color:var(--txt);box-shadow:var(--sh-lift);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s var(--ease);z-index:90}
.kv-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.kv-toast b{color:var(--positive)}

@media(prefers-reduced-motion:reduce){
  .tool-card,.res-card,.score-ring,.kv-toast,.btn,.copy-btn{transition:none!important}
}