/* Phoenix 2 Retail design system (Master Deck v3). Include before the app's own CSS.
   Arial Black / Arial, navy #0B1033, signal yellow #FFD000 (one highlight per view), blue #3B8BE0,
   the 150° brand gradient, eyebrow pills, the three-part accent rule and the Phoenix marks.
   Light and dark themes via data-theme on <html>; with no data-theme the system setting decides. */

:root {
  --p2r-navy: #0B1033;
  --p2r-yellow: #FFD000;
  --p2r-blue: #3B8BE0;
  --p2r-sky: #9AD3F7;
  --p2r-green: #10B981;
  --p2r-red: #F0506E;
  --p2r-amber: #F59E0B;
  --p2r-purple: #A78BFA;
  --p2r-gradient: linear-gradient(150deg, #2452C7 0%, #1C3895 30%, #152066 60%, #0B1034 100%);

  --bg: #F4F6FB;
  --surface: #FFFFFF;
  --ink: #0B1033;
  --muted: #5A6177;
  --faint: #8B92A6;
  --line: #E3E6ED;
  --soft: #EEF0F6;
  --in: var(--p2r-green);
  --low: var(--p2r-amber);
  --out: var(--p2r-red);
  --ns: #D7DBE5;
  --in-t: #17915A; --low-t: #C96F00; --out-t: #D02F45;
  --in-bg: #E3F7EE; --low-bg: #FEF3C7; --out-bg: #FBE4E7;
  --shadow: 0 10px 30px rgba(11, 16, 51, .07);
  --radius-card: 22px;
  --radius-control: 12px;
  --font-display: "Arial Black", "Archivo Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --wordmark: url("assets/wordmark-dark.png");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080C26; --surface: #121842; --ink: #EEF0F8; --muted: #A3AAD3; --faint: #8189B3;
    --line: #252D63; --soft: #1B2257; --ns: #3A4277;
    --in-t: #34D399; --low-t: #FBBF24; --out-t: #FF7A90;
    --in-bg: rgba(16,185,129,.16); --low-bg: rgba(245,158,11,.16); --out-bg: rgba(240,80,110,.16);
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --wordmark: url("assets/wordmark-light.png");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #080C26; --surface: #121842; --ink: #EEF0F8; --muted: #A3AAD3; --faint: #8189B3;
  --line: #252D63; --soft: #1B2257; --ns: #3A4277;
  --in-t: #34D399; --low-t: #FBBF24; --out-t: #FF7A90;
  --in-bg: rgba(16,185,129,.16); --low-bg: rgba(245,158,11,.16); --out-bg: rgba(240,80,110,.16);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --wordmark: url("assets/wordmark-light.png");
  color-scheme: dark;
}

:root { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--p2r-blue); outline-offset: 2px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

/* Headlines end in a coloured square full stop: yellow on dark, blue on light. */
.hl { font-family: var(--font-display); font-weight: 900; letter-spacing: -.025em; line-height: 1.05; }
.hl::after { content: ""; display: inline-block; width: .2em; height: .2em; background: var(--p2r-blue); margin-left: .07em; }
.on-dark .hl::after, .hl.on-dark::after { background: var(--p2r-yellow); }
.num { font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em; }

/* Brand band */
.p2r-band { position: relative; overflow: hidden; color: #fff; background: var(--p2r-gradient); }
.p2r-band::before { content: ""; position: absolute; right: -40px; bottom: -80px; width: 460px; height: 440px; background: url("assets/phoenix-watermark.png") right bottom / contain no-repeat; opacity: .08; pointer-events: none; }
.p2r-band > * { position: relative; }
.p2r-wordmark { display: block; width: 190px; height: 30px; background: url("assets/wordmark-light.png") left center / contain no-repeat; }
.p2r-wordmark.themed { background-image: var(--wordmark); }
.p2r-strip { height: 6px; background: linear-gradient(90deg, #9AD3F7, #3B8BE0 45%, #18215F); }

/* Eyebrow pill: phoenix mark, coloured dot, label */
.p2r-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 999px; padding: 7px 16px 7px 11px; box-shadow: var(--shadow); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.p2r-pill .mk { width: 18px; height: 18px; background: url("assets/phoenix-mark-blue.png") center / contain no-repeat; flex: none; }
.p2r-pill .dt { width: 8px; height: 8px; border-radius: 2px; background: var(--p2r-blue); }
.dt.g { background: var(--p2r-green); } .dt.r { background: var(--p2r-red); } .dt.a { background: var(--p2r-amber); } .dt.y { background: var(--p2r-yellow); } .dt.p { background: var(--p2r-purple); }

/* Accent rule under a headline */
.p2r-rule { display: flex; gap: 6px; margin: 14px 0 22px; }
.p2r-rule i { height: 4px; border-radius: 2px; display: block; }
.p2r-rule i:nth-child(1) { width: 106px; background: linear-gradient(90deg, #FFC400, #F59E0B); }
.p2r-rule i:nth-child(2) { width: 34px; background: #3B8BE0; }
.p2r-rule i:nth-child(3) { width: 10px; background: #9AD3F7; }

/* Cards, buttons, chips */
.p2r-card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow); }
.btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius-control); padding: 9px 16px; cursor: pointer; font-weight: 700; font-size: 14px; }
.btn:hover { border-color: var(--faint); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.primary { background: var(--p2r-yellow); border-color: var(--p2r-yellow); color: #0B1033; }
.on-dark .btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.on-dark .btn:hover { background: rgba(255,255,255,.18); }
.on-dark .btn.primary { background: var(--p2r-yellow); border-color: var(--p2r-yellow); color: #0B1033; }
.link { border: 0; background: none; color: var(--p2r-blue); cursor: pointer; padding: 4px; font-size: 14px; font-weight: 700; }
.chip { display: inline-block; border-radius: 999px; padding: 4px 11px; font-weight: 700; font-size: 12.5px; }
.chip.y { background: #FFD000; color: #0B1033; }
.chip.in { background: var(--in-bg); color: var(--in-t); } .chip.low { background: var(--low-bg); color: var(--low-t); }
.chip.out { background: var(--out-bg); color: var(--out-t); } .chip.ns, .chip.nd { background: var(--soft); color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }