/* Vazou? — shared dark-mode palette + theme/language control widgets.
   Loaded on every page after the page's own inline <style> block, so the
   higher-specificity selectors below win regardless of load order. */

:root[data-theme="dark"]{
  --paper:#1a1712;
  --paper-2:#252019;
  --ink:#f1ece0;
  --ink-soft:#b6ac98;
  --line:#f1ece0;
  --brand:#ff8552;
  --brand-2:#5cb98a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1a1712;
    --paper-2:#252019;
    --ink:#f1ece0;
    --ink-soft:#b6ac98;
    --line:#f1ece0;
    --brand:#ff8552;
    --brand-2:#5cb98a;
  }
}

body{transition:background-color .15s ease, color .15s ease;}

/* header controls */
.header-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}

/* .lang-switch starts as plain markup (3 <button class="lang-opt">); site.js
   enhances it into a collapsed trigger ("PT ▾") that reveals the other
   languages in a floating panel on click, instead of showing all three
   at once. */
.lang-switch{position:relative;display:inline-flex;flex-shrink:0;}

.lang-trigger{
  font-family:'Space Mono',monospace;font-size:0.7rem;font-weight:700;
  padding:5px 9px;border:2px solid var(--line);background:var(--paper);color:var(--ink-soft);
  cursor:pointer;line-height:1;display:inline-flex;align-items:center;gap:5px;
}
.lang-trigger:hover{background:var(--paper-2);}
.lang-trigger .caret{font-size:0.55rem;transition:transform .15s ease;}
.lang-switch.is-open .lang-trigger .caret{transform:rotate(180deg);}

.lang-opt{display:none;}
.lang-options{
  display:none;
  position:absolute;top:calc(100% + 4px);right:0;
  border:2px solid var(--line);background:var(--paper);
  min-width:100%;z-index:20;
}
.lang-switch.is-open .lang-options{display:block;}
.lang-switch.is-open .lang-opt{
  display:block;width:100%;text-align:left;
  font-family:'Space Mono',monospace;font-size:0.7rem;font-weight:700;
  padding:6px 10px;border:none;background:var(--paper);color:var(--ink-soft);cursor:pointer;
}
.lang-switch.is-open .lang-opt + .lang-opt{border-top:1px solid var(--line);}
.lang-opt.is-active{background:var(--ink);color:var(--paper);}
.lang-switch.is-open .lang-opt:hover:not(.is-active){background:var(--paper-2);}

/* track: 50x28, 2px border → 46x24 inner box. thumb sits with an even
   2px gap on every side (top/bottom/left when off, top/bottom/right when
   on), so it reads as centered in both states, not just floating near
   one edge. translateX = inner_width - thumb - 2*gap = 46 - 20 - 4 = 22. */
.theme-toggle{
  -webkit-appearance:none;appearance:none;
  width:50px;height:28px;border-radius:999px;
  border:2px solid var(--line);background:#d8d3c6;
  position:relative;padding:0;cursor:pointer;flex-shrink:0;
  transition:background-color .15s ease, border-color .15s ease;
}
.theme-toggle::before{
  content:'';position:absolute;top:2px;left:2px;
  width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:transform .15s ease;
}
.theme-toggle[aria-pressed="true"]{background:#3fb56d;border-color:#3fb56d;}
.theme-toggle[aria-pressed="true"]::before{transform:translateX(22px);}

@media(max-width:480px){
  .header-controls{gap:10px;}
}