/* ==========================================================================
   Toolbantu feature layer — theme switch, privacy badge, pin/share, related tools, workflows,
   "What next?", My Toolkit / Recently used, install card, new tool UIs.
   Loaded AFTER css/brand.css on every page. Uses only the tokens defined there.
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* ---------- Theme switch (Light / System / Dark) ---------- */
.theme-switch{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--c-line);border-radius:var(--r-pill);background:var(--c-surface)}
.theme-opt{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);width:40px;height:40px;padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--c-muted);cursor:pointer;transition:background var(--dur),color var(--dur)}
.theme-opt:hover{color:var(--c-text);background:var(--c-sunken)}
.theme-opt[aria-pressed=true]{background:var(--c-text);color:var(--c-bg)}
.theme-opt[aria-pressed=true]:hover{background:var(--c-text);color:var(--c-bg)}
.theme-opt-label{display:none}
@media (max-width:800px){
  .header-actions{width:100%}
  .theme-switch{display:grid;grid-template-columns:repeat(3,1fr);width:100%;border-radius:var(--r-md)}
  .theme-opt{width:auto;height:48px;border-radius:calc(var(--r-md) - 3px);font-size:.95rem;font-weight:var(--fw-label)}
  .theme-opt-label{display:inline}
}

/* ---------- Privacy badge (tool pages) ---------- */
.tb-privacy{display:flex;align-items:flex-start;gap:var(--sp-3);margin:var(--sp-4) 0 0;padding:var(--sp-3) var(--sp-4);max-width:34rem;border:1px solid color-mix(in srgb,var(--c-ok) 35%,var(--c-line));border-radius:var(--r-md);background:color-mix(in srgb,var(--c-ok) 7%,var(--c-surface))}
.tb-privacy .ic{margin-top:2px;color:var(--c-ok)}
.tb-privacy strong{display:block;font-size:.95rem;line-height:1.3}
.tb-privacy-sub{display:block;margin-top:2px;color:var(--c-muted);font-size:var(--fs-small);line-height:1.45}
.tb-privacy--note{border-color:var(--c-line);background:var(--c-sunken)}
.tb-privacy--note .ic{color:var(--c-muted)}
.tb-priv-hero{display:inline-flex;align-items:center;gap:var(--sp-2);margin:var(--sp-5) auto 0;padding:6px 14px 6px 10px;border:1px solid color-mix(in srgb,var(--c-ok) 35%,var(--c-line));border-radius:var(--r-pill);background:color-mix(in srgb,var(--c-ok) 7%,var(--c-surface));font-size:var(--fs-small);color:var(--c-muted)}
.tb-priv-hero .ic{color:var(--c-ok)}
.tb-priv-hero strong{color:var(--c-text)}

/* ---------- Pin + Share actions ---------- */
.tb-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.tb-act{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-4);border:1px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-text);font:inherit;font-size:.95rem;font-weight:var(--fw-label);cursor:pointer;transition:background var(--dur),border-color var(--dur)}
.tb-act:hover{background:var(--c-sunken)}
.tb-pin[aria-pressed=true]{border-color:var(--c-accent);background:var(--c-accent-soft);color:var(--c-accent-ink)}
.tb-pin[aria-pressed=true] .ic path{fill:currentColor}
.tb-pin--icon{min-height:44px;min-width:44px;padding:0;justify-content:center;border-color:transparent;background:transparent;color:var(--c-muted)}
.tb-pin--icon[aria-pressed=true]{border-color:transparent;background:transparent}

/* ---------- Related tools component ---------- */
.tb-related{margin-top:var(--sp-7)}
.tb-related h2{margin:0 0 var(--sp-4);font-size:var(--fs-h3);letter-spacing:-.01em}
.tb-rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--sp-3)}
.tb-rel{display:flex;align-items:center;gap:var(--sp-3);min-height:68px;padding:var(--sp-3) var(--sp-4);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-surface);color:var(--c-text);text-decoration:none;transition:border-color var(--dur)}
.tb-rel:hover{border-color:color-mix(in srgb,var(--c-accent) 45%,var(--c-line))}
.tb-rel-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);background:color-mix(in srgb,var(--cat,var(--tb-red)) 10%,var(--c-surface));color:var(--cat,var(--c-accent))}
html[data-theme=dark] .tb-rel-icon{color:color-mix(in srgb,var(--cat,var(--tb-red)) 45%,#fff)}
.tb-rel-text{flex:1;min-width:0}
.tb-rel-text strong{display:block;font-size:.98rem}
.tb-rel-text small{display:block;color:var(--c-muted);font-size:var(--fs-small);line-height:1.4}
.tb-rel-go{color:var(--c-muted)}
.tb-rel:hover .tb-rel-go{color:var(--c-accent-ink)}
.tb-related--article{max-width:var(--w-read);margin:var(--sp-6) auto 0;padding:0 var(--gutter)}

/* ---------- What next? panel ---------- */
.tb-next{margin-top:var(--sp-5);padding:var(--sp-5);border:1px solid var(--c-line);border-left:4px solid var(--c-accent);border-radius:var(--r-lg);background:var(--c-surface);box-shadow:var(--sh-sm);animation:tb-in .25s var(--ease) both}
@keyframes tb-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tb-next h2{margin:0;font-size:1.15rem;letter-spacing:-.01em}
.tb-next-sub{margin:var(--sp-1) 0 var(--sp-4);color:var(--c-muted);font-size:var(--fs-small)}
.tb-next-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tb-next-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:46px;padding:0 var(--sp-4);border:1px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-text);font-weight:var(--fw-label);text-decoration:none;transition:background var(--dur),border-color var(--dur)}
.tb-next-btn:hover{background:var(--c-sunken)}
.tb-next-btn.is-primary{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent)}
.tb-next-btn.is-primary:hover{background:var(--c-accent-hover);border-color:var(--c-accent-hover)}
@media (max-width:560px){.tb-next-btn{flex:1 1 100%}}

/* ---------- Workflow progress bar + handoff note ---------- */
.wf-bar{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-4);align-items:center;margin:0 0 var(--sp-4);padding:var(--sp-4);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-surface)}
.wf-title{grid-column:1;margin:0;display:flex;flex-direction:column;font-size:var(--fs-small);color:var(--c-muted)}
.wf-title strong{color:var(--c-text);font-size:1.05rem}
.wf-exit{grid-column:2;grid-row:1;min-height:44px;display:inline-flex;align-items:center;color:var(--c-muted);font-size:var(--fs-small);text-decoration:underline;text-underline-offset:3px}
.wf-steps{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.wf-steps li{display:inline-flex;align-items:center;gap:var(--sp-2);padding:4px 12px 4px 4px;border:1px solid var(--c-line);border-radius:var(--r-pill);color:var(--c-muted);font-size:var(--fs-small);font-weight:var(--fw-label)}
.wf-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--c-sunken);font-size:.78rem}
.wf-steps .is-done .wf-n{background:var(--c-ok);color:#fff}
.wf-steps .is-current{border-color:var(--c-accent);color:var(--c-text);background:var(--c-accent-soft)}
.wf-steps .is-current .wf-n{background:var(--c-accent);color:#fff}
.wf-hint{grid-column:1/-1;margin:0;color:var(--c-muted);font-size:var(--fs-small)}
.tb-handoff-note{margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--c-sunken);color:var(--c-muted);font-size:var(--fs-small)}
.tb-handoff-note.is-ok{background:color-mix(in srgb,var(--c-ok) 9%,var(--c-surface));color:var(--c-text)}
.tb-handoff-note.is-warn{background:color-mix(in srgb,#b45309 10%,var(--c-surface));color:var(--c-text)}

/* ---------- Search dropdown additions ---------- */
.sr-group{padding:var(--sp-2) var(--sp-3) var(--sp-1);color:var(--c-muted);font-size:var(--fs-label);font-weight:var(--fw-label)}
.sr-empty{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4) var(--sp-3);color:var(--c-muted);font-size:var(--fs-small)}
.sr-empty strong{color:var(--c-text);font-size:1rem}
.search-results{max-height:min(420px,60vh)}
.hero-note{margin:var(--sp-3) auto 0;max-width:34rem;color:var(--c-muted);font-size:var(--fs-small)}

/* ---------- Homepage: workflows, toolkit, recently used ---------- */
.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:var(--sp-4)}
.wf-card{display:flex;flex-direction:column;padding:var(--card-pad);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-surface);box-shadow:var(--sh-sm)}
.wf-card h3{margin:var(--sp-3) 0 var(--sp-1);font-size:var(--fs-h3)}
.wf-card p{margin:0 0 var(--sp-4);color:var(--c-muted);font-size:.95rem}
.wf-card .wf-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--c-accent-soft);color:var(--c-accent-ink)}
.wf-flow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-4);padding:0;list-style:none;font-size:var(--fs-small);font-weight:var(--fw-label)}
.wf-flow li{display:inline-flex;align-items:center;gap:var(--sp-2)}
.wf-flow li+li::before{content:"→";color:var(--c-muted)}
.wf-start{margin-top:auto;align-self:flex-start}
.kit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--sp-4)}
.kit-panel{padding:var(--card-pad);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-surface)}
.kit-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.kit-head h3{margin:0;font-size:var(--fs-h3)}
.kit-sub{margin:0 0 var(--sp-3);color:var(--c-muted);font-size:var(--fs-small)}
.kit-empty{margin:0;padding:var(--sp-4);border:1px dashed var(--c-line-strong);border-radius:var(--r-md);color:var(--c-muted);font-size:var(--fs-small)}
.kit-empty strong{display:block;color:var(--c-text);font-size:1rem}
.tk-list{display:grid;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.tk-item{display:flex;align-items:center;gap:var(--sp-1);border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-bg)}
.tk-link{flex:1;display:flex;align-items:center;gap:var(--sp-3);min-height:52px;padding:0 var(--sp-3);color:var(--c-text);font-weight:var(--fw-label);text-decoration:none}
.tk-link:hover .tk-name{color:var(--c-accent-ink);text-decoration:underline;text-underline-offset:3px}
.tk-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--cat) 10%,var(--c-surface));color:var(--cat)}
html[data-theme=dark] .tk-icon{color:color-mix(in srgb,var(--cat) 45%,#fff)}
.tk-remove{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:var(--c-muted);cursor:pointer;border-radius:var(--r-md)}
.tk-remove:hover{color:var(--c-accent-ink);background:var(--c-sunken)}
.link-btn{min-height:44px;padding:0 var(--sp-2);border:0;background:none;color:var(--c-accent-ink);font:inherit;font-size:var(--fs-small);font-weight:var(--fw-label);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* pin button beside category links */
.cat-links li{display:flex;align-items:center;border-top:1px solid var(--c-line)}
.cat-links li a{flex:1;border-top:0}

/* ---------- Install card ---------- */
.tb-install{position:fixed;z-index:60;left:var(--sp-4);bottom:max(var(--sp-4),env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4);max-width:420px;padding:var(--sp-4);border:1px solid var(--c-line-strong);border-radius:var(--r-lg);background:var(--c-surface);box-shadow:var(--sh-md);animation:tb-in .25s var(--ease) both}
.tb-install-body{flex:1 1 180px}
.tb-install-body strong{display:block}
.tb-install-body p{margin:2px 0 0;color:var(--c-muted);font-size:var(--fs-small)}
.tb-install-actions{display:flex;gap:var(--sp-2)}
.tb-install .button{min-height:44px;padding:0 var(--sp-4)}
@media (max-width:560px){.tb-install{left:var(--sp-3);right:var(--sp-3);max-width:none}.tb-install-actions{width:100%}.tb-install-actions .button{flex:1}}
.tb-install-link{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-3);border:1px solid var(--c-line);border-radius:var(--r-md);background:transparent;color:var(--c-text);font:inherit;font-size:var(--fs-small);font-weight:var(--fw-label);cursor:pointer}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3)}

/* ---------- Workflows page ---------- */
.wfp{max-width:var(--w-page);margin:0 auto;padding:var(--sp-6) var(--gutter) 0}
.wfp-hero{max-width:46rem;margin-bottom:var(--sp-6)}
.wfp-hero h1{margin:0 0 var(--sp-3);font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:var(--fw-display);letter-spacing:-.04em}
.wfp-hero p{margin:0;color:var(--c-muted);font-size:var(--fs-lead)}
.wfp-item{margin-bottom:var(--sp-5);padding:var(--card-pad);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-surface);scroll-margin-top:84px}
.wfp-item h2{margin:0 0 var(--sp-2);font-size:var(--fs-h3)}
.wfp-item>p{margin:0 0 var(--sp-4);color:var(--c-muted)}
.wfp-steps{display:grid;gap:var(--sp-3);margin:0 0 var(--sp-5);padding:0;list-style:none;counter-reset:s}
.wfp-steps li{display:grid;grid-template-columns:36px 1fr;gap:var(--sp-3);align-items:start;counter-increment:s}
.wfp-steps li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c-accent-soft);color:var(--c-accent-ink);font-weight:var(--fw-head)}
.wfp-steps strong a{color:var(--c-text);text-decoration:underline;text-underline-offset:3px}
.wfp-steps strong a:hover{color:var(--c-accent-ink)}
.wfp-steps span{display:block;color:var(--c-muted);font-size:var(--fs-small)}
.wfp-note{margin-top:var(--sp-6);padding:var(--sp-4);border-radius:var(--r-md);background:var(--c-sunken);color:var(--c-muted);font-size:var(--fs-small)}

/* ---------- Offline page ---------- */
.offline{max-width:36rem;margin:0 auto;padding:var(--sp-8) var(--gutter);text-align:center}
.offline h1{margin:0 0 var(--sp-3);font-size:var(--fs-h2)}
.offline p{color:var(--c-muted)}

/* ---------- Image Converter + Favicon Generator ---------- */
.t-color{width:64px;height:44px;padding:2px;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);background:var(--c-surface);cursor:pointer}
.fv{align-items:start}
.fv-prev{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-4);padding:var(--sp-4);border:1px solid var(--c-line);border-radius:var(--r-md);background-color:var(--c-surface);background-image:linear-gradient(45deg,var(--c-sunken) 25%,transparent 25%,transparent 75%,var(--c-sunken) 75%),linear-gradient(45deg,var(--c-sunken) 25%,transparent 25%,transparent 75%,var(--c-sunken) 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.fv-prev figure{margin:0;text-align:center}
.fv-prev canvas{display:block;margin:0 auto var(--sp-2);image-rendering:auto}
.fv-prev figcaption{padding:1px 6px;border-radius:var(--r-sm);background:var(--c-surface);color:var(--c-muted);font-size:var(--fs-meta)}
.fv-apple{border-radius:22%}
.fv-list{display:grid;gap:var(--sp-2);margin:0 0 var(--sp-4);padding:0;list-style:none}
.fv-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-surface)}
.fv-list b{display:block;font-size:.95rem;overflow-wrap:anywhere}
.fv-list small{color:var(--c-muted)}
@media (max-width:860px){.fv{grid-template-columns:minmax(0,1fr)}}