/* ============================================================
   CleanVault — "Instrument" re-skin
   Loads AFTER styles.css. Overrides tokens and adds the new
   multi-page components. Your existing markup is untouched.
   ============================================================ */

/* ---------- 1. PALETTE OVERRIDE ---------------------------
   Your CSS is fully token-driven, so changing these fourteen
   values changes the entire look with zero layout risk.
----------------------------------------------------------- */
:root{
  --bg:        #E9E7E1;   /* was #f0f2f8 */
  --bg2:       #E3E0D8;
  --surface:   #F4F2ED;
  --border:    #CBC7BC;
  --text:      #1B1D20;
  --text2:     #6B675E;

  --blue:      #9A5F06;   /* the signal. amber, darkened for paper */
  --blue-dark: #7E4D05;
  --blue-light:#F0E4CE;

  --green:     #1F7A4E;
  --red:       #A32833;
  --yellow:    #B8860B;   /* stars only */
  --purple:    #3F6E78;   /* jwt payload label */

  --mono: 'IBM Plex Mono','IBM Plex Mono Fallback',ui-monospace,SFMono-Regular,Consolas,monospace;
  --sans: 'Archivo','Archivo Fallback','Helvetica Neue',Arial,sans-serif;
  --body: 'IBM Plex Sans','IBM Plex Sans Fallback',system-ui,-apple-system,sans-serif;

  --shadow:    0 1px 2px rgba(27,29,32,.06), 0 12px 32px -24px rgba(27,29,32,.40);
  --shadow-lg: 0 2px 6px rgba(27,29,32,.08), 0 20px 48px -28px rgba(27,29,32,.55);

  --radius: 3px;
  --tap: 44px;
}

[data-theme="dark"]{
  --bg:        #15171A;
  --bg2:       #1B1E22;
  --surface:   #1B1E22;
  --border:    #2E3339;
  --text:      #E7E4DE;   /* bone, not white */
  --text2:     #918C82;

  --blue:      #E9A13B;   /* sodium indicator lamp */
  --blue-dark: #F2B45C;
  --blue-light:#33271A;

  --green:     #62C08A;
  --red:       #F0797F;
  --yellow:    #E0B84A;
  --purple:    #7FB6BE;

  --shadow:    0 1px 2px rgba(0,0,0,.35), 0 12px 32px -22px rgba(0,0,0,.90);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 20px 48px -26px rgba(0,0,0,1);
}

/* Follow the OS when the visitor has not chosen explicitly.
   Your original CSS had no prefers-color-scheme support at all. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15171A; --bg2:#1B1E22; --surface:#1B1E22; --border:#2E3339;
    --text:#E7E4DE; --text2:#918C82;
    --blue:#E9A13B; --blue-dark:#F2B45C; --blue-light:#33271A;
    --green:#62C08A; --red:#F0797F; --yellow:#E0B84A; --purple:#7FB6BE;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 32px -22px rgba(0,0,0,.90);
    --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 20px 48px -26px rgba(0,0,0,1);
  }
}

/* ---------- 2. FONTS (self-hosted — see README) ----------- */
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/plex-sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/plex-sans-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/plex-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/plex-mono-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Archivo Fallback';src:local('Arial');size-adjust:97%;ascent-override:92%;descent-override:24%}
@font-face{font-family:'IBM Plex Sans Fallback';src:local('Arial');size-adjust:101%;ascent-override:95%;descent-override:25%}
@font-face{font-family:'IBM Plex Mono Fallback';src:local('Courier New');size-adjust:112%}

/* ---------- 3. GEOMETRY REFINEMENT ------------------------
   Instrument is machined, not rounded. Circles stay circular.
----------------------------------------------------------- */
.btn, .tool-panel, .io-textarea, .io-output, .form-input, .req-textarea,
.tool-card, .stat-card, .transform-card, .contact-card, .drop-zone,
.hero-stat, .jwt-part, .slug-output-box, .single-pane, .status-bar,
.req-modal, .overlay-content, .color-swatch, .color-format{
  border-radius: var(--radius) !important;
}
.sidebar-btn.active{ border-radius:0 !important; background:var(--blue-light) !important; }
.pill, .trust-pill, .nav-badge{ border-radius:2px !important; }

/* ---------- 4. ACCESSIBILITY FLOOR ------------------------ */
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:2px; }
.btn, .theme-btn, .sidebar-btn, .form-submit, .uuid-copy-btn, .hash-copy{
  min-height: var(--tap);
}
.btn{ display:inline-flex; align-items:center; gap:8px; padding-inline:16px; }
.action-bar{ gap:8px; }
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--blue);
  color:var(--bg);padding:12px 16px;font-family:var(--sans);font-weight:700}
.skip-link:focus{left:0}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .tool-panel.active{animation:none !important}
}

/* ---------- 5. SIDEBAR AS REAL LINKS ----------------------
   The tool list is now <a href>, not <button>. This is the
   single change that lets Google crawl the site at all.
----------------------------------------------------------- */
a.sidebar-btn{ text-decoration:none; }
a.sidebar-btn[aria-current="page"]{
  background: var(--blue-light);
  color: var(--blue);
  border-left: 3px solid var(--blue);
}
.sidebar-btn .ic{ width:20px; height:20px; flex:none; color:var(--blue); opacity:.9; }
a.sidebar-btn[aria-current="page"] .ic{ opacity:1; }

/* ---------- 6. NETWORK READOUT ----------------------------
   Replaces the fabricated visitor counter. Counts first-party
   requests made after load — zero while you use a tool.
----------------------------------------------------------- */
.netcount{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.06em;
  color:var(--blue); border:1px solid var(--blue);
  padding:3px 7px; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.netcount__dot{ width:5px; height:5px; border-radius:50%; background:var(--blue); flex:none; }
@media (max-width:720px){ .netcount__label{ display:none; } }

/* ---------- 7. NEW PAGE COMPONENTS ------------------------ */
.breadcrumb{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text2); margin-bottom:1rem;
}
.breadcrumb a{ color:var(--text2); text-decoration:none; }
.breadcrumb a:hover{ color:var(--text); text-decoration:underline; }

.verify-strip{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; margin:1.5rem 0 2rem;
  background:var(--bg2); border-left:3px solid var(--blue);
  border-radius:var(--radius);
  font-family:var(--body); font-size:.85rem; line-height:1.6; color:var(--text2);
}
.verify-strip .ic{ width:18px; height:18px; color:var(--blue); flex:none; margin-top:2px; }
.verify-strip strong{ color:var(--text); }

.prose{ max-width:68ch; font-family:var(--body); font-size:1rem; line-height:1.7; color:var(--text); }
.prose h2{ font-family:var(--sans); font-size:1.25rem; font-weight:700; letter-spacing:-.02em;
  margin:2.25rem 0 .75rem; }
.prose h2:first-child{ margin-top:0; }
.prose p{ margin:0 0 1rem; }
.prose code{ font-family:var(--mono); font-size:.85em; background:var(--bg2);
  border:1px solid var(--border); padding:.08em .35em; border-radius:2px; }
.prose strong{ font-weight:600; }

.faq{ max-width:68ch; margin-top:2rem; border-top:1px solid var(--border); }
.faq details{ border-bottom:1px solid var(--border); }
.faq summary{
  cursor:pointer; list-style:none; padding:1rem 0; min-height:var(--tap);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--sans); font-weight:600; font-size:1rem; color:var(--text);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--blue); flex:none; }
.faq details[open] summary::after{ content:"\2013"; }
.faq details > :not(summary){
  padding-bottom:1rem; font-family:var(--body); font-size:.95rem;
  line-height:1.65; color:var(--text2); max-width:66ch;
}

.related{ margin-top:2rem; font-family:var(--body); font-size:.9rem; color:var(--text2); }
.related a{ color:var(--blue); }

/* ---------- 8. AD SLOT ------------------------------------
   Below the fold, after the explanation, never beside a control.
   min-height reserves the space so the page does not jump (CLS 0).
----------------------------------------------------------- */
.ad-slot{
  margin:3rem 0; padding-top:1.5rem;
  border-top:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  min-height:300px; contain:layout;
}
.ad-slot__label{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text2);
}
.ad-slot ins{ display:block; width:100%; }
/* keep a hard gap between the tool's controls and any ad */
.tool-panel + .ad-slot, .action-bar ~ .ad-slot{ margin-top:4rem; }

/* ---------- 9. FOOTER TOOL INDEX --------------------------
   Every page carries the full crawlable list. This is what
   gives Googlebot a path to all 19 tools from anywhere.
----------------------------------------------------------- */
.tool-index{
  display:grid; gap:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  margin-bottom:2rem; text-align:left;
}
.tool-index h4{
  font-family:var(--mono); font-size:.6rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); margin:0 0 .75rem;
}
.tool-index ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.tool-index a{
  color:var(--text2); text-decoration:none; font-family:var(--body); font-size:.83rem;
  display:inline-flex; align-items:center; gap:8px; min-height:24px;
}
.tool-index a:hover{ color:var(--text); text-decoration:underline; }
.tool-index .ic{ width:15px; height:15px; color:var(--blue); opacity:.75; flex:none; }

/* ---------- 10. ICONS ------------------------------------- */
.ic{ width:1em; height:1em; display:inline-block; vertical-align:-.125em; }
.tool-card-icon .ic{ width:26px; height:26px; color:var(--blue); }

/* ---------- 9. LINK STYLING --------------------------------
   Splitting the old single-page app into real pages turned a lot
   of buttons and divs into <a> elements. Anything that did not
   already carry a class-level rule fell back to the browser
   default — #0000EE and an underline — which is why prose links,
   the tool cards and the .btn anchors were rendering as raw
   browser links. Class rules elsewhere in the sheet win on
   specificity, so this only reaches the ones that had nothing.
------------------------------------------------------------ */
a { color: var(--blue); }

.prose a,
.related a,
p a:not([class]) {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.prose a:hover,
.related a:hover,
p a:not([class]):hover { color: var(--blue-dark); }

/* Cards are links, but they should read as cards. */
a.tool-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.tool-card .tool-card-name { color: var(--text); }
a.tool-card:hover .tool-card-name { color: var(--blue); }

/* Anchors wearing .btn are buttons, not links. */
a.btn { text-decoration: none; }

/* Keyboard users need to see where they are. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
a.tool-card:focus-visible { outline-offset: -2px; }