/* ============================================================================
   EMCORE — the brand layer. LOCAL to this product and never synced.

   The shared design system (core.css and every app sheet) is the same file in
   every copy of the product. Whose product it is lives here instead: loaded last
   in app.html and login.html, it re-points the shared tokens and the ground.

   Asa, 16 Oct 2026: "the theme overall black, with a touch of medium grey, and
   the main background pearly — with a flicker of the rainbow pearl hues, subtle,
   in the top left corner."

   Switch back: localStorage "core.look" = "classic" (set by the head script in
   app.html) puts html.look-classic on the page and none of this applies.
   ========================================================================== */

html:not(.look-classic){
  --ink:#0B0B0C;
  --ink-2:#36363A;
  --ink-3:#5E5E62;          /* 6.4:1 on pearl — captions and muted lines */
  --ink-4:#8A8A8E;          /* the medium grey: decorative, never prose */
  /* Darkened with the shared pair on 28 Oct 2026 — this layer loads last, so
     .12 was what the product actually drew and core.css's .14 never applied. */
  --line:rgba(11,11,12,.20);
  --line-2:rgba(11,11,12,.30);
  --sunk:rgba(11,11,12,.030);
  --line-soft:rgba(11,11,12,.12);   /* grid-gap fills keep the old weight — see core.css */

  /* The shared sheets use "green" as the platform accent (links, focus, fills).
     Here the accent is black ink and medium grey; Embassy orange is kept for
     CORE in the lockup and nowhere else, so it never reads as a status. */
  --green:#0B0B0C;
  --green-ink:#0B0B0C;
  --green-deep:#36363A;

  --pearl:#FBF9F6;
  --em-orange:#F58220;

  /* the group's sweep: ink into grey. Inside a company hueFor() writes the
     company's own colours over this, as it always has. */
  --sweep:linear-gradient(115deg,#0B0B0C,#5E5E62 55%,#8A8A8E 100%);
  --sweep-conic:conic-gradient(from 210deg,#0B0B0C,#5E5E62 33%,#8A8A8E 66%,#0B0B0C);

  --c1:#0B0B0C; --c2:#8A8A8E; --c3:#F58220; --c4:#C02424;
  --c5:#36363A; --c6:#C9C9CC; --c7:#E8B04B; --c8:#5E5E62;
}

/* ---- the ground: pearl, with nacre caught in the top-left corner ---------- */
/* Nacre is interference, not a pigment: four low washes in different hues,
   bunched into the top-left so they read as light catching a pearl rather than
   as a coloured page. Painted on the body itself, in the first frame. */
html:not(.look-classic) body{background:var(--pearl)}
html:not(.look-classic) body::before{
  width:auto; height:auto; left:0; top:0; right:0; bottom:0; inset:0;
  border-radius:0; filter:none; opacity:1;
  background:
    /* the orient: a broad, soft sheen with nacre at its edges, gliding slowly
       across the page the way light moves over a pearl as it turns (Asa, 16 Oct
       2026: "a little shimmering, like pearl"). Twice the page wide so it can
       travel; only its position animates. */
    linear-gradient(115deg,
      rgba(255,255,255,0) 30%,
      rgba(255,214,232,.22) 40%,
      rgba(255,255,255,.62) 46%,
      rgba(212,230,255,.26) 51%,
      rgba(214,246,230,.20) 56%,
      rgba(255,255,255,0) 66%) 0 0 / 260% 260% no-repeat,
    radial-gradient(34% 28% at 3% 2%,   rgba(255,206,228,.55) 0%, rgba(255,206,228,0) 70%),
    radial-gradient(30% 26% at 15% 0%,  rgba(198,222,255,.55) 0%, rgba(198,222,255,0) 70%),
    radial-gradient(28% 26% at 0% 15%,  rgba(206,244,224,.50) 0%, rgba(206,244,224,0) 70%),
    radial-gradient(24% 22% at 20% 11%, rgba(255,238,198,.45) 0%, rgba(255,238,198,0) 70%),
    radial-gradient(120% 90% at 88% 12%, rgba(232,236,242,.55) 0%, rgba(232,236,242,0) 58%),
    linear-gradient(160deg,#FDFBF8 0%,#FAF8F6 38%,#F8F7F8 62%,#FBF9F5 100%);
  animation:em-nacre 22s ease-in-out infinite alternate, em-orient 16s ease-in-out infinite alternate;
}
/* the fine grain, so the pearl has a surface */
html:not(.look-classic) body::after{
  width:auto; height:auto; left:0; top:0; right:0; bottom:0; inset:0;
  border-radius:0; filter:none; opacity:.40; mix-blend-mode:soft-light;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
/* the flicker: the washes drift a little and their hues turn a few degrees */
@keyframes em-nacre{
  0%  {filter:hue-rotate(0deg)   saturate(1)}
  50% {filter:hue-rotate(14deg)  saturate(1.08)}
  100%{filter:hue-rotate(-10deg) saturate(.96)}
}
/* the sheen crosses from the lower right to the upper left and back; the other
   layers fill the page whatever their position */
@keyframes em-orient{
  0%  {background-position:100% 100%,0 0,0 0,0 0,0 0,0 0,0 0}
  100%{background-position:0% 0%,    0 0,0 0,0 0,0 0,0 0,0 0}
}
@media (prefers-reduced-motion:reduce){ html:not(.look-classic) body::before{animation:none} }

html:not(.look-classic) ::selection{background:rgba(138,138,142,.28)}
html:not(.look-classic) :focus-visible{outline-color:#0B0B0C}

/* ---- the lockup: EM | CORE --------------------------------------------- */
/* CORE is set type (Raleway 500, Embassy orange — Asa's pick 16 Oct 2026, the closest of 41 measured) beside real artwork — the
   emblem and EM are the Embassy Developments vector, cropped, never redrawn. */
html:not(.look-classic) .bar__name{
  font-family:"Raleway","Inter",system-ui,sans-serif; font-weight:500;
  letter-spacing:.02em; color:var(--em-orange); font-size:17px;
}
/* The install drawer names the app, so it names it in the SAME face the bar
   does — Asa, 20 Oct 2026: "the app name like EMCORE — cant we use the font used
   in the home icon." installdrawer.css is shared and says var(--disp), which is
   Archivo Expanded; EMCORE's lockup is Raleway, and that difference is brand, so
   it is re-pointed here, in this product's own LOCAL sheet, exactly as .bar__name
   is above. Not coloured orange: the orange is the lockup's, and the line under
   the drawer's heading already carries the accent. */
html:not(.look-classic) .idr-title{
  font-family:"Raleway","Inter",system-ui,sans-serif; font-weight:500;
  letter-spacing:.02em; font-size:18px;
}
/* On the Campus the group's mark and CORE are ONE lockup — no rule between
   them. Inside a company it reads company logo | CORE, with the rule. */
html:not(.look-classic) .bar__mark[data-lockup="group"] #v-comark:not([hidden]) ~ .bar__name{
  border-left:0; padding-left:0;
  /* core.css sets line-height:22px on this same id selector, which outranks the
     lockup rule below — so the baseline line-height has to be set HERE, or CORE
     sits 1px above EM (measured, Asa 16 Oct 2026: "not properly aligned").
     Raleway: ascent .94, descent .23 → (.94 − .23) = .71 lays the baseline on
     the box bottom, which flex-end puts on EM's baseline. */
  line-height:.71;
}

/* the group's own colours (Embassy Group: orange into its grey), for the Campus
   headline word and the group's cards — the parent never wears a company's */
html:not(.look-classic){ --group-sweep:linear-gradient(115deg,#F58220,#F58220 45%,#7F7F7F 100%); }

/* EM CORE as ONE word (Asa, 16 Oct 2026: "imbalanced", then "you can see the
   mismatch"). Every number is measured off the EM artwork, so CORE matches it
   rather than sits near it. --mk is the height of the mark image.
     · the EM, as a share of its cap height: upright .164, arms .114, E width .681.
       Raleway 500 measures .127 / .113 / .680 — the closest of 41 fonts and
       weights measured the same way (Sora 300 was the furthest: .103/.092/.579).
     · EM's caps fill 172.46/190 = .908 of the image; Raleway's caps are .71em
         → font-size 1.278 × --mk puts CORE's caps at EM's height
     · E→M gap is .275 of the cap; Raleway's own gaps are smaller
         → letter-spacing .094em spaces C·O·R·E like E·M
     · EM→C: the same .275 cap gap, less C's .04em left bearing → gap .1985 × --mk
     · line-height .71 (ascent .94 − descent .23) puts Raleway's baseline on the box bottom, which flex-end
       lays on EM's baseline (measured in the browser, not taken from a table)
   The same rules drive the sign-in lockup. */
html:not(.look-classic) .bar__mark[data-lockup="group"]{--mk:22px; align-items:flex-end; gap:calc(var(--mk) * .1985)}
html:not(.look-classic) .bar__mark[data-lockup="group"] .bar__name{
  font-size:calc(var(--mk) * 1.278); line-height:.71; letter-spacing:.094em; margin-right:-.094em;
}