/* NCD Account: additions on top of mock.css (the approved v4 mockups' stylesheet, copied by tools/build_assets.py).
   Only what the live build needs: WordPress and Elementor wrappers, Voxel's own widgets (timeline, messages,
   visits chart, orders, current plan) in the shell's colours, light and dark, and plain-form controls. */

/* Voxel's colour variables follow the shell's tokens, so its widgets and pop-ups switch with dark mode */
body.ncd-acct{
  --ts-shade-1:var(--ink);--ts-shade-2:var(--muted);--ts-shade-3:var(--muted);--ts-shade-4:var(--line);
  --ts-shade-5:var(--soft);--ts-shade-6:var(--soft);--ts-shade-7:var(--panel);
  --ts-accent-1:var(--accent-text);--ts-accent-2:var(--accent);--ts-icon-color:var(--muted);
  font-family:var(--font);
}
body.ncd-acct :where(h1,h2,h3){color:var(--ink)}
body.ncd-acct h1{font:400 clamp(2rem,3.4vw,2.6rem)/1.1 var(--display)}
.ncd-acct .h2{font:600 1.15rem/1.3 var(--font);margin:32px 0 14px}
.ncd-acct .note{padding:10px 14px;border-left:3px solid var(--accent);background:var(--accent-soft);color:var(--ink);border-radius:0 var(--r-sm) var(--r-sm) 0;margin:0 0 20px}
.ncd-acct .tile.static{cursor:default}
.ncd-acct .tile b{color:inherit}

/* Dark mode (owner correction 2026-10-21): follow the system, and the site's theme toggle (#theme) flips it either way:
   OS light + toggle = dark; OS dark + toggle = "force light". The dark state is therefore two selectors:
   @media light body.ncd-acct:has(.theme:checked)   ·   @media dark body.ncd-acct:not(:has(.theme:checked))
   mock.css already works this way; this restates its two token sets (unchanged) at body.ncd-acct specificity so
   the brand layer (brand.css) cannot leak its light paper into dark, and makes dark deliberate: the site's black
   header (#111214, shell.css --night) on every screen, and cards/tiles bordered with --field so they read. */
body.ncd-acct--bg:#FFFFFF;--soft:#F5F4F0;--panel:#FFFFFF;--ink:#17181A;--muted:#5D6168;--line:#E7E5DF;--field:#8A877F;--accent:#2F6B45;--accent-ink:#FFFFFF;--accent-soft:#E6F0E8;--accent-text:#2F6B45;--ok:#2F6B45;--warn:#B42318;--gold:#7A5700;--gold-soft:#FBF1D6}
@media (prefers-color-scheme: light){body.ncd-acct:has(.theme:checked){--bg:#1C201E;--soft:#30362F;--panel:#262B28;--ink:#F1EFEA;--muted:#B9BFBA;--line:#46504A;--field:#8C978F;--accent:#8FD4A2;--accent-ink:#0F1A13;--accent-soft:#2C4433;--accent-text:#A6E3B0;--ok:#8FD4A2;--warn:#FF9C8F;--gold:#F5CD6A;--gold-soft:#3A3220}}
@media (prefers-color-scheme: dark){body.ncd-acct:not(:has(.theme:checked)){--bg:#1C201E;--soft:#30362F;--panel:#262B28;--ink:#F1EFEA;--muted:#B9BFBA;--line:#46504A;--field:#8C978F;--accent:#8FD4A2;--accent-ink:#0F1A13;--accent-soft:#2C4433;--accent-text:#A6E3B0;--ok:#8FD4A2;--warn:#FF9C8F;--gold:#F5CD6A;--gold-soft:#3A3220}}
body.ncd-acct .iconbtn .moon{display:block}body.ncd-acct .iconbtn .sun{display:none}
@media (prefers-color-scheme: light){body.ncd-acct:has(.theme:checked) .iconbtn .moon{display:none}body.ncd-acct:has(.theme:checked) .iconbtn .sun{display:block}}
@media (prefers-color-scheme: dark){body.ncd-acct:not(:has(.theme:checked)) .iconbtn .moon{display:none}body.ncd-acct:not(:has(.theme:checked)) .iconbtn .sun{display:block}}
@media (prefers-color-scheme: light){body.ncd-acct:has(.theme:checked) .top{background:#111214;border-bottom-color:#111214}body.ncd-acct:has(.theme:checked) :is(.card,.tile){border-color:var(--field)}}
@media (prefers-color-scheme: dark){body.ncd-acct:not(:has(.theme:checked)) .top{background:#111214;border-bottom-color:#111214}body.ncd-acct:not(:has(.theme:checked)) :is(.card,.tile){border-color:var(--field)}}

/* The admin bar for staff (2026-10-21, owner bug on prod): Voxel's commons.css makes #wpadminbar position:static, so
   its float:left menu items sit in the page flow, and any item taller than the 32px bar (WS Form's node is 38px)
   pokes below it. The shell's top bar and side-menu row are flex boxes, which step aside from a float: the header
   started ~700px across with an empty band on the left. flow-root keeps the bar's floats inside the bar. */
body.ncd-acct #wpadminbar{display:flow-root}

/* Elementor wrappers inside the shell carry no spacing of their own */
.ncd-acct .main .e-con,.ncd-acct .main .e-con-inner{--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;--gap:0;padding:0;max-width:none}
.ncd-acct .main .elementor-widget:not(:last-child){margin-bottom:0}
.ncd-acct .main .elementor-shortcode{display:contents}

/* plain forms: inline forms in rows, file inputs, buttons as tiles */
.ncd-acct form.inline{display:inline-flex;margin:0}
.ncd-acct form.tileform{display:contents}
.ncd-acct button.tile{font:inherit;text-align:left;cursor:pointer;width:100%}
.ncd-acct button.tile:hover{border-color:var(--accent)}
.ncd-acct .acts form button,.ncd-acct .acts details summary{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm);color:var(--muted);background:none;border:0;cursor:pointer;list-style:none}
.ncd-acct .acts details summary::-webkit-details-marker{display:none}
.ncd-acct .acts form button:hover,.ncd-acct .acts details summary:hover{background:var(--soft);color:var(--ink)}
.ncd-acct .acts .i{width:20px;height:20px}
.ncd-acct .vup{position:relative}
.ncd-acct .vup[open] form{position:absolute;right:0;top:42px;z-index:5;display:flex;gap:8px;align-items:center;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.12);width:min(360px,80vw)}
.ncd-acct input[type=file]{padding:6px;font-size:.88rem}
.ncd-acct input[type=date]{width:auto;min-height:36px;padding:4px 8px}
.ncd-acct .upl{margin:0 0 20px}.ncd-acct .upl label{font-weight:600}
.ncd-acct .filters .btn.sm{min-height:40px}
.ncd-acct .stack{gap:8px}
.ncd-acct fieldset.plain{border:0;padding:0;margin:0;min-width:0;width:100%}
.ncd-acct .seats .i{width:17px;height:17px}
.ncd-acct p.seats{display:flex;align-items:center;gap:8px;margin:0 0 16px}
.ncd-acct .joinbox .joinrow input[readonly]{background:var(--soft)}

/* thumbnails are real images in the build */
.ncd-acct .thumb{overflow:hidden;background:var(--soft)}
.ncd-acct .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ncd-acct .thumbs.big .small{color:var(--ink)}

/* ---------------------------------------------------------------- Space page (space.html, decision 54) */
.ncd-acct .ncd-space-page{display:block}
.ncd-acct .spacewrap{display:grid!important;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.ncd-acct .spacewrap>.thread{grid-column:1;grid-row:1;max-width:none;display:block}
.ncd-acct .spacewrap>.spanel-wrap{grid-column:2;grid-row:1;position:sticky;top:16px;display:block}
.ncd-acct .spanel{display:flex;flex-direction:column;gap:14px}
@media(max-width:1100px){
  .ncd-acct .spacewrap{grid-template-columns:1fr}
  .ncd-acct .spacewrap>.thread,.ncd-acct .spacewrap>.spanel-wrap{grid-column:1;grid-row:auto;position:static}
  .ncd-acct .spacewrap>.spanel-wrap{order:2}
}
.ncd-acct .pbox summary .i{width:18px;height:18px}
.ncd-acct .mini .chip{flex:none}

/* Voxel's timeline (Timeline widget, "Current post wall") in the mockup's look */
.ncd-acct .vxfeed{
  --main-bg:var(--panel);--main-border:var(--line);--main-link:var(--accent-text);--main-text:var(--ink);--faded-text:var(--muted);
  --main-shadow:none;--main-icon-color:var(--muted);--detail-color:var(--soft);--lg-radius:var(--r);--md-radius:var(--r-sm);
  gap:16px;font-family:var(--font);color:var(--ink)
}
.ncd-acct .vxfeed .vxf-create-post{border-radius:var(--r);padding:4px}
.ncd-acct .vxfeed textarea.vxf-content__textarea,.ncd-acct .vxfeed .vxf-content__highlighter{font:inherit;color:var(--ink);background:transparent;border:0;min-height:0}
.ncd-acct .vxfeed textarea::placeholder{color:var(--muted)}
.ncd-acct .vxfeed .vxf-filters{display:none} /* one ordering only in a Space */
.ncd-acct .vxfeed .vxf-subgrid>.vxf-post,.ncd-acct .vxfeed>.vxf-post{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;gap:12px}
.ncd-acct .vxfeed .vxf-user>a{color:var(--ink);font-weight:600}
.ncd-acct .vxfeed .vxf-user span,.ncd-acct .vxfeed .vxf-user span a{color:var(--muted)}
.ncd-acct .vxfeed .vxf-body-text{color:var(--ink);font-size:1rem;line-height:1.55}
.ncd-acct .vxfeed .vxf-body-text a{color:var(--accent-text)}
.ncd-acct .vxfeed .vxf-icon{color:var(--muted)}
.ncd-acct .vxfeed .vxf-icon svg{fill:currentColor}
.ncd-acct .vxfeed .vxf-icon:hover{color:var(--ink)}
.ncd-acct .vxfeed .vxf-liked{color:var(--warn)}
.ncd-acct .vxfeed .vxf-details span,.ncd-acct .vxfeed .vxf-details a{color:var(--muted)}
/* reposts and quotes are refused in Spaces (NCD Spaces); don't offer them */
.ncd-acct.ncd-acct-space .vxf-actions>a.vxf-icon:nth-child(2):not(.vxf-has-replies){display:none}
.ncd-acct .vxfeed .vxf-comments,.ncd-acct .vxfeed .vxf-comment{color:var(--ink)}
.ncd-acct .vxfeed .vxf-comment .vxf-user>a{color:var(--ink)}
.ncd-acct .vxfeed .ts-btn{font-family:var(--font)}
.ncd-acct .vxfeed .ts-btn-2,.ncd-acct .vxfeed .vxf-publish .ts-btn{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* other Voxel widgets in cards (messages, visits chart, orders, current plan, cart) */
.ncd-acct .vxw{color:var(--ink)}
.ncd-acct .chartcard .ts-visits-chart,.ncd-acct .chartcard .ts-chart{color:var(--ink)}
.ncd-acct .vxw .ts-btn-1,.ncd-acct .vxw .ts-btn-2{border-radius:var(--r-sm)}
.ncd-acct .vxw .ts-btn-2{background:var(--accent);color:var(--accent-ink)}
/* Voxel's profile form inside the account shell (templates/shell.php 'profile-form', 2026-10-21): the account's own primary button, AA in light and dark */
.ncd-acct .pform .ts-btn-2{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* owner 2026-10-21: no white card (fields on the page background, like the two-step steps); room above the description (About) and below Save */
.ncd-acct .pform .field-key-ncd_profile_about{margin-top:24px}
.ncd-acct .pform .ts-form-footer{padding-bottom:24px}
.ncd-acct .vxw input,.ncd-acct .vxw textarea{background:var(--panel);color:var(--ink)}

/* headings and icons keep the shell's look inside Elementor/Voxel content */
body.ncd-acct .main h1,body.ncd-acct .flow h1{font-family:"Instrument Serif",Georgia,serif; /* not var(--display): Elementor containers set their own --display (flex) */ font-weight:400;font-size:clamp(2rem,3.4vw,2.6rem);line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
body.ncd-acct svg.i{fill:none;stroke:currentColor;color:inherit}
.ncd-acct .t2{grid-template-columns:repeat(2,1fr);max-width:700px;margin-left:auto;margin-right:auto}
@media(max-width:760px){.ncd-acct .t2{grid-template-columns:1fr}}

/* WCAG fixes (audit 2026-10-12): links in Voxel's timeline are underlined (not colour alone); chart labels readable;
   the analytics date range wraps at 320 px */
.ncd-acct .vxfeed .vxf-body-text a,.ncd-acct .vxfeed .vxf-user span a,.ncd-acct .vxfeed .vxf-details a{text-decoration:underline;text-underline-offset:2px}
.ncd-acct .ts-chart .chart-content span,.ncd-acct .ts-chart span{color:var(--muted)}
.ncd-acct .filters .custom{flex-wrap:wrap;max-width:100%}
@media(max-width:480px){.ncd-acct .filters .custom{margin-left:0;width:100%}.ncd-acct .filters .custom input[type=date]{flex:1 1 120px;min-width:0;width:auto}}
@media (prefers-reduced-motion: reduce){.ncd-acct *,.ncd-acct *::before,.ncd-acct *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Voxel panels and buttons with fixed light colours (current plan, orders, inbox empty state) follow the shell */
.ncd-acct .vxw .ts-panel,.ncd-acct .ts-panel{background:var(--panel);border-color:var(--line);color:var(--ink)}
.ncd-acct .ts-panel .ac-head b,.ncd-acct .ts-panel p{color:var(--ink)}
.ncd-acct .ts-btn-1{background:var(--soft);color:var(--ink);border-color:var(--line)}
.ncd-acct .ts-empty-user-tab,.ncd-acct .ts-empty-user-tab p,.ncd-acct .ts-empty-user-tab span{color:var(--muted)}
/* Voxel's timeline icons carry their own fills; make them all follow the theme (visible in dark mode) */
.ncd-acct .vxfeed .vxf-icon,.ncd-acct .vxfeed .vxf-more{color:var(--muted)}
.ncd-acct .vxfeed .vxf-icon svg,.ncd-acct .vxfeed .vxf-icon svg *{fill:currentColor}
.ncd-acct .vxfeed .vxf-icon.vxf-liked{color:var(--warn)}
.ncd-acct .vxfeed .vxf-icon:hover,.ncd-acct .vxfeed .vxf-more:hover{color:var(--ink)}

/* add-listing flow, stage 1 (screens.php screen_add): two-up type cards, the section object, "next step" stand-ins */
.ncd-acct .t2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.ncd-acct .t2{grid-template-columns:1fr}}
.ncd-acct .flow .back{margin-bottom:18px}
.ncd-acct .flow-obj{display:block;width:92px;height:92px;margin:0 auto 18px}
.ncd-acct .types .tile{min-height:170px}
.ncd-acct .next{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:1.5px dashed var(--field);background:transparent;margin-top:20px}
.ncd-acct .next .tag{font:600 .72rem/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ncd-acct .next b{font-weight:600}
.ncd-acct .narrow.card .ti{margin:0 auto 6px}
.ncd-acct .narrow .check{margin:16px 0 22px}
.ncd-acct .top .btn.ghost.sm{min-height:36px}
/* sign-in + reset screens (owner 2026-10-19): the public site's black header, the exact values of ncd-elements
   shell.css .site-header (--night #111214, --night-text #ECE9E2 = white wordmark, --night-muted #A9A6A0, hover --night-2
   #1B1C1F); the icon colour as brand.css's night top bar. The form below is unchanged. */
body:is(.ncd-acct-signin,.ncd-acct-reset) .top{background:#111214;border-bottom:0}
body:is(.ncd-acct-signin,.ncd-acct-reset) .top .brand{color:#ECE9E2}
body:is(.ncd-acct-signin,.ncd-acct-reset) .top .brand-by{color:#A9A6A0}
body:is(.ncd-acct-signin,.ncd-acct-reset) .top .iconbtn{color:#D6D3CC}
body:is(.ncd-acct-signin,.ncd-acct-reset) .top .iconbtn:hover{background:#1B1C1F}

/* add-listing flow, stage 2 (flow/steps.php): fields, the listing card, the sign-up / sign-in pair, the upgrade offer */
.ncd-acct .fld{margin:0 0 16px}
.ncd-acct .fld .opt{font-weight:400;color:var(--muted)}
.ncd-acct .fld .fhint{display:block;color:var(--muted);font-size:.82rem;margin-top:5px}
.ncd-acct .fld .lbl{display:block;font-weight:500;margin:0 0 6px;font-size:.88rem}
.ncd-acct .two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:560px){.ncd-acct .two{grid-template-columns:1fr}}
.ncd-acct .rvw{max-width:620px}
.ncd-acct .rvw .site{display:flex;align-items:center;gap:8px;margin:0 0 18px;color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
.ncd-acct .rvw .site .i{width:16px;height:16px;flex:none}
.ncd-acct .hrs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.9rem}
.ncd-acct .note.warn{border-left-color:var(--warn);background:#FDECEA;color:#17181A} /* the v4 form's own error tint (listing-form.css .wsf-alert-danger), so errors never read as success; dark text keeps contrast in both themes */
.ncd-acct .lcard{display:flex;gap:14px;align-items:center;margin:0 0 18px}
.ncd-acct .lcard>div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ncd-acct .lcard b{font-size:1.05rem}
.ncd-acct .lcard .ticon{flex:none}
.ncd-acct .picks{list-style:none;padding:0;display:grid;gap:12px}
.ncd-acct .picks .lcard{margin:0}
.ncd-acct .linkbtn{background:none;border:0;padding:8px 4px;min-height:44px;font:inherit;color:var(--accent-text);text-decoration:underline;cursor:pointer}
.ncd-acct .acctgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;max-width:900px;margin:0 auto;align-items:start}
@media(max-width:820px){.ncd-acct .acctgrid{grid-template-columns:1fr}}
.ncd-acct .acctgrid .h2{margin:0 0 12px}
.ncd-acct .ts-box{margin:4px 0 16px;min-height:65px}
.ncd-acct .devnote{max-width:520px;margin:0 auto;padding:12px 14px;border:1.5px dashed var(--field);border-radius:var(--r-sm);font-size:.88rem}
.ncd-acct .devnote .tag{font:600 .72rem/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.ncd-acct .two-plans{grid-template-columns:repeat(2,1fr);max-width:700px}
@media(max-width:820px){.ncd-acct .two-plans{grid-template-columns:1fr}}
.ncd-acct .up-lede{margin:0 0 24px}
.ncd-acct .done{margin-bottom:28px}
.ncd-acct button.btn[disabled]{opacity:1;cursor:not-allowed;background:var(--soft);color:var(--muted);border-color:var(--line)}
/* a11y audit 2026-10-18 (stage 2): 320px reflow (grid children may shrink; Turnstile compact), links in consent text
   underlined (1.4.1), small text links get a 24px target (2.5.8) */
.ncd-acct .acctgrid>section,.ncd-acct .acctgrid form{min-width:0}
.ncd-acct .ts-box{min-height:65px;width:100%;max-width:100%} /* Turnstile data-size="flexible": full-width 65px bar (2026-10-19) */
.ncd-acct .check a{text-decoration:underline;text-underline-offset:2px}
.ncd-acct p.small a,.ncd-acct .linkbtn{display:inline-flex;align-items:center;min-height:24px;padding:2px 0}
@media(max-width:360px){.ncd-acct .narrow.card.pad,.ncd-acct .acctgrid .card.pad{padding-left:16px;padding-right:16px}}
/* the age gate's profile bar (ncd-age-gate complete-profile.php) inside the account shell: follow the shell's own
   light/dark tokens (its --card fallback stayed white under the dark switch: 1.15:1, audit 2026-10-18) */
.ncd-acct .ncd-pc{--ncd-pc-bg:var(--panel);--ncd-pc-ink:var(--ink);--ncd-pc-muted:var(--muted);--ncd-pc-line:var(--line);--ncd-pc-link:var(--accent-text)}

/* Email / Password screens (includes/security.php, 2026-10-18) */
.ncd-acct .narrow.card form .btn{margin-top:4px}
.ncd-acct .btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.ncd-acct .btnrow form{margin:0}
.ncd-acct .err{display:block;color:var(--warn);font-size:.82rem;margin-top:5px}
/* Green buttons always carry WHITE text (owner 2026-10-19, WCAG AA). mock.css's dark mode pairs a light green
   (#8FD4A2) with dark text; buttons use --accent/--accent-ink, so in dark mode the pair falls back to the approved
   light-mode green + white (6.4:1). Links keep the light green (--accent-text). Themed screens: brand.css. */
@media (prefers-color-scheme: light){body.ncd-acct:has(.theme:checked){--accent:#2F6B45;--accent-ink:#FFFFFF}}
@media (prefers-color-scheme: dark){body.ncd-acct:not(:has(.theme:checked)){--accent:#2F6B45;--accent-ink:#FFFFFF}}
/* museum type suggestion card (2026-10-19): the 10px gap between the two stacked buttons, as the mockup */
.ncd-acct .ncd-type-card .ncd-type-form{display:flex;flex-direction:column;gap:6px} /* + the shared 4px button top margin = the mockup's 10px */
.ncd-acct .ncd-type-card .chips{margin:6px 0 10px}
/* profile-completeness bar (owner 2026-10-21): on account screens it sits in the page above the heading as a white card
   (.card + .pcnote, includes/shell.php profile_note), × top-right; ncd-age-gate's bar above the header is hidden here */
.ncd-acct .ncd-pc--top{display:none}
.ncd-acct .pcnote{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;position:relative;padding:16px 60px 16px 20px;margin:0 0 24px}
.ncd-acct .pcnote progress{width:140px;height:10px;accent-color:var(--accent)}
.ncd-acct .pcnote a{color:var(--accent-text);font-weight:600}
.ncd-acct .pcnote .ncd-pc__xf{position:absolute;top:4px;right:4px;margin:0}
.ncd-acct .pcnote-x{min-width:44px;min-height:44px;border:0;background:none;color:inherit;font-size:1.5rem;line-height:1;cursor:pointer}

.ncd-acct .legal{margin:40px 0 8px;text-align:center}
.ncd-acct .legal a{color:inherit}
/* claim verification (2026-10-21, flow/verify.php): the code box and a link-style button, as in the mockups */
.ncd-acct .mk-code{font:600 1.05rem/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em;overflow-wrap:anywhere}
.ncd-acct .mk-pre{font:.85rem/1.5 ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere;white-space:normal}
.ncd-acct .mk-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.ncd-acct .mk-mt{margin-top:20px}
.ncd-acct .linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--accent-text);text-decoration:underline;cursor:pointer}
.ncd-acct form.ncd-claim-file{margin-top:8px}

/* Two-step sign-in (2026-10-21, includes/twofa-screens.php; mockups docs/design/two-step-mockups/). Layout only:
   monospace codes, the QR's white quiet zone, the steps list. The screen background is NOT set here (coordinator
   2026-10-21: the layout/theme agent owns the background of every flow screen, sign-in and code steps included). */
.ncd-acct .ncd-2fa-code{font:600 1.05rem/1.5 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;overflow-wrap:anywhere}
.ncd-acct .ncd-2fa-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;list-style:none;padding:0;margin:0 0 16px}
.ncd-acct .ncd-2fa-qr{display:inline-block;background:#fff;padding:16px;border-radius:8px;line-height:0}
.ncd-acct .ncd-2fa-qr svg{width:196px;height:196px}
.ncd-acct .ncd-2fa-c{text-align:center}
.ncd-acct .ncd-2fa-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ncd-acct .ncd-2fa-row form{margin:0}
.ncd-acct .ncd-2fa-mt{margin-top:20px}
.ncd-acct ol.ncd-2fa-steps{padding-left:1.2em;margin:0}
.ncd-acct ol.ncd-2fa-steps>li{margin:0 0 22px}
.ncd-acct .ncd-2fa .linkbtn{padding:0;min-height:0;color:var(--accent-text)}
@media print{.ncd-acct-signin .top,.ncd-acct .side,.ncd-acct .legal,.ncd-acct .ncd-2fa .navrow{display:none}}
/* My feeds add/edit (includes/feeds.php, owner 2026-10-21): the v4 listing form's art-form tiles (listing-form.css .afbtns/.afbtn),
   fields on the page background (no card). Feeds and Where use the same tile; Where is a shorter row. Without JS the real
   checkbox shows top-left in each tile; with JS (.fp-js) the tile is an aria-pressed button and the checkbox is hidden. */
.ncd-acct .feedform .fp-grp{border:0;margin:0 0 32px;padding:0;min-width:0}
.ncd-acct .feedform .fp-grp>legend{font:600 1.05rem/1.2 var(--font);margin:0 0 14px;padding:0}
.ncd-acct .feedform .fp-grp>.muted{margin:-6px 0 12px}
.ncd-acct .feedform .afbtns.fp-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
.ncd-acct .feedform .afbtns.fp-kinds .afbtn{min-height:150px;font-size:17px}
.ncd-acct .feedform .afbtns.fp-regs .afcell>.afbtn{min-height:60px;padding:12px 30px 12px 12px;display:flex;align-items:center;justify-content:flex-start;gap:10px;text-align:left;box-shadow:none}
.ncd-acct .feedform .afbtns.fp-regs .afbtn::before{width:32px;height:32px;background-size:18px}
.ncd-acct .feedform .afbtns.fp-regs .afbtn[aria-pressed="true"]{box-shadow:4px 4px 0 #111214}
.ncd-acct .feedform .afcell>input.fp-in{position:absolute;top:10px;left:10px;z-index:1;width:18px;height:18px;margin:0;accent-color:var(--accent)}
.ncd-acct .feedform .fp-js .afcell>input.fp-in{position:absolute;opacity:0;pointer-events:none}
.ncd-acct .feedform .afbtns .afbtn:not([aria-pressed="true"]){color:var(--ink);border-color:var(--field)} /* unpicked tile on the theme's panel: AA in light and dark */
.ncd-acct .feedform .fp-towns{margin:-12px 0 24px}
.ncd-acct .feedform .ncd-tm-input,.ncd-acct .feedform .fp-towns select{width:100%;box-sizing:border-box;font:inherit;padding:10px 12px;border:1px solid var(--field);border-radius:var(--r-sm);background:var(--panel);color:var(--ink)}
.ncd-acct .feedform .ncd-tm-input::placeholder{color:var(--muted);opacity:1}
.ncd-acct .feedform .ncd-tm-list{background:var(--panel);color:var(--ink);border-color:var(--line)}
.ncd-acct .feedform .ncd-tm-list [role="option"][aria-selected="true"],.ncd-acct .feedform .ncd-tm-list [role="option"]:hover{background:var(--accent-soft)}
.ncd-acct .feedform .ncd-tm-chip{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.ncd-acct .feedform .feednote{margin:0 0 16px}
@media(max-width:600px){.ncd-acct .feedform .afbtns.fp-regs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ncd-acct .narrow.ncd-type-card form .btn{margin-top:4px} /* the museum kind step keeps its 10px stack without the card (2026-10-21) */