/* ==========================================================================
   Belong — shared brand tokens
   Extracted from brand-guideline.html (Brand Hub). Single source of truth for
   index.html, join/index.html, and the careers dashboard.

   Deliberately NOT included here: the Brand Hub's own `--s: 12px` base size and
   `body { font-weight: 700 }`. Those are the dense chrome of a documentation
   tool. The public pages carry long-form prose and keep their fluid clamp()
   scale; the dashboard opts into the .ui-* layer below instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Type — PP Object Sans, 400 / 700 / 900.
   There is no 500. ABC Diatype Semi Mono is retired; Object Sans carries the
   whole system, so --label is an alias rather than a second family.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "PP Object Sans";
  src: url("/fonts/belong-object-sans-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Object Sans";
  src: url("/fonts/belong-object-sans-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Object Sans";
  src: url("/fonts/belong-object-sans-heavy.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --font: "PP Object Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* the utility face: labels, hints, data readouts. Never headlines, never
     body copy, so the sweep stays a discipline instead of a decoration */
  --label: "PP Object Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Tell the UA which way this surface runs, so form controls, scrollbars and
     autofill match the ground. Without it a light page on a dark-mode OS gets
     dark native inputs sitting on white panels. It has to be paired for dark
     below, exactly like the tokens. */
  color-scheme: light;

  /* ---- ground and ink (light) ---- */
  --fg: #000;
  /* The ground sits high on purpose: a light grey makes both a white plate and a
     black one pop off it, where a darker ground only flattered the black. */
  --bg: #EBEBEB;
  --paper: #fff;
  --panel: #E2E2E2;
  --hair: rgba(0, 0, 0, .07);
  /* Surfaces are SOLID, not frosted — an opaque plate on the ground, the way the
     brand ships. These two are steps AWAY from the card ground: --tint is one
     step, --tint-2 is two. They read as grey chips and tiles on a white card, and
     as lifted greys on a black one, so the direction is consistent in both themes
     even though the ground flips. Nothing samples what is behind it.

     The whole light ladder descends in ~9-point steps — 255 paper, 235 ground,
     226 panel, 220 tint, 210 tint-2 — because chips built from --tint sit BOTH on
     white cards and directly on the ground. At the old values --tint was lighter
     than the new ground and those chips disappeared into it. */
  --tint: #DCDCDC;
  --tint-2: #D2D2D2;
  /* Letterboxing behind video and audio. Fixed black in BOTH themes — this is
     the absence of picture, not a ground, so it must not follow --paper (which
     flips to white and would frame the media in a white bar). */
  --letterbox: #000;

  /* Secondary and tertiary ink — the roles the old flat palette called Slate and
     Gray. Derived from --fg rather than fixed, so one declaration inverts for
     dark instead of needing a paired override. Every page carrying prose needs
     these; keeping them here is what stops the two public pages drifting again. */
  --fg-2: color-mix(in srgb, var(--fg) 72%, transparent);
  --fg-3: color-mix(in srgb, var(--fg) 48%, transparent);

  /* No highlighter token. Emphasis is weight (700), not a drawn band behind the
     phrase — the band read as an underline, which is not a brand asset. */

  /* ---- accent: the Flash Gradient's two stops ---- */
  /* Ink for text and icons sitting ON an accent fill. Stays white in both themes
     — both Ink stops clear 4.5:1 against white, and --paper cannot do this job
     because it flips to black. Anything filled with --acc-a, --ui or --error
     labels itself with this. */
  --on-acc: #fff;
  /* House "Ink" — the no-artist default pair (guideline line 2981: the house pair
     is Ink; the violet-to-orange ramp was a placeholder). These are a sampled
     gradient pair, not a ground, so they are FIXED in both themes and never
     invert. They are light, not a swatch: use them for the wash, not for fills. */
  --acc-a: #0A0A14;   /* Ink — gradient dark stop */
  --acc-b: #33335A;   /* Ink — gradient light stop */

  /* Active — the interactive fill. Ink in light, and it inverts in dark because
     #0A0A14 is invisible on a black ground ("everything inverts"). --on-ui rides
     --paper, so it lands white on Ink and black on the inverted fill. */
  --ui: var(--acc-a);
  --on-ui: var(--paper);

  /* ---- functional colour ----
     Narrower meanings than generic success/warn/error. Honour them.
     success  confirms something that already happened
     caution  a window is closing, not a mistake — nothing has gone wrong yet
     error    something failed, or a field needs a fix                       */
  --success: #1F8B4C;
  --caution: #B7791B;
  --error:   #C4342B;

  /* Disabled is a tint of the ground's own ink, never a colour — an unavailable
     control has not failed, so it must not borrow --error's red. Paired for dark
     below, so it inverts instead of dissolving into a dark card. */
  --disabled-bg: rgba(0, 0, 0, .13);
  --disabled-fg: rgba(0, 0, 0, .40);

  /* ---- geometry ---- */
  --r-card: 30px;
  --r-panel: 26px;
  --r-tile: 22px;
  --r-inner: 18px;
  --r-pill: 999px;

  /* ---- depth ---- */
  --sh-panel: 0 14px 36px rgba(0, 0, 0, .10);
  --sh-lift:  0 22px 50px rgba(0, 0, 0, .15);
  --sh-float: 0 18px 44px rgba(0, 0, 0, .20);
  /* No --blur token: surfaces are solid, so nothing reads what is behind it.
     Depth is the shadow and the tonal step, not a sampled backdrop. */

  --pad: max(72px, 5vw);
}

/* Dark. Paired overrides only — everything else inherits.
   Reached two ways: explicitly, by a surface that adds .inv (the dashboard's
   theme toggle), or automatically from the OS via the media query below — which
   the three public pages opt out of with .no-auto-theme. */
html.inv {
  color-scheme: dark;
  --fg: #fff;
  --bg: #171717;
  --paper: #000;
  --panel: #1B1B1B;
  --hair: rgba(255, 255, 255, .13);
  /* Solid, as in light — the flat values the translucent whites resolved to. */
  --tint: #2A2A2A;
  --tint-2: #3E3E3E;
  /* --acc-a/--acc-b do NOT invert — a sampled gradient pair is not a ground.
     --ui does: #0A0A14 is invisible on black, so Active takes the ink instead and
     --on-ui follows --paper to #000. */
  --ui: var(--fg);
  --disabled-bg: rgba(255, 255, 255, .13);
  --disabled-fg: rgba(255, 255, 255, .42);
}

/* Follow the OS — but only for surfaces that have not opted out. The dashboard
   is the one that does follow it (and can override with its own toggle, which
   sets .no-auto-theme). The manifesto, the assessment and the privacy notice all
   carry .no-auto-theme in their markup: the brand ground is #EBEBEB with black
   and white plates on it, and an OS setting is not a reason to repaint it. */
@media (prefers-color-scheme: dark) {
  html:not(.no-auto-theme):not(.inv) {
    color-scheme: dark;
    --fg: #fff;
    --bg: #171717;
    --paper: #000;
    --panel: #1B1B1B;
    --hair: rgba(255, 255, 255, .13);
    --tint: #2A2A2A;
    --tint-2: #3E3E3E;
    --ui: var(--fg);
    --disabled-bg: rgba(255, 255, 255, .13);
    --disabled-fg: rgba(255, 255, 255, .42);
  }
}

/* --------------------------------------------------------------------------
   Atmospheric wash — the ground the solid surfaces sit on. It shows in the
   gaps between cards, not through them.
   Opt in per page with <body class="wash">, so it never forces itself onto a
   surface that hasn't been designed for it.

   Achromatic. Built from white and black only, because that is literally what
   the rule asks for: the gradient "is light, not a swatch", and light on a
   monochrome ground is white. Tinting these radials with the Ink pair put a
   blue-violet field across every page — the exact failure the ramp it replaced
   was retired for. The pair stays defined for gradient plates; the wash does not
   carry hue.

   In light it only ever SHADES. --bg is #EBEBEB because that specific grey is
   what makes a white plate and a black one both pop, so #EBEBEB has to be the
   brightest the ground gets — white glows on top of it lifted the top-left
   toward #F6F6F6 and quietly undid the choice. The light comes from the white
   cards now; the wash just lets the far corners fall away behind them. On black
   there is nothing below the ground, so there the wash lifts instead.
   -------------------------------------------------------------------------- */
.wash { position: relative; }
.wash::before {
  content: ''; position: fixed; inset: -20vh -20vw; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 60vw at 62% 92%,  rgba(0, 0, 0, .055), transparent 66%),
    radial-gradient(52vw 52vw at 92% 14%,  rgba(0, 0, 0, .035), transparent 64%),
    radial-gradient(46vw 46vw at 10% 100%, rgba(0, 0, 0, .030), transparent 62%);
  filter: blur(30px);
}
/* On black the same light reads far stronger, so the glows drop by roughly a
   factor of five and the vignette deepens to keep the corners falling away. */
html.inv .wash::before {
  background:
    radial-gradient(46vw 46vw at 14% 8%,  rgba(255, 255, 255, .10), transparent 62%),
    radial-gradient(52vw 52vw at 88% 22%, rgba(255, 255, 255, .07), transparent 64%),
    radial-gradient(60vw 60vw at 62% 92%, rgba(0, 0, 0, .30), transparent 66%),
    radial-gradient(40vw 40vw at 32% 62%, rgba(255, 255, 255, .05), transparent 60%);
  filter: blur(30px);
}
/* Mirrored for the auto theme, like the token block above, so the pair stays
   complete. Nothing reaches it today — the only surfaces that carry .wash are the
   three public pages, and they opt out of auto-theming — but a dark surface that
   adopts the wash later should not have to rediscover these values. */
@media (prefers-color-scheme: dark) {
  html:not(.no-auto-theme):not(.inv) .wash::before {
    background:
      radial-gradient(46vw 46vw at 14% 8%,  rgba(255, 255, 255, .10), transparent 62%),
      radial-gradient(52vw 52vw at 88% 22%, rgba(255, 255, 255, .07), transparent 64%),
      radial-gradient(60vw 60vw at 62% 92%, rgba(0, 0, 0, .30), transparent 66%),
      radial-gradient(40vw 40vw at 32% 62%, rgba(255, 255, 255, .05), transparent 60%);
    filter: blur(30px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wash::before { filter: blur(30px); }  /* static either way — no animation to suppress */
}

/* --------------------------------------------------------------------------
   Interface layer — the Brand Hub's Interface chapter components, verbatim.
   Used by the dashboard. The public pages keep their own fluid type scale and
   should not adopt these fixed sizes.
   -------------------------------------------------------------------------- */

/* tracked label / eyebrow */
.ui-k {
  font-family: var(--label); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: .5;
}
/* title / subtext pair */
.ui-t { font-size: 15px; font-weight: 700; letter-spacing: -0.018em; line-height: 1.25; }
.ui-s { font-size: 12.5px; line-height: 1.4; opacity: .55; margin-top: 4px; }

.ui-row { display: flex; align-items: center; gap: 11px; }

.ui-btn {
  display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-pill);
  padding: 11px 19px; font-size: 14px; font-weight: 700; letter-spacing: -0.012em;
  color: var(--on-ui); line-height: 1;
  background: var(--ui);
  border: none; cursor: pointer; font-family: var(--font);
}
.ui-btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px currentColor; }
/* disabled is a tint of the ground's own ink, so it inverts with the theme
   instead of dissolving into a dark card */
.ui-btn.ui-off,
.ui-btn:disabled { background: var(--disabled-bg); color: var(--disabled-fg); cursor: default; box-shadow: none; }

.ui-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* the status strip: a colour doing its one job, left-aligned like everything */
.ui-strip {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px;
  border-radius: 12px; font-size: 13px; line-height: 1.38;
}
.ui-strip b { display: block; font-size: 13.5px; letter-spacing: -0.012em; }
.ui-strip i { font-style: normal; opacity: .72; }

/* progress — uploads and recording both use this, not a new invention */
.ui-bar { height: 6px; border-radius: 99px; background: rgba(0, 0, 0, .10); overflow: hidden; }
html.inv .ui-bar { background: rgba(255, 255, 255, .14); }
/* --ui, not --acc-a: the fill has to stay visible when the ground inverts */
.ui-bar span { display: block; height: 100%; border-radius: 99px; background: var(--ui); }

.ui-field {
  margin-top: 9px; border-radius: 11px; padding: 11px 13px; font-size: 13.5px;
  /* The inset ring IS the border, which is what keeps a focused field from
     shifting its own text by a pixel. So the UA border has to go with it —
     without this every native control drew a second, squarer outline outside
     the ring, and each control type drew it at a different thickness. */
  appearance: none; -webkit-appearance: none; border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .12);
  background: transparent; color: var(--fg); font-family: var(--font); width: 100%;
}
html.inv .ui-field { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
.ui-field:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ui); }

/* small readouts: word counts, sizes, durations. Data, not prose. */
.ui-hex {
  font-family: var(--label); font-size: 10.5px; opacity: .45;
  margin-top: 11px; letter-spacing: 0.03em;
}