/* justafantasy.com (Create.Websites goal 3504, 2026-10-08): page layout on the cheatsheet.life family look.
   The look itself (tokens, type, buttons by role, inputs, pill tabs, #EEE tiles, list rows) is ONE sheet,
   /css-lib/cheatsheet-life.css, shared with the cheatsheet.life sites and linked after Bulma, before this file. Edit it in
   TEMPLATE/css-lib only, then cp -p it into every site that links it (testCheatsheetFamilyLook). This file places
   justafantasy's pages; it restates no family rule. Until 3504 it was the generator's placeholder (bulma/theme, a 480px
   .narrow); hand-owned since, so the generator leaves it. Forms take the family's .narrow (640px). No inline styles (CSP). */

/* Main pages (home, how it works) 880px from 1024px, as inventory, todo and index. */
@media (min-width: 1024px) { .section > .container:not(.narrow):not(.is-fluid) { max-width: 880px; } }   /* beats Bulma's :not() widths */

/* On a 640px form page the header row keeps the main pages' 880px, centred on the form, so the pills sit exactly where
   they do on the home (inventory's rule); the form itself stays 640px. */
@media (min-width: 1024px) { .narrow > .headerNavs { width: 880px; margin-left: calc((100% - 880px) / 2); } }

/* Home: the logo on the title's line, as the hub's. */
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.brand .logo { width: 36px; height: 36px; border-radius: 9px; }   /* the title's line height: the gap under the title stays 12px like every page */

/* Profile: each field a list row, its name in grey in a fixed column, as the hub's. */
.fieldName { flex: 0 0 7rem; color: var(--mid-gray); }
.notSet { font-style: italic; color: var(--mid-gray); }

/* The knock tree (goal 3592, 2026-10-09). The outline on /tree: each step indented by its depth (the API gives 0-12); a step's
   edit / add form takes its own line under it. The walk (/walk): the current question or outcome reads larger than the path. */
.treeOutline { --indent: 20px; }
@media (max-width: 768px) { .treeOutline { --indent: 10px; } }
.treeOutline > li.depth1 { padding-left: calc(1 * var(--indent)); }
.treeOutline > li.depth2 { padding-left: calc(2 * var(--indent)); }
.treeOutline > li.depth3 { padding-left: calc(3 * var(--indent)); }
.treeOutline > li.depth4 { padding-left: calc(4 * var(--indent)); }
.treeOutline > li.depth5 { padding-left: calc(5 * var(--indent)); }
.treeOutline > li.depth6 { padding-left: calc(6 * var(--indent)); }
.treeOutline > li.depth7 { padding-left: calc(7 * var(--indent)); }
.treeOutline > li.depth8 { padding-left: calc(8 * var(--indent)); }
.treeOutline > li.depth9 { padding-left: calc(9 * var(--indent)); }
.treeOutline > li.depth10 { padding-left: calc(10 * var(--indent)); }
.treeOutline > li.depth11 { padding-left: calc(11 * var(--indent)); }
.treeOutline > li.depth12 { padding-left: calc(12 * var(--indent)); }
.nodeText { flex: 1 1 20rem; min-width: 0; }
.nodeAnswer { font-weight: 600; }
.nodeForm { flex: 0 0 100%; padding: 8px 0 4px; }
.nodeForm .field { margin-bottom: 8px; }
.shareCard .field { margin-bottom: 8px; }
.questionBody, .outcomeBody { font-size: 18px; margin-bottom: 12px; }
.walkTree > .formCard + .formCard, .walkTree > ul.rows + .formCard { margin-top: 16px; }
.walkTree > .help, .writeBack { margin-top: 16px; }

/* Profile > Comments (goal 3770): the meta line (where, date, state) then the comment on its own line, newlines kept; a long word
   wraps at 390px (the hub's rule). */
.commentText { flex: 1 0 100%; white-space: pre-wrap; overflow-wrap: anywhere; }