/*
 * ncbos - the Grimoire look (D37): parchment by day, candlelight by
 * night. Every colour is a token below (playbooks/colour-and-contrast.md);
 * tools/contrast-pairs.json names every pair the build measures to WCAG
 * AA in both themes. A member's chosen or own theme overrides these same
 * tokens from a style block the server writes after checking each value.
 * The tokens sit on ncbos's own wrapper, not on the page, so the site
 * template is left alone and the server sets the member's light or dark
 * choice on the wrapper with no flash of the wrong theme
 * (D35). Fonts ship in the package (SIL Open Font License, media/fonts).
 */

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/cormorant-garamond-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Crimson Pro';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/crimson-pro-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Crimson Pro';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/crimson-pro-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Crimson Pro';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/crimson-pro-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Crimson Pro';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/crimson-pro-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * The tokens sit on the page itself (:root), so the whole site, its
 * header, menus and footer included (frame.css, loaded on every page by
 * plg_system_ncbos), draws from the same colours as the Book of Shadows
 * screens; and on the .ncbos wrapper, for a screen shown without the
 * plugin. The page and the wrapper carry the same light or dark choice.
 */
:root, :root .ncbos {
    --ncbos-canvas: #F4EEE2;
    --ncbos-panel: #FBF8F1;
    --ncbos-panel-alt: #EFE5D3;
    --ncbos-ink: #2A1F17;
    --ncbos-muted: #5E5145;
    --ncbos-accent: #7A2B2B;
    --ncbos-accent-hover: #5A1E1E;
    --ncbos-on-accent: #FBF8F1;
    --ncbos-gold: #7C5E14;
    --ncbos-border: #D9CDB8;
    --ncbos-field-border: #8C7B66;
    --ncbos-caution: #7A2B2B;
    --ncbos-focus: #7A2B2B;
    --ncbos-success: #2F5E2E;
    --ncbos-danger: #8A1F1F;
    --ncbos-font-display: 'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
    --ncbos-font-body: 'Crimson Pro', 'Georgia', serif;
    --ncbos-shadow: rgba(42, 31, 23, 0.14);
    --ncbos-backdrop: rgba(42, 31, 23, 0.55);
    /* The design system (research/ux/design-brief.md 4.2 to 4.5): a type
       ladder on GOV.UK's model with a 16px floor, a 4-point spacing scale
       on Bootstrap's spacers, radii on Material's steps. */
    --ncbos-fs-xs: 0.875rem;
    --ncbos-fs-sm: 1rem;
    --ncbos-fs-base: 1.125rem;
    --ncbos-fs-md: 1.375rem;
    --ncbos-fs-lg: 1.75rem;
    --ncbos-fs-xl: 2.25rem;
    --ncbos-fs-display: 3rem;
    --ncbos-sp-1: 0.25rem;
    --ncbos-sp-2: 0.5rem;
    --ncbos-sp-3: 0.75rem;
    --ncbos-sp-4: 1rem;
    --ncbos-sp-5: 1.5rem;
    --ncbos-sp-6: 2rem;
    --ncbos-sp-7: 3rem;
    --ncbos-r-sm: 4px;
    --ncbos-r-md: 8px;
    --ncbos-r-lg: 12px; --ncbos-r-pill: 999px;
    --ncbos-radius: var(--ncbos-r-md);
    --ncbos-space: var(--ncbos-sp-4);
    --ncbos-measure: none;
}

:root[data-theme="dark"], :root[data-theme="dark"] .ncbos, :root .ncbos[data-theme="dark"] {
    --ncbos-canvas: #15110D;
    --ncbos-panel: #1F1915;
    --ncbos-panel-alt: #2E2620;
    --ncbos-ink: #EDE3D1;
    --ncbos-muted: #B9AC98;
    --ncbos-accent: #E5A65A;
    --ncbos-accent-hover: #F0BC7C;
    --ncbos-on-accent: #1F1915;
    --ncbos-gold: #D9B26A;
    --ncbos-border: #4A3D30;
    --ncbos-field-border: #8A7A66;
    --ncbos-caution: #E08A7E;
    --ncbos-focus: #E5A65A;
    --ncbos-success: #8FC48A;
    --ncbos-danger: #F09A8E;
    --ncbos-shadow: rgba(0, 0, 0, 0.5);
    --ncbos-backdrop: rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]), :root:not([data-theme="light"]) .ncbos:not([data-theme="light"]) {
        --ncbos-canvas: #15110D;
        --ncbos-panel: #1F1915;
        --ncbos-panel-alt: #2E2620;
        --ncbos-ink: #EDE3D1;
        --ncbos-muted: #B9AC98;
        --ncbos-accent: #E5A65A;
        --ncbos-accent-hover: #F0BC7C;
        --ncbos-on-accent: #1F1915;
        --ncbos-gold: #D9B26A;
        --ncbos-border: #4A3D30;
        --ncbos-field-border: #8A7A66;
        --ncbos-caution: #E08A7E;
        --ncbos-focus: #E5A65A;
        --ncbos-success: #8FC48A;
        --ncbos-danger: #F09A8E;
        --ncbos-shadow: rgba(0, 0, 0, 0.5);
    --ncbos-backdrop: rgba(0, 0, 0, 0.7);
    }
}

/* No box of its own: the Book of Shadows screens are the site, on the
   site's own page (frame.css colours the page from the same tokens). */
.ncbos {
    color: var(--ncbos-ink);
    font-family: var(--ncbos-font-body);
    font-size: var(--ncbos-fs-base);
    line-height: 1.6;
}
.ncbos.ncbos-window { background: var(--ncbos-canvas); padding: var(--ncbos-sp-4); }

/* One ladder: Cormorant only at 22px and above (it is a display face),
   every smaller heading and every label in Crimson Pro. */
.ncbos h1, .ncbos .h1 { font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-xl); font-weight: 700; line-height: 1.15; margin: 0 0 var(--ncbos-sp-2); }
.ncbos h2, .ncbos .h2 { font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-lg); font-weight: 700; line-height: 1.25; margin: var(--ncbos-sp-6) 0 var(--ncbos-sp-3); }
.ncbos h3, .ncbos .h3, .ncbos .h4 { font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-md); font-weight: 700; line-height: 1.35; margin: var(--ncbos-sp-5) 0 var(--ncbos-sp-2); }
.ncbos h4, .ncbos h5, .ncbos .h5, .ncbos h6 { font-family: var(--ncbos-font-body); font-size: var(--ncbos-fs-base); font-weight: 600; line-height: 1.4; margin: var(--ncbos-sp-4) 0 var(--ncbos-sp-2); }
.ncbos h1:first-child, .ncbos h2:first-child, .ncbos h3:first-child, .ncbos .h4:first-child { margin-top: 0; }
.ncbos small, .ncbos .small, .ncbos .form-text { font-size: var(--ncbos-fs-sm); }
.ncbos .table, .ncbos td, .ncbos th { font-variant-numeric: tabular-nums; }
.ncbos-rich, .ncbos-part, .ncbos-measure { max-width: var(--ncbos-measure); }

.ncbos a { color: var(--ncbos-accent); }
.ncbos a:hover, .ncbos a:focus { color: var(--ncbos-accent-hover); }
.ncbos :focus-visible { outline: 3px solid var(--ncbos-focus); outline-offset: 2px; }

/* A card is a unit (a form, an item in a grid, a comment): panel fill,
   hairline, level 1. Never a card inside a card. */
.ncbos-panel {
    background: var(--ncbos-panel);
    border: 1px solid var(--ncbos-border);
    border-radius: var(--ncbos-r-lg);
    padding: var(--ncbos-sp-5);
    box-shadow: 0 1px 2px var(--ncbos-shadow);
}
.ncbos-panel .ncbos-panel { box-shadow: none; border: 0; padding: 0; background: transparent; }
.ncbos-panel > :last-child { margin-bottom: 0; }

.ncbos-eyebrow {
    font-size: var(--ncbos-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ncbos-gold);
}

.ncbos-muted { color: var(--ncbos-muted); }

.ncbos-chip, .ncbos-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ncbos-sp-1);
    background: var(--ncbos-panel-alt);
    color: var(--ncbos-ink);
    border-radius: 999px;
    padding: 0.125rem var(--ncbos-sp-3);
    font-size: var(--ncbos-fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.ncbos-chips { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-2); align-items: center; }

/* Alerts: a rule, an icon and words on the quiet fill; never colour alone. */
.ncbos-alert, .ncbos-caution {
    display: flex;
    gap: var(--ncbos-sp-3);
    align-items: flex-start;
    background: var(--ncbos-panel-alt);
    border-left: 4px solid var(--ncbos-gold);
    border-radius: var(--ncbos-r-md);
    padding: var(--ncbos-sp-3) var(--ncbos-sp-4);
    color: var(--ncbos-ink);
}
.ncbos-caution { border-left-color: var(--ncbos-caution); }
.ncbos-caution > .fa-solid, .ncbos-alert > .fa-solid { margin-top: 0.3em; }
.ncbos-caution > .fa-solid { color: var(--ncbos-caution); }

.ncbos-tonight {
    display: flex;
    gap: var(--ncbos-sp-3);
    align-items: center;
    background: var(--ncbos-panel-alt);
    border-radius: var(--ncbos-r-md);
    padding: var(--ncbos-sp-3) var(--ncbos-sp-4);
}

/* Buttons: one primary per region, secondary outlined in ink, quiet for
   tertiary and in-row actions, danger only behind More or a confirm. */
.ncbos-btn {
    font: inherit;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ncbos-sp-2);
    min-height: 44px;
    padding: var(--ncbos-sp-2) var(--ncbos-sp-5);
    border-radius: var(--ncbos-r-md);
    border: 1px solid var(--ncbos-accent);
    background: var(--ncbos-accent);
    color: var(--ncbos-on-accent);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 120ms, border-color 120ms, color 120ms;
}
.ncbos-btn:hover { background: var(--ncbos-accent-hover); border-color: var(--ncbos-accent-hover); }
.ncbos-btn-secondary { background: transparent; color: var(--ncbos-ink); border-color: var(--ncbos-field-border); }
.ncbos-btn-secondary:hover { background: var(--ncbos-panel-alt); border-color: var(--ncbos-field-border); color: var(--ncbos-ink); }
.ncbos-btn-quiet { background: transparent; color: var(--ncbos-accent); border-color: transparent; padding-left: var(--ncbos-sp-3); padding-right: var(--ncbos-sp-3); }
.ncbos-btn-quiet:hover { background: var(--ncbos-panel-alt); color: var(--ncbos-accent-hover); border-color: transparent; }
.ncbos-btn-danger { background: transparent; color: var(--ncbos-danger); border: 1px solid var(--ncbos-danger); }
.ncbos-btn-danger:hover { background: var(--ncbos-panel-alt); color: var(--ncbos-danger); border-color: var(--ncbos-danger); }
.ncbos-btn-sm { min-height: 36px; padding: var(--ncbos-sp-1) var(--ncbos-sp-3); font-size: var(--ncbos-fs-sm); }
@media (pointer: coarse) { .ncbos-btn-sm { min-height: 44px; } }
.ncbos-actions { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-2); align-items: center; }

/* The page header: breadcrumb, eyebrow, title, a meta line of chips, and
   the screen's actions (one primary, then secondary, then More). */
.ncbos-crumbs { margin: 0 0 var(--ncbos-sp-3); font-size: var(--ncbos-fs-sm); }
.ncbos-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-1) var(--ncbos-sp-2); margin: 0; padding: 0; }
.ncbos-crumbs li { display: inline-flex; align-items: center; gap: var(--ncbos-sp-2); color: var(--ncbos-muted); }
.ncbos-crumbs li + li::before { content: "/"; color: var(--ncbos-muted); }
.ncbos-crumbs a { color: var(--ncbos-muted); }
.ncbos-crumbs a:hover, .ncbos-crumbs a:focus { color: var(--ncbos-accent); }
@media (max-width: 575.98px) { .ncbos-crumbs li:not(:nth-last-child(2)) { display: none; } .ncbos-crumbs li:nth-last-child(2)::before { content: "\2039"; } }
.ncbos-head { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-4); align-items: flex-end; justify-content: space-between; padding-bottom: var(--ncbos-sp-5); margin-bottom: var(--ncbos-sp-6); border-bottom: 1px solid var(--ncbos-border); }
.ncbos-head-text { min-width: 0; flex: 1 1 22rem; }
.ncbos-head h1 { display: flex; gap: var(--ncbos-sp-3); align-items: center; overflow-wrap: anywhere; }
.ncbos-head h1 > .fa-solid { color: var(--ncbos-gold); font-size: 0.75em; }
.ncbos-head .ncbos-lead { color: var(--ncbos-muted); margin: var(--ncbos-sp-1) 0 0; max-width: var(--ncbos-measure); }
.ncbos-head .ncbos-chips { margin-top: var(--ncbos-sp-3); }
.ncbos-more { position: relative; }
.ncbos-more summary { list-style: none; }
.ncbos-more summary::-webkit-details-marker { display: none; }
.ncbos-more-menu { position: absolute; right: 0; z-index: 20; min-width: 15rem; margin-top: var(--ncbos-sp-1); padding: var(--ncbos-sp-2); background: var(--ncbos-panel); border: 1px solid var(--ncbos-border); border-radius: var(--ncbos-r-md); box-shadow: 0 4px 12px var(--ncbos-shadow); display: flex; flex-direction: column; gap: var(--ncbos-sp-1); }
.ncbos-more-menu .ncbos-btn { justify-content: flex-start; width: 100%; }
.ncbos-more-menu form { margin: 0; }

/* Sections on a screen: space and a hairline, not boxes. */
.ncbos-section-block { margin-top: var(--ncbos-sp-6); }
.ncbos-section-block > h2:first-child { margin-top: 0; }

/* Rows: leading icon, a title link, a meta line, trailing chips; the
   whole row is the target. */
.ncbos-rows { list-style: none; margin: 0; padding: 0; }
.ncbos-row { position: relative; display: flex; gap: var(--ncbos-sp-3); align-items: flex-start; padding: var(--ncbos-sp-3) var(--ncbos-sp-2); border-bottom: 1px solid var(--ncbos-border); border-radius: var(--ncbos-r-sm); }
.ncbos-row:hover { background: var(--ncbos-panel-alt); }
.ncbos-row-icon { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--ncbos-r-md); background: var(--ncbos-panel-alt); color: var(--ncbos-gold); }
.ncbos-row:hover .ncbos-row-icon { background: var(--ncbos-panel); }
/* A catalogue entry's drawn spine (D84): the kind's icon, its edge one of
   seven theme colours by kind, so every kind has its own. */
.ncbos-spine { flex: none; width: 2rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--ncbos-r-sm); background: var(--ncbos-panel-alt); color: var(--ncbos-ink); border-left: 6px solid var(--ncbos-accent); }
.ncbos-spine-1 { border-left-color: var(--ncbos-gold); }
.ncbos-spine-2 { border-left-color: var(--ncbos-success); }
.ncbos-spine-3 { border-left-color: var(--ncbos-caution); }
.ncbos-spine-4 { border-left-color: var(--ncbos-danger); }
.ncbos-spine-5 { border-left-color: var(--ncbos-muted); }
.ncbos-spine-6 { border-left-color: var(--ncbos-ink); }
.ncbos-row-form .ncbos-spine { margin-right: var(--ncbos-sp-2); }
.ncbos-pager { display: flex; justify-content: space-between; gap: var(--ncbos-sp-2); margin-top: var(--ncbos-sp-4); }
.ncbos-pager > :only-child { margin-left: auto; }
.ncbos-confirm > summary { list-style: none; cursor: pointer; }
.ncbos-confirm > summary::-webkit-details-marker { display: none; }
.ncbos-confirm[open] { padding-bottom: var(--ncbos-sp-2); }
.ncbos-confirm p { margin: var(--ncbos-sp-2) var(--ncbos-sp-3); }
.ncbos-confirm form { margin: 0 var(--ncbos-sp-3); }
.ncbos-inline-edit > summary { cursor: pointer; color: var(--ncbos-accent); }
.ncbos-row-body { min-width: 0; flex: 1; }
.ncbos-row-title { font-weight: 600; overflow-wrap: anywhere; }
.ncbos-row-title a { color: var(--ncbos-ink); text-decoration: none; }
.ncbos-row-title a::after { content: ""; position: absolute; inset: 0; }
.ncbos-row-title a:focus-visible { outline: none; }
.ncbos-row:focus-within { outline: 3px solid var(--ncbos-focus); outline-offset: 2px; }
.ncbos-row-meta { color: var(--ncbos-muted); font-size: var(--ncbos-fs-sm); }
.ncbos-row-end { flex: none; display: flex; gap: var(--ncbos-sp-2); align-items: center; position: relative; z-index: 1; }

/* Cards in a grid: icon or picture, title, one line, one meta line;
   the whole card is the link. */
.ncbos-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--ncbos-sp-4); list-style: none; margin: 0; padding: 0; }
.ncbos-card { position: relative; display: flex; flex-direction: column; gap: var(--ncbos-sp-2); padding: var(--ncbos-sp-5); background: var(--ncbos-panel); border: 1px solid var(--ncbos-border); border-radius: var(--ncbos-r-lg); box-shadow: 0 1px 2px var(--ncbos-shadow); transition: box-shadow 120ms, border-color 120ms; }
.ncbos-card:hover, .ncbos-card:focus-within { box-shadow: 0 4px 12px var(--ncbos-shadow); border-color: var(--ncbos-accent); }
.ncbos-card-icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--ncbos-r-md); background: var(--ncbos-panel-alt); color: var(--ncbos-gold); font-size: 1.35rem; }
.ncbos-card-title { font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-md); font-weight: 700; line-height: 1.25; margin: 0; }
.ncbos-card-title a { color: var(--ncbos-ink); text-decoration: none; }
.ncbos-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--ncbos-r-lg); }
.ncbos-card-title a:focus-visible { outline: none; }
.ncbos-card:focus-within { outline: 3px solid var(--ncbos-focus); outline-offset: 2px; }
.ncbos-card p { margin: 0; }
.ncbos-card-meta { color: var(--ncbos-muted); font-size: var(--ncbos-fs-sm); margin-top: auto; }

/* Empty states: an icon, one plain sentence, one action. */
.ncbos-empty { text-align: center; padding: var(--ncbos-sp-7) var(--ncbos-sp-4); border: 1px dashed var(--ncbos-field-border); border-radius: var(--ncbos-r-lg); color: var(--ncbos-muted); }
.ncbos-empty > .fa-solid { font-size: 2rem; color: var(--ncbos-gold); display: block; margin-bottom: var(--ncbos-sp-3); }
.ncbos-empty p { margin: 0 auto var(--ncbos-sp-4); max-width: 32rem; }
.ncbos-empty p:last-child { margin-bottom: 0; }

/* Summary list: key left, value right, a hairline between. */
.ncbos-summary { margin: 0; }
.ncbos-summary > div { display: grid; grid-template-columns: minmax(8rem, 35%) 1fr; gap: var(--ncbos-sp-1) var(--ncbos-sp-4); padding: var(--ncbos-sp-2) 0; border-bottom: 1px solid var(--ncbos-border); }
.ncbos-summary dt { color: var(--ncbos-muted); font-weight: 600; font-size: var(--ncbos-fs-sm); }
.ncbos-summary dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .ncbos-summary > div { grid-template-columns: 1fr; } }

/* A long form: one column, its save bar kept in view. */
.ncbos-form { max-width: none; }
.ncbos-savebar { position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-2); align-items: center; padding: var(--ncbos-sp-3) 0; margin-top: var(--ncbos-sp-5); background: var(--ncbos-canvas); border-top: 1px solid var(--ncbos-border); }
.ncbos-has-savebar { scroll-padding-bottom: 6rem; }

.ncbos input, .ncbos select, .ncbos textarea {
    font: inherit;
    color: var(--ncbos-ink);
    background: var(--ncbos-panel);
    border: 1px solid var(--ncbos-field-border);
    border-radius: var(--ncbos-radius);
    min-height: 44px;
}

.ncbos-quote {
    margin: 0.25rem 0 0;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--ncbos-border);
    border-bottom: 1px solid var(--ncbos-border);
    font-style: italic;
    font-size: 1.125rem;
}

/* The Book of Shadows menu module: the site menu's items, the current
   screen underlined, children indented, folding to a button on phones. */
.ncbos-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; width: 100%; }
.ncbos-menu-list a { display: block; padding: 0.35rem 0; text-decoration: none; }
.ncbos-menu-list a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 2px; }
.ncbos-menu-list .ncbos-menu-path { font-weight: 600; }
.ncbos-menu-l2 { padding-left: 1rem; }
.ncbos-menu-l3 { padding-left: 2rem; }
.ncbos .ncbos-menu .navbar-toggler { width: 100%; margin-bottom: 0.25rem; color: var(--ncbos-accent); background: transparent; border: 1px solid var(--ncbos-border); }
.ncbos-list { list-style: none; padding: 0; margin: 0; }
.ncbos-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--ncbos-border); display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.ncbos-checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--ncbos-sp-2) var(--ncbos-sp-5); }
.ncbos-checklist li { display: flex; gap: var(--ncbos-sp-2); align-items: baseline; }
.ncbos-checklist li .fa-solid, .ncbos-checklist li .fa-regular { color: var(--ncbos-field-border); }
.ncbos-checklist li.is-done .fa-solid { color: var(--ncbos-success); }
.ncbos-checklist li.is-done { color: var(--ncbos-muted); }
.ncbos-table { color: var(--ncbos-ink); }
.ncbos-table th { font-weight: 600; color: var(--ncbos-muted); border-bottom: 2px solid var(--ncbos-border); }
.ncbos-table td { border-bottom: 1px solid var(--ncbos-border); background: transparent; }
.ncbos-page h1 { font-size: 2.4rem; }
.ncbos-part { margin-top: 1.25rem; }
.ncbos-fields dt { font-weight: 400; font-size: 0.9rem; }
.ncbos-ingredients { padding-left: 1.2rem; margin: 0; }
.ncbos .form-text { color: var(--ncbos-muted); }
.ncbos .form-label { font-weight: 600; }
.ncbos legend { font-family: var(--ncbos-font-display); font-weight: 700; }
.ncbos-part-edit { border-top: 1px solid var(--ncbos-border); padding-top: 0.75rem; }
@media (max-width: 575.98px) {
    .ncbos { padding: 0.75rem; }
    .ncbos-page h1 { font-size: 1.9rem; }
}

/* A link drawn as a button keeps the button's colours: the general link
   rule above would otherwise win and draw the label in the accent. */
.ncbos a.ncbos-btn { color: var(--ncbos-on-accent); text-decoration: none; }
.ncbos a.ncbos-btn:hover, .ncbos a.ncbos-btn:focus { color: var(--ncbos-on-accent); }
.ncbos a.ncbos-btn-secondary, .ncbos a.ncbos-btn-secondary:hover, .ncbos a.ncbos-btn-secondary:focus { color: var(--ncbos-ink); }
.ncbos a.ncbos-btn-danger, .ncbos a.ncbos-btn-danger:hover, .ncbos a.ncbos-btn-danger:focus { color: var(--ncbos-danger); }
.ncbos a.ncbos-btn-quiet { color: var(--ncbos-accent); }
.ncbos a.ncbos-btn-quiet:hover, .ncbos a.ncbos-btn-quiet:focus { color: var(--ncbos-accent-hover); }

.ncbos-part-new summary { display: inline-block; list-style: none; }
.ncbos-part-new summary::-webkit-details-marker { display: none; }
.ncbos-part-new[open] summary { margin-bottom: 0.75rem; }

.ncbos-section { padding: 0.5rem 0; }
.ncbos-section + .ncbos-section { border-top: 1px solid var(--ncbos-border); }
.ncbos-section .ncbos-section { margin-left: 1.25rem; border-top: 0; }
.ncbos-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0.5rem; }

/* Profile: who sees an item, the look chooser, own colours. */
.ncbos-narrow { max-width: none; }
.ncbos-seen { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 0.25rem; color: var(--ncbos-muted); }
.ncbos-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; }
.ncbos-theme { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.75rem; border: 1px solid var(--ncbos-border); border-radius: 0.5rem; background: var(--ncbos-panel-alt); cursor: pointer; }
.ncbos-theme input { margin-top: 0.3rem; }
.ncbos-swatches { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-top: 0.35rem; }
.ncbos-swatch { display: inline-block; width: 1rem; height: 1rem; border: 1px solid var(--ncbos-field-border); border-radius: 2px; }
.ncbos-preview { padding: 0.75rem; border: 1px solid var(--ncbos-border); border-radius: 0.5rem; background: var(--ncbos-canvas); color: var(--ncbos-ink); }
.ncbos-preview-title { font-family: var(--ncbos-font-display); font-size: 1.25rem; margin: 0 0 0.5rem; color: var(--ncbos-ink); }
.ncbos-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.5rem 1rem; }
.ncbos-token { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 0.5rem; align-items: center; }
.ncbos-token input[type="color"] { width: 2.5rem; height: 2rem; padding: 0; border: 1px solid var(--ncbos-field-border); border-radius: 0.25rem; background: var(--ncbos-panel); }
.ncbos-token .form-text { grid-column: 2; margin-top: 0; }

.ncbos-token input[type="color"] { grid-row: span 2; align-self: start; }

/* Calendar: a list of the days with something on them on a phone, a
   seven-column month from 768 wide. */
.ncbos-month-head { display: none; }
.ncbos-month-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.ncbos-month-cell { padding: 0.5rem; border: 1px solid var(--ncbos-border); border-radius: 0.375rem; background: var(--ncbos-panel); min-width: 0; overflow-wrap: anywhere; }
.ncbos-month-cell.is-blank, .ncbos-month-cell.is-empty { display: none; }
.ncbos-month-cell.is-today { border: 2px solid var(--ncbos-accent); }
.ncbos-month-day { display: inline-block; font-weight: 600; margin-bottom: 0.25rem; }
.ncbos-month-cell ul { font-size: 0.875rem; }
.ncbos-cal-wheel, .ncbos-cal-groupwheel { font-weight: 600; color: var(--ncbos-ink); }
.ncbos-cal-moon, .ncbos-cal-eclipse { color: var(--ncbos-muted); }
.ncbos-cal-tied { font-style: italic; }
.ncbos-void { color: var(--ncbos-muted); }
.ncbos-table tr.is-now td { background: var(--ncbos-panel-alt); font-weight: 600; }
@media (min-width: 768px) {
    .ncbos-month-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; font-weight: 600; color: var(--ncbos-muted); margin-bottom: 0.25rem; }
    .ncbos-month-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
    .ncbos-month-cell { min-height: 6.5rem; }
    .ncbos-month-cell.is-empty { display: block; }
    .ncbos-month-cell.is-blank { display: block; visibility: hidden; }
    .ncbos-month-dow { display: none; }
}

/* Bootstrap's tables and the site template's headings and legends carry
   their own colours; inside ncbos they take ncbos's, so they follow the
   member's theme and its dark side. */
.ncbos .table {
    --bs-table-color: var(--ncbos-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ncbos-border);
    --bs-table-striped-color: var(--ncbos-ink);
    --bs-table-hover-color: var(--ncbos-ink);
    color: var(--ncbos-ink);
}
.ncbos h1, .ncbos h2, .ncbos h3, .ncbos h4, .ncbos h5, .ncbos h6,
.ncbos .h1, .ncbos .h2, .ncbos .h3, .ncbos .h4, .ncbos .h5, .ncbos .h6,
.ncbos legend { color: var(--ncbos-ink); }

/* JCE's Editor, Code and Preview tabs read Bootstrap-style variables;
   inside ncbos they are ncbos's colours. */
.ncbos .wf-editor-header {
    --nav-link-color: var(--ncbos-accent);
    --nav-tabs-link-active-color: var(--ncbos-ink);
    --nav-tabs-link-active-bg: var(--ncbos-panel);
    --nav-tabs-border-color: var(--ncbos-border);
    --nav-tabs-link-active-border-color: var(--ncbos-border);
    --nav-tabs-link-hover-border-color: var(--ncbos-border);
}

/* Ticks and choices keep their own size; their labels are the touch
   target. Legends sit above their fields, not beside them. */
.ncbos input[type="checkbox"], .ncbos input[type="radio"] { min-height: 0; width: 1.125rem; height: 1.125rem; padding: 0; flex: none; vertical-align: -0.2em; }
.ncbos input[type="radio"] { border-radius: 50%; }
.ncbos .form-check { padding-left: 1.75rem; min-height: 1.5rem; }
.ncbos .form-check .form-check-input { float: left; margin-left: -1.75rem; margin-top: 0.2rem; }
.ncbos legend { float: none; }

/* People and groups: a name with its actions on one wrapping line. */
.ncbos-row-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ncbos-border); min-width: 0; }
.ncbos-row-form:last-of-type { border-bottom: 0; }
.ncbos-row-form .form-select { width: auto; max-width: 100%; }
.ncbos-dl { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: 0.25rem 1rem; }
.ncbos-dl dt { font-weight: 600; }
.ncbos-dl dd { margin: 0; overflow-wrap: anywhere; }
.ncbos-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.ncbos-levels dt { font-weight: 600; margin-top: 0.25rem; }
.ncbos-levels dd { margin: 0; color: var(--ncbos-ink); }
.ncbos-ladder { padding-left: 0; }
.ncbos-ladder li { margin-bottom: 0.4rem; }
.ncbos-rich { overflow-wrap: anywhere; }

/* Talking: posts and messages, reactions, tabs and counts. */
.ncbos-words { margin: 0; }
.ncbos-word { padding: 0.6rem 0; border-bottom: 1px solid var(--ncbos-border); min-width: 0; }
.ncbos-word:last-child { border-bottom: 0; }
.ncbos-word-head { margin-bottom: 0.25rem; }
.ncbos-word-foot { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.35rem; }
.ncbos-react { font: inherit; font-size: 0.8125rem; color: var(--ncbos-accent); background: var(--ncbos-panel); border: 1px solid var(--ncbos-field-border); border-radius: 1rem; padding: 0.1rem 0.6rem; min-height: 0; cursor: pointer; }
.ncbos-react.is-on { background: var(--ncbos-panel-alt); border-color: var(--ncbos-accent); font-weight: 600; }
.ncbos-linkbtn { font: inherit; color: var(--ncbos-accent); background: none; border: 0; padding: 0; min-height: 0; text-decoration: underline; cursor: pointer; }
.ncbos-tabs { display: flex; flex-wrap: wrap; gap: 1rem; border-bottom: 1px solid var(--ncbos-border); }
.ncbos-tab { padding: 0.4rem 0; border-bottom: 3px solid transparent; text-decoration: none; }
.ncbos-tab[aria-current="page"] { border-bottom-color: var(--ncbos-accent); color: var(--ncbos-ink); font-weight: 600; }
.ncbos-count { display: inline-block; min-width: 1.4em; padding: 0 0.4em; border-radius: 1em; background: var(--ncbos-accent); color: var(--ncbos-on-accent); font-size: 0.75rem; font-weight: 600; text-align: center; line-height: 1.5; }
.ncbos .is-unread { font-weight: 600; }
.ncbos-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.25rem 1rem; }

/* The library: types as cards, entries in columns, properties with options. */
.ncbos-typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.75rem; }
.ncbos-typecard { text-decoration: none; display: block; }
.ncbos-entrylist { columns: 16rem auto; column-gap: 1.5rem; }
.ncbos-entrylist li { break-inside: avoid; margin-bottom: 0.35rem; }
.ncbos-flag { display: inline-block; margin-left: 0.35rem; padding: 0 0.4em; border: 1px solid var(--ncbos-caution); border-radius: 0.25rem; color: var(--ncbos-caution); font-size: 0.75rem; }
.ncbos-prop { padding: 0.5rem 0; border-bottom: 1px solid var(--ncbos-border); }
.ncbos-prop:last-of-type { border-bottom: 0; }
.ncbos-choose fieldset { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-bottom: 0.35rem; }
.ncbos-option { display: inline-flex; align-items: center; gap: 0.35rem; }
.ncbos-option.is-mine label { font-weight: 600; }

/* A path's steps: met ones ticked. */
.ncbos-steps { margin: 0; }
.ncbos-step { padding: 0.5rem 0 0.5rem 1.75rem; border-bottom: 1px solid var(--ncbos-border); position: relative; }
.ncbos-step::before { content: ""; position: absolute; left: 0.25rem; top: 0.85rem; width: 0.85rem; height: 0.85rem; border: 2px solid var(--ncbos-field-border); border-radius: 50%; }
.ncbos-step.is-met::before { background: var(--ncbos-success); border-color: var(--ncbos-success); }

/* Modules: the same tokens and links, rounded like the panels. A
   template styles links in its module positions (Helix Ultimate's
   .sp-module ul>li>a), so the frame's own links say so more strongly. */
.ncbos-mod { border-radius: var(--ncbos-radius); }
.ncbos.ncbos-mod a:not(.ncbos-btn) { color: var(--ncbos-accent); }
.ncbos.ncbos-mod a:not(.ncbos-btn):hover, .ncbos.ncbos-mod a:not(.ncbos-btn):focus { color: var(--ncbos-accent-hover); }

/* Member images: never wider than their place. */
.ncbos-image { max-width: 100%; height: auto; border-radius: var(--ncbos-radius); }
.ncbos-image-small { max-width: 12rem; }

/* Printing: a page or a whole book on paper. */
.ncbos-print { max-width: 48rem; margin: 0 auto; }
.ncbos-print-section { margin-top: 2rem; }
@media print {
    .ncbos-print-hide { display: none; }
    .ncbos-print { padding: 0; max-width: none; }
    .ncbos-print-page { break-before: page; }
    .ncbos-print a { text-decoration: none; }
}
.ncbos-cover { max-height: 20rem; width: auto; }

/* Pictures in members' words (D43 to D47): sizes and placement chosen in
   the picture window, never wider than the text. */
.ncbos .ncbos-pic { margin: 0 0 var(--ncbos-space); max-width: 100%; }
.ncbos .ncbos-pic img { display: block; max-width: 100%; height: auto; border-radius: var(--ncbos-radius); }
.ncbos .ncbos-pic figcaption { color: var(--ncbos-muted); font-size: .9em; margin-top: .25rem; }
.ncbos .ncbos-pic-small { width: 33%; }
.ncbos .ncbos-pic-medium { width: 60%; }
.ncbos .ncbos-pic-full { width: 100%; }
.ncbos .ncbos-pic-block { margin-left: auto; margin-right: auto; }
.ncbos .ncbos-pic-left { float: left; margin-right: var(--ncbos-space); }
.ncbos .ncbos-pic-right { float: right; margin-left: var(--ncbos-space); }
.ncbos .ncbos-rich::after { content: ""; display: table; clear: both; }
@media (max-width: 575.98px) {
    .ncbos .ncbos-pic-small, .ncbos .ncbos-pic-medium { width: 100%; }
    .ncbos .ncbos-pic-left, .ncbos .ncbos-pic-right { float: none; margin-left: 0; margin-right: 0; }
}

/* The picture window and My pictures. */
.ncbos-pic-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.ncbos-pic-choice, .ncbos-pic-card { display: flex; flex-direction: column; gap: .25rem; width: 100%; padding: .4rem; text-align: left;
    background: var(--ncbos-panel); color: var(--ncbos-ink); border: 1px solid var(--ncbos-border); border-radius: var(--ncbos-radius); }
.ncbos-pic-choice img, .ncbos-pic-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ncbos-radius); }
.ncbos-pic-choice[aria-pressed="true"] { outline: 3px solid var(--ncbos-focus); outline-offset: 1px; }
.ncbos-badge { align-self: flex-start; padding: 0 .4rem; border-radius: var(--ncbos-radius); background: var(--ncbos-panel-alt); color: var(--ncbos-ink); font-size: .85em; }

/* Credits for library pictures, once at the foot of what shows them (D46). */
.ncbos-credits { border-top: 1px solid var(--ncbos-border); margin-top: var(--ncbos-space); padding-top: .5rem; color: var(--ncbos-muted); font-size: .9em; }
.ncbos-credits ul { margin: 0; padding-left: 1.2rem; }
.ncbos-pic-grid-wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* The moon glyph: the dark disc, the lit part, a rim, all from tokens. */
.ncbos-moon { display: inline-block; vertical-align: middle; flex: none; }
.ncbos-moon-dark { fill: var(--ncbos-panel); }
.ncbos-moon-lit { fill: var(--ncbos-gold); }
.ncbos-moon-rim { fill: none; stroke: var(--ncbos-gold); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }

/* Home: the sky tonight as the one place for the display size. */
.ncbos-sky { display: flex; gap: var(--ncbos-sp-5); align-items: center; padding: var(--ncbos-sp-5); background: var(--ncbos-panel-alt); border-radius: var(--ncbos-r-lg); }
.ncbos-sky-text { min-width: 0; }
.ncbos-sky h2.ncbos-eyebrow { font-family: var(--ncbos-font-body); font-size: var(--ncbos-fs-xs); margin: 0; color: var(--ncbos-ink); }
.ncbos-sky-phase { font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-display); font-weight: 600; line-height: 1.1; margin: var(--ncbos-sp-1) 0; }
.ncbos-sky-line { margin: 0; color: var(--ncbos-ink); }
.ncbos-sky-next { margin: var(--ncbos-sp-2) 0 0; font-weight: 600; }
.ncbos-sky-next .fa-solid { color: var(--ncbos-gold); }
@media (max-width: 575.98px) { .ncbos-sky { flex-direction: column; align-items: flex-start; gap: var(--ncbos-sp-3); } .ncbos-sky-phase { font-size: var(--ncbos-fs-xl); } }

/* A date badge leading a row: month above day. */
.ncbos-date { flex: none; width: 3rem; text-align: center; border: 1px solid var(--ncbos-border); border-radius: var(--ncbos-r-md); background: var(--ncbos-panel); line-height: 1.1; padding: var(--ncbos-sp-1) 0; }
.ncbos-date span { display: block; font-size: var(--ncbos-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ncbos-muted); }
.ncbos-date strong { display: block; font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-md); }
.ncbos-row-title .fa-solid { color: var(--ncbos-gold); }

/* Setup steps: a progress line, done steps ticked, never struck through. */
.ncbos-progress { width: 100%; height: 0.5rem; margin: var(--ncbos-sp-2) 0 var(--ncbos-sp-3); appearance: none; border: 0; border-radius: 999px; background: var(--ncbos-panel-alt); overflow: hidden; }
.ncbos-progress::-webkit-progress-bar { background: var(--ncbos-panel-alt); border-radius: 999px; }
.ncbos-progress::-webkit-progress-value { background: var(--ncbos-success); border-radius: 999px; }
.ncbos-progress::-moz-progress-bar { background: var(--ncbos-success); border-radius: 999px; }

/* Filters: labelled fields in one bar, rare ones behind a disclosure,
   those in use as chips that take themselves away. */
.ncbos-filters { padding: var(--ncbos-sp-4); background: var(--ncbos-panel-alt); border-radius: var(--ncbos-r-lg); }
.ncbos-filters-row { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-3) var(--ncbos-sp-4); align-items: flex-end; }
.ncbos-filters-row > div { flex: 1 1 10rem; min-width: 0; }
.ncbos-filters-row > div:last-child:has(button) { flex: 0 0 auto; }
.ncbos .ncbos-filters .ncbos-filter-q, .ncbos .ncbos-filter-q { flex-basis: 16rem; }
.ncbos-disclosure { margin-top: var(--ncbos-sp-3); }
.ncbos-disclosure > summary { cursor: pointer; color: var(--ncbos-accent); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: var(--ncbos-sp-2); }
.ncbos-chip-x { text-decoration: none; color: var(--ncbos-ink); }
.ncbos-chip-x:hover, .ncbos-chip-x:focus { background: var(--ncbos-border); color: var(--ncbos-ink); }

/* A detail screen's side column: small headings, blocks apart. */
.ncbos-aside > * + * { margin-top: var(--ncbos-sp-6); }
.ncbos-aside-h, .ncbos .ncbos-aside-h { font-family: var(--ncbos-font-body); font-size: var(--ncbos-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ncbos-muted); margin: 0 0 var(--ncbos-sp-2); }
.ncbos-aside .ncbos-summary > div { grid-template-columns: 1fr; gap: 0; }
.ncbos-part { margin-top: var(--ncbos-sp-6); }
.ncbos-part:first-child { margin-top: 0; }
.ncbos-text-danger, .ncbos .ncbos-text-danger { color: var(--ncbos-danger); }

/* Fields read at body size, whatever size the template sets. */
.ncbos .form-control, .ncbos .form-select { font-size: var(--ncbos-fs-base); min-height: 44px; }
.ncbos .form-text { font-size: var(--ncbos-fs-sm); }

/* Books as covers, 2:3; a drawn spine when there is no picture. */
.ncbos-cards-books { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.ncbos-book-card { padding: var(--ncbos-sp-4); }
.ncbos-book-cover { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--ncbos-r-md); margin-bottom: var(--ncbos-sp-2); }
.ncbos-book-cover-drawn { display: grid; place-items: center; padding: var(--ncbos-sp-5); background: var(--ncbos-panel-alt); border: 1px solid var(--ncbos-border); border-left: 10px solid var(--ncbos-accent); box-shadow: inset 0 0 0 6px var(--ncbos-panel-alt), inset 0 0 0 7px var(--ncbos-gold); text-align: center; }
.ncbos-book-cover-drawn span { font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-md); font-weight: 700; line-height: 1.2; color: var(--ncbos-ink); }
.ncbos-clamp { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ncbos-section-block + .ncbos-section-block { margin-top: var(--ncbos-sp-6); }

/* A book's contents: sections as an outline, pages as rows. */
.ncbos-section { margin-top: var(--ncbos-sp-5); }
.ncbos-section-head { display: flex; align-items: baseline; gap: var(--ncbos-sp-3); border-bottom: 1px solid var(--ncbos-border); padding-bottom: var(--ncbos-sp-2); }
.ncbos .ncbos-section-title { font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-md); font-weight: 700; margin: 0 auto 0 0; }
.ncbos .ncbos-depth-1 .ncbos-section-title, .ncbos .ncbos-depth-2 .ncbos-section-title, .ncbos .ncbos-depth-3 .ncbos-section-title { font-family: var(--ncbos-font-body); font-size: var(--ncbos-fs-base); font-weight: 600; }
.ncbos-depth-1, .ncbos-depth-2, .ncbos-depth-3 { margin-left: var(--ncbos-sp-4); }
.ncbos-index { list-style: none; margin: 0; padding: 0; columns: 2 10rem; column-gap: var(--ncbos-sp-4); }
.ncbos-index li { break-inside: avoid; padding: var(--ncbos-sp-1) 0; }
.ncbos-book-front { max-width: var(--ncbos-measure); margin-bottom: var(--ncbos-sp-6); }
.ncbos-book-front .ncbos-front + .ncbos-front { margin-top: var(--ncbos-sp-5); }
.ncbos-aside > .ncbos-book-cover { max-width: 14rem; }
.ncbos-form-narrow { max-width: none; }

/* Library: a labelled search, types as icon cards, entries as rows. */
.ncbos-search { margin-bottom: var(--ncbos-sp-6); }
.ncbos-search-row { display: flex; gap: var(--ncbos-sp-2); }
.ncbos-search-row .form-control { flex: 1 1 auto; }
.ncbos-cards-types { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.ncbos-card-row { flex-direction: row; align-items: center; gap: var(--ncbos-sp-4); padding: var(--ncbos-sp-4); }
.ncbos-row-chips { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-1); margin-left: auto; align-self: center; }
.ncbos-chip-caution { color: var(--ncbos-caution); }

/* Library entry: properties as a summary list, choices as radio chips. */
.ncbos-measure { max-width: var(--ncbos-measure); }
.ncbos-props .ncbos-prop { padding: var(--ncbos-sp-3) 0; border-bottom: 1px solid var(--ncbos-border); }
.ncbos-choose fieldset { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-2); margin: 0; }
.ncbos-option { position: relative; display: inline-flex; }
.ncbos-option-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ncbos-option label { display: inline-flex; align-items: center; gap: var(--ncbos-sp-1); min-height: 36px; padding: var(--ncbos-sp-1) var(--ncbos-sp-3); border: 1px solid var(--ncbos-field-border); border-radius: var(--ncbos-r-pill); background: var(--ncbos-panel); color: var(--ncbos-ink); cursor: pointer; font-weight: 400; }
.ncbos-option label:hover { background: var(--ncbos-panel-alt); }
.ncbos-option-input:focus-visible + label { outline: 3px solid var(--ncbos-focus); outline-offset: 2px; }
.ncbos-option-input:checked + label, .ncbos-option.is-mine label { border: 2px solid var(--ncbos-accent); background: var(--ncbos-panel-alt); font-weight: 600; }
.ncbos-option-input:checked + label::before { content: "\2713"; color: var(--ncbos-accent); }
.ncbos-option-note { color: var(--ncbos-muted); font-size: var(--ncbos-fs-sm); }
.ncbos-choose-actions { display: flex; gap: var(--ncbos-sp-2); margin-top: var(--ncbos-sp-1); }
.ncbos-choose-live .ncbos-choose-submit { display: none; }
.ncbos-own summary { color: var(--ncbos-accent); cursor: pointer; font-size: var(--ncbos-fs-sm); margin-top: var(--ncbos-sp-1); }
.ncbos .ncbos-aside-sub, .ncbos-aside-sub { font-family: var(--ncbos-font-body); font-size: var(--ncbos-fs-sm); font-weight: 600; margin: var(--ncbos-sp-3) 0 var(--ncbos-sp-1); }
.ncbos-linkchips { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-1); margin: 0; }
.ncbos a.ncbos-chip-link { color: var(--ncbos-ink); text-decoration: none; }
.ncbos a.ncbos-chip-link:hover, .ncbos a.ncbos-chip-link:focus { color: var(--ncbos-accent); text-decoration: underline; }

/* Calendar: month bar, glyphs on entries, today and festival days. */
.ncbos-monthbar { display: flex; align-items: center; gap: var(--ncbos-sp-2); margin-bottom: var(--ncbos-sp-4); flex-wrap: wrap; }
.ncbos .ncbos-monthbar-title { font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-lg); font-weight: 700; margin: 0 var(--ncbos-sp-2); min-width: 9ch; text-align: center; font-variant-numeric: tabular-nums; }
.ncbos-btn-icon { width: 44px; padding: 0; justify-content: center; }
.ncbos-month-cell { padding: var(--ncbos-sp-2); border-radius: var(--ncbos-r-md); }
.ncbos-month-cell.is-today { background: var(--ncbos-panel-alt); }
.ncbos-month-cell.is-today .ncbos-month-num { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--ncbos-accent); color: var(--ncbos-on-accent); }
.ncbos-month-day { font-variant-numeric: tabular-nums; text-decoration: none; }
.ncbos-month-items { list-style: none; margin: 0; padding: 0; font-size: var(--ncbos-fs-sm); line-height: 1.35; }
.ncbos-month-items li { display: flex; gap: var(--ncbos-sp-1); align-items: flex-start; margin-top: var(--ncbos-sp-1); }
.ncbos-cal-mark { flex: none; width: 1.1rem; display: inline-flex; justify-content: center; padding-top: 0.15em; color: var(--ncbos-gold); }
.ncbos-cal-wheel span:last-child { font-weight: 700; }
.ncbos-legend { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-2) var(--ncbos-sp-5); list-style: none; padding: 0; margin: var(--ncbos-sp-4) 0 0; color: var(--ncbos-muted); font-size: var(--ncbos-fs-sm); }
.ncbos-legend li { display: inline-flex; align-items: center; gap: var(--ncbos-sp-1); }
.ncbos-legend .fa-solid, .ncbos-legend svg { color: var(--ncbos-gold); }

/* Day: the phase large in the sky band, the current planetary hour. */
.ncbos .ncbos-day-phase { font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-xl); font-weight: 600; line-height: 1.15; margin: var(--ncbos-sp-1) 0 0; }
.ncbos-now { display: inline-flex; align-items: center; gap: var(--ncbos-sp-2); padding: var(--ncbos-sp-2) var(--ncbos-sp-4); border-radius: 999px; background: var(--ncbos-panel-alt); font-weight: 600; }
.ncbos-hours { font-variant-numeric: tabular-nums; }
.ncbos-hours tr.is-now td { background: var(--ncbos-panel-alt); font-weight: 700; }

/* Wheel of the year: the year as a circle, days as dated rows. */
.ncbos-wheel { margin: 0; }
.ncbos-wheel svg { width: 100%; max-width: 30rem; height: auto; display: block; margin: 0 auto; overflow: visible; }
.ncbos-wheel-ring { fill: var(--ncbos-panel); stroke: var(--ncbos-field-border); stroke-width: 1.5; }
.ncbos-wheel-tick { stroke: var(--ncbos-field-border); stroke-width: 1; }
.ncbos-wheel-month { fill: var(--ncbos-muted); font-size: 11px; font-family: var(--ncbos-font-body); }
.ncbos-wheel-day { fill: var(--ncbos-gold); stroke: var(--ncbos-panel); stroke-width: 1.5; }
.ncbos-wheel-label { fill: var(--ncbos-ink); font-size: 12px; font-weight: 600; font-family: var(--ncbos-font-body); }
.ncbos-wheel-hand { stroke: var(--ncbos-accent); stroke-width: 1.5; }
.ncbos-wheel-today { fill: var(--ncbos-accent); stroke: var(--ncbos-panel); stroke-width: 2; }
.ncbos-wheel-hub { fill: var(--ncbos-accent); }
.ncbos-wheel figcaption { text-align: center; margin-top: var(--ncbos-sp-2); font-size: var(--ncbos-fs-sm); }
.ncbos-datebadge { flex: none; width: 3rem; min-height: 3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--ncbos-r-md); background: var(--ncbos-panel-alt); color: var(--ncbos-ink); line-height: 1.05; }
.ncbos-datebadge-m { font-size: var(--ncbos-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ncbos-ink); }
.ncbos-datebadge-d { font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.ncbos-wheel-days .is-off .ncbos-row-title { color: var(--ncbos-muted); }

.ncbos-wheel-layout { display: grid; gap: var(--ncbos-sp-6); }
.ncbos-wheel { padding: var(--ncbos-sp-5) var(--ncbos-sp-7); }
@media (max-width: 575.98px) { .ncbos-wheel { padding: var(--ncbos-sp-4) var(--ncbos-sp-6); } }
.ncbos-month-items li { overflow-wrap: normal; word-break: normal; hyphens: auto; }

/* Page form: sections with a list to jump between them, a save bar. */
html:has(.ncbos-savebar) { scroll-padding-bottom: 6rem; }
.ncbos-formlayout { display: grid; gap: var(--ncbos-sp-6); }
@media (min-width: 992px) { .ncbos-formlayout { grid-template-columns: 12rem minmax(0, 1fr); } .ncbos-formnav { position: sticky; top: var(--ncbos-sp-5); align-self: start; } }
@media (max-width: 991.98px) { .ncbos-formnav { display: none; } }
.ncbos-formnav ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ncbos-border); }
.ncbos-formnav li a { display: block; padding: var(--ncbos-sp-1) var(--ncbos-sp-3); color: var(--ncbos-ink); text-decoration: none; font-size: var(--ncbos-fs-sm); }
.ncbos-formnav li a:hover, .ncbos-formnav li a:focus { color: var(--ncbos-accent); text-decoration: underline; }
.ncbos-formsection { border: 0; margin: 0 0 var(--ncbos-sp-6); padding: 0 0 var(--ncbos-sp-6); border-bottom: 1px solid var(--ncbos-border); min-width: 0; }
.ncbos .ncbos-formsection > legend { float: none; width: auto; font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-lg); font-weight: 700; margin-bottom: var(--ncbos-sp-3); }
.ncbos-card-links { list-style: none; margin: var(--ncbos-sp-2) 0 0; padding: 0; position: relative; z-index: 1; }
.ncbos-card-links li + li { margin-top: var(--ncbos-sp-1); }
.ncbos-card-sublink { display: inline-flex; gap: var(--ncbos-sp-1); align-items: baseline; font-size: var(--ncbos-fs-sm); }

/* People: initials avatars, a row's own small menu, counts. */
.ncbos-avatar { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 999px; background: var(--ncbos-panel-alt); color: var(--ncbos-ink); font-weight: 600; font-size: var(--ncbos-fs-sm); letter-spacing: 0.02em; }
.ncbos-row-actions { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-2); align-items: center; margin-left: auto; }
.ncbos-inline-form { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-2); align-items: center; }
.ncbos-inline-form .form-select { width: auto; }
.ncbos-rowmenu { position: relative; margin-left: auto; }
.ncbos-rowmenu > summary { list-style: none; }
.ncbos-rowmenu > summary::-webkit-details-marker { display: none; }
.ncbos-rowmenu-panel { position: absolute; right: 0; z-index: 20; min-width: 18rem; margin-top: var(--ncbos-sp-1); padding: var(--ncbos-sp-4); background: var(--ncbos-panel); border: 1px solid var(--ncbos-border); border-radius: var(--ncbos-r-lg); box-shadow: 0 4px 12px var(--ncbos-shadow); }
.ncbos-rowmenu-panel .ncbos-inline-form { flex-direction: column; align-items: stretch; }
.ncbos-rowmenu-panel .form-select { width: 100%; }
.ncbos-count { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.4rem; border-radius: 999px; background: var(--ncbos-accent); color: var(--ncbos-on-accent); font-family: var(--ncbos-font-body); font-size: var(--ncbos-fs-sm); font-weight: 600; vertical-align: middle; }

/* Group: a heading with its own small action, the activity feed. */
.ncbos-section-headrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ncbos-sp-2); }
.ncbos-feed { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ncbos-border); }
.ncbos-feed li { padding: var(--ncbos-sp-1) 0 var(--ncbos-sp-1) var(--ncbos-sp-4); font-size: var(--ncbos-fs-sm); }

.ncbos-card-headline { display: flex; gap: var(--ncbos-sp-3); align-items: center; }
.ncbos-card-action { position: relative; z-index: 1; margin-top: var(--ncbos-sp-2); padding-top: var(--ncbos-sp-3); border-top: 1px solid var(--ncbos-border); }

/* Inbox: unread rows tinted with a dot, a segmented filter. */
.ncbos-row.is-unread { box-shadow: inset 4px 0 0 var(--ncbos-accent); padding-left: var(--ncbos-sp-3); }
.ncbos-row.is-unread .ncbos-row-title { font-weight: 700; }
.ncbos-dot { display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: var(--ncbos-sp-2); border-radius: 999px; background: var(--ncbos-accent); vertical-align: middle; }
.ncbos-toolbar { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-3); align-items: center; justify-content: space-between; margin-bottom: var(--ncbos-sp-3); }
.ncbos-segmented { display: inline-flex; border: 1px solid var(--ncbos-field-border); border-radius: var(--ncbos-r-md); overflow: hidden; }
.ncbos a.ncbos-segment { padding: var(--ncbos-sp-2) var(--ncbos-sp-4); color: var(--ncbos-ink); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.ncbos a.ncbos-segment + .ncbos-segment { border-left: 1px solid var(--ncbos-field-border); }
.ncbos a.ncbos-segment[aria-current] { background: var(--ncbos-panel-alt); font-weight: 600; box-shadow: inset 0 -3px 0 var(--ncbos-accent); }

/* Profile: who-sees-it chips under fields, usage meters. */
.ncbos-seen { margin: calc(-1 * var(--ncbos-sp-2)) 0 var(--ncbos-sp-4); }
.ncbos .ncbos-formsection-h { font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-lg); font-weight: 700; margin-bottom: var(--ncbos-sp-3); }
.ncbos-meter { display: block; width: 100%; max-width: 12rem; height: 0.5rem; margin-top: var(--ncbos-sp-1); accent-color: var(--ncbos-accent); }

/* Posts and comments as a thread: avatar column, a continuous rule. */
.ncbos-word { display: flex; gap: var(--ncbos-sp-3); padding: var(--ncbos-sp-4) 0; }
.ncbos-word-main { flex: 1 1 auto; min-width: 0; }
.ncbos-word-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ncbos-sp-2); margin-bottom: var(--ncbos-sp-1); }
.ncbos-word-when { color: var(--ncbos-muted); font-size: var(--ncbos-fs-sm); }
.ncbos-word .ncbos-prewrap { max-width: var(--ncbos-measure); }
.ncbos-word-foot { gap: var(--ncbos-sp-2); margin-top: var(--ncbos-sp-2); }
.ncbos-react { font-size: var(--ncbos-fs-sm); padding: var(--ncbos-sp-1) var(--ncbos-sp-3); min-height: 32px; border-radius: 999px; transition: background-color 120ms; }
.ncbos-word-tool { font-size: var(--ncbos-fs-sm); }
.ncbos-thread-composer { margin-top: var(--ncbos-sp-5); padding-top: var(--ncbos-sp-5); border-top: 1px solid var(--ncbos-border); }
@media (prefers-reduced-motion: reduce) { :root .ncbos *, :root .ncbos *::before, :root .ncbos *::after { transition: none; animation: none; } }

/* Key and value lists read as a summary: muted keys, rules between. */
.ncbos-dl { gap: 0; }
.ncbos-dl dt, .ncbos-dl dd { padding: var(--ncbos-sp-2) 0; border-bottom: 1px solid var(--ncbos-border); }
.ncbos-dl dt { font-weight: 600; color: var(--ncbos-muted); font-size: var(--ncbos-fs-sm); padding-right: var(--ncbos-sp-4); }

/* Screens not yet given Shell::header() (the member forms, moderation,
   tiers, sharing): their back link reads as a breadcrumb, their title
   sits on the header's rule, and a form panel is one readable column. */
.ncbos > p.mb-1:first-child > a[data-ncbos="back"], .ncbos > p > a[data-ncbos="back"] { font-size: var(--ncbos-fs-sm); color: var(--ncbos-muted); text-decoration: none; }
.ncbos > p.mb-1:first-child > a[data-ncbos="back"]::before, .ncbos > p > a[data-ncbos="back"]::before { content: "\2039\00a0"; }
.ncbos > p > a[data-ncbos="back"]:hover, .ncbos > p > a[data-ncbos="back"]:focus { color: var(--ncbos-accent); text-decoration: underline; }
.ncbos > h1 { padding-bottom: var(--ncbos-sp-4); margin-bottom: var(--ncbos-sp-5); border-bottom: 1px solid var(--ncbos-border); }
.ncbos > form.ncbos-form.ncbos-panel, .ncbos > .ncbos-form.ncbos-panel { max-width: none; background: transparent; border: 0; box-shadow: none; padding: 0; }

/* The mark chooser: symbol and picture sets show for their choice. */
.ncbos-mark-choice { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-2); margin-bottom: var(--ncbos-sp-3); }
.ncbos-mark-set { display: none; border: 0; padding: 0; margin: 0 0 var(--ncbos-sp-3); }
.ncbos-mark-choice:has(input[value="symbol"]:checked) ~ [data-ncbos-mark="symbol"], .ncbos-mark-choice:has(input[value="picture"]:checked) ~ [data-ncbos-mark="picture"] { display: block; }
.ncbos-symbols { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-2); }
.ncbos-symbol { position: relative; }
.ncbos-symbol label { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--ncbos-field-border); border-radius: 999px; background: var(--ncbos-panel); color: var(--ncbos-gold); font-size: 1.25rem; cursor: pointer; overflow: hidden; }
.ncbos-symbol-pic label { width: 64px; height: 64px; }
.ncbos-symbol-pic img { width: 100%; height: 100%; object-fit: cover; }
.ncbos-symbol .ncbos-option-input:checked + label { border: 3px solid var(--ncbos-accent); }
.ncbos-symbol .ncbos-option-input:focus-visible + label { outline: 3px solid var(--ncbos-focus); outline-offset: 2px; }
/* A member's mark beside their name: a symbol or their picture. */
.ncbos-avatar .fa-solid { color: var(--ncbos-gold); }
.ncbos-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.ncbos-avatar { overflow: hidden; }

/* Text size (D60): the member's choice scales every size token. */
:root .ncbos[data-text-size="larger"] { --ncbos-fs-xs: 1rem; --ncbos-fs-sm: 1.125rem; --ncbos-fs-base: 1.25rem; --ncbos-fs-md: 1.5rem; --ncbos-fs-lg: 2rem; --ncbos-fs-xl: 2.5rem; --ncbos-fs-display: 3.25rem; }
:root .ncbos[data-text-size="largest"] { --ncbos-fs-xs: 1.125rem; --ncbos-fs-sm: 1.25rem; --ncbos-fs-base: 1.375rem; --ncbos-fs-md: 1.625rem; --ncbos-fs-lg: 2.125rem; --ncbos-fs-xl: 2.75rem; --ncbos-fs-display: 3.5rem; }
/* Soft shadows off (D61): the shadow colour goes, the outlines stay. */
:root .ncbos[data-shadows="off"] { --ncbos-shadow: transparent; }

/* Quick entry (research/ux/quick-entry.md): the window and its page. */
.ncbos-quick-dialog .iframe-content { width: 100%; min-height: 70vh; border: 0; }
.ncbos-window .ncbos-quick { padding: var(--ncbos-sp-4); }
.ncbos-seen-line { display: flex; gap: var(--ncbos-sp-2); align-items: center; color: var(--ncbos-ink); font-size: var(--ncbos-fs-sm); }
.ncbos-quick-ask { margin-top: var(--ncbos-sp-4); padding: var(--ncbos-sp-4); border: 1px solid var(--ncbos-field-border); border-radius: var(--ncbos-r-lg); background: var(--ncbos-panel); display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-2); align-items: center; }
.ncbos-quick-ask[hidden] { display: none; }
.ncbos-quick-ask p { flex: 1 0 100%; margin: 0 0 var(--ncbos-sp-2); }
.ncbos-quick-saved { padding: var(--ncbos-sp-5); }
.ncbos .ncbos-quick-saved-h { display: flex; gap: var(--ncbos-sp-2); align-items: center; font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-lg); font-weight: 700; margin: 0 0 var(--ncbos-sp-2); }
.ncbos-quick-saved-h .fa-solid { color: var(--ncbos-success); }
.ncbos-quickrow { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-2); list-style: none; padding: 0; margin: 0; }
.ncbos-quickrow a { display: inline-flex; align-items: center; gap: var(--ncbos-sp-2); min-height: 44px; padding: var(--ncbos-sp-2) var(--ncbos-sp-4); border: 1px solid var(--ncbos-field-border); border-radius: 999px; background: var(--ncbos-panel); color: var(--ncbos-ink); text-decoration: none; font-weight: 600; }
.ncbos-quickrow a:hover, .ncbos-quickrow a:focus { border-color: var(--ncbos-accent); color: var(--ncbos-accent); }
.ncbos-quickrow .fa-solid { color: var(--ncbos-gold); }

/* Home (D65): Tonight beside a small year wheel. */
.ncbos-skyrow { display: grid; gap: var(--ncbos-sp-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .ncbos-skyrow { grid-template-columns: minmax(0, 1fr) 13rem; align-items: stretch; } }
.ncbos-skywheel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ncbos-sp-1); padding: var(--ncbos-sp-3); border-radius: var(--ncbos-r-lg); background: var(--ncbos-panel-alt); text-decoration: none; }
.ncbos-skywheel svg { width: 100%; max-width: 11rem; height: auto; }
.ncbos .ncbos-skywheel-label { color: var(--ncbos-ink); font-weight: 600; font-size: var(--ncbos-fs-sm); }
.ncbos-skywheel:hover .ncbos-skywheel-label, .ncbos-skywheel:focus .ncbos-skywheel-label { color: var(--ncbos-accent); text-decoration: underline; }

/* The menu module's group headings (D53). */
.ncbos-menu-heading > span { display: block; padding: var(--ncbos-sp-3) 0 var(--ncbos-sp-1); font-size: var(--ncbos-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ncbos-ink); }

/* Library: written values that all apply, as a list. */
.ncbos-valuelist { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-1) var(--ncbos-sp-2); list-style: none; margin: 0; padding: 0; }
.ncbos-valuelist li { padding: var(--ncbos-sp-1) var(--ncbos-sp-3); border-radius: 999px; background: var(--ncbos-panel-alt); color: var(--ncbos-ink); }
.ncbos-valuelist .ncbos-option-note { color: var(--ncbos-ink); font-style: italic; }

/* The look-up window (peek.js): the page without its breadcrumb, its
   own way out at the foot. */
.ncbos-peek-dialog .iframe-content { width: 100%; min-height: 75vh; border: 0; }
.ncbos-peek .ncbos-crumbs { display: none; }
.ncbos-peek-foot { margin: var(--ncbos-sp-5) 0 0; padding-top: var(--ncbos-sp-3); border-top: 1px solid var(--ncbos-border); }
.ncbos-peek-foot a { display: inline-flex; gap: var(--ncbos-sp-2); align-items: center; }

/* A celebration's sections (decision 75): lists with room to read. */
.ncbos-celebration-list { padding-left: 1.25rem; }
.ncbos-celebration-list li { margin-bottom: var(--ncbos-sp-2); }
.ncbos-sources ul { padding-left: 1.25rem; color: var(--ncbos-ink); }

/* Joomla's tab element (the celebration page's sections), in the site's
   colours: a quiet row of tabs on a rule, the open one marked in the
   accent, wrapping onto a second line rather than hiding a tab; on a
   phone, a stack of the same buttons. Each rule one step stronger than
   joomla-tab.css's own, which loads after this file. */
:root .ncbos joomla-tab[view="tabs"] > div[role="tablist"] { background: transparent; border: 0; border-bottom: 1px solid var(--ncbos-border); border-radius: 0; box-shadow: none; gap: var(--ncbos-sp-1); flex-wrap: wrap; white-space: normal; overflow: visible; }
:root .ncbos joomla-tab button[role="tab"], :root .ncbos joomla-tab[view="accordion"] > button { min-height: 44px; padding: var(--ncbos-sp-2) var(--ncbos-sp-4); background: transparent; background-image: none;
    color: var(--ncbos-ink); font: inherit; font-weight: 600; box-shadow: none; border: 0; }
:root .ncbos joomla-tab button[role="tab"][aria-selected="true"], :root .ncbos joomla-tab button[aria-expanded="true"] { background: var(--ncbos-panel); background-image: none; color: var(--ncbos-accent); box-shadow: none; }
:root .ncbos joomla-tab button[aria-expanded="true"]:after, :root .ncbos joomla-tab button[aria-selected="true"]:after { background-color: var(--ncbos-accent); height: 3px; opacity: 1; }
:root .ncbos joomla-tab button[role="tab"]:hover, :root .ncbos joomla-tab button[role="tab"]:focus-visible { color: var(--ncbos-accent); }
:root .ncbos joomla-tab > joomla-tab-element, :root .ncbos joomla-tab[view="accordion"] joomla-tab-element { background: transparent; border: 0; box-shadow: none; padding: var(--ncbos-sp-5) 0 0; }
:root .ncbos joomla-tab[view="accordion"] > button { width: 100%; text-align: left; border-bottom: 1px solid var(--ncbos-border); }
:root .ncbos joomla-tab[view="accordion"] > button[aria-expanded="true"], :root .ncbos joomla-tab[view="accordion"] > button:focus { background: var(--ncbos-panel); background-image: none; box-shadow: inset 3px 0 0 var(--ncbos-accent); }
:root .ncbos joomla-tab[view="accordion"] joomla-tab-element { border-left: 0; padding-top: var(--ncbos-sp-3); }

/* The landing page (D85): the closed book that opens on a real page,
   tonight's moon, what the book keeps, privacy as how it is built. Every
   colour a token; the sizes follow the page, never a width of mine. */
.ncbos-welcome { display: grid; gap: var(--ncbos-sp-7); }
.ncbos-wl-hero { display: grid; gap: var(--ncbos-sp-6); align-items: center; padding: var(--ncbos-sp-6) 0; }
@media (min-width: 992px) { .ncbos-wl-hero { grid-template-columns: 1.1fr 1fr; } }
.ncbos .ncbos-wl-hero h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.05; margin: var(--ncbos-sp-2) 0 var(--ncbos-sp-4); }
.ncbos-wl-lead { font-size: var(--ncbos-fs-md); line-height: 1.55; color: var(--ncbos-ink); }
@media (min-width: 768px) { .ncbos-wl-lead { font-size: var(--ncbos-fs-lg); } }
.ncbos-wl-phases { display: flex; gap: var(--ncbos-sp-2); margin-bottom: var(--ncbos-sp-3); }
.ncbos-wl-actions { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-3); margin-top: var(--ncbos-sp-4); }
.ncbos-btn-lg { font-size: var(--ncbos-fs-md); padding: var(--ncbos-sp-3) var(--ncbos-sp-5); }
.ncbos-wl-free { color: var(--ncbos-muted); margin-top: var(--ncbos-sp-3); }

.ncbos-wl-book { margin: 0; perspective: 1600px; display: grid; justify-items: center; }
.ncbos-wl-book-inner { position: relative; width: min(100%, 30rem); min-height: 22rem; display: grid; }
.ncbos-wl-cover { position: absolute; inset: 0; }
.ncbos-wl-leaf, .ncbos-wl-cover { border-radius: var(--ncbos-r-md) var(--ncbos-r-lg) var(--ncbos-r-lg) var(--ncbos-r-md); }
.ncbos-wl-leaf { background: var(--ncbos-panel); border: 1px solid var(--ncbos-border); box-shadow: var(--ncbos-shadow); padding: var(--ncbos-sp-6) var(--ncbos-sp-5); display: flex; flex-direction: column; gap: var(--ncbos-sp-3); color: var(--ncbos-ink); }
.ncbos-wl-leaf-kind { color: var(--ncbos-gold); font-size: var(--ncbos-fs-xs); letter-spacing: .12em; text-transform: uppercase; margin: 0; font-weight: 700; }
.ncbos-wl-leaf-title { font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-xl); line-height: 1.15; margin: 0; }
.ncbos-wl-leaf-moon { display: flex; align-items: center; gap: var(--ncbos-sp-2); margin: 0; color: var(--ncbos-ink); border-bottom: 1px solid var(--ncbos-border); padding-bottom: var(--ncbos-sp-3); }
.ncbos-wl-leaf-lines { margin: 0; padding-left: 1.2em; display: grid; gap: var(--ncbos-sp-2); }
.ncbos-wl-leaf-seen { margin: auto 0 0; color: var(--ncbos-muted); font-size: var(--ncbos-fs-sm); }
.ncbos-wl-cover { background: var(--ncbos-accent); color: var(--ncbos-on-accent); display: grid; place-items: center; transform-origin: left center; transform: rotateY(-165deg); backface-visibility: hidden;
    animation: ncbos-wl-open 2.4s ease-in-out .4s both; box-shadow: var(--ncbos-shadow); }
.ncbos-wl-sigil { font-size: clamp(3rem, 8vw, 5rem); }
@keyframes ncbos-wl-open { from { transform: rotateY(0deg); } to { transform: rotateY(-165deg); } }
@media (prefers-reduced-motion: reduce) { .ncbos-wl-cover { animation: none; } }

.ncbos-wl-tonight { display: grid; gap: var(--ncbos-sp-5); align-items: center; background: var(--ncbos-panel-alt); border-radius: var(--ncbos-r-lg); padding: var(--ncbos-sp-6); }
@media (min-width: 768px) { .ncbos-wl-tonight { grid-template-columns: auto 1fr; } }
.ncbos-wl-moon { display: grid; place-items: center; }
.ncbos .ncbos-wl-tonight h2 { margin-top: 0; font-size: var(--ncbos-fs-xl); }
.ncbos-wl-ask { font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-lg); font-style: italic; }
.ncbos-wl-next { font-size: var(--ncbos-fs-md); }
.ncbos-wl-hemi { display: flex; flex-wrap: wrap; gap: var(--ncbos-sp-3); align-items: center; color: var(--ncbos-ink); }
.ncbos-wl-hemi a[aria-current] { font-weight: 700; text-decoration: none; color: var(--ncbos-ink); }

.ncbos-wl-section h2 { font-size: var(--ncbos-fs-xl); }
.ncbos-wl-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ncbos-sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ncbos-wl-card { background: var(--ncbos-panel); border: 1px solid var(--ncbos-border); border-radius: var(--ncbos-r-lg); padding: var(--ncbos-sp-5); }
.ncbos .ncbos-wl-card h3 { font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-lg); margin: var(--ncbos-sp-3) 0 var(--ncbos-sp-2); }
.ncbos-wl-card p { margin: 0; }
.ncbos-wl-card-icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--ncbos-r-md); background: var(--ncbos-panel-alt); color: var(--ncbos-gold); font-size: 1.25rem; }

.ncbos-wl-privacy { display: grid; gap: var(--ncbos-sp-6); align-items: start; }
@media (min-width: 992px) { .ncbos-wl-privacy { grid-template-columns: 1.3fr 1fr; } }
.ncbos-wl-facts { list-style: none; margin: var(--ncbos-sp-4) 0 0; padding: 0; display: grid; gap: var(--ncbos-sp-4); }
.ncbos-wl-facts li { display: flex; gap: var(--ncbos-sp-3); align-items: flex-start; }
.ncbos-wl-facts li > .fa-solid { color: var(--ncbos-gold); font-size: 1.2rem; margin-top: .2em; flex: none; width: 1.5rem; text-align: center; }
.ncbos-wl-facts strong { display: block; }
.ncbos-wl-tab { margin: 0; border: 1px solid var(--ncbos-border); border-radius: var(--ncbos-r-lg); overflow: hidden; background: var(--ncbos-panel); }
.ncbos-wl-tabbar { display: flex; align-items: center; gap: var(--ncbos-sp-2); background: var(--ncbos-panel-alt); padding: var(--ncbos-sp-2) var(--ncbos-sp-3); }
.ncbos-wl-tabdot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--ncbos-gold); }
.ncbos-wl-tabtitle { background: var(--ncbos-panel); color: var(--ncbos-ink); border-radius: var(--ncbos-r-sm) var(--ncbos-r-sm) 0 0; padding: var(--ncbos-sp-1) var(--ncbos-sp-4); font-size: var(--ncbos-fs-sm); }
.ncbos-wl-tabpage { padding: var(--ncbos-sp-6) var(--ncbos-sp-4); color: var(--ncbos-muted); text-align: center; }
.ncbos-wl-tab figcaption { padding: var(--ncbos-sp-3) var(--ncbos-sp-4); border-top: 1px solid var(--ncbos-border); color: var(--ncbos-ink); font-size: var(--ncbos-fs-sm); }

.ncbos-wl-who { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ncbos-sp-3) var(--ncbos-sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.ncbos-wl-story { border-top: 1px solid var(--ncbos-border); padding-top: var(--ncbos-sp-4); }
.ncbos-wl-shelf { list-style: none; margin: 0 0 var(--ncbos-sp-3); padding: 0; display: grid; gap: var(--ncbos-sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.ncbos-wl-shelf li { display: flex; gap: var(--ncbos-sp-3); align-items: center; }
.ncbos-wl-shelf li > div { display: grid; }
.ncbos-wl-last { text-align: center; background: var(--ncbos-panel-alt); border-radius: var(--ncbos-r-lg); padding: var(--ncbos-sp-7) var(--ncbos-sp-5); }
.ncbos .ncbos-wl-last h2 { margin-top: 0; font-size: var(--ncbos-fs-xl); }
.ncbos-wl-last .ncbos-wl-actions { justify-content: center; }