/* ============================================================
   Calcolatrice Buffer Audio — stile Retro TUI (standalone)
   Ispirato a retro-tui.css del sito anthonydifuria.github.io.
   File indipendente: nessun link/import verso il repo del sito.
   ============================================================ */

:root{
  --bg:#101010; --fg:#d5d5d5; --muted:#ffa500; --link:#ffa500; --link-inv:#000;
  --accent:#ffa500; --border:#4a4a4a; --mono:"Courier New", Courier, monospace;
  --menubarH:56px; --menubg:#000000; --panelbg:#101010; --footerH:56px;
  --ok:#7fff9e; --warn:#ffd166; --est:#ff8fa3;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--mono);
  font-size:clamp(15px,2.4vw,16px); line-height:1.45; -webkit-text-size-adjust:100%;
}
a{color:inherit; text-decoration:none}
:focus-visible{outline:1px dashed var(--accent); outline-offset:2px}
:target{scroll-margin-top:calc(var(--menubarH) + 10px)}
h1,h2,h3{font-weight:400; margin:0 0 .5em}

.app{padding-top:var(--menubarH)}

/* ===== Menubar ===== */
.menubar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--menubg); border-bottom:1px solid var(--border); min-height:var(--menubarH)
}
.menubar .inner{
  max-width:1200px; margin:0 auto; padding:8px 10px; min-height:var(--menubarH);
  display:flex; align-items:center; gap:2ch; flex-wrap:wrap
}
.brand{color:var(--muted); white-space:nowrap}
.brand .sub{color:var(--fg); opacity:.7; font-size:.85em}
.menubar .spacer{flex:1 1 auto}

.palette-select{
  background:var(--panelbg); color:var(--fg); border:1px solid var(--border);
  font-family:var(--mono); font-size:.85em; padding:4px 6px;
}
.unit-toggle{display:inline-flex; border:1px solid var(--border)}
.unit-toggle button{
  background:var(--panelbg); color:var(--fg); border:0; font-family:var(--mono);
  font-size:.85em; padding:5px 10px; cursor:pointer;
}
.unit-toggle button[aria-pressed="true"]{background:var(--link); color:var(--link-inv)}

/* ===== Main layout ===== */
main{
  max-width:1200px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1fr; gap:1ch;
  padding:12px 10px calc(var(--footerH) + 20px); position:relative
}
@media (min-width:961px){
  main{grid-template-columns:26ch 1fr; gap:2ch; align-items:start}
}

.pane{position:relative; padding:10px; background:var(--panelbg); border:1px solid var(--border); margin-bottom:1ch}
.pane::before{
  content:attr(data-title); position:absolute; top:-10px; left:8px; padding:0 4px;
  background:var(--bg); color:var(--muted); font-size:.85em; letter-spacing:.03em;
}
.rule{height:1px; background:var(--border); margin:8px 0}

/* ===== Indice laterale ===== */
aside.pane{position:sticky; top:calc(var(--menubarH) + 10px); max-height:calc(100vh - var(--menubarH) - 20px); overflow:auto}
.tui-list{list-style:none; margin:0; padding:0; font-size:.92rem}
.tui-list li{margin:4px 0}
.tui-list .yr{color:var(--muted); opacity:.75; font-size:.85em; margin-right:.5ch}
.tui-link{position:relative; display:inline-block; outline:none; padding:2px 2px}
.tui-link::before{content:"[" attr(data-label) "]"; color:var(--link)}
.tui-link:hover::before,.tui-link:focus-visible::before{background:var(--link); color:var(--link-inv)}
.tui-list .grp{color:var(--muted); margin-top:10px; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; opacity:.8}

/* ===== Form parametri ===== */
.field-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(15ch,1fr)); gap:10px 14px}
.field{display:flex; flex-direction:column; gap:4px}
.field label{color:var(--muted); font-size:.85em}
.field input,.field select{
  background:var(--bg); color:var(--fg); border:1px solid var(--border);
  font-family:var(--mono); font-size:.95em; padding:6px 8px; width:100%;
}
.field input:focus,.field select:focus{border-color:var(--accent)}
.hint{font-size:.78em; opacity:.65; margin-top:2px}

/* ===== Sezione formato ===== */
.fmt-section{margin-bottom:1.4ch}
.fmt-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:1ch; margin-bottom:.4em}
.fmt-head h2{color:var(--fg); font-size:1.1rem}
.fmt-year{color:var(--muted)}
.fmt-family{
  font-size:.72em; border:1px solid var(--border); padding:1px 6px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
}
.fmt-desc{margin:.3em 0 .6em; opacity:.9}
.fmt-desc .ext-link::after{content:" ↗"}
.fmt-history-wrap{
  margin:0 0 .8em; padding:6px 10px; border-left:3px solid var(--muted);
  background:rgba(255,255,255,.02);
}
.fmt-history{font-size:.92em; opacity:.9; line-height:1.5; margin:0}
.fmt-history-metaphor{
  font-size:.92em; opacity:.85; line-height:1.5; font-style:italic; margin:6px 0 0;
  border-top:1px dashed var(--border); padding-top:6px;
}

.fmt-controls{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; margin-bottom:.8em; padding:8px; border:1px dashed var(--border)}
.fmt-controls .field{min-width:14ch}
.mode-toggle{display:inline-flex; border:1px solid var(--border)}
.mode-toggle button{
  background:var(--bg); color:var(--fg); border:0; border-right:1px solid var(--border);
  font-family:var(--mono); font-size:.82em; padding:5px 8px; cursor:pointer;
}
.mode-toggle button:last-child{border-right:0}
.mode-toggle button[aria-pressed="true"]{background:var(--link); color:var(--link-inv)}

/* ===== Righe di calcolo (breakdown) ===== */
.breakdown-list{display:flex; flex-direction:column; gap:10px}
.calc-row{border:1px solid var(--border); padding:8px 10px; background:rgba(255,255,255,.015)}
.calc-row-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1ch; align-items:baseline}
.calc-label{font-weight:600}
.calc-bytes{color:var(--fg); font-variant-numeric:tabular-nums; white-space:nowrap}
.badge{font-size:.7em; padding:0 5px; border:1px solid var(--border); margin-left:.6ch; font-weight:400}
.badge.exact{color:var(--ok); border-color:var(--ok)}
.badge.est{color:var(--est); border-color:var(--est)}

/* riga di calcolo: la moltiplicazione/addizione con i numeri veri, sempre visibile */
.calc-formula{
  margin-top:6px; padding:5px 8px; background:var(--bg); border-left:3px solid var(--accent);
  color:var(--accent); font-size:.88em; letter-spacing:.02em; word-break:break-word;
}
.calc-formula.total-formula{border-left-color:var(--fg); color:var(--fg); font-weight:700}

.calc-explain{margin-top:6px; display:flex; flex-direction:column; gap:4px}
.calc-tech,.calc-metaphor{font-size:.86em; opacity:.95; line-height:1.4}
.calc-metaphor{font-style:italic; opacity:.85}
.calc-explain-label{
  color:var(--muted); font-style:normal; font-weight:700; text-transform:uppercase;
  font-size:.78em; letter-spacing:.04em; margin-right:.6ch;
}

.totals-row{display:flex; flex-direction:column; gap:8px; margin-top:.8em}
.totals-row .unit-line{display:flex; flex-wrap:wrap; gap:1ch 2.5ch; font-size:.95em}
.totals-row .unit-line .tot-item b{color:var(--accent)}
.totals-row .range-label{color:var(--muted); font-size:.82em; margin-top:4px}

.note{font-size:.82em; opacity:.75; margin-top:.5em}

/* ===== Status bar ===== */
.status{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  display:flex; justify-content:space-between; gap:2ch; min-height:var(--footerH);
  align-items:center; border-top:1px solid var(--border); padding:6px 10px;
  background:var(--menubg); color:var(--muted); font-size:.85em;
}
.status .cursor{color:var(--accent); animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:.2}}

/* ===== Palette ===== */
body[data-theme="dark-hi"]{--bg:#000;--fg:#fff;--muted:#e3e3e3;--link:#00ffff;--link-inv:#000;--accent:#ffff00;--border:#6a6a6a;--menubg:#000;--panelbg:#000}
body[data-theme="light"]{--bg:#fff;--fg:#000;--muted:#222;--link:#0033ff;--link-inv:#fff;--accent:#cc0000;--border:#000;--menubg:#f2f2f2;--panelbg:#fff}
body[data-theme="sepia"]{--bg:#f4ecd8;--fg:#2a2a2a;--muted:#555;--link:#0645ad;--link-inv:#fff;--accent:#9b6b00;--border:#a48f6a;--menubg:#e9dfc7;--panelbg:#fffaf0}
body[data-theme="crt"]{--bg:#020402;--fg:#a8ffb0;--muted:#6edb8a;--link:#00ff7f;--link-inv:#003318;--accent:#00ff9a;--border:#2a7a4f;--menubg:#031e10;--panelbg:#031e10}
body[data-theme="by"]{--bg:#0a0f1a;--fg:#f5f7fa;--muted:#d5dbe3;--link:#ffd300;--link-inv:#1b1f2a;--accent:#7aa6ff;--border:#2a3550;--menubg:#0d1220;--panelbg:#0f1426}