/* =====================================================================
   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-portfolio-simulation:  #4C8B15;  /* moss green; the lockup bar for the Portfolio Simulation in edumarkets-trading-sims. Takes the one open lane between money-markets olive #668800 and digital-assets leaf green #33A02A, and stays clear of hedge-funds purple #9531C5 so the sim does not read as that platform module. 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. */
  --mod-bank-alm-simulation:   #00B48C;  /* jade; the lockup bar for the Bank ALM Simulation in edumarkets-bank-alm-sim. Not a new colour: sampled from the bar in the retired EduMarkets_BANK_ALM PNGs, which shipped this exact value on both the light and the dark ground, so the swap to the HTML lockup leaves the rendered bar unchanged. Chosen by Robert 2026-08-10 over the open-lane candidates. It sits 4deg from cross-currency-swaps #008672 and is brighter than the palette band (contrast 7.13 vs dark #0D1117, 2.66 vs white), both inherited from the PNG rather than introduced here. */

  --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;
}