/* toolbox.css — the visitor's saved list: the panel, the ＋ buttons, the toast.
   ---------------------------------------------------------------------------
   Split out of explore.css on 2026-10-05, when every tool got its own full
   page (tool/<slug>.html). The full pages load the toolbox without the list
   layer, and the panel's styles should follow the panel's script (toolbox.js)
   rather than the list engine (explore.js). Every list page links both files;
   a tool page links only this one.

   The token block below mirrors the toolbox tokens in explore.css — this file
   has to work on a page that never loads explore.css, so change the two
   blocks together, not one.
*/

:root {
  --xp-accent: var(--accent, #2dd4ff);
  --xp-gold: var(--gold, #ffd700);
  --xp-line: rgba(255, 255, 255, 0.09);
  --xp-line-soft: rgba(255, 255, 255, 0.05);
  --xp-text: var(--text, #e6faff);
  --xp-muted: rgba(230, 250, 255, 0.62);
  --xp-surface: color-mix(in srgb, var(--bg-primary, #0a0f14) 88%, transparent);
  --xp-radius-sm: 9px;
  --xp-tap: 44px;
}
@supports (backdrop-filter: blur(4px)) {
  :root { --xp-surface: color-mix(in srgb, var(--bg-primary, #0a0f14) 78%, transparent); }
}

/* The shared-toolbox banner and the panel share one width. */
.xp-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(12px, 3.4vw, 20px);
  box-sizing: border-box;
}
.xp-wrap *,
.xp-wrap *::before,
.xp-wrap *::after { box-sizing: border-box; }

/* Buttons inside the panel and the shared banner. */
.xp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--xp-text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--xp-line);
  border-radius: var(--xp-radius-sm);
  cursor: pointer;
  touch-action: manipulation;
}
.xp-btn:hover { background: rgba(255, 255, 255, 0.1); }
.xp-btn[aria-pressed="true"],
.xp-btn.xp-on {
  color: var(--xp-accent);
  background: color-mix(in srgb, var(--xp-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--xp-accent) 45%, transparent);
}
.xp-btn:disabled { opacity: 0.55; cursor: default; }
.xp-btn.xp-gold { color: var(--xp-gold); border-color: rgba(255, 215, 0, 0.35); }

/* The ＋ that toolbox.js decorates onto anything marked data-toolbox-row. */
.xp-actions { display: flex; gap: 4px; align-items: center; }
.xp-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: inherit;
  color: var(--xp-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--xp-line);
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.xp-icon:hover { color: var(--xp-text); background: rgba(255, 255, 255, 0.1); }
.xp-icon:focus-visible { outline: 2px solid var(--xp-accent); outline-offset: 1px; }
.xp-icon.xp-in {
  color: var(--xp-gold);
  background: rgba(255, 215, 0, 0.14);
  border-color: rgba(255, 215, 0, 0.4);
}

/* ------------------------------------------------------------------ toolbox */
/* The panel is a native popover (#toolbox) so opening it needs no script.
   Everything below styles the list inside it. */
.toolbox .tb-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.tb-list { list-style: none; margin: 0; padding: 0; }
.tb-group { border-bottom: 1px solid var(--xp-line-soft); }
.tb-group > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--xp-text);
  cursor: pointer;
  list-style: none;
}
.tb-group > summary::-webkit-details-marker { display: none; }
.tb-group > summary::before {
  content: '▸';
  font-size: 11px;
  color: var(--xp-accent);
  transition: transform 0.15s ease;
}
.tb-group[open] > summary::before { transform: rotate(90deg); }
.tb-group .tb-n { margin-left: auto; font-size: 11.5px; color: var(--xp-muted); font-weight: 500; }
.tb-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 8px 20px;
}
.tb-item a {
  font-size: 13px;
  color: var(--xp-text);
  text-decoration: none;
}
.tb-item a:hover { color: var(--xp-accent); }
.tb-item .tb-cat { display: block; font-size: 11px; color: var(--xp-muted); }
.tb-item .tb-acts { display: flex; gap: 3px; }
.tb-item .tb-acts button {
  width: 30px;
  height: 30px;
  font-size: 11px;
  color: var(--xp-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--xp-line);
  border-radius: 6px;
  cursor: pointer;
}
.tb-item .tb-acts button:hover { color: var(--xp-text); }
.tb-empty { padding: 18px 6px; font-size: 13px; color: var(--xp-muted); line-height: 1.7; }
.tb-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--xp-line-soft);
  font-size: 12px;
  color: var(--xp-muted);
  line-height: 1.7;
}
.tb-foot a { color: var(--xp-gold); }
.tb-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--xp-line-soft);
  margin-bottom: 4px;
}
.tb-bar button {
  min-height: 34px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  color: var(--xp-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--xp-line);
  border-radius: 8px;
  cursor: pointer;
}
.tb-bar button:hover { background: rgba(255, 255, 255, 0.1); }
.tb-bar button:disabled { opacity: 0.5; cursor: default; }
.tb-share {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--xp-text);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--xp-line);
  border-radius: 8px;
  resize: vertical;
}
.tb-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #06121a;
  background: var(--xp-gold);
  border-radius: 999px;
  text-align: center;
}
.tb-badge:empty { display: none; }

/* ------------------------------------------------------------------- toast */
.xp-toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(8px);
  z-index: 300;
  max-width: min(92vw, 460px);
  padding: 11px 15px;
  font-size: 13px;
  color: #06121a;
  background: var(--xp-accent, #2dd4ff);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.xp-toast.xp-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.xp-toast a { color: #06121a; font-weight: 700; }

/* --------------------------------------------------------------- toolbox ----
   The panel is one script, two shapes: the home page's sticky-bar popover, and
   the floating one toolbox.js builds on every other page (and now on every
   tool's own page). Both are styled here, so a visitor who saves a tool on a
   category page and opens the toolbox anywhere sees the same thing. */
.xp-tb-float {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 240;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 14px;
  font: 600 13.5px/1 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--xp-text);
  background: var(--xp-surface);
  border: 1px solid var(--xp-line);
  border-radius: 100px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
/* Clearance for the page under the floating button. toolbox.js sets
   `xp-has-float` on <html> where it builds the button, and explore.js keeps
   the toggle for the list pages. Without it the 44 px button covers the
   footer's last links at 390 px. */
html.xp-has-float body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
.xp-tb-float:hover { border-color: var(--xp-accent); color: var(--xp-accent); }
.xp-tb-float.xp-open { border-color: var(--xp-accent); color: var(--xp-accent); }

.tb-panel {
  position: fixed;
  right: 16px;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  z-index: 245;
  width: min(420px, calc(100vw - 32px));
  max-height: min(72vh, 620px);
  overflow: auto;
  padding: 14px;
  background: rgba(10, 15, 20, 0.98);
  border: 1px solid var(--xp-line);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.tb-panel[hidden] { display: none; }
.tb-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--xp-line);
  font-size: 14px;
}
.tb-head strong { flex: 1; font-weight: 800; }
.tb-head span { font-size: 12px; color: var(--xp-muted); }
.tb-x {
  width: 32px; height: 32px; font-size: 13px; line-height: 1;
  color: var(--xp-muted); background: transparent;
  border: 1px solid var(--xp-line); border-radius: 8px; cursor: pointer;
}
.tb-x:hover { color: var(--xp-text); border-color: var(--xp-accent); }
.tb-n { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--xp-muted); }
.tb-item > div:first-child { flex: 1; min-width: 0; }
.tb-cat { display: block; font-size: 11px; color: rgba(230, 250, 255, 0.4); }
.tb-acts { display: flex; gap: 4px; }
.tb-acts button {
  width: 30px; height: 30px; font-size: 12px; line-height: 1;
  color: var(--xp-muted); background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--xp-line); border-radius: 7px; cursor: pointer;
}
.tb-acts button:hover { color: var(--xp-text); border-color: var(--xp-accent); }
.tb-empty kbd {
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  padding: 1px 5px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--xp-line);
}
.tb-footer, .tb-foot {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--xp-line);
  font-size: 12px; line-height: 1.6; color: var(--xp-muted);
}
.tb-foot a, .tb-footer a { color: var(--xp-gold); }

/* A finger is not a mouse pointer: the toolbox's controls get real 44 px
   targets, and the row actions stay tappable above the full-row link. */
@media (hover: none) and (pointer: coarse) {
  .xp-icon { width: var(--xp-tap); height: var(--xp-tap); font-size: 15px; }
  .xp-btn { min-height: var(--xp-tap); }
  .xp-actions { position: relative; z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .xp-toast,
  .xp-icon,
  .tb-group > summary::before { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .xp-tb-float { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg-primary, #0a0f14); }
}