/* NCD Account · section and brand layers (2026-10-18). Loaded only when a screen is themed (shell.php theme_section()).
   The nine section palettes (--sec-*) are printed inline after this file, read from ncd-elements shell.css §2,
   and switched by the body class sec-<slug>. Two layers use them:
   1. body.ncd-sec    the add-listing flow opened from an art section (/account/add/?section=<slug>):
                      the section's paper, ink, display face, dark top band and object.
   2. body.ncd-brand  account theme PROPOSAL (not the default; ?acct_theme=brand per browser): Foundation paper with
                      the site's grain, the night top bar with the nine-colour bar, white cards, and the member's
                      primary art form as the accent (sec-<member section>) with its object in the top bar.
   Light mode only re-maps tokens; dark mode keeps mock.css's dark tokens and takes the section's on-dark accent.
   Text pairs: --sec-ink on white/paper/tint and --sec-on-ink on --sec-ink are the site's measured >= 4.5:1 pairs. */

body.ncd-sec, body.ncd-brand, body.ncd-brand-colors {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' fill='none' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --bars: linear-gradient(90deg, #7FCB93 0 11.11%, #F2C14E 0 22.22%, #D2394A 0 33.33%, #D66A98 0 44.44%, #5B72FF 0 55.55%, #E08A4F 0 66.66%, #9A86E8 0 77.77%, #67D8E6 0 88.88%, #C9CDD1 0);
}

/* ---------- tokens: light; dark follows the system, flipped by the theme toggle (owner correction 2026-10-21) ----------
   The base light/dark sets are in account.css (body.ncd-acct; dark = OS light + toggle, or OS dark without it). Light lays the Foundation
   paper (shell.css --paper #F7F4EC) and the section's on-light ink over it; the toggle's dark set wins over these
   (higher specificity) and takes the section's on-dark accent below. */
body.ncd-sec {
  --bg: var(--sec-paper); --soft: var(--sec-tint); --line: #DCD6CA; --muted: #55595F; --field: #767A80;
  --accent: var(--sec-ink); --accent-ink: var(--sec-on-ink); --accent-soft: var(--sec-tint); --accent-text: var(--sec-ink);
}
@media (prefers-color-scheme: dark) { body.ncd-sec:has(.theme:checked) { --bg: var(--sec-paper); --soft: var(--sec-tint); --line: #DCD6CA; --muted: #55595F; --field: #767A80;
  --accent: var(--sec-ink); --accent-ink: var(--sec-on-ink); --accent-soft: var(--sec-tint); --accent-text: var(--sec-ink); } } /* OS dark + toggle = force light: beat mock.css's white set */
body.ncd-brand {
  --bg: #F7F4EC; --panel: #FFFFFF; --soft: #EFEAE0; --line: #DCD6CA; --muted: #55595F; --field: #767A80;
  --accent: var(--sec-ink); --accent-ink: var(--sec-on-ink); --accent-soft: var(--sec-tint); --accent-text: var(--sec-ink);
}
@media (prefers-color-scheme: dark) { body.ncd-brand:has(.theme:checked) { --bg: #F7F4EC; --panel: #FFFFFF; --soft: #EFEAE0; --line: #DCD6CA; --muted: #55595F; --field: #767A80;
  --accent: var(--sec-ink); --accent-ink: var(--sec-on-ink); --accent-soft: var(--sec-tint); --accent-text: var(--sec-ink); } } /* OS dark + toggle = force light: beat mock.css's white set */
@media (prefers-color-scheme: light) { body.ncd-sec:has(.theme:checked), body.ncd-brand:has(.theme:checked) { --accent: var(--sec-accent); --accent-ink: var(--sec-deep); --accent-text: var(--sec-accent); } }
@media (prefers-color-scheme: dark) { body.ncd-sec:not(:has(.theme:checked)), body.ncd-brand:not(:has(.theme:checked)) { --accent: var(--sec-accent); --accent-ink: var(--sec-deep); --accent-text: var(--sec-accent); } }

/* ---------- shared: grain ground, night top band with the section object ---------- */
body.ncd-sec, body.ncd-brand { background: var(--grain), var(--bg); }
.ncd-sec .top, .ncd-brand .top { position: relative; z-index: 2; border-bottom: 0; background: var(--sec-deep); }
.ncd-brand .top { background: #111214; }
.ncd-sec .top::after, .ncd-brand .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: var(--bars); }
.ncd-sec .top::after { background: var(--sec-sig); }
.ncd-sec .brand, .ncd-brand .brand { color: #ECE9E2; }
.ncd-sec .brand-by, .ncd-brand .brand-by { color: #A9A6A0; }
.ncd-sec .iconbtn, .ncd-brand .iconbtn { color: #D6D3CC; }
.ncd-sec .iconbtn:hover, .ncd-brand .iconbtn:hover { background: rgba(255,255,255,.1); }
.ncd-sec .top .btn.ghost, .ncd-brand .top .btn.ghost { background: transparent; color: #ECE9E2; border-color: rgba(236,233,226,.6); }
.ncd-brand .avatar { background: var(--sec-tint); color: var(--sec-ink); }
.secpill { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 999px; background: rgba(255,255,255,.08); color: #ECE9E2; font: 600 .82rem/1 var(--font); }
.secpill-obj { width: 30px; height: 30px; }
@media (max-width: 560px) { .secpill span { display: none; } .secpill { padding: 3px; } .brand-by { display: none; } }

/* ---------- 1. add flow in an art section ---------- */
.ncd-sec .flow h1 {
  font-family: var(--sec-display); font-weight: var(--sec-display-weight); text-transform: var(--sec-display-case);
  letter-spacing: var(--sec-display-track); line-height: var(--sec-display-leading); font-size: clamp(2.2rem, 4.4vw, 3.4rem);
}
.ncd-sec .flow-obj { width: 108px; height: 108px; filter: drop-shadow(4px 7px 0 rgba(0,0,0,.18)); }
.ncd-sec .tile { border-width: 1.5px; box-shadow: 0 1px 2px rgba(17,18,20,.06), 0 2px 8px rgba(17,18,20,.06); }
.ncd-sec .tile b, .ncd-brand .big .tile b {
  font-family: var(--sec-display); font-weight: var(--sec-display-weight); text-transform: var(--sec-display-case);
  letter-spacing: var(--sec-display-track); font-size: 1.4rem; line-height: 1.05;
}
.ncd-sec a.tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.ncd-sec .card { border-width: 1.5px; }

/* ---------- 2. brand layer (proposal) ---------- */
.ncd-brand .side { background: var(--panel); border-right-color: var(--line); }
.ncd-brand .side li a[aria-current] { box-shadow: inset 3px 0 0 var(--accent); }
.ncd-brand .tile, .ncd-brand .card { box-shadow: 0 1px 2px rgba(17,18,20,.05), 0 2px 8px rgba(17,18,20,.05); }
.ncd-brand a.tile:hover { border-color: var(--accent); }
.ncd-brand .main h1 { position: relative; padding-bottom: 14px; }
.ncd-brand .main h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: var(--sec-sig); }
.ncd-brand .head h1 { padding-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .ncd-sec a.tile:hover { transform: none; } }

/* ---------- 3. form screens: brand COLOURS only (user 2026-10-18) ----------
   The create/edit form screens (shell.php is_form_screen(): Voxel's form pages and the v4 listing form) get the
   member's accent and the Foundation paper background, nothing else: no grain, no night top bar, no section pill,
   no heading underline, no shadows or other structural/spacing change. Same token pairs as the brand layer above. */
body.ncd-brand-colors {
  --bg: #F7F4EC; --accent: var(--sec-ink); --accent-ink: var(--sec-on-ink); --accent-soft: var(--sec-tint); --accent-text: var(--sec-ink);
}
@media (prefers-color-scheme: dark) { body.ncd-brand-colors:has(.theme:checked) { --bg: #F7F4EC; --accent: var(--sec-ink); --accent-ink: var(--sec-on-ink); --accent-soft: var(--sec-tint); --accent-text: var(--sec-ink); } } /* OS dark + toggle = force light: beat mock.css's white set */
@media (prefers-color-scheme: light) { body.ncd-brand-colors:has(.theme:checked) { --accent: var(--sec-accent); --accent-ink: var(--sec-deep); --accent-text: var(--sec-accent); } }
@media (prefers-color-scheme: dark) { body.ncd-brand-colors:not(:has(.theme:checked)) { --accent: var(--sec-accent); --accent-ink: var(--sec-deep); --accent-text: var(--sec-accent); } }

/* ---------- 4. green buttons: WHITE text (owner 2026-10-19, WCAG AA) ----------
   The dark-mode rules above use the section's on-dark accent with --sec-deep text. For home (the default member
   accent) that is light green #A6E3B0 + near-black, so home keeps its on-light pair (#2F6B45 + white, 6.4:1) on
   buttons; links stay light green (--accent-text). Other sections' on-dark accents are not green. */
@media (prefers-color-scheme: light) { body.sec-home:is(.ncd-sec, .ncd-brand, .ncd-brand-colors):has(.theme:checked) { --accent: var(--sec-ink); --accent-ink: var(--sec-on-ink); } }
@media (prefers-color-scheme: dark) { body.sec-home:is(.ncd-sec, .ncd-brand, .ncd-brand-colors):not(:has(.theme:checked)) { --accent: var(--sec-ink); --accent-ink: var(--sec-on-ink); } }

/* ---------- 5. the main site's black header bar on EVERY account screen (owner 2026-10-21, theme consistency) ----
   The form screens (section 3) now take the night top bar too (shell.css --night #111214, --night-text, --night-muted
   and the nine-colour bar), the same rules as the brand layer; nothing else on those screens changes. */
.ncd-brand-colors .top { position: relative; z-index: 2; border-bottom: 0; background: #111214; }
.ncd-brand-colors .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: var(--bars); }
.ncd-brand-colors .brand { color: #ECE9E2; }
.ncd-brand-colors .brand-by { color: #A9A6A0; }
.ncd-brand-colors .iconbtn { color: #D6D3CC; }
.ncd-brand-colors .iconbtn:hover { background: rgba(255,255,255,.1); }
.ncd-brand-colors .top .btn.ghost { background: transparent; color: #ECE9E2; border-color: rgba(236,233,226,.6); }