/* A chiare lettere · interfaccia 16.35
   Colori presi dal logo: blu per le azioni, giallo solo per i suggerimenti, verde per ciò che è fatto.
   Il rosso non si usa per nessuno stato (troppo legato all’errore). Un solo carattere, scelto per la leggibilità. */
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2");font-weight:100 499;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-next-latin-600-normal.woff2) format("woff2");font-weight:500 900;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-next-latin-400-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

body.ui2{
  --u-bg:#eef2f4; --u-surface:#fff; --u-surface2:#f6f8f9; --u-ink:#15303d; --u-muted:#566a74; --u-line:#d9e1e5;
  --u-navy:#173b4f; --u-primary:#2e7fa6; --u-primary-soft:#e3f0f6; --u-sun:#e2c34c; --u-sun-soft:#fbf2d6; --u-sun-ink:#5b4510;
  --u-ok:#2f7d57; --u-ok-soft:#e2f2ea; --u-mark:#3d5a69; --u-mark-soft:#e4ecf0; --u-r:6px;
  --u-font:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  background:var(--u-bg)!important;color:var(--u-ink)!important;font-family:var(--u-font)!important;font-size:16px;line-height:1.45;
}
body.ui2 *{font-family:inherit}
body.ui2 h1,body.ui2 h2,body.ui2 h3{font-family:var(--u-font)!important;font-weight:700;color:var(--u-ink);letter-spacing:0}
body.ui2 :focus-visible{outline:3px solid var(--u-primary);outline-offset:2px}
body.ui2 .hidden{display:none!important}
body.ui2 [hidden]{display:none!important}

/* intestazione */
body.ui2 .top{background:var(--u-navy)!important;color:#fff;padding:10px max(20px,calc((100vw - 1240px)/2))!important;border:0!important;box-shadow:none!important}
body.ui2 .top::before,body.ui2 .top::after{display:none!important}
body.ui2 .top h1{color:#fff!important;font-size:19px!important;margin:0!important}
body.ui2 .top p{color:#fff!important;opacity:.8;font-size:14px!important}
body.ui2 .top .brand-logo{width:40px!important;height:40px!important}
body.ui2 #logout{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.4)!important}
body.ui2 .release-marker{display:none}

/* controlli di base */
:where(body.ui2) button{font-family:var(--u-font);border-radius:var(--u-r)!important;font-weight:700;background:var(--u-primary)!important;color:#fff!important;border:1px solid var(--u-primary)!important;padding:9px 14px;box-shadow:none!important;width:auto}
:where(body.ui2) button.secondary,:where(body.ui2) button.ghost,:where(body.ui2) button.danger,:where(body.ui2) button.error-action,:where(body.ui2) .u-btn{background:var(--u-surface)!important;color:var(--u-ink)!important;border:1px solid var(--u-line)!important}
:where(body.ui2) button.secondary:hover,:where(body.ui2) button.ghost:hover,:where(body.ui2) button.danger:hover,:where(body.ui2) .u-btn:hover{border-color:var(--u-primary)!important;background:var(--u-surface)!important;color:var(--u-ink)!important}
:where(body.ui2) button.danger{color:var(--u-muted)!important}
:where(body.ui2) button:disabled{opacity:.45;cursor:not-allowed}
body.ui2 input,body.ui2 select,body.ui2 textarea{border:1px solid var(--u-line)!important;border-radius:var(--u-r)!important;background:var(--u-surface)!important;color:var(--u-ink)!important;font-family:var(--u-font)}
body.ui2 label{font-weight:700;font-size:15px}
body.ui2 .muted,body.ui2 .smallnote{color:var(--u-muted)!important}
body.ui2 .chip{background:var(--u-surface)!important;border:1px solid var(--u-line)!important;border-radius:999px;color:var(--u-ink)!important}
body.ui2 .notice{background:var(--u-surface2)!important;border:1px solid var(--u-line);border-radius:var(--u-r)}

/* struttura nuova */
body.ui2 #app.u-on > *:not(#u-root){display:none!important}
body.ui2 #app.u-on{max-width:none;padding:0;margin:0}
body.ui2 main.wrap{max-width:1240px!important;margin:0 auto!important;padding:16px 20px 60px!important}
#u-root{display:block}
.u-crumbs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:15px;color:var(--u-muted);margin:0 0 14px}
.u-crumbs button{background:none!important;border:0!important;color:var(--u-primary)!important;padding:2px 4px!important;text-decoration:underline;text-underline-offset:3px;font-weight:400}
.u-head{display:flex;gap:12px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.u-head h1{font-size:24px;margin:0}
.u-eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--u-muted);font-weight:700}
.u-panel{background:var(--u-surface);border:1px solid var(--u-line);border-radius:var(--u-r);padding:16px}
.u-suggest{background:var(--u-sun-soft);border:1px solid var(--u-sun);border-radius:var(--u-r);padding:16px}
.u-suggest .u-eyebrow{color:var(--u-sun-ink)}
.u-stack{display:grid;gap:14px}
.u-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.u-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.u-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:760px){.u-grid2,.u-grid3{grid-template-columns:1fr}}
.u-pill{display:inline-block;font-size:13px;border-radius:999px;padding:2px 9px;background:var(--u-surface2);border:1px solid var(--u-line);color:var(--u-muted);white-space:nowrap}
.u-pill.ok{background:var(--u-ok-soft);border-color:transparent;color:var(--u-ok)}
.u-pill.sun{background:var(--u-sun-soft);border-color:var(--u-sun);color:var(--u-sun-ink)}
.u-help{font-size:14px;color:var(--u-muted);margin:0}
.u-tabs{display:flex;gap:4px;border-bottom:1px solid var(--u-line);margin-bottom:16px;overflow-x:auto}
.u-tabs button{background:none!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;color:var(--u-muted)!important;padding:10px 14px!important;white-space:nowrap}
.u-tabs button[aria-selected="true"]{color:var(--u-ink)!important;border-bottom-color:var(--u-primary)!important}
.u-subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.u-subtabs button{background:var(--u-surface)!important;color:var(--u-muted)!important;border:1px solid var(--u-line)!important}
.u-subtabs button[aria-selected="true"]{background:var(--u-ink)!important;color:#fff!important;border-color:var(--u-ink)!important}
.u-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--u-line);border-radius:var(--u-r);overflow:hidden;background:var(--u-surface)}
.u-seg button{background:transparent!important;color:var(--u-muted)!important;border:0!important;border-radius:0!important;padding:8px 12px!important}
.u-seg button[aria-pressed="true"]{background:var(--u-primary)!important;color:#fff!important}
.u-field{display:grid;gap:6px;align-content:start}
.u-field > label{margin:0!important}
.u-field select,.u-field input{width:100%}

/* elenco ragazzi */
.u-kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.u-kid{background:var(--u-surface)!important;color:var(--u-ink)!important;border:1px solid var(--u-line)!important;border-radius:var(--u-r)!important;padding:14px!important;text-align:left;display:grid;gap:8px;font-weight:400!important;cursor:pointer}
.u-kid:hover{border-color:var(--u-primary)!important}
.u-kid h3{margin:0;font-size:19px}
.u-kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:15px;margin:0}
.u-kv dt{color:var(--u-muted)} .u-kv dd{margin:0;font-weight:700}

/* pagina Oggi */
.u-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:900px){.u-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.u-metrics{grid-template-columns:1fr}}
.u-metric{background:var(--u-surface);border:1px solid var(--u-line);border-radius:var(--u-r);padding:12px 14px;display:grid;gap:2px;align-content:start}
.u-metric b{font-size:22px;font-variant-numeric:tabular-nums}
.u-today{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
@media(max-width:900px){.u-today{grid-template-columns:1fr}}
.u-actions3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:700px){.u-actions3{grid-template-columns:1fr}}
.u-bigaction{background:var(--u-surface)!important;color:var(--u-ink)!important;border:1px solid var(--u-line)!important;text-align:left;display:grid;gap:4px;padding:14px!important;font-weight:400!important}
.u-bigaction:hover{border-color:var(--u-primary)!important}
.u-bigaction strong{font-size:17px}
.u-tl{display:grid;gap:8px;font-size:15px}
.u-tl > div{display:grid;grid-template-columns:96px 1fr;gap:10px}
.u-chart{width:100%;height:auto;display:block}
.u-table{border-collapse:collapse;width:100%;font-size:15px}
.u-table th,.u-table td{padding:8px 10px;border-bottom:1px solid var(--u-line);text-align:left;vertical-align:top}
.u-table th{color:var(--u-muted);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.u-table tbody tr{cursor:pointer}
.u-table tr.sel td{background:var(--u-primary-soft)}
.u-tablewrap{overflow-x:auto}

/* compositore */
.u-composer{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:16px;align-items:start}
@media(max-width:1000px){.u-composer{grid-template-columns:1fr}}
.u-cart{position:sticky;top:12px;background:var(--u-surface);border:1px solid var(--u-line);border-radius:var(--u-r);display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:calc(100vh - 24px)}
@media(max-width:1000px){.u-cart{position:static;max-height:none}}
.u-cart > header{padding:12px 14px;border-bottom:1px solid var(--u-line);display:grid;gap:6px}
.u-cart-body{overflow:auto;padding:8px 10px}
.u-cart > footer{padding:12px 14px;border-top:1px solid var(--u-line);display:grid;gap:8px}
.u-cart #exerciseList .exercise-row{grid-template-columns:minmax(0,1fr) auto;padding:8px 0;font-size:15px}
.u-cart #exerciseList .exercise-row strong{font-size:15px;overflow-wrap:anywhere}
.u-cart #exerciseList .exercise-actions{flex-wrap:wrap;justify-content:flex-end}
.u-cart #exerciseList .exercise-actions button{padding:4px 7px!important;font-size:13px;background:var(--u-surface)!important;color:var(--u-muted)!important;border:1px solid var(--u-line)!important}
.u-cart #shareBox{margin:0}
.u-cart #shareUrl{font-size:13px}
.u-cart details summary{cursor:pointer;color:var(--u-primary);font-weight:700;font-size:15px}
.u-cart #homeworkSummaryBox{background:var(--u-sun-soft)!important;border:1px solid var(--u-sun);font-size:14px}
.u-moved .grid2,.u-moved .row,.u-moved .row3{gap:12px}
.u-moved{display:grid;gap:12px}
.u-moved > *{margin:0!important}
.u-wordpreview{display:flex;flex-wrap:wrap;gap:6px}
.u-wchip{border:1px solid var(--u-line);border-radius:var(--u-r);padding:4px 9px;background:var(--u-surface);font-size:16px}
.u-wchip.syl{border-style:dashed;border-color:var(--u-primary)}
.u-wchip .sep{color:var(--u-primary)}
.u-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--u-muted)}

/* biblioteca */
.u-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;max-height:560px;overflow:auto;padding:2px}
.u-tcard{background:var(--u-surface)!important;color:var(--u-ink)!important;border:1px solid var(--u-line)!important;text-align:left;display:grid;gap:6px;align-content:start;padding:11px!important;font-weight:400!important}
.u-tcard:hover{border-color:var(--u-primary)!important}
.u-tcard[aria-current="true"]{border-color:var(--u-primary)!important;box-shadow:0 0 0 2px var(--u-primary-soft)!important}
.u-tcard h4{margin:0;font-size:16px;line-height:1.25}
.u-meter{display:inline-flex;gap:2px}
.u-meter i{width:9px;height:9px;border-radius:2px;background:var(--u-line)}
.u-meter i.on{background:var(--u-primary)}
.u-filterchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.u-filterchips button{background:var(--u-surface)!important;color:var(--u-ink)!important;border:1px solid var(--u-line)!important;border-radius:999px!important;padding:5px 11px!important;font-weight:400!important;font-size:14px}
.u-filterchips button[aria-pressed="true"]{background:var(--u-primary-soft)!important;border-color:var(--u-primary)!important;font-weight:700!important}
.u-textpreview{font-size:18px;line-height:1.7;background:var(--u-surface2);border-radius:var(--u-r);padding:12px 14px;max-height:240px;overflow:auto}
.u-textpreview mark{background:#fde8a6;color:inherit;border-radius:3px}

/* elementi esistenti dentro le schermate nuove */
body.ui2 #u-root .card{box-shadow:none!important;border-radius:var(--u-r)!important;border:1px solid var(--u-line)!important;background:var(--u-surface)!important}
body.ui2 #u-root .card::before{display:none!important}
body.ui2 #u-root .assignment-table{font-size:15px}
body.ui2 #u-root .text-prep-box{background:var(--u-surface2)!important;border:1px solid var(--u-line)!important;border-radius:var(--u-r)}
body.ui2 #u-root .candidate-word{background:var(--u-surface)!important;border:1px solid var(--u-line)!important;border-radius:var(--u-r)!important}
body.ui2 #u-root .work-plan-quick-summary,body.ui2 #u-root .work-plan-copy{background:var(--u-surface)!important;border-color:var(--u-line)!important}
body.ui2 #monitoringOverview .monitor-row,body.ui2 #monitoringOverview > *{border-radius:var(--u-r)}

/* schermata del ragazzo */
body.ui2.child .child-header{background:transparent!important}
body.ui2.child .child-brand-title{color:var(--u-navy)!important;font-family:var(--u-font)!important}
body.ui2.child .card{border-radius:var(--u-r)!important;box-shadow:none!important;border:1px solid var(--u-line)!important}
body.ui2.child .readingtext,body.ui2.child .readingline,body.ui2.child .bigword{font-family:var(--u-font)!important;color:var(--u-ink)}
body.ui2.child .bigword .lit{color:var(--u-ink)!important}
body.ui2.child .control-label{color:var(--u-muted)!important}
body.ui2.child #markCorrectWord,body.ui2.child #markErrorWord{background:var(--u-surface)!important;color:var(--u-ink)!important;border:1px solid var(--u-line)!important;min-width:150px}
body.ui2.child .tw{cursor:pointer;border-radius:4px}
body.ui2.child .tw.err{background:var(--u-mark-soft);box-shadow:inset 0 -3px 0 var(--u-mark)}
body.ui2.child .wide-spacing .readingtext,body.ui2.child .wide-spacing .readingline,body.ui2.child .wide-spacing .progressive-text{letter-spacing:.12em;word-spacing:.25em}
body.ui2.child .text-result{display:grid;gap:10px;justify-items:center;text-align:center;padding:30px 10px}
body.ui2.child .text-result-time{font-size:44px;font-weight:700;font-variant-numeric:tabular-nums}

html:has(body.ui2){background:#eef2f4!important}
body.ui2{min-height:100vh}
/* hover: neutralizza gli stati :hover della grafica precedente (con !important) */
body.ui2 button:hover:not(:disabled){background:#256a8b!important;border-color:#256a8b!important;color:#fff!important}
body.ui2 :is(button.secondary,button.ghost,button.danger,button.error-action,.u-btn,.u-kid,.u-bigaction,.u-tcard,.u-filterchips button,.u-cart #exerciseList .exercise-actions button):hover:not(:disabled){background:var(--u-surface)!important;border-color:var(--u-primary)!important;color:var(--u-ink)!important}
body.ui2 :is(.u-tabs button,.u-crumbs button):hover:not(:disabled){background:none!important;color:var(--u-ink)!important;border-color:transparent!important}
body.ui2 .u-tabs button:hover:not(:disabled){border-bottom-color:var(--u-line)!important}
body.ui2 .u-crumbs button:hover:not(:disabled){color:var(--u-primary)!important}
body.ui2 .u-tabs button[aria-selected="true"]:hover:not(:disabled){border-bottom-color:var(--u-primary)!important}
body.ui2 .u-subtabs button:hover:not(:disabled){background:var(--u-surface)!important;color:var(--u-ink)!important;border-color:var(--u-primary)!important}
body.ui2 .u-subtabs button[aria-selected="true"]:hover:not(:disabled){background:var(--u-ink)!important;color:#fff!important}
body.ui2 .u-seg button:hover:not(:disabled){background:var(--u-primary-soft)!important;color:var(--u-ink)!important}
body.ui2 .u-seg button[aria-pressed="true"]:hover:not(:disabled){background:var(--u-primary)!important;color:#fff!important}
body.ui2 .u-filterchips button[aria-pressed="true"]:hover:not(:disabled){background:var(--u-primary-soft)!important}
body.ui2 #logout:hover:not(:disabled){background:rgba(255,255,255,.1)!important;border-color:#fff!important}
.u-today > .u-stack{align-content:start}
.u-suggest{align-content:start}
#refreshMonitoringOverviewBtn{justify-self:start;width:auto!important}
.u-seg{justify-self:start;max-width:100%}
.u-seg{align-self:start}
body.child.ui2 .child-header{background:var(--u-bg)!important;box-shadow:none!important;border:0!important}
body.child.ui2 .child-header::before,body.child.ui2 .child-header::after{display:none!important}
.u-cart #exerciseList .exercise-row{grid-template-columns:1fr!important;gap:6px}
.u-cart #exerciseList .exercise-actions{justify-content:flex-start!important}
body.ui2 textarea,body.ui2 input,body.ui2 select{max-width:100%;box-sizing:border-box}

/* 16.35.2 · coerenza con Tatami Words: testo un po' più grande, grassetto più leggero */
body.ui2 :is(b,strong,th,h1,h2,h3,h4,label,button,.u-eyebrow){font-weight:600}
body.ui2.child .child-brand-title{font-size:1.5rem}
body.ui2.child :is(.card p,.notice,.muted,.pill,.chip,.control-label){font-size:17px}
body.ui2.child button{font-size:17px}

/* Brano: brani già letti dal ragazzo */
.u-readbox{border:1px solid var(--u-line);border-left:5px solid var(--u-primary);border-radius:12px;padding:10px 12px;display:grid;gap:8px;background:var(--u-surface)}
.u-readlist{display:flex;flex-wrap:wrap;gap:6px}
body.ui2 .u-readchip{display:grid!important;gap:1px;text-align:left;padding:6px 10px!important;border-radius:9px!important;border:1px solid var(--u-line)!important;background:var(--u-primary-soft)!important;color:var(--u-ink)!important;font-weight:400!important;min-height:0!important}
.u-readchip b{font-size:14px}.u-readchip span{font-size:12px;color:var(--u-muted,#5b6b75)}
body.ui2 .u-tcard.u-tread{box-shadow:inset 5px 0 0 var(--u-primary)!important;background:var(--u-primary-soft)!important}
.u-pill.u-readpill{background:var(--u-primary);border-color:transparent;color:#fff;font-weight:600}
body.ui2 .u-tcard.u-tread[aria-current="true"]{box-shadow:inset 5px 0 0 var(--u-primary),0 0 0 3px var(--u-primary)!important}