/* ============================================================
   TRADING FLOOR THEME — the exchange at the opening bell.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   The floor: ledger paper with its feint green ruling and the
   brass double rule of a column head, polished brass rails held
   by bolts, a quote board of split flaps in a brass frame (cream
   flaps lettered in exchange green by day), ticker tape with its
   feed holes, share-certificate frames with an engraved rosette,
   and candlestick charts drawn as line engravings with no axis,
   scale or value. Headings in an engraved Victorian serif, every
   real figure in a tabular mono, the rest in a plain civic sans.
   After dark it is the floor after the close: green-black, the
   brass gone warm and the board glowing amber.

   The theme sets the --theme-* ramp itself (exchange green by day,
   amber at night), so the admin's accent colour does not apply
   while it is active.
   ============================================================ */

:root {
  --font-display: 'Old Standard TT', Georgia, 'Times New Roman', 'PingFang SC', 'Microsoft YaHei', serif;
  --font-ui:      'Public Sans', 'Segoe UI', system-ui, 'Noto Sans', sans-serif;
  /* Every real figure (prices, counts, balances, the countdown) and the
     board's flaps in the tabular mono */
  --font-num:     'Azeret Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-flap:    'Azeret Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --paper:        #f4efe1;
  --paper-2:      #fbf8ef;
  --paper-3:      #ebe4d0;
  --ink:          #13241d;
  --ink-2:        #2c4a3c;
  --ink-soft:     #56665c;
  --rule:         rgba(19, 36, 29, 0.16);
  --rule-soft:    rgba(19, 36, 29, 0.08);
  --radius:       6px;
  --radius-sm:    4px;
  --shadow:       0 1px 0 rgba(19, 36, 29, .06), 0 10px 22px -16px rgba(19, 36, 29, .5);
  --shadow-md:    0 1px 0 rgba(19, 36, 29, .06), 0 22px 40px -22px rgba(19, 36, 29, .6);

  /* Exchange green */
  --theme-50:  #eef3ee;
  --theme-100: #dbe7df;
  --theme-200: #b5cebf;
  --theme-300: #86ad98;
  --theme-400: #4f8a6f;
  --theme-500: #1f6a4f;
  --theme-600: #0f3d2e;
  --theme-700: #0c3326;
  --theme-800: #09281e;
  --theme-900: #061b14;
  --theme-500-rgb: 31, 106, 79;
  --theme-600-rgb: 15, 61, 46;
  --theme-600-ink: #f4efe1;

  /* The floor's colours: each with a deep shade, an ink that reads on
     ledger paper, and a soft wash. Signal green and red mark real states
     only (live, settled, ending, failed). */
  --tfl-brass:      #b8913a;
  --tfl-brass-deep: #8a6a22;
  --tfl-brass-ink:  #7a5b14;
  --tfl-brass-soft: rgba(184, 145, 58, .16);
  --tfl-ex:         #0f3d2e;
  --tfl-ex-2:       #1a5240;
  --tfl-ex-ink:     #0f3d2e;
  --tfl-ex-soft:    rgba(15, 61, 46, .08);
  --tfl-green:      #16a34a;
  --tfl-green-deep: #15803d;
  --tfl-green-ink:  #166534;
  --tfl-green-soft: rgba(22, 163, 74, .12);
  --tfl-red:        #c2410c;
  --tfl-red-deep:   #9a3412;
  --tfl-red-ink:    #b13a0a;
  --tfl-red-soft:   rgba(194, 65, 12, .1);
  --tfl-slate:      #2f6f5a;
  --tfl-slate-ink:  #285e4c;
  --tfl-slate-soft: rgba(47, 111, 90, .1);

  /* Polished brass: a bar lit from above, a plate lit from the side */
  --tfl-brass-bar:   linear-gradient(180deg, #ecd796 0, #c9a24a 38%, #9c7a2e 62%, #b8913a 100%);
  --tfl-brass-plate: linear-gradient(100deg, #9c7a2e 0, #e3c97f 34%, #c9a24a 52%, #a8842f 100%);
  --tfl-bolt: radial-gradient(circle at 40% 35%, #f4e3a8 0 1px, #8a6a22 1.6px 2.6px, transparent 3px);

  /* The quote board: exchange-green enamel in a brass frame; each flap a
     cream leaf split by its hinge */
  --tfl-board:   #0f3d2e;
  --tfl-board-2: #0b3024;
  --tfl-board-3: #164a38;
  --tfl-flap:    linear-gradient(180deg, #fbf6e6 0 48.5%, #a99d7c 48.5% 51.5%, #efe7d0 51.5%);
  --tfl-flap-ink: #0f2a20;
  --tfl-flap-glow: none;
  --tfl-flap-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(15, 42, 32, .25), 0 1px 0 rgba(0, 0, 0, .25);

  /* Ledger stock for cards and sheets: cream leaf, an exchange-green band */
  --tfl-leaf:      #fbf8ef;
  --tfl-leaf-2:    #f4efe1;
  --tfl-leaf-band: #0f3d2e;
  --tfl-leaf-ink:  #13241d;
  /* Feint ruling of a ledger page, and its two brass margin lines */
  --tfl-feint: repeating-linear-gradient(180deg, transparent 0 25px, rgba(47, 111, 90, .16) 25px 26px);
  --tfl-margin: linear-gradient(90deg, transparent 0 34px, rgba(184, 145, 58, .55) 34px 35px, transparent 35px 38px, rgba(184, 145, 58, .55) 38px 39px, transparent 39px);
  /* Ticker tape's feed holes, down an edge or along one */
  --tfl-perf:   radial-gradient(circle, var(--rule) 0 1.5px, transparent 2px) 0 50% / 8px 8px repeat-y;
  --tfl-perf-x: radial-gradient(circle, var(--rule) 0 1.5px, transparent 2px) 50% 0 / 8px 8px repeat-x;
  /* An engraver's hatching */
  --tfl-hatch: repeating-linear-gradient(45deg, rgba(19, 36, 29, .5) 0 .8px, transparent .8px 3.6px);

  /* Older names some shared rules use */
  --gold:       #0f3d2e;
  --gold-2:     #b8913a;
  --gold-soft:  rgba(15, 61, 46, 0.07);
  --gold-ink:   #13241d;
  --felt:       #0f3d2e;
  --felt-2:     #0b3024;
  --on-felt:    #f4efe1;
  --on-felt-soft: rgba(244, 239, 225, 0.78);
  --peacock:    #0f3d2e;
  --peacock-soft: rgba(15, 61, 46, 0.08);
  --red:        #b13a0a;
  --red-soft:   rgba(194, 65, 12, 0.1);
  --rose:       #c2410c;
  --rose-soft:  rgba(194, 65, 12, 0.09);

  /* The floor after the close: footer, splash, the winners' board */
  --night:   #07130e;
  --night-2: #0c1d16;
  --night-3: #13291f;
  --on-night: #efe7d2;
  --on-night-soft: rgba(239, 231, 210, .76);

  --notify-accent: var(--theme-600);
  --nav-accent:    var(--ink);
  --hdr-strip-bg:  #0f3d2e;
  --hdr-strip-rule: #0f3d2e;
  --text-primary:  var(--ink);

  /* Buttons: an exchange-green plate lettered in cream with a brass
     bead round it, sinking a step when pressed */
  --btn-bg:       #0f3d2e;
  --btn-bg-hover: #155a42;
  --btn-ink:      #f7f1df;
  --btn-side:     #062218;
  --btn-shadow:   inset 0 0 0 1px rgba(227, 201, 127, .55), inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 var(--btn-side), 0 10px 18px -12px rgba(6, 34, 24, .8);
  --btn-shadow-hover: inset 0 0 0 1px rgba(227, 201, 127, .8), inset 0 1px 0 rgba(255, 255, 255, .16), 0 3px 0 var(--btn-side), 0 14px 24px -12px rgba(6, 34, 24, .85);

  /* The floor out in the gutters: ledger ruling and its brass margins
     either side of a calm column, a warm lamp-light at the top */
  --tfl-gutters: linear-gradient(90deg, transparent calc(50% - 700px), var(--paper) calc(50% - 664px), var(--paper) calc(50% + 664px), transparent calc(50% + 700px));
  --tfl-gutter-pat:
    linear-gradient(90deg, transparent calc(50% - 708px), rgba(184, 145, 58, .5) calc(50% - 708px) calc(50% - 707px), transparent calc(50% - 707px) calc(50% - 703px), rgba(184, 145, 58, .5) calc(50% - 703px) calc(50% - 702px), transparent calc(50% - 702px) calc(50% + 702px), rgba(184, 145, 58, .5) calc(50% + 702px) calc(50% + 703px), transparent calc(50% + 703px) calc(50% + 707px), rgba(184, 145, 58, .5) calc(50% + 707px) calc(50% + 708px), transparent calc(50% + 708px)),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(47, 111, 90, .12) 25px 26px);
  --page-bg: radial-gradient(1200px 380px at 50% -140px, rgba(184, 145, 58, .16), transparent 70%) no-repeat, var(--tfl-gutters), var(--tfl-gutter-pat), var(--paper);

  /* Art colours (includes/art.php reads these, the light set its fallback) */
  --tfl-a-floor: #e6dcc3; --tfl-a-floor2: #d6c9a8; --tfl-a-paper: #fbf7ec; --tfl-a-paper2: #efe6cf;
  --tfl-a-line: #163a2c; --tfl-a-ink: #0f3d2e; --tfl-a-brass: #b8913a; --tfl-a-brass2: #8a6a22; --tfl-a-brass3: #e3c97f;
  --tfl-a-glass: #dfe9e2; --tfl-a-wood: #5b3a22; --tfl-a-flap: #f6f0dc;

  /* The accent for links, rules and active states: exchange green by
     day, the board's amber at night */
  --tfl-accent:      #0f3d2e;
  --tfl-accent-deep: #062218;
  --tfl-accent-ink:  #0f3d2e;
  --tfl-accent-soft: rgba(15, 61, 46, .08);
  --tfl-accent-on:   #f7f1df;
  /* The floor's rail: a brass bar held by bolts */
  --tfl-strip: var(--tfl-bolt) 0 50% / 64px 100% repeat-x, var(--tfl-brass-bar);
  --tfl-strip-glow: 0 0 0 transparent;
  /* A wall that carries a scene: exchange-green enamel with fine engraved
     ruling by day; after dark the green-black floor under amber light */
  --tfl-wall: repeating-linear-gradient(180deg, rgba(227, 201, 127, 0) 0 23px, rgba(227, 201, 127, .09) 23px 24px), radial-gradient(120% 90% at 50% 0, #1a5240, #0f3d2e 60%, #0b3024);
  --tfl-floor: linear-gradient(180deg, #fbf8ef, #f4efe1 60%, #ebe4d0);
  --tfl-gloss: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%);
  --tfl-chip-bg: rgba(19, 36, 29, .055);
}

/* After dark: the floor after the close */
html.dark {
  --paper:        #07130e;
  --paper-2:      #0c1d16;
  --paper-3:      #13291f;
  --ink:          #efe7d2;
  --ink-2:        #d8cfb8;
  --ink-soft:     #a8a08a;
  --rule:         rgba(239, 231, 210, 0.15);
  --rule-soft:    rgba(239, 231, 210, 0.07);
  --shadow:       0 1px 0 rgba(0, 0, 0, .4), 0 14px 30px -16px rgba(0, 0, 0, .9);
  --shadow-md:    0 1px 0 rgba(0, 0, 0, .4), 0 24px 44px -20px rgba(0, 0, 0, .95);

  --theme-50:  #1d1708;
  --theme-100: #2a210c;
  --theme-200: #4a3a14;
  --theme-300: #f3cf7e;
  --theme-400: #ebbd57;
  --theme-500: #e4b146;
  --theme-600: #e0a93b;
  --theme-700: #ebbd57;
  --theme-800: #f3cf7e;
  --theme-900: #faeac0;
  --theme-500-rgb: 228, 177, 70;
  --theme-600-rgb: 224, 169, 59;
  --theme-600-ink: #0b1a13;

  --tfl-brass:      #d4ad5a;
  --tfl-brass-deep: #9c7a2e;
  --tfl-brass-ink:  #e8c77a;
  --tfl-brass-soft: rgba(224, 169, 59, .15);
  --tfl-ex:         #1f5a43;
  --tfl-ex-2:       #2a6e53;
  --tfl-ex-ink:     #9fcfb4;
  --tfl-ex-soft:    rgba(120, 190, 150, .1);
  --tfl-green:      #3ccf6e;
  --tfl-green-deep: #22a04f;
  --tfl-green-ink:  #6ee093;
  --tfl-green-soft: rgba(60, 207, 110, .13);
  --tfl-red:        #e0612b;
  --tfl-red-deep:   #b8461a;
  --tfl-red-ink:    #f08a5d;
  --tfl-red-soft:   rgba(224, 97, 43, .14);
  --tfl-slate:      #6fa58c;
  --tfl-slate-ink:  #9cc7b2;
  --tfl-slate-soft: rgba(111, 165, 140, .13);

  --tfl-brass-bar:   linear-gradient(180deg, #f3d98d 0, #d4ad5a 38%, #8a6a22 66%, #b8913a 100%);
  --tfl-brass-plate: linear-gradient(100deg, #8a6a22 0, #f0d184 34%, #d4ad5a 52%, #9c7a2e 100%);

  --tfl-board:   #0a1a13;
  --tfl-board-2: #06110c;
  --tfl-board-3: #12271d;
  --tfl-flap:    linear-gradient(180deg, #1c3329 0 48.5%, #020604 48.5% 51.5%, #15291f 51.5%);
  --tfl-flap-ink: #f2b33d;
  --tfl-flap-glow: 0 0 6px rgba(242, 179, 61, .55);
  --tfl-flap-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 0 rgba(0, 0, 0, .5);

  --tfl-leaf:      #0f2219;
  --tfl-leaf-2:    #13291f;
  --tfl-leaf-band: #040b08;
  --tfl-leaf-ink:  #efe7d2;
  --tfl-feint: repeating-linear-gradient(180deg, transparent 0 25px, rgba(224, 169, 59, .1) 25px 26px);
  --tfl-margin: linear-gradient(90deg, transparent 0 34px, rgba(224, 169, 59, .4) 34px 35px, transparent 35px 38px, rgba(224, 169, 59, .4) 38px 39px, transparent 39px);
  --tfl-hatch: repeating-linear-gradient(45deg, rgba(224, 169, 59, .4) 0 .8px, transparent .8px 3.6px);

  --gold:       #e0a93b;
  --gold-2:     #e0a93b;
  --gold-soft:  rgba(224, 169, 59, 0.12);
  --gold-ink:   #efe7d2;
  --felt:       #0a1a13;
  --felt-2:     #06110c;
  --peacock:    #e8c77a;
  --peacock-soft: rgba(224, 169, 59, 0.14);
  --red:        #f08a5d;
  --red-soft:   rgba(224, 97, 43, 0.15);
  --rose:       #e0612b;
  --rose-soft:  rgba(224, 97, 43, 0.14);

  --hdr-strip-bg:  #040b08;
  --hdr-strip-rule: rgba(239, 231, 210, .1);

  --btn-bg:       #e0a93b;
  --btn-bg-hover: #ebbd57;
  --btn-ink:      #0b1a13;
  --btn-side:     #7a5b14;
  --btn-shadow:   inset 0 0 0 1px rgba(255, 240, 200, .35), inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 var(--btn-side), 0 0 24px -6px rgba(224, 169, 59, .5);
  --btn-shadow-hover: inset 0 0 0 1px rgba(255, 240, 200, .5), inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 var(--btn-side), 0 0 32px -4px rgba(224, 169, 59, .7);

  /* Out in the gutters after the close: the ruling in lamp-light */
  --tfl-gutter-pat:
    linear-gradient(90deg, transparent calc(50% - 708px), rgba(224, 169, 59, .35) calc(50% - 708px) calc(50% - 707px), transparent calc(50% - 707px) calc(50% - 703px), rgba(224, 169, 59, .35) calc(50% - 703px) calc(50% - 702px), transparent calc(50% - 702px) calc(50% + 702px), rgba(224, 169, 59, .35) calc(50% + 702px) calc(50% + 703px), transparent calc(50% + 703px) calc(50% + 707px), rgba(224, 169, 59, .35) calc(50% + 707px) calc(50% + 708px), transparent calc(50% + 708px)),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(224, 169, 59, .07) 25px 26px);
  --page-bg:
    radial-gradient(1300px 480px at 50% -200px, rgba(242, 179, 61, .11), transparent 70%) no-repeat,
    var(--tfl-gutters),
    var(--tfl-gutter-pat),
    var(--paper);

  --tfl-a-floor: #0f2219; --tfl-a-floor2: #173126; --tfl-a-paper: #173126; --tfl-a-paper2: #1f3d30;
  --tfl-a-line: #d2bb7f; --tfl-a-ink: #235d46; --tfl-a-brass: #d4ad5a; --tfl-a-brass2: #9c7a2e; --tfl-a-brass3: #f4d58c;
  --tfl-a-glass: #1c3a2f; --tfl-a-wood: #3e2a1a; --tfl-a-flap: #f2b33d;

  --tfl-accent:      #e0a93b;
  --tfl-accent-deep: #7a5b14;
  --tfl-accent-ink:  #e8c77a;
  --tfl-accent-soft: rgba(224, 169, 59, .13);
  --tfl-accent-on:   #0b1a13;
  --tfl-strip-glow: 0 0 14px rgba(224, 169, 59, .35);
  --tfl-wall: repeating-linear-gradient(180deg, rgba(242, 179, 61, 0) 0 23px, rgba(242, 179, 61, .06) 23px 24px), radial-gradient(120% 80% at 50% 0, rgba(242, 179, 61, .14), transparent 60%), linear-gradient(180deg, #0a1a13, #040b08 80%);
  --tfl-floor: linear-gradient(180deg, #0c1d16, #07130e 60%, #050e0a);
  --tfl-gloss: linear-gradient(180deg, rgba(242, 179, 61, .06), rgba(242, 179, 61, 0) 45%);
  --tfl-chip-bg: rgba(239, 231, 210, .07);
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board. A board is a
   page of the ledger by day (cream cells on brass-ruled paper, pieces
   climbing from cream through brass to exchange green) and the board
   after the close at night, cells lighting amber. */
:root {
  --game-bg:        #ebe4d0;
  --game-surface:   #d9cdae;
  --game-surface-2: #fbf8ef;
  --game-ink:       #13241d;
  --game-muted:     #56665c;
  --game-accent:    #0f3d2e;
  --game-accent-ink:#f7f1df;
  --game-good:      #166534;
  --game-bad:       #b13a0a;
  --game-tile-1:    #fbf8ef;
  --game-tile-2:    #efe0b0;
  --game-tile-3:    #e3c97f;
  --game-tile-4:    #c9a24a;
  --game-tile-5:    #8fb3a0;
  --game-tile-6:    #2f6f5a;
  --game-tile-7:    #0f3d2e;
  --game-tile-8:    #13241d;
  --game-radius:    4px;
  --game-font:      'Azeret Mono', ui-monospace, monospace;
  --game-font-css:  "/assets/themes/trading-floor/assets/fonts/fonts.css";
  --game-arena-screen: #ebe4d0;
  --game-arena-coins:  #7a5b14;
  --game-arena-win:    #166534;
  --game-arena-danger: #b13a0a;
  --game-pattern:   repeating-linear-gradient(180deg, transparent 0 25px, rgba(47, 111, 90, .14) 25px 26px);
}
html.dark {
  --game-bg:        #0c1d16;
  --game-surface:   #050e0a;
  --game-surface-2: #183026;
  --game-ink:       #efe7d2;
  --game-muted:     #a8a08a;
  --game-accent:    #e0a93b;
  --game-accent-ink:#0b1a13;
  --game-good:      #6ee093;
  --game-bad:       #f08a5d;
  --game-tile-1:    #183026;
  --game-tile-2:    #2c3a22;
  --game-tile-3:    #6e5419;
  --game-tile-4:    #c9a24a;
  --game-tile-5:    #f2b33d;
  --game-tile-6:    #6fa58c;
  --game-tile-7:    #235d46;
  --game-tile-8:    #efe7d2;
  --game-arena-screen: #0c1d16;
  --game-arena-coins:  #e8c77a;
  --game-arena-win:    #6ee093;
  --game-arena-danger: #f08a5d;
  --game-pattern:   repeating-linear-gradient(180deg, transparent 0 25px, rgba(242, 179, 61, .08) 25px 26px);
}

/* Old Standard and Azeret cover Latin (Old Standard also Cyrillic and
   Vietnamese); other scripts fall to system faces of the same kind */
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(el)) {
  --font-display: 'Noto Serif', 'Times New Roman', 'Songti SC', 'SimSun', serif;
  --font-ui: system-ui, 'Segoe UI', 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
html:is(:lang(ar), :lang(ur)) { --font-display: system-ui, 'Segoe UI', 'Noto Naskh Arabic', serif; }

/* ── Base ── */
html body {
  font-family: var(--font-ui);
  background: var(--page-bg);
  color: var(--ink);
}
html .font-sans { font-family: var(--font-ui); }
html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.005em;
}
.display-italic { font-style: italic; }
/* Figures in tabular columns take the board's mono */
html .font-display.tabular-nums, html .font-display[class*="tabular"], html .tabular-nums { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
::selection { background: #e3c97f; color: #0f2a20; }
html.dark ::selection { background: #e0a93b; color: #0b1a13; }

.text-gradient-theme { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--tfl-brass-ink); }

.ed-eyebrow {
  font-family: var(--font-ui);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ed-eyebrow-tight { font-size: 9px !important; letter-spacing: 0 !important; white-space: nowrap !important; }

/* The eyebrow: a brass bell on a green plaque, then the words */
:root {
  --tfl-bellmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2a1.5 1.5 0 0 1 1.5 1.5v1.1a7.2 7.2 0 0 1 5.7 7V16H4.8v-3.2a7.2 7.2 0 0 1 5.7-7V4.7A1.5 1.5 0 0 1 12 3.2zM3 17.4h18v2.6H3z' fill='%23000'/%3E%3C/svg%3E");
  --tfl-bellmark-brass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2a1.5 1.5 0 0 1 1.5 1.5v1.1a7.2 7.2 0 0 1 5.7 7V16H4.8v-3.2a7.2 7.2 0 0 1 5.7-7V4.7A1.5 1.5 0 0 1 12 3.2zM3 17.4h18v2.6H3z' fill='%23e3c97f'/%3E%3C/svg%3E");
  --tfl-bellmark-amber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2a1.5 1.5 0 0 1 1.5 1.5v1.1a7.2 7.2 0 0 1 5.7 7V16H4.8v-3.2a7.2 7.2 0 0 1 5.7-7V4.7A1.5 1.5 0 0 1 12 3.2zM3 17.4h18v2.6H3z' fill='%23f2b33d'/%3E%3C/svg%3E");
  --tfl-phonemark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2.5h8l-1.4 4H9.4zM10.8 6.5h2.4v10.3h-2.4zM6.5 18h11a1 1 0 0 1 1 1v2.5h-13V19a1 1 0 0 1 1-1zM13.2 9.2h4.3v1.8h-4.3z' fill='%23000'/%3E%3C/svg%3E");
  --tfl-quill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5c-6 .4-11.3 4.6-13.6 11.4l-1.6 4.9 1.5.5 1.2-3.6c2-.2 4.3-1.2 5.9-3.2l-2.4-.4 3.6-1.3c1.6-1.9 3.4-4.8 5.4-8.3z' fill='%23000'/%3E%3C/svg%3E");
  --tfl-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M12 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E");
}
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tfl-brass-ink);
  margin-bottom: .8rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--tfl-bellmark-brass) center / 12px no-repeat, var(--tfl-ex);
  box-shadow: inset 0 0 0 2px #c9a24a, inset 0 0 0 3px rgba(15, 42, 32, .6);
}
/* The plugins' section heads count themselves ("No. 01"); the floor shows
   no figure it wasn't given, so those eyebrows give way to the head's own
   double rule */
html body .reveal p.section-eyebrow.hidden { display: none !important; }
html.dark .section-eyebrow::before { background: var(--tfl-bellmark-amber) center / 12px no-repeat, #0a1a13; box-shadow: inset 0 0 0 2px #e0a93b, 0 0 10px rgba(224, 169, 59, .35); }

/* View all: a slip of ledger paper with a brass edge; its arrow walks
   on hover or focus */
.btn-view-all {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tfl-accent-ink); white-space: nowrap;
  background: var(--paper-2);
  border: 1px solid var(--tfl-brass);
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--paper-2), inset 0 0 0 3px var(--tfl-brass-soft);
  transition: transform .15s ease, box-shadow .15s ease, gap .3s ease, background-color .2s ease, color .2s ease;
}
.btn-view-all:hover, .btn-view-all:focus-visible { gap: .8rem; outline: none; background: var(--tfl-ex); color: #f7f1df; border-color: #c9a24a; box-shadow: inset 0 0 0 2px var(--tfl-ex), inset 0 0 0 3px rgba(227, 201, 127, .6); }
.btn-view-all:active { transform: translateY(2px); }
html.dark .btn-view-all:hover, html.dark .btn-view-all:focus-visible { background: #e0a93b; color: #0b1a13; border-color: #e0a93b; box-shadow: none; }
[dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }

.ed-rule { background-color: var(--rule); }
.ed-rule-soft { background-color: var(--rule-soft); }
.ed-grain::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 40%); }
html.dark .ed-grain::before { background: none; }

.ed-folio { font-family: var(--font-num); font-weight: 600; color: var(--ink-soft); }

[dir="rtl"] .tfl-flip-rtl { transform: scaleX(-1); }

/* ── Header ── */
#desktopHeader .hdr-search {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(19, 36, 29, .06);
}
#desktopHeader .hdr-search:focus-within { border-color: var(--tfl-brass); box-shadow: 0 0 0 3px var(--tfl-brass-soft); }
html.dark #desktopHeader .hdr-search:focus-within { border-color: #e0a93b; }
.ed-search { background: transparent; border: none; }

/* The top strip: the exchange-green band over the floor */
.hdr-strip, .hdr-strip .ed-status { color: #e8d39a; }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffffff; }
html.dark .hdr-strip, html.dark .hdr-strip .ed-status { color: #e8c77a; }
html.dark .hdr-strip a:hover, html.dark .hdr-strip button:hover { color: #ffffff; }

/* Under the main header bar, the floor's brass rail */
.tfl-band { height: 6px; background: var(--tfl-strip); box-shadow: 0 1px 0 rgba(15, 42, 32, .35); }
html.dark .tfl-band { box-shadow: 0 1px 0 #000, 0 0 12px rgba(224, 169, 59, .3); }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; }
@media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
.ed-subnav-eyebrow {
  flex-shrink: 0; padding-right: 1.25rem; border-right: 1px solid var(--rule);
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tfl-brass-ink);
}
[dir="rtl"] .ed-subnav-eyebrow { padding-right: 0; padding-left: 1.25rem; border-right: 0; border-left: 1px solid var(--rule); }
.ed-subnav-items { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; border-radius: 3px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.ed-subnav-item:hover { color: var(--ink); background: var(--paper-3); }
.ed-subnav-item.active { background: var(--tfl-ex); color: #f7f1df; box-shadow: inset 0 -2px 0 #c9a24a; }
html.dark .ed-subnav-item.active { background: #e0a93b; color: #0b1a13; box-shadow: inset 0 -2px 0 #7a5b14; }
.ed-subnav-item:focus-visible { outline: 2px solid var(--tfl-brass); outline-offset: 2px; }

/* ── Links and buttons ──
   Primary: an exchange-green plate lettered in cream, a brass bead round
   it, sinking a step when pressed (amber after dark). Secondary: a cream
   slip with a double brass rule. */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: 14px; color: var(--tfl-accent-ink);
  background: linear-gradient(var(--tfl-brass), var(--tfl-brass)) left 100% / 24px 2px no-repeat;
  padding-bottom: 3px;
  transition: gap .25s ease, background-size .3s ease;
}
.ed-link-arrow:hover, .ed-link-arrow:focus-visible { gap: 0.7rem; background-size: 100% 2px; }
[dir="rtl"] .ed-link-arrow { background-position: right 100%; }

html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .8rem 1.4rem .74rem;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: .02em;
  text-decoration: none;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 0;
  border-radius: 4px;
  box-shadow: var(--btn-shadow);
  transform: translateY(0);
  transition: background-color .2s ease, box-shadow .15s ease, transform .12s ease;
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover {
  background-color: var(--btn-bg-hover); color: var(--btn-ink); box-shadow: var(--btn-shadow-hover); transform: translateY(-1px);
}
html .ed-btn-primary:active, html .ed-plan-cta:active, html .drawer-login:active { transform: translateY(3px); box-shadow: inset 0 0 0 1px rgba(227, 201, 127, .6), 0 0 0 var(--btn-side); }
html .ed-btn-primary svg { transition: transform .2s ease; }
html .ed-btn-primary:hover svg, html .ed-btn-primary:focus-visible svg { transform: translateX(3px); }
[dir="rtl"] .ed-btn-primary:hover svg.tfl-flip-rtl, [dir="rtl"] .ed-btn-primary:focus-visible svg.tfl-flip-rtl { transform: scaleX(-1) translateX(3px); }
html.dark .ed-plan-cta, html.dark .ed-plan-cta:hover, html.dark button.ed-plan-cta { color: var(--btn-ink); }
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta { background: var(--tfl-brass-plate); color: #0f2a20; box-shadow: inset 0 0 0 1px rgba(15, 42, 32, .3), 0 3px 0 #6e5419; }
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 3px solid var(--tfl-brass); outline-offset: 3px; }
html.dark .ed-btn-primary:focus-visible, html.dark .ed-btn-secondary:focus-visible { outline-color: #efe7d2; }

.ed-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .74rem 1.3rem .7rem;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: .02em;
  color: var(--tfl-ex-ink);
  background: var(--paper-2);
  border: 1px solid var(--tfl-brass);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--paper-2), inset 0 0 0 3px rgba(184, 145, 58, .45), 0 3px 0 rgba(138, 106, 34, .55);
  transition: box-shadow .15s ease, transform .12s ease, color .2s ease, background-color .2s ease;
}
.ed-btn-secondary:hover { transform: translateY(-1px); background: #fffdf6; color: var(--ink); box-shadow: inset 0 0 0 2px #fffdf6, inset 0 0 0 3px rgba(184, 145, 58, .8), 0 3px 0 rgba(138, 106, 34, .7); }
.ed-btn-secondary:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--paper-2), inset 0 0 0 3px rgba(184, 145, 58, .45), 0 0 0 transparent; }
html.dark .ed-btn-secondary { background: rgba(12, 29, 22, .85); color: var(--ink); border-color: rgba(224, 169, 59, .6); box-shadow: inset 0 0 0 2px rgba(12, 29, 22, .85), inset 0 0 0 3px rgba(224, 169, 59, .3), 0 3px 0 rgba(0, 0, 0, .5); }
html.dark .ed-btn-secondary:hover { color: #0b1a13; background: #efe7d2; border-color: #efe7d2; box-shadow: 0 3px 0 rgba(239, 231, 210, .4); }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }
@media (prefers-reduced-motion: reduce) {
  html .ed-btn-primary, html .ed-btn-secondary, html .ed-plan-cta, .btn-view-all { transition: none; }
  html .ed-btn-primary:hover, html .ed-btn-secondary:hover { transform: none; }
  html .ed-btn-primary:hover svg { transform: none; }
}

/* ── Cards: a leaf from the ledger. Cream stock with the double rule of
   a column head along the top (green over brass), lifted on hover or
   focus as if drawn from the book ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--tfl-leaf);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.15), box-shadow .3s ease, border-color .3s ease;
}
html .ed-plan::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: var(--radius) var(--radius) 0 0;
  background: var(--tfl-topline); pointer-events: none;
}
html .ed-plan:hover, html .shop-card:hover, html .shop-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(184, 145, 58, .55); }
html.dark .ed-plan:hover, html.dark .shop-card:hover, html.dark .shop-card:focus-within { border-color: rgba(224, 169, 59, .5); }
html .ed-plan-featured {
  background: var(--tfl-wall) !important;
  color: #f4efe1;
  border-color: #c9a24a;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(227, 201, 127, .25); }
@media (prefers-reduced-motion: reduce) { html .ed-plan:hover, html .shop-card:hover, html .shop-card:focus-within { transform: none; } }

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-soft); }
.ed-topnav-link { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #ffffff; }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.2rem 1.5rem .5rem;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tfl-brass-ink);
}
.drawer-section-label::before { content: ''; flex-shrink: 0; width: 12px; height: 12px; background: var(--tfl-brass); -webkit-mask: var(--tfl-bellmark) center / contain no-repeat; mask: var(--tfl-bellmark) center / contain no-repeat; }
.drawer-section-label::after { content: ''; flex: 1; height: 3px; border-block: 1px solid var(--tfl-brass-soft); }
html body #sideMenu .drawer-section-label { color: var(--tfl-brass-ink) !important; }
/* Count badges on drawer rows: a brass chit */
html body #sideMenu span.rounded-full.text-white[style*="--theme-600"] { background: var(--tfl-brass-plate) !important; color: #0f2a20 !important; }
.drawer-nav-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem 1.5rem;
  font-size: 15.5px; font-weight: 600; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.drawer-nav-row:hover { background: var(--paper-3); color: var(--ink); box-shadow: inset 3px 0 0 var(--tfl-brass); }
[dir="rtl"] .drawer-nav-row:hover { box-shadow: inset -3px 0 0 var(--tfl-brass); }
.drawer-logout, .drawer-login { margin: 1rem 1.5rem 1.25rem; padding: 0.85rem 1rem; }
.drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  border: 1px solid var(--rule); border-radius: 4px;
  font-weight: 700; color: var(--red);
}
.drawer-logout:hover { background: var(--red-soft); }

.mobile-glass-header {
  background: rgba(251, 248, 239, 0.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(15, 42, 32, .2), 0 5px 0 -1px #c9a24a;
}
html.dark .mobile-glass-header { background: rgba(7, 19, 14, 0.96); box-shadow: 0 1px 0 #000, 0 5px 0 -1px #9c7a2e; }

.ed-avatar-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px #c9a24a; }

[x-cloak] { display: none !important; }

.ed-dropdown {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
}
.ed-dropdown::before { content: ''; display: block; height: 6px; margin: -1px -1px 0; border-radius: 6px 6px 0 0; background: var(--tfl-topline); }
.ed-dropdown-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.25rem;
  font-size: 14.5px; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.ed-dropdown-item:hover { background: var(--paper-3); color: var(--ink); }
.ed-section-cap {
  padding: .7rem 1.25rem .35rem;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tfl-brass-ink);
}
.ed-mobile-link.active { color: var(--nav-accent); }

/* ── Dark/light toggle: the closing bell ──
   A brass bell drops in at the top of the screen and is struck; rings of
   sound spread from it, and with them an engraved candlestick chart is
   cut across the screen, candle after candle from the inline start,
   each growing out of its own opening level, and the paper fills in
   behind them until the page is a solid engraved sheet. The mode changes
   behind it, then the paper clears, the candles sink
   back into the rule, the bell is lifted away and the new floor shows.
   The cover's colours are taken from the mode being left and copied on
   at the start, so nothing changes at the flip. Built by trading-floor.js. */
.px-fx--tfl-bell { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--tfl-bell .tfl-fx-ground { position: absolute; inset: 0; background: var(--fx-ground); opacity: 0; transition: opacity .16s linear; }
.px-fx--tfl-bell.is-solid .tfl-fx-ground { opacity: 1; }
.px-fx--tfl-bell.is-clear .tfl-fx-ground { opacity: 0; transition-duration: .22s; }
.px-fx--tfl-bell .tfl-fx-candle {
  position: absolute; bottom: 0; top: 0;
  left: calc(var(--i) * var(--cw) - 1px); width: calc(var(--cw) + 2px);
  transform: scaleY(0); transform-origin: 50% var(--o);
  transition: transform .3s cubic-bezier(.3, 1.25, .5, 1) calc(var(--i) * var(--st, 26ms));
}
[dir="rtl"] .px-fx--tfl-bell .tfl-fx-candle { left: auto; right: calc(var(--i) * var(--cw) - 1px); }
.px-fx--tfl-bell .tfl-fx-candle::before {
  /* the body: hatched, hollow or solid in turn, ruled at its edges */
  content: ''; position: absolute; left: 18%; right: 18%; top: var(--bt, 20%); bottom: var(--bb, 20%);
  z-index: 1;
  background: var(--fx-body);
  box-shadow: inset 0 0 0 2px var(--fx-line);
}
.px-fx--tfl-bell .tfl-fx-candle:nth-child(3n+1)::before { background: var(--fx-hatch), var(--fx-body); }
.px-fx--tfl-bell .tfl-fx-candle:nth-child(3n+2)::before { background: var(--fx-line); }
.px-fx--tfl-bell .tfl-fx-candle::after {
  /* the wick, standing proud of the body while it grows */
  content: ''; position: absolute; left: 50%; top: var(--wt, 8%); bottom: var(--wb, 8%); width: 2px; margin-left: -1px; background: var(--fx-line);
}
.px-fx--tfl-bell.is-cut .tfl-fx-candle { transform: scaleY(1.02); }
.px-fx--tfl-bell.is-sink .tfl-fx-candle { transform: scaleY(0); transition: transform .22s cubic-bezier(.55, 0, .8, .4) calc((var(--n) - var(--i)) * var(--ss, 18ms)); }
.px-fx--tfl-bell .tfl-fx-bell {
  position: absolute; top: 0; left: 50%; width: 120px; height: 120px; margin-left: -60px;
  transform: translateY(-140%); transition: transform .32s cubic-bezier(.3, 1.4, .5, 1);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35));
  z-index: 3;
}
.px-fx--tfl-bell .tfl-fx-bell svg { display: block; width: 100%; height: 100%; }
.px-fx--tfl-bell.is-ring .tfl-fx-bell { transform: translateY(14px); }
.px-fx--tfl-bell.is-ring .tfl-fx-bell svg { animation: tfl-fx-strike .5s ease-out 2; transform-origin: 50% 80%; }
.px-fx--tfl-bell.is-lift .tfl-fx-bell { transform: translateY(-140%); transition-timing-function: cubic-bezier(.5, 0, .9, .5); }
.px-fx--tfl-bell .tfl-fx-ring {
  position: absolute; top: 74px; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%;
  border: 2px solid var(--fx-ringc); opacity: 0; z-index: 2;
}
.px-fx--tfl-bell.is-ring .tfl-fx-ring { animation: tfl-fx-ring .9s ease-out forwards; }
.px-fx--tfl-bell.is-ring .tfl-fx-ring:nth-of-type(2) { animation-delay: .18s; }
.px-fx--tfl-bell.is-ring .tfl-fx-ring:nth-of-type(3) { animation-delay: .36s; }
@keyframes tfl-fx-strike { 0% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 55% { transform: rotate(5deg); } 100% { transform: rotate(0); } }
@keyframes tfl-fx-ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(7); } }

/* ── Footer: the floor after the close. A brass rail on its posts, an
   engraved chart run along the frieze under it and the desk bell at
   the end of the rail; the links follow on ledger paper ── */
.tfl-footer {
  background: var(--tfl-feint) 0 18px, linear-gradient(180deg, #fbf8ef, #f4efe1) !important;
  color: var(--ink-2);
}
html.dark .tfl-footer {
  background: var(--tfl-feint) 0 18px, radial-gradient(900px 260px at 50% 0%, rgba(242, 179, 61, .07), transparent 70%), #050e0a !important;
}
.tfl-footer-top {
  position: relative; height: 112px; overflow: hidden;
  background: linear-gradient(180deg, #f4efe1, #ebe4d0);
  border-top: 1px solid var(--rule);
}
html.dark .tfl-footer-top { background: linear-gradient(180deg, #07130e, #0a1a13); }
.tfl-footer-frieze {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74px;
  background: var(--art-chartwide) center bottom / auto 100% repeat-x;
  opacity: .7;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
html.dark .tfl-footer-frieze { opacity: .55; }
.tfl-footer-rail { position: absolute; left: 0; right: 0; top: 42px; height: 8px; background: var(--tfl-strip); box-shadow: 0 2px 0 rgba(15, 42, 32, .25); }
html.dark .tfl-footer-rail { box-shadow: 0 2px 0 #000, var(--tfl-strip-glow); }
.tfl-footer-posts { position: absolute; left: 0; right: 0; top: 50px; height: 26px; background: linear-gradient(90deg, transparent 0 calc(50% - 2px), #8a6a22 calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) 0 0 / 160px 100% repeat-x; }
.tfl-footer-bell { position: absolute; top: 2px; inset-inline-end: 7%; width: 60px; }
.tfl-footer-bell svg { display: block; width: 100%; height: auto; }
@media (max-width: 639px) {
  .tfl-footer-top { height: 96px; }
  .tfl-footer-frieze { height: 58px; }
  .tfl-footer-bell { width: 52px; inset-inline-end: 16px; }
}
.tfl-footer a:hover { color: var(--tfl-accent-ink); }
html .tfl-footer .ed-footer-heading {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: 0; text-transform: none; color: var(--ink);
  padding-bottom: .45rem; margin-bottom: .7rem;
  background: linear-gradient(var(--tfl-ex), var(--tfl-ex)) 0 100% / 48px 2px no-repeat, linear-gradient(var(--tfl-brass), var(--tfl-brass)) 0 calc(100% - 4px) / 48px 1px no-repeat;
}
[dir="rtl"] .tfl-footer .ed-footer-heading { background-position: 100% 100%, 100% calc(100% - 4px); }
html.dark .tfl-footer .ed-footer-heading { background: linear-gradient(#e0a93b, #e0a93b) 0 100% / 48px 2px no-repeat, linear-gradient(rgba(224, 169, 59, .5), rgba(224, 169, 59, .5)) 0 calc(100% - 4px) / 48px 1px no-repeat; }
html.dark #desktopFooter li { color: var(--ink-2) !important; }
/* header.css greys every footer h4 after dark with an ID rule */
html.dark #desktopFooter .ed-footer-heading { color: var(--ink) !important; }
html .tfl-footer .ed-footer-link { color: var(--ink-2); background: linear-gradient(var(--tfl-brass), var(--tfl-brass)) left 100% / 0 1.5px no-repeat; transition: background-size .3s ease, color .2s ease; }
html .tfl-footer .ed-footer-link:hover, html .tfl-footer .ed-footer-link:focus-visible { background-size: 100% 1.5px; color: var(--ink); }
[dir="rtl"] .tfl-footer .ed-footer-link { background-position: right 100%; }

/* The floating nav: a brass-railed board of plates, the current one lit */
html .ed-floating-nav {
  position: relative;
  background: rgba(251, 248, 239, .97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid #b8913a;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(251, 248, 239, .97), inset 0 0 0 3px rgba(184, 145, 58, .35), 0 3px 0 #8a6a22, var(--shadow-md);
}
html.dark .ed-floating-nav { background: rgba(12, 29, 22, .97); border-color: rgba(224, 169, 59, .5); box-shadow: 0 3px 0 #000, 0 20px 40px -20px rgba(0, 0, 0, .9); }
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .95rem; font-weight: 600; color: var(--ink-2); border-radius: 5px; }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active { background: var(--tfl-ex); color: #f7f1df !important; box-shadow: inset 0 -2px 0 #c9a24a; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: #f7f1df !important; }
html.dark body .ed-floating-nav a.ed-floating-link.active { background: #e0a93b; color: #0b1a13 !important; box-shadow: inset 0 -2px 0 #7a5b14; }
html.dark body .ed-floating-nav a.ed-floating-link.active > span { color: #0b1a13 !important; }

/* The newsletter: a length of ticker tape on the green, its feed holes
   down the start edge */
html body .tfl-footer .ed-newsletter {
  position: relative; overflow: hidden;
  background: var(--tfl-wall) !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 0 1px rgba(227, 201, 127, .5), inset 0 0 0 4px #0f3d2e, inset 0 0 0 5px rgba(227, 201, 127, .3), 0 20px 40px -22px rgba(15, 42, 32, .7) !important;
}
html.dark body .tfl-footer .ed-newsletter { box-shadow: inset 0 0 0 1px rgba(224, 169, 59, .4), 0 0 40px -14px rgba(242, 179, 61, .35) !important; }
html body .tfl-footer .ed-newsletter::before { display: block !important; content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 22px; background: radial-gradient(circle, #0f3d2e 0 2.4px, transparent 3px) 50% 4px / 22px 12px repeat-y, #f4efe1; opacity: 1; border-radius: 0; }
html.dark body .tfl-footer .ed-newsletter::before { background: radial-gradient(circle, #040b08 0 2.4px, transparent 3px) 50% 4px / 22px 12px repeat-y, #e8dcb9; }
html body .tfl-footer .ed-newsletter::after { display: none !important; }
html body .tfl-footer .ed-newsletter, html body .tfl-footer .ed-newsletter * { --ink: #f4efe1; --ink-2: #e4dcc6; --ink-soft: #d6ccb0; }
html body .tfl-footer .ed-newsletter h4, html.dark body .tfl-footer .ed-newsletter h4 { color: #e8c77a !important; font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
html body .tfl-footer .ed-newsletter p:not(#newsletter-msg), html.dark body .tfl-footer .ed-newsletter p:not(#newsletter-msg) { color: #e4dcc6 !important; opacity: 1; }
html body .tfl-footer .ed-newsletter-input, html.dark body .tfl-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: #fbf8ef !important; color: #13241d !important; border: 1px solid #c9a24a !important; border-radius: 4px; }
html body .tfl-footer .ed-newsletter-input::placeholder { color: #56665c; }
html body .tfl-footer .ed-newsletter-input:focus { border-color: #e3c97f !important; box-shadow: 0 0 0 3px rgba(227, 201, 127, .4); }
html body .tfl-footer .ed-newsletter-btn { background: var(--tfl-brass-plate); color: #0f2a20; border: 0; border-radius: 4px; font-family: var(--font-ui); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(15, 42, 32, .3), 0 3px 0 #6e5419; transition: transform .12s ease, box-shadow .12s ease; }
html body .tfl-footer .ed-newsletter-btn:hover { filter: brightness(1.06); }
html body .tfl-footer .ed-newsletter-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 1px rgba(15, 42, 32, .3), 0 0 0 #6e5419; }
html body .tfl-footer .ed-newsletter-age, html body .tfl-footer .ed-newsletter label { color: #e4dcc6 !important; }
html body .tfl-footer .ed-newsletter > * { position: relative; }
@media (min-width: 640px) { html body .tfl-footer .ed-newsletter { padding-inline-start: 3.25rem !important; } }

/* Logo plate: the light-mode logo on an engraved brass-edged plaque
   wherever it sits on the green */
.tfl-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 1.4rem;
  background: #fbf8ef;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #c9a24a, inset 0 0 0 4px #fbf8ef, inset 0 0 0 5px rgba(184, 145, 58, .6), 0 14px 28px -14px rgba(0, 0, 0, .7);
}

/* Long titles and descriptions show in full; a card grows instead of
   clipping them. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; }
html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* .text-fit (assets/css/header.css) shrinks a title to one line with JS,
   measured before the display face loads; under this theme it wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* ── Dark-mode greys from assets/css/header.css ──
   header.css forces a neutral near-black palette onto Tailwind's light
   utilities with !important; these follow the floor after the close. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(7, 19, 14, 0.96) !important; border-bottom-color: transparent !important; }
html.dark #desktopFooter { background: #050e0a !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(12, 29, 22, 0.97) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark #langSheet { background: var(--paper-2) !important; border-top-color: #e0a93b !important; }
html.dark .premium-profile-header { background: var(--paper-2) !important; }
html.dark .premium-dropdown,
html.dark #mobileExploreSheet .bg-white,
html.dark #logoutModal .bg-white,
html.dark .bg-white,
html.dark [x-data] .bg-white,
html.dark .bg-white.shadow-xl,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2) !important; }
html.dark .bg-gray-50,
html.dark .even\:bg-gray-50:nth-child(even) { background-color: var(--paper) !important; }
html.dark .bg-gray-100,
html.dark #mobileExploreSheet .bg-gray-100,
html.dark thead { background-color: var(--paper-3) !important; }
html.dark .from-white, html.dark .from-gray-50 { --tw-gradient-from: var(--paper) !important; }
html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to: var(--paper) !important; }
html.dark .via-white, html.dark .via-gray-50 { --tw-gradient-via: var(--paper-2) !important; }
html.dark .from-gray-100 { --tw-gradient-from: var(--paper-2) !important; }
html.dark .to-gray-100 { --tw-gradient-to: var(--paper-2) !important; }
html.dark .search-input,
html.dark select:not(.no-dark) { background-color: var(--paper-2) !important; }
html.dark .gradient-bg { background: linear-gradient(-45deg, #13291f, #07130e, #0c1d16, #040b08) !important; }
html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; }

/* header.css fills every dark-mode field with #0d1117; here fields are
   the board's green-black. Same selector shape so it outranks it. */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-dark),
html.dark textarea:not(.no-dark),
html.dark select:not(.no-dark) {
  background-color: #050e0a !important;
  border-color: rgba(239, 231, 210, .22) !important;
  color: #efe7d2 !important;
}

/* Inverted panels: shared markup paints some panels with background
   var(--ink) and letters them in var(--paper), which only works while ink
   is dark. After dark those panels take the board's green-black. */
html.dark [style*="background: var(--ink)"],
html.dark [style*="background:var(--ink)"],
html.dark [style*="background-color: var(--ink)"],
html.dark [style*="background-color:var(--ink)"] {
  --ink: #040b08;
  --paper: #efe7d2;
  border-color: rgba(239, 231, 210, .18);
}

html header.safe-top-header[style] { background: rgba(251, 248, 239, .96) !important; }
html.dark header.safe-top-header[style] { background: rgba(7, 19, 14, .96) !important; }
/* A product page's phone bar: a long title takes two lines instead of
   pushing the balance chip off the screen */
html body header.safe-top-header > p.flex-grow { min-width: 0; white-space: normal !important; overflow-wrap: break-word; text-wrap: balance; line-height: 1.2; }
html body header.safe-top-header > a[href="/wallet"] { flex-shrink: 0; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(7, 19, 14, .96); }

/* ── Login / register / forgot-password brand panel: the board's green
   enamel in its brass frame, a strip of ticker tape along the top and an
   engraved chart along the foot ── */
:root {
  --brand-gradient: linear-gradient(170deg, #1a5240, #0f3d2e);
  --brand-glow-1: rgba(255, 255, 255, 0.12);
  --brand-glow-2: rgba(227, 201, 127, 0.2);
}
html.dark {
  --brand-gradient: linear-gradient(170deg, #0a1a13, #040b08);
  --brand-glow-1: rgba(242, 179, 61, 0.1);
  --brand-glow-2: rgba(224, 169, 59, 0.16);
}
html body .brand-panel {
  position: relative;
  background: var(--tfl-wall) !important;
  box-shadow: inset 0 0 0 6px #b8913a, inset 0 0 0 7px rgba(15, 42, 32, .6), inset 0 0 0 9px rgba(227, 201, 127, .35);
  color: #f7f1df;
}
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is an engraved chart along the panel's foot, in
   brass lines. */
html .brand-panel::after {
  content: ''; position: absolute;
  top: auto !important; bottom: 9px !important; left: 9px !important; right: 9px !important;
  width: auto !important; height: 30% !important;
  border-radius: 0 !important; opacity: .55 !important; filter: none !important; transform: none !important;
  background: var(--art-chartwide-brass) center bottom / auto 100% repeat-x !important;
  box-shadow: none !important;
}
/* login.css's other glow becomes a strip of ticker tape along the top */
html .brand-panel::before {
  top: 9px !important; bottom: auto !important; left: 9px !important; right: 9px !important; width: auto !important; height: 22px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: radial-gradient(circle, #0f3d2e 0 2px, transparent 2.6px) 0 50% / 12px 12px repeat-x, #efe7d0 !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25) !important;
}
html body .brand-panel .text-purple-200,
html body .brand-panel [class*="text-purple-200"],
html body .brand-panel .text-white\/80, html body .brand-panel .text-white\/70 { color: rgba(247, 241, 223, .88) !important; }
html body .brand-panel .text-white, html body .brand-panel h1, html body .brand-panel h2 { color: #f7f1df !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 700 !important; }

/* ── Wallet balance card: a page of the ledger. Cream paper with its
   feint ruling and the brass double margin, the green cloth binding down
   the start edge, an engraved rosette in the corner; the balance written
   in as a ledger entry in the board's mono ── */
html body .wallet-hero {
  position: relative;
  background:
    var(--tfl-margin),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(47, 111, 90, .2) 25px 26px),
    linear-gradient(160deg, #fffcf2, #f6eedb);
  border: 0;
  border-radius: 6px;
  box-shadow: inset 14px 0 0 #0f3d2e, inset 16px 0 0 #c9a24a, 0 0 0 1px rgba(15, 42, 32, .35), 0 3px 0 #d9cdae, 0 6px 0 -1px #ebe4d0, 0 26px 44px -22px rgba(19, 36, 29, .7);
  color: #13241d;
  overflow: hidden;
  margin: 2px 2px 14px;
  padding-inline-start: 2.6rem !important;
}
[dir="rtl"] body .wallet-hero {
  background:
    linear-gradient(270deg, transparent 0 34px, rgba(184, 145, 58, .55) 34px 35px, transparent 35px 38px, rgba(184, 145, 58, .55) 38px 39px, transparent 39px),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(47, 111, 90, .2) 25px 26px),
    linear-gradient(200deg, #fffcf2, #f6eedb);
  box-shadow: inset -14px 0 0 #0f3d2e, inset -16px 0 0 #c9a24a, 0 0 0 1px rgba(15, 42, 32, .35), 0 3px 0 #d9cdae, 0 6px 0 -1px #ebe4d0, 0 26px 44px -22px rgba(19, 36, 29, .7);
}
html body .wallet-hero::before {
  content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 4px; left: auto; right: auto; width: 6px; height: auto; margin: 0;
  border: 0; border-radius: 0; transform: none; opacity: .5;
  background: repeating-linear-gradient(180deg, #e3c97f 0 4px, transparent 4px 10px);
  pointer-events: none;
}
html:not([dir="rtl"]) body .wallet-hero::before { left: 4px; }
[dir="rtl"] body .wallet-hero::before { right: 4px; }
html body .wallet-hero::after {
  content: ''; position: absolute; inset-inline-end: 14px; top: 10px; left: auto; bottom: auto; width: 128px; height: 96px; margin: 0;
  border-radius: 0; transform: none; opacity: .75; filter: none;
  background: var(--art-rosette) center / contain no-repeat;
  box-shadow: none;
  pointer-events: none;
}
@media (max-width: 639px) {
  html body .wallet-hero::after { width: 76px; height: 58px; top: 10px; inset-inline-end: 8px; }
}
html body .wallet-hero > * { position: relative; z-index: 1; }
html body .wallet-hero .wallet-ref { margin-inline-end: 136px; color: #56665c !important; letter-spacing: .16em; font-size: .66rem; font-weight: 700; }
@media (max-width: 639px) { html body .wallet-hero .wallet-ref { margin-inline-end: 80px; } }
html body .wallet-hero span:is([style*="color:rgba(255,255,255"], [style*="color:color-mix(in srgb, var(--paper)"]) { color: #56665c !important; }
html body .wallet-hero [style*="color:#fff"], html body .wallet-hero [style*="color: #fff"], html body .wallet-hero .text-white { color: #13241d !important; }
html body .wallet-hero .h-px { background: rgba(184, 145, 58, .45) !important; }
html body .wallet-balance-num {
  font-family: var(--font-num); font-variation-settings: normal; font-weight: 700; letter-spacing: -.03em;
  color: #0f3d2e; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums;
}
html body .wallet-hero-btn-primary { background: #0f3d2e; color: #f7f1df; border: 0; font-family: var(--font-ui); font-weight: 700; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(227, 201, 127, .55), 0 3px 0 #062218; transition: transform .12s ease, box-shadow .12s ease; }
html body .wallet-hero-btn-primary:hover { background: #155a42; color: #f7f1df; }
html body .wallet-hero-btn-primary:active { transform: translateY(3px); box-shadow: inset 0 0 0 1px rgba(227, 201, 127, .55), 0 0 0 #062218; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #0f3d2e; background: rgba(255, 252, 242, .7); border: 1px solid #b8913a; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(255, 252, 242, .7), inset 0 0 0 3px rgba(184, 145, 58, .4); }
html body .wallet-hero-btn-secondary:hover { background: #0f3d2e; color: #f7f1df; }
/* After dark the ledger lies under the banker's lamp: the page dimmed to
   lamplight, the brass margins glowing */
html.dark body .wallet-hero {
  background:
    var(--tfl-margin),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(47, 111, 90, .22) 25px 26px),
    radial-gradient(120% 120% at 70% 0, #ecdfbd, #d4c39b);
  box-shadow: inset 14px 0 0 #0a2a1f, inset 16px 0 0 #e0a93b, 0 0 0 1px #000, 0 3px 0 #a99a74, 0 0 60px -14px rgba(242, 179, 61, .35);
}
[dir="rtl"] body.dark .wallet-hero, html.dark[dir="rtl"] body .wallet-hero { box-shadow: inset -14px 0 0 #0a2a1f, inset -16px 0 0 #e0a93b, 0 0 0 1px #000, 0 3px 0 #a99a74, 0 0 60px -14px rgba(242, 179, 61, .35); }

/* ── Box card (styled by assets/css/pages/home.css) ── */
html .ed-card-mystery {
  position: relative;
  background: var(--tfl-leaf);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.15), box-shadow .3s ease;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
html .ed-card-mystery::before {
  top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 6px; border-radius: 0;
  background: var(--tfl-topline); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: the trading post's order pad ── */
html body .pd-buybox {
  position: relative;
  background: var(--tfl-feint) 0 10px, var(--tfl-leaf);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
html body .pd-buybox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: var(--tfl-strip);
}
html body .pd-buybox .font-display.text-4xl { color: var(--ink); overflow-wrap: normal; font-family: var(--font-num); font-weight: 700; letter-spacing: -.03em; }
.pd-title { font-weight: 700 !important; }

/* The box page's own spin button is ink on paper and dynamic-theme's
   ".dark button" turns its label the colour of its fill; readable here on
   plugin releases without their own fix. */
html.dark button.spin-btn:not(:disabled) { color: var(--btn-ink); }

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take exchange green, amber after dark. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-600); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-700); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600, html .text-blue-600, html .text-blue-500 { color: var(--tfl-ex-ink); }
html.dark .text-purple-500, html.dark .text-purple-600, html.dark .text-indigo-500, html.dark .text-indigo-600, html.dark .text-violet-600, html.dark .text-blue-600, html.dark .text-blue-500 { color: var(--tfl-brass-ink); }
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background-color: var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 4px; box-shadow: 0 3px 0 var(--btn-side);
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100, html .bg-blue-50 { background-color: var(--tfl-ex-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50, html.dark .bg-blue-50 { background-color: var(--tfl-brass-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200, html .border-blue-200 { border-color: rgba(15, 61, 46, .25); }
html.dark .border-violet-200 { border-color: rgba(224, 169, 59, .3) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(184, 145, 58, .4); }
html .focus\:border-purple-400:focus { border-color: var(--tfl-ex); }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are the floor's green plates. */
html .bg-theme-600.text-white, html .bg-theme-500.text-white,
html .bg-blue-600.text-white, html .bg-blue-500.text-white {
  background: var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
}
html .bg-theme-600.text-white:hover, html .bg-theme-500.text-white:hover { background: var(--btn-bg-hover) !important; }
html .bg-theme-600.text-white [class*="border-white"] { border-color: rgba(247, 241, 223, .3); border-top-color: var(--btn-ink); }

/* ── Winners page cards ── */
html .wnc { border-radius: var(--radius); background: var(--tfl-leaf); border: 1px solid var(--rule); box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.2, .9, .3, 1.15), box-shadow .3s ease; }
html .wnc:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

/* ── Cart and checkout: the order total on a ruled slip ──
   Picked out by what the panels contain, so no copies of their markup
   (or their Alpine hooks) live in the theme. */
html [id^="cart-row-"] { background: var(--tfl-leaf) !important; border: 1px solid var(--rule) !important; border-radius: 6px !important; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: var(--tfl-feint) 0 14px, var(--tfl-leaf) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 6px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}
html .rounded-2xl:has(> div > div > #summary-total)::before,
html section.rounded-2xl:has([x-text="totalDisplay()"])::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: var(--tfl-strip);
}
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(1.25rem, 5vw, 1.6rem);
  letter-spacing: -.04em;
  color: var(--ink);
  overflow-wrap: normal;
  font-variant-numeric: lining-nums tabular-nums;
}

/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; }
.hdr-strip .ed-status { font-size: 11px; letter-spacing: .1em; }
/* Small phones: the dark-mode switch and the App chip in the header drop
   their words and keep their icons. */
@media (max-width: 419px) {
  html .hdr-strip .dark-mode-toggle span { display: none; }
  html .mobile-glass-header .pwa-chip__label { display: none; }
  html .mobile-glass-header .pwa-chip { padding: 0 .6rem; }
}

/* The hero's board is drawn by components/home/hero.css, which arrives
   after this sheet; until it does, the bare markup would paint as plain
   rows, so the board waits out of sight. */
.tfl-hero__scene { visibility: hidden; max-height: 0; overflow: hidden; }

/* ── The floor's small pieces ── */
/* The five colours banners and categories are mapped to (tfl_tone_for()) */
:root { --tfl-t1: #0f3d2e; --tfl-t2: #b8913a; --tfl-t3: #16a34a; --tfl-t4: #2f6f5a; --tfl-t5: #c2410c; }
html.dark { --tfl-t1: #6fa58c; --tfl-t2: #e0a93b; --tfl-t3: #3ccf6e; --tfl-t4: #9cc7b2; --tfl-t5: #e0612b; }
.tfl-dot { display: inline-block; width: 5px; height: 5px; transform: rotate(45deg); background: currentColor; opacity: .55; flex-shrink: 0; }

/* A flap: one character cell of the quote board, split by its hinge.
   .tfl-flaps holds a run of them; .tfl-flap--wide carries a whole word on
   one long flap. */
.tfl-flaps { display: inline-flex; gap: 2px; direction: ltr; }
.tfl-flap {
  position: relative; display: inline-grid; place-items: center;
  min-width: 1.05em; padding: .16em .1em .12em;
  font-family: var(--font-flap); font-weight: 600; line-height: 1; letter-spacing: 0;
  color: var(--tfl-flap-ink);
  text-shadow: var(--tfl-flap-glow);
  background: var(--tfl-flap);
  border-radius: 2px;
  box-shadow: var(--tfl-flap-shadow);
  font-variant-numeric: tabular-nums;
}
.tfl-flap--wide { padding: .32em .6em .28em; min-width: 0; font-family: var(--font-ui); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* A signal lamp in its brass bezel: lit green for something live */
.tfl-lamp { position: relative; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8af0ac, #16a34a 60%); box-shadow: 0 0 0 1.5px #b8913a, 0 0 0 2.5px rgba(15, 42, 32, .4), 0 0 8px rgba(22, 163, 74, .8); flex-shrink: 0; }
.tfl-lamp--amber { background: radial-gradient(circle at 35% 35%, #fbe3a3, #e0a93b 60%); box-shadow: 0 0 0 1.5px #b8913a, 0 0 0 2.5px rgba(15, 42, 32, .4), 0 0 8px rgba(224, 169, 59, .9); }
.tfl-lamp--off { background: radial-gradient(circle at 35% 35%, #7f8a80, #3d4a42 60%); box-shadow: 0 0 0 1.5px #8a6a22, 0 0 0 2.5px rgba(15, 42, 32, .3); }
@media (prefers-reduced-motion: no-preference) {
  .tfl-lamp:not(.tfl-lamp--off) { animation: tfl-lamp 1.8s ease-in-out infinite; }
}
@keyframes tfl-lamp { 50% { filter: brightness(.7); } }

/* A brass nameplate: engraved lettering on polished brass, screwed down
   at both ends */
.tfl-plate {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .7rem .28rem;
  font: 700 11.5px/1.1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: #0f2a20;
  background: radial-gradient(circle, #6e5419 0 1.3px, transparent 1.8px) 5px 50% / 6px 6px no-repeat, radial-gradient(circle, #6e5419 0 1.3px, transparent 1.8px) calc(100% - 5px) 50% / 6px 6px no-repeat, var(--tfl-brass-plate);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(15, 42, 32, .45), inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 0 rgba(15, 42, 32, .3);
  padding-inline: 1rem;
  white-space: nowrap;
}
.tfl-plate--ex { color: #f4e3a8; background: radial-gradient(circle, #c9a24a 0 1.3px, transparent 1.8px) 5px 50% / 6px 6px no-repeat, radial-gradient(circle, #c9a24a 0 1.3px, transparent 1.8px) calc(100% - 5px) 50% / 6px 6px no-repeat, #0f3d2e; box-shadow: inset 0 0 0 1px #c9a24a, 0 1px 0 rgba(0, 0, 0, .3); }
.tfl-plate--bell::before { content: ''; width: 13px; height: 13px; flex-shrink: 0; background: currentColor; -webkit-mask: var(--tfl-bellmark) center / contain no-repeat; mask: var(--tfl-bellmark) center / contain no-repeat; }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .tfl-plate { letter-spacing: .01em; font-size: 12.5px; }

/* A chit: a dealer's slip, a short paper tag with a ruled edge in one of
   the inks */
.tfl-chit {
  --sc: var(--tfl-green-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .3rem .65rem .26rem;
  font: 700 11px/1.1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--sc);
  background: linear-gradient(var(--sc), var(--sc)) 0 0 / 3px 100% no-repeat, var(--paper-2);
  border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
  border-radius: 2px;
  white-space: nowrap;
}
[dir="rtl"] .tfl-chit { background-position: 100% 0, 0 0; }
.tfl-chit--ex { --sc: var(--tfl-ex-ink); }
.tfl-chit--brass { --sc: var(--tfl-brass-ink); }
.tfl-chit--red { --sc: var(--tfl-red-ink); }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .tfl-chit { letter-spacing: .01em; }

.tfl-balance, .tfl-icon-btn { border: 1px solid var(--rule); color: var(--ink); background: var(--paper-2); transition: border-color .2s ease, transform .12s ease, box-shadow .12s ease; box-shadow: 0 2px 0 var(--rule); }
.tfl-balance:hover, .tfl-icon-btn:hover { border-color: var(--tfl-brass); }
html.dark .tfl-balance:hover, html.dark .tfl-icon-btn:hover { border-color: #e0a93b; }
.tfl-balance:active, .tfl-icon-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--rule); }
.tfl-balance [data-raw] { font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

/* A sheet for dialogs and drawers: a ledger leaf under the double rule */
.tfl-sheet {
  position: relative; overflow: hidden;
  background: var(--tfl-leaf);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 24px 50px -24px rgba(19, 36, 29, .55);
}
.tfl-sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--tfl-topline); }
html.dark .tfl-sheet { box-shadow: 0 0 0 1px rgba(224, 169, 59, .14), 0 24px 50px -20px rgba(0, 0, 0, .9); }
html body [style*="background:#16a34a"] { background: var(--tfl-green) !important; }
/* The floating nav pill is printed inside the footer; it floats over the
   page and keeps the page's own colours. */
html body .tfl-footer .ed-floating-nav { --ink: #13241d; --ink-2: #2c4a3c; --paper-3: #ebe4d0; }
html.dark body .tfl-footer .ed-floating-nav { --ink: #efe7d2; --ink-2: #d8cfb8; --paper-3: #13291f; }
/* The phone menu button: a cream slip */
html body .menu-btn, html.dark body .menu-btn { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; box-shadow: 0 2px 0 var(--rule); }
html body .menu-btn:hover, html.dark body .menu-btn:hover { background: var(--paper-3) !important; transform: none; }
html body .menu-btn:active { transform: translateY(2px); box-shadow: none; }

/* ── Micro-interactions shared by the whole floor ──
   A badge is posted like an entry in the book, sliding in under a brass
   rule (.tfl-posted); a countdown's figures turn over like a flap of the
   quote board (.tfl-tick); whatever bids, buys or adds to the cart rings
   the desk bell, two rings of sound spreading from it (.tfl-ding,
   trading-floor.js). */
@media (prefers-reduced-motion: no-preference) {
  .tfl-posted { animation: tfl-posted .45s cubic-bezier(.25, 1.3, .5, 1) both; }
  .tfl-tick { animation: tfl-tick .3s cubic-bezier(.4, 0, .6, 1); transform-origin: 50% 50%; }
}
@keyframes tfl-posted { 0% { transform: translateY(-6px); opacity: 0; clip-path: inset(0 100% 0 0); } 100% { transform: none; opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes tfl-tick { 0% { transform: perspective(160px) rotateX(-80deg); filter: brightness(.6); } 100% { transform: none; filter: none; } }
.tfl-ding {
  position: fixed; z-index: 2147482000; pointer-events: none;
  border-radius: 6px;
}
.tfl-ding::before, .tfl-ding::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid #c9a24a; opacity: 0;
  animation: tfl-ding .7s ease-out forwards;
}
.tfl-ding::after { animation-delay: .14s; border-color: var(--tfl-green); }
html.dark .tfl-ding::before { border-color: #f2b33d; }
@keyframes tfl-ding { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18, 1.5); } }

/* ── Walls: ledger ruling beside the words ──
   A wall that carries words draws a faint ruling of feint lines and a
   brass column rule on a layer of its own, masked away from the copy:
   down both sides of a centred copy, on the far side of a copy that sits
   to one side, nowhere at phone width. */
:root {
  --tfl-wall-pat: repeating-linear-gradient(180deg, transparent 0 23px, rgba(47, 111, 90, .16) 23px 24px), linear-gradient(90deg, rgba(184, 145, 58, .25) 0 1px, transparent 1px) 0 0 / 96px 100%;
  --tfl-mask-c: linear-gradient(90deg, #000 0, #000 7%, transparent 19%, transparent 81%, #000 93%, #000 100%);
  --tfl-mask-s: linear-gradient(90deg, transparent 0, transparent 52%, #000 64%, #000 100%);
}
html.dark { --tfl-wall-pat: repeating-linear-gradient(180deg, transparent 0 23px, rgba(242, 179, 61, .09) 23px 24px), linear-gradient(90deg, rgba(224, 169, 59, .16) 0 1px, transparent 1px) 0 0 / 96px 100%; }
[dir="rtl"] { --tfl-mask-s: linear-gradient(270deg, transparent 0, transparent 52%, #000 64%, #000 100%); }
@media (max-width: 1023px) {
  :root, [dir="rtl"] { --tfl-mask-c: linear-gradient(transparent, transparent); --tfl-mask-s: linear-gradient(transparent, transparent); }
}
.tfl-wn, html body .tfl-ruled, html body .tfl-err, body.tfl-404, html body .brand-panel, .ga-marquee { isolation: isolate; }
.tfl-wn::before, html body .tfl-ruled::before, html body .tfl-err::before, body.tfl-404::before, .ga-marquee::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--tfl-wall-pat);
  -webkit-mask: var(--tfl-mask-c); mask: var(--tfl-mask-c);
}
.ga-marquee::after { -webkit-mask: var(--tfl-mask-s); mask: var(--tfl-mask-s); display: block; }
body.tfl-404::before { position: fixed; }
.tfl-rules { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--tfl-wall-pat); -webkit-mask: var(--tfl-mask-c); mask: var(--tfl-mask-c); }

/* Phones: headings break only between words, never mid-word. */
@media (max-width: 639px) {
  html body .reveal.flex-row:has(> .btn-view-all) h2.text-fit { font-size: clamp(1.4rem, 7vw, 1.8rem); }
  html body :is(h1, h2, h3):is(.text-fit, .truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
}

/* Phones: a ticket's two dates stack rather than run into each other; the
   bids page's four tiles go two by two (a long German label was cut
   off); a lot page's browse link drops under its heading (its German
   label pushed the page wider). */
@media (max-width: 639px) {
  html body .grid.grid-cols-2.rtl-text-right:has(> div > .whitespace-nowrap) { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  html body .grid.grid-cols-4:has(> div > p.text-3xl.font-extrabold) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
}

/* The head of a caption card: the double rule of a ledger column, green
   over brass */
:root { --tfl-topline: linear-gradient(180deg, #0f3d2e 0 3px, transparent 3px 4px, #c9a24a 4px 6px); }
html.dark { --tfl-topline: linear-gradient(180deg, #e0a93b 0 3px, transparent 3px 4px, rgba(224, 169, 59, .45) 4px 6px); }

/* A product's ground: thumbnails, the prize in a dialog, the icon of a
   notice. A cream card in a brass bezel. */
:root {
  --tfl-face: radial-gradient(80% 80% at 50% 20%, #fffdf6, #efe8d6);
  --tfl-face-ring: inset 0 0 0 1px rgba(19, 36, 29, .12), inset 0 0 0 3px #fffdf6, inset 0 0 0 4px rgba(184, 145, 58, .45);
  /* A pool of lamp-light */
  --tfl-window: radial-gradient(closest-side, rgba(255, 250, 230, .8), rgba(255, 250, 230, 0));
  /* A meter: a run of brass flaps filling in */
  --tfl-meter: repeating-linear-gradient(90deg, transparent 0 9px, rgba(15, 42, 32, .3) 9px 11px), var(--tfl-brass-bar);
}
html.dark {
  /* A warm graphite lift, so black products still read on it */
  --tfl-face: radial-gradient(80% 80% at 50% 30%, #4f5446, #26362d 85%);
  --tfl-face-ring: inset 0 0 0 1px rgba(239, 231, 210, .14), inset 0 0 0 3px #0c1d16, inset 0 0 0 4px rgba(224, 169, 59, .4);
  --tfl-window: radial-gradient(closest-side, rgba(242, 179, 61, .16), rgba(242, 179, 61, 0));
}
/* A flap cell for a real figure (a countdown, a count): two leaves, the
   upper lit, no hinge line through the figures; and the trading post's
   counter under its lamp, the ground a product photo stands on */
:root {
  --tfl-cell: linear-gradient(180deg, #fbf6e6 0 50%, #ece3ca 50%);
  --tfl-cell-ink: #0f2a20;
  --tfl-cell-ring: 0 0 0 1px rgba(15, 42, 32, .25), 0 2px 3px -1px rgba(0, 0, 0, .35);
  --tfl-counter:
    linear-gradient(180deg, #ecd796, #b8913a 40%, #6e5419) 0 86% / 100% 4px no-repeat,
    linear-gradient(180deg, #6b4428, #4a2e1a) 0 100% / 100% 14% no-repeat,
    radial-gradient(70% 60% at 50% 42%, rgba(255, 250, 230, .95), rgba(255, 250, 230, 0) 70%),
    repeating-linear-gradient(180deg, transparent 0 19px, rgba(47, 111, 90, .12) 19px 20px),
    linear-gradient(180deg, #f6efdc, #efe6cf 80%);
}
html.dark {
  --tfl-cell: linear-gradient(180deg, #1c3329 0 50%, #142a20 50%);
  --tfl-cell-ink: #f2b33d;
  --tfl-cell-ring: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 10px -2px rgba(242, 179, 61, .35);
  --tfl-counter:
    linear-gradient(180deg, #f3d98d, #9c7a2e 40%, #4a3a14) 0 86% / 100% 4px no-repeat,
    linear-gradient(180deg, #3e2a1a, #24170d) 0 100% / 100% 14% no-repeat,
    radial-gradient(70% 60% at 50% 42%, #58594a, rgba(88, 89, 74, 0) 72%),
    repeating-linear-gradient(180deg, transparent 0 19px, rgba(242, 179, 61, .06) 19px 20px),
    linear-gradient(180deg, #26392f, #1d2d25 80%);
}
/* Phones: a long single word in a big section title ("funktioniert's")
   gets a size that fits the row instead of breaking */
@media (max-width: 639px) {
  html body h2.text-fit.text-4xl { font-size: clamp(1.35rem, 6.6vw, 2.25rem); }
}

/* A countdown in its last ten seconds turns the muted red of a real
   ending (trading-floor.js sets .tfl-final from the real end) */
.countdown-timer.tfl-final, #countdown.tfl-final { color: var(--tfl-red-ink) !important; }

/* A page title on a phone takes a size its longest word fits at: German
   compounds such as "Nutzungsbedingungen" would otherwise split mid-word */
@media (max-width: 639px) {
  html body h1.font-display:is(.text-4xl, .text-5xl) { font-size: clamp(1.5rem, 7.6vw, 2.25rem); }
  html body :is(h1, h2, h3):is(.text-fit, .truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
}

/* Status tones (kernel 1.1.166): this theme's own green, amber, red and info hues
   for the shared .px-tone-* chips and notes, each set so its chip and text
   read at 4.5:1 or better on this theme's paper in light and dark. */
html:root { --px-good: #166534; --px-warn: #7b5c14; --px-crit: #b33b0a; --px-info: #0f3d2e; }
html.dark:root { --px-good: #3bcf6d; --px-warn: #e8c678; --px-crit: #f3a17c; --px-info: #98b5f6; }

/* Changing language, the scene (trading-floor.js): the quote board with the
   old language falling and the new one rising, the tape running under them,
   then the new one locked in with a green flash. The board is the same on
   both pages, so the reload never shows. */
.tfl-lang-stage { background: color-mix(in srgb, #061b14 60%, transparent); }
.tfl-lang-board {
  position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 14px 16px 16px; border-radius: 6px;
  /* The day stacks whatever the page's language, so both pages set it alike */
  --tfl-lang-ui: 'Public Sans', 'Segoe UI', system-ui, 'Noto Sans', sans-serif;
  --tfl-lang-display: 'Old Standard TT', Georgia, 'Times New Roman', serif;
  color: #efe7d2; font-family: var(--tfl-lang-ui);
  background:
    var(--tfl-bolt) 5px 5px / 8px 8px no-repeat, var(--tfl-bolt) calc(100% - 5px) 5px / 8px 8px no-repeat,
    var(--tfl-bolt) 5px calc(100% - 5px) / 8px 8px no-repeat, var(--tfl-bolt) calc(100% - 5px) calc(100% - 5px) / 8px 8px no-repeat,
    var(--tfl-board);
  box-shadow: inset 0 0 0 4px var(--tfl-brass), inset 0 0 0 5px var(--tfl-brass-deep), 0 34px 70px -28px rgba(0, 0, 0, .7);
}
.tfl-lang-head {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 12px; padding: 5px 14px; width: fit-content; max-width: 100%;
  box-sizing: border-box; border-radius: 3px; background: var(--tfl-brass-plate); color: #2a1f08;
  font: 600 13px/1.2 var(--tfl-lang-display); letter-spacing: .06em; box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.tfl-lang-rosette { font-size: 14px; }
.tfl-lang-rows { display: grid; gap: 8px; }
.tfl-lang-row {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 4px; background: var(--tfl-board-3);
  box-shadow: 0 0 0 0 rgba(60, 207, 110, 0);
}
.tfl-lang-sym { display: inline-flex; align-items: center; gap: 8px; }
.tfl-lang-flag { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.tfl-lang-flaps { display: inline-flex; gap: 2px; perspective: 300px; }
.tfl-lang-flap {
  display: grid; place-items: center; width: 1.05em; height: 1.4em; border-radius: 3px;
  font: 600 clamp(18px, 5vw, 24px)/1 var(--font-flap); color: var(--tfl-flap-ink);
  background: var(--tfl-flap); box-shadow: var(--tfl-flap-shadow); text-shadow: var(--tfl-flap-glow);
}
.tfl-lang-name { font: 600 clamp(14px, 3.8vw, 16px)/1.2 var(--tfl-lang-ui); overflow-wrap: anywhere; }
.tfl-lang-spark { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
.tfl-lang-spark i { display: block; width: 5px; border-radius: 1px; background: #ff7a45; transform-origin: 50% 100%; }
.tfl-lang-spark i:nth-child(1) { height: 100%; }
.tfl-lang-spark i:nth-child(2) { height: 78%; }
.tfl-lang-spark i:nth-child(3) { height: 84%; }
.tfl-lang-spark i:nth-child(4) { height: 52%; }
.tfl-lang-spark i:nth-child(5) { height: 30%; }
.tfl-lang-new .tfl-lang-spark i { background: #3ccf6e; }
.tfl-lang-new .tfl-lang-spark i:nth-child(1) { height: 26%; }
.tfl-lang-new .tfl-lang-spark i:nth-child(2) { height: 44%; }
.tfl-lang-new .tfl-lang-spark i:nth-child(3) { height: 38%; }
.tfl-lang-new .tfl-lang-spark i:nth-child(4) { height: 70%; }
.tfl-lang-new .tfl-lang-spark i:nth-child(5) { height: 100%; }
.tfl-lang-dir { font-size: 18px; line-height: 1; color: #ff7a45; }
.tfl-lang-new .tfl-lang-dir { color: #3ccf6e; }
.tfl-lang-lock {
  position: absolute; top: -9px; right: -8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: #22a04f; color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 0 0 2px var(--tfl-board); opacity: 0;
}
.tfl-lang-tape {
  /* Sized by the board, never by its run of ticks */
  width: 100%; min-width: 0; contain: inline-size;
  margin-top: 14px; padding: 12px 0 9px; overflow: hidden; border-radius: 2px;
  background: var(--tfl-perf-x), var(--paper-2); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.tfl-lang-run { display: flex; width: max-content; }
.tfl-lang-tick { flex: none; padding-inline-end: 14px; font: 600 13px/1 var(--font-flap); letter-spacing: .08em; white-space: nowrap; }
.tfl-lang-tick em { font-style: normal; }
.tfl-lang-dn { color: var(--tfl-red-ink); }
.tfl-lang-up { color: var(--tfl-green-ink); }

/* Out: the board comes up, its flaps turn, the old one falls and the new one rises. */
.px-lang-stage-out .tfl-lang-board { animation: tfl-lang-board-in .32s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .tfl-lang-old .tfl-lang-flap { animation: tfl-lang-flap .26s steps(3, end) .28s both; }
.px-lang-stage-out .tfl-lang-new .tfl-lang-flap { animation: tfl-lang-flap .26s steps(3, end) .42s both; }
.px-lang-stage-out .tfl-lang-spark i { animation: tfl-lang-bar .3s ease-out .5s both; }
.px-lang-stage-out .tfl-lang-old { animation: tfl-lang-dim .3s ease .56s both; }
.px-lang-stage-out .tfl-lang-old .tfl-lang-dir { animation: tfl-lang-fall .22s ease-in-out .42s 2 both; }
.px-lang-stage-out .tfl-lang-new .tfl-lang-dir { animation: tfl-lang-rise .22s ease-in-out .42s 2 both; }
.px-lang-stage-out .tfl-lang-run { animation: tfl-lang-tape-a .88s linear both; }
/* In: it starts where out ended; the new one locks in with a green flash. */
.px-lang-stage-in .tfl-lang-old { opacity: .5; }
.px-lang-stage-in .tfl-lang-run { animation: tfl-lang-tape-b 1.1s linear both; }
.px-lang-stage-in .tfl-lang-new { animation: tfl-lang-lock-in .6s ease-out .25s both; }
.px-lang-stage-in .tfl-lang-new .tfl-lang-flap { animation: tfl-lang-green .5s ease-out .25s both; }
.px-lang-stage-in .tfl-lang-lock { animation: tfl-lang-stamp .3s cubic-bezier(.2, .9, .3, 1.35) .4s both; }
.px-lang-stage-in .tfl-lang-board { animation: tfl-lang-board-out .26s ease-in 1s both; }
@keyframes tfl-lang-board-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes tfl-lang-board-out { to { transform: translateY(26px); opacity: 0; } }
@keyframes tfl-lang-flap { from { transform: rotateX(90deg); filter: brightness(.55); } }
@keyframes tfl-lang-bar { from { transform: scaleY(0); } }
@keyframes tfl-lang-dim { to { opacity: .5; } }
@keyframes tfl-lang-fall { 50% { transform: translateY(5px); } }
@keyframes tfl-lang-rise { 50% { transform: translateY(-5px); } }
@keyframes tfl-lang-tape-a { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@keyframes tfl-lang-tape-b { from { transform: translateX(-25%); } to { transform: translateX(-50%); } }
@keyframes tfl-lang-lock-in {
  30%  { box-shadow: 0 0 0 3px #3ccf6e, 0 0 24px 4px rgba(60, 207, 110, .6); }
  100% { box-shadow: 0 0 0 2px #3ccf6e, 0 0 0 0 rgba(60, 207, 110, 0); }
}
@keyframes tfl-lang-green { 40% { color: #3ccf6e; filter: brightness(1.15); } }
@keyframes tfl-lang-stamp { from { transform: scale(2.2); opacity: 0; } to { opacity: 1; } }
@media (max-width: 460px) {
  .tfl-lang-board { padding: 12px 12px 14px; }
  .tfl-lang-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; }
  .tfl-lang-spark { display: none; }
}

/* Phones: the hero's two buttons stay side by side, each as wide as its
   label needs, their text and padding shrinking with the screen; a label
   still too long takes two even lines inside its button. A home section's title and its "View all" link
   share one row too: the title keeps a little under half of it, breaking
   between words if it must, and only a very long link label takes two
   lines. */
@media (max-width: 639px) {
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .5rem; }
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) {
    flex: 1 1 auto; min-width: min-content; width: auto; margin: 0; justify-content: center; text-align: center; white-space: normal; text-wrap: balance;
    padding-inline: clamp(.5rem, 2.6vw, 1.25rem); font-size: clamp(.75rem, 3.5vw, .9375rem); line-height: 1.15;
  }
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) > :is(svg, i, img) { flex: none; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; column-gap: .75rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > div { flex: 1 1 0; min-width: 45%; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > a { flex: 0 1 auto; max-width: 55%; margin: 0; white-space: normal; text-wrap: balance; text-align: center; font-size: .8125rem; line-height: 1.2; letter-spacing: .02em; gap: .375rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) h2.text-fit { font-size: clamp(1.25rem, 6.4vw, 1.75rem); overflow-wrap: break-word; }
}

/* Recent winners strip. It also stops while one of its cards has focus,
   slides towards the reading side on right-to-left pages (the shared loop
   only runs leftwards, which empties the row there), and holds still with
   each winner shown once when there are too few of them to fill the row
   (data-wt-still, set by assets/js/components/home/winner-ticker.js). */
html body .wt-wrap:focus-within .wt-track { animation-play-state: paused; }
@keyframes wt-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: no-preference) {
  html[dir="rtl"] body .wt-track { animation-name: wt-scroll-rtl; }
}
html body .wt-wrap[data-wt-still] .wt-track { animation: none; transform: none; margin-inline: auto; }
html body .wt-wrap[data-wt-still] .wt-card[data-wt-repeat] { display: none; }
/* The shine that crosses a card on hover rests just off its edge, and these
   cards don't clip it: on a still strip it would show on the bare ground
   beside the first card, so it waits there unseen. */
html body .wt-wrap[data-wt-still] .wt-card:not(:hover)::after { opacity: 0; }
/* rev 868fe5109c9f2a2b */