/* Inference reference pages. Loaded after hedgerow.css and blog/blog.css.
   Flat surfaces, no gradients, radius <= 6px, per the site style guide.
   External file on purpose: the site CSP (style-src 'self') blocks inline styles. */

.glance { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin:0 0 2.5rem }
.glance-item { background:var(--card); border:1px solid var(--border); border-radius:6px; padding:1rem 1.1rem }
.glance-label { display:block; font-size:.65rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--sage-text); margin-bottom:.4rem }
.glance-value { display:block; font-size:1.05rem; font-weight:700; letter-spacing:-.01em; color:var(--text); line-height:1.3 }
.glance-note { display:block; font-size:.8rem; color:var(--muted); margin-top:.3rem; line-height:1.45 }

.pages-fig { background:var(--card); border:1px solid var(--border); border-radius:6px; padding:1.5rem 1.5rem 1.25rem; margin:1.5rem 0 2.5rem }
.pages-row { display:flex; align-items:center; gap:1rem; margin-bottom:1rem }
.pages-row:last-of-type { margin-bottom:.25rem }
.pages-label { flex:0 0 9.5rem; font-size:.8rem; font-weight:600; color:var(--text); line-height:1.35 }
.pages { display:flex; gap:.4rem; flex:1 1 auto }
.page { flex:1 1 0; max-width:3.4rem; aspect-ratio:1/1; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; border:2px solid var(--border); color:var(--muted); background:var(--bg) }
.page.reserved { border-color:var(--navy); color:var(--navy); background:var(--bg) }
.page.written { border-color:var(--sage-text); background:var(--sage-text); color:#fff }
.page.stale { border:2px dashed #C46A1C; background:rgba(244,162,91,.22); color:#7A3E0A }
.pages-result { margin:1.1rem 0 0; padding-top:1rem; border-top:1px solid var(--border); font-size:.9rem; color:var(--text); line-height:1.55 }
.pages-result strong { color:var(--text) }
.pages-key { display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:.9rem; font-size:.75rem; color:var(--muted) }
.pages-key span { display:inline-flex; align-items:center; gap:.4rem }
.key-sq { display:inline-block; width:.9rem; height:.9rem; border-radius:3px }
.key-sq.written { background:var(--sage-text) }
.key-sq.stale { border:2px dashed #C46A1C; background:rgba(244,162,91,.22) }
.pages-cap { font-size:.75rem; color:var(--faint); margin:.9rem 0 0 }

.shapes { display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin:1.5rem 0 2.5rem }
.shape { background:var(--card); border:1px solid var(--border); border-radius:6px; padding:1.2rem 1.2rem 1.1rem; display:flex; flex-direction:column }
.shape-num { font-size:.65rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--sage-text) }
.shape h3 { font-size:1.05rem; margin:.35rem 0 .6rem; letter-spacing:-.01em }
.shape p { font-size:.9rem; line-height:1.6; color:var(--muted); margin:0 0 .9rem }
.shape-foot { margin-top:auto; font-size:.8rem; line-height:1.55; color:var(--muted); border-top:1px solid var(--border); padding-top:.75rem }
.shape-foot .ev { margin-bottom:.4rem }

.prose details { background:var(--card); border:1px solid var(--border); border-radius:6px; margin:1rem 0 }
.prose details > summary { cursor:pointer; padding:.9rem 1.1rem; font-weight:600; color:var(--text); font-size:.95rem; list-style:none }
.prose details > summary::-webkit-details-marker { display:none }
.prose details > summary::before { content:"+"; display:inline-block; width:1.2rem; font-weight:700; color:var(--sage-text) }
.prose details[open] > summary::before { content:"\2212" }
.prose details > summary:focus-visible { outline:2px solid var(--navy); outline-offset:2px }
.prose details > .details-body { padding:0 1.1rem 1.1rem }
.prose details .table-wrap { margin:.5rem 0 0 }

.checklist { list-style:none; padding:0 !important; margin:1.25rem 0 2rem }
.checklist li { margin:0 0 .5rem !important }
.checklist label { display:flex; gap:.75rem; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:6px; padding:.8rem 1rem; cursor:pointer; line-height:1.55; font-size:.95rem; color:var(--text) }
.checklist input { margin-top:.3rem; width:1.05rem; height:1.05rem; accent-color:var(--sage-text); flex:0 0 auto }
.checklist input:checked + span { color:var(--muted); text-decoration:line-through; text-decoration-color:var(--faint) }
.checklist label:focus-within { outline:2px solid var(--navy); outline-offset:2px }

.tests { display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; margin:1.5rem 0 2.5rem }
.test { background:var(--card); border:1px solid var(--border); border-radius:6px; padding:1.1rem 1.2rem }
.test h3 { font-size:1rem; margin:0 0 .6rem; letter-spacing:-.01em }
.test dl { margin:0; font-size:.88rem; line-height:1.55 }
.test dt { font-size:.65rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--sage-text); margin-top:.6rem }
.test dd { margin:.15rem 0 0; color:var(--muted) }
.test dt.must { color:#8A5320 }

.prose p.fix-line { background:var(--navy); color:var(--bg); border-radius:6px; padding:1.1rem 1.3rem; margin:1.5rem 0 2.5rem; font-size:1.02rem; line-height:1.55 }
.prose p.fix-line strong { color:#fff }

@media (max-width:768px) {
  .glance, .shapes, .tests { grid-template-columns:1fr }
  .pages-row { flex-direction:column; align-items:flex-start; gap:.5rem }
  .pages-label { flex:none }
  .pages { width:100% }
}