/* 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;
  /* Font stacks come from Base.astro's <Font> tags (shared/fonts.mjs): self-hosted faces plus metric-matched fallbacks. */
  --display:var(--font-display);
  --serif:var(--font-serif);
  --mono:var(--font-mono);
}
@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;
}
/* Fallback faces sized to match the web fonts (shared/fonts.mjs), so text barely moves when the real fonts
   replace them. Metrics are the ones Astro's Fonts API computes from the font files. They are declared here,
   not generated, so they can carry the latin unicode-range Google serves the web fonts with: characters the
   web fonts lack (arrows, ≈, ≠) then skip these resized faces and come from the next system font in the
   stack, as before self-hosting. scripts/cls.mjs checks that.
   Each face lists fonts with the same widths, so one set of metrics fits them all: Times New Roman /
   Liberation Serif / Tinos, Arial / Liberation Sans / Arimo / Roboto (within 0.3%), Courier New / Liberation
   Mono / Cousine / Droid Sans Mono. Noto Serif (Android) is narrower than Times, so it has its own family,
   "Literata fallback 2", used only where none of the first face's fonts exists. */
@font-face{font-family:"Literata fallback"; src:local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("LiberationSerif"), local("Tinos"), local("Tinos-Regular"); font-weight:500 600; font-style:normal; size-adjust:118.4%; ascent-override:99.4088%; descent-override:26.0135%; line-gap-override:0%; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata fallback"; src:local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("LiberationSerif"), local("Tinos"), local("Tinos-Regular"); font-weight:500; font-style:italic; size-adjust:118.4%; ascent-override:99.4088%; descent-override:26.0135%; line-gap-override:0%; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata fallback 2"; src:local("Noto Serif"), local("NotoSerif-Regular"), local("NotoSerif"); font-weight:500 600; font-style:normal; size-adjust:100%; ascent-override:117.7%; descent-override:30.8%; line-gap-override:0%; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata fallback 2"; src:local("Noto Serif"), local("NotoSerif-Regular"), local("NotoSerif"); font-weight:500; font-style:italic; size-adjust:100%; ascent-override:117.7%; descent-override:30.8%; line-gap-override:0%; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque fallback"; src:local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"), local("Arimo-Regular"), local("Roboto"), local("Roboto-Regular"); font-weight:500 700; font-style:normal; size-adjust:100.0447%; ascent-override:92.9585%; descent-override:26.9879%; line-gap-override:0%; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Mono fallback"; src:local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("LiberationMono"), local("Cousine"), local("Cousine-Regular"), local("Droid Sans Mono"), local("DroidSansMono"); font-weight:400; font-style:normal; size-adjust:99.9837%; ascent-override:99.2161%; descent-override:31.005%; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Mono fallback"; src:local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("LiberationMono"), local("Cousine"), local("Cousine-Regular"), local("Droid Sans Mono"), local("DroidSansMono"); font-weight:500; font-style:normal; size-adjust:99.9837%; ascent-override:99.2161%; descent-override:31.005%; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*{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}