/* Quaderno dei kanji — stampa e adattamenti telefono */
  /* ---------- STAMPA ---------- */
  @media print{
    @page{margin:14mm}
    body{background:#fff}
    .wrap{max-width:none;padding:0}
    .toolbar,.hint,.search-bar,.no-results,.card .kill,.rm-card,.add-ex,.add-r,.ex-row .rm,.sen-row .rm,.rfield .rm-r,.card-actions,footer,.no-print,.nav-burger,.fab,.lbl-btn,.nav-play{display:none!important}
    header.app{
      position:static;background:#fff;border:none;border-radius:0;
      box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
      border-bottom:2px solid #000;padding:0 0 12px;
    }
    .card{
      box-shadow:none;border:1.5px solid #333;
      page-break-inside:avoid;break-inside:avoid;margin-bottom:14px;
    }
    .card:not(:first-of-type){page-break-before:auto}
  }
  @media (max-width:560px){
    /* Ora che le letture sono bollicine in linea, sul telefono conviene una
       colonna sola a tutta larghezza: in due colonne da ~150px ci stava una
       bolla per riga e la sezione tornava lunga. */
    .readings{grid-template-columns:1fr;gap:6px 14px}
    .readings label.r-sub{font-size:11.5px;margin-bottom:5px;white-space:nowrap}
    .readings label.r-sub .en{font-size:9px;letter-spacing:.05em}
    .readings input{font-size:15px;padding:5px 1px}
    .readings .r-mean{font-size:13px}
    .readings .add-r{font-size:12px}
    .readings .rm-r{width:22px;height:22px;font-size:14px}
    .r-line{grid-template-columns:1fr auto;gap:4px;margin-bottom:6px}
    /* sul telefono i blocchi si stringono un po', ma restano blocchi:
       niente piu' fasce rosa a tutta larghezza */
    .readings,.examples,.sentences,.strokes-top{
      margin-top:28px;padding:30px 12px 14px;border:1px solid var(--line);border-radius:11px;
    }
    .sec-line{left:12px;right:12px;top:-11px;flex-wrap:nowrap}
    /* Riordina e Compatta stanno sul bordo accanto alla targhetta: se vanno
       a capo finiscono sopra la prima parola, quindi qui restano in riga */
    .sec-line .ex-secbtns{flex-wrap:nowrap;flex:none}
    .sec-line .ex-reord-btn{font-size:11px;padding:4px 9px}
    .card{padding:18px 12px 14px}
    /* Esempi sul telefono: due righe invece di quattro — parola e lettura
       affiancate sopra, e sotto il significato insieme a JLPT e label. Con
       tutto incolonnato ogni parola occupava mezzo schermo. */
    /* due classi, non una: sotto c'è .ex-row{display:flex} e a parità di peso
       vincerebbe lui, riportando in vista l'intestazione delle colonne */
    .ex-row.ex-head{display:none}
    /* Nelle righe strette però l'intestazione serve: senza etichette sopra i
       campi, quattro colonne nude non dicono cosa sono. Si scrive una volta
       sola, sopra la prima parola, allineata alle colonne di sotto. */
    .ex-row.ex-head.ex-slim{
      display:flex;gap:6px;align-items:center;
      margin-bottom:5px;padding-bottom:0;border-bottom:none;
    }
    .ex-head.ex-slim .col-h{font-size:9.5px;letter-spacing:.08em}
    .ex-head.ex-slim .ch-word,.ex-head.ex-slim .ch-mean{flex:1 1 0;min-width:0}
    .ex-head.ex-slim .ch-jl,.ex-head.ex-slim .ch-lbl{flex:none;width:46px}
    .ex-head.ex-slim .ch-mv{flex:none;width:14.5px}   /* quanto la maniglia ⠿ */
    .ex-head.ex-slim .ch-sp{display:none}
    .ex-lab{display:block}
    .ex-row{
      display:flex;flex-wrap:wrap;align-items:flex-end;gap:9px 8px;
      padding-bottom:11px;border-bottom:1px dashed var(--line);margin-bottom:11px;
    }
    .f-word,.f-read{flex:1 1 calc(50% - 4px);min-width:0}
    .f-mean{flex:1 1 110px;min-width:0}
    /* livello e label larghi come si deve: senza una larghezza loro le
       pastiglie si strizzavano fino a diventare due palline */
    .f-jl{flex:0 0 56px;width:56px}
    .f-lbl{flex:0 0 100px;width:100px}
    .f-jl .pk-btn,.f-lbl .pk-btn{width:100%}
    /* ---- La scheda sul telefono e' un ELENCO DI LETTURA ----
       Una parola sta in due righe (parola · lettura · livello / significato ·
       label), senza le intestazioni ripetute a ogni voce. Si tocca e si apre
       solo quella riga, coi campi veri; «✓ Fatto» la richiude. */
    .ex-row:not(.ex-slim):not(.ex-serie){
      padding-bottom:0;border-bottom:none;margin-bottom:0;gap:0;
    }
    /* la riga di quaderno e il filo colorato sono roba da computer: qui la
       riga è già una voce di elenco, con le sue divisioni. Serve la STESSA
       specificità della regola che li accende, o vincerebbe quella. */
    .ex-row:not(.ex-slim):not(.ex-serie):not(.ex-head){
      padding:0;margin-bottom:0;border-bottom:none;
    }
    .ex-row:not(.ex-slim):not(.ex-serie):not(.ex-head)::before{display:none}
    .ex-row:not(.ex-slim):not(.ex-serie) > .ex-vista{display:flex}
    .ex-row:not(.ex-slim):not(.ex-serie):not(.ex-aperta) > .ex-f,
    .ex-row:not(.ex-slim):not(.ex-serie):not(.ex-aperta) > .rm,
    /* il 活 della riga CHIUSA non è più questo: sta dentro a .ex-vista,
       accanto al livello, dove lo si vede senza aprire niente */
    .ex-row:not(.ex-slim):not(.ex-serie):not(.ex-aperta) > .ex-conj,
    .ex-row:not(.ex-slim):not(.ex-serie):not(.ex-aperta) > .ex-cs,
    .ex-row:not(.ex-slim):not(.ex-serie):not(.ex-aperta) > .ex-sp{display:none}
    .ex-row.ex-aperta:not(.ex-slim):not(.ex-serie) > .ex-vista{display:none}
    /* ---- la riga aperta: un elenco di campi, come le impostazioni ----
       Prima i campi si spartivano la larghezza a metà, a un terzo, a 56 px, e
       andavano a capo dove capitava: righe frastagliate e «Fatto» infilato nel
       primo buco libero. Adesso ogni campo è una RIGA: nome a sinistra, valore
       a destra, un filo sottile a dividere. È come si comportano gli elenchi
       di impostazioni su qualunque telefono, e il giapponese sta a destra dove
       si legge senza inciampi. */
    .ex-row.ex-aperta:not(.ex-slim):not(.ex-serie){
      display:block;background:#fff;border:1px solid rgba(20,20,18,.08);
      border-radius:16px;padding:2px 14px 14px;margin:8px 0 14px;
      box-shadow:0 6px 20px -14px rgba(0,0,0,.4);
    }
    /* «flex-direction:row» è obbligatorio: un campo nasce COLONNA (etichetta
       sopra, casella sotto) e cambiare solo «display» non bastava — nome e
       valore restavano uno sopra l'altro, e ogni campo era alto 72 px. */
    .ex-row.ex-aperta > .ex-f{
      display:flex;flex-direction:row;align-items:center;gap:14px;width:auto;
      padding:12px 0;border-bottom:1px solid rgba(20,20,18,.07);
    }
    .ex-row.ex-aperta > .ex-f:last-of-type{border-bottom:none}
    /* il nome del campo non grida più: minuscolo, senza spaziature da titolo */
    .ex-row.ex-aperta .ex-lab{
      flex:none;width:82px;margin:0;font-size:12px;font-weight:500;letter-spacing:0;
      text-transform:none;color:#A5A199;line-height:1.3;
    }
    /* il valore subito dopo il nome, allineato a sinistra: coi valori a
       destra l'occhio faceva la spola da un bordo all'altro a ogni riga */
    .ex-row.ex-aperta .ex-f input{
      flex:1;min-width:0;text-align:left;border:none;background:none;padding:0;
      font-size:16px;   /* sotto i 16, iOS ingrandisce la pagina quando ci scrivi */
      color:var(--ink);
    }
    .ex-row.ex-aperta .ex-f input::placeholder{color:#C9C5BB}
    .ex-row.ex-aperta .f-word input,.ex-row.ex-aperta .f-read input{font-family:var(--serif)}
    .ex-row.ex-aperta .rd-single{flex:1;min-width:0;display:flex}
    .ex-row.ex-aperta .rd-single input{width:100%}
    .ex-row.ex-aperta .rd-derived{flex:1;text-align:left}
    /* livello e label: la pastiglia si stringe sul suo testo, a sinistra
       come tutto il resto */
    .ex-row.ex-aperta .f-jl,.ex-row.ex-aperta .f-lbl{flex-basis:auto;width:auto}
    .ex-row.ex-aperta .f-jl .pk-btn,.ex-row.ex-aperta .f-lbl .pk-btn{
      width:auto;margin-left:0;margin-right:auto;padding:6px 14px;
    }
    /* in fondo, staccati dall'elenco: «Fatto» pieno, il cestino di fianco */
    .ex-row.ex-aperta > .ex-fatto{
      width:100%;margin-top:16px;padding:12px;border-radius:12px;
      border:none;background:var(--ink);color:#fff;font-size:14px;font-weight:700;
    }
    .ex-row.ex-aperta:has(> .rm) > .ex-fatto{width:calc(100% - 48px);float:left;margin-right:10px}
    .ex-row.ex-aperta > .rm{margin-top:16px;color:#B3AFA6}
    .ex-row.ex-aperta > .rm:hover{color:var(--shu)}
    /* ---- rete di sicurezza: stretta e aperta insieme non esistono ----
       Le regole qui sopra vestono la riga aperta da elenco: campi in fila
       orizzontale, larghezza «auto». Se quella riga è anche STRETTA (riordino
       o vista compatta) la larghezza auto dentro alla griglia stretta va a
       zero: parola, lettura e significato collassano nello stesso punto e le
       scritte si sovrappongono — un pasticcio illeggibile, visto aprendo una
       parola e accendendo poi il riordino. Il codice ora non le mette più
       insieme (schede-compila.js); questo tiene il punto anche se un domani
       qualcuno ci ricasca. */
    .ex-row.ex-slim.ex-aperta > .ex-f{
      display:flex;flex-direction:column;width:auto;padding:0;border-bottom:none;
    }
    .ex-row.ex-slim.ex-aperta .ex-lab{display:none}
    /* ---- riordino delle parole sciolte, sul telefono ----
       Restano parola, significato, livello e il comando «sposta». Lettura e
       label si tolgono di mezzo: con «歯みがきペースト・はみがきペースト» la
       riga sbordava e si finiva a trascinare un elenco che scorre di lato. */
    .wc-slim .wc-r,.wc-slim .wr-lb{display:none}
    .wc-slim .wc-w{flex:0 1 auto;min-width:0;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap}
    .word-card.wc-slim{gap:9px;padding:10px 12px}

    .ex-row.ex-aperta .ex-lab{display:block}
    /* sul telefono la voce sta più raccolta: sono due righe di testo, e con
       nove punti sopra e sotto in uno schermo ci stavano cinque parole. La
       riga sotto resta: è quella che tiene separata una voce dall'altra. */
    .ex-vista{
      width:100%;flex-direction:column;gap:2px;align-items:flex-start;border-radius:0;
      background:none;border:none;border-bottom:1px solid var(--line);
      padding:6px 2px 7px;text-align:left;cursor:pointer;
    }
    .ex-vista:active{background:#F7F4EE}
    .ev-r1,.ev-r2{display:flex;align-items:baseline;gap:8px;width:100%}
    .ev-w{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink);line-height:1.25}
    .ev-r{font-family:var(--serif);font-size:13px;color:var(--ink-soft)}
    .ev-vuota{font-family:var(--sans);font-size:14px;color:var(--ink-soft)}
    .ev-m{
      font-family:var(--sans);font-size:14px;color:var(--ink);
      flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .ev-jl,.ev-lb{
      font-style:normal;font-family:var(--sans);font-size:11px;font-weight:700;
      padding:2px 9px;border-radius:99px;white-space:nowrap;flex:none;margin-left:auto;
      background:#EFECE6;color:var(--ink-soft);
    }
    /* «Fatto» e il cestino: in fondo, dopo l'elenco dei campi. Il cestino
       affiancato, con la sua area da dito. */
    .ex-row.ex-aperta > .ex-fatto{display:flex}
    .ex-row.ex-aperta > .rm{flex:none;width:38px;height:38px;font-size:19px}
    .ex-row.ex-aperta:has(> .rm) > .ex-fatto{width:calc(100% - 46px);float:left;margin-right:8px}
    .ex-fatto{
      justify-content:center;align-items:center;
      margin-top:2px;padding:9px;border-radius:9px;
      border:1.5px solid var(--ink);background:transparent;color:var(--ink);
      font-family:var(--sans);font-size:13px;font-weight:700;
    }
    /* la riga bocciata si riconosce anche da chiusa */
    .ex-row.ex-boccia > .ex-vista .ev-w{color:var(--shu-deep)}

    /* Il raggruppamento sul telefono: restano la pila col numero, il nome e
       l'«apri». Il livello e gli estremi si tolgono di mezzo — la riga deve
       stare in larghezza, e quelle due cose si vedono aprendolo. */
    .ex-serie2{gap:8px;padding:10px 2px 8px}
    .ex-serie2 .es2-jl,.ex-serie2 .es2-est{display:none}
    .ex-serie2 .es2-nome{max-width:none;flex:1;min-width:0}
    .es2-figli{margin-left:8px;padding-left:11px}
    .ex-mv{flex:none;order:-1;align-self:center}
    .ex-row .rm,.ex-row .ex-sp{flex:none;align-self:center}
    /* riga stretta (riordino e vista compatta): tutto su una riga sola, senza
       lettura e senza etichette, così le parole si abbracciano a colpo d'occhio */
    .ex-row.ex-slim{
      flex-wrap:nowrap;gap:6px;align-items:center;
      padding-bottom:0;margin-bottom:9px;border-bottom:none;
    }
    .ex-slim .f-word,.ex-slim .f-mean{flex:1 1 0;min-width:0}
    .ex-slim .f-jl,.ex-slim .f-lbl{flex:none;width:46px}
    .ex-slim .ex-lab{display:none}
    .ex-slim .rm,.ex-slim .ex-sp{display:none}
    .ex-slim input{font-size:14px}
    .ex-slim input.word{font-size:15px}
    /* testata della scheda: kanji a sinistra, i dati a destra in colonna;
       l'ordine dei tratti passa sotto, a tutta larghezza */
    .card-top{grid-template-columns:108px minmax(0,1fr);gap:12px 14px}
    .ref{width:108px}
    .ref .cell{--s:108px;height:108px;min-height:0;max-height:none;flex:none}
    .kanji-in{font-size:74px;line-height:108px}
    /* i figli della colonna dati diventano celle della griglia: così i dati
       stanno accanto al kanji e i tratti passano sotto, a tutta larghezza */
    .card-meta{display:contents}
    /* Livello e tratti affiancati: nella colonna stretta accanto al kanji
       andavano a capo uno per riga e la testata diventava una scaletta.
       Si dividono la riga e si stringono quanto serve; la data sta sotto. */
    .meta-row{grid-column:2;gap:6px;align-content:start;--chip:34px}
    .meta-row .pk-btn.pk-jl,.meta-row .stroke-count{flex:1 1 0;min-width:0;padding:0 9px}
    .meta-row .stroke-count>span{font-size:9.5px;letter-spacing:.06em}
    .meta-row .stroke-count input{font-size:14px}
    /* la data per prima: è la cosa che si guarda per capire quando l'hai studiato */
    .meta-row .date-jp{order:-1;flex:1 1 100%;text-align:left;font-size:13.5px;padding:0 10px}
    .strokes-top{grid-column:1 / -1;margin-top:24px}
    /* riga del download compatta: tutto su una riga */
    .card-actions{flex-wrap:nowrap;gap:8px}
    .chk{font-size:11px;gap:5px;flex:1;min-width:0}
    .pdf-dl{flex:none;gap:6px}
    .pdf-dl .jlpt-sel{font-size:11px;padding:6px 2px;max-width:104px}
    .btn.sheet{font-size:11px;padding:8px 9px;white-space:nowrap}
  }
  .btn.play{background:var(--ai);color:#fff;border-color:var(--ai)}
  .btn.play:hover{background:#1d3a54}
  .btn.idx{background:var(--shu);color:#fff}
  .btn.idx:hover{background:var(--shu-deep)}