/* === theme-overrides.css ===
 * Global overrides for Semantic UI defaults to match the gold + dark theme.
 * Loaded AFTER all other CSS — uses !important to override Semantic UI
 * inline/plugin styles regardless of load order.
 *
 * Scope: frontend site only (developk13.hsno.net). CMS admin is unaffected.
 */

/* ★ 2026-09-30 (owner): every button on the web front end uses the button library - see button-library.css. It is
   imported here so every page that links this file gets it (the _Master layout, the VIP / guest / account-app /
   advertiser-messages shells); its rules win on specificity, not on order. */
@import url("/custom/styles/button-library.css");

/* 2026-10-14 (owner): the colour scheme tokens (SiteScheme), the same as design-tokens.css - the account-app and
   advertiser-messages shells link this file and not that one. Brand gold by default; <html data-scheme="purple"> swaps
   them. Keep the two copies equal. */
:root {
    --gold: #d4af37;
    --gold-light: #f0d060;
    --gold-dark: #c9a227;
    --gold-dim: rgba(212, 175, 55, 0.15);
    --gold-rgb: 212, 175, 55;
    --gold-light-rgb: 240, 208, 96;
    --gold-dark-rgb: 201, 162, 39;
}
html[data-scheme="purple"] {
    --gold: #b770f7;
    --gold-light: #cb94f9;
    --gold-dark: #a35af2;
    --gold-dim: rgba(183, 112, 247, 0.15);
    --gold-rgb: 183, 112, 247;
    --gold-light-rgb: 203, 148, 249;
    --gold-dark-rgb: 163, 90, 242;
}
/* scheme-shades: begin - GENERATED by StaticAssets/tokenize-scheme-colors.py: the purple of every gold shade, same luminance */
html[data-scheme="purple"] {
    --gold-ffd700: #ebd0ff;
    --gold-ffd700-rgb: 235, 208, 255;
    --gold-d4a017: #c991f3;
    --gold-d4a017-rgb: 201, 145, 243;
    --gold-fff4b3: #f8efff;
    --gold-fff4b3-rgb: 248, 239, 255;
    --gold-ff9500: #d296ff;
    --gold-ff9500-rgb: 210, 150, 255;
    --gold-ffc800: #e5c2ff;
    --gold-ffc800-rgb: 229, 194, 255;
    --gold-f2c744: #e1bffb;
    --gold-f2c744-rgb: 225, 191, 251;
    --gold-c9a43a: #c297e3;
    --gold-c9a43a-rgb: 194, 151, 227;
    --gold-c5a200: #cc88ff;
    --gold-c5a200-rgb: 204, 136, 255;
    --gold-b8941f: #bb7ee9;
    --gold-b8941f-rgb: 187, 126, 233;
    --gold-b8962e: #b884e0;
    --gold-b8962e-rgb: 184, 132, 224;
    --gold-e0c050: #d8b5f2;
    --gold-e0c050-rgb: 216, 181, 242;
    --gold-c9a22e: #c394e6;
    --gold-c9a22e-rgb: 195, 148, 230;
    --gold-f5d773: #e9d0fc;
    --gold-f5d773-rgb: 233, 208, 252;
    --gold-ffd75e: #ebd1ff;
    --gold-ffd75e-rgb: 235, 209, 255;
    --gold-a08020: #aa64e0;
    --gold-a08020-rgb: 170, 100, 224;
    --gold-8a6d12: #9d3ee6;
    --gold-8a6d12-rgb: 157, 62, 230;
    --gold-ffd400: #e9cdff;
    --gold-ffd400-rgb: 233, 205, 255;
    --gold-2e2918: #332241;
    --gold-2e2918-rgb: 51, 34, 65;
    --gold-1a1508: #1f0e2c;
    --gold-1a1508-rgb: 31, 14, 44;
    --gold-54482a: #5c3b76;
    --gold-54482a-rgb: 92, 59, 118;
    --gold-2a2518: #2d2038;
    --gold-2a2518-rgb: 45, 32, 56;
    --gold-2a1e05: #31094f;
    --gold-2a1e05-rgb: 49, 9, 79;
    --gold-3b2f06: #480c76;
    --gold-3b2f06-rgb: 72, 12, 118;
    --gold-3a3206: #4b0d7b;
    --gold-3a3206-rgb: 75, 13, 123;
    --gold-1e1c14: #201926;
    --gold-1e1c14-rgb: 32, 25, 38;
    --gold-262419: #2a2031;
    --gold-262419-rgb: 42, 32, 49;
}
/* scheme-shades: end */

/* ─── Primary Button — gold gradient ─────────────────────────────────────── */
.ui.primary.button,
button.primary,
.btn-primary,
input[type="submit"].primary {
    background: linear-gradient(90deg, var(--gold, #d4af37), var(--gold-light, #f0d060)) !important;
    color: #111 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: opacity 0.2s, filter 0.2s !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.ui.primary.button:hover,
.ui.primary.button:focus,
.ui.primary.button:active,
button.primary:hover,
.btn-primary:hover {
    background: linear-gradient(90deg, var(--gold, #d4af37), var(--gold-light, #f0d060)) !important;
    color: #111 !important;
    opacity: 0.92 !important;
    box-shadow: none !important;
}
.ui.primary.active.button {
    background: linear-gradient(90deg, var(--gold-c9a22e, #c9a22e), var(--gold-e0c050, #e0c050)) !important;
    color: #111 !important;
}

/* ─── Secondary Button — gold outline ────────────────────────────────────── */
.ui.secondary.button,
button.secondary,
.btn-secondary {
    background: transparent !important;
    color: var(--gold, #d4af37) !important;
    border: 1px solid var(--gold, #d4af37) !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.ui.secondary.button:hover,
.ui.secondary.button:focus,
.ui.secondary.button:active,
button.secondary:hover,
.btn-secondary:hover {
    background: rgba(var(--gold-rgb, 212, 175, 55), 0.1) !important;
    color: var(--gold, #d4af37) !important;
    border-color: var(--gold, #d4af37) !important;
    box-shadow: none !important;
}
.ui.secondary.active.button {
    background: rgba(var(--gold-rgb, 212, 175, 55), 0.15) !important;
    color: var(--gold, #d4af37) !important;
}

/* ─── Danger / Negative Button — red ─────────────────────────────────────── */
.ui.negative.button,
.ui.red.button,
.btn-danger {
    background: #e74c3c !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.ui.negative.button:hover,
.ui.negative.button:focus,
.ui.red.button:hover,
.ui.red.button:focus,
.btn-danger:hover {
    background: #c0392b !important;
    color: #fff !important;
}

/* ─── Default Button — dark ──────────────────────────────────────────────── */
.ui.button {
    background-color: #333 !important;
    /* 2026-09-07. The rule below for input[type=submit] paints a gold gradient with the
       `background` shorthand, i.e. into background-IMAGE. This rule only ever set
       background-COLOR, so on a submit control carrying .ui.button the gradient stayed and
       this rule's #ccc text sat on top of it - measured 1.31:1, unreadable. .ui.button is
       (0,2,0) and every colour variant is (0,3,0), so clearing the image here reaches
       exactly the buttons that have no variant and leaves primary, secondary, cancel,
       negative, green, pinkText and primaryOutline byte-identical (measured, all eleven
       shapes). The three affected shapes go to 7.87:1, the site's ordinary dark button. */
    background-image: none !important;
    color: #ccc !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.ui.button:hover,
.ui.button:focus {
    background-color: #444 !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.15) !important;
    box-shadow: none !important;
}
.ui.button:active {
    background-color: #3a3a3a !important;
}

/* Keep social & special buttons intact */
.ui.facebook.button,
.ui.twitter.button,
.ui.google.plus.button,
.ui.linkedin.button,
.ui.instagram.button {
    border: none !important;
}

/* Cancel / white button — gold outline on dark */
.ui.cancel.button,
.ui.white.button {
    background: transparent !important;
    color: var(--gold, #d4af37) !important;
    border: 1px solid var(--gold, #d4af37) !important;
    box-shadow: none !important;
}
.ui.cancel.button:hover,
.ui.white.button:hover {
    background: rgba(var(--gold-rgb, 212, 175, 55), 0.1) !important;
    color: #e6c300 !important;
}

/* ─── primaryOutline — the "Save and exit" class ──────────────────────────────
   2026-09-07. Measured on /register/profile/step1: the button rendered as a GOLD
   GRADIENT with #ccc light-grey text, about 1.6:1, unreadable. Two rules in this
   file each win half of it:

     input[type="submit"], button[type="submit"]  background: gold gradient !important
                                                  color: #111 !important
     .ui.button                                   background-color: #333 !important
                                                  color: #ccc !important

   Both carry !important, so specificity decides, and it decides differently per
   property. .ui.button (0,2,0) beats input[type=submit] (0,1,1) for `color`, so the
   text stays #ccc. But .ui.button only sets background-COLOR, and nothing overrides
   the gradient in background-IMAGE - so the gold stays. Light grey on gold.
   The button's own class had no say at all: semantic/button.css styles
   .ui.primaryOutline.button in teal (#0cc0c0) without !important, so it loses to both.

   Every use of the class is a secondary action - "Save and exit" beside the gold
   primary "Continue", and the Cancel button in the delete-confirm overlay of 14
   widgets - so it takes the outline treatment the site already uses for .ui.secondary
   and .ui.cancel: transparent, gold border, gold text. Gold on the page ground is
   9.1:1. `background` is the shorthand, which resets background-image, so the
   gradient cannot bleed through; background-image is repeated explicitly in case a
   later rule sets only background-color again.                                    */
.ui.primaryOutline.button,
input[type="submit"].primaryOutline,
button[type="submit"].primaryOutline {
    background: transparent !important;
    background-image: none !important;
    color: var(--gold, #d4af37) !important;
    border: 1px solid var(--gold, #d4af37) !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ui.primaryOutline.button:hover,
.ui.primaryOutline.button:focus,
input[type="submit"].primaryOutline:hover,
input[type="submit"].primaryOutline:focus,
button[type="submit"].primaryOutline:hover,
button[type="submit"].primaryOutline:focus {
    background: rgba(var(--gold-rgb, 212, 175, 55), 0.10) !important;
    background-image: none !important;
    color: var(--gold-light, #f0d060) !important;
    border-color: var(--gold-light, #f0d060) !important;
    box-shadow: none !important;
}
/* keyboard focus needs a ring of its own - hover colours alone are not a focus cue */
.ui.primaryOutline.button:focus-visible,
input[type="submit"].primaryOutline:focus-visible,
button[type="submit"].primaryOutline:focus-visible {
    outline: 2px solid var(--gold-light, #f0d060) !important;
    outline-offset: 2px !important;
}
.ui.primaryOutline.active.button,
.ui.primaryOutline.button:active,
input[type="submit"].primaryOutline:active,
button[type="submit"].primaryOutline:active {
    background: rgba(var(--gold-rgb, 212, 175, 55), 0.18) !important;
    background-image: none !important;
    color: var(--gold-light, #f0d060) !important;
    border-color: var(--gold-light, #f0d060) !important;
}
.ui.primaryOutline.disabled.button,
.ui.primaryOutline.loading.button,
.ui.primaryOutline.button:disabled,
input[type="submit"].primaryOutline:disabled,
button[type="submit"].primaryOutline:disabled {
    background: transparent !important;
    background-image: none !important;
    color: var(--text-muted, #606070) !important;
    border-color: var(--text-muted, #606070) !important;
    opacity: 1 !important;                 /* the colours already say "off"; opacity on top makes it unreadable */
    cursor: not-allowed !important;
    pointer-events: none;
}


/* Green / positive button */
.ui.green.button,
.ui.positive.button {
    background: #27ae60 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.ui.green.button:hover,
.ui.positive.button:hover {
    background: #219a52 !important;
}

/* pinkText button — keep for backward compat but shift to gold */
.ui.pinkText.button {
    color: var(--gold, #d4af37) !important;
    background: transparent !important;
    border-color: transparent !important;
}
.ui.pinkText.button:hover {
    color: var(--gold-light, #f0d060) !important;
}

/* ─── Sidebar — dark background ──────────────────────────────────────────── */
.ui.sidebar,
.sidebar,
.slide-menu,
.nav-menu,
.off-canvas {
    background: #111 !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
}
.ui.sidebar.menu .item {
    color: #ccc !important;
}
.ui.sidebar.menu .item:hover,
.ui.sidebar.menu .active.item {
    color: #fff !important;
    background: rgba(255,255,255,0.05) !important;
}

/* ─── Modal / Popup — dark ───────────────────────────────────────────────── */
.ui.modal,
.modal-content,
.ui.popup {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    color: #fff !important;
}
.ui.modal > .header {
    background: #1a1a1a !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px 12px 0 0 !important;
}
.ui.modal > .content {
    background: #1a1a1a !important;
    color: #ddd !important;
}
.ui.modal > .actions {
    background: #1a1a1a !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0 0 12px 12px !important;
}

/* Dimmer overlay */
.ui.dimmer {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* ─── Dropdown — dark ────────────────────────────────────────────────────── */
.ui.dropdown .menu,
.dropdown-menu {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
}
.ui.dropdown .menu > .item,
.dropdown-menu .item {
    color: #ccc !important;
    border-top: 1px solid rgba(255,255,255,0.04) !important;
}
.ui.dropdown .menu > .item:hover,
.dropdown-menu .item:hover {
    background: rgba(255,255,255,0.05) !important;
    color: #fff !important;
}
.ui.dropdown .menu > .active.item,
.ui.dropdown .menu > .selected.item {
    background: rgba(var(--gold-rgb, 212, 175, 55), 0.1) !important;
    color: var(--gold, #d4af37) !important;
}
.ui.dropdown .menu > .header {
    color: var(--gold, #d4af37) !important;
}

/* ─── Form Inputs — dark with gold focus ─────────────────────────────────── */
.ui.input input,
.ui.form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.ui.form textarea,
.ui.form select {
    background: #222 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
}
.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.form select:focus {
    border-color: var(--gold, #d4af37) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(var(--gold-rgb, 212, 175, 55), 0.15) !important;
}
.ui.input input::placeholder,
.ui.form input::placeholder,
.ui.form textarea::placeholder,
.ui.form .stripe-cardholder-row input::placeholder,
.ui.form .discount-coupon input::placeholder {
    /* was #666, which is 2.77:1 on #222 and fails 4.5:1 for placeholder text */
    color: var(--input-placeholder, #a0a0b0) !important;
}

/* ─── Checkout text inputs — the two Stripe cardholder fields and the coupon ──────────────
   These are bare <input> elements, not inside a .ui.form, so the block above never reached
   them; they were left on the browser default with the view's own inline
   "border:1px solid #ccc" and no background. Whatever they inherited, they are not
   distinguishable from the #202020 payment card they sit on.

   One selector list for both Stripe blocks, deliberately: the Direct API and JS Element
   fields are the same control and must not drift into two styles. The coupon field is in the
   same list because it is the page's other hand-written input and there is no reason for it
   to look different.

   !important throughout because the view writes width / padding / border / border-radius /
   font-size as inline style attributes, and an inline style beats a stylesheet without it.
   Only the border is actually overridden; the rest of the inline geometry is left alone. */
/* ★ SPECIFICITY, not decoration. These fields are inside div.ui.form.generic-form, so the
   .ui.form rule above matches them - and every :not() argument counts, which puts it at (0,7,1).
   A shorter selector loses even with !important on both. Measured on the live page before this
   was corrected: field still #222, border 1.35:1, no gold focus ring.
   Mirroring that rule's :not() chain and adding one class of scope lands at (0,8,1), which reads
   as "the house rule, restricted to this row" rather than as an arbitrary weight hack. */
.ui.form .stripe-cardholder-row input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.ui.form .discount-coupon input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]) {
    background: var(--input-bg, #101016) !important;
    color: var(--text-primary, #fff) !important;
    border: 1px solid var(--input-border, #7a7a86) !important;
    border-radius: var(--radius-sm, 8px) !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}
/* :focus needs the same weight: the base rule's `border` shorthand carries !important at (0,7,1),
   so a border-color declared by a lighter :focus selector never applied. */
.ui.form .stripe-cardholder-row input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):focus,
.ui.form .discount-coupon input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):focus {
    /* Same gold focus treatment as every other input on the site, one step stronger on the ring
       because these sit on a lighter card than the form inputs the original rule was drawn for. */
    border-color: var(--input-focus-border, #d4af37) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--input-focus-ring, rgba(var(--gold-rgb, 212, 175, 55), 0.25)) !important;
}
/* The label above each Stripe field is inline-styled #555 by the view, which is 2.2:1 on the
   payment card. It is a label for the field directly beneath it, so it has to be readable. */
.ui.form .stripe-cardholder-row label {
    color: var(--text-secondary, #a0a0b0) !important;
}

/* ─── Stripe card container, before the iframe arrives ────────────────────────────────────
   The view gives #stripe-*-card-element an inline "background:#fff; min-height:40px", so until
   Stripe mounts its iframe the container is a blank white rectangle the height of a field. On a
   payment page that reads as a broken input rather than as loading, and it is the first thing
   under the cardholder name field.

   Measured on the checkout markup with real Stripe.js: the iframe lands about 120ms after the
   scripts run on a warm cache and about 850ms on the first load of a session, because Stripe.js
   is a third-party fetch. The Cardholder name field above is focusable and typable for that whole
   window, so nothing is blocked - it only looks wrong.

   This was NOT introduced by the input restyle: with design-tokens.css and theme-overrides.css
   disabled, the container's computed background, border, min-height, padding, visibility, z-index
   and overflow are byte-identical. The restyle only made the white rectangle more conspicuous by
   darkening what is around it.

   :has() scopes this to the empty state, so the skeleton disappears the moment the iframe exists,
   with no colour flip and no layout shift - it stays white throughout. A browser without :has()
   simply keeps today's behaviour. */
.widget.shopping-cart .stripe-card-element:not(:has(iframe)) {
    background-image: linear-gradient(90deg, #f2f2f2 25%, #e2e2e2 37%, #f2f2f2 63%) !important;
    background-size: 400% 100%;
    animation: sf-stripe-card-loading 1.3s ease-in-out infinite;
}
@keyframes sf-stripe-card-loading {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .widget.shopping-cart .stripe-card-element:not(:has(iframe)) {
        animation: none;
    }
}

/* ─── Section / Group Titles — gold ──────────────────────────────────────── */
.menu-group-title,
.section-title,
.ui.header.dividing {
    color: var(--gold, #d4af37) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    border-bottom: 1px solid rgba(var(--gold-rgb, 212, 175, 55), 0.2) !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
}

/* ─── Selection Dropdown trigger — dark ─────────────────────────────────── */
.ui.selection.dropdown {
    background: #222 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
}
.ui.selection.dropdown .text { color: #fff !important }
.ui.selection.dropdown .default.text { color: #666 !important }
.ui.selection.dropdown .dropdown.icon { color: #999 !important }
.ui.active.selection.dropdown,
.ui.selection.dropdown:focus {
    border-color: var(--gold, #d4af37) !important;
    background: #222 !important;
}
.ui.selection.dropdown .menu {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
.ui.search.dropdown > input.search { color: #fff !important }

/* ─── Toggle Switch — green on (NOT purple) ─────────────────────────────── */
/* html prefix boosts specificity above Semantic UI checkbox.css loaded later */
html .ui.toggle.checkbox input ~ .box:before,
html .ui.toggle.checkbox input ~ label:before {
    background: #333 !important;
    border: none !important;
}
html .ui.toggle.checkbox input:checked ~ .box:before,
html .ui.toggle.checkbox input:checked ~ label:before {
    background: #27ae60 !important;
}
html .ui.toggle.checkbox input:focus:checked ~ .box:before,
html .ui.toggle.checkbox input:focus:checked ~ label:before {
    background: #219a52 !important;
}
html .ui.toggle.checkbox .box:after,
html .ui.toggle.checkbox label:after {
    background: #fff !important;
}
html .ui.toggle.checkbox label { color: #ccc !important }
/* Widget-specific: availability-settings has 7-class selectors with !important */
html .widget.availability-settings .day .ui.toggle.checkbox label:before,
html .widget.availability-settings .day .ui.toggle.checkbox .box:before {
    background-color: #333 !important;
}
html .widget.availability-settings .day .ui.toggle.checkbox input:checked ~ label:before,
html .widget.availability-settings .day .ui.toggle.checkbox input:checked ~ .box:before {
    background-color: #27ae60 !important;
}
html .widget.availability-settings .day .ui.toggle.checkbox label:after,
html .widget.availability-settings .day .ui.toggle.checkbox .box:after {
    background-color: #fff !important;
}

/* ─── Checkbox / Radio — gold checked ───────────────────────────────────── */
html .ui.checkbox:not(.toggle) input ~ .box:before,
html .ui.checkbox:not(.toggle) input ~ label:before {
    background: #222 !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 3px !important;
}
html .ui.checkbox:not(.toggle) input:checked ~ .box:before,
html .ui.checkbox:not(.toggle) input:checked ~ label:before {
    background: var(--gold, #d4af37) !important;
    border-color: var(--gold, #d4af37) !important;
}
html .ui.checkbox:not(.toggle) input:checked ~ .box:after,
html .ui.checkbox:not(.toggle) input:checked ~ label:after {
    color: #111 !important;
}
html .ui.checkbox:not(.toggle) label { color: #ccc !important }
.ui.radio.checkbox input ~ label:before {
    border-radius: 50% !important;
}

/* ─── Table — dark ──────────────────────────────────────────────────────── */
.ui.table,
table {
    background: transparent !important;
    color: #ccc !important;
    border: none !important;
    border-collapse: collapse !important;
}
.ui.table thead th,
table thead th {
    background: rgba(255,255,255,0.03) !important;
    color: #999 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}
.ui.table tbody td,
table tbody td {
    border-top: 1px solid rgba(255,255,255,0.04) !important;
    color: #ccc !important;
}
.ui.table tbody tr:hover td,
table tbody tr:hover td {
    background: rgba(255,255,255,0.02) !important;
}
.ui.table tfoot th {
    background: rgba(255,255,255,0.02) !important;
    color: #999 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* ─── Segment / Card / Panel — dark ─────────────────────────────────────── */
.ui.segment {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #ccc !important;
}
.ui.card,
.ui.cards > .card {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #ccc !important;
}
.ui.card > .content,
.ui.cards > .card > .content {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    color: #ccc !important;
}
.ui.card > .content > .header,
.ui.cards > .card > .content > .header {
    color: #fff !important;
}

/* ─── Tabular Menu — gold active ────────────────────────────────────────── */
.ui.tabular.menu {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    background: transparent !important;
}
.ui.tabular.menu .item {
    color: #999 !important;
    border: none !important;
    background: transparent !important;
}
.ui.tabular.menu .item:hover {
    color: #ccc !important;
    background: transparent !important;
}
.ui.tabular.menu .active.item {
    color: var(--gold, #d4af37) !important;
    border-bottom: 2px solid var(--gold, #d4af37) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

/* ─── Messages / Alerts ─────────────────────────────────────────────────── */
.ui.success.message,
.ui.positive.message {
    background: rgba(39,174,96,0.1) !important;
    color: #27ae60 !important;
    border: 1px solid rgba(39,174,96,0.2) !important;
    box-shadow: none !important;
}
.ui.success.message .header,
.ui.positive.message .header { color: #2ecc71 !important }

.ui.error.message,
.ui.negative.message {
    background: rgba(231,76,60,0.1) !important;
    color: #e74c3c !important;
    border: 1px solid rgba(231,76,60,0.2) !important;
    box-shadow: none !important;
}
.ui.error.message .header,
.ui.negative.message .header { color: #e74c3c !important }

.ui.info.message {
    background: rgba(52,152,219,0.1) !important;
    color: #3498db !important;
    border: 1px solid rgba(52,152,219,0.2) !important;
    box-shadow: none !important;
}
.ui.info.message .header { color: #3498db !important }

.ui.warning.message {
    background: rgba(243,156,18,0.1) !important;
    color: #f39c12 !important;
    border: 1px solid rgba(243,156,18,0.2) !important;
    box-shadow: none !important;
}
.ui.warning.message .header { color: #f39c12 !important }

.ui.message { color: #ccc !important; background: #1a1a1a !important; box-shadow: none !important }
.ui.message .header { color: #fff !important }
.ui.message .close.icon { color: #999 !important }

/* ─── Form Labels — light ───────────────────────────────────────────────── */
.ui.form .field > label,
.ui.form label,
label {
    color: #ccc !important;
}
.ui.form .field.error > label { color: #e74c3c !important }
.ui.form .field.error input,
.ui.form .field.error textarea,
.ui.form .field.error .ui.dropdown {
    border-color: #e74c3c !important;
    background: rgba(231,76,60,0.05) !important;
}

/* --- Error state must not repaint the dropdown interior -------------------
   Semantic's dropdown module replaces every native <select> in these forms with a
   .ui.dropdown widget (the <select> itself becomes display:none), so the list the user
   sees is .ui.dropdown .menu > .item, not a native popup.

   semantic/form.css paints that widget for the error state:
       .ui.form .field.error .ui.dropdown,
       .ui.form .field.error .ui.dropdown .item,
       .ui.form .field.error .ui.dropdown .text   { background:#fff6f6; color:#9f3a38 }
       .ui.form .field.error .ui.dropdown .menu .item:hover     { background-color:#fbe7e7 }
       .ui.form .field.error .ui.dropdown .menu .active.item    { background-color:#fdcfcf !important }

   The dark theme above overrides only the COLOR of .item (L209) and .text (L272) and
   never their background, so in the error state the light Semantic backgrounds survive
   while the light dark-theme text colours stay put. Measured on /register/step1:
       .text        bg #fff6f6  color #fff     white on near-white
       .item        bg #fff6f6  color #ccc     light on light, effectively unreadable
       .active.item bg #fdcfcf  color #d4af37  pink row

   Restore the normal-state surfaces here. The error cue stays what it should be: the red
   border set above and the red label. Values are copied verbatim from the normal-state
   rules (L201/L209/L214/L219/L272) so the two states differ only in border colour.

   Specificity note: `.error.error` is deliberate, not a typo. Semantic's .menu .active.item
   rule is itself !important at (0,9,0), and semantic/form.css is injected at RUNTIME by the
   widget loader, i.e. AFTER this static stylesheet - so an equal-specificity rule here would
   lose on source order. Repeating the class takes these to (0,10,0) and makes the outcome
   independent of load order. */
.ui.form .field.error.error .ui.dropdown > .text,
.ui.form .field.error.error .ui.dropdown > .default.text,
.ui.form .fields.error .field.error .ui.dropdown > .text,
.ui.form .fields.error .field.error .ui.dropdown > .default.text {
    background: transparent !important;
}
.ui.form .field.error.error .ui.dropdown .menu > .item,
.ui.form .fields.error .field.error .ui.dropdown .menu > .item {
    background: transparent !important;
}
.ui.form .field.error.error .ui.dropdown .menu > .item:hover,
.ui.form .fields.error .field.error .ui.dropdown .menu > .item:hover {
    background: rgba(255,255,255,0.05) !important;
}
.ui.form .field.error.error .ui.dropdown .menu > .active.item,
.ui.form .field.error.error .ui.dropdown .menu > .selected.item,
.ui.form .fields.error .field.error .ui.dropdown .menu > .active.item,
.ui.form .fields.error .field.error .ui.dropdown .menu > .selected.item {
    background: rgba(var(--gold-rgb, 212,175,55),0.1) !important;
}
/* The red border cue itself was also being lost. semantic/form.css carries
       .ui.form .field.error .ui.dropdown, ...:hover { border-color:#e0b4b4 !important }
   at (0,6,0) - the same specificity as the rule above - and being injected at runtime it
   won on source order, so the error border rendered pale pink #e0b4b4 instead of #e74c3c.
   Measured before this rule: border-top-color = rgb(224,180,180). */
.ui.form .field.error.error .ui.dropdown,
.ui.form .field.error.error .ui.dropdown:hover,
.ui.form .fields.error .field.error .ui.dropdown,
.ui.form .fields.error .field.error .ui.dropdown:hover {
    border-color: #e74c3c !important;
}
/* multiple-selection dropdowns: same problem on the chosen-value labels */
.ui.form .field.error.error .ui.multiple.selection.dropdown > .label,
.ui.form .fields.error .field.error .ui.multiple.selection.dropdown > .label {
    background-color: rgba(var(--gold-rgb, 212,175,55),0.15) !important;
    color: var(--gold, #d4af37) !important;
}


/* ─── Links — gold ──────────────────────────────────────────────────────── */
/* ★★ .prev/.next ARE EXCLUDED BECAUSE THIS RULE IS ABOUT PROSE LINKS, NOT CONTROLS.
   The exclusion list already carves out .ui, .menu-item and anything class-named
   button/btn-, which is the same intent: a link a person reads gets gold, a control
   a person presses keeps the colour its own component gave it. The pager anchors
   are class="prev"/class="next" and matched nothing in that list, so they were
   being claimed as prose.
   What that cost: this selector is (0,4,3). The pager's own colour lives in
   design-tokens.css §"Phase 5h v8r" as `.widget.pagination a.next { color:#fff }`,
   which is (0,3,1) - so even though BOTH carry !important, this one won and painted
   #d4af37 over the white. On .widget.pagination a.next the background is --primary
   #e91e63, and gold on that pink is about 1.6:1 - the NEXT button was effectively
   unreadable. Disabled PREVIOUS lost its muted grey the same way.
   It only showed up inside the account layout, because `body.has-acct-sidebar
   article` is the gate; the identical pager on the city and search pages was
   always fine, which is why the v8r fix looked complete when it was written. */
body.has-acct-sidebar article a:not(.ui):not(.menu-item):not(.prev):not(.next):not([class*="button"]):not([class*="btn-"]),
.account-content a:not(.ui):not(.prev):not(.next):not([class*="button"]):not([class*="btn-"]) {
    color: var(--gold, #d4af37) !important;
}
body.has-acct-sidebar article a:not(.ui):not(.menu-item):not(.prev):not(.next):not([class*="button"]):not([class*="btn-"]):hover,
.account-content a:not(.ui):not(.prev):not(.next):not([class*="button"]):not([class*="btn-"]):hover {
    color: var(--gold-light, #f0d060) !important;
}

/* ─── Breadcrumbs ───────────────────────────────────────────────────────── */
.ui.breadcrumb { color: #999 !important }
.ui.breadcrumb a { color: var(--gold, #d4af37) !important }
.ui.breadcrumb .divider { color: #555 !important }
.ui.breadcrumb .active.section { color: #fff !important }

/* ─── Pagination ────────────────────────────────────────────────────────── */
.ui.pagination.menu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.ui.pagination.menu .item {
    color: #999 !important;
    background: #222 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
.ui.pagination.menu .active.item {
    background: var(--gold, #d4af37) !important;
    color: #111 !important;
    border-color: var(--gold, #d4af37) !important;
}
.ui.pagination.menu .item:hover {
    background: #333 !important;
    color: #fff !important;
}

/* ─── Loader / Dimmer ───────────────────────────────────────────────────── */
.ui.loader:after { border-color: var(--gold, #d4af37) transparent transparent !important }
.ui.loader:before { border-color: rgba(255,255,255,0.1) !important }
.ui.text.loader { color: #ccc !important }

/* ─── Progress Bar ──────────────────────────────────────────────────────── */
.ui.progress { background: #333 !important }
.ui.progress .bar { background: linear-gradient(90deg, var(--gold, #d4af37), var(--gold-light, #f0d060)) !important }
.ui.progress .bar > .progress { color: #111 !important }
.ui.progress > .label { color: #999 !important }

/* ─── Accordion ─────────────────────────────────────────────────────────── */
.ui.accordion .title { color: #ccc !important }
.ui.accordion .active.title { color: var(--gold, #d4af37) !important }
.ui.accordion .content { color: #ccc !important }

/* ─── Label / Tag ───────────────────────────────────────────────────────── */
.ui.label {
    background: #333 !important;
    color: #ccc !important;
    border: none !important;
}
.ui.green.label { background: #27ae60 !important; color: #fff !important }
.ui.red.label { background: #e74c3c !important; color: #fff !important }
.ui.yellow.label,.ui.orange.label { background: #f39c12 !important; color: #111 !important }
.ui.blue.label { background: #3498db !important; color: #fff !important }

/* ─── Status text colors (Order History etc.) ───────────────────────────── */
.status-paid,.text-success { color: #27ae60 !important }
.status-pending,.text-warning { color: #f39c12 !important }
.status-failed,.text-danger { color: #e74c3c !important }

/* ─── Account page content — ensure dark backgrounds ────────────────────── */
body.has-acct-sidebar article {
    background: #0d0d0d !important;
}
body.has-acct-sidebar article .panel,
body.has-acct-sidebar article .account-card,
body.has-acct-sidebar article .card-section {
    background: #1a1a1a !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    color: #ccc !important;
}
body.has-acct-sidebar article h1,
body.has-acct-sidebar article h2,
body.has-acct-sidebar article h3,
body.has-acct-sidebar article h4 {
    color: #fff !important;
}

/* ─── submit / save buttons (input[type=submit]) ────────────────────────── */
input[type="submit"],
button[type="submit"] {
    background: linear-gradient(90deg, var(--gold, #d4af37), var(--gold-light, #f0d060)) !important;
    color: #111 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    cursor: pointer !important;
}
input[type="submit"]:hover,
button[type="submit"]:hover {
    opacity: 0.92 !important;
}

/* ─── Native select (non-Semantic) — dark ───────────────────────────────── */
select {
    background: #222 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
select option {
    background: #1a1a1a !important;
    color: #ccc !important;
}

/* ─── Dashboard Graph — modern dark chart cards ──────────────────────── */
.widget.dashboard-graph-pageviews,
.widget.dashboard-graph-search {
    background: #141414 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 14px !important;
    padding: 0 !important;
    overflow: hidden;
}
.widget.dashboard-graph .graph-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    display: flex;
}
.widget.dashboard-graph .graph-header .tab {
    background-color: transparent !important;
    color: #888 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all .2s;
}
.widget.dashboard-graph .graph-header .tab:hover {
    background-color: transparent !important;
    color: #ccc !important;
}
.widget.dashboard-graph .graph-header .tab.active,
.widget.dashboard-graph .graph-header .tab.active:hover {
    background-color: transparent !important;
    color: var(--gold, #d4af37) !important;
    border-bottom-color: var(--gold, #d4af37) !important;
}
.widget.dashboard-graph .top {
    padding: 20px 24px 0 !important;
    background: transparent !important;
}
.widget.dashboard-graph .variance {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
}
.widget.dashboard-graph .variance .figure {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1 !important;
}
.widget.dashboard-graph .variance .arrow {
    font-size: 16px !important;
}
.widget.dashboard-graph .variance .arrow .icon.down {
    color: #e74c3c !important;
}
.widget.dashboard-graph .variance .arrow .icon.up {
    color: #27ae60 !important;
}
.widget.dashboard-graph .variance.positive .arrow .icon {
    color: #27ae60 !important;
}
.widget.dashboard-graph .variance .percentage {
    color: #888 !important;
    font-size: 13px !important;
}
.widget.dashboard-graph .variance .label {
    color: #555 !important;
    font-size: 12px !important;
}
.widget.dashboard-graph .chart-container {
    background: transparent !important;
    padding: 12px 16px 16px !important;
    height: 260px !important;
    position: relative !important;
}
.widget.dashboard-graph .chart-container canvas {
    background: transparent !important;
}
.widget.dashboard-graph .graph-label {
    background-color: transparent !important;
    color: #ccc !important;
}
.widget.dashboard-graph .location-key {
    padding: 8px 24px 16px !important;
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}
.widget.dashboard-graph .location-key .location {
    color: #aaa !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.widget.dashboard-graph .location-key .location span {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}
.widget.dashboard-graph .filter-dropdown {
    color: #ccc !important;
}
.widget.dashboard-graph .filter-dropdown select,
.widget.dashboard-graph .filter-dropdown .ui.dropdown {
    background: #222 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
}
.widget.dashboard-graph .filter-dropdown .ui.dropdown .menu {
    background: #222 !important;
    border-color: rgba(255,255,255,0.1) !important;
}
.widget.dashboard-graph .filter-dropdown .ui.dropdown .menu .item {
    color: #ccc !important;
}
.widget.dashboard-graph .filter-dropdown .ui.dropdown .menu .item:hover {
    background: #333 !important;
    color: #fff !important;
}
.widget.dashboard-graph .filter-dropdown .ui.dropdown .menu .item.active,
.widget.dashboard-graph .filter-dropdown .ui.dropdown .menu .item.selected {
    background: rgba(var(--gold-rgb, 212,175,55),0.12) !important;
    color: var(--gold, #d4af37) !important;
    font-weight: 600 !important;
}
.widget.dashboard-graph .filter-dropdown .ui.dropdown .dropdown.icon,
.widget.dashboard-graph .filter-dropdown .ui.dropdown i.icon,
.widget.dashboard-graph .filter-dropdown .ui.dropdown .dropdown.icon::before,
.widget.dashboard-graph .filter-dropdown .ui.dropdown i.icon::before {
    color: var(--gold, #d4af37) !important;
}
.widget.dashboard-graph .variance.positive .percentage {
    color: #27ae60 !important;
}
.widget.dashboard-graph .variance:not(.positive) .percentage {
    color: #e74c3c !important;
}
.widget.dashboard-graph .bottom {
    background: transparent !important;
    padding: 0 24px 16px !important;
}
/* ─── Dashboard Graph Search — engagement cards ───────────────────── */
.dgs-engage {
    padding: 4px 0 0 !important;
}
.dgs-engage-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
}
.dgs-engage-card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 10px !important;
    padding: 16px 12px !important;
    text-align: center !important;
    transition: border-color 0.2s !important;
}
.dgs-engage-card:hover {
    border-color: rgba(255,255,255,0.14) !important;
}
.dgs-engage-val {
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}
.dgs-engage-lbl {
    font-size: 10px !important;
    color: #777 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-top: 5px !important;
    font-weight: 600 !important;
}
.dgs-engage-chg {
    font-size: 11px !important;
    color: #e74c3c !important;
    margin-top: 5px !important;
    font-weight: 600 !important;
}
.dgs-engage-chg.positive {
    color: #27ae60 !important;
}
.dgs-arr-up { font-size: 8px !important; }
.dgs-arr-dn { font-size: 8px !important; }
.dgs-engage-conv {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 12px !important;
    padding: 10px 14px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 8px !important;
}
.dgs-engage-conv-lbl {
    font-size: 11px !important;
    color: #777 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}
.dgs-engage-conv-val {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--gold, #d4af37) !important;
}
.dgs-engage-link {
    text-align: center !important;
    padding: 12px 0 2px !important;
}
.dgs-engage-link a {
    color: var(--gold, #d4af37) !important;
    font-size: 12px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.dgs-engage-link a:hover { text-decoration: underline !important; }

/* ─── Private Gallery (apg-*) — injected by private-gallery-edit.js ────── */
/* The component ships a light-theme stylesheet inside its own script; this is the dark-theme
   half. It was incomplete: it repainted the containers but left the text colours that sit on
   them, so several pieces were dark-on-dark. Measured on /account/gallery/edit (R14), worst
   first - .apg-quota strong at 1.19:1 is the "Photos used: 1 / 10" numbers the owner reported:

     .apg-quota strong          #111111 on #222222   1.19:1
     .apg-confirm body strong   #111111 on #1a1a1a   1.08:1
     .apg-modal-body            #374151 on #1a1a1a   1.69:1
     .apg-btn-secondary         #d4af37 on #f9fafb   2.01:1   (light footer never repainted)
     .apg-btn[disabled]         #ffffff on #9ca3af   2.54:1
     .apg-modal-close           #6b7280 on #1a1a1a   3.60:1
     .apg-edit-val / label      #6b7280 on #1a1a1a   3.60:1
     .apg-hint (upload note)    #6b7280 on #1a1a1a   3.60:1

   Everything below is written in design tokens, so the next palette change carries. Nothing here
   invents a colour. The status pills (.apg-status.is-pending / .is-approved) and the .apg-msg
   banners are deliberately left alone: they are light chips that sit on photos, and they already
   measure 7.9:1 and 8.6:1. */
.apg-section {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
.apg-section h2 {
    color: var(--text-primary) !important;
}
.apg-section .apg-sub {
    color: var(--text-secondary) !important;
}
.apg-empty {
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
}
.apg-quota {
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
}
/* the reported defect: the counts are <strong>, and the base sheet paints those near-black */
.apg-quota strong {
    color: var(--text-primary) !important;
}
/* the upload note under "+ Add a photo"; it used to carry its colour inline, which no
   stylesheet could reach - private-gallery-edit.js now gives it this class instead */
.apg-hint {
    color: var(--text-secondary) !important;
}
.apg-btn-secondary {
    background: transparent !important;
    color: var(--gold) !important;
    border-color: var(--gold) !important;
}
/* disabled is exempt from the contrast minimum, but it was white on light grey and read as
   enabled; this keeps it legible and clearly inert */
.apg-btn[disabled] {
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
}
.apg-modal-dialog {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}
.apg-modal-dialog h2,
.apg-modal-dialog h3 {
    color: var(--text-primary) !important;
}
.apg-modal-head,
.apg-modal-foot {
    border-color: var(--border-color) !important;
}
/* the footer kept its light strip, which is what put gold on near-white */
.apg-modal-foot {
    background: var(--bg-elevated) !important;
}
.apg-modal-close {
    color: var(--text-secondary) !important;
}
.apg-modal-close:hover {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}
.apg-confirm .apg-modal-body {
    color: var(--text-secondary) !important;
}
.apg-confirm .apg-modal-body strong {
    color: var(--text-primary) !important;
}
.apg-edit-tool label,
.apg-edit-val {
    color: var(--text-secondary) !important;
}
.apg-edit-chip {
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}
.apg-edit-chip.is-active {
    background: var(--gold) !important;
    color: var(--bg-dark) !important;
    border-color: var(--gold) !important;
}
/* photo tiles: the placeholder behind an image, before it decodes */
.apg-cell {
    background: var(--bg-elevated) !important;
    border-color: var(--border-color) !important;
}

/* ─── Boost ranking buttons — fix gold-on-gold contrast ────────────────── */
a.btn-boost-now,
.boost-rank-card .btn-boost-now {
    color: #111 !important;
}
a.btn-boost-now:hover,
.boost-rank-card .btn-boost-now:hover {
    color: #111 !important;
}
a.btn-schedule-boost,
.boost-rank-card .btn-schedule-boost {
    color: var(--gold, #d4af37) !important;
}
a.btn-schedule-boost:hover,
.boost-rank-card .btn-schedule-boost:hover {
    color: var(--gold, #d4af37) !important;
}

/* 2026-09-08: host for the photo-preview overlays (zoom-overlay-close.js). Eight widgets own a
   .zoom-container; each is reparented here so it escapes the ancestor stacking contexts that
   pinned it under the fixed site header. Lives here, not in a widget stylesheet, because the
   overlay must work on every page that has one.
   position:static  - the host must add no stacking context of its own.
   opacity/animation - the host copies the owner's classes (so the owner's own rules still match
   inside), which drags in .widget's opacity:0 fade-in. An animation beats even an inline
   !important opacity, measured, so the animation has to go too.
   box - 2026-09-08: copying the classes also drags in the owner's BOX. .apg-section (the Private
   Gallery editor, the first non-widget to use this) carries background #1a1a1a, a border, 24px
   padding and 32px margins, which at body level is an empty dark bar under the page. The host is a
   transport, not a surface: it contributes nothing but a position in the DOM. */
.sf-zoom-host{position:static!important;opacity:1!important;animation:none!important;-webkit-animation:none!important;transition:none!important;background:none!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important;min-height:0!important}
.sf-zoom-host .zoom-container{z-index:2147483000}

/* 2026-09-17: Semantic UI Calendar (plugins/semantic-calendar, 0.0.8) on the dark theme. Owner's
   decision on Reports/datepicker-colours-2026-09-17.md: all seven pickers on the site, items A-G.
   Overridden here, never in calendar.css: that file is a minified vendor copy that 30 loaders pull
   in, and none of its rules use !important, so !important here wins whatever the load order (the
   loaders append calendar.css AFTER this file).
   Colours measured with getComputedStyle, not taken from screenshots; contrast is on the popup's
   #1a1a1a (the .ui.popup rule above).
   Specificity is not decoration. The rules below sit at (0,7,3) because they have to beat
     .ui.table tbody td            {color:#ccc !important}        (0,2,2) - this file, Table block
     .ui.table tbody tr:hover td   {background ... !important}    (0,3,3) - this file, Table block
     .ui.table td.active           {background:#e0e0e0 !important} (0,3,1) - semantic/table.css, on
                                                                   pages whose widgets load it
   and calendar.css's own focus rule, which is (0,7,3) without !important.
   Cascade order between the cell states is deliberate: focus, then today (today stays gold when it
   is also the focused cell), then disabled, then active (the selected date wins over everything). */

/* B. focus / hover. The plugin moves the "focus" class to the hovered cell and starts it on today,
   so this is the ring for all three. Was #85b7d9 (stock Semantic blue, no source on this site).
   Scoped exactly like calendar.css's own rule (popup .active while the pointer is inside it, or
   :focus from the keyboard): unscoped, today would wear the ring the moment the popup opens, and
   today is meant to be a marker (A), not a focus. */
.ui.calendar .calendar.active .ui.table tbody tr td.focus,
.ui.calendar .calendar:focus .ui.table tbody tr td.focus {
    box-shadow: inset 0 0 0 1px var(--gold, #d4af37) !important;
    background: var(--gold-dim, rgba(var(--gold-rgb, 212, 175, 55), 0.15)) !important;
    color: #fff !important;
}
/* A. today: a marker, not a focus. Was bold only (then the blue focus ring on open). */
.ui.calendar .ui.popup .ui.table tbody tr td.today {
    color: var(--gold, #d4af37) !important;
    font-weight: 700 !important;
}
/* D. adjacent-month and past dates. The plugin's rgba(40,40,40,.3) was overridden by the table
   rule's #ccc, so they looked exactly like clickable dates (pointer-events:none still applies).
   --text-muted is the semantic variable: 2.82:1, and 3.84:1 apart from the #ccc of clickable dates.
   WCAG sets no minimum for disabled text. Not --input-border (#7a7a86): wrong meaning. */
.ui.calendar .ui.popup .ui.table tbody tr td.disabled {
    color: var(--text-muted, #606070) !important;
}
/* C. the selected date. Was no style at all, or #e0e0e0 with black text where table.css loads.
   Same gold with #111 text as the primary button at the top of this file: 8.98:1. */
.ui.calendar .ui.popup .ui.table tbody tr td.active {
    background: var(--gold, #d4af37) !important;
    color: #111 !important;
    box-shadow: none !important;
}
.ui.calendar .calendar.active .ui.table tbody tr td.active.focus,
.ui.calendar .calendar:focus .ui.table tbody tr td.active.focus {
    box-shadow: inset 0 0 0 1px var(--gold-light, #f0d060) !important;
}
/* E. previous / next month arrows. Was #000 from calendar.css: 1.21:1. Now 6.75:1. */
.ui.calendar .chevron.icon {
    color: var(--text-secondary, #a0a0b0) !important;
}
/* F. the calendar icon inside the input. Was #000 (1.32:1 on the input), measured on both the
   .datepicker and the .datepicker-date inputs: main.css `.datepicker-date .icon{color:#fc3dff}` is
   (0,2,0) without !important and never reached the icon. That main.css line is left alone (a second
   file, not opened for this change). --text-secondary, not gold: gold on this site is the accent
   for focus and selection, not for a permanent decoration. 6.17:1. */
.ui.calendar .ui.icon.input > i.icon {
    color: var(--text-secondary, #a0a0b0) !important;
    opacity: 1 !important;
}
/* G. the date input. The .ui.form input rule near the top of this file is (0,7,1) with a
   !important border shorthand, so its gold :focus border-color at (0,3,1) never applied: only the
   15% gold glow showed. Same trap and same fix as the Stripe cardholder / coupon inputs: mirror the
   :not() chain and add a scope, here (0,9,1). The input variables are the ones design-tokens.css
   defines for inputs. The second selector is for date inputs that are not inside a .ui.form (the
   touring dates template, the edit-at-will pause date): there the base is `.ui.input input` at
   (0,2,1), and (0,4,1) is enough. Also covers the edit-at-will pause date on purpose (owner: no
   exception), whose own black-underline rule has no !important on colour or border. */
.ui.form .ui.calendar input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.ui.calendar .ui.input > input {
    background: var(--input-bg, #101016) !important;
    border: 1px solid var(--input-border, #7a7a86) !important;
}
.ui.form .ui.calendar input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):focus,
.ui.calendar .ui.input > input:focus {
    border-color: var(--input-focus-border, #d4af37) !important;
}

/* 2026-09-17: the close button (x) in the top-right corner of the extras / edit-rates modals.
   Owner's decision on Reports/boost-modal-close-and-heading-2026-09-17.md section 5.
   The x had NO colour rule at all: it inherited the browser's default button text colour (black),
   1.21:1 on the #1a1a1a modal. Its hover, from the widgets' own CSS written for the light theme, was a
   #eee block behind the black x. Two identical copies of that CSS style exactly eight modals:
     widgets/dashboard-extras/dashboard-extras.css:1   purchase-boost, schedule-boost, boost-now,
                                                       boost-now-schedule-boost, purchase-available-now,
                                                       activate-available-now, apply-more-available-now
     widgets/inherited-locations/inherited-locations.css:1   edit-rates (registration step 4, location editor)
   Scope is `.ui.modal .heading`, which is those eight and nothing else: the account menu, mobile menu
   and photo crop / censor close buttons share the class name but not the ancestors, and keep their
   own styles. Those widget rules are (0,6,0) without !important, so these win regardless of order.
   At rest: --text-secondary, the colour of the calendar arrows and input icon in the same modal. 6.75:1.
   Hover: rgba(255,255,255,.12) with white is not a token; it is the hover the site's other close
   buttons already use (account-menu.css:9, mobile-menu.css:13), reused rather than invented. 12.27:1. */
.ui.modal .heading .close-button {
    color: var(--text-secondary, #a0a0b0) !important;
}
.ui.modal .heading .close-button:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--text-primary, #fff) !important;
}

/* Gallery over-allowance note (2026-09-18, "N more photos not shown").
   `.images` is a 2/4/6-column grid, so a plain child would take one cell and sit inside the photo grid.
   This is the same treatment design-tokens.css:2170 already gives the sibling `.verified` line in that
   same container - full row, --text-secondary, 0.8rem - reused rather than invented, so the two notes
   under a gallery read as one pair. No colour, border or weight of its own: it is a statement, not a
   call to action, because nothing in K13 can reveal the photos it counts. */
.widget.public-profile-gallery .images > .more-images {
    grid-column: 1 / -1;
    color: var(--text-secondary, #a0a0b0) !important;
    font-size: 0.8rem !important;
    margin-top: 8px !important;
}

/* The X mark as an icon-font class (2026-09-23, "Post to X" in the account menus).
   The Font Awesome Pro build here predates fa-x-twitter and the site's icon font only has the old
   bird, so the glyph is drawn: a 1em box painted in currentColor through the X path as a mask. It
   therefore sizes and colours exactly like the <i class="fas fa-..."> icons it sits between - the
   desktop sidebar (dashboard-menu.js) and the mobile menu (mobile-menu.js) both write
   <i class="fas fa-x-mark">, from the one icon table dashboard-menu.js shares. Global here because
   the two menus load different widget stylesheets. */
.fa-x-mark::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Site footer on a phone (owner 2026-10-02: "messy, small type, tall gaps"; 13:01: "gaps still absurd, type still
   small").
   Was: one centred run of links that wrapped at random points, each raised to a 44px tap target by
   mobile-safe.css and 16px apart (rows ~60px high), and the notices at 11px in #606070.
   Now: the links as a two-column list with dividers, the 18+ notice as a small card, the legal row and the
   reCAPTCHA notice at 13-14px in the secondary text colour, and tight spacing.
   Here, not in widgets/footer/footer.css: widget stylesheets load as <link rel=preload as=style> without a
   version and iPhone Safari never revalidated them (IIS log 2026-10-02); this file is revalidated on every load.
   Every selector starts "html body": footer.css is inserted by main.js after this file, so on equal specificity
   its rules won (17619ced reached the phone with only the chevrons, dividers and the card working).
   ========================================================================== */
@media (max-width: 767px) {
    html body .widget.footer {
        margin-top: 0;
        padding: 24px 20px calc(32px + env(safe-area-inset-bottom, 0px));
        text-align: left;
        font-size: 15px;
        line-height: 1.5;
    }
    html body .widget.footer .wrapper {
        display: flex;
        flex-direction: column;
    }
    /* the links and notices were weight 300 (the links' own font is Outfit since 2026-10-04; was Lato) - too faint at this size */
    html body .widget.footer .copy,
    html body .widget.footer .footer-links a,
    html body .widget.footer .copyright,
    html body .widget.footer .copyright .links a,
    html body .widget.footer .disclaimer {
        font-weight: 400;
    }

    /* the links first, as a list */
    html body .widget.footer .footer-links {
        order: 1;
        margin: 0;
    }
    html body .widget.footer .footer-links ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        row-gap: 0;
        justify-content: stretch;
    }
    html body .widget.footer .footer-links ul li {
        border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    }
    html body .widget.footer .footer-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 48px;
        padding: 8px 0;
        font-size: 15px;
        line-height: 1.3;
        color: var(--text-primary, #fff);
        opacity: 0.88;
    }
    html body .widget.footer .footer-links a::after {
        content: "\203A";
        flex: none;
        font-size: 20px;
        line-height: 1;
        color: var(--text-secondary, #a0a0b0);
        opacity: 0.7;
    }
    html body .widget.footer .footer-links a:active {
        color: var(--gold, #d4af37);
        opacity: 1;
    }

    /* the 18+ notice: a small card with a badge */
    html body .widget.footer .copy {
        order: 2;
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 20px 0 0;
        max-width: none;
        padding: 12px 14px;
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
        color: var(--text-secondary, #a0a0b0);
        font-size: 14px;
        line-height: 1.5;
        text-align: left;
    }
    html body .widget.footer .copy::before {
        content: "18+";
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1.5px solid var(--gold, #d4af37);
        border-radius: 50%;
        color: var(--gold, #d4af37);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0;
    }

    /* copyright, the legal links and the reCAPTCHA notice: left-aligned like the list above, and clear of the
       fixed back-to-top button (right 17-30px, ~44px wide) that sits over this area at the end of the page -
       bottom padding to clear it would have been ~130-200px of empty footer */
    html body .widget.footer .copyright {
        order: 3;
        margin-top: 16px;
        /* 44px: the content's right edge ends ~10px left of the button at 390px */
        padding: 12px 44px 0 0;
        gap: 0;
        align-items: flex-start;
        color: var(--text-secondary, #a0a0b0);
        font-size: 14px;
        text-align: left;
    }
    /* no divider bars: on a narrow phone the row wraps and a bar was left in front of the wrapped link */
    html body .widget.footer .copyright .links {
        justify-content: flex-start;
        gap: 0 8px;
    }
    /* 32px rows: the three fit one line at 390px; where they wrap (375px and less) the lines stay close */
    html body .widget.footer .copyright .links a {
        min-height: 32px;
        font-size: 14px;
    }
    html body .widget.footer .copyright .links a::before {
        display: none;
    }

    /* reCAPTCHA notice */
    html body .widget.footer .disclaimer {
        order: 4;
        margin: 4px 0 0;
        max-width: none;
        padding-right: 44px;
        opacity: 1;
        color: var(--text-secondary, #a0a0b0);
        font-size: 13px;
        line-height: 1.6;
        text-align: left;
    }
    html body .widget.footer .disclaimer a {
        color: var(--gold, #d4af37);
    }
}

/* 2026-10-08 (owner): the server's package table (and, on /account/upgrade and /packages/*, the title and intro around
   it) is rebuilt by a script that main.js loads late - upgrade-page.js or package-page.js. Until then the old markup
   showed, for seconds on a first visit. Every view that renders .widget.package-table (Package, Upgrade, Step 6,
   Documentation) is rebuilt, so it starts hidden; the scripts then set display:none on it. If a script never runs, the
   animation shows the old markup after 8s. The :has() rule is separate: a browser without :has() drops only that one. */
.widget.package-table {
    visibility: hidden;
    animation: sf-package-reveal 0s 8s forwards;
}
article:has(> .widget.package-table) > :is(h1, .widget.show-hide-richtext, .widget.advertising-packages) {
    visibility: hidden;
    animation: sf-package-reveal 0s 8s forwards;
}
@keyframes sf-package-reveal {
    to { visibility: visible; }
}