/* ---------- Il quaderno: token comuni (tema "media" come base) ---------- */
:root {
  --paper: #FCFDFF; --grid: #D9E5F3; --grid-size: 18px; --margin: #E46F6F;
  --ink: #1F3A93; --ink-soft: #4B5D8F; --pencil: #F6C64A; --text: #22263A; --muted: #5F6680;
  --bubble-mt: #FFFFFF; --bubble-me: #E8F0FF; --bubble-line: #CBD8EC; --r-bubble: 18px; --r-ui: 12px;
  --hand: "Patrick Hand", "Comic Neue", cursive; --chat-size: 18px; --margin-x: 56px;
}
@media (max-width: 600px) { :root { --margin-x: 24px; } }
@media (prefers-color-scheme: dark) {
  :root { --paper: #171B26; --grid: rgba(255,255,255,.06); --margin: #B24A4A; --ink: #9DB5FF; --ink-soft: #AAB6D8;
    --text: #EEF0F7; --muted: #A2A8BD; --bubble-mt: #20263A; --bubble-me: #1E2E52; --bubble-line: #34405E; }
}
body.theme-primaria { --grid-size: 26px; --grid: #F3DFB4; --margin: #FF6B6B; --ink: #2F6FD6; --pencil: #FFCC33;
  --bubble-me: #FFF2C6; --bubble-line: #F0D99A; --r-bubble: 26px; --r-ui: 18px; --chat-size: 20px; }
body.theme-secondaria2 { --grid: #E2E7EF; --margin: transparent; --ink: #2B3442; --ink-soft: #4E596B; --pencil: #8FE3B0;
  --bubble-me: #EAF6EF; --bubble-line: #D5DEE8; --r-bubble: 10px; --r-ui: 8px; --chat-size: 17px; }
@media (prefers-color-scheme: dark) {
  body.theme-primaria { --grid: rgba(255,204,51,.08); --bubble-me: #3A3216; --bubble-line: #5A4C1E; --ink: #8FB8FF; }
  body.theme-secondaria2 { --grid: rgba(255,255,255,.05); --ink: #D5DCE8; --bubble-me: #1D3328; --bubble-line: #2D4A3B; }
}

/* carta: quadretti, righe per le superiori, margine rosso */
.paper { background-color: var(--paper);
  background-image: linear-gradient(90deg, transparent calc(var(--margin-x) - 1px), var(--margin) calc(var(--margin-x) - 1px), var(--margin) calc(var(--margin-x) + 1px), transparent calc(var(--margin-x) + 1px)),
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100% 100%, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size); }
body.theme-secondaria2 .paper { background-image: linear-gradient(var(--grid) 1px, transparent 1px); background-size: 100% 30px; }
.hand { font-family: var(--hand); }
.mt-avatar { flex: none; display: block; }
.preview[hidden] { display: none !important; }

/* ---------- Chat dello studente ---------- */
body.chatbody { background-color: var(--paper); color: var(--text); }
body.chatbody .top { background: var(--paper); border-bottom-color: var(--bubble-line); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 4px; }
.chat-head .who-mt { flex: 1; min-width: 0; }
.chat-head .name { font-family: var(--hand); font-size: 1.55rem; color: var(--ink); line-height: 1; }
.chat-head .sub { font-size: .85rem; color: var(--muted); }
.btn-astuccio { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 14px;
  background: var(--pencil); color: #2A2410; border: 0; font-weight: 700; }
.btn-astuccio:focus-visible, .astuccio button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
main.chat .toolbar { padding: 4px 16px 8px; color: var(--muted); }
main.chat { background: var(--paper); max-width: none; }
main.chat .log { font-size: var(--chat-size); padding-left: calc(var(--margin-x) + 14px); border-top: 2px solid var(--bubble-line); }
main.chat .chat-head, main.chat .toolbar, main.chat .composer > * { max-width: 980px; }
body.theme-secondaria2 main.chat .log { padding-left: 16px; }
main.chat .bubble { border-radius: var(--r-bubble); border-color: var(--bubble-line); background: var(--bubble-mt); }
main.chat .msg.me .bubble { background: var(--bubble-me); }
main.chat .msg.mt .bubble { border-bottom-left-radius: 4px; }
main.chat .msg.me .bubble { border-bottom-right-radius: 4px; }
main.chat .msg.mt .body { font-family: var(--hand); font-size: 1.12em; color: var(--ink); line-height: 1.45; }
body.theme-secondaria2 main.chat .msg.mt .body { font-family: inherit; font-size: 1em; color: var(--text); }
main.chat .msg.mt .body strong { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--pencil) 70%, transparent) 55%); color: inherit; }
main.chat .composer { background: var(--paper); border-top: 2px solid var(--bubble-line); }
main.chat .composer textarea { background: var(--bubble-mt); border-radius: var(--r-ui); }
main.chat .send { background: var(--ink); border-color: var(--ink); color: var(--paper); border-radius: var(--r-ui); }
main.chat .attach { border-radius: var(--r-ui); background: var(--bubble-mt); }
.chat-layout { flex: 1; display: flex; min-height: 0; width: 100%; }
.chat-layout main.chat { flex: 1; }

/* ---------- L'astuccio ---------- */
.astuccio { width: 340px; flex: none; border-left: 2px solid var(--bubble-line); background: var(--bubble-mt);
  display: flex; flex-direction: column; min-height: 0; }
.astuccio[hidden] { display: none; }
.astuccio-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--bubble-line); }
.astuccio-head h2 { margin: 0; font-family: var(--hand); font-size: 1.5rem; color: var(--ink); font-weight: 400; }
.astuccio-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
.astuccio-tabs button { border-radius: 999px; padding: 6px 12px; font-size: .88rem; background: transparent; border: 1.5px solid var(--bubble-line); color: var(--text); }
.astuccio-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.astuccio-body { flex: 1; overflow: auto; padding: 4px 14px 18px; color: var(--text); }
.tool h3 { font-size: 1rem; margin: 6px 0 10px; }
.tool .hint { color: var(--muted); font-size: .85rem; }
/* calcolatrice */
.calc-display { width: 100%; font: 600 1.6rem/1.2 "Atkinson Hyperlegible", sans-serif; text-align: right; padding: 10px 12px;
  border-radius: var(--r-ui); border: 2px solid var(--bubble-line); background: var(--paper); color: var(--text); }
.calc-expr { min-height: 1.2em; text-align: right; color: var(--muted); font-size: .9rem; margin: 4px 2px 8px; overflow-wrap: anywhere; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.calc-keys.sci { grid-template-columns: repeat(5, 1fr); }
.calc-keys button { padding: 12px 0; font-size: 1.05rem; border-radius: var(--r-ui); background: var(--paper); border: 1.5px solid var(--bubble-line); color: var(--text); }
.calc-keys button.op { color: var(--ink); font-weight: 700; }
.calc-keys button.eq { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* tabelline */
.tab-grid { display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; font-size: .85rem; text-align: center; }
.tab-grid div { padding: 5px 0; border-radius: 4px; background: var(--paper); }
.tab-grid .h { font-weight: 700; color: var(--ink); background: transparent; }
.tab-grid .hl { background: color-mix(in srgb, var(--pencil) 45%, var(--paper)); }
.tab-grid .hit { background: var(--pencil); color: #2A2410; font-weight: 700; }
/* formulario */
.formula { border: 1.5px solid var(--bubble-line); border-radius: var(--r-ui); padding: 10px 12px; margin-bottom: 8px; background: var(--paper); }
.formula b { display: block; margin-bottom: 2px; color: var(--ink); }
.formula span { display: block; font-size: .92rem; }
/* equivalenze */
.conv { display: grid; gap: 8px; }
.conv .row2 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.conv-out { font-size: 1.4rem; font-weight: 700; color: var(--ink); text-align: center; padding: 8px; border-radius: var(--r-ui); background: var(--paper); }
/* timer */
.timer-face { font: 700 3rem/1 "Atkinson Hyperlegible", sans-serif; text-align: center; color: var(--ink); margin: 8px 0; font-variant-numeric: tabular-nums; }
.timer-bar { height: 10px; border-radius: 99px; background: var(--paper); border: 1px solid var(--bubble-line); overflow: hidden; }
.timer-bar i { display: block; height: 100%; width: 0; background: var(--pencil); transition: width 1s linear; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chips button { border-radius: 999px; padding: 6px 12px; font-size: .88rem; background: var(--paper); border: 1.5px solid var(--bubble-line); color: var(--text); }
.notes { width: 100%; min-height: 260px; font-family: var(--hand); font-size: 1.15rem; line-height: 30px; color: var(--ink);
  background: var(--paper) linear-gradient(transparent 29px, var(--grid) 29px) 0 0 / 100% 30px; border-radius: var(--r-ui); border: 1.5px solid var(--bubble-line); padding: 6px 10px; }

@media (max-width: 860px) {
  .astuccio { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 72dvh; border-left: 0; border-top: 2px solid var(--bubble-line);
    border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(20,30,60,.18); z-index: 20; }
}
@media (prefers-reduced-motion: reduce) { .timer-bar i { transition: none; } }

/* ---------- Landing ---------- */
body.landing { background-color: var(--paper); color: var(--text);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px; }
.land-top { display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(16px, 4vw, 48px); }
.land-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.land-brand span { font-family: var(--hand); font-size: 1.8rem; color: var(--ink); }
.land-top a.enter { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--pencil); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 72px);
  padding: clamp(16px, 4vw, 48px) clamp(16px, 4vw, 48px) clamp(40px, 6vw, 80px); max-width: 1180px; margin: 0 auto; align-items: start; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -.01em; margin: 6px 0 14px; color: var(--text); font-weight: 700; }
.hero .lead { font-size: 1.2rem; max-width: 34ch; color: var(--muted); margin: 0 0 26px; }
.login-card { background: var(--bubble-mt); border: 2px solid var(--bubble-line); border-radius: 18px; padding: 20px; max-width: 420px; }
.login-card h2 { font-family: var(--hand); font-weight: 400; font-size: 1.6rem; color: var(--ink); margin: 0 0 10px; }
.login-card input { background: var(--paper); font-size: 1.1rem; padding: 12px 14px; }
.login-card button.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); font-size: 1.1rem; padding: 12px; border-radius: 12px; }
.sample { position: relative; margin: 0; border-radius: 6px 18px 18px 6px; padding: 28px 22px 28px calc(var(--margin-x) + 16px); border: 2px solid var(--bubble-line);
  box-shadow: 0 1px 0 var(--bubble-line), 0 18px 40px -24px rgba(31,58,147,.45); transform: rotate(.6deg); }
.sample .holes { position: absolute; left: calc(var(--margin-x) / 2 - 7px); top: 28px; bottom: 28px; display: flex; flex-direction: column; justify-content: space-between; }
.sample .holes i { width: 14px; height: 14px; border-radius: 50%; background: var(--bubble-line); }
.sample .date { font-family: var(--hand); color: var(--margin); font-size: 1.2rem; margin: 0 0 14px; }
.sample .line { margin: 0 0 16px; font-size: 1.08rem; }
.sample .kid { color: var(--text); }
.sample .kid::before { content: attr(data-who) " "; font-weight: 700; }
.sample .mt { display: flex; gap: 10px; align-items: flex-start; font-family: var(--hand); font-size: 1.35rem; color: var(--ink); line-height: 1.35; }
.sample .stamp { display: inline-block; margin-top: 4px; font-family: var(--hand); font-size: 1.1rem; color: #2A2410; background: var(--pencil); padding: 2px 12px; border-radius: 4px; transform: rotate(-2deg); }
.parents { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 56px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); }
.parents h2 { font-size: 1.7rem; margin: 0; }
.parents dl { margin: 0; display: grid; gap: 18px; }
.parents dt { font-weight: 700; color: var(--ink); }
.parents dd { margin: 2px 0 0; color: var(--muted); max-width: 60ch; }
.land-foot { border-top: 2px solid var(--bubble-line); padding: 18px clamp(16px, 4vw, 48px); color: var(--muted); font-size: .9rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .hero, .parents { grid-template-columns: 1fr; }
  .sample { transform: none; }
}
@media (max-width: 600px) {
  .land-top { padding: 12px 16px; }
  .land-brand span { font-size: 1.5rem; }
  .land-brand .mt-avatar { width: 38px; height: 38px; }
  .hero { padding: 8px 16px 32px; gap: 28px; }
  .hero h1 { font-size: 2.1rem; margin-top: 0; }
  .hero .lead { font-size: 1.05rem; margin-bottom: 18px; }
  .login-card { max-width: none; padding: 16px; }
  .login-card h2 { font-size: 1.4rem; }
  .sample { padding: 18px 14px 18px calc(var(--margin-x) + 12px); border-radius: 6px 14px 14px 6px; }
  .sample .holes { display: none; }
  .sample .date { font-size: 1.05rem; margin-bottom: 10px; }
  .sample .line { font-size: .98rem; margin-bottom: 12px; }
  .sample .mt { font-size: 1.15rem; gap: 8px; }
  .sample .mt .mt-avatar { width: 30px; height: 30px; }
  .parents { padding: 0 16px 36px; gap: 14px; }
  .parents h2 { font-size: 1.45rem; }
  .land-foot { padding: 14px 16px; flex-direction: column; gap: 4px; }
  main.chat .msg { max-width: 100%; }
  main.chat .toolbar { gap: 8px; }
  main.chat .composer { padding-left: 10px; padding-right: 10px; }
  main.chat .composer .row { flex-wrap: nowrap; gap: 6px; }
  main.chat .attach { width: 44px; height: 44px; }
  main.chat .send { width: 48px; height: 44px; }
  main.chat .toolbar { flex-wrap: nowrap; font-size: .82rem; gap: 6px; padding: 2px 12px 8px; }
  main.chat .toolbar button.small { padding: 5px 8px; white-space: nowrap; }
  main.chat .toolbar .switch { white-space: nowrap; }
  main.chat .toolbar select { padding: 4px 6px; font-size: .82rem; }
}
@media (max-width: 600px) {
  body.chatbody .top .brand span { display: none; }
  .chat-head { gap: 10px; padding: 10px 14px 2px; }
  .chat-head .name { font-size: 1.3rem; }
  .btn-astuccio { padding: 7px 12px; font-size: .9rem; }
}