/* DigiStuff brand layer — palette, gradients and motion.
   Loaded last so it overrides the original Toolbench tokens. */

:root {
  --paper: #F7F9FF;
  --surface: #FFFFFF;
  --ink: #131A2E;
  --ink-soft: #5A6685;
  --line: #E1E6F5;
  --marker: #9B4DF5;
  --marker-deep: #7A2FF2;
  --signal: #17A6C9;
  --warn: #E23BE8;
  --brand-cyan: #22B8F5;
  --brand-violet: #7A2FF2;
  --brand-magenta: #E23BE8;
  --brand-gradient: linear-gradient(100deg, var(--brand-cyan), var(--brand-violet) 55%, var(--brand-magenta));
  --brand-glow: 0 10px 30px -12px color-mix(in oklab, var(--brand-violet) 55%, transparent);
}

[data-theme="dark"] {
  --paper: #0B0F1E;
  --surface: #141A30;
  --ink: #EEF1FB;
  --ink-soft: #98A3C4;
  --line: #26304F;
  --marker: #C08BFF;
  --marker-deep: #A96BFF;
  --signal: #45D3F0;
  --warn: #F374F7;
  --brand-glow: 0 10px 34px -10px color-mix(in oklab, var(--brand-magenta) 55%, transparent);
}

body {
  background:
    radial-gradient(900px 420px at 12% -8%, color-mix(in oklab, var(--brand-cyan) 14%, transparent), transparent 70%),
    radial-gradient(760px 380px at 88% 0%, color-mix(in oklab, var(--brand-magenta) 13%, transparent), transparent 70%),
    var(--paper);
  background-attachment: fixed;
}

/* --- Header / brand ------------------------------------------------- */
.tape { background: var(--brand-gradient) !important; background-size: 200% 100% !important; animation: tapeSlide 9s linear infinite; }
@keyframes tapeSlide { to { background-position: 200% 0; } }

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 0; }
.brand .mark { display: none !important; }
.brand-logo {
  height: 34px; width: auto; display: block;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), filter .35s ease;
  filter: drop-shadow(0 3px 10px color-mix(in oklab, var(--brand-violet) 35%, transparent));
}
.brand:hover .brand-logo { transform: translateY(-1px) scale(1.04); filter: drop-shadow(0 6px 16px color-mix(in oklab, var(--brand-magenta) 45%, transparent)); }

.tb-header .cats a { position: relative; transition: color .2s ease; }
.tb-header .cats a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--brand-gradient); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.tb-header .cats a:hover { color: var(--marker-deep); }
.tb-header .cats a:hover::after { transform: scaleX(1); }

/* --- Buttons -------------------------------------------------------- */
button.primary, .btn-primary, button[type="submit"], #calc, #generate, #format, #addCourse {
  background: var(--brand-gradient) !important;
  background-size: 180% 100%;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--brand-glow);
  transition: background-position .5s ease, transform .12s ease, box-shadow .25s ease;
}
button.primary:hover, .btn-primary:hover, button[type="submit"]:hover,
#calc:hover, #generate:hover, #format:hover, #addCourse:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px color-mix(in oklab, var(--brand-magenta) 60%, transparent);
}
button:active { transform: translateY(0) scale(.985); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand-violet); outline-offset: 2px;
}

.theme-toggle, .menu-btn { transition: transform .3s ease, color .2s ease; }
.theme-toggle:hover, .menu-btn:hover { transform: rotate(-12deg) scale(1.08); color: var(--marker-deep); }

/* --- Cards ---------------------------------------------------------- */
.tool-card, .cat-card, .article-card {
  position: relative; overflow: hidden;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease, border-color .28s ease;
}
.tool-card::before, .cat-card::before, .article-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(120deg, color-mix(in oklab, var(--brand-cyan) 12%, transparent), transparent 45%, color-mix(in oklab, var(--brand-magenta) 14%, transparent));
  transition: opacity .3s ease;
}
.tool-card:hover, .cat-card:hover, .article-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--brand-violet) 55%, var(--line)) !important;
  box-shadow: var(--brand-glow);
}
.tool-card:hover::before, .cat-card:hover::before, .article-card:hover::before { opacity: 1; }

/* --- Search --------------------------------------------------------- */
#toolSearch { transition: border-color .2s ease, box-shadow .25s ease, background .2s ease; }
#toolSearch:focus, #toolSearch:focus-visible {
  border-color: var(--brand-violet) !important;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand-violet) 18%, transparent) !important;
}
.results { animation: dropIn .18s ease both; box-shadow: 0 18px 40px -18px color-mix(in oklab, var(--brand-violet) 60%, transparent) !important; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.r-item { transition: background .15s ease, padding-left .15s ease; }
.r-item:hover, .r-item.active { background: color-mix(in oklab, var(--brand-violet) 8%, var(--surface)) !important; padding-left: 20px; }
.r-icon { color: var(--brand-violet) !important; }

/* --- Headline + readouts -------------------------------------------- */
.hero h1 {
  background: var(--brand-gradient);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: hueDrift 12s ease-in-out infinite alternate;
}
@keyframes hueDrift { to { background-position: 100% 0; } }

.readout.show, .readout[class*="show"] { animation: riseIn .3s ease both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

main { animation: fadeUp .45s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Segmented toggles: readable active state in both themes */
.toggle button.active,
.mode-btn.active,
.tab-btn.active {
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-violet)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px -6px color-mix(in oklab, var(--brand-violet) 70%, transparent);
}
.toggle button, .mode-btn, .tab-btn { transition: background .25s ease, color .25s ease, box-shadow .25s ease; }

/* --- Page-load & result motion -------------------------------------- */
/* Purely presentational: no element is hidden without an animation that
   restores it, so Copy/Download/search logic is unaffected. */
.page-pad > .crumbs,
.page-pad > .eyebrow,
.page-pad > h1,
.page-pad > .lede,
.page-pad > .tool-actions,
.page-pad > .card,
.page-pad > section,
main .section {
  animation: pageRise .5s cubic-bezier(.2, .8, .3, 1) both;
}
.page-pad > .eyebrow { animation-delay: .04s; }
.page-pad > h1 { animation-delay: .08s; }
.page-pad > .lede { animation-delay: .12s; }
.page-pad > .tool-actions { animation-delay: .16s; }
.page-pad > .card { animation-delay: .2s; }
.page-pad > section { animation-delay: .24s; }
main .section:nth-of-type(2) { animation-delay: .06s; }
main .section:nth-of-type(3) { animation-delay: .12s; }
main .section:nth-of-type(n+4) { animation-delay: .18s; }

@keyframes pageRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Staggered card entry inside grids */
.grid > .tool-card, .cat-grid > .cat-card, .grid > .article-card {
  animation: cardRise .45s cubic-bezier(.2, .8, .3, 1) both;
}
.grid > *:nth-child(2), .cat-grid > *:nth-child(2) { animation-delay: .05s; }
.grid > *:nth-child(3), .cat-grid > *:nth-child(3) { animation-delay: .1s; }
.grid > *:nth-child(4), .cat-grid > *:nth-child(4) { animation-delay: .15s; }
.grid > *:nth-child(5), .cat-grid > *:nth-child(5) { animation-delay: .2s; }
.grid > *:nth-child(n+6), .cat-grid > *:nth-child(n+6) { animation-delay: .25s; }

@keyframes cardRise {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to { opacity: 1; transform: none; }
}

/* Result reveal — applies to every tool readout */
.readout.show, [data-tool-result].show, .card.readout.show {
  animation: resultPop .38s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes resultPop {
  0% { opacity: 0; transform: translateY(10px) scale(.985); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.004); }
  100% { opacity: 1; transform: none; }
}
.tool-actions .act.done { animation: none; }

/* ---------- Advanced filters + admin panel ---------- */
.ds-filters{margin:-14px 0 26px;display:flex;flex-direction:column;gap:12px}
.ds-filter-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.ds-field{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-family:'Space Grotesk',sans-serif}
.ds-field select,.ds-field input{font-family:Inter,sans-serif;font-size:14px;text-transform:none;letter-spacing:0;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:9px 12px;min-width:170px;outline:none}
.ds-field select:focus-visible,.ds-field input:focus-visible{border-color:var(--marker-deep);box-shadow:0 0 0 3px #e2a63b33}
.ds-clear{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;padding:9px 14px;border-radius:8px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .15s ease,transform .1s ease}
.ds-clear:hover{border-color:var(--marker-deep);transform:translateY(-1px)}
.ds-count{font-size:12.5px;color:var(--ink-soft);margin-left:auto}
.ds-tags{display:flex;flex-wrap:wrap;gap:7px}
.ds-tag{font-size:12px;padding:5px 11px;border-radius:20px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:all .15s ease}
.ds-tag:hover{border-color:var(--marker-deep);color:var(--ink)}
.ds-tag.is-on{background:var(--marker);border-color:var(--marker-deep);color:#1E2A33;font-weight:600}
.ds-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.ds-stat{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface)}
.ds-stat .v{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700}
.ds-stat .l{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.ds-stat.good .v{color:var(--signal)}.ds-stat.bad .v{color:var(--warn)}
.ds-banner{padding:12px 14px;border-radius:10px;font-size:13.5px;border:1.5px solid var(--line)}
.ds-banner.ok{border-color:var(--signal);color:var(--signal)}
.ds-banner.bad{border-color:var(--warn);color:var(--warn)}
.ds-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.ds-list{list-style:none;margin:0;padding:0;font-size:13.5px;display:flex;flex-direction:column;gap:1px}
.ds-list li{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.ds-list li .k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-list li .n{font-family:'JetBrains Mono',monospace;color:var(--marker-deep);font-weight:700}
.ds-empty{font-size:13px;color:var(--ink-soft);margin:0}
.ds-table-wrap{overflow-x:auto;border:1.5px solid var(--line);border-radius:12px;background:var(--surface)}
.ds-table{width:100%;border-collapse:collapse;font-size:13px}
.ds-table th,.ds-table td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.ds-table th{font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.ds-table tr.is-bad{background:#b3401e12}
.ds-table a{color:var(--ink);font-weight:600}
.ds-pill{font-weight:700}
.ds-pill.ok{color:var(--signal)}.ds-pill.bad{color:var(--warn)}

/* ================= Mobile-first refinements (majority of traffic) ====== */
/* Prevent iOS input zoom: any font-size under 16px triggers auto-zoom. */
@media (max-width: 640px) {
  input, select, textarea, .tb-input, .tb-select, .tb-area, .ds-field select, .ds-field input {
    font-size: 16px !important;
  }

  /* Denser page rhythm so the tool is above the fold */
  .page-pad { padding-left: 16px !important; padding-right: 16px !important; }
  .hero h1, .page-pad > h1 { font-size: clamp(28px, 8.4vw, 38px) !important; line-height: 1.12 !important; }
  .hero .lede, .page-pad > .lede { font-size: 15.5px !important; line-height: 1.5 !important; }
  .hero { padding-top: 18px !important; padding-bottom: 12px !important; }
  main .section { margin-top: 26px !important; }
  .card { padding: 16px !important; border-radius: 14px !important; }

  /* Tap targets: 44px minimum on every control */
  button, .tb-btn, .ds-clear, .ds-tag, .act, .tool-actions a { min-height: 44px; }
  .ds-tag { min-height: 36px; display: inline-flex; align-items: center; }
  .tb-btn { width: 100%; font-size: 16px; }

  /* Tool action bar scrolls sideways instead of stacking three rows deep */
  .tool-actions {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 8px; padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .tool-actions::-webkit-scrollbar { display: none; }
  .tool-actions > * { flex: 0 0 auto; scroll-snap-align: start; }

  /* Filters: full-width fields, swipeable tag strip */
  .ds-filter-row { gap: 10px; }
  .ds-field { flex: 1 1 100%; }
  .ds-field select, .ds-field input { min-width: 0; width: 100%; }
  .ds-clear { flex: 1 1 100%; }
  .ds-count { margin-left: 0; }
  .ds-tags {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
    margin-inline: -16px; padding-inline: 16px;
  }
  .ds-tags::-webkit-scrollbar { display: none; }
  .ds-tag { flex: 0 0 auto; }

  /* Tool cards: compact, no hover lift on touch */
  .tool-card { padding: 14px !important; }
  .tool-card:hover { transform: none; }
  .grid { gap: 12px !important; }
  .related .grid { grid-template-columns: 1fr 1fr !important; }

  /* Breadcrumbs stay on one swipeable line */
  .crumbs { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .crumbs::-webkit-scrollbar { display: none; }

  /* Ad slots keep layout stable but stop eating the fold */
  .ad-slot { min-height: 90px !important; margin: 18px 0 !important; }

  /* Search dropdown gets more room on small screens */
  .results { max-height: 62vh !important; }

  /* Wide readouts (tables, mono output) scroll rather than overflow */
  .tb-stats { grid-template-columns: 1fr 1fr !important; }
  .tb-out, .tb-area { min-height: 140px; }
}

@media (hover: none) {
  .tool-card:hover, .cat-card:hover, .article-card:hover { transform: none; box-shadow: none; }
  .tool-card:active { transform: scale(.99); }
}

/* ---------------- consent banner ---------------- */
#ds-consent{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:.75rem 1.25rem;padding:.9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
  background:rgba(10,13,20,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(120,200,255,.22);
  box-shadow:0 -10px 30px rgba(0,0,0,.45);animation:ds-consent-in .35s ease both}
@keyframes ds-consent-in{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
#ds-consent p{margin:0;font-size:.88rem;line-height:1.45;color:#c9d6e4;max-width:62ch}
#ds-consent a{color:#5ee6ff;text-decoration:underline}
.ds-consent-actions{display:flex;gap:.6rem;flex-wrap:wrap}
#ds-consent button{min-height:44px;padding:.55rem 1.1rem;border-radius:10px;font-size:.88rem;font-weight:600;
  cursor:pointer;border:1px solid transparent;transition:transform .15s ease,filter .15s ease}
#ds-consent button:hover{transform:translateY(-1px);filter:brightness(1.1)}
.ds-consent-no{background:transparent;border-color:rgba(160,180,200,.35);color:#c9d6e4}
.ds-consent-yes{background:linear-gradient(135deg,#22d3ee,#a855f7);color:#08111b}
@media (max-width:640px){#ds-consent{flex-direction:column;align-items:stretch;text-align:left}
  .ds-consent-actions{justify-content:stretch}.ds-consent-actions button{flex:1}}

/* ---- long-form article styling (TOC, tables, callouts, formulas, FAQ) ---- */
.lede { font-size: 1.05rem; color: var(--ink); opacity: .92; }
.art-toc {
  margin: 22px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--marker);
  border-radius: 12px;
  background: var(--surface);
}
.art-toc h2 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; color: var(--ink-soft); }
.art-toc ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.art-toc a { color: var(--ink); text-decoration: none; font-size: 14px; }
.art-toc a:hover { color: var(--marker-deep); text-decoration: underline; }
.art-list { margin: 14px 0; padding-left: 20px; display: grid; gap: 7px; line-height: 1.65; }
.art-list li { font-size: 15px; }
.art-tablewrap { margin: 18px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.art-table { width: 100%; min-width: 320px; border-collapse: collapse; font-size: 14px; }
.art-table th, .art-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.art-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.art-note, .art-warn {
  margin: 18px 0;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.art-note { border-left: 3px solid var(--marker); }
.art-warn { border-left: 3px solid #e0743a; }
.art-note strong, .art-warn strong {
  display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; color: var(--ink-soft);
}
.art-note p, .art-warn p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.art-formula {
  margin: 16px 0; padding: 13px 15px; border-radius: 12px;
  background: var(--paper); border: 1px dashed var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px; overflow-x: auto; white-space: pre-wrap;
}
.art-faq {
  margin: 8px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.art-faq summary { cursor: pointer; font-weight: 650; font-size: 15px; min-height: 24px; }
.art-faq[open] summary { color: var(--marker-deep); }
.art-faq p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; }

/* --- Search results (engine v2) -------------------------------------- */
.ds-hidden-by-search { display: none !important; }
.ds-results { margin: 4px 0 26px; }
.ds-results-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 12px;
}
.ds-results-count {
  font-family: "Space Grotesk", sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--marker-deep);
}
.ds-results-clear {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.ds-results-clear:hover { border-color: var(--brand-violet); color: var(--ink); }
.ds-results-empty { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: 14px; }

/* --- Compact tool cards: more tools at a glance ---------------------- */
.grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; gap: 10px !important; }
.grid > .tool-card { padding: 12px 13px !important; }
.grid > .tool-card .badge { top: 10px !important; right: 10px !important; font-size: 9px !important; padding: 2px 6px !important; }
.grid > .tool-card h2 { font-size: 15px !important; margin: 5px 0 3px !important; line-height: 1.25; }
.grid > .tool-card .idx { font-size: 9.5px !important; }
.grid > .tool-card p {
  font-size: 12px !important; line-height: 1.42 !important;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 780px) {
  .grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .grid > .tool-card { padding: 10px 11px !important; }
  .grid > .tool-card h2 { font-size: 13.5px !important; }
  .grid > .tool-card p { font-size: 11.5px !important; -webkit-line-clamp: 2; }
  .grid > .tool-card .badge { display: none !important; }
}

.ds-hidden-by-search, .grid.ds-hidden-by-search { display: none !important; }