/* 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:#c2352a; --pron:#7a3db8; --adj:#187a4a; --adv:#a85a05; --art:#667089; --prep:#ad2379; --conj:#0b7f8c; --intj:#667300;
  --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}
@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}
button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

.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}
.nav{display:flex; flex-wrap:wrap; gap:6px 30px; border-bottom:1.5px solid var(--rule); margin-top:18px; padding-bottom:6px}
.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)}
.nav a{font-family:var(--display); font-weight:500; font-size:15px; color:var(--muted); text-decoration:none; padding:4px 0 3px; border-bottom:3px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); border-color:var(--margin)}
.nav a:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.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 .it{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-it{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-it{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}