/* The shared vocabulary every screen speaks - loaded before any screen's own
   stylesheet, in the app, the admin's phone preview and the partner website. A screen
   keeps its own classes for what is particular to it; these are the parts that look
   the same wherever they appear. See the design spec (2026-09-29).

   The rule of thumb is the phone's own settings app: one way back, in the accent,
   named for where it goes; headings that are headings; one primary button per view;
   help text quieter than content; balances in the secondary colour, never the
   colour of something you tap.

   Colour, shape and depth come from the theme's tokens (ThemeTokens). Size and rhythm
   are the same in every theme and live here. */

:root {
    /* Type: seven roles. A theme changes the face and may uppercase headings; it
       never changes the sizes. */
    --wx-fs-display: 1.75rem;
    --wx-fs-title: 1.25rem;
    --wx-fs-heading: 1.0625rem;
    --wx-fs-body: 1rem;
    --wx-fs-callout: 0.9375rem;
    --wx-fs-footnote: 0.8125rem;
    --wx-fs-caption: 0.75rem;

    /* Spacing, on a 4px base. */
    --wx-s1: 4px;
    --wx-s2: 8px;
    --wx-s3: 12px;
    --wx-s4: 16px;
    --wx-s5: 24px;
    --wx-s6: 32px;
    --wx-s7: 48px;

    /* Controls: a button, a stepper; a small one; a row. */
    --wx-control-h: 48px;
    --wx-control-h-sm: 36px;
    --wx-row-h: 52px;
}

/* ---- the room ---------------------------------------------------------- */

/* Every scrolling view has the same sides. */
.wx-pad {
    padding: var(--wx-s3) 14px 28px;
}

/* The sides only - for a nav row above a picture that runs edge to edge. */
.wx-pad-x {
    padding-left: 14px;
    padding-right: 14px;
}

/* ---- the way back ------------------------------------------------------ */

/* The top row of a pushed view: the way back on the left, named for where it goes,
   and the view's title when it has one. A pushed view slides in. One per view -
   there is never a second way back further down. */
.wx-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 40px;
    margin: -2px 0 6px;
}

.wx-nav .wx-back { justify-self: start; }

/* A link on the right of the top bar - Print receipt, My orders - in the back link's
   own quiet style, so the bar reads as one line of navigation. */
.wx-nav .wx-nav-action {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0 8px 6px;
    border: 0;
    background: none;
    color: var(--wx-signal, #d4af37);
    font: inherit;
    font-size: var(--wx-fs-callout);
    font-weight: 500;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.wx-nav .wx-title {
    grid-column: 2;
    margin: 0;
    font-family: var(--wx-font-display, inherit);
    font-size: var(--wx-fs-heading);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "‹ Account". Never capitalised, whatever the theme does to headings. */
.wx-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 6px 8px 0;
    border: 0;
    background: none;
    color: var(--wx-signal, #d4af37);
    font: inherit;
    font-size: var(--wx-fs-callout);
    font-weight: 500;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.wx-back .fas { font-size: 0.8rem; }

.wx-back:hover { opacity: 0.85; }

.wx-push {
    animation: wx-push 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes wx-push {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .wx-push { animation: none; }
}

/* One back, always. A room (.wx-room) that opens one of its things in place - an
   order, a message thread - lets that subview's own back row stand in for the room's
   while it is open, instead of stacking "‹ Account" over "‹ Orders". Its intro line
   (.wx-room-intro) steps aside too; the website's header bar (.room-bar) with it. */
.wx-room:has(.wx-subview) > .wx-nav,
.wx-room:has(.wx-subview) > .wx-room-intro,
.wx-room:has(.wx-subview) > .room-bar { display: none; }

/* Every shared piece sizes its border and padding inside its width. The website gets
   this from Bootstrap; the app and the admin's preview have no Bootstrap, and a
   width:100% field there was 100% plus its padding - the Profile page's fields ran over
   each other and off the screen (2026-09-30). Said here so no host has to. */
.wx-btn, .wx-link, .wx-icon-btn, .wx-chip,
.wx-field, .wx-input, .wx-check, .wx-switch, .wx-stepper, .wx-step,
.wx-group, .wx-row, .wx-card, .wx-card-body, .wx-tag,
.wx-loading, .wx-empty, .wx-sheet, .wx-nav {
    box-sizing: border-box;
}

/* ---- words ------------------------------------------------------------- */

/* A section heading. */
.wx-h {
    margin: 0;
    font-family: var(--wx-font-display, inherit);
    font-size: var(--wx-fs-heading);
    font-weight: 600;
    line-height: 1.3;
}

/* A line of help under a heading or a field - quieter than content. */
.wx-text {
    margin: 0;
    color: var(--wx-muted, #9a9a9a);
    font-size: var(--wx-fs-footnote);
    line-height: 1.45;
}

/* A stat's label, an eyebrow over a heading: the one role that is always uppercase. */
.wx-caption {
    font-size: var(--wx-fs-caption);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wx-muted, #9a9a9a);
}

/* A number of points or entries, anywhere. The secondary colour, tabular. */
.wx-balance {
    font-family: var(--wx-font-data, ui-monospace, Consolas, monospace);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--wx-coin, #d4af37);
}

/* What just happened, good or bad, directly under the control that did it. */
.wx-message {
    margin: 0;
    font-size: var(--wx-fs-footnote);
    font-weight: 600;
    line-height: 1.4;
    color: var(--wx-muted, #9a9a9a);
}

.wx-message.is-good { color: var(--wx-good, #4caf50); }
.wx-message.is-bad  { color: var(--wx-bad, #e5484d); }

/* ---- buttons ----------------------------------------------------------- */

/* The one thing to do on a view: the primary colour, sentence case, 48px tall. */
.wx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--wx-control-h);
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--wx-radius-control, var(--wx-radius, 12px));
    background: var(--wx-signal, #d4af37);
    color: var(--wx-signal-ink, #111);
    font: inherit;
    font-family: var(--wx-font-body, inherit);
    font-size: var(--wx-fs-callout);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.wx-btn:hover:not(:disabled) { filter: brightness(1.06); }

/* Disabled is the button's own look at half strength - never a different colour. */
.wx-btn:disabled {
    opacity: 0.5;
    cursor: default;
    filter: none;
}

/* The other thing to do: outlined, in the surface's own colour. */
.wx-btn.is-quiet {
    background: none;
    border-color: var(--wx-line, #2c2c2c);
    color: var(--wx-ink, #fff);
    font-weight: 600;
}

/* Something that cannot be undone - only ever behind a confirming sheet. */
.wx-btn.is-danger {
    background: var(--wx-bad, #e5484d);
    color: #ffffff;
}

/* Inline, in a card or a row: Play, Watch an ad, Use all. */
.wx-btn.is-small {
    min-height: var(--wx-control-h-sm);
    padding: 0 14px;
    font-size: var(--wx-fs-footnote);
}

/* The width of its column. */
.wx-btn.is-block { display: flex; width: 100%; }

/* A quiet button that still says "this way": outlined in the primary colour. */
.wx-btn.is-quiet.is-signal { border-color: var(--wx-signal, #d4af37); color: var(--wx-signal, #d4af37); }

/* A choice in words, not a button: "Use a different number", "Enter a different code". */
.wx-link {
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--wx-muted, #9a9a9a);
    font: inherit;
    font-size: var(--wx-fs-footnote);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.wx-link:disabled { opacity: 0.5; cursor: default; }

/* A link inside a sentence that is the way forward - "Sign in to enter": the primary
   colour, the sentence's own size. */
.wx-link.is-signal { padding: 0; color: var(--wx-signal, #d4af37); font-size: inherit; }

/* A link that takes the sentence's own colour and size. */
.wx-link.is-inherit { padding: 0; color: inherit; font-size: inherit; font-weight: inherit; }

/* A filter in a rail - the store's categories, the giveaways' Live / Coming / Winners.
   Picking one filters in place; it never navigates. */
.wx-chip {
    flex: none;
    padding: 7px 14px;
    border: 1px solid var(--wx-line, #2c2c2c);
    border-radius: var(--wx-radius-pill, 999px);
    background: transparent;
    color: var(--wx-muted, #cfcfcf);
    font: inherit;
    font-size: var(--wx-fs-footnote);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.wx-chip.is-selected {
    background: var(--wx-signal, #d4af37);
    border-color: var(--wx-signal, #d4af37);
    color: var(--wx-signal-ink, #111);
}

@media (hover: hover) {
    .wx-chip:not(.is-selected):hover { color: var(--wx-ink, #fff); border-color: var(--wx-signal, #d4af37); }
}

/* An icon on its own - close, remove, more. 44px to hit, whatever the icon's size. */
.wx-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--wx-radius-control, 8px);
    background: none;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.wx-icon-btn:hover:not(:disabled) { background: var(--wx-surface-2, rgba(255, 255, 255, 0.06)); }
.wx-icon-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- fields ------------------------------------------------------------ */

/* A label above, the control, help under it, and the error under that. */
.wx-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.wx-label {
    font-size: var(--wx-fs-footnote);
    font-weight: 600;
    color: var(--wx-muted, #9a9a9a);
}

/* Every text box, select and text area. 16px text so a phone does not zoom in. */
.wx-input {
    width: 100%;
    min-width: 0;
    min-height: var(--wx-control-h);
    padding: 12px 14px;
    border: 1px solid var(--wx-line, #2c2c2c);
    border-radius: var(--wx-radius, 12px);
    background: var(--wx-ground, #111);
    color: var(--wx-ink, #fff);
    font: inherit;
    font-size: 16px;
}

textarea.wx-input { min-height: 96px; resize: vertical; }

.wx-input::placeholder { color: var(--wx-muted, #9a9a9a); opacity: 0.6; }

.wx-input:focus-visible { outline: 2px solid var(--wx-signal, #d4af37); outline-offset: 1px; }

/* A box and what it agrees to. */
.wx-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--wx-fs-footnote);
    line-height: 1.4;
    color: var(--wx-muted, #9a9a9a);
    cursor: pointer;
}

.wx-check input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--wx-signal, #d4af37);
}

/* An on/off switch: the input hidden, the track drawn. */
.wx-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--wx-fs-callout);
    font-weight: 600;
    cursor: pointer;
}

.wx-switch input { position: absolute; opacity: 0; pointer-events: none; }

.wx-switch .wx-track {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 24px;
    border-radius: 99px;
    background: var(--wx-line, #3a3a3a);
    transition: background 0.15s ease;
}

.wx-switch .wx-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.wx-switch input:checked + .wx-track { background: var(--wx-signal, #3ecf8e); }
.wx-switch input:checked + .wx-track::after { transform: translateX(16px); }
.wx-switch input:focus-visible + .wx-track { outline: 2px solid var(--wx-signal, #3ecf8e); outline-offset: 2px; }
.wx-switch input:disabled + .wx-track { opacity: 0.5; }

/* A number with a minus and a plus - quantity, entries. */
.wx-stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--wx-s3);
}

/* Classed, not bare: the website styles every button without a class. */
.wx-stepper .wx-step {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--wx-line, #2c2c2c);
    border-radius: 50%;
    background: none;
    color: var(--wx-ink, #fff);
    font: inherit;
    font-size: 1.1rem;
    cursor: pointer;
}

.wx-stepper .wx-step:disabled { opacity: 0.5; cursor: default; }

/* On a cart line, where there are several: smaller buttons, a smaller number. */
.wx-stepper.is-compact { gap: var(--wx-s2); }
.wx-stepper.is-compact .wx-step { width: 36px; height: 36px; font-size: 0.9rem; }
.wx-stepper.is-compact output { font-size: var(--wx-fs-callout); }

/* The number is the point - entries into a giveaway. */
.wx-stepper.is-large { gap: var(--wx-s4); }
.wx-stepper.is-large output { min-width: 4ch; font-size: 2rem; line-height: 1; }

.wx-stepper output {
    min-width: 2ch;
    font-family: var(--wx-font-data, ui-monospace, monospace);
    font-size: var(--wx-fs-title);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* ---- rows, groups and cards -------------------------------------------- */

/* A group of rows, Settings-style: a heading, then the rows in one bordered stack. */
.wx-group {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--wx-line, #2c2c2c);
    border-radius: var(--wx-radius, 12px);
    background: var(--wx-surface, #161616);
    overflow: hidden;
}

/* One row: something on the left, a title and a line under it, a value or a chevron
   on the right. Menu, orders, messages, ways to earn. */
.wx-row {
    display: flex;
    align-items: center;
    gap: var(--wx-s3);
    min-height: var(--wx-row-h);
    padding: var(--wx-s3) var(--wx-s4);
    border: 0;
    border-bottom: 1px solid var(--wx-line-soft, var(--wx-line, #2c2c2c));
    background: none;
    color: var(--wx-ink, #fff);
    font: inherit;
    font-size: var(--wx-fs-callout);
    text-align: left;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    width: 100%;
    cursor: default;
}

.wx-group > .wx-row:last-child { border-bottom: 0; }

a.wx-row, button.wx-row { cursor: pointer; }
a.wx-row:hover, button.wx-row:hover { background: var(--wx-surface-2, rgba(255, 255, 255, 0.04)); }

.wx-row-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.wx-row-main small { color: var(--wx-muted, #9a9a9a); font-size: var(--wx-fs-footnote); }
.wx-row-end { flex: none; color: var(--wx-muted, #9a9a9a); font-size: var(--wx-fs-footnote); }

/* Something that needs doing: the primary colour's wash and an edge. */
.wx-row.is-nudge {
    background: var(--wx-signal-soft, rgba(212, 175, 55, 0.12));
    box-shadow: inset 3px 0 0 var(--wx-signal, #d4af37);
}

/* The one of several that is chosen - a delivery option, say. */
.wx-row.is-on { box-shadow: inset 3px 0 0 var(--wx-signal, #d4af37); background: var(--wx-signal-soft, rgba(212, 175, 55, 0.12)); }

/* A card: a picture, a title, a line, a small action. Games, giveaways, the store. */
.wx-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--wx-line, #2c2c2c);
    border-radius: var(--wx-radius, 12px);
    background: var(--wx-surface, #161616);
    overflow: hidden;
    /* overflow:hidden lets a flex item shrink below its content, and in the app's
       scrolling account column that squeezed "Your age and state" and "Your look" down
       to their headings. A card is never shorter than what is in it. Not
       min-height: min-content - Firefox ignores it here and squeezed them anyway. */
    flex-shrink: 0;
    color: var(--wx-ink, #fff);
    text-decoration: none;
    text-transform: none;
}

.wx-card-body { display: grid; gap: var(--wx-s2); padding: var(--wx-s3) var(--wx-s4) var(--wx-s4); }

/* ---- tags -------------------------------------------------------------- */

/* A word in a pill: Member, Weekly drawing, Sale. The secondary colour - it is a
   highlight, not something to tap. */
.wx-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--wx-radius-pill, 999px);
    background: var(--wx-coin-soft, rgba(212, 175, 55, 0.14));
    color: var(--wx-coin, #d4af37);
    font-size: var(--wx-fs-caption);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.wx-tag.is-solid { background: var(--wx-coin, #d4af37); color: var(--wx-coin-ink, #111); }
.wx-tag.is-patron { background: var(--wx-patron-soft, rgba(139, 92, 246, 0.16)); color: var(--wx-patron, #8b5cf6); }

/* Beside a name in a comment. */
.wx-tag.is-sm { padding: 1px 6px; font-size: 0.625rem; }

/* Waiting on someone - "replied", "return pending". */
.wx-tag.is-warn { background: color-mix(in srgb, var(--wx-warn, #f59e0b) 16%, transparent); color: var(--wx-warn, #f59e0b); }

/* ---- states ------------------------------------------------------------ */

/* Loading: one quiet line, centred. */
.wx-loading {
    padding: var(--wx-s6) var(--wx-s4);
    text-align: center;
    color: var(--wx-muted, #9a9a9a);
    font-size: var(--wx-fs-footnote);
}

/* Empty (or a load that failed): an icon, one sentence, one way to fill it. */
.wx-empty {
    display: grid;
    justify-items: center;
    gap: var(--wx-s3);
    padding: var(--wx-s6) var(--wx-s4);
    text-align: center;
    color: var(--wx-muted, #9a9a9a);
    font-size: var(--wx-fs-callout);
}

.wx-empty > .fas { font-size: 1.6rem; opacity: 0.7; }

/* ---- sheets ------------------------------------------------------------ */

/* One sheet for everything that asks before it acts - report, buy, confirm. From the
   bottom on a phone, centred on a desktop. */
.wx-scrim {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--wx-scrim, rgba(0, 0, 0, 0.55));
}

.wx-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1101;
    display: grid;
    gap: var(--wx-s3);
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--wx-s5) var(--wx-s4) calc(var(--wx-s5) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--wx-radius, 16px) var(--wx-radius, 16px) 0 0;
    background: var(--wx-surface, #161616);
    color: var(--wx-ink, #fff);
    box-shadow: var(--wx-elev-2, 0 12px 32px rgba(0, 0, 0, 0.28));
}

.wx-sheet-actions { display: flex; justify-content: space-between; gap: var(--wx-s3); }

@media (min-width: 640px) {
    .wx-sheet {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        width: min(40rem, calc(100vw - 48px));
        transform: translate(-50%, -50%);
        border-radius: var(--wx-radius, 16px);
        padding-bottom: var(--wx-s5);
    }
}


/* ---------- the earn toast ---------- */

/* "That like earned you 1,000 points!" with "2 of 3 left today" under it, near the
   thumb, above a tab bar if there is one. One at a time stacks; each goes on its own
   or on its X. See EarnToast and EarnToasts. */
.wx-earn-toasts {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    display: grid;
    gap: 8px;
    pointer-events: none;
    /* Over everything, sheets included (1100/1101) - a rewarded ad's sheet is often
       what earned it - and over the website's phone header and tab bar (1000). */
    z-index: 1150;
}

.wx-earn-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 12px 12px 16px;
    border-radius: var(--wx-radius-sm, 8px);
    background: var(--wx-signal, #d4af37);
    color: var(--wx-signal-ink, #111);
    font-size: var(--wx-fs-callout);
    box-shadow: var(--wx-elev-2, 0 6px 20px rgba(0, 0, 0, 0.35));
    animation: wx-earn-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wx-earn-toast > .fas { flex: none; margin-top: 2px; font-size: 1rem; }

.wx-earn-body {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 3px;
}

.wx-earn-msg { font-weight: 600; line-height: 1.3; }

/* Under the sentence and to the right, quieter. */
.wx-earn-note {
    justify-self: end;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.8;
}

.wx-earn-x {
    flex: none;
    width: 28px;
    height: 28px;
    margin: -4px -4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    opacity: 0.7;
}

.wx-earn-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }

@keyframes wx-earn-in {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .wx-earn-toast { animation: none; }
}