/* Guides, calculators and the visit checklist. Loaded after tokens.css and app.css only on content pages (base.html "css" block). */
@layer pages {
/* ---- prose (guides) ---- */
.prose { overflow-wrap: break-word; max-width: 68ch; font-size: var(--text-card); line-height: 1.75; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-12); font-size: clamp(1.5rem, 3vw, 1.875rem); }
.prose h3 { margin-top: var(--sp-8); }
.prose h2 + *, .prose h3 + * { margin-top: var(--sp-3); }
.prose ul, .prose ol { padding-left: var(--sp-5); }
.prose li + li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--primary); }
.prose blockquote { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg); background: var(--sun-soft); }
.prose .table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.prose table { width: 100%; font-size: var(--text-sm); line-height: var(--leading-sm); }
.prose tbody tr:last-child > * { border-bottom: 0; }
.prose th, .prose td { padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.prose thead th { background: var(--sunken); font-weight: 600; color: var(--muted-foreground); }
.prose pre { position: relative; overflow-x: auto; padding: var(--sp-3) var(--sp-4); background: var(--sunken); border-radius: var(--radius-md); font-size: var(--text-sm); }
.prose :not(pre) > code { overflow-wrap: anywhere; padding: 0 var(--sp-1); border-radius: 4px; background: var(--muted); }
@media (min-width: 768px) { .prose { font-size: var(--text-lg); line-height: 1.8; } }
.bullets { max-width: var(--measure); padding-left: var(--sp-5); }
.bullets li + li { margin-top: var(--sp-2); }
.toc { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--border); font-size: var(--text-sm); }
.toc summary { min-height: 32px; font-weight: 700; cursor: pointer; }
.toc ol { margin-top: var(--sp-2); padding-left: 0; list-style: none; }
.toc li + li { margin-top: var(--sp-1_5); }
.toc a { color: var(--muted-foreground); text-decoration: none; }
.toc a:hover { color: var(--primary); text-decoration: underline; }
.article { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
.article > * { min-width: 0; }
@media (min-width: 1100px) { .article { grid-template-columns: minmax(0, 68ch) 16rem; justify-content: space-between; } .article .toc { position: sticky; top: calc(var(--h-header) + var(--sp-6)); align-self: start; } .article .toc summary { pointer-events: none; } }

/* ---- calculators ---- */
.tool { display: grid; gap: var(--sp-6); align-items: start; }
.tool-form { display: grid; gap: var(--sp-5); padding: var(--sp-6); border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--border); }
.tool-form h2 { font-size: var(--text-2xl); }
.tool-out { background: var(--lilac-soft); border-color: transparent; }
.tool-out .figure { margin-top: var(--sp-1); color: var(--primary); }
.tool-out > * + * { margin-top: var(--sp-3); }
.tool-out .kv { border-top-color: color-mix(in oklab, var(--foreground) 12%, transparent); }
.tool-out .kv > div { border-bottom-color: color-mix(in oklab, var(--foreground) 12%, transparent); }
.tool-summary { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 64px; padding: var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom)); background: var(--popover); border-top: 1px solid var(--border); box-shadow: var(--shadow-up); text-decoration: none; color: var(--foreground); }
.tool-summary b { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.tool-summary span { font-size: var(--text-sm); color: var(--primary); font-weight: 600; }
.has-summary { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.schemes > li { padding: var(--sp-4) 0; border-bottom: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent); }
.schemes { border-top: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent); }
.scheme-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.scheme-head h3 { font-size: 1rem; line-height: 1.5; }
.plan li { padding: var(--sp-3) 0 var(--sp-3) var(--sp-5); border-left: 3px solid var(--border); position: relative; }
.plan li::before { content: ""; position: absolute; left: -8px; top: 1.1rem; width: 13px; height: 13px; border-radius: var(--radius-full); background: var(--card); border: 3px solid var(--input); }
.plan li.current { border-left-color: var(--primary); }
.plan li.current::before { border-color: var(--primary); }
.plan li.past { color: var(--muted-foreground); }
@media (min-width: 900px) {
  .tool { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-8); }
  .tool-out { position: sticky; top: calc(var(--h-header) + var(--sp-4)); }
  .tool-summary { display: none; }
  .has-summary { padding-bottom: 0; }
}

/* ---- checklist (print first) ---- */
.checklist { display: grid; gap: var(--sp-6); }
.check-group { padding: var(--sp-5); border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--border); }
.check-group h2 { font-size: var(--text-xl); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--primary); }
.checks-print li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.checks-print .box { flex: none; width: 1rem; height: 1rem; margin-top: var(--sp-1); border: 1.5px solid var(--input); border-radius: 4px; }
.notes .lines { height: 10rem; background: repeating-linear-gradient(to bottom, transparent 0 1.95rem, var(--border) 1.95rem 2rem); }
.urn-form { flex: 1 1 18rem; max-width: 26rem; }
@media (min-width: 900px) { .checklist { grid-template-columns: 1fr 1fr; } }

}