/* Home page and subject pages: subject tiles + table of contents */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.search input{width:100%; max-width:420px; font:1.05rem var(--f-body); padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--card); color:var(--ink)}

.subjects{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.subject{display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink); border:2px solid var(--border); border-radius:14px; box-shadow:-4px 4px 0 var(--hard); padding:16px; background:var(--card); transition:transform .1s, box-shadow .1s}
.subject:hover{transform:translate(-1px,-1px); box-shadow:-6px 6px 0 var(--hard)}
.subject-name{font-family:var(--f-display); font-size:1.6rem; color:var(--line)}
.subject small{color:var(--muted); font-weight:700}

.toc-subject{display:flex; flex-direction:column; gap:16px}
.toc-subject + .toc-subject{margin-top:24px}
.toc-sname a{color:var(--line); text-decoration:none; font-size:1.5rem}
.toc-chapter{display:flex; flex-direction:column; gap:10px}
.toc-chead{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; border-bottom:2px solid var(--ink); padding-bottom:4px}
.toc-cname{font-family:var(--f-display); font-weight:400; font-size:1.3rem; margin:0}
.toc-grade{color:var(--muted); font-weight:700; font-size:.9rem}
.toc-list{list-style:none; margin:0; padding:0; counter-reset:t; display:flex; flex-direction:column; gap:8px}
.toc-list li{counter-increment:t}
.toc-list a{display:grid; grid-template-columns:2.2em minmax(0,1fr); column-gap:10px; text-decoration:none; color:var(--ink); padding:10px 12px; border-radius:10px; border:1px solid transparent}
.toc-list a::before{content:counter(t); grid-row:1 / span 3; font-family:var(--f-display); font-size:1.3rem; color:var(--line); width:1.9em; height:1.9em; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center}
.toc-list a:hover{background:var(--paper); border-color:var(--soft)}
.toc-title{font-weight:800; font-size:1.1rem}
.toc-desc{color:var(--muted)}
.toc-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.toc-tags span{font-size:.8rem; border:1px solid var(--soft); border-radius:999px; padding:0 8px; color:var(--muted)}
.empty-msg{color:var(--muted)}

/* coming-soon subjects */
.subject.soon{opacity:.6; cursor:not-allowed; background:var(--card); border-style:dashed; box-shadow:none}
.subject.soon:hover{transform:none; box-shadow:none}
.subject.soon .subject-name{color:var(--muted)}
.soon-chip{align-self:flex-start; font-size:.8rem; font-weight:800; letter-spacing:.04em; border-radius:999px; padding:1px 10px; background:var(--hint-bg); border:1px solid var(--hl); color:var(--ink)}

/* requests */
.row-between{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:10px}
.btn-link{display:inline-block; text-decoration:none; font-weight:700; background:var(--line); color:#fff; border:2px solid var(--border); box-shadow:-2px 2px 0 var(--hard); border-radius:10px; padding:6px 14px}
.btn-link:hover{opacity:.9}
.muted{color:var(--muted)}
.mini-board{margin:0; padding-inline-start:1.4em; display:flex; flex-direction:column; gap:4px}
.mini-board .votes{color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums}
.board{width:100%; border-collapse:collapse}
.board th,.board td{text-align:start; padding:10px 8px; border-bottom:1px solid var(--soft); vertical-align:middle}
.board th{font-size:.85rem; color:var(--muted); letter-spacing:.04em}
.board td.num{font-variant-numeric:tabular-nums; font-weight:800; font-size:1.15rem; width:4em}
.board .meter{height:6px; border-radius:99px; background:var(--grid); margin-top:6px; overflow:hidden}
.board .meter>div{height:100%; background:var(--line)}
.status{font-size:.8rem; font-weight:800; border-radius:999px; padding:1px 10px; border:1px solid var(--border); white-space:nowrap}
.status.done{background:var(--ok-bg); color:var(--ok); border-color:var(--ok)}
.status.wip{background:var(--hint-bg)}
.req-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; align-items:end}
.req-form label{display:flex; flex-direction:column; gap:4px; font-weight:700}
.req-form input,.req-form select{font:1rem var(--f-body); padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--paper); color:var(--ink); width:100%}
.req-form .wide{grid-column:1 / -1}

/* home hero: Miri on the start side (right in RTL), presenting the text next to her */
header.hero{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px 28px}
header.hero .hero-txt{display:flex; flex-direction:column; gap:12px; min-width:0}
header.hero .miri{height:300px; width:auto; mix-blend-mode:multiply; filter:brightness(1.06) contrast(1.04)}
/* phones: Miri beside the eyebrow and H1, the lead and search full width under them */
@media (max-width:620px){
  header.hero{gap:6px 12px}
  header.hero .hero-txt{display:contents}
  header.hero .miri{height:180px; grid-row:1 / span 2; grid-column:1; align-self:end}
  header.hero .eyebrow,header.hero h1{grid-column:2}
  header.hero .eyebrow{align-self:end}
  header.hero .lead,header.hero .search{grid-column:1 / -1}
}

/* grade level in the TOC */
.toc-grade-block{display:flex; flex-direction:column; gap:16px}
.toc-grade-block + .toc-grade-block{margin-top:12px}
.toc-gname{font-size:1.25rem}
.toc-gname a{color:var(--ink); text-decoration:none; background:var(--hl); border:2px solid var(--border); border-radius:10px; padding:0 .5em}
.toc-chapter{scroll-margin-top:16px}