/* ============================================================================
   THE FLOOR — design system v3
   ----------------------------------------------------------------------------
   The brief was "brand, not generic AI UI". Generic reads as: uniform 12px
   rounded cards, gradient buttons, even padding everywhere, emoji icons, air
   instead of structure. This system deliberately refuses all of that.

   SIX OWNABLE DEVICES. Every surface is built from these and nothing else, so
   a cropped screenshot is still recognisably THE FLOOR:

     1. NOTCH   — panels are chamfered top-right, never fully rounded. Reads as
                  a machined instrument face, not a web card.
     2. RULE    — section heads are a mono label + hairline running to the edge.
     3. SEAL    — [◇ VERIFIED] bracket mark, wherever proof is asserted.
     4. SPINE   — 2px left bar carrying identity/competitor colour.
     5. FIGURE  — the numeral treatment: condensed 800, tabular, always signed.
     6. TAPE    — a hairline monospace ticker. The broadcast signature.

   RULES OF THE HOUSE
     · Structure with hairlines, not shadows and gaps. Density is the point —
       this is a trading floor, not a landing page.
     · One accent. Semantic colour (win/loss) is never decorative.
     · Nothing animates unless it is data.
     · Every figure is tabular-numeric and carries its sign.
   ========================================================================= */

:root{
  /* --- ink --- */
  --base:#090806; --base2:#0C0B09; --panel:#141210; --panel2:#1B1814;
  --line:#272219; --line2:#3A3327;
  --bone:#F4F1EA; --dim:#E0D8C8; --dim2:#C6BAA4;
  /* --- one accent --- */
  --accent:#E9A227; --accent2:#B87811; --gold:#F2C572;
  /* --- the opponent, for duels only --- */
  --rival:#5AA6C4; --rival2:#2C6D8C;
  /* --- semantics, never decorative --- */
  --win:#2ECC8F; --loss:#E8505B;
  --okText:#B7F2D4; --warnText:#F0D9A6; --errText:#FFB3BA;
  /* --- type roles --- */
  --disp:'Saira Condensed','Bahnschrift',system-ui,sans-serif;
  --sans:'Saira',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* --- 8px baseline --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --notch:11px;
}

/* ---------------------------------------------------------------- 1. NOTCH */
.fl-panel{
  position:relative;background:var(--panel);border:1px solid var(--line);
  clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
/* the border is clipped away on the chamfer, so draw the bevel itself */
.fl-panel::after{
  content:'';position:absolute;top:0;right:0;width:calc(var(--notch) * 1.42);height:1px;
  background:var(--line);transform-origin:right top;transform:rotate(45deg);
  transform:translateX(1px) rotate(45deg);pointer-events:none;
}
.fl-panel.is-live{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.fl-panel.is-live::after{background:color-mix(in srgb,var(--accent) 45%,transparent)}
.fl-panel__body{padding:var(--s3) var(--s4)}

/* ----------------------------------------------------------------- 2. RULE */
.fl-rule{
  display:flex;align-items:center;gap:var(--s3);margin:var(--s5) 0 var(--s3);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim2);
}
.fl-rule::after{content:'';flex:1;height:1px;background:var(--line)}
.fl-rule b{color:var(--accent);font-weight:500}
/* a rule that leads with the accent tick */
.fl-rule--tick::before{content:'';width:6px;height:6px;background:var(--accent);flex:0 0 auto}

/* ----------------------------------------------------------------- 3. SEAL */
/* ---------------------------------------------------------------- 3. SEAL
   THE VERIFIED SEAL — the single most important mark on the platform. The whole
   product claim is "this account is real and bound", so this is the one element
   allowed to glow: the light IS the claim. Everything else stays restrained.

   Two treatments, because a glow only works on ink — on cream a halo reads as
   blur, so paper gets a struck-stamp instead (solid fill + a breathing ring).  */
html .fl-seal,
html .badge.v,
html .tick{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;white-space:nowrap;
  color:var(--win);
  border:1px solid color-mix(in srgb,var(--win) 50%,transparent);
  background:color-mix(in srgb,var(--win) 12%,transparent);
  padding:4px 9px;
  text-shadow:0 0 9px color-mix(in srgb,var(--win) 75%,transparent);
  box-shadow:0 0 14px -2px color-mix(in srgb,var(--win) 45%,transparent),
             inset 0 0 12px -4px color-mix(in srgb,var(--win) 55%,transparent);
  animation:fl-seal-glow 2.8s ease-in-out infinite;
}
/* The diamond is DRAWN, not a glyph. It was written as a CSS hex escape (U+25C7), which
   a build step mangled into an invisible control byte + the literal text "C7"
   on the live badge — and even
   intact, JetBrains Mono has no U+25C7 to render it with. A rotated square has
   no font dependency and cannot be corrupted by escaping. */
html .fl-seal::before,html .badge.v::before{
  content:'';width:7px;height:7px;flex:0 0 auto;
  background:currentColor;transform:rotate(45deg);
  box-shadow:0 0 8px currentColor}
/* a bare inline tick (chat, tables) — same light, no chrome */
html .tick{border:0;background:none;padding:0;font-size:inherit;letter-spacing:0;
  box-shadow:none;animation:fl-seal-glow 2.8s ease-in-out infinite}
@keyframes fl-seal-glow{
  0%,100%{box-shadow:0 0 12px -3px color-mix(in srgb,var(--win) 38%,transparent),
                     inset 0 0 12px -5px color-mix(in srgb,var(--win) 45%,transparent);
          text-shadow:0 0 8px color-mix(in srgb,var(--win) 60%,transparent)}
  50%    {box-shadow:0 0 22px 0 color-mix(in srgb,var(--win) 62%,transparent),
                     inset 0 0 14px -3px color-mix(in srgb,var(--win) 70%,transparent);
          text-shadow:0 0 14px color-mix(in srgb,var(--win) 95%,transparent)}
}
/* PAPER: a stamp, not a glow. Solid ink-on-green with a ring that breathes. */
html[data-surface="paper"] .fl-seal,
html[data-surface="paper"] .badge.v{
  color:#F6F3EC;background:var(--win);border-color:var(--win);
  text-shadow:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--win) 20%,transparent);
  animation:fl-seal-stamp 2.8s ease-in-out infinite;
}
html[data-surface="paper"] .tick{color:var(--win);text-shadow:none;
  animation:fl-seal-stamp 2.8s ease-in-out infinite}
@keyframes fl-seal-stamp{
  0%,100%{box-shadow:0 0 0 2px color-mix(in srgb,var(--win) 16%,transparent)}
  50%    {box-shadow:0 0 0 5px color-mix(in srgb,var(--win) 26%,transparent)}
}
.fl-seal--pending{color:var(--dim2)!important;border-color:var(--line2)!important;
  background:transparent!important;text-shadow:none!important;box-shadow:none!important;animation:none!important}
.fl-seal__hash{font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.04em;word-break:break-all}

/* ---------------------------------------------------------------- 4. SPINE */
.fl-spine{position:relative;padding-left:var(--s3)}
.fl-spine::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}
.fl-spine--rival::before{background:var(--rival)}
.fl-spine--win::before{background:var(--win)}
.fl-spine--loss::before{background:var(--loss)}
.fl-spine--mute::before{background:var(--line2)}

/* --------------------------------------------------------------- 5. FIGURE */
.fl-fig{
  font-family:var(--disp);font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.015em;line-height:.88;
}
.fl-fig--hero{font-size:clamp(2.9rem,13vw,5rem)}
.fl-fig--lg{font-size:clamp(1.6rem,5vw,2.2rem)}
.fl-fig--md{font-size:1.35rem}
.fl-fig sub{font-family:var(--mono);font-size:.3em;font-weight:400;letter-spacing:.1em;
  color:var(--dim);vertical-align:baseline;margin-left:5px}
.fl-fig.up{color:var(--win)} .fl-fig.down{color:var(--loss)} .fl-fig.acc{color:var(--accent)}
/* every data label in the product looks like this */
.fl-key{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim2)}
.fl-num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------- 6. TAPE */
.fl-tape{
  position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--base2);height:30px;display:flex;align-items:center;
}
.fl-tape__run{display:inline-flex;gap:var(--s6);white-space:nowrap;padding-left:100%;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim);
  animation:fl-tape-run 42s linear infinite}
.fl-tape__run b{color:var(--bone);font-weight:500}
.fl-tape__run .up{color:var(--win)} .fl-tape__run .down{color:var(--loss)}
.fl-tape__run i{font-style:normal;color:var(--accent)}
@keyframes fl-tape-run{to{transform:translateX(-100%)}}

/* -------------------------------------------------------------- controls  */
.fl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  min-height:44px;padding:0 var(--s4);border:1px solid var(--line2);background:transparent;color:var(--bone);
  font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition:border-color .15s,background .15s,color .15s;
}
.fl-btn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.fl-btn--solid{background:var(--accent);border-color:var(--accent);color:var(--base)}
.fl-btn--solid:hover{background:var(--gold);border-color:var(--gold);color:var(--base)}
.fl-btn--rival:hover{border-color:var(--rival);color:var(--rival);background:color-mix(in srgb,var(--rival) 12%,transparent)}
.fl-btn:disabled{opacity:.45;cursor:default}

/* the on-air marker — the only always-moving thing, and it means "we are live" */
.fl-onair{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--loss);
  border:1px solid color-mix(in srgb,var(--loss) 42%,transparent);padding:5px 10px}
.fl-onair b{width:6px;height:6px;border-radius:50%;background:var(--loss);animation:fl-breathe 1.6s ease-in-out infinite}
@keyframes fl-breathe{0%,100%{opacity:1}50%{opacity:.25}}

/* ------------------------------------------------------------- the lockup */
.fl-mark{display:flex;align-items:flex-end;justify-content:center;gap:2.5px;padding:7px;
  background:linear-gradient(160deg,var(--accent),var(--accent2));flex:0 0 auto;
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%)}
.fl-mark i{width:3.5px;background:var(--base);display:block}
.fl-mark i:nth-child(1){height:32%}.fl-mark i:nth-child(2){height:56%}
.fl-mark i:nth-child(3){height:78%}.fl-mark i:nth-child(4){height:100%}
.fl-word b{font-family:var(--disp);font-weight:800;letter-spacing:.13em;display:block;line-height:.95}
.fl-word span{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim2);margin-top:2px}

@media(prefers-reduced-motion:reduce){
  .fl-tape__run,.fl-onair b{animation:none}
}

/* ============================================================================
   PAPER — the READING surface.  html[data-surface="paper"]
   ----------------------------------------------------------------------------
   THE FLOOR runs two polarities on ONE system. The six devices, the type roles
   and the spacing never change; only the surface flips:

     PAPER (cream)  home · about · how · studio · discover
       Reading surfaces. Dark ink on warm cream is the most legible pairing
       there is, and cream is ownable — every rival platform is dark. The
       financial-print lineage (FT salmon) is the right ancestry for a brand
       whose whole claim is "these numbers are real".

     INK (near-black)  the board · the player TV · the Arena
       BROADCAST surfaces. They get composited into OBS, sit behind a cam PiP
       and are watched for long stretches, where a light panel glares.

   ⚠️ The accent and the semantics MUST deepen on cream — the broadcast amber
   #E9A227 scores ~1.9:1 on #F2EBDC and the bright green vanishes entirely.
   ========================================================================= */
html[data-surface="paper"]{
  --base:#F2EBDC; --base2:#EBE2CF; --panel:#FBF7EE; --panel2:#F5EFE1;
  --line:#DDD2BB; --line2:#C6B99C;
  --bone:#191510;                /* ink */
  --dim:#2B2A28;                 /* subtext — rich dark grey, 13.4:1 */
  --dim2:#45433F;                /* tertiary grey, 9.1:1 */
  /* every one of these is measured on #F2EBDC, not eyeballed — the broadcast
     amber #E9A227 scores 1.9:1 here, so the paper accent has to go to bronze */
  --accent:#8A5406;              /* 5.28:1 — and cream ON it is also 5.28:1 */
  --accent2:#6B4104;             /* 7.42:1 */
  --gold:#7A4E05;                /* 6.06:1 */
  --rival:#14566F; --rival2:#0F4053;   /* 6.83:1 */
  --win:#0A6340;                 /* 5.9:1 — deepened so green-on-green-tint still passes */
  --loss:#A81F2B;                /* 6.11:1 */
  --okText:#0B5D3D; --warnText:#7A4E05; --errText:#8E1A24;
}
/* the mark keeps its glow on paper by sitting on ink, not cream */
html[data-surface="paper"] .fl-mark,
html[data-surface="paper"] .logo{box-shadow:0 2px 0 0 color-mix(in srgb,var(--accent) 30%,transparent)}
/* On paper a 10% tint behind same-coloured text drops it under AA (a green
   figure on a green wash measured 4.0:1). Lighten the washes so the composite
   stays close to the cream and the ink keeps its contrast. */
html[data-surface="paper"] .pct.up,
html[data-surface="paper"] .pct.down,
html[data-surface="paper"] .chip.on,
html[data-surface="paper"] .seal,
html[data-surface="paper"] .seal{background:color-mix(in srgb,currentColor 6%,transparent)}
/* hairline structure needs a touch more weight on a light ground */
html[data-surface="paper"] .fl-panel,
html[data-surface="paper"] .card,
html[data-surface="paper"] .plate{box-shadow:0 1px 0 0 color-mix(in srgb,var(--line2) 55%,transparent)}

/* ---------------------------------------------------------------- SUPPORT
   Direct line to a human. Traders get stuck on the MT5 "Allow WebRequest"
   step more than anything else, so this sits on every page they can reach. */
.fl-help{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  padding:7px 13px;min-height:38px;white-space:nowrap;transition:background .15s,border-color .15s;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%)}
.fl-help:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:var(--accent)}
.fl-help::before{content:'';width:7px;height:7px;background:currentColor;transform:rotate(45deg);flex:0 0 auto}
.fl-helpline{margin-top:var(--s3);font-family:var(--mono);font-size:11px;color:var(--dim2);letter-spacing:.06em}

/* ---------------------------------------------------------------- WATERMARK
   Attribution burned into the BROADCAST surfaces — the board, the arena, the
   player's TV. These are the pixels that end up in OBS captures, screenshots
   and clips, and they travel without the URL attached. Low-opacity so it never
   competes with a figure, but always legible enough to source a screenshot.  */
.fl-wm{position:absolute;right:14px;bottom:12px;z-index:6;pointer-events:none;
  display:flex;align-items:center;gap:7px;opacity:.5;user-select:none}
.fl-wm__m{display:flex;align-items:flex-end;gap:1.5px;height:13px}
.fl-wm__m i{width:2.5px;background:var(--accent);display:block}
.fl-wm__m i:nth-child(1){height:34%}.fl-wm__m i:nth-child(2){height:58%}
.fl-wm__m i:nth-child(3){height:80%}.fl-wm__m i:nth-child(4){height:100%}
.fl-wm__t{font-family:var(--disp);font-size:12px;font-weight:800;letter-spacing:.2em;
  color:var(--bone);line-height:1;white-space:nowrap}
.fl-wm__h{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--accent);
  line-height:1;white-space:nowrap}
.fl-wm__sep{width:1px;height:11px;background:var(--line2)}
@media(max-width:560px){.fl-wm{right:10px;bottom:9px;opacity:.42}
  .fl-wm__t{font-size:10px}.fl-wm__h{font-size:9px}.fl-wm__m{height:11px}}

/* --- ON THE CAM PiP ---
   A face-cam clip travels further than anything else this platform produces,
   and it is the one surface that HIDES the board's mark: an enlarged PiP sits
   exactly over the bottom-right corner where the board watermark lives. So the
   cam carries its own. Scrim behind it because a camera frame is unpredictable
   — a mark that vanishes against a bright wall is not a mark.                */
.fl-wm--cam{right:7px;bottom:6px;gap:5px;opacity:.72;
  padding:3px 7px;background:rgba(6,5,4,.42);backdrop-filter:blur(3px)}
.fl-wm--cam .fl-wm__m{height:9px}
.fl-wm--cam .fl-wm__m i{width:1.8px}
.fl-wm--cam .fl-wm__t{font-size:8.5px;letter-spacing:.16em;
  text-shadow:0 1px 3px rgba(0,0,0,.75)}

/* --- ON THE PLAYER CHROME ---
   The TV already carries the board's mark, but a full-page screenshot of a
   trader's channel is a different artefact from a crop of the board, and it is
   the one people actually paste into a group chat. This mark sits in the page
   FLOW at the foot of the channel, so it can never overlap a figure and always
   lands in a full-page capture. Inline, not absolute — the absolute variant is
   for the broadcast rectangles only. */
.fl-wm--chrome{position:static;opacity:.62;margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid var(--line);width:100%;justify-content:flex-start}
.fl-wm--chrome .fl-wm__t{font-size:11px}
.fl-wm--chrome .fl-wm__h{font-size:9.5px}