/*
 * Pages C: how the guides' Markdown reads. Loaded with pages-b on the ten guide pages. The content is
 * Markdown only, so the looks hang on its structure: a list whose items open in bold is a set of
 * labelled points, an ordered one a sequence of steps, a lone link to a .xlsx file the download.
 * Nothing here draws a box: points and steps sit on the page, separated by space and weight.
 */

.guide-body > ul:has(> li > strong:first-child), .guide-body > ol:has(> li > strong:first-child) { display: grid; gap: 1.25rem; margin: 1.5rem 0 2rem; padding: 0; list-style: none; }
.guide-body > ul:has(> li > strong:first-child) > li, .guide-body > ol:has(> li > strong:first-child) > li { position: relative; margin: 0; padding-left: 2rem; }
.guide-body > ul:has(> li > strong:first-child) > li::before { content: ''; position: absolute; top: 0.5em; left: 0; width: 0.6rem; height: 0.6rem; background: var(--ink); }
.guide-body > ul > li > strong:first-child, .guide-body > ol > li > strong:first-child { display: block; margin-bottom: 0.2rem; font-weight: 600; }

.guide-body > ol:has(> li > strong:first-child) { counter-reset: step; }
.guide-body > ol:has(> li > strong:first-child) > li { padding-left: 2.75rem; counter-increment: step; }
.guide-body > ol:has(> li > strong:first-child) > li::before { content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; background: var(--ink); color: #ffffff; font-weight: 600; font-variant-numeric: tabular-nums; }

.guide-body > ul:not(:has(> li > strong:first-child)) { padding-left: 1.25rem; }
.guide-body > ul > li, .guide-body > ol > li { margin: 0.35rem 0; }

/* The template download: the one action of the model page, set as a button. */
.guide-body p > a[href$='.xlsx']:only-child { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.9rem 1.5rem; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.guide-body p > a[href$='.xlsx']:only-child::before { content: ''; flex: none; width: 1.25rem; height: 1.25rem; background: currentcolor; -webkit-mask: var(--download-icon) center / contain no-repeat; mask: var(--download-icon) center / contain no-repeat; }
.guide-body p > a[href$='.xlsx']:only-child:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .guide-body p > a[href$='.xlsx']:only-child:hover { background: var(--accent-deep); }
}

/* Tables follow site.css (navy head); on the tone field the alternate rows turn white. */
.guide-body > table { width: 100%; }
main .guide-body > table tbody tr:nth-child(even) td, main .guide-body > table tbody tr:nth-child(even) th { background: #ffffff; }
.guide-body > table td:nth-child(n + 5), .guide-body > table th:nth-child(n + 5) { text-align: right; white-space: nowrap; }

:root {
  --download-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10.5l5 5 5-5M4 20h16'/%3E%3C/svg%3E");
}

/* Tables in a guide fill the reading column; on phones they keep their own horizontal scroll. */
.guide-body table:not([data-ui] table) { display: table; width: 100%; }
/* A row with every cell empty is a line to fill in (the printable note): white, ruled, writing height. */
.guide-body tbody tr:not(:has(> td:not(:empty))) > td { height: 2.75rem; background: #ffffff; border-bottom: 1px solid var(--tone-2); }
@media (max-width: 40rem) {
  .guide-body table:not([data-ui] table) { display: block; width: auto; }
}