/* =========================================================
   tools.css — "Code Manual" override for htmlblog.net tools
   Re-skins the 12 static client-side tools to match the
   htmlblog-2026 theme. Loaded AFTER each tool's inline <style>
   and AFTER the theme style.css so it wins on equal specificity.
   Tokens come from style.css :root (--paper/--ink/--amber etc).
   Functional colors (syntax highlight, error/success banners,
   diff add/del, layout grids) are intentionally NOT touched.
   ========================================================= */

/* ---- BASE CANVAS ---- */
body{
  background:var(--paper) !important;
  color:var(--ink) !important;
  font-family:var(--font-body) !important;
}
body a{ color:var(--amber-ink); }

/* ---- LEGACY HEADER/FOOTER fallbacks (markup is swapped to
   .site-head/.site-foot, but neutralise old rules in case any
   inline .header/.footer block still matches) ---- */
.header{ background:var(--bar) !important; border-bottom:3px solid var(--amber) !important; }
.header .logo span{ color:var(--bar-amber) !important; }
.footer{ background:var(--bar) !important; }

/* ---- TOOL HERO (was navy gradient) → espresso bar ----
   Covers all three hero variants: .tool-hero (7 tools) and .hero
   (css-box-shadow-generator, schema-markup-generator). */
.tool-hero,
.hero{
  background:var(--bar) !important;
  color:var(--bar-ink) !important;
  border-bottom:3px solid var(--amber);
}
.tool-hero h1,
.hero h1{
  font-family:var(--font-head) !important;
  color:var(--bar-ink) !important;
  font-weight:600;
  letter-spacing:-.01em;
}
.tool-hero p,
.hero p{ color:var(--bar-ink-mut) !important; opacity:1 !important; }

/* tool-header variant on cream (css-gradient-generator, diff-checker) */
.tool-header h1{ font-family:var(--font-head) !important; color:var(--ink-strong) !important; }
.tool-header p{ color:var(--ink-muted) !important; }
/* bare-H1 variant (url-encoder-decoder) — subtitle */
.tool-subtitle{ color:var(--ink-muted) !important; }

/* ---- BREADCRUMB (.breadcrumb and url-encoder's .tool-breadcrumb) ---- */
.breadcrumb,
.tool-breadcrumb{
  color:var(--ink-muted) !important;
  font-family:var(--font-mono) !important;
}
.breadcrumb a,
.tool-breadcrumb a{ color:var(--amber-ink) !important; }

/* ---- SURFACES: cards / panels / toolbars / boxes ----
   Remap white surfaces + soft AI lift-shadows to paper-2 +
   hairline + 4px radius, no shadow (footprint / AI-tell law). */
.card,
.panel,
.toolbar,
.output-box,
.output-panel,
.output-section,
.preview-box,
.controls-panel,
.output-highlighted{
  background:var(--paper-2) !important;
  border:1px solid var(--line) !important;
  border-radius:4px !important;
  box-shadow:none !important;
}
.panel-header{
  background:var(--paper-3) !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:4px 4px 0 0 !important;
}
.panel-title{ color:var(--ink-strong) !important; }
.toolbar-separator{ background:var(--line) !important; }
.toolbar-label,.panel-stats{ color:var(--ink-muted) !important; }

/* ---- INPUTS / TEXTAREAS ---- */
.input-area,
textarea,
input[type=text],
input[type=number],
input[type=url],
input[type=search],
select{
  font-family:var(--font-mono) !important;
  color:var(--ink) !important;
  background:var(--paper-2) !important;
}
.input-area::placeholder,
textarea::placeholder,
input::placeholder{ color:var(--ink-muted) !important; opacity:.7; }
.input-area:focus,
textarea:focus,
input[type=text]:focus,
input[type=number]:focus,
input[type=url]:focus,
input[type=search]:focus,
select:focus{
  outline:none;
  border-color:var(--amber) !important;
}

/* ---- BUTTONS ---- */
.btn{
  font-family:var(--font-mono) !important;
  background:var(--paper-2) !important;
  color:var(--ink-strong) !important;
  border:1px solid var(--line) !important;
  border-radius:4px !important;
}
.btn:hover{ border-color:var(--amber) !important; background:var(--paper-3) !important; }
.btn-primary,
.btn-copy,
.copy-btn,
.btn-copy-css{
  background:var(--amber-ink) !important;
  color:#fff !important;
  border-color:var(--amber-ink) !important;
}
.btn-primary:hover,
.btn-copy:hover,
.copy-btn:hover,
.btn-copy-css:hover{
  background:var(--ink-strong) !important;
  border-color:var(--ink-strong) !important;
}
/* secondary / success / outline kept distinct but on-palette */
.btn-secondary{
  background:var(--ink-strong) !important;
  color:var(--bar-ink) !important;
  border-color:var(--ink-strong) !important;
}
.btn-secondary:hover{ background:var(--ink) !important; border-color:var(--ink) !important; }
.btn-outline{
  background:transparent !important;
  color:var(--amber-ink) !important;
  border:1px solid var(--amber-ink) !important;
}
.btn-outline:hover{ background:var(--amber-soft) !important; }
/* success / copied feedback stays a confirmation green (functional) */
.copy-btn.copied,
.btn-copied{
  background:#2F5D50 !important;
  border-color:#2F5D50 !important;
  color:#fff !important;
}

/* ---- DARK CODE OUTPUT (was navy #1a1a2e) → espresso bar ---- */
.css-output,
.content-section pre,
.output-code pre,
pre.code-output{
  background:var(--bar) !important;
  color:var(--bar-ink) !important;
  border-radius:4px !important;
  font-family:var(--font-mono) !important;
}
/* legacy accent token inside css-output */
.css-prop{ color:var(--bar-amber) !important; }
.css-val{ color:#A8C5C0 !important; }

/* ---- CONTENT SECTION (SEO copy) ---- */
.content-section h2,
.content-section h3{
  font-family:var(--font-head) !important;
  color:var(--ink-strong) !important;
}
.content-section h2{ border-bottom:1px solid var(--line-strong) !important; }
.content-section p,
.content-section li,
.content-section ul,
.content-section ol{ color:var(--ink) !important; }
.content-section code{
  background:var(--paper-3) !important;
  color:var(--amber-ink) !important;
  font-family:var(--font-mono) !important;
  border-radius:3px !important;
}

/* ---- TABLES (color-table / support-table / comparison-table) ---- */
.color-table th,
.support-table th,
.comparison-table th{
  background:var(--bar) !important;
  color:var(--bar-ink) !important;
}
.color-table td,
.support-table td,
.comparison-table td{ color:var(--ink) !important; border-bottom:1px solid var(--line) !important; }
.comparison-table tr:hover td{ background:var(--paper-3) !important; }
/* keep yes/partial semantics legible */
.support-yes{ color:#2F5D50 !important; }
.support-partial{ color:#8A5114 !important; }

/* ---- FAQ ---- */
.faq-item{
  background:var(--paper-2) !important;
  border:1px solid var(--line) !important;
  border-radius:4px !important;
}
.faq-question,
.faq-q{ color:var(--ink-strong) !important; font-family:var(--font-body) !important; }
.faq-question:hover,
.faq-q:hover{ color:var(--amber-ink) !important; }
.faq-arrow{ color:var(--amber-ink) !important; }
.faq-answer,
.faq-a{ color:var(--ink) !important; }
/* the +/- pseudo marker used by css-gradient-generator */
.faq-question::after{ color:var(--amber-ink) !important; }

/* ---- MOBILE OVERFLOW FIXES (laws: infographic/table legibility) ---- */
@media (max-width:768px){
  /* SEO tables must not blow out the viewport */
  .content-section table,
  .color-table,
  .support-table,
  .comparison-table{ display:block; overflow-x:auto; max-width:100%; }

  /* json-formatter (and any multi-button toolbar): let button groups wrap */
  .toolbar{ flex-wrap:wrap; }
  .toolbar-group{ flex-wrap:wrap; min-width:0; }

  /* css-gradient-generator: 2-col grid → 1 col, force tracks to shrink.
     The grid items had intrinsic min-content wider than the viewport. */
  .tool-layout{ grid-template-columns:1fr !important; }
  .tool-layout > *{ min-width:0 !important; max-width:100% !important; }
  .controls-panel,
  .preview-panel,
  .preview-box,
  .output-box{ width:100% !important; max-width:100% !important; min-width:0 !important; }
  .type-toggle{ flex-wrap:wrap; max-width:100% !important; }
  .type-toggle button{ min-width:0; }
  .shape-toggle{ flex-wrap:wrap; }
  .css-output,
  .content-section pre{ word-break:break-word; }
}

/* ── visual-QA round 2 (2026-06-15): breadcrumb-in-hero + old-palette remnants ── */
/* D1: breadcrumb sitting on the dark espresso hero (was --ink-muted = 2.24:1) */
.tool-hero .breadcrumb, .hero .breadcrumb,
.tool-hero .breadcrumb a, .hero .breadcrumb a,
.tool-hero .tool-breadcrumb, .hero .tool-breadcrumb { color: var(--bar-ink-mut) !important; }
.tool-hero .breadcrumb a:hover, .hero .breadcrumb a:hover { color: var(--bar-amber) !important; }

/* D2: inline code in body/tool UI → match theme (ink-strong on paper-3), kills red #e94560 */
.content-section code, .step-description code, p code, li code, td code, .faq-a code,
.tool-section code, .panel code { color: var(--ink-strong) !important; background: var(--paper-3) !important; }

/* Example / outline buttons (were red) */
.btn-example, button[onclick*="loadExample"], button[onclick*="Example"], [class*="example-btn"] {
  color: var(--amber-ink) !important; border-color: var(--amber-ink) !important; background: transparent !important; }

/* active tab / mode / toggle buttons (were red/navy) */
.mode-btn.active, .mode-tab.active, .tab-btn.active, .option-btn.active,
.type-toggle .active, .shape-toggle .active {
  background: var(--amber-ink) !important; color: #fff !important; border-color: var(--amber-ink) !important; }
.mode-btn, .mode-tab, .tab-btn, .option-btn { color: var(--ink) !important; }

/* step circles, slider readouts, titles, labels (were navy) */
.step-num { background: var(--amber-ink) !important; color: #fff !important; }
.value-display, .shadow-layer-title { color: var(--ink) !important; }
.tool-section label, .controls-panel label, .option-group-label, .panel label { color: var(--ink) !important; }
.content-section strong, .tool-section strong { color: var(--ink-strong) !important; }

/* table headers (were navy #1a1a2e) */
.content-section th, .tool-section table th, table.color-table th, .support-table th { background: var(--bar) !important; color: var(--bar-ink) !important; }

/* dark code-output variants (were old navy bg) */
.code-output, .output-code { background: var(--bar) !important; color: #EAD9B6 !important; }

/* toast notifications (were navy) */
.toast { background: var(--ink-strong) !important; color: var(--bar-ink) !important; }

/* round 3: catch any remaining table header (url-encoder used a light bg th) */
.tool-section th, .container th, table th { background: var(--bar) !important; color: var(--bar-ink) !important; }