/* ═══════════════════════════════════════════════════════════════
   ToolkitsApp — "Workshop" Redesign Overlay
   ───────────────────────────────────────────────────────────────
   Load this AFTER main.css. It re-themes the whole site by
   overriding the design tokens (which cascade to every component)
   plus the handful of components that had hard-coded visual styling.
   No class names change — all 60+ tool pages inherit automatically.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts ──
   Newsreader (serif) for display/headings, Geist (sans) for UI text,
   JetBrains Mono for code & labels. Loaded via <link> in base.html.
   Falls back to the self-hosted Inter already in the project. */
:root {
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:  'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
}

/* ── Light theme tokens (warm paper) ── */
:root {
  --bg-primary:   #f4efe4;   /* page — warm paper          */
  --bg-secondary: #ece5d4;   /* insets, how-to-use blocks  */
  --bg-tertiary:  #ddd3bd;   /* deeper inset / slider track */
  --bg-tool:      #faf7ef;   /* tool container card        */
  --bg-input:     #fbf8f1;   /* textareas / inputs         */
  --bg-glass:     rgba(244, 239, 228, 0.82);
  --bg-card:      #faf7ef;   /* tool cards                 */

  --text-primary:   #211d18; /* ink   */
  --text-secondary: #5c554a; /* ink-2 */
  --text-tertiary:  #8a8174; /* ink-3 */

  --accent:       #9c3f23;   /* rust */
  --accent-hover: #843418;
  --accent-light: rgba(156, 63, 35, 0.15);  /* focus rings */
  --accent-bg:    #ece3d2;   /* icon chip background */

  --success: #3f7d4f;
  --error:   #b23a2c;
  --warning: #b5701f;
  --info:    #3a6ea5;

  --border:       rgba(33, 29, 24, 0.14);
  --border-light: rgba(33, 29, 24, 0.08);
  --border-hover: rgba(156, 63, 35, 0.45);

  --shadow-xs: 0 1px 1px rgba(33,29,24,0.03);
  --shadow-sm: 0 1px 2px rgba(33,29,24,0.03), 0 8px 18px -12px rgba(33,29,24,0.10);
  --shadow-md: 0 1px 2px rgba(33,29,24,0.04), 0 12px 26px -14px rgba(33,29,24,0.14);
  --shadow-lg: 0 2px 4px rgba(33,29,24,0.04), 0 18px 38px -16px rgba(33,29,24,0.20);
  --shadow-xl: 0 4px 8px rgba(33,29,24,0.05), 0 28px 56px -20px rgba(33,29,24,0.26);

  /* Crisp, editorial corners (was 8–20px iOS rounding) */
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-full: 9999px;
}

/* ── Dark theme tokens (warm espresso, copper accent) ── */
[data-theme="dark"] {
  --bg-primary:   #16130f;
  --bg-secondary: #1d1a14;
  --bg-tertiary:  #2a261e;
  --bg-tool:      #1b1813;
  --bg-input:     #1b1813;
  --bg-glass:     rgba(22, 19, 15, 0.82);
  --bg-card:      #1b1813;

  --text-primary:   #f4ede0;
  --text-secondary: #b3a994;
  --text-tertiary:  #8a8174;

  --accent:       #cf8a5c;   /* copper */
  --accent-hover: #dd9d70;
  --accent-light: rgba(207, 138, 92, 0.20);
  --accent-bg:    #2a2017;

  --success: #6cae74;
  --error:   #d4796b;
  --warning: #d49a4f;
  --info:    #7aa3cf;

  --border:       rgba(244, 237, 224, 0.10);
  --border-light: rgba(244, 237, 224, 0.06);
  --border-hover: rgba(207, 138, 92, 0.45);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.55);
}

/* ── Base ── */
body { font-family: var(--font-sans); }
::selection { background: var(--accent); color: #faf7ef; }

/* Display headings in serif. Newsreader reads best at 400–500, not 700. */
h1, h2, h3,
.hero-title,
.section-title,
.tool-card-name,
.drop-zone-title {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* Monospace "label" treatment for small uppercase meta text */
.tool-panel-label,
.ad-label {
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
}

/* Align Input/Output panel headers across .tool-split columns —
   action buttons in some tools' output header (e.g. Expand All / Copy / Download)
   would otherwise make one column's header taller than the other, pushing
   the textarea/output below it out of vertical alignment with its sibling. */
.tool-panel > div:first-child {
  min-height: 32px;
}
.tool-panel > .tool-panel-label:first-child {
  display: flex;
  align-items: center;
  min-height: 32px;
}

/* ── Navigation — solid paper, hairline, no heavy glass ── */
.nav-bar {
  background: var(--bg-glass);
  backdrop-filter: saturate(120%) blur(12px);
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  border-bottom: 1px solid var(--border-light);
}
.nav-logo {
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(156, 63, 35, 0.28);
}

/* ── Hero — drop the purple glow, serif display ── */
.hero-section::before { display: none; }
.hero-section { padding: 72px 0 52px; }
.hero-title { font-weight: 500; }
.hero-search input { border-radius: var(--radius-lg); }

/* ── Tool cards — warm surface, hairline, top glint ── */
.tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.tool-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(33,29,24,0.16), transparent);
  pointer-events: none;
}
[data-theme="dark"] .tool-card::after {
  background: linear-gradient(90deg, transparent, rgba(244,237,224,0.14), transparent);
}
.tool-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* Icon chip: paper tile + hairline + rust glyph (no fill-on-hover) */
.tool-card-icon,
.section-icon {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.tool-card:hover .tool-card-icon { background: var(--bg-primary); }
.tool-card:hover .tool-card-icon i { color: var(--accent); }
.tool-card-icon i, .section-icon i { color: var(--accent); }
.tool-card-name { font-size: 17px; }

/* ── Brand wordmark in nav ── */
.brand-wordmark {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1;
}

/* ── Nav links (text) ── */
.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 400;
  transition: color 0.15s ease;
}
.nav-link:hover { color: var(--text-primary); }
.nav-link.is-active { color: var(--text-primary); font-weight: 500; }

/* ── Nav search pill ── */
.nav-search-pill {
  position: relative;
  min-width: 240px;
  max-width: 280px;
}
.nav-search-pill .search-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.nav-search-pill .search-input:focus {
  background: var(--bg-card);
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.kbd-hint {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  padding: 1px 6px;
  background: var(--bg-primary);
  border-radius: 2px;
  pointer-events: none;
}

/* ── Language pill ── */
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lang-pill:hover { color: var(--text-primary); border-color: var(--border-hover); }
.lang-pill-code {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── Footer link ── */
.footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-link:hover { color: var(--text-primary); }

/* ── Editorial labels & flourishes ── */
.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.underline-grow {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s ease;
}
a:hover .underline-grow { background-size: 100% 1.5px; }

/* ── Hero (home) ── */
.hero-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
  font-size: clamp(2.5rem, 6vw, 4.875rem);
  margin: 0;
}
.hero-h1 em {
  font-style: italic;
  color: var(--accent);
}
.hero-bignum {
  position: absolute;
  right: -16px;
  top: -24px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 260px;
  line-height: 0.8;
  letter-spacing: -0.04em;
  user-select: none;
  pointer-events: none;
  color: transparent;
  -webkit-text-stroke: 1px rgba(156, 63, 35, 0.35);
}
[data-theme="dark"] .hero-bignum {
  -webkit-text-stroke: 1px rgba(207, 138, 92, 0.35);
}

/* ── Workshop note card ── */
.workshop-note {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.workshop-note::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(33,29,24,0.16), transparent);
  pointer-events: none;
}
[data-theme="dark"] .workshop-note::after {
  background: linear-gradient(90deg, transparent, rgba(244,237,224,0.14), transparent);
}

/* ── Stat numbers & section titles ── */
.stat-num {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(2rem, 5vw, 3.625rem);
}
.section-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  line-height: 1.1;
}

/* ── CTAs ── */
.cta-ink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--text-primary);
  color: var(--bg-card);
  padding: 12px 22px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.15s ease;
}
.cta-ink:hover { background: var(--accent); color: #faf7ef; }
.cta-text {
  color: var(--text-primary);
  padding: 12px 8px;
  font-size: 13.5px;
  text-decoration: none;
}

/* ── Workbench / dept tool card (overrides base .tool-card) ── */
.workbench-card {
  display: block;
  padding: 24px;
  gap: 0;
}
.workbench-card .tool-card-icon {
  width: 40px;
  height: 40px;
}
.workbench-card .tool-card-icon i {
  width: 18px;
  height: 18px;
}
.workbench-card .tool-card-name {
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: 20px;
}
.workbench-card .tool-card-desc {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.workbench-card:hover .open-arrow { color: var(--accent); }

/* ── Quiet contract hero mark ── */
.contract-h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  max-width: 760px;
}
.hero-mark {
  width: 120px;
  height: 120px;
  border-radius: 26px;
  background: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 4px rgba(33,29,24,0.06), 0 22px 44px -20px rgba(156,63,35,0.55);
}
[data-theme="dark"] .hero-mark {
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 22px 44px -20px rgba(207,138,92,0.55);
}

/* ── Departments accordion ── */
.dept-shell {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.acc.has-divider { border-top: 1px solid var(--border-light); }
.dept-name {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 22px;
  color: var(--text-primary);
}
.acc-head { cursor: pointer; transition: background 0.15s ease; }
.acc-head:hover { background: rgba(0,0,0,0.02); }
[data-theme="dark"] .acc-head:hover { background: rgba(255,255,255,0.025); }
.acc.open > .acc-head { background: rgba(0,0,0,0.015); }
[data-theme="dark"] .acc.open > .acc-head { background: rgba(255,255,255,0.02); }
.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.acc-body-inner { overflow: hidden; }
.acc.open > .acc-body { grid-template-rows: 1fr; }
.acc .chev { transition: transform 0.3s ease; }
.acc.open .chev { transform: rotate(90deg); }
.acc-tray {
  background: var(--bg-primary);
  border-top: 1px solid var(--border-light);
}

/* ── Buttons ── */
.btn-primary {
  background: var(--accent);
  color: #faf7ef;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-sm);
}
.btn-secondary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.btn-secondary:hover { background: var(--bg-secondary); }

/* ── Search inputs ── */
.search-input { border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border); }
.search-input:focus { background: var(--bg-input); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }

/* ── Language dropdown — paper card, rust active ── */
.lang-dropdown { border-radius: var(--radius-md); }
.lang-option { border-radius: var(--radius-sm); }
.lang-option.active { background: var(--accent-light); color: var(--accent); }
.lang-check { color: var(--accent); }

/* ── Tool container & code panels ── */
.tool-container { border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.code-input, .code-output { font-family: var(--font-mono); border-radius: var(--radius-md); background: var(--bg-input); }
.code-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.result-block .result-row .value { font-family: var(--font-mono); }

/* ── How-to-use, FAQ, features ── */
.how-to-use p { border-left-width: 2px; border-radius: var(--radius-sm); }
.faq-item { border-radius: var(--radius-md); }
.feature-item { border-radius: var(--radius-sm); }
.feature-item i { color: var(--accent); }

/* ── Category badge ── */
.cat-badge { background: var(--accent-light); color: var(--accent); }

/* ── Breadcrumb hover ── */
.breadcrumb a:hover { color: var(--accent); }

/* ── Popular-tools arrows ── */
.popular-scroll-arrow:hover { background: var(--accent); border-color: var(--accent); color: #faf7ef; }

/* ── Footer wordmark in serif (set in base.html markup too) ── */
footer .font-bold { font-family: var(--font-serif); font-weight: 500; }