/* THE NAVIGATION LOOKS (his, 29 Oct 2026) — a face for the visitor's buttons, scoped by <body data-nui="…"> (app/nui-looks.js). Read from SACRED HEART VISUALS/css/looks.css: a look is a few variables
   (the fonts, the ink, the accent, the spacing) and the same dressing for every look; the Home button shows the look's mark instead of the word. Nothing here changes what a button does. */
body[data-nui="heritage"], body[data-nui="sacred-heart"] { --nui-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; --nui-w: 400; --nui-ink: #fff; --nui-accent: #fff; --nui-ls: .34em; --nui-shadow: 0 1px 8px rgba(0, 0, 0, .6); --nui-rot: 0deg; }
body[data-nui="trash-cult"] { --nui-sans: 'Permanent Marker', 'Sedgwick Ave Display', cursive; --nui-w: 400; --nui-ink: #30f008; --nui-accent: #ff2fa0; --nui-ls: .06em; --nui-shadow: 2px 2px 0 #000, 0 0 8px rgba(0, 0, 0, .85); --nui-rot: -1.5deg; }
body[data-nui="piermont"] { --nui-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --nui-w: 300; --nui-ink: #fff; --nui-accent: #e9cf9c; --nui-ls: .42em; --nui-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 2px 10px rgba(0, 0, 0, .6); --nui-rot: 0deg; }

/* the buttons: no box, the look's words — the kit's landing "Tour" button (show.css .choice .word): the look's face, capitals, wide spacing, a hairline that grows on hover; the padding is an invisible slide so the hit box stays big (his: "no more pills or slides") */
body[data-nui] .navPill { text-transform: uppercase; font-size: clamp(14px, 1.5vw, 24px); color: rgba(255, 255, 255, .88); transition: color .3s, letter-spacing .3s; background: transparent; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--nui-ink); font-family: var(--nui-sans); font-weight: var(--nui-w);
  letter-spacing: var(--nui-ls); text-shadow: var(--nui-shadow); transform: rotate(var(--nui-rot)); }
body[data-nui] .navPill:hover { background: transparent; color: #fff; letter-spacing: calc(var(--nui-ls) + .04em); }
body[data-nui] .tourNav .navPill, body[data-nui] .tourNav .modePill { min-width: 0; padding: 14px 18px 13px; }
body[data-nui] .navPill::before { border-bottom-color: var(--nui-accent); }
body[data-nui] .navPill:hover::before { border-color: transparent; border-bottom-color: var(--nui-accent); width: calc(100% + 2px); height: 0; }
body[data-nui] .navPill.on { border-color: transparent; background: transparent; color: var(--nui-accent); }
/* the Explore · Tour switch: its square takes the accent */
body[data-nui] .tourNav .modePill.sw::before { display: none; }
body[data-nui] .tourNav .modePill.sw[data-state=explore] [data-m=explore], body[data-nui] .tourNav .modePill.sw[data-state=tour] [data-m=tour] { border-bottom: 1px solid var(--nui-accent); padding-bottom: 4px; }
body[data-nui] .tourNav .modePill.sw[data-state=explore] [data-m=explore], body[data-nui] .tourNav .modePill.sw[data-state=tour] [data-m=tour] { color: var(--nui-accent); }
/* Home is the look's mark, not a word */
body[data-nui] [data-nui-mark] { display: grid; place-items: center; width: 58px; height: 58px; padding: 0; letter-spacing: 0; color: var(--nui-accent); }
body[data-nui] [data-nui-mark] svg, body[data-nui] [data-nui-mark] img { display: block; width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .6)); }
body[data-nui] [data-nui-mark]::before { display: none; }
/* the small icons and the loading line keep the look's ink */
body[data-nui] .teleIcon { color: var(--nui-ink); }
body[data-nui] .camReset svg { color: var(--nui-ink); }
body[data-nui] #loadingName { font-family: var(--nui-sans); font-weight: var(--nui-w); letter-spacing: var(--nui-ls); color: var(--nui-ink); text-shadow: var(--nui-shadow); }
body[data-nui] #loadingBar i { background: var(--nui-accent); }