/* =====================================================================
   EduMarkets — lockup system
   Drop-in CSS for the masterbrand and module-led lockups.
   Pairs with Inter Tight (loaded separately — see README).

   Two components:
     .ms-mark       — masterbrand lockup (wordmark only, no module label)
     .lockup-led    — module-led lockup (used on dashboard, switcher,
                      in-module top bar)

   Both are size-driven: change `--ms-wm-size` / `--led-name-size` and
   everything else scales. Bar colour is set via `--bar-color` on the
   element (use the per-module palette variables below).
   ===================================================================== */


/* ---------------------------------------------------------------------
   Per-module palette — single colour per module, works on white and #0B0B0C
   --------------------------------------------------------------------- */
:root{
  --mod-intro-to-markets:      #C44C00;
  --mod-macro:                 #0074D4;
  --mod-money-markets:         #668800;
  --mod-foreign-exchange:      #008796;
  --mod-fixed-income:          #9D6400;
  --mod-credit:                #C6054F;
  --mod-equities:              #298646;
  --mod-futures:               #3665E4;
  --mod-commodities:           #566270;  /* steel slate — the only neutral bar; distinct from the warm band */
  --mod-trs-cfds:              #B55D00;
  --mod-cross-currency-swaps:  #008672;
  --mod-eq-fx-options:         #C42671;
  --mod-ir-options:            #8E7500;
  --mod-structured-products:   #1F4E9C;  /* deep navy; distinct from macro azure #0074D4 and futures blue #3665E4. Composes the two option pricers, sits just after ir-options. Signed off by Robert 2026-07-10. */
  --mod-securitised-products:  #0081B2;
  --mod-risk:                  #7156D8;
  --mod-digital-assets:        #33A02A;  /* leaf green; fills the one open gap between money-markets olive and equities sea-green, clear of the crowded blue-violet band. Recoloured from #4338CA (too close to risk violet). Signed off by Robert 2026-07-05. */
  --mod-counterparty-risk:     #CB2A2A;  /* pure red; isolated in the red zone once vol-trading vacated the magenta corner. Recoloured from #C0392B (too close to intro orange / credit crimson). Signed off by Robert 2026-07-05. */
  --mod-regulation-capital:    #2F8F6B;  /* emerald; sits in the open lane between equities sea-green #298646 and the cross-currency/FX teals. Mid-lightness so it is legible on BOTH grounds (contrast 4.74 vs dark #0D1117, 3.99 vs white); the earlier deep pine #14532D read as near-black on the dark ground (2.08). Signed off by Robert 2026-07-14. */
  --mod-market-making:         #A136A1;  /* orchid; carried over from --mod-volatility-trading when Market Making replaced that module (same palette slot per MM-DESIGN.md, pending visual sign-off on first render). Original recolour signed off by Robert 2026-07-05. */
  --mod-trade-lifecycle:       #B53199;
  --mod-hedge-funds:           #9531C5;
  --mod-hedge-fund-simulation: #9261D1;  /* amethyst; the lockup bar for the Hedge Fund Simulation in edumarkets-trading-sims, which carried the moss green below until it was renamed on 2026-08-26. Takes the widest open lane in this palette, centred between risk violet #7156D8 and hedge-funds purple #9531C5 at about 14 degrees from each. It is deliberately brighter than every other purple here (relative luminance 0.193 against 0.126 to 0.151), and that lightness is what keeps it apart from the platform's Hedge Funds module now that the two names match. It also stands 34 degrees off market-making orchid #A136A1, the sibling sim it renders beside in the trainer and admin shells. Mid-lightness so it is legible on BOTH grounds (contrast 4.33 vs white, 4.37 vs dark #0D1117). Signed off by Robert 2026-08-26 on first render. */
  --mod-portfolio-simulation:  #4C8B15;  /* moss green; RESERVED and unused in this service. It was this sim's bar under the Portfolio Simulation name, and the owner kept it with that name for the live-data sim in edumarkets-portfolio-sim (decision 2026-08-26). Left here so nobody reassigns the colour. Takes the one open lane between money-markets olive #668800 and digital-assets leaf green #33A02A. Mid-lightness so it is legible on BOTH grounds (contrast 4.34 vs dark #0D1117, 4.20 vs white). Signed off by Robert 2026-08-04 on first render. */

  --brand-core-red:            #CB0606;
}


/* ---------------------------------------------------------------------
   MASTERBRAND LOCKUP — .ms-mark
     .ms-mark.tall    landing / marketing  (signature, taller-than-text bar)
     .ms-mark.equal   in-app topbar        (bar matches cap-height)
   Sizes: .xl / .lg / .md / .sm
   --------------------------------------------------------------------- */
.ms-mark{
  display: inline-flex;
  align-items: flex-start;
  gap: calc(var(--ms-wm-size, 22px) * 0.10);
  font-family: 'Inter Tight', 'Helvetica Neue', 'Arial', sans-serif;
  line-height: 1;
  color: var(--ms-ink, #111);
}
.ms-mark .bar{
  flex: none;
  width: max(2px, calc(var(--ms-wm-size, 22px) * 0.111));
  background: var(--bar-color, #CB0606);
}
.ms-mark .wm{
  font-weight: 400;
  font-size: var(--ms-wm-size, 22px);
  letter-spacing: -0.018em;
  white-space: nowrap;
  color: inherit;
  line-height: 1;
}
.ms-mark .wm b{ font-weight: 700;}

/* sizes */
.ms-mark.xl{ --ms-wm-size: 44px;}
.ms-mark.lg{ --ms-wm-size: 32px;}
.ms-mark.md{ --ms-wm-size: 22px;}
.ms-mark.sm{ --ms-wm-size: 16px;}

/* TALL — signature bar, extends below text more than above */
.ms-mark.tall .bar{
  height: calc(var(--ms-wm-size, 22px) * 1.445);
  margin-top: calc(var(--ms-wm-size, 22px) * -0.04);
}

/* EQUAL — bar matches wordmark cap height exactly */
.ms-mark.equal{ align-items: stretch;}
.ms-mark.equal .wm{ text-box: trim-both cap alphabetic;}
.ms-mark.equal .bar{
  height: auto;
  align-self: stretch;
  margin: 0;
}


/* ---------------------------------------------------------------------
   MODULE-LED LOCKUP — .lockup-led
   Module name dominant; EduMarkets sits above as a supra-label.
   Bar height exactly matches the rendered text (uses text-box-trim).
   Module name clamps to 2 lines max.

   Sizes: .xl / .lg / .md (dashboard tiles) / .sm (switcher cells / in-module header) / .xs
   --------------------------------------------------------------------- */
.lockup-led{
  display: inline-flex;
  align-items: stretch;
  gap: calc(var(--led-wm-size, 12px) * 0.3);
  font-family: 'Inter Tight', 'Helvetica Neue', 'Arial', sans-serif;
  line-height: 1;
  color: var(--led-ink, #111);
}
.lockup-led .bar{
  flex: none;
  align-self: stretch;
  width: max(2px, calc(var(--led-wm-size, 12px) * 0.25));
  background: var(--bar-color, #CB0606);
}
.lockup-led .group{
  display: flex; flex-direction: column;
  gap: var(--led-gap-v, 2px);
  min-width: 0;
}
.lockup-led .wm{
  font-weight: 400;
  font-size: var(--led-wm-size, 12px);
  letter-spacing: -0.018em;
  line-height: 1;
  white-space: nowrap;
  color: inherit;
  text-box: trim-both cap alphabetic;
}
.lockup-led .wm b{ font-weight: 700;}
.lockup-led .name{
  font-weight: 400;
  font-size: var(--led-name-size, 21px);
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1.1;
  color: inherit;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-box: trim-both cap alphabetic;
}

/* sizes */
.lockup-led.xl{ --led-name-size: 34px; --led-wm-size: 15px; --led-gap-v: 2px;}
.lockup-led.lg{ --led-name-size: 26px; --led-wm-size: 14px; --led-gap-v: 2px;}
.lockup-led.md{ --led-name-size: 21px; --led-wm-size: 12px; --led-gap-v: 2px;}
.lockup-led.sm{ --led-name-size: 16px; --led-wm-size: 10px; --led-gap-v: 1px;}
.lockup-led.xs{ --led-name-size: 13px; --led-wm-size: 9px;  --led-gap-v: 1px;}


/* ---------------------------------------------------------------------
   Dark-mode ink override
     Apply [data-theme="dark"] (or the equivalent class your platform uses)
     to a root element. The lockup wordmark/module-name flips white; bar
     colour stays the same in both modes.
   --------------------------------------------------------------------- */
[data-theme="dark"] .ms-mark,
[data-theme="dark"] .lockup-led{
  --ms-ink: #F0EFE9;
  --led-ink: #F0EFE9;
}