/* ==========================================================================
   Econo-my — custom layer on top of HTML5 UP "Editorial"
   - light/dark theming (theme via html[data-theme])
   - site-specific components: topbar, TOC, breadcrumb, article nav, attribution
   Only additive/override rules live here; the template's main.css is untouched.
   ========================================================================== */

/* ---- Theme tokens ------------------------------------------------------- */
:root {
  --c-bg: #ffffff;
  --c-bg-page: #eff1f2;
  --c-bg-sidebar: #f5f6f7;
  --c-bg-elev: #f7f8f9;
  --c-text: #7f888f;
  --c-text-strong: #3d4449;
  --c-text-dim: #9fa3a6;
  --c-border: rgba(210, 215, 217, 0.75);
  --c-accent: #f56a6a;
}
html[data-theme="dark"] {
  --c-bg: #21262a;
  --c-bg-page: #171b1e;
  --c-bg-sidebar: #1b2023;
  --c-bg-elev: #262c31;
  --c-text: #aeb6bd;
  --c-text-strong: #e7ebee;
  --c-text-dim: #7f888f;
  --c-border: rgba(255, 255, 255, 0.12);
  --c-accent: #ff8b8b;
}

/* ---- Dark theme surface overrides for the template ---------------------- */
html[data-theme="dark"] body,
html[data-theme="dark"] #wrapper { background-color: var(--c-bg-page); color: var(--c-text); }
html[data-theme="dark"] #main { background-color: var(--c-bg); }
html[data-theme="dark"] #sidebar { background-color: var(--c-bg-sidebar); }
html[data-theme="dark"] #sidebar > .inner:after { display: none; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--c-bg-elev); }

html[data-theme="dark"] body, html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { color: var(--c-text); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] strong, html[data-theme="dark"] b { color: var(--c-text-strong); }
html[data-theme="dark"] a { color: var(--c-accent); }
html[data-theme="dark"] hr { border-bottom-color: var(--c-border); }
html[data-theme="dark"] .box,
html[data-theme="dark"] table.default tbody tr:nth-child(2n+1) { background: var(--c-bg-elev); }
html[data-theme="dark"] table th { color: var(--c-text-strong); }
html[data-theme="dark"] table tbody tr { border-color: var(--c-border); }
html[data-theme="dark"] table.default td, html[data-theme="dark"] table.default th,
html[data-theme="dark"] table.default thead { border-color: var(--c-border); }
html[data-theme="dark"] blockquote { border-left-color: var(--c-border); }
html[data-theme="dark"] #sidebar .toggle,
html[data-theme="dark"] label { color: var(--c-text); }
html[data-theme="dark"] #menu ul a { border-top-color: var(--c-border); }
html[data-theme="dark"] code, html[data-theme="dark"] pre { background: rgba(255,255,255,0.05); }

/* smoother theme transition */
body, #wrapper, #main, #sidebar, input, select, textarea, table th, .box { transition: background-color .2s ease, color .2s ease; }

/* ---- Top bar: theme toggle + language switcher -------------------------- */
.topbar { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-left: auto; }
header#header .topbar { margin-top: 0.25rem; }
.topbar .langs { display: inline-flex; gap: 0.25rem; font-size: 0.8rem; letter-spacing: 0.1em; }
.topbar .langs a {
  text-decoration: none; padding: 0.15rem 0.45rem; border-radius: 4px;
  border: 1px solid var(--c-border); color: var(--c-text-dim);
}
.topbar .langs a[aria-current="true"] { color: #fff; background: var(--c-accent); border-color: var(--c-accent); }
/* Icon/text toggle buttons in the top bar: uniform square boxes.
   Reset the template's button padding/height (padding:0 2.25em, height:3.5em)
   so all three (A-, A+, theme) share identical dimensions. */
.topbar .theme-toggle,
.topbar .fontsize button {
  box-sizing: border-box; cursor: pointer; background: transparent;
  border: 1px solid var(--c-border); color: var(--c-text);
  border-radius: 4px; width: 2.2rem; height: 2.2rem; min-width: 0;
  padding: 0; line-height: 1; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar .theme-toggle:hover,
.topbar .fontsize button:hover { color: var(--c-accent); border-color: var(--c-accent); }
.topbar .theme-toggle { font-size: 1rem; }

/* ---- Breadcrumb --------------------------------------------------------- */
.breadcrumb { font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--c-text-dim); margin-bottom: 1rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb span[aria-hidden] { margin: 0 0.4rem; opacity: 0.5; }

/* ---- Table of contents -------------------------------------------------- */
.toc { border: 1px solid var(--c-border); border-radius: 6px; padding: 1rem 1.25rem;
  margin: 0 0 2rem; background: var(--c-bg-elev); }
.toc h2 { font-size: 0.9rem; margin: 0 0 0.5rem; letter-spacing: 0.15em; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { padding: 0.15rem 0; border: 0; }
.toc a { text-decoration: none; }

/* ---- Article prev/next -------------------------------------------------- */
.article-nav { display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--c-border); }
.article-nav a { text-decoration: none; max-width: 46%; }
.article-nav .next { text-align: right; margin-left: auto; }
.article-nav small { display: block; color: var(--c-text-dim); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.7rem; }

/* ---- Cluster / article cards (reuse template .row) ---------------------- */
.card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.card { border: 1px solid var(--c-border); border-radius: 6px; padding: 1.25rem; background: var(--c-bg-elev); }
.card h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.card h3 a { text-decoration: none; }
.card p { margin: 0; font-size: 0.85rem; color: var(--c-text-dim); }
.card .kicker { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); }

/* ---- Diagrams & content indents ---------------------------------------- */
figure.diagram, .diagram { text-align: center; margin: 2rem 0; }
.diagram img { max-width: 100%; height: auto; image-rendering: auto; }
.content img { max-width: 100%; height: auto; display: block; margin: 1.5rem auto; border: 1px solid var(--c-border); border-radius: 4px; background: #fff; padding: 4px; }
p.indent { margin-left: 2.5rem; }
article .content { overflow-wrap: break-word; }
/* story */
.story-section { margin: 0 0 2.5rem; }
.story-num { display: block; text-align: center; color: var(--c-text-dim); letter-spacing: 0.3em; margin: 2rem 0 1rem; }
.glossar-index { letter-spacing: 0.25em; }
.glossar-index a { text-decoration: none; margin-right: 0.35rem; }

/* ---- Footer attribution ------------------------------------------------- */
#footer .attribution { font-size: 0.75rem; color: var(--c-text-dim); line-height: 1.6; }
#footer .attribution a { color: var(--c-text-dim); }
#footer .attribution + .attribution { margin-top: 0.5rem; }

/* ---- Figures: Modern/Original toggle ----------------------------------- */
.viz { margin: 2rem 0; text-align: center; }
.viz-stage { border: 1px solid var(--c-border); border-radius: 8px; padding: 1rem;
  background: var(--c-bg-elev); }
.viz-canvas { width: 100%; height: 320px; }
.viz[data-kind="svg"] .viz-canvas { height: auto; min-height: 180px; display: flex;
  align-items: center; justify-content: center; }
.viz-view.viz-original { text-align: center; }
.viz-view.viz-original img { max-width: 100%; height: auto; margin: 0 auto; display: block;
  background: #fff; padding: 6px; border-radius: 4px; }
.viz-flow { stroke-dasharray: 6 6; animation: viz-dash 1.1s linear infinite; }
@keyframes viz-dash { to { stroke-dashoffset: -24; } }
.viz figcaption { text-align: center; font-size: 0.8rem; color: var(--c-text-dim);
  margin: 0.8rem auto 0; max-width: 90%; }

/* toggle — EXACTLY the header language-switcher pills (reset Editorial's button styles) */
.viz-toggle { display: flex; gap: 0.25rem; justify-content: center; margin-top: 0.6rem;
  font-size: 0.8rem; letter-spacing: 0.1em; }
.viz-toggle button {
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-size: 0.8rem; font-weight: 400; line-height: 1.65;
  letter-spacing: 0.1em; text-transform: none; white-space: nowrap;
  height: auto; min-width: 0; margin: 0; padding: 0.15rem 0.45rem;
  border: 1px solid var(--c-border); border-radius: 4px; box-shadow: none;
  background: transparent; color: var(--c-text-dim) !important; cursor: pointer; }
.viz-toggle button:hover { color: var(--c-accent) !important; border-color: var(--c-accent); }
.viz-toggle button[aria-current="true"] { color: #fff !important; background: var(--c-accent);
  border-color: var(--c-accent); }

/* ---- Language placeholder pages ---------------------------------------- */
.placeholder-note { border: 1px dashed var(--c-border); border-radius: 6px; padding: 1.5rem 1.75rem;
  background: var(--c-bg-elev); }

/* ---- Text-size control (header) ----------------------------------------
   Box dimensions are shared with .theme-toggle above; only type/state here. */
/* Group A-, A+ and the theme toggle so they sit evenly, like the lang pills. */
.topbar .controls { display: inline-flex; align-items: center; gap: 0.25rem; }
.topbar .fontsize { display: inline-flex; gap: 0.25rem; }
.topbar .fontsize button { font-weight: 600; }
.topbar .fontsize button:disabled { opacity: 0.4; cursor: default; }
.topbar .fontsize button:disabled:hover { color: var(--c-text); border-color: var(--c-border); }
.topbar .fontsize .fs-dec { font-size: 0.8rem; }
.topbar .fontsize .fs-inc { font-size: 1rem; }

/* User-selectable text-size multiplier; keeps the template's responsive steps. */
body, input, select, textarea { font-size: calc(13pt * var(--font-scale, 1)); }
@media screen and (max-width: 1680px) { body, input, select, textarea { font-size: calc(11pt * var(--font-scale, 1)); } }
@media screen and (max-width: 1280px) { body, input, select, textarea { font-size: calc(10pt * var(--font-scale, 1)); } }
@media screen and (max-width: 360px)  { body, input, select, textarea { font-size: calc(9pt  * var(--font-scale, 1)); } }

/* ---- Dark: sidebar menu legibility (template hardcodes dark greys) ------ */
html[data-theme="dark"] #menu ul { color: var(--c-text-strong); }
html[data-theme="dark"] #menu > ul > li > ul { color: var(--c-text); }
html[data-theme="dark"] #menu ul a.opener:before,
html[data-theme="dark"] #menu ul span.opener:before { color: var(--c-text-dim); }
html[data-theme="dark"] select option { color: var(--c-text); background: var(--c-bg-elev); }