/* Luxembourg red, white and sky blue; labels carry meaning as well as colour. */
main.grammar-screen,html.native-ios .app>main.grammar-screen{display:block!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;min-height:0!important}
/* Keep search blur from moving a link or filter between pointer-down and click. */
html:not(.native-ios) .app:has(>main.grammar-screen){grid-template-rows:auto minmax(0,1fr) auto}
html:not(.native-ios) .app:has(>main.grammar-screen)>header,html:not(.native-ios) .app:has(>main.grammar-screen)>nav{display:flex}
.grammar-page{max-width:900px;margin:0 auto;padding:4px 0 26px;color:var(--ink);line-height:1.55}
.grammar-page [hidden]{display:none!important}
.grammar-page a{color:inherit;text-decoration:none}
.grammar-page a:focus-visible,.grammar-page button:focus-visible,.grammar-page input:focus-visible,.grammar-table-wrap:focus-visible{outline:3px solid #007fac;outline-offset:3px}
.grammar-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;font-size:13px;color:var(--muted)}
.grammar-top .back{font-size:14px;min-height:44px;display:inline-flex;align-items:center;margin:0}
.grammar-mini-flag{width:33px;height:23px;border:1px solid #dce8f2;border-radius:4px;background:linear-gradient(#d71834 0 33.33%,#fff 33.33% 66.66%,#00a1de 66.66%)}
.grammar-launch .grammar-icon{color:#ae1730;background:linear-gradient(#fff0f3 0 33.33%,#fff 33.33% 66.66%,#dff4ff 66.66%);border:1px solid #e1eaf2;font-size:29px;font-weight:800}
.grammar-hero{position:relative;border:1px solid #d9e8f2;border-radius:20px;padding:24px;background:linear-gradient(120deg,#fff 35%,#e4f6ff);overflow:hidden}
.grammar-hero:before{content:'';position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(#d71834 0 33.33%,#fff 33.33% 66.66%,#00a1de 66.66%)}
.grammar-page .grammar-kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#a21730;margin:0 0 7px}
.grammar-page h1{font-size:clamp(27px,5vw,38px);line-height:1.13;letter-spacing:-.025em;margin:0 0 12px;color:var(--ink)}
.grammar-page h1:focus{outline:none}
.grammar-page h2{font-size:18px;line-height:1.3;margin:0 0 12px;letter-spacing:-.015em}
.grammar-hero>p:not(.grammar-kicker){margin:0;color:var(--muted);font-size:16px}
.grammar-stats{display:flex;gap:22px;margin-top:20px;font-size:13px;color:var(--muted)}
.grammar-stats b{font-size:21px;color:var(--ink);margin-right:4px}
.grammar-language{font-size:12px;color:var(--muted);margin:12px 2px 20px}
.grammar-search label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.grammar-search input{width:100%;min-height:48px;font:inherit;font-size:16px;color:var(--ink);border:1px solid #bdcfde;border-radius:12px;padding:11px 14px;background:#fff}
.grammar-filters{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.grammar-filters button{font:inherit;font-size:12px;line-height:1.25;min-height:38px;padding:9px 12px;border:1px solid #d2e1ed;border-radius:20px;background:#fff;color:#405a73;cursor:pointer}
.grammar-filters button[aria-pressed=true]{background:#e0f4ff;border-color:#007daf;color:#00688f;font-weight:750}
.grammar-result-count{font-size:12px;color:var(--muted);margin:13px 1px 22px}
.grammar-group{margin:0 0 28px}
.grammar-group-heading{display:flex;gap:11px;align-items:center;margin-bottom:11px}
.grammar-group-heading>span{display:grid;place-items:center;width:35px;height:35px;flex:0 0 35px;border-radius:11px;background:#e4f4fc;color:#006c97;font-weight:800}
.grammar-group-heading h2{margin:0 0 2px}
.grammar-group-heading p{font-size:12px;color:var(--muted);margin:0}
.grammar-topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.grammar-topic-card{display:flex;align-items:center;gap:11px;min-width:0;padding:15px 13px;border:1px solid #dce8f2;border-radius:14px;background:#fff;transition:border-color .15s}
.grammar-topic-card:hover{border-color:#0098cc}
.grammar-topic-number{color:#ae1730;font-size:11px;font-weight:800;align-self:flex-start;padding-top:4px}
.grammar-topic-card>span:nth-child(2){flex:1;min-width:0}
.grammar-topic-card b{display:block;font-size:15px;line-height:1.3;margin-bottom:4px}
.grammar-topic-card small{display:block;color:var(--muted);font-size:12px;line-height:1.45}
.grammar-topic-card>span:last-child{color:#6b849a}
.grammar-heading{display:block!important;position:static!important;padding:0!important;margin:0 0 24px!important;background:none!important;border:none!important;height:auto!important}
.grammar-heading>p:last-child{font-size:16px;line-height:1.65;color:var(--muted);margin:0}
.grammar-detail{max-width:740px}
.grammar-block,.grammar-diagram{margin:0 0 24px}
.grammar-diagram{padding:18px;background:#f0f8fd;border:1px solid #d7eaf4;border-radius:16px}
.grammar-diagram figcaption{font-size:13px;font-weight:750;margin-bottom:14px}
.grammar-flow{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.grammar-piece{flex:1 1 160px;border-radius:11px;border:1px solid #d5e1eb;padding:12px 10px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.grammar-piece strong{font-size:19px;line-height:1.3;overflow-wrap:anywhere}
.grammar-piece small{font-size:10px;margin-top:7px;line-height:1.4;font-weight:650}
.grammar-red{background:#fff0f3;color:#a6152d;border-color:#f0c8d0}
.grammar-blue{background:#dff3ff;color:#005f88;border-color:#b7dfee}
.grammar-white{background:#fff;color:#36506b}
.grammar-diagram>p{font-size:13px;color:var(--muted);margin:13px 0 0}
.grammar-table-wrap{width:100%;overflow-x:auto;border:1px solid #dce8f2;border-radius:14px;-webkit-overflow-scrolling:touch}
.grammar-page table{width:100%;border-collapse:collapse;text-align:left;font-size:14px;line-height:1.5;margin:0;background:#fff}
.grammar-page th,.grammar-page td{padding:12px 13px;border-bottom:1px solid #e4edf4;vertical-align:top;min-width:82px}
.grammar-page thead th{background:#e8f5fc;color:#135975;font-size:12px;font-weight:750}
.grammar-page tbody th{font-weight:600;color:#405b74}
.grammar-page tr:last-child>*{border-bottom:0}
.grammar-page mark{background:#ffe7ed;color:#9b1330;border-radius:4px;padding:1px 3px;font-weight:750;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.grammar-examples{display:grid;gap:10px}
.grammar-examples>div{border-left:3px solid #00a1de;padding:11px 14px;background:#fff;border-radius:0 11px 11px 0}
.grammar-examples p:first-child{font-size:18px;font-weight:600;margin:0 0 5px;color:var(--ink)}
.grammar-examples p:last-child{font-size:13px;margin:0;color:var(--muted)}
.grammar-note{padding:15px 17px;border:1px solid #eddae1;background:#fff8fa;border-radius:13px;margin:0 0 24px}
.grammar-note>b{color:#a21730;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.grammar-note p{font-size:14px;line-height:1.65;margin:5px 0 0}
.grammar-sources{margin:25px 0 0;border-top:1px solid #dce8f2;padding-top:16px;font-size:12px;color:var(--muted)}
.grammar-sources summary{cursor:pointer;font-weight:700;min-height:32px}
.grammar-sources a{display:block;text-decoration:underline;text-underline-offset:3px;padding:8px 0;color:#006b97;overflow-wrap:anywhere}
.grammar-sources p{line-height:1.65}
.grammar-topic-navigation{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0 0}
.grammar-topic-navigation a{border:1px solid #c9deec;border-radius:13px;padding:13px;background:#fff;min-width:0}
.grammar-topic-navigation small{display:block;color:#00749c;font-size:11px;margin-bottom:5px}
.grammar-topic-navigation b{display:block;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.grammar-empty{text-align:center;padding:30px 12px;background:#eef8fd;border-radius:14px}
@media(max-width:600px){.grammar-topic-grid{grid-template-columns:1fr}.grammar-hero{padding:20px}.grammar-page th,.grammar-page td{padding:10px 9px;font-size:13px}.grammar-diagram{padding:14px}.grammar-top{margin-bottom:10px}.grammar-piece{flex-basis:calc(50% - 8px)}.grammar-page{padding-bottom:24px}}

/* Compact shared headers for the three learning references. */
.reference-hero,.grammar-hero.reference-hero{position:relative;border:1px solid #d9e8f2;border-radius:16px;padding:14px 18px;margin:0 0 16px;background:linear-gradient(120deg,#fff 35%,#e4f6ff);overflow:hidden}
.reference-hero:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(#d71834 0 33.33%,#fff 33.33% 66.66%,#00a1de 66.66%)}
.reference-hero .reference-kicker{font-size:10px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:#a21730;margin:0 0 5px}
.reference-hero h1,.grammar-page .reference-hero h1{font-size:clamp(24px,5vw,30px);line-height:1.15;letter-spacing:-.025em;margin:0;color:var(--ink);overflow-wrap:anywhere}