/* ==========================================================================
   Inbox Briefs — app.css
   Direzione "Registro": colonna di prosa + corsia di metadati.
   Un solo foglio. Tutti i colori / spazi / tipi sono variabili CSS.
   Nessun JS: expand = <details>, azioni = <form>/<button> (HTMX).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font
   In produzione: servi i .woff2 da /static/fonts/ e attiva questo blocco.
   Nei mock i font arrivano da un <link> nel <head> (solo per il mock).
   -------------------------------------------------------------------------- */
@font-face{font-family:"Source Serif 4";src:url("/static/fonts/SourceSerif4-Variable.woff2") format("woff2-variations");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/static/fonts/SourceSerif4-Italic-Variable.woff2") format("woff2-variations");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/static/fonts/SourceSans3-Variable.woff2") format("woff2-variations");font-weight:200 900;font-style:normal;font-display:swap}
/* -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. Token — tema chiaro (default)
   -------------------------------------------------------------------------- */
:root{
  /* famiglie */
  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-sans:"Source Sans 3",system-ui,-apple-system,sans-serif;

  /* scala tipografica */
  --t-lede:22px;      --lh-lede:1.48;
  --t-lede-2:17px;    --lh-lede-2:1.6;
  --t-summary:17.5px; --lh-summary:1.6;
  --t-subject:17px;   --lh-subject:1.35;
  --t-list:16px;      --lh-list:1.5;
  --t-todo:15px;      --lh-todo:1.5;
  --t-compact:15px;   --lh-compact:1.55;
  --t-rail:12px;      --ls-rail:.09em;
  --t-meta:11.5px;
  --t-ui:11.5px;
  --t-tag:9.5px;      --ls-tag:.09em;
  --t-micro:10px;     --ls-micro:.12em;

  /* spazi */
  --s1:4px; --s2:8px; --s3:12px; --s4:18px; --s5:26px; --s6:40px; --s7:64px;
  --pad:52px;          /* margine laterale pagina */
  --rail-w:196px;      /* corsia metadati */
  --gutter:34px;       /* fra corsia e prosa */
  --measure:640px;     /* misura massima della prosa */

  /* carta e inchiostro */
  --paper:#fcfbf8;
  --paper-2:#f1eee6;
  --paper-3:#eeeae1;
  --ink:#1b1917;
  --ink-2:#26231f;
  --ink-3:#5a544b;
  --ink-4:#8f887c;
  --ink-5:#b8b1a6;
  --ink-6:#cfc9bd;

  /* filetti */
  --rule-strong:#1b1917;
  --rule:#e6e2d8;
  --rule-soft:#eeeae1;

  /* colori dei tre account */
  --acc-1:oklch(.52 .13 262);  --acc-1-ink:oklch(.42 .11 262);  --acc-1-soft:oklch(.86 .05 262);
  --acc-2:oklch(.52 .13 160);  --acc-2-ink:oklch(.42 .11 160);  --acc-2-soft:oklch(.86 .05 160);
  --acc-3:oklch(.52 .13 25);   --acc-3-ink:oklch(.42 .11 25);   --acc-3-soft:oklch(.86 .05 25);
  /* scala dell'accento da config: la tinta arriva da accounts.yaml, luminosità e croma da qui */
  --acc-l:.52;  --acc-c:.13;  --acc-ink-l:.42;  --acc-ink-c:.11;  --acc-soft-l:.86;  --acc-soft-c:.05;

  /* colori di stato */
  --state-unread:var(--ink);
  --state-read:var(--ink-5);
  --state-empty:var(--ink-6);
  --warn:oklch(.5 .12 75);       /* dubbio */
  --warn-soft:oklch(.78 .1 75);

  --focus:oklch(.52 .13 262);

  /* Motion (T-131): HTMX swaps and page navigation. Read only inside
     prefers-reduced-motion:no-preference (section 16). */
  --motion-dur:180ms;                     /* fade of a swapped block */
  --motion-ease:cubic-bezier(.2,0,0,1);   /* fast start, soft landing */
  --motion-rise:4px;                      /* revealed content lifts into place */
  --motion-settle:900ms;                  /* the settle highlight fading out */
  --motion-page:220ms;                    /* cross-page fade */
  --motion-open:300ms;                    /* the original's details sliding open and shut;
                                             the first live-judged value (2026-09-26): taste, not physics */
}

/* tema scuro via preferenza di sistema */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14130f;
    --paper-2:#1e1c16;
    --paper-3:#26231c;
    --ink:#f2efe6;
    --ink-2:#e4dfd2;
    --ink-3:#b5ae9f;
    --ink-4:#8b8474;
    --ink-5:#6c6558;
    --ink-6:#4a463d;
    --rule-strong:#e4dfd2;
    --rule:#302c24;
    --rule-soft:#25221b;
    --acc-1:oklch(.7 .12 262);  --acc-1-ink:oklch(.82 .09 262);  --acc-1-soft:oklch(.4 .07 262);
    --acc-2:oklch(.7 .12 160);  --acc-2-ink:oklch(.82 .09 160);  --acc-2-soft:oklch(.4 .07 160);
    --acc-3:oklch(.7 .12 25);   --acc-3-ink:oklch(.82 .09 25);   --acc-3-soft:oklch(.4 .07 25);
    --acc-l:.7;  --acc-c:.12;  --acc-ink-l:.82;  --acc-ink-c:.09;  --acc-soft-l:.4;  --acc-soft-c:.07;
    --warn:oklch(.78 .1 75);
    --warn-soft:oklch(.5 .09 75);
    --focus:oklch(.7 .12 262);
  }
}

/* tema scuro forzato (usato solo per i mock affiancati) */
[data-theme="dark"]{
  --paper:#14130f;
  --paper-2:#1e1c16;
  --paper-3:#26231c;
  --ink:#f2efe6;
  --ink-2:#e4dfd2;
  --ink-3:#b5ae9f;
  --ink-4:#8b8474;
  --ink-5:#6c6558;
  --ink-6:#4a463d;
  --rule-strong:#e4dfd2;
  --rule:#302c24;
  --rule-soft:#25221b;
  --acc-1:oklch(.7 .12 262);  --acc-1-ink:oklch(.82 .09 262);  --acc-1-soft:oklch(.4 .07 262);
  --acc-2:oklch(.7 .12 160);  --acc-2-ink:oklch(.82 .09 160);  --acc-2-soft:oklch(.4 .07 160);
  --acc-3:oklch(.7 .12 25);   --acc-3-ink:oklch(.82 .09 25);   --acc-3-soft:oklch(.4 .07 25);
  --acc-l:.7;  --acc-c:.12;  --acc-ink-l:.82;  --acc-ink-c:.09;  --acc-soft-l:.4;  --acc-soft-c:.07;
  --warn:oklch(.78 .1 75);
  --warn-soft:oklch(.5 .09 75);
  --focus:oklch(.7 .12 262);
}

/* account corrente: --account eredita il colore dell'inbox aperta */
body{--account:var(--acc-1);--account-ink:var(--acc-1-ink);--account-soft:var(--acc-1-soft)}
body[data-account="2"]{--account:var(--acc-2);--account-ink:var(--acc-2-ink);--account-soft:var(--acc-2-soft)}
body[data-account="3"]{--account:var(--acc-3);--account-ink:var(--acc-3-ink);--account-soft:var(--acc-3-soft)}
/* colore dell'account da config (accounts.yaml `color`, via --account-color sul body):
   vince su --acc-1..3 dove il browser deriva i colori relativi; altrove restano quelli */
@supports (color:oklch(from red l c h)){
  /* senza colore da config (mock, tokens.html) ogni posizione deriva dal proprio --acc-N */
  body{--account-color:var(--acc-1)}
  body[data-account="2"]{--account-color:var(--acc-2)}
  body[data-account="3"]{--account-color:var(--acc-3)}
  body[data-account]{
    --account:oklch(from var(--account-color) var(--acc-l) var(--acc-c) h);
    --account-ink:oklch(from var(--account-color) var(--acc-ink-l) var(--acc-ink-c) h);
    --account-soft:oklch(from var(--account-color) var(--acc-soft-l) var(--acc-soft-c) h);
  }
  body[data-account] .account[data-account][aria-current="page"]{box-shadow:inset 0 -4px 0 var(--account)}
}

/* --------------------------------------------------------------------------
   3. Reset minimo
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--font-serif);
  font-size:var(--t-summary);
  line-height:var(--lh-summary);
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:var(--ink-2);text-decoration:none}
a:hover{color:var(--account-ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* --------------------------------------------------------------------------
   4. Griglia di pagina
   -------------------------------------------------------------------------- */
.page{max-width:1100px;margin:0 auto;padding:0 var(--pad)}
.row{display:grid;grid-template-columns:var(--rail-w) 1fr;gap:0 var(--gutter)}
.rail{text-align:right;font-family:var(--font-sans);font-size:var(--t-meta);line-height:1.5;color:var(--ink-4)}
.rail small{display:block;color:var(--ink-5)}
.col{min-width:0;max-width:var(--measure)}

/* --------------------------------------------------------------------------
   5. Tab account
   -------------------------------------------------------------------------- */
.topbar{border-bottom:1px solid var(--rule-strong)}
.topbar__in{max-width:1100px;margin:0 auto;padding:0 var(--pad);display:flex;justify-content:space-between;align-items:stretch;gap:var(--s5)}
.accounts{display:flex;gap:var(--s5)}
.account{
  font-family:var(--font-sans);font-size:var(--t-rail);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);
  padding:16px 0 13px;box-shadow:inset 0 -4px 0 transparent;
}
.account b{font-weight:400;color:var(--ink-5)}
.account:hover{color:var(--ink-2)}
.account[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -4px 0 var(--account)}
.account[data-account="1"][aria-current="page"]{box-shadow:inset 0 -4px 0 var(--acc-1)}
.account[data-account="2"][aria-current="page"]{box-shadow:inset 0 -4px 0 var(--acc-2)}
.account[data-account="3"][aria-current="page"]{box-shadow:inset 0 -4px 0 var(--acc-3)}
.brand{display:flex;align-items:center;font-family:var(--font-sans);font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--ink-5)}

/* --------------------------------------------------------------------------
   6. Settimana (navigazione, deve restare silenziosa)
   -------------------------------------------------------------------------- */
.week{border-bottom:1px solid var(--rule)}
.week__in{max-width:1100px;margin:0 auto;padding:16px var(--pad);display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--gutter)}
.week__prev,.week__next{font-family:var(--font-sans);font-size:var(--t-meta);color:var(--ink-5);white-space:nowrap}
.week__prev{flex:none;width:var(--rail-w);text-align:right}
.week__next{flex:none;padding-left:var(--s4)}
.week__days{flex:1;min-width:0;display:flex;align-items:flex-end;gap:30px}
.day{min-width:0}
.day__label{font-family:var(--font-sans);font-size:9.5px;font-weight:500;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--ink-5);margin-bottom:var(--s1)}
.day[data-today] .day__label{font-weight:600;color:var(--ink)}
.tiles{display:flex;gap:5px}
.tile{
  font-family:var(--font-sans);font-size:11px;line-height:1;
  padding:5px 7px;background:var(--paper-2);color:var(--ink-4);border:1px solid transparent;
}
.tile:hover{color:var(--ink)}
.tile--unread{background:var(--paper-3);color:var(--ink-2);font-weight:600}
.tile--partial{background:var(--paper-3);color:var(--ink-2);font-weight:600;
  background-image:linear-gradient(to top,var(--account) 0 3px,transparent 3px)}
.tile--read{background:var(--paper-2);color:var(--ink-4);font-weight:400}
.tile--empty{background:none;border:1px dashed var(--rule);color:var(--state-empty);padding:4px 6px}
.tile--current{background:var(--account);color:var(--paper);font-weight:600}
.week__legend{flex-basis:100%;margin-left:calc(var(--rail-w) + var(--gutter));display:flex;gap:var(--s4);margin-top:var(--s3);font-family:var(--font-sans);font-size:var(--t-tag);letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--ink-5)}

/* --------------------------------------------------------------------------
   6b. Banner di guasto (sopra «Ancora da fare»)
   Errata a piè di rotativa: filetto spesso in --warn sul bordo di attacco,
   hairline sopra e sotto, fondo appena tinto di --warn sulla carta corrente.
   Il testo resta in --ink (massima leggibilità e contrasto in entrambi i temi);
   l'allarme lo portano i filetti, non l'inchiostro del testo.
   -------------------------------------------------------------------------- */
.banner{margin-top:var(--s5)}
.banner .col{
  border-left:3px solid var(--warn);
  border-top:1px solid var(--warn-soft);
  border-bottom:1px solid var(--warn-soft);
  background:color-mix(in oklab,var(--warn) 9%,var(--paper));
  padding:var(--s3) var(--s4);
}
.banner p{font-size:var(--t-lede-2);line-height:var(--lh-lede-2);color:var(--ink);text-wrap:pretty}

/* --------------------------------------------------------------------------
   7. Ancora da fare
   -------------------------------------------------------------------------- */
.todo{margin-top:var(--s6)}
.todo .rail{font-size:var(--t-tag);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);padding-top:2px}
.todo__list>*+*{border-top:1px solid var(--rule-soft)}
.todo__row{display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:baseline;padding:var(--s2) 0}
.todo__text{font-size:var(--t-todo);line-height:var(--lh-todo);color:var(--ink-2)}
.todo__who{font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--ink)}
.todo__age{font-family:var(--font-sans);font-size:11px;color:var(--ink-5);white-space:nowrap}
.todo__acts .todo__age{display:none}
.acts{display:flex;gap:var(--s1);align-items:center}

/* controlli fatto / ignora */
.btn{
  font-family:var(--font-sans);font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2);background:var(--paper-3);
  padding:6px 9px;white-space:nowrap;
}
.btn:hover{background:var(--account);color:var(--paper)}
.btn--ghost{background:none;color:var(--ink-4);padding:6px 5px}
.btn--ghost:hover{background:none;color:var(--ink-2);text-decoration:underline}
.btn--wide{font-size:var(--t-ui);padding:12px 16px;letter-spacing:.06em}
/* fatto / ignora premuti: il trattamento di Segnala (spunta + sottolineatura in --warn), mai il solo colore (T-148) */
.acts .btn[aria-pressed="true"]{text-decoration:underline 2px var(--warn);text-underline-offset:3px}
.acts .btn[aria-pressed="true"]:not(:hover){color:var(--ink)}
.acts .btn[aria-pressed="true"]::before{content:"\2713\00a0"}

/* --------------------------------------------------------------------------
   7b. Fondo della striscia «Ancora da fare»
   Cambio di fondo, non riquadro: un soffio di --ink mescolato a --paper.
   In chiaro scurisce, in scuro schiarisce — stessa regola, nessun token nuovo.
   Il fondo esce a vivo fino ai bordi della pagina tramite border-image con
   outset orizzontale: l'outset è ink overflow, quindi non crea scroll
   orizzontale e non tocca la griglia di .row.
   -------------------------------------------------------------------------- */
.todo{
  padding-block:var(--s4);
  border-image:linear-gradient(color-mix(in oklab,var(--ink) 3.5%,var(--paper)) 0 0) fill 0 / 0 / 0 100vmax;
}
/* vicino al nero lo stesso passo si perde: in scuro serve una dose più alta */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .todo{border-image-source:linear-gradient(color-mix(in oklab,var(--ink) 6.5%,var(--paper)) 0 0)}
}
[data-theme="dark"] .todo{border-image-source:linear-gradient(color-mix(in oklab,var(--ink) 6.5%,var(--paper)) 0 0)}

/* --------------------------------------------------------------------------
   8. Testa del brief
   -------------------------------------------------------------------------- */
.lede{margin-top:var(--s6)}
.lede .rail{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;line-height:1.6;padding-top:6px}
.lede h1{font-size:var(--t-lede);line-height:var(--lh-lede);font-weight:400;color:var(--ink);text-wrap:pretty}
.lede h1 em{font-style:italic}
.lede p{margin-top:var(--s3);font-size:var(--t-lede-2);line-height:var(--lh-lede-2);color:var(--ink-3);text-wrap:pretty}

/* --------------------------------------------------------------------------
   9. Sezione generica (due modi: piena / compatta)
   -------------------------------------------------------------------------- */
.section{display:grid;grid-template-columns:var(--rail-w) 1fr;gap:0 var(--gutter);margin-top:var(--s7)}
.section__rail{text-align:right;padding-top:var(--s4)}
.section__rail h2{
  font-family:var(--font-sans);font-size:var(--t-rail);font-weight:600;line-height:1.35;
  letter-spacing:var(--ls-rail);text-transform:uppercase;color:var(--ink);text-wrap:balance;
}
.section__note{font-family:var(--font-sans);font-size:11px;line-height:1.4;color:var(--ink-5);margin-top:var(--s1)}
.section__body{border-top:1px solid var(--rule-strong);padding-top:var(--s4);max-width:var(--measure);min-width:0}
.section--compact{margin-top:var(--s6)}
.section--compact .section__rail h2{font-weight:500;font-size:11px;color:var(--ink-3)}
.section--compact .section__body{border-top:1px solid var(--rule);padding-top:var(--s3)}

/* --------------------------------------------------------------------------
   10. Item (sezione piena)
   -------------------------------------------------------------------------- */
.item{border-left:3px solid var(--account);padding-left:var(--s4)}
.item+.item{margin-top:var(--s5)}
.item--read{border-left-color:var(--rule)}
.item--read .item__sender{font-weight:500;color:var(--ink-4)}
.item--read .item__subject{font-weight:400}
.item--read .item__subject,.item--read .summary{color:var(--ink-4)}
.item--read .item__time{color:var(--ink-6)}

.item__meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--s2);margin-bottom:var(--s1)}
.item__sender{font-family:var(--font-sans);font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.item__time{font-family:var(--font-sans);font-size:var(--t-meta);line-height:1.3;color:var(--ink-5)}
.item__tags{margin-left:auto;display:flex;gap:5px}
.item__subject{font-family:var(--font-serif);font-size:var(--t-subject);line-height:var(--lh-subject);font-weight:600;color:var(--ink);margin-bottom:var(--s1)}

.tag{
  font-family:var(--font-sans);font-size:var(--t-tag);font-weight:500;line-height:1;
  letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--ink-4);
  background:var(--paper-2);padding:4px 7px;white-space:nowrap;
}
.tag--dubbio{background:none;border:1px dashed var(--warn-soft);color:var(--warn);padding:3px 6px}

/* il testo che conta */
.summary{font-size:var(--t-summary);line-height:var(--lh-summary);color:var(--ink-2);text-wrap:pretty}
.summary>*+*{margin-top:var(--s2)}
.summary ol,.summary ul{counter-reset:h;margin-top:var(--s2)}
.summary li{
  display:grid;grid-template-columns:22px 1fr;
  font-size:var(--t-list);line-height:var(--lh-list);padding:6px 0;
}
.summary ol li{counter-increment:h}
.summary ol li::before{
  content:counter(h,decimal-leading-zero);
  font-family:var(--font-sans);font-size:11px;font-weight:500;line-height:1.9;color:var(--ink-5);
}
.summary ul li::before{content:"—";font-family:var(--font-sans);font-size:12px;line-height:1.6;color:var(--ink-5)}

/* i messaggi del thread sotto la testa: ora · mittente, poi il riassunto, che va a capo (RFC thread-members-render) */
.item__members{margin-top:var(--s2)}
.item__members li{padding:5px 0;border-top:1px solid var(--rule-soft)}
.item__members span{display:block;font-family:var(--font-sans);font-size:11px;line-height:1.9;color:var(--ink-5)}
.item__members b{font-size:12px;font-weight:600;color:var(--ink-2)}
.item__members p{font-size:var(--t-compact);line-height:var(--lh-compact);color:var(--ink-3);text-wrap:pretty}
.item--read .item__members b{font-weight:500;color:var(--ink-4)}
.item--read .item__members p{color:var(--ink-4)}

.chips{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.chips .spacer{flex:1}
.chips a{font-family:var(--font-sans);font-size:var(--t-ui);font-weight:400;color:var(--ink-4);white-space:nowrap}
.chips a:hover{color:var(--ink-2)}
/* controls on their own line under the chips, desktop only (T-140): a spacer after a chip is a
   full-width break and the control after it takes the free space; a chip-less row leads with
   the spacer and keeps its one line */
@media not all and (max-width:760px){
  .chips .spacer:not(:first-child){flex-basis:100%}
  .chips .spacer:not(:first-child)+*{margin-left:auto}
}
.chip{
  font-family:var(--font-sans);font-size:11px;font-weight:600;line-height:1;
  color:var(--account-ink);border:1px solid var(--account-soft);padding:5px 9px;
}
.item__acts{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s3);
  font-family:var(--font-sans);font-size:var(--t-ui)}
.item__acts a,.item__acts summary{color:var(--ink-4)}
.item__acts a:hover{color:var(--ink-2)}
.item__acts .spacer{flex:1}

/* originale in linea (nessun JS: <details>) */
.orig{margin-top:var(--s3);font-family:var(--font-sans);font-size:var(--t-ui)}
.orig>summary{color:var(--ink-4);cursor:pointer;list-style:none;display:inline-block}
.orig>summary::-webkit-details-marker{display:none}
.orig>summary::after{content:" +"}
.orig[open]>summary::after{content:" −"}
.orig>summary:hover{color:var(--ink-2)}
.orig__body{margin-top:var(--s3);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:var(--s3) 0}
.orig__images{display:flex;align-items:center;gap:var(--s3);padding-bottom:var(--s3);margin-bottom:var(--s3);
  border-bottom:1px dashed var(--rule);font-family:var(--font-sans);font-size:11px;color:var(--ink-4)}
.orig__html{font-family:var(--font-serif);font-size:15.5px;line-height:1.6;color:var(--ink-3)}
.orig__html>*+*{margin-top:var(--s3)}
.orig__html blockquote{border-left:2px solid var(--rule);padding-left:var(--s3);margin:var(--s3) 0;color:var(--ink-4)}
/* the close at the foot of an open original (T-139); the child selector outranks the mobile .btn display */
.orig__body>.orig__close{display:block;margin:var(--s3) 0 0 auto}

/* --------------------------------------------------------------------------
   10b. Segnala (periodo di prova)
   Correzione rara: sta in coda alla riga dei chip, un grado più tenue del link
   Superhuman. Nessun JS: <details> apre la scelta, un <form> la invia.
   Il motivo scelto si legge nel testo del summary e in aria-pressed (spunta +
   sottolineatura in --warn), mai nel solo colore. Solo token: i due temi
   seguono da soli.
   -------------------------------------------------------------------------- */
.flag{font-family:var(--font-sans);font-size:var(--t-ui);line-height:1}
.flag>summary{display:inline-block;list-style:none;cursor:pointer;color:var(--ink-5);white-space:nowrap}
.flag>summary::-webkit-details-marker{display:none}
.flag>summary:hover{color:var(--ink-2)}
.flag[open]{order:1;flex-basis:100%;border-top:1px solid var(--rule-soft);padding-top:var(--s1)}
.flag[open]>summary,.flag--set>summary{color:var(--ink-3)}
.flag--set>summary::before{content:"";display:inline-block;width:6px;height:6px;background:var(--warn);margin-right:6px;vertical-align:1px}
.flag__menu{display:inline-flex;flex-wrap:wrap;align-items:center;margin-left:var(--s2);vertical-align:middle}
.flag__menu .btn[aria-pressed="true"]{color:var(--ink);text-decoration:underline 2px var(--warn);text-underline-offset:3px}
.flag__menu .btn[aria-pressed="true"]::before{content:"\2713\00a0"}
.flag__undo{margin-left:var(--s1);border-left:1px solid var(--rule)}
@media (max-width:760px){
  .flag>summary{padding:7px 0}
  .flag__menu{display:flex;margin:0}
  .flag__undo{margin-left:0;border-left:0}
}
/* opening keeps the summary in place in the controls line; the options take a row below (T-141) */
@media not all and (max-width:760px){
  .flag[open]{display:contents}
  .flag[open]::details-content{display:contents}
  .flag[open]>.flag__menu{flex-basis:100%;justify-content:flex-end;margin-left:0;border-top:1px solid var(--rule-soft);padding-top:var(--s1)}
}

/* --------------------------------------------------------------------------
   11. Lista compatta (una riga per email)
   -------------------------------------------------------------------------- */
.clist{display:grid;grid-template-columns:44px 124px 1fr auto;align-items:baseline}
.clist__row{display:contents}
.clist__time{font-family:var(--font-sans);font-size:11px;line-height:1.9;color:var(--ink-5);padding:5px 0}
.clist__from{font-family:var(--font-sans);font-size:12px;font-weight:600;line-height:1.9;color:var(--ink-2);padding:5px 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--s2)}
.clist__sum{font-size:var(--t-compact);line-height:var(--lh-compact);color:var(--ink-3);padding:5px 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clist__row--read .clist__from{font-weight:500;color:var(--ink-4)}
.clist__row--read .clist__sum{color:var(--ink-4)}
.clist__links{display:flex;gap:var(--s2);padding:5px 0 5px var(--s3);font-family:var(--font-sans);font-size:12px;line-height:1.9}
.clist__links a{color:var(--ink-5);text-decoration:none}
.clist__links a:hover{color:var(--ink-2)}
.cmore{display:inline-block;margin-top:var(--s2);font-family:var(--font-sans);font-size:var(--t-ui);color:var(--ink-4)}
.cmore:hover{color:var(--ink-2)}

/* --------------------------------------------------------------------------
   12. Stato di lettura
   -------------------------------------------------------------------------- */
.resume{display:grid;grid-template-columns:var(--rail-w) 1fr;gap:0 var(--gutter);margin-top:var(--s6)}
.resume__label{text-align:right;font-family:var(--font-sans);font-size:var(--t-tag);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--account)}
.resume__rule{border-top:1px solid var(--account);opacity:.4;margin-top:5px}

.endbar{display:grid;grid-template-columns:var(--rail-w) 1fr;gap:0 var(--gutter);
  margin-top:var(--s7);border-top:1px solid var(--rule);padding:var(--s5) 0 var(--s7)}
.endbar__acts{grid-column:2;display:flex;align-items:center;gap:var(--s4)}
.endbar__note{font-family:var(--font-sans);font-size:var(--t-ui);color:var(--ink-5)}
.costs{margin:0;padding:0 0 var(--s6) calc(var(--rail-w) + var(--gutter));
  font-family:var(--font-sans);font-size:var(--t-micro);color:var(--ink-5)}

/* --------------------------------------------------------------------------
   13. Stati vuoti e login
   -------------------------------------------------------------------------- */
.empty{margin-top:var(--s7);padding-bottom:var(--s7)}
.empty h1{font-size:26px;line-height:1.25;font-weight:400;color:var(--ink)}
.empty p{margin-top:var(--s3);font-size:var(--t-lede-2);line-height:var(--lh-lede-2);color:var(--ink-3);max-width:44ch;text-wrap:pretty}
.empty .rail{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;padding-top:8px}
.empty__acts{margin-top:var(--s5);display:flex;gap:var(--s4);align-items:center}

.login{min-height:100vh;display:grid;place-items:center;padding:var(--s6)}
.login__box{width:100%;max-width:340px;text-align:center}
.login__mark{font-family:var(--font-serif);font-size:27px;line-height:1.2;font-weight:400;color:var(--ink)}
.login__sub{margin-top:var(--s3);font-size:15.5px;line-height:1.55;color:var(--ink-4)}
.login__btn{display:block;margin-top:var(--s5);width:100%;text-align:center;
  font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--paper);background:var(--ink);padding:14px 18px}
.login__btn:hover{background:var(--account);color:var(--paper)}
.login__foot{margin-top:var(--s4);font-family:var(--font-sans);font-size:11px;color:var(--ink-5)}

/* --------------------------------------------------------------------------
   14. Didascalie dei mock (non fanno parte dell'app)
   -------------------------------------------------------------------------- */
.spec{max-width:1100px;margin:0 auto;padding:var(--s6) var(--pad) var(--s2)}
.spec h2{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4)}
.spec p{margin-top:var(--s2);font-family:var(--font-sans);font-size:12px;line-height:1.5;color:var(--ink-5);max-width:70ch}
.specrule{max-width:1100px;margin:var(--s5) auto 0;padding:0 var(--pad)}
.specrule i{display:block;border-top:1px solid var(--rule)}

/* foglio dei token (solo mock) */
.tk{max-width:1100px;margin:0 auto;padding:var(--s5) var(--pad) var(--s6)}
.tk h3{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);border-bottom:1px solid var(--rule-strong);padding-bottom:var(--s2)}
.tk__rows{display:grid;grid-template-columns:190px 150px 1fr;gap:0;align-items:baseline}
.tk__rows>div{padding:var(--s3) 0;border-bottom:1px solid var(--rule-soft);min-width:0}
.tk__name,.tk__val{font-family:var(--font-sans);font-size:11px;color:var(--ink-4)}
.tk__name{font-weight:600;color:var(--ink-2)}
.tk__sample{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk__panes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.tk__pane{background:var(--paper);border:1px solid var(--rule);padding:var(--s4)}
.tk__pane h4{font-family:var(--font-sans);font-size:10px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:var(--s3)}
.sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s2)}
.sw__chip{border:1px solid var(--rule)}
.sw__chip i{display:block;height:46px}
.sw__chip span{display:block;font-family:var(--font-sans);font-size:9.5px;line-height:1.4;
  color:var(--ink-4);padding:5px 6px;background:var(--paper)}
.tk__space{display:flex;align-items:flex-end;gap:var(--s3)}
.tk__space div{text-align:center;font-family:var(--font-sans);font-size:9.5px;color:var(--ink-5)}
.tk__space i{display:block;background:var(--account);margin-bottom:5px}
.tk__bits{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
@media (max-width:760px){
  .tk__rows{grid-template-columns:1fr}
  .tk__rows>div{border-bottom:0;padding:2px 0}
  .tk__rows>div:nth-child(3n){border-bottom:1px solid var(--rule-soft);padding-bottom:var(--s3);margin-bottom:var(--s2)}
  .tk__panes{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   15. Mobile (~390px). Unico breakpoint: la corsia rientra nel flusso.
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  :root{
    --pad:16px;--rail-w:1fr;--gutter:0;--measure:none;
    --t-lede:19.5px;--lh-lede:1.46;
    --t-lede-2:16px;
    --t-summary:16.5px;--lh-summary:1.58;
    --t-subject:16px;
    --t-list:15.5px;
    --t-compact:14.5px;
    --s6:30px;--s7:38px;
  }
  .row,.section,.resume,.endbar,.week__in{grid-template-columns:1fr;gap:0}
  .rail,.section__rail{text-align:left}

  .topbar__in{gap:var(--s4)}
  .accounts{gap:var(--s4);flex:1;justify-content:space-between}
  .account{font-size:11px;padding:13px 0 10px}
  .brand{display:none}

  /* la striscia resta silenziosa ma le tessere diventano bersagli da pollice:
     riquadro dipinto 40px, area sensibile 44px via ::after */
  .week__in{padding:10px var(--pad) 6px;flex-wrap:wrap;gap:0}
  .week__days{order:1;flex-basis:100%;min-width:0;gap:2px;justify-content:space-between;align-items:stretch}
  .week__prev,.week__next{order:2;flex:none;width:auto;font-size:0;line-height:1;padding:11px 4px;position:relative}
  .week__next{margin-left:auto}
  .week__prev::before{content:"\2039";font-size:16px;color:var(--ink-5)}
  .week__next::after{content:"\203A";font-size:16px;color:var(--ink-5)}
  .week__prev::after,.week__next::before{content:"";position:absolute;inset:-3px -14px}
  .day{flex:1;min-width:0;text-align:center}
  .tiles{gap:2px}
  .tile{position:relative;flex:1;min-width:0;height:40px;padding:0;font-size:0;
    display:grid;place-items:center}
  .tile::before{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.03em}
  .tiles .tile:first-child::before{content:"M"}
  .tiles .tile:last-child::before{content:"P"}
  .tile::after{content:"";position:absolute;inset:-2px -1px}
  .tile--empty{padding:0}
  .week__legend{display:none}

  .todo{margin-top:var(--s5)}
  .todo .rail{margin-bottom:var(--s2)}
  .todo__row{grid-template-columns:1fr;gap:var(--s1);padding:var(--s3) 0}
  .todo__list{border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
  .todo__acts{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s1)}
  .todo__acts .todo__age{display:block;flex:1}
  .todo__text .todo__age{display:none}
  .btn{padding:8px 12px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .btn--ghost{padding:8px 8px}
  .chips a,.orig>summary{padding:7px 0}

  .lede{margin-top:var(--s5)}
  .lede .rail{margin-bottom:var(--s3);padding-top:0}

  .section__rail{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
    border-top:1px solid var(--rule-strong);padding-top:var(--s2)}
  .section--compact .section__rail{border-top:1px solid var(--rule)}
  .section__note{margin-top:0;white-space:nowrap}
  .section__body{border-top:0;padding-top:var(--s4)}
  .section--compact .section__body{padding-top:var(--s3)}

  .item{padding-left:14px}
  .chips .spacer{display:none}
  .item__org{display:none}
  .item__tags{margin-left:0;order:3;flex-basis:100%;margin-top:var(--s2)}
  .item__time{margin-left:auto}
  .summary li{grid-template-columns:20px 1fr;padding:5px 0}

  .clist{grid-template-columns:42px 1fr auto}
  .clist__from{grid-column:2 / -1;line-height:1.5;padding:6px 0 0}
  .clist__time{padding:6px 0 0;line-height:1.5}
  .clist__sum{grid-column:2;padding:0 0 6px;white-space:normal;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .clist__links{grid-column:3;align-self:start;gap:var(--s3);padding:0 0 6px var(--s3);font-size:15px;line-height:1.5}

  .resume__label{margin-bottom:var(--s1)}
  .endbar{padding-bottom:var(--s7)}
  .endbar__acts{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .endbar__acts .btn--wide{width:100%;text-align:center}
  .costs{padding-left:0}

  .spec{padding:var(--s5) var(--pad) var(--s2)}
}

/* --------------------------------------------------------------------------
   16. Motion (T-131). Owner-directed, not a Claude Design delivery.
   Keyed on htmx 2's classes: `htmx-added` sits on each inserted node for the
   20 ms settle delay, and the transitions below run when it comes off. No
   rule keys on `htmx-swapping`: with the default 0 ms swap delay, and no
   hx-swap timing modifiers, it is never painted. Opacity and transform only.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  /* replaced blocks: the todo strip, and an item after a flag or its own
     todo buttons */
  .todo,.item{transition:opacity var(--motion-dur) var(--motion-ease)}
  .todo.htmx-added,.item.htmx-added{opacity:.35}

  /* open original, load images: the route answers with the item out-of-band,
     arriving with <details class="orig" open> and the body inside (T-102),
     so the new body htmx fills is detached. That item is not dimmed; its
     body fades and rises instead, like the rows "e altre N" brings in.
     §16.1's unclassified mail has no item to redraw: there the fragment
     alone lands in the attached body, and its children rise. */
  .item.htmx-added:has(>.orig[open]){opacity:1}
  .orig__body,.orig__body>*,.section__body>*{transition:opacity var(--motion-dur) var(--motion-ease),
    transform var(--motion-dur) var(--motion-ease)}
  .item.htmx-added>.orig[open]>.orig__body,.orig__body>.htmx-added,.section__body>.htmx-added{opacity:0;transform:translateY(var(--motion-rise))}

  /* settle highlight: the mailbox's wash behind a replaced item, fading out;
     not on open/load, where the body's rise already marks the change */
  .item{position:relative;isolation:isolate}
  .item::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:var(--account-soft);opacity:0;transition:opacity var(--motion-settle) var(--motion-ease)}
  .item.htmx-added:not(:has(>.orig[open]))::after{opacity:.45;transition:none}

  /* Cross-page: the default root cross-fade on week, mailbox and page
     navigation. Reference browser: Chrome, desktop and mobile (owner ruling,
     2026-09-26); elsewhere the at-rule is ignored and navigation is instant,
     by design. */
  @view-transition{navigation:auto}
  ::view-transition-group(root){animation-duration:var(--motion-page);animation-timing-function:var(--motion-ease)}

  /* Choreography (T-132, T-133): the current tab's accent and the current
     week tile carry a name, so on mailbox or week navigation each slides from
     its old place to its new one instead of fading. Each name is unique on
     the page: one tab per slug, one tile per (day, slot); a duplicate would
     make Chrome skip the whole transition. */
  .tile[aria-current="page"]{view-transition-name:current-tile}
  /* Only the accent travels, not the tab (owner ruling, T-133). The template
     puts an empty span[aria-hidden="true"] in the current tab as motion
     scaffolding: here it becomes the 4px underline, drawn where the box-shadow
     draws it, and takes the name. Outside this section the tab's box-shadow
     stays the underline (pinned since T-104 by test_static.py), and the
     mockups have no span, so they keep the shadow untouched. Both selectors
     key on the span's aria-hidden, so another span in a tab neither drops
     the shadow nor becomes a bar. The shadow is dropped at (0,5,2), above
     section 2's body[data-account] rule at (0,4,1); the bar needs only
     var(--account), which body[data-account] already switches to the current
     tab's account. position:relative stays outside :has(), so a browser
     without :has() anchors the bar to the tab, over its shadow, and not to
     the viewport. */
  .account[aria-current="page"]{position:relative}
  body[data-account] .account[data-account][aria-current="page"]:has(>span[aria-hidden="true"]){
    box-shadow:none}
  .account[aria-current="page"]>span[aria-hidden="true"]{
    position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--account);
    view-transition-name:current-account}
  ::view-transition-group(current-account),::view-transition-group(current-tile){
    animation-duration:var(--motion-page);animation-timing-function:var(--motion-ease)}
  /* tabs differ in width: fill the moving box's height, so the 4px accent
     keeps its thickness instead of scaling with its width */
  ::view-transition-old(current-account),::view-transition-new(current-account){height:100%}

  /* Details slide-open (T-134): the original's <details> slides open and shut
     instead of snapping. Guarded twice: interpolate-size is what lets
     block-size run to and from auto, and ::details-content is what it runs
     on. Chrome 129-130 has the first without the second, and there a rule
     naming the pseudo-element would be dropped anyway; the double guard says
     so rather than relying on it. Elsewhere, and under reduced motion, the
     open is instant, as before this row.
     The slide runs on its own --motion-open (T-135): at --motion-dur's
     180ms it read as a near-instant cut; the fades keep --motion-dur. */
  @supports (interpolate-size:allow-keywords) and selector(::details-content){
    .orig{interpolate-size:allow-keywords}
    /* Clipped on the block axis only, so mail wider than the column
       overflows it as before the slide existed (overflow:hidden clipped it,
       measured in Chromium 151). clip makes no formatting context, so
       flow-root does: without it .orig__body's margin-top collapses out of
       the height that slides. */
    .orig::details-content{block-size:0;overflow-x:visible;overflow-y:clip;display:flow-root;
      transition:block-size var(--motion-open) var(--motion-ease),
        content-visibility var(--motion-open) var(--motion-ease) allow-discrete}
    .orig[open]::details-content{block-size:auto}
    /* The first open changes height twice. The click slides to the empty
       band, and the response then replaces the whole item out-of-band
       with a new details, already open with the body inside (T-102). While
       htmx-added is on, that new details holds the empty band's height, and
       when it comes off it slides from the band to full. The band is
       .orig__body's box, the rule at app.css:373: margin-top + padding
       top and bottom, each var(--s3), plus two 1px borders. If that box
       changes, this calc must follow; test_static.py compares the two.
       "Load images" answers the same way from an already full body, so
       its details carries data-images and lands at full height, unslid. */
    .item.htmx-added>.orig[open]:not([data-images])::details-content{block-size:calc(var(--s3)*3 + 2px)}
  }
}