/* ====================================================================
   LA BOTTEGA DELLE APP · nucleo condiviso (stile)
   Usato da tutte le app: Foglio, Documenti, Presentazioni, HTML, Python.
   Ogni app puo' ridefinire --c (colore accento) e i font display.
   ==================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --bg:#faf7f0; --paper:#fff; --ink:#1c2430; --ink-dim:#6b7785;
  --line:#e3ddd0; --line-strong:#c9c0ad;
  --c:#1f7a5c;                 /* accento app (override per app) */
  --c-soft:#e6f2ec;
  --accent2:#9a5b00;           /* ambra: formule/codice */
  --accent2-soft:#fdf3e2;
  --postit:#ffe98a; --postit-edge:#f4d24b; --postit-ink:#4a3a00;
  --ok:#1f7a5c; --bad:#c0392b;
  --head:#2a3340;
  --mono:'IBM Plex Mono',monospace; --sans:'IBM Plex Sans',sans-serif;
  --hand:'Caveat',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;min-height:100vh;
  background-image:radial-gradient(circle at 90% -10%,rgba(0,0,0,.04),transparent 40%)}

/* ---------- HEADER APP ---------- */
.bt-top{max-width:1320px;margin:0 auto;padding:24px 28px 10px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.bt-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--c)}
.bt-kicker a{color:var(--ink-dim);text-decoration:none}
.bt-kicker a:hover{color:var(--c)}
.bt-h1{font-family:var(--disp,'Fraunces',serif);font-weight:700;font-size:clamp(26px,4vw,40px);letter-spacing:-.02em;margin:4px 0 2px}
.bt-sub{color:var(--ink-dim);max-width:54ch;font-size:14px}

.bt-layout{max-width:1320px;margin:0 auto;padding:16px 28px 70px;display:grid;grid-template-columns:1fr 360px;gap:26px;align-items:start}
@media(max-width:1000px){.bt-layout{grid-template-columns:1fr}}

/* ---------- TOOLBAR GENERICA ---------- */
.bt-toolbar{display:flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:12px 12px 0 0;padding:9px 12px;flex-wrap:wrap}
.bt-tgroup{display:flex;gap:3px;padding:0 8px;border-right:1px solid var(--line)}
.bt-tgroup:last-child{border:none}
.bt-btn{height:32px;min-width:34px;padding:0 8px;border:1px solid transparent;border-radius:7px;background:transparent;cursor:pointer;font-size:14px;color:var(--ink);display:grid;place-items:center;transition:.12s;font-family:var(--sans)}
.bt-btn:hover{background:var(--c-soft)}
.bt-btn.on{background:var(--c);color:#fff}
.bt-btn b{font-weight:700}.bt-btn i{font-style:italic}.bt-btn u{text-decoration:underline}

/* ---------- AREA DI LAVORO (riempita dall'app) ---------- */
.bt-stage{background:var(--paper);border:1px solid var(--line);border-top:none;border-radius:0 0 12px 12px;overflow:auto}

/* ---------- TUTOR / POST-IT ---------- */
.bt-tutor{position:sticky;top:16px}
.bt-progress{display:flex;gap:5px;margin-bottom:14px}
.bt-pdot{flex:1;height:5px;border-radius:3px;background:var(--line)}
.bt-pdot.done{background:var(--c)} .bt-pdot.cur{background:var(--accent2)}

.bt-postit{
  background:linear-gradient(170deg,var(--postit),var(--postit-edge));
  border-radius:3px;padding:22px 22px 18px;position:relative;
  box-shadow:0 14px 30px -12px rgba(74,58,0,.5),0 2px 4px rgba(0,0,0,.1);
  transform:rotate(-1.2deg);transition:transform .2s;
}
.bt-postit::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(2deg);
  width:120px;height:26px;background:rgba(255,255,255,.35);border:1px solid rgba(0,0,0,.05);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.bt-postit:hover{transform:rotate(0deg)}
.bt-pi-step{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--postit-ink);opacity:.7}
.bt-pi-q{font-family:var(--hand);font-size:27px;line-height:1.15;font-weight:700;color:var(--postit-ink);margin:6px 0 12px}
.bt-pi-hint{font-size:14px;color:#5a4700;line-height:1.5}
.bt-pi-hint code{font-family:var(--mono);background:rgba(255,255,255,.55);color:var(--accent2);padding:1px 6px;border-radius:5px;font-size:13px;font-weight:600}
.bt-pi-why{display:none;margin-top:14px;border-top:1px dashed rgba(74,58,0,.3);padding-top:12px;font-size:13.5px;color:#5a4700;line-height:1.5}
.bt-pi-why.show{display:block;animation:bt-reveal .35s ease}
@keyframes bt-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.bt-pi-why b{color:var(--postit-ink)}
.bt-pi-why .rev{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--postit-ink);opacity:.7;display:block;margin-bottom:5px}

/* gate di confidenza (pre-verifica) */
.bt-conf{margin-top:14px;border-top:1px dashed rgba(74,58,0,.3);padding-top:12px}
.bt-conf-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--postit-ink);opacity:.75;margin-bottom:8px}
.bt-conf-row{display:flex;gap:7px}
.bt-conf-btn{flex:1;border:1.5px solid rgba(74,58,0,.35);background:rgba(255,255,255,.45);color:var(--postit-ink);
  border-radius:8px;padding:9px 6px;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:12.5px;line-height:1.15;transition:.14s}
.bt-conf-btn:hover{background:#fff}
.bt-conf-btn.on{background:var(--postit-ink);color:var(--postit);border-color:var(--postit-ink)}
.bt-pi-audio{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.55);cursor:pointer;font-size:17px;display:grid;place-items:center;transition:.15s}
.bt-pi-audio:hover{background:#fff;transform:scale(1.08)}
.bt-pi-audio.speaking{background:var(--c);color:#fff;animation:bt-pulse 1s infinite}
@keyframes bt-pulse{50%{box-shadow:0 0 0 6px rgba(31,122,92,.25)}}

.bt-feedback{margin:14px 2px 0;min-height:22px;font-size:14px;font-weight:600}
.bt-feedback.ok{color:var(--ok)} .bt-feedback.bad{color:var(--bad)}

.bt-nav{display:flex;gap:10px;margin-top:14px}
.bt-nav button{flex:1;padding:12px;border-radius:10px;font-family:var(--sans);font-weight:600;font-size:14px;cursor:pointer;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);transition:.15s}
.bt-nav button:hover{border-color:var(--c);color:var(--c)}
.bt-nav button.primary{background:var(--c);color:#fff;border-color:var(--c)}
.bt-nav button.primary:hover{filter:brightness(1.08);color:#fff}
.bt-nav button:disabled{opacity:.4;cursor:not-allowed}

.bt-closing{display:none;margin-top:16px;background:var(--accent2-soft);border:1px solid var(--accent2);border-radius:12px;padding:16px;font-size:14px;line-height:1.55}
.bt-closing.show{display:block}
.bt-closing .big{font-family:var(--disp,'Fraunces',serif);font-size:17px;font-weight:600;display:block;margin-bottom:6px}
.bt-closing b{color:var(--accent2)}

.bt-audio-note{font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);margin-top:10px;text-align:center}

/* ====================================================================
   COLONNA DI LAVORO + LAYOUT ZERO-SCROLL (schermi ampi, es. 22")
   La pagina non scorre: scorre solo l'area di lavoro o, se serve,
   la colonna del tutor. Sotto la soglia torna lo scroll naturale.
   ==================================================================== */
.bt-work{display:flex;flex-direction:column}
.bt-stage{min-height:0}

@media (min-width:1000px) and (min-height:740px){
  html{height:100%}
  body{height:100vh;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
  .bt-top{padding-top:18px;padding-bottom:6px}
  .bt-layout{min-height:0;height:100%;padding-top:10px;padding-bottom:16px;overflow:hidden;align-items:stretch}
  .bt-work{min-height:0;display:grid;grid-template-rows:auto 1fr}
  .bt-stage{min-height:0;height:100%}
  .bt-tutor{min-height:0;max-height:100%;overflow:auto;padding-right:2px}
}