/* These tokens only exist on an explicitly enabled SpecialFeature wrapper. */
.sf-appearance[data-bg="linear_gradient"] { background-image: linear-gradient(var(--sf-angle), var(--sf-accent), var(--sf-secondary)); }
.sf-appearance[data-bg="radial_gradient"] { background-image: radial-gradient(circle at 30% 20%, var(--sf-accent), var(--sf-secondary)); }
.sf-appearance[data-bg="dots"] { background-image: radial-gradient(circle, var(--sf-pattern-color) 2px, transparent 2.5px); background-size: 20px 20px; }
.sf-appearance[data-bg="stripes"] { background-image: repeating-linear-gradient(var(--sf-angle), var(--sf-pattern-color) 0 8px, transparent 8px 20px); }
.sf-appearance[data-bg="checker"] { background-image: conic-gradient(var(--sf-pattern-color) 25%, transparent 0 50%, var(--sf-pattern-color) 0 75%, transparent 0); background-size: 32px 32px; }
.sf-appearance[data-bg="grid"] { background-image: linear-gradient(var(--sf-pattern-color) 1px, transparent 1px), linear-gradient(90deg, var(--sf-pattern-color) 1px, transparent 1px); background-size: 24px 24px; }
.sf-appearance[data-bg="paper"] { background-image: repeating-linear-gradient(0deg, var(--sf-pattern-color) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, transparent 0 7px, var(--sf-pattern-color) 7px 8px); }
.sf-appearance[data-bg="notebook"] { background-image: linear-gradient(90deg, transparent 0 35px, var(--sf-pattern-color) 35px 37px, transparent 37px), repeating-linear-gradient(transparent 0 27px, var(--sf-pattern-color) 27px 28px); }
.sf-appearance[data-bg="stars"] { position: relative; isolation: isolate; background-image: radial-gradient(circle, var(--sf-pattern-color) 1px, transparent 2px); background-size: 48px 48px; }
.sf-appearance[data-bg="stars"]::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--sf-pattern-color); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath fill='white' d='m24 5 4 12 13 0-10 8 4 13-11-8-11 8 4-13-10-8h13z'/%3E%3C/svg%3E"); mask-size: 48px 48px; }
/* Shared navigation stays readable on explicitly enabled dark feature themes. */
.sf-appearance .naviarea button { color: var(--feature-link); }
.sf-appearance #container > footer.naviarea { background-color: var(--feature-card-bg); color: var(--feature-card-text); }
.sf-appearance #my-menu-dropdown,
.sf-appearance #hamburger-menu-dropdown { background-color: var(--feature-card-bg); color: var(--feature-card-text); }
.sf-appearance .sf-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--feature-heading-bg, #111827); color: var(--feature-heading-text, #ffffff); }
.sf-appearance .sf-hero img { display: block; width: 100%; object-fit: cover; object-position: var(--sf-image-position); }
.sf-appearance[data-hero="standard"] .sf-hero img { height: 128px; }
.sf-appearance[data-hero="compact"] .sf-hero img { height: 96px; }
.sf-appearance[data-hero="large"] .sf-hero img { height: 240px; }
.sf-appearance[data-hero="overlay"] .sf-hero img { height: 240px; }
.sf-appearance[data-hero="poster"] .sf-hero img { height: auto; max-height: 560px; object-fit: contain; }
.sf-appearance .sf-hero-title { position: relative; margin: 0; padding: 1.5rem; font-size: min(var(--sf-title-size), 2.25rem); font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; text-align: var(--sf-title-align); }
.sf-appearance[data-hero="overlay"] .sf-hero.has-image { display: grid; min-height: 240px; }
.sf-appearance[data-hero="overlay"] .sf-hero.has-image img { position: absolute; inset: 0; height: 100%; }
.sf-appearance[data-hero="overlay"] .sf-hero.has-image::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,var(--sf-overlay)); z-index: 1; }
.sf-appearance[data-hero="overlay"] .sf-hero.has-image .sf-hero-title { position: relative; align-self: end; z-index: 2; color: #fff; text-shadow: 0 1px 3px #000; }
.sf-appearance [data-sf-sections] > section > :is(h2,h3) { overflow-wrap: anywhere; justify-content: var(--sf-heading-align); }
.sf-appearance[data-heading="bar"] [data-sf-sections] > section > :is(h2,h3) { border-left: 8px solid var(--feature-link); border-radius: 0; }
.sf-appearance[data-heading="rounded"] [data-sf-sections] > section > :is(h2,h3) { border-radius: 1.25rem; }
.sf-appearance[data-heading="pill"] [data-sf-sections] > section > :is(h2,h3) { border-radius: 999px; padding-inline: 1.5rem; }
.sf-appearance[data-heading="underline"] [data-sf-sections] > section > :is(h2,h3) { border-bottom: 3px solid var(--feature-heading-text); border-radius: 0; box-shadow: none; }
.sf-appearance[data-heading="sticker"] [data-sf-sections] > section > :is(h2,h3) { border: 2px solid var(--feature-heading-text); box-shadow: 4px 4px 0 var(--feature-heading-bg); border-radius: .5rem; }
.sf-appearance[data-heading="note"] [data-sf-sections] > section > :is(h2,h3) { border-radius: 0 0 1rem 0; border-top: 6px solid var(--feature-link); box-shadow: 2px 3px 5px #0002; }
.sf-appearance[data-heading="ribbon"] [data-sf-sections] > section > :is(h2,h3) { border-radius: 0; border-inline: 8px double var(--feature-heading-text); }
.sf-appearance [data-sf-sections] > section > ul { min-width: 0; }
.sf-appearance [data-sf-sections] .maker-item { min-width: 0; overflow-wrap: anywhere; border-width: var(--sf-border-width); border-style: solid; }
.sf-appearance [data-sf-sections] .maker-item a > .flex-grow { min-width: 0; }
.sf-appearance[data-card="soft"] [data-sf-sections] .maker-item { border-radius: 1rem; box-shadow: 0 3px 12px #0001; }
.sf-appearance[data-card="outline"] [data-sf-sections] .maker-item { border-style: solid; border-width: var(--sf-border-width); }
.sf-appearance[data-card="sticker"] [data-sf-sections] .maker-item { border-style: solid; border-width: var(--sf-border-width); box-shadow: 3px 3px 0 var(--feature-card-border); border-radius: .5rem; }
.sf-appearance[data-card="paper"] [data-sf-sections] .maker-item { border-style: dashed; box-shadow: 1px 3px 6px #0002; border-radius: 0 0 .5rem 0; }
.sf-appearance[data-card="panel"] [data-sf-sections] .maker-item { border-style: solid; border-left-width: var(--sf-border-width); border-radius: .5rem; box-shadow: inset 4px 0 0 var(--feature-card-border), 0 2px 4px #0002; }
.sf-appearance:is([data-card="soft"],[data-card="outline"],[data-card="sticker"],[data-card="paper"],[data-card="panel"]) [data-sf-sections] > section > ul,
.sf-appearance[data-card-layout="grid_2"] [data-sf-sections] > section > ul { display: grid; gap: .75rem; border-top: 0; }
.sf-appearance [data-sf-sections] > section > ul > li:not(.maker-item) { grid-column: 1 / -1; }
.sf-appearance[data-card-layout="compact_list"] [data-sf-sections] .maker-item > a,
.sf-appearance[data-card-density="compact"] [data-sf-sections] .maker-item > a { padding: .5rem; }
.sf-appearance[data-card-density="roomy"] [data-sf-sections] .maker-item > a { padding: 1.25rem; }
.sf-appearance[data-heading-radius]:not([data-heading-radius="default"]) [data-sf-sections] > section > :is(h2,h3) { border-radius: var(--sf-heading-radius); }
.sf-appearance[data-heading-shadow]:not([data-heading-shadow="default"]) [data-sf-sections] > section > :is(h2,h3) { box-shadow: var(--sf-heading-shadow); }
.sf-appearance[data-card-radius]:not([data-card-radius="default"]) [data-sf-sections] .maker-item { border-radius: var(--sf-card-radius); }
.sf-appearance[data-card-shadow]:not([data-card-shadow="default"]) [data-sf-sections] .maker-item { box-shadow: var(--sf-card-shadow); }
.sf-appearance [data-sf-sections] a:focus-visible { outline: 3px solid var(--feature-link); outline-offset: 3px; }
@media (min-width: 768px) {
    .sf-appearance .sf-hero-title { font-size: var(--sf-title-size); }
    .sf-appearance[data-hero="overlay"] .sf-hero.has-image { min-height: 360px; }
    .sf-appearance[data-hero="standard"] .sf-hero img { height: 192px; }
    .sf-appearance[data-hero="compact"] .sf-hero img { height: 120px; }
    .sf-appearance[data-hero="large"] .sf-hero img,
    .sf-appearance[data-hero="overlay"] .sf-hero img { height: 360px; }
    .sf-appearance[data-card-layout="grid_2"] [data-sf-sections] > section > ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
}