/* Layout: a page from an Italian squared school notebook (quaderno a quadretti) in light,
   a classroom blackboard (lavagna) in dark. One sentence pair at a time: word order on top,
   the two Reed-Kellogg diagrams side by side beneath it. */
:root{
  --paper:#f4f7fb; --grid:#d9e2f0; --card:#ffffff; --ink:#1b2340; --muted:#56617d; --rule:#c2cde1; --margin:#d6485b;
  --noun:#1c5cc4; --verb:#b13026; --pron:#7a3db8; --adj:#166f43; --adv:#944f04; --art:#596177; --prep:#ad2379; --conj:#096b76; --intj:#5c6800;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",sans-serif;
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#13201c; --grid:#1c2f29; --card:#1a2a25; --ink:#e9f1ec; --muted:#9cb2a8; --rule:#35504a; --margin:#e27682;
    --noun:#86b6ff; --verb:#ff8d7e; --pron:#caa5ff; --adj:#7fdaa6; --adv:#ffc06a; --art:#aab5c6; --prep:#ff93d1; --conj:#6fd6e0; --intj:#cfe06a;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#13201c; --grid:#1c2f29; --card:#1a2a25; --ink:#e9f1ec; --muted:#9cb2a8; --rule:#35504a; --margin:#e27682;
  --noun:#86b6ff; --verb:#ff8d7e; --pron:#caa5ff; --adj:#7fdaa6; --adv:#ffc06a; --art:#aab5c6; --prep:#ff93d1; --conj:#6fd6e0; --intj:#cfe06a;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:20px 20px;
  margin:0; color:var(--ink); font-family:var(--serif); font-size:17px; line-height:1.55;
  padding-inline:16px; padding-block:32px 56px;
}
.wrap{max-width:1080px; margin-inline:auto; display:flex; flex-direction:column; gap:28px}
.wrap > main{display:flex; flex-direction:column; gap:inherit; min-width:0}
@media (min-width:900px){ .wrap{border-left:2px solid var(--margin); padding-left:32px} }

.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0}
h1{font-family:var(--display); font-weight:700; font-size:clamp(30px,5.2vw,50px); line-height:1.04; letter-spacing:-.02em; margin:6px 0 12px; text-wrap:balance}
h2{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.01em; margin:0; text-wrap:balance}
.lede{max-width:62ch; margin:0; color:var(--ink)}
.label{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0}

button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

.pos-n{--c:var(--noun)} .pos-v{--c:var(--verb)} .pos-pron{--c:var(--pron)} .pos-adj{--c:var(--adj)}
.pos-adv{--c:var(--adv)} .pos-art{--c:var(--art)} .pos-prep{--c:var(--prep)} .pos-conj{--c:var(--conj)} .pos-intj{--c:var(--intj)}

.row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.group{display:flex; flex-direction:column; gap:10px}
.lg{display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 9px; border-radius:999px;
  border:1.5px solid var(--c); background:color-mix(in srgb,var(--c) 12%,var(--card)); font-family:var(--mono); font-size:13px}
.lg i{width:10px; height:10px; border-radius:50%; background:var(--c)}
.lg[aria-pressed="true"]{background:var(--c); color:var(--card)}
.lg[aria-pressed="true"] i{background:var(--card)}
.pick{padding:8px 14px; border:1.5px solid var(--rule); background:var(--card); border-radius:4px;
  font-family:var(--display); font-weight:500; font-size:15px}
.pick{display:inline-flex; align-items:center; gap:9px}
.pick:hover{border-color:var(--ink)}
.bd{font-family:var(--display); font-weight:700; font-size:15px; line-height:1}
.pick .bd{width:22px; height:22px; display:grid; place-items:center; border:1.5px solid currentColor; border-radius:3px}
.pick.k-diff .bd{background:var(--ink); color:var(--card); border-color:var(--ink)}
.pick.k-diff[aria-pressed="true"] .bd{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.lg .bd{margin-left:2px; padding:2px 5px; border-radius:3px}
.lg.st-diff{border-width:2.5px; font-weight:500}
.lg.st-diff .bd{background:var(--c); color:var(--card)}
.lg.st-diff[aria-pressed="true"] .bd{background:var(--card); color:var(--c)}
.lg.st-off{opacity:.42; border-style:dashed; background:transparent; cursor:default}
.keyline{font-family:var(--mono); font-size:12.5px; color:var(--muted); margin:0; display:flex; flex-wrap:wrap; gap:4px 18px}
.keyline b{font-family:var(--display); color:var(--ink)}
.difline{margin:0; font-size:15.5px; max-width:75ch}
.difline b{font-weight:600}
.pick[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.card{background:var(--card); border:1px solid var(--rule); border-radius:4px; padding:18px; min-width:0}
.card figure{margin:0}
.scroll{overflow-x:auto; padding-bottom:4px}
.scroll svg{display:block; margin-inline:auto}
figcaption{font-size:15.5px; color:var(--muted); max-width:70ch; margin-top:10px}
figcaption b,.fig .cap b{color:var(--ink); font-weight:700; background:color-mix(in srgb,var(--ink) 9%,transparent); padding:1px 5px; border-radius:3px}
.capnotes{margin:8px 0 0; font-size:15.5px}
.capnotes li{margin-bottom:5px}
b.hl{font-weight:700; border-bottom:0; background:color-mix(in srgb,var(--c) 15%,transparent); padding:1px 5px; border-radius:3px}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:760px){ .pair{grid-template-columns:1fr} }
.cardhead{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-bottom:8px}
.sent{font-size:20px; font-weight:600; margin:0}

.verdict{display:flex; align-items:center; gap:14px}
.sym{flex:none; width:44px; height:44px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:4px;
  font-family:var(--display); font-weight:700; font-size:26px; line-height:1}
.verdict p{margin:0; font-family:var(--display); font-weight:700; font-size:20px; line-height:1.2; text-wrap:balance}
.notes{margin:14px 0 0; padding-left:20px; max-width:68ch}
.notes li{margin-bottom:6px}
.notes b{font-weight:600}

svg{color:var(--ink)}
.ln{stroke:currentColor; stroke-width:1.6; stroke-linecap:round; fill:none}
.hw{font:600 19px var(--serif)} .mw{font:600 16px var(--serif)} .cw{font:600 20px var(--serif); fill:var(--ink)}
.hw .tok,.mw .tok{fill:var(--c)}
.imp{font-style:italic; font-weight:500}
.role,.pl,.lang{font-family:var(--mono); font-size:11px}
.role{fill:var(--muted); letter-spacing:.06em}
.lang{fill:var(--muted); font-size:12px; letter-spacing:.1em}
.pl{fill:var(--c)}
.chip rect{fill:color-mix(in srgb,var(--c) 13%,var(--card)); stroke:var(--c); stroke-width:1.5}
.chip.un rect,.chip.ghost rect{fill:none; stroke-dasharray:4 3}
.chip.ghost .cw{font-style:italic; font-weight:500}
.lk.ghost{stroke-dasharray:5 4}
.lk{stroke:var(--c); stroke-width:2; fill:none; opacity:.75}
.tok{transition:opacity .15s}
.tok.dim{opacity:.16}
.chip,.hw .tok,.mw .tok{cursor:default}
@media (prefers-reduced-motion:reduce){ .tok{transition:none} }

.key{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px 24px; margin:14px 0 0; padding:0; list-style:none}
.key li{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.45; min-width:0}
.key svg{flex:none}
/* shared across pages */
img{max-width:100%}
.viewer{display:flex; flex-direction:column; gap:28px}
.navg{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 14px}
.navh{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.sec{display:flex; flex-direction:column; gap:12px}
.sec > p{margin:0; max-width:68ch}
h2.big{font-size:26px}
.tblwrap{overflow-x:auto}
table{border-collapse:separate; border-spacing:4px; font-variant-numeric:tabular-nums}
th{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:left; padding:4px 10px; white-space:nowrap}
td{padding:7px 12px; font-size:19px; font-weight:600; border-radius:3px; white-space:nowrap}
td.en{font-family:var(--mono); font-size:13px; font-weight:400; color:var(--muted); padding-left:0}
td.one{background:color-mix(in srgb,var(--pron) 16%,var(--card)); border:1.5px solid var(--pron); text-align:center}
td.one small{display:block; font-family:var(--mono); font-size:11px; font-weight:400; color:var(--muted)}
td.sp{border:1.5px dashed var(--pron)}
td.plain{border:1.5px solid var(--rule)}
td small{font-family:var(--mono); font-size:11px; font-weight:400; color:var(--muted)}
.points{margin:0; padding-left:20px; max-width:70ch}
.points li{margin-bottom:6px}
.points b,.sec b{font-weight:600}
.verbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); gap:14px}
.verb{background:var(--card); border:1px solid var(--rule); border-radius:4px; padding:14px 16px; min-width:0}
.verb h3{font-family:var(--display); font-weight:700; font-size:22px; margin:0; letter-spacing:-.01em}
.verb .gloss{font-family:var(--mono); font-size:12px; color:var(--muted); margin:0 0 8px}
.conj{display:grid; grid-template-columns:max-content 1fr max-content 1fr; gap:3px 8px; margin:0; align-items:baseline}
.conj div{display:contents}
.conj dt{font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap}
.conj div:nth-child(even) dt{padding-left:10px}
.conj dd{margin:0; font-size:18px; font-weight:500; white-space:nowrap}
.irr{color:var(--verb); font-weight:700}
.pp{margin:10px 0 0; padding-top:8px; border-top:1px solid var(--rule); font-size:15px}
.pp small{font-family:var(--mono); font-size:11px; color:var(--muted); margin-right:8px}
.parts{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:6px 18px; margin:0; padding:0; list-style:none}
.parts li{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px; font-size:17px; border-bottom:1px solid var(--rule); padding:4px 0}
.parts small{font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.ess{font-family:var(--mono); font-size:10.5px; border:1px solid var(--muted); border-radius:3px; padding:0 4px; color:var(--muted)}
.swatch{display:inline-block; width:10px; height:10px; border-radius:2px; background:var(--verb); margin-right:6px}
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:760px){ .twocol{grid-template-columns:1fr} }
.card h3{font-family:var(--display); font-weight:700; font-size:28px; margin:0 0 4px}
.figs{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); gap:14px}
.figs.wide{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
.fig{display:flex; flex-direction:column; gap:8px}
.fig .cap{margin:0; font-size:15px; color:var(--muted)}
.fig .word{font-family:var(--display); font-weight:700; font-size:22px; margin:0}
.fig .tl{margin:0; font-size:19px; font-weight:500}
.fig .en{margin:0; font-family:var(--mono); font-size:12.5px; color:var(--muted)}
.f-imp{color:var(--noun); font-weight:700}
.f-pp{color:var(--verb); font-weight:700}
.tl-axis{stroke:var(--muted); stroke-width:1.4; fill:none}
.tl-now{font-family:var(--mono); font-size:10px; fill:var(--muted)}
.tl-imp{fill:var(--noun)} .tl-imp-band{fill:var(--noun); opacity:.3} .tl-imp-line{stroke:var(--noun); stroke-width:2; stroke-dasharray:3 4; fill:none}
.tl-pp{fill:var(--verb)} .tl-pp-line{stroke:var(--verb); stroke-width:5; stroke-linecap:butt; fill:none} .tl-pp-cap{stroke:var(--verb); stroke-width:2.5; fill:none}
.sw-imp,.sw-pp{display:inline-block; vertical-align:middle; margin-right:6px}
.sw-imp{width:26px; height:10px; border-radius:5px; background:color-mix(in srgb,var(--noun) 35%,var(--card)); border:1.5px dashed var(--noun)}
.sw-pp{width:11px; height:11px; border-radius:50%; background:var(--verb)}
td.chg{border:1.5px solid var(--prep); background:color-mix(in srgb,var(--prep) 12%,var(--card))}
td.wrapok{white-space:normal; font-size:17px; font-weight:500; min-width:180px}
.plist{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.plist li{display:grid; grid-template-columns:minmax(150px,220px) minmax(90px,150px) 1fr; gap:4px 16px; align-items:baseline; border-bottom:1px solid var(--rule); padding-bottom:8px}
@media (max-width:640px){ .plist li{grid-template-columns:1fr} }
.np{font-size:20px; font-weight:600; white-space:nowrap}
.slot{display:inline-block; min-width:34px; text-align:center; padding:0 6px; border-radius:3px; margin-right:4px}
.slot.on{border:1.5px solid var(--art); background:color-mix(in srgb,var(--art) 14%,var(--card)); color:var(--art)}
.slot.off{border:1.5px dashed var(--muted); color:var(--muted); font-weight:400}
.plist small{font-family:var(--mono); font-size:12.5px; color:var(--muted)}
.plist .why{font-size:15.5px}
.wrong{text-decoration:line-through; text-decoration-color:var(--verb); text-decoration-thickness:2px}
.card .points{margin-top:8px}

/* parts of speech and tenses pages */
.pcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr)); gap:14px}
.pcard{display:flex; flex-direction:column; gap:8px}
.pcard h3{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:24px; margin:0; color:var(--c)}
.pcard h3 i{flex:none; align-self:center; width:12px; height:12px; border-radius:50%; background:var(--c)}
.pcard h3 small{font-family:var(--mono); font-weight:400; font-size:12.5px; color:var(--muted)}
.pcard .does{margin:0; font-size:17px}
.pcard .ex{margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 10px; font-size:17px}
.pcard .ex dt{font-family:var(--mono); font-size:11px; color:var(--muted); padding-top:5px}
.pcard .ex dd{margin:0; font-weight:500; font-size:18px}
.pcard .ex dd b{color:var(--c); font-weight:700; border-bottom:2px solid var(--c)}
.pcard .spot,.pcard .wl{margin:0; font-size:16px}
.pcard .spot .label,.pcard .wl .label{display:block; margin-bottom:1px}
.pcard .wl{color:var(--c); font-weight:600}
.pcard .wl .label{font-weight:400}
.pcard > .label{margin-top:4px}
.hl{color:var(--c); border-bottom:2px solid var(--c)}
.gloss{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:16px 28px; margin:0}
.gloss div{min-width:0; border-top:1.5px solid var(--rule); padding-top:8px}
.gloss dt{font-family:var(--display); font-weight:700; font-size:18px}
.gloss dt small{font-family:var(--mono); font-weight:400; font-size:12px; color:var(--muted); margin-left:6px}
.gloss dd{margin:2px 0 0; font-size:16px}
.gloss .exl{display:block; margin-top:3px; color:var(--muted)}
.gloss .exl b{color:var(--ink); font-weight:700}
.pcard .points{margin-top:0; font-size:16px}
.pcard .more,.more{margin:0; font-family:var(--mono); font-size:12.5px; color:var(--muted)}
.more a,.sec p a,.points a{color:var(--ink); text-underline-offset:3px}
.lvl{display:inline-block; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:1px 7px; border-radius:3px; white-space:nowrap}
.lvl.core{background:var(--ink); color:var(--card); border:1.5px solid var(--ink)}
.lvl.later{border:1.5px solid var(--ink); color:var(--ink)}
.lvl.rec{border:1.5px dashed var(--muted); color:var(--muted)}
.tcard{display:flex; flex-direction:column; gap:8px}
.tcard h3{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:24px; margin:0}
.tcard h3 small{font-family:var(--mono); font-weight:400; font-size:12.5px; color:var(--muted)}
.tcard dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:16.5px}
.tcard dl dt{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:5px}
.tcard dl dd{margin:0}
.tcard table{border-spacing:3px}
.tcard th{padding:3px 6px}
.tcard td{font-size:16px; font-weight:500; padding:3px 7px}
.tcard td.en{font-size:11.5px; padding-right:4px}
.end{color:var(--verb); font-weight:700}
.tm-tl{font:600 17px var(--serif); fill:var(--ink)}
.tm-name{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; fill:var(--muted)}
.tm-en{font:italic 500 13px var(--serif); fill:var(--muted)}
.tm-dot{fill:var(--verb)} .tm-dot.later{fill:var(--card); stroke:var(--verb); stroke-width:2.5} .tm-dot.rec{fill:var(--card); stroke:var(--muted); stroke-width:2; stroke-dasharray:3 2.5}
.tm-band{fill:var(--verb); opacity:.22}
.tm-lead{stroke:var(--rule); stroke-width:1.2; fill:none}
.mp-en{font:500 16px var(--serif); fill:var(--ink)}
.mp-tl{font:600 18px var(--serif); fill:var(--verb)}
.mp-ln{stroke:var(--verb); stroke-width:1.8; fill:none; opacity:.7}
.mp-ln.alt{stroke-dasharray:4 4; opacity:.55}

/* site footer (Base.astro) */
.sitefoot{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; margin-top:12px; padding-top:10px; border-top:1.5px solid var(--rule);
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted)}
.sitefoot p{margin:0}
.sitefoot time{white-space:nowrap}
.sitefoot a{color:var(--muted); text-underline-offset:3px}
.sitefoot a:hover{color:var(--ink)}
.sitefoot a:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* Report a problem: per-sentence trigger (top right of the Word order card) and the dialog form (public/feedback.js). */
.report{margin-left:auto; padding:0; border:0; background:none; font-family:var(--mono); font-size:12.5px; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px}
.report:hover{color:var(--ink)}
.feedback{width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:22px; border:1px solid var(--rule); border-radius:4px;
  background:var(--card); color:var(--ink)}
.feedback::backdrop{background:color-mix(in srgb,var(--ink) 45%,transparent)}
.feedback form{display:flex; flex-direction:column; gap:8px}
.feedback h2{margin-bottom:2px}
.feedback-about{margin:0 0 6px; font-family:var(--mono); font-size:12.5px; color:var(--muted); overflow-wrap:anywhere}
.feedback label{font-family:var(--display); font-weight:500; font-size:15px; margin-top:6px}
.feedback label span{font-weight:400; color:var(--muted)}
.feedback textarea,.feedback input{width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--rule); border-radius:4px; padding:8px 10px}
.feedback textarea{resize:vertical; min-height:110px}
.feedback textarea:focus-visible,.feedback input:focus-visible{outline:2px solid var(--ink); outline-offset:1px}
.feedback-check{min-height:65px; margin-top:8px}
.feedback-status{margin:0; min-height:1.55em; font-size:15px}
/* --margin alone is 4.25:1 on white; mixing in some ink keeps the red but reaches AA. */
.feedback-status[data-kind="error"]{color:color-mix(in srgb,var(--margin) 80%,var(--ink))}
.feedback-status[data-kind="ok"]{color:var(--adj)}
.feedback-actions{display:flex; justify-content:flex-end; gap:8px}
.feedback-send{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.feedback-send:disabled{opacity:.55; cursor:default}
/* The Turnstile widget is at least 300px wide; keep it inside the dialog on phones. */
@media (max-width:420px){ .feedback{padding:16px} }
/* Responsive layer: append to public/site.css.
   Below 1180px: sticky top bar + full-screen menu. From 1180px: sticky sidebar nav in the notebook margin.
   Below 760px: one-line swipe rows for patterns and parts of speech, fitted diagrams, bottom pattern bar. */
html{scroll-padding-top:72px; -webkit-text-size-adjust:100%}
body{padding:0}
a{color:var(--ink); text-underline-offset:3px}
a:hover{color:var(--margin)}
.skip{position:absolute; left:8px; top:-60px; z-index:50; padding:10px 14px; background:var(--ink); color:var(--paper); font-family:var(--display); border-radius:4px}
.skip:focus{top:8px}
.layout{padding-inline:16px; padding-block:28px 56px}

/* top bar (narrow screens) */
.topbar{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 10px 6px 16px;
  padding-top:max(6px,env(safe-area-inset-top)); background:var(--paper); border-bottom:1.5px solid var(--rule)}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.01em; color:var(--ink); text-decoration:none; white-space:nowrap}
.brand::before{content:""; width:2px; height:22px; background:var(--margin)}
.brand:hover{color:var(--ink)}
.topbar .brand{min-height:44px}
.here{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.menubtn{margin-left:auto; min-height:44px; padding:0 14px; display:inline-flex; align-items:center; gap:10px; border:1.5px solid var(--rule); border-radius:4px; background:var(--card);
  font-family:var(--display); font-weight:500; font-size:15px}
.menubtn:hover{border-color:var(--ink)}
.menubtn i{position:relative; width:16px; height:10px; border-block:2px solid currentColor}
.menubtn i::after{content:""; position:absolute; left:0; right:0; top:2px; border-top:2px solid currentColor}
.menubtn[aria-expanded="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.menubtn[aria-expanded="true"] i{border-color:transparent; height:16px}
.menubtn[aria-expanded="true"] i::before,.menubtn[aria-expanded="true"] i::after{content:""; position:absolute; left:-1px; right:-1px; top:5px; border-top:2px solid currentColor; transform:rotate(45deg)}
.menubtn[aria-expanded="true"] i::after{transform:rotate(-45deg)}

/* site nav: full-screen sheet below the top bar on narrow screens */
.sitenav{display:none}
.sitenav .brand{display:none}
.sitenav .navg{display:flex; flex-direction:column; align-items:stretch; gap:0}
.sitenav .navh{display:block; padding:18px 0 6px}
.sitenav a{display:flex; align-items:center; min-height:46px; font-family:var(--display); font-weight:500; font-size:18px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); position:relative}
.sitenav a[aria-current="page"]{font-weight:700}
.sitenav a[aria-current="page"]::before{content:""; position:absolute; left:-16px; top:8px; bottom:8px; width:3px; background:var(--margin)}
.sitenav a:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.sitenav .navfoot{display:flex; flex-wrap:wrap; gap:6px 18px; padding-top:22px; font-family:var(--mono); font-size:12.5px}
.sitenav .navfoot a{display:inline; min-height:0; border:0; font:inherit; color:var(--muted); text-decoration:underline}
@media (max-width:1179px){
  .sitenav[data-open]{display:block; position:fixed; z-index:29; inset:56px 0 0; overflow-y:auto; overscroll-behavior:contain;
    padding:4px 16px calc(32px + env(safe-area-inset-bottom)); background:var(--paper)}
  .sitenav[data-open] > div{max-width:560px}
  body:has(.sitenav[data-open]){overflow:hidden}
}

/* wide screens: sidebar in the notebook margin */
@media (min-width:1180px){
  html{scroll-padding-top:24px}
  .topbar{display:none}
  .layout{display:grid; grid-template-columns:200px minmax(0,1080px); justify-content:center; column-gap:0; padding-inline:24px; padding-block:40px 64px}
  .sitenav{display:flex; flex-direction:column; position:sticky; top:40px; align-self:start; max-height:calc(100vh - 80px); overflow-y:auto; margin-right:-2px; padding-right:30px}
  .sitenav .brand{display:flex; justify-content:flex-end; font-size:19px; margin-bottom:10px; color:var(--ink)}
  .sitenav .brand::before{display:none}
  .sitenav .navh{padding:16px 0 4px}
  .sitenav a{min-height:0; padding:4px 0; font-size:15px; color:var(--muted); border:0; justify-content:flex-end; text-align:right}
  .sitenav .navg,.sitenav .navh{text-align:right}
  .sitenav a:hover{color:var(--ink)}
  .sitenav a[aria-current="page"]{color:var(--ink)}
  .sitenav a[aria-current="page"]::before{left:auto; right:-30px; top:6px; bottom:6px; width:4px}
  .sitenav .navfoot{display:none}
  .wrap{margin-inline:0; border-left:2px solid var(--margin); padding-left:36px}
}
@media (min-width:900px) and (max-width:1179px){ .wrap{border-left:2px solid var(--margin); padding-left:28px} }

/* page header */
.pagehead .lede{text-wrap:pretty}

/* viewer */
.ghead{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.count{letter-spacing:.08em}
.pnav{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--rule)}
.pnav .pick{min-height:44px}
.pnav-keys{font-family:var(--mono); font-size:12px; color:var(--muted)}
@media (hover:none){ .pnav-keys{display:none} }
.pbar{display:none}
.scroll{-webkit-overflow-scrolling:touch}
.scroll.over:not(.at-end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.scroll.over:not(.at-start):not(.at-end){-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.scroll.over.at-end:not(.at-start){-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px); mask-image:linear-gradient(90deg,transparent,#000 36px)}
.lg:not(:disabled):hover{border-color:var(--ink)}
.lg:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
@media (hover:none){ .tapnote{display:inline} }

@media (max-width:759px){
  body{font-size:16.5px}
  .layout{padding-block:20px 96px}
  .wrap{gap:22px}
  h1{font-size:32px; margin:4px 0 10px}
  h2.big{font-size:23px}
  .card{padding:14px}
  .viewer{gap:20px}
  .group{gap:8px}
  /* single swipeable rows that bleed to the screen edge */
  .hscroll{flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; margin-inline:-16px; padding:2px 16px 4px; scroll-padding-inline:16px}
  .hscroll::-webkit-scrollbar{display:none}
  .hscroll > *{flex:none; scroll-snap-align:start}
  .hscroll.over:not(.at-end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .picker .pick{min-height:44px; white-space:nowrap; scroll-snap-align:center}
  .legend .lg{min-height:38px; white-space:nowrap}
  .keyline{font-size:12px; gap:2px 14px}
  .difline{font-size:15px}
  .sent{font-size:18px}
  .verdict{gap:12px; align-items:flex-start}
  .sym{width:38px; height:38px; font-size:22px}
  .verdict p{font-size:18px}
  .notes{padding-left:18px; font-size:16px}
  .pnav{display:none}
  .report{font-size:12px}
  /* bottom pattern bar */
  .pbar{display:flex; position:fixed; z-index:20; left:0; right:0; bottom:0; gap:8px; align-items:center; padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:var(--paper); border-top:1.5px solid var(--rule); transform:translateY(110%); transition:transform .2s ease}
  .pbar.show{transform:none}
  .pbtn{flex:none; width:48px; height:46px; display:grid; place-items:center; border:1.5px solid var(--rule); border-radius:4px; background:var(--card); font-family:var(--display); font-size:26px; line-height:1}
  .pcur{flex:1; min-width:0; height:46px; display:flex; align-items:center; gap:10px; padding:0 12px; border:1.5px solid var(--ink); border-radius:4px; background:var(--card); text-align:left}
  .pcur .bd{flex:none; width:22px; height:22px; display:grid; place-items:center; border:1.5px solid currentColor; border-radius:3px}
  .pname{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--display); font-weight:500; font-size:15px}
  .pnum{flex:none; font-family:var(--mono); font-size:12px; color:var(--muted)}
  .key{grid-template-columns:1fr; gap:12px}
  .sitefoot{flex-direction:column; gap:8px}
  .sitefoot a{padding:4px 0}
}
@media (prefers-reduced-motion:reduce){ .pbar{transition:none} }
/* Irregular verbs: the longest forms (rimaniamo, rimangono) don't fit four columns at 320px; tighten the card. */
@media (max-width:359px){
  .verb{padding:12px}
  .conj{gap:3px 6px}
  .conj div:nth-child(even) dt{padding-left:4px}
  .conj dd{font-size:15.5px}
}
/* Shown only when JavaScript is off (<noscript> in Base.astro). */
.nojs{margin:0; padding:10px 16px; background:var(--ink); color:var(--paper); font-family:var(--display); font-weight:500; font-size:15px; text-align:center}