/* ==========================================================================
   SkillTeam kit v2
   One file. Every screen loads it, it loads last, and nothing outside it
   decides a colour, a size, a radius or a shadow.

   Everything is prefixed st- on purpose: this lives inside WordPress next to
   a theme and LearnDash, and .card, .btn and .nav are all taken.
   ========================================================================== */

:root{
  /* ---------- the accent. It is THE COMPANY'S OWN COLOUR, and indigo is only
     what a company that never chose one gets. inc/head.php names the same
     default as ST_KIT_ACCENT and st_kit_accent() judges every stored one.
     A door prints its company's accent into a style element AFTER this file,
     which is the one thing allowed to beat the kit. ---------------------- */
  --st-accent:var(--st-co,#4F46E5);
  --st-accent-hover:color-mix(in oklab, var(--st-co,#4F46E5) 86%, #000);
  --st-accent-light:color-mix(in oklab, var(--st-co,#4F46E5) 76%, #fff);
  --st-accent-wash:color-mix(in oklab, var(--st-co,#4F46E5) 7%, #fff);
  --st-accent-wash-2:color-mix(in oklab, var(--st-co,#4F46E5) 14%, #fff);
  --st-canvas:#F2F4FB;          /* the ground is tinted. Never white. */

  /* ---------- surfaces ---------- */
  --st-surface:#FFFFFF;         /* cards are white and sit on the canvas */
  --st-surface-2:#F8FAFC;       /* a sunk area inside a card */

  /* ---------- ink. Slate, not black. ---------- */
  --st-ink:#111827;
  --st-ink-2:#4B5563;
  --st-ink-3:#6B7280;
  --st-ink-4:#9CA3AF;
  --st-ink-5:#D1D5DB;
  --st-line:#EEF0F4;
  --st-line-2:#E3E7EE;

  /* ---------- pastel surfaces. A fill, never a 2px rule. ----------
     Each pair is a light surface and a saturated ink of the same hue.
     These are IDENTITY, not status: never use mint for good. */
  --st-lav:#EEEDFE;  --st-lav-ink:#5B54E8;
  --st-sky:#E6F1FE;  --st-sky-ink:#2A7FD4;
  --st-but:#FEF3DF;  --st-but-ink:#B57A16;
  --st-blu:#FCEBF5;  --st-blu-ink:#A93A7E;
  --st-min:#E7F6F1;  --st-min-ink:#1C8A6B;

  /* ---------- the one status colour. Only for something that failed. ------ */
  --st-danger:#C43C58;
  --st-danger-wash:#FDECEF;

  /* ---------- type. One family, three weights, tracking near zero. -------- */
  --st-font:'Plus Jakarta Sans','Manrope','Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  --st-w-body:500;              /* 400 is too light for UI at 13px */
  --st-w-title:600;
  --st-w-bold:700;              /* numbers and headings. 800 never. */

  --st-label:11px;              /* uppercase, +.01em, NOT +.2em */
  --st-meta:12.5px;
  --st-body:13.5px;
  --st-body-lg:15px;
  --st-title:15.5px;
  --st-h3:19px;
  --st-h2:24px;
  --st-h1:30px;
  --st-num:28px;
  --st-num-lg:34px;

  --st-tr-tight:-.01em;         /* anything 20px and up */
  --st-tr-flat:0;               /* body */
  --st-tr-label:.01em;          /* uppercase labels */

  /* ---------- space. 8pt grid, with 4 and 12 as the halves. -------------- */
  --st-1:4px;  --st-2:8px;  --st-3:12px; --st-4:16px; --st-5:20px;
  --st-6:24px; --st-7:32px; --st-8:40px; --st-9:48px; --st-10:64px;

  /* ---------- radius. One card value everywhere. ---------- */
  --st-r-card:20px;
  --st-r:12px;
  --st-r-sm:8px;
  --st-r-pill:999px;

  /* ---------- shadow. Two layers, low alpha, negative spread. ---------- */
  --st-sh-1:0 1px 2px rgba(17,24,39,.04), 0 6px 18px -6px rgba(17,24,39,.10);
  --st-sh-2:0 1px 2px rgba(17,24,39,.05), 0 12px 28px -10px rgba(17,24,39,.16);
  --st-sh-accent:0 8px 20px -8px var(--st-accent);

  /* ---------- motion. One curve. ---------- */
  --st-e:cubic-bezier(.16,1,.3,1);
  --st-fast:180ms; --st-mid:260ms; --st-slow:420ms;

  /* --------------------------------------------------------------- the bridge
     THE OLD NAMES, POINTED AT THE NEW VALUES, IN THIS BLOCK AND NOT A SECOND ONE.

     More than seventeen hundred places in this plugin still say --i, --a, --w
     and the rest, on every screen not yet redrawn to v2. Without these they
     resolve to nothing, which does not throw and does not warn: it draws the
     whole product in browser defaults and looks like a stylesheet failed.

     They live in this :root and not one below it because scripts/extract_design.py
     reads the FIRST :root here to learn which names the kit owns, and strips
     those names out of every design file's own token block so the kit stays the
     last word on colour. In a second block it cannot see them, every lifted file
     keeps its own hexes, and the generator stops dead. It did.

     Colour and the face only. The old sizes and spaces are left as they were,
     because a v1 screen is still the contract for its own layout until it is
     redrawn, and moving 22 to 20 underneath one would shift every measurement on
     it at once.
     ------------------------------------------------------------------------ */
  /* Ground and cards. The ground is tinted and never white. */
  --w:var(--st-surface);
  --w2:var(--st-surface-2);
  --w3:var(--st-canvas);
  --paper:var(--st-surface);
  --paper-2:var(--st-surface-2);
  --paper-3:var(--st-canvas);
  /* THE DARK HALF OF A DOOR, and it has to stay dark. Pointed at the white
     surface it took the Studio door's whole left panel white, and the logo and
     the four steps on it are white, so they vanished onto it. */
  --panel:var(--st-ink);
  --field:var(--st-surface-2);   /* an input is a sunk area, not a card */
  /* The palest step off the ground. It is not the accent washed: the accent
     means something you can press, and a tint behind a block does not. */
  --tint-1:var(--st-surface-2);

  /* Ink is slate, not near black. Near black on a tint reads as a hole. */
  --i:var(--st-ink);
  /* THE TWO LINES INSIDE A DARK PANEL. They are not on the slate ramp and
     cannot be: a line inside a near black panel has to be lighter than the
     panel, and every step of the slate ramp is lighter than the panel by so
     much that the line became a stripe. They keep their own values. */
  --i0:#1C1C20;
  --i1:#2A2A30;
  --i2:var(--st-ink-2);
  --i3:var(--st-ink-3);
  --i4:var(--st-ink-4);
  --ink:var(--st-ink);
  --ink-2:var(--st-ink-2);
  --ink-3:var(--st-ink-3);
  --ink-4:var(--st-ink-4);

  /* Rules. */
  --ln:var(--st-line);
  --ln2:var(--st-line-2);
  --rule:var(--st-line);
  --rule-2:var(--st-line-2);
  --edge:var(--st-line);         /* a hairline for reading, not a boundary */

  /* The accent means one thing: something you can press. */
  --a:var(--st-accent);
  --a2:var(--st-accent-hover);
  --aw:var(--st-accent-wash);
  --accent:var(--st-accent);

  /* The only colour on the product that carries a verdict. */
  --no:var(--st-danger);
  --now:var(--st-danger-wash);
  --red:var(--st-danger);
  --bad:var(--st-danger);
  --warn:var(--st-danger);

  /* The face, and the one curve. */
  --f:var(--st-font);
  --sans:var(--st-font);
  --e:var(--st-e);

  /* ------------------------------------------- the scales v1 screens measure by
     Every size and space the old kit declared, at the values it declared them,
     because a screen not yet redrawn to v2 is still the contract for its own
     layout. Moving 22 to 20 underneath one would shift every measurement on it
     at once, and INDEX.md is explicit: a v1 file is not wrong about what a
     control does, only about how it looks.

     They also have to be here because the generator counts them: it refuses to
     build at all if the kit declares fewer than the fifteen it expects, which is
     how it catches a kit that was read wrongly rather than one that changed.
     ------------------------------------------------------------------------ */
  --t1:10px;
  --t2:11px;
  --t3:12.5px;
  --t4:14px;
  --t5:16px;
  --t6:19px;
  --t7:26px;
  --t8:34px;
  --t9:56px;
  --r1:15px;
  --r2:19px;
  --r3:22px;
  --r4:30px;
  --r5:38px;
  --r6:62px;
  --s1:4px;
  --s2:8px;
  --s3:12px;
  --s4:16px;
  --s5:22px;
  --s6:30px;
  --s7:44px;
  --s8:64px;
  --serif:var(--f);
  --fld:var(--w3);
  --fld2:var(--ln);
  --warn-s:var(--now);
  --bad-s:var(--now);
  --red-soft:var(--now);
  --rail-bg:var(--i);
  --rail-l:var(--i0);
  --rail-t:var(--w3);
  --rail-t2:var(--i4);
  --tint-2:var(--w3);
  --tint-cool:var(--w2);
  --mark:var(--a);
  --field-cool:var(--w3);
  --field-ink:var(--i);
  --panel-t:var(--w);
  --b:var(--a);
}

/* ==========================================================================
   base
   ========================================================================== */
.st{font-family:var(--st-font);font-size:var(--st-body);font-weight:var(--st-w-body);
  color:var(--st-ink);letter-spacing:var(--st-tr-flat);-webkit-font-smoothing:antialiased}
.st *,.st *::before,.st *::after{box-sizing:border-box}
/* :where() keeps these resets at zero specificity, so a component class always
   wins over them. Without it .st button beats .st-btn and every button on every
   screen quietly loses its background. That has cost other people whole days. */
.st :where(h1,h2,h3){margin:0;font-weight:var(--st-w-bold);letter-spacing:var(--st-tr-tight);line-height:1.2}
.st :where(h1){font-size:var(--st-h2)}
.st :where(h2){font-size:var(--st-title);font-weight:var(--st-w-title)}
.st :where(h3){font-size:var(--st-body-lg);font-weight:var(--st-w-title)}
.st :where(p){margin:0;line-height:1.55}
.st :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.st :where(table){border-collapse:collapse}
.st :focus-visible{outline:2px solid var(--st-accent);outline-offset:3px}
.st-label{font-size:var(--st-label);font-weight:var(--st-w-title);letter-spacing:var(--st-tr-label);
  text-transform:uppercase;color:var(--st-ink-3)}
.st-meta{font-size:var(--st-meta);color:var(--st-ink-3)}
.st-num{font-size:var(--st-num);font-weight:var(--st-w-bold);letter-spacing:var(--st-tr-tight);
  line-height:1;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.st *{transition-duration:.01ms!important;animation:none!important}}

/* ==========================================================================
   buttons
   ========================================================================== */
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--st-2);
  padding:11px 18px;border-radius:var(--st-r-pill);font-size:var(--st-body);
  font-weight:var(--st-w-title);white-space:nowrap;
  background:var(--st-accent);color:#fff;box-shadow:var(--st-sh-accent);
  transition:transform var(--st-fast) var(--st-e)}
.st-btn:hover{background:var(--st-accent-hover);transform:translateY(-1px)}
.st-btn:active{transform:translateY(0)}
.st-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.st-btn--ghost{background:var(--st-surface);color:var(--st-ink);
  box-shadow:inset 0 0 0 1px var(--st-line-2),0 1px 2px rgba(17,24,39,.04)}
.st-btn--ghost:hover{background:var(--st-surface);box-shadow:inset 0 0 0 1px var(--st-ink-4),0 1px 2px rgba(17,24,39,.04)}

.st-btn--quiet{background:transparent;color:var(--st-accent);box-shadow:none;padding:9px 14px}
.st-btn--quiet:hover{background:var(--st-accent-wash);transform:none}

.st-btn--danger{background:var(--st-danger);box-shadow:0 8px 20px -8px var(--st-danger)}
.st-btn--danger:hover{background:#A82F48}

.st-btn--sm{padding:8px 14px;font-size:var(--st-meta)}
.st-btn--lg{padding:14px 24px;font-size:var(--st-body-lg)}
.st-btn[disabled],.st-btn[aria-disabled=true]{background:var(--st-line);color:var(--st-ink-4);
  box-shadow:none;cursor:not-allowed;transform:none}
/* rule 2: a disabled control always says why. Put it in title=. */

/* ==========================================================================
   fields
   ========================================================================== */
.st-field{display:block}
.st-field > .st-label{display:block;margin-bottom:var(--st-2)}
.st-input{width:100%;padding:11px 14px;border-radius:var(--st-r);background:var(--st-surface);
  border:1px solid var(--st-line-2);font:inherit;font-size:var(--st-body);color:var(--st-ink);outline:0;
  transition:none}
.st-input::placeholder{color:var(--st-ink-4)}
.st-input:focus{border-color:var(--st-accent);box-shadow:0 0 0 3px var(--st-accent-wash)}
.st-input--bad{border-color:var(--st-danger)}
.st-input--bad:focus{box-shadow:0 0 0 3px var(--st-danger-wash)}
.st-hint{font-size:var(--st-meta);color:var(--st-ink-3);margin-top:var(--st-2);line-height:1.5}
.st-hint--bad{color:var(--st-danger)}

.st-search{display:flex;align-items:center;gap:var(--st-3);background:var(--st-surface);
  border-radius:var(--st-r-pill);padding:11px 18px;box-shadow:var(--st-sh-1);color:var(--st-ink-4)}
.st-search input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:var(--st-body);color:var(--st-ink)}
.st-search svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.st-seg{display:inline-flex;background:var(--st-surface);border-radius:var(--st-r-pill);padding:4px;
  box-shadow:var(--st-sh-1)}
.st-seg button{padding:0 15px;height:32px;border-radius:var(--st-r-pill);font-size:var(--st-meta);
  font-weight:var(--st-w-title);color:var(--st-ink-3);transition:all var(--st-fast) var(--st-e)}
.st-seg button:hover{color:var(--st-ink)}
.st-seg button[aria-pressed=true]{background:var(--st-accent);color:#fff}

.st-toggle{width:44px;height:26px;border-radius:var(--st-r-pill);background:var(--st-line-2);
  position:relative;flex:none;transition:none}
.st-toggle i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(17,24,39,.2);transition:transform var(--st-mid) var(--st-e)}
.st-toggle[aria-pressed=true]{background:var(--st-accent)}
.st-toggle[aria-pressed=true] i{transform:translateX(18px)}

/* ==========================================================================
   chips, tags, pills
   ========================================================================== */
.st-chip{display:inline-flex;align-items:center;gap:var(--st-2);padding:7px 13px;
  border-radius:var(--st-r-pill);font-size:var(--st-meta);font-weight:var(--st-w-body);
  color:var(--st-ink-2);background:var(--st-surface);box-shadow:inset 0 0 0 1px var(--st-line-2);
  transition:all var(--st-fast) var(--st-e)}
.st-chip:hover{box-shadow:inset 0 0 0 1px var(--st-accent);color:var(--st-accent);background:var(--st-accent-wash)}
.st-chip[aria-pressed=true]{background:var(--st-accent);color:#fff;box-shadow:none}

.st-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--st-r-pill);
  font-size:11.5px;font-weight:var(--st-w-title);white-space:nowrap;
  background:var(--st-accent-wash);color:var(--st-accent-hover)}
.st-tag--lav{background:var(--st-lav);color:var(--st-lav-ink)}
.st-tag--sky{background:var(--st-sky);color:var(--st-sky-ink)}
.st-tag--but{background:var(--st-but);color:var(--st-but-ink)}
.st-tag--blu{background:var(--st-blu);color:var(--st-blu-ink)}
.st-tag--min{background:var(--st-min);color:var(--st-min-ink)}
.st-tag--mut{background:var(--st-surface-2);color:var(--st-ink-3)}
.st-tag--danger{background:var(--st-danger-wash);color:var(--st-danger)}

/* ==========================================================================
   the icon chip. Cheapest thing in the kit, does the most.
   ========================================================================== */
.st-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--st-r);
  background:var(--st-accent-wash);color:var(--st-accent)}
.st-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.st-ic--sm{width:32px;height:32px;border-radius:var(--st-r-sm)}
.st-ic--sm svg{width:16px;height:16px}
.st-ic--lg{width:48px;height:48px}
.st-ic--lg svg{width:22px;height:22px}
.st-ic--lav{background:var(--st-lav);color:var(--st-lav-ink)}
.st-ic--sky{background:var(--st-sky);color:var(--st-sky-ink)}
.st-ic--but{background:var(--st-but);color:var(--st-but-ink)}
.st-ic--blu{background:var(--st-blu);color:var(--st-blu-ink)}
.st-ic--min{background:var(--st-min);color:var(--st-min-ink)}

.st-av{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;
  color:#fff;font-size:var(--st-body);font-weight:var(--st-w-bold);
  background:linear-gradient(140deg,var(--st-accent-light),var(--st-accent-hover))}
.st-av--sm{width:32px;height:32px;font-size:var(--st-meta)}

/* ==========================================================================
   cards
   ========================================================================== */
.st-card{background:var(--st-surface);border-radius:var(--st-r-card);box-shadow:var(--st-sh-1);
  padding:var(--st-6)}
.st-card__h{display:flex;align-items:center;gap:var(--st-3);margin-bottom:var(--st-5)}
.st-card__h .st-sp{flex:1}
.st-card--hov{transition:transform var(--st-mid) var(--st-e)}
.st-card--hov:hover{box-shadow:var(--st-sh-2);transform:translateY(-3px)}

/* the tinted stat tile */
.st-tile{border-radius:var(--st-r-card);padding:var(--st-5);box-shadow:var(--st-sh-1);
  position:relative;overflow:hidden;background:var(--st-lav);
  transition:transform var(--st-mid) var(--st-e)}
.st-tile:hover{box-shadow:var(--st-sh-2);transform:translateY(-3px)}
.st-tile--sky{background:var(--st-sky)} .st-tile--but{background:var(--st-but)}
.st-tile--blu{background:var(--st-blu)} .st-tile--min{background:var(--st-min)}
.st-tile .st-ic{background:rgba(255,255,255,.7);margin-bottom:var(--st-4)}
.st-tile__n{font-size:var(--st-num);font-weight:var(--st-w-bold);letter-spacing:var(--st-tr-tight);
  line-height:1;font-variant-numeric:tabular-nums}
.st-tile__t{font-size:var(--st-body);color:var(--st-ink-3);margin-top:7px}
.st-tile__d{position:absolute;top:var(--st-5);right:var(--st-5);display:inline-flex;align-items:center;
  gap:4px;font-size:11.5px;font-weight:var(--st-w-bold);padding:5px 10px;border-radius:var(--st-r-pill);
  background:rgba(255,255,255,.72)}

/* ==========================================================================
   rows, tables, lists
   ========================================================================== */
.st-row{display:flex;align-items:center;gap:var(--st-3);padding:var(--st-3) var(--st-4);
  border-radius:var(--st-r);transition:none}
.st-row:hover{background:var(--st-accent-wash)}
.st-row__t{flex:1;min-width:0}
.st-row__t b{display:block;font-size:var(--st-body);font-weight:var(--st-w-title)}
.st-row__t span{display:block;font-size:var(--st-meta);color:var(--st-ink-4);margin-top:3px}
.st-row__r{font-size:var(--st-meta);color:var(--st-ink-4);white-space:nowrap}

.st-table{width:100%;border-collapse:collapse}
.st-table th{text-align:left;font-size:11.5px;font-weight:var(--st-w-title);color:var(--st-ink-4);
  padding:0 var(--st-4) var(--st-4) 0;letter-spacing:var(--st-tr-label);text-transform:uppercase}
.st-table td{padding:var(--st-4) var(--st-4) var(--st-4) 0;border-top:1px solid var(--st-line);
  font-size:var(--st-body);vertical-align:middle}
.st-table tbody tr{transition:none}
.st-table tbody tr:hover{background:var(--st-surface-2)}
.st-person{display:flex;align-items:center;gap:var(--st-3)}
.st-person b{display:block;font-size:var(--st-body);font-weight:var(--st-w-title)}
.st-person span{display:block;font-size:var(--st-meta);color:var(--st-ink-4);margin-top:2px}

.st-bar{display:block;height:7px;width:110px;border-radius:var(--st-r-pill);background:var(--st-line-2);
  overflow:hidden}
.st-bar i{display:block;height:100%;border-radius:var(--st-r-pill);background:var(--st-accent);
  transition:none}
.st-bar--danger i{background:var(--st-danger)}

/* ==========================================================================
   nav
   ========================================================================== */
.st-nav{display:flex;flex-direction:column;gap:3px}
.st-nav button{display:flex;align-items:center;gap:var(--st-3);padding:10px 11px;
  border-radius:var(--st-r);color:var(--st-ink-2);font-size:var(--st-body);
  font-weight:var(--st-w-body);transition:all var(--st-fast) var(--st-e)}
.st-nav button:hover{background:var(--st-accent-wash)}
.st-nav button[aria-current=page]{background:var(--st-accent);color:#fff;box-shadow:var(--st-sh-accent)}
.st-nav svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.st-nav em{margin-left:auto;font-style:normal;font-size:11px;font-weight:var(--st-w-title);
  background:var(--st-accent-wash);color:var(--st-accent-hover);padding:2px 8px;border-radius:var(--st-r-pill)}
.st-nav button[aria-current=page] em{background:rgba(255,255,255,.24);color:#fff}

/* ==========================================================================
   waiting

   Three levels, and the rule that picks one is: do we know the shape of what
   is coming? Yes, a skeleton. No, a ring. Under 300ms, nothing at all.
   The words and the timings come from lesson-motion-v1.html and have not changed.
   ========================================================================== */
@keyframes st-spin{to{transform:rotate(360deg)}}
@keyframes st-shim{0%{background-position:100% 50%}100%{background-position:0 50%}}

.st-ring{width:36px;height:36px;border-radius:50%;border:2px solid var(--st-line-2);
  border-top-color:var(--st-accent);animation:st-spin 1s linear infinite}
.st-ring--sm{width:18px;height:18px}
.st-ring--btn{width:15px;height:15px;border-color:rgba(255,255,255,.4);border-top-color:#fff}

/* 1. cold. We know nothing yet, so it replaces the whole page.
   No logo, no wordmark, no product name. A loading screen is not a splash
   screen, and inside a company's own world our mark would be advertising. */
.st-load{position:fixed;inset:0;z-index:80;background:var(--st-surface);
  display:grid;place-content:center;justify-items:center;text-align:center}
.st-load p{margin:var(--st-5) 0 0;font-size:var(--st-meta);color:var(--st-ink-3);
  opacity:0;transition:opacity var(--st-slow) var(--st-e)}
.st-load p.is-on{opacity:1}

/* 2. inside the shell. We know the shape, so we draw the shape. */
.st-skel{background:linear-gradient(90deg,var(--st-line) 25%,var(--st-surface-2) 37%,var(--st-line) 63%);
  background-size:400% 100%;animation:st-shim 1.4s ease infinite;border-radius:var(--st-r-sm);height:12px}
.st-skel--title{height:17px;width:38%;border-radius:var(--st-r-sm)}
.st-skel--line{height:12px}
.st-skel--sm{height:10px;width:60%}
.st-skel--av{width:40px;height:40px;border-radius:50%;flex:none}
.st-skel--ic{width:40px;height:40px;border-radius:var(--st-r);flex:none}
.st-skel--tile{height:132px;border-radius:var(--st-r-card)}
.st-skel--card{height:280px;border-radius:var(--st-r-card)}

/* 3. in place. The control does the waiting, and says what it is doing. */
.st-btn .st-ring--btn{margin-right:var(--st-1)}
.st-btn[aria-busy=true]{pointer-events:none;opacity:.85}

@media(prefers-reduced-motion:reduce){
  .st-ring{animation:none;border-right-color:var(--st-accent);border-bottom-color:var(--st-accent)}
  .st-skel{animation:none}
}

/* ==========================================================================
   feedback
   ========================================================================== */
.st-toast{display:inline-block;background:var(--st-ink);color:#fff;padding:13px 20px;
  font-size:var(--st-body);font-weight:var(--st-w-body);border-radius:var(--st-r-pill);
  box-shadow:var(--st-sh-2)}
.st-empty{text-align:center;padding:var(--st-9) var(--st-6)}
.st-empty .st-ic{margin:0 auto var(--st-4)}
.st-empty b{display:block;font-size:var(--st-h3);font-weight:var(--st-w-title);
  letter-spacing:var(--st-tr-tight);margin-bottom:var(--st-2)}
.st-empty p{font-size:var(--st-body);color:var(--st-ink-3);max-width:46ch;margin:0 auto var(--st-5)}

.st-scrim{position:fixed;inset:0;background:rgba(17,24,39,.45);display:grid;place-items:center;
  padding:var(--st-6);z-index:70}
.st-modal{background:var(--st-surface);border-radius:var(--st-r-card);box-shadow:var(--st-sh-2);
  width:100%;max-width:480px;padding:var(--st-6)}
.st-modal__f{display:flex;gap:var(--st-3);justify-content:flex-end;margin-top:var(--st-6)}

/* ==========================================================================
   layout helpers. Gaps are always tokens.
   ========================================================================== */
.st-grid{display:grid;gap:var(--st-5)}
.st-g2{grid-template-columns:repeat(2,1fr)}
.st-g3{grid-template-columns:repeat(3,1fr)}
.st-g4{grid-template-columns:repeat(4,1fr)}
.st-stack{display:flex;flex-direction:column;gap:var(--st-3)}
.st-cluster{display:flex;align-items:center;gap:var(--st-3);flex-wrap:wrap}
@media(max-width:1200px){.st-g4{grid-template-columns:repeat(2,1fr)}.st-g3{grid-template-columns:1fr}}
@media(max-width:820px){.st-g4,.st-g3,.st-g2{grid-template-columns:1fr}}


/* ==========================================================================
   shell. Added after the twelve Studio screens were drawn on the kit and it
   turned out every one of them was the same four boxes plus a middle.
   ========================================================================== */
/* ==========================================================================
   SHELL. This part is new and belongs in kit.css.
   Every screen in the Studio is this shell plus one page. The shell is the
   reason twelve screens is one job and not twelve.
   ========================================================================== */
html,body{margin:0;padding:0}
[hidden]{display:none!important}
body{background:var(--st-canvas)}

.st-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh;background:var(--st-canvas)}

/* --- the rail ---------------------------------------------------------- */
.st-rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  padding:var(--st-5) var(--st-4);gap:var(--st-5);background:var(--st-canvas);
  border-right:1px solid var(--st-line-2);overflow-y:auto}
.st-rail__mark{display:flex;align-items:center;gap:10px;padding:0 var(--st-2)}
.st-rail__mark svg{width:26px;height:26px;flex:none}
.st-rail__mark b{font-size:var(--st-body-lg);font-weight:var(--st-w-bold);letter-spacing:var(--st-tr-tight)}
.st-rail__mark span{font-size:var(--st-meta);color:var(--st-ink-4);font-weight:var(--st-w-body)}
.st-rail__sec{font-size:var(--st-label);font-weight:var(--st-w-title);letter-spacing:var(--st-tr-label);
  text-transform:uppercase;color:var(--st-ink-4);padding:0 11px;margin-bottom:var(--st-2)}
.st-rail .st-sp{flex:1}

/* the one identity. Not four. */
.st-who{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--st-r);width:100%;
  transition:none}
.st-who:hover{background:var(--st-accent-wash)}
.st-who__t{flex:1;min-width:0}
.st-who__t b{display:block;font-size:var(--st-body);font-weight:var(--st-w-title);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-who__t span{display:block;font-size:11.5px;color:var(--st-ink-4);margin-top:1px}
.st-who svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;color:var(--st-ink-4)}
.st-mark{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:var(--st-r-sm);
  color:#fff;font-size:11px;font-weight:var(--st-w-bold);letter-spacing:.02em;background:var(--st-ink)}

.st-rail__v{font-size:11px;color:var(--st-ink-4);padding:0 11px;font-variant-numeric:tabular-nums}

/* the dark rail, kept as one class so the whole product flips in one word */
.st-rail--dark{background:#12131A;border-right-color:#1F2028;color:#E7E8EE}
.st-rail--dark .st-rail__mark b{color:#fff}
.st-rail--dark .st-rail__sec{color:#7E808F}
.st-rail--dark .st-nav button{color:#A8AAB8}
.st-rail--dark .st-nav button:hover{background:#1C1D26;color:#fff}
.st-rail--dark .st-nav button[aria-current=page]{background:var(--st-accent);color:#fff}
.st-rail--dark .st-nav em{background:#22232E;color:#A8AAB8}
.st-rail--dark .st-nav button[aria-current=page] em{background:rgba(255,255,255,.24);color:#fff}
.st-rail--dark .st-who__t b{color:#fff}
.st-rail--dark .st-who:hover{background:#1C1D26}
.st-rail--dark .st-rail__v{color:#63657A}
.st-rail--dark hr{border:0;border-top:1px solid #1F2028;margin:0}
.st-rail hr{border:0;border-top:1px solid var(--st-line-2);margin:0}

/* --- the page ---------------------------------------------------------- */
.st-main{min-width:0;display:flex;flex-direction:column}
.st-top{display:flex;align-items:center;gap:var(--st-4);padding:var(--st-6) var(--st-7) var(--st-5);
  position:sticky;top:0;z-index:20;background:var(--st-canvas)}
.st-top h1{font-size:var(--st-h2)}
.st-top .st-sp{flex:1}
.st-top__sub{font-size:var(--st-meta);color:var(--st-ink-3);margin-top:4px}
/* THE SPACING BETWEEN THE BOXES OF A SCREEN, in one place.

   This was padding and nothing else, so .st-page stacked whatever a screen
   emitted flush against itself: on Billing the heading card, the four figures,
   the filter chips and the table all touched, and every screen that loads the
   kit had the same gap of nothing.

   Three contract sheets had already noticed and each written its own
   display:grid with its own number, which is how a rule becomes three rules.
   This is the fourth and it is the one that covers everything else. A screen
   still says what it draws; it never says how far apart.

   align-content:start so a short screen sits at the top rather than floating in
   the middle of the viewport, and min-width:0 so a wide table scrolls inside
   its own box instead of pushing the rail off the page. */
.st-page{display:grid;gap:var(--st-5);align-content:start;
  padding:0 var(--st-7) var(--st-9);min-width:0}
.st-burger{display:none}

/* --- the filter row. Content, People, Companies and Sales all use it. --- */
.st-filters{display:flex;align-items:center;gap:var(--st-3);flex-wrap:wrap;margin-bottom:var(--st-5)}
.st-filters .st-search{flex:1;min-width:220px;max-width:340px}
.st-count{margin-left:auto;font-size:var(--st-meta);color:var(--st-ink-4);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* --- a table living inside a card -------------------------------------- */
.st-tcard{background:var(--st-surface);border-radius:var(--st-r-card);box-shadow:var(--st-sh-1);
  padding:var(--st-5) var(--st-6) var(--st-2)}
.st-tcard .st-table td:first-child,.st-tcard .st-table th:first-child{padding-left:0}
.st-tcard .st-table td:last-child,.st-tcard .st-table th:last-child{padding-right:0;text-align:right}
.st-tcard .st-table th:last-child{text-align:right}

/* --- media grid --------------------------------------------------------- */
.st-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--st-4)}
.st-shot{border-radius:var(--st-r);overflow:hidden;background:var(--st-surface);box-shadow:var(--st-sh-1);
  transition:transform var(--st-mid) var(--st-e);width:100%;display:block}
.st-shot:hover{box-shadow:var(--st-sh-2);transform:translateY(-3px)}
.st-shot i{display:block;aspect-ratio:4/3;background:var(--st-lav)}
.st-shot b{display:block;padding:11px var(--st-3) 3px;font-size:var(--st-meta);font-weight:var(--st-w-title);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-shot span{display:block;padding:0 var(--st-3) 12px;font-size:11px;color:var(--st-ink-4)}

/* --- drop zone ---------------------------------------------------------- */
.st-drop{border:2px dashed var(--st-ink-5);border-radius:var(--st-r-card);padding:var(--st-10) var(--st-6);
  text-align:center;background:var(--st-surface-2);transition:all var(--st-fast) var(--st-e);
  display:block;width:100%}
.st-drop:hover{border-color:var(--st-accent);background:var(--st-accent-wash)}
.st-drop b{display:block;font-size:var(--st-h3);font-weight:var(--st-w-title);
  letter-spacing:var(--st-tr-tight);margin:var(--st-4) 0 var(--st-2)}
.st-drop span{font-size:var(--st-body);color:var(--st-ink-3)}

/* --- band, for "where everyone stands" ---------------------------------- */
.st-band{display:flex;height:38px;border-radius:var(--st-r-sm);overflow:hidden;gap:2px}
.st-band button{display:grid;place-items:center;font-size:var(--st-meta);font-weight:var(--st-w-title);
  color:#fff;transition:none}
.st-band button:hover{filter:brightness(1.1)}
.st-key{display:flex;gap:var(--st-4);flex-wrap:wrap;margin-top:var(--st-3);font-size:var(--st-meta);
  color:var(--st-ink-3)}
.st-key i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px}

/* --- a column chart, drawn with divs ------------------------------------ */
.st-cols{display:flex;align-items:flex-end;gap:6px;height:160px;padding-top:var(--st-4)}
.st-cols div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%}
.st-cols i{display:block;border-radius:4px 4px 0 0;background:var(--st-accent);
  transition:none}
.st-cols i.b{background:var(--st-accent-wash-2);border-radius:4px}
/* the number sits above its own bar. Four bars get four numbers; twelve bars
   get none, because then the numbers are the noise and the shape is the point. */
.st-cols b{font-size:11.5px;font-weight:var(--st-w-title);color:var(--st-ink-3);text-align:center;
  line-height:1;padding-bottom:6px;font-variant-numeric:tabular-nums}
.st-cols div:hover i{filter:brightness(1.08)}
.st-xax{display:flex;gap:6px;margin-top:10px}
.st-xax span{flex:1;text-align:center;font-size:11px;color:var(--st-ink-4)}

/* --- key picker (the Keys screen) --------------------------------------- */
.st-pick{display:grid;grid-template-columns:264px 1fr;gap:var(--st-5);align-items:start}
.st-pick__l{display:flex;flex-direction:column;gap:3px}
.st-pick__l button{display:flex;align-items:center;gap:var(--st-3);padding:11px var(--st-3);
  border-radius:var(--st-r);transition:none}
.st-pick__l button:hover{background:var(--st-accent-wash)}
.st-pick__l button[aria-pressed=true]{background:var(--st-surface);box-shadow:var(--st-sh-1)}
.st-pick__l b{display:block;font-size:var(--st-body);font-weight:var(--st-w-title)}
.st-pick__l span{display:block;font-size:11.5px;color:var(--st-ink-4);margin-top:2px}

/* --- little note strip, for a thing that is switched off ----------------- */
.st-strip{display:flex;align-items:center;gap:var(--st-3);padding:var(--st-3) var(--st-4);
  border-radius:var(--st-r);background:var(--st-but);color:var(--st-but-ink);font-size:var(--st-meta)}
.st-strip .st-sp{flex:1}

/* --- the rule table at the foot ----------------------------------------- */
.st-rules{margin:var(--st-9) 0 0}
.st-rules table{width:100%;border-collapse:collapse;background:var(--st-surface);
  border-radius:var(--st-r-card);overflow:hidden;box-shadow:var(--st-sh-1)}
.st-rules th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:var(--st-tr-label);
  color:var(--st-ink-4);padding:var(--st-4) var(--st-5);background:var(--st-surface-2)}
.st-rules td{padding:var(--st-4) var(--st-5);border-top:1px solid var(--st-line);font-size:var(--st-meta);
  vertical-align:top;line-height:1.55}
.st-rules td:first-child{font-weight:var(--st-w-title);width:31%}
.st-rules h2{margin-bottom:var(--st-4)}

/* --- narrow -------------------------------------------------------------- */
@media(max-width:1180px){.st-shots{grid-template-columns:repeat(3,1fr)}
  .st-pick{grid-template-columns:1fr}}
@media(max-width:900px){
  .st-shell{grid-template-columns:1fr}
  .st-rail{position:fixed;left:0;top:0;width:264px;z-index:60;transform:translateX(-100%);
    transition:transform var(--st-mid) var(--st-e);background:var(--st-surface)}
  .st-rail--dark{background:#12131A}
  .st-rail.is-on{transform:none;box-shadow:var(--st-sh-2)}
  .st-burger{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--st-r);
    background:var(--st-surface);box-shadow:var(--st-sh-1);flex:none}
  .st-burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  /* the top bar wraps rather than pushing the page sideways. A long action
     word like "Print or save as PDF" is exactly what breaks a header at 400. */
  .st-top{padding:var(--st-4) var(--st-4) var(--st-3);flex-wrap:wrap;gap:var(--st-3)}
  .st-top h1{font-size:var(--st-h3)}
  .st-top .st-sp{flex:1 0 100%;height:0}
  .st-top__sub{display:none}
  .st-top .st-btn{margin-left:auto}
  .st-page{padding:0 var(--st-4) var(--st-8)}
  .st-shots{grid-template-columns:repeat(2,1fr)}
  .st-tcard{padding:var(--st-4) var(--st-4) 0}
  .st-rules td:first-child{width:auto}
  .st-rules table,.st-rules thead,.st-rules tbody,.st-rules tr,.st-rules td{display:block;width:100%}
  .st-rules thead{display:none}
  .st-rules td{border-top:0;padding:var(--st-2) var(--st-4)}
  .st-rules td:first-child{padding-top:var(--st-4);border-top:1px solid var(--st-line)}
  .st-rules td:last-child{padding-bottom:var(--st-4)}
}
/* a table is the one thing allowed to scroll sideways, and only its own box */
.st-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.st-scroll .st-table{min-width:620px}

/* Grid children default to min-width:auto, so a wide child pushes the page
   sideways instead of shrinking. This is the single most common way a screen
   that looked fine at 1568 breaks at 400. */
.st-grid > *,.st-main,.st-page,.st-card,.st-tcard{min-width:0}
@media(max-width:900px){
  .st-pick{grid-template-columns:1fr!important}
  .st-seg{flex-wrap:wrap;border-radius:var(--st-r)}
  .st-cols,.st-xax{gap:3px}
  .st-xax span{font-size:9px}
  .st-filters .st-search{max-width:none}
}
/* the inline two-column layouts on Reports, Sales, Points and Company are
   written as style="grid-template-columns:..." so they need the !important */
@media(max-width:820px){.st-grid{grid-template-columns:1fr!important}}

/* ---------------------------------------------------------------- the face
   Plus Jakarta Sans, self hosted. NEVER a Google Fonts link: that is a third
   party request from a page a school's staff are signed into, and it blocks the
   first paint on a Vietnamese connection.

   One variable file per subset, 500 to 700 in each, which is why there are three
   files and not nine. The Vietnamese subset is not optional here: it carries
   U+1EA0-1EF9 and the dong sign, and without it every Vietnamese screen falls
   back mid sentence.

   swap, so words are readable in the fallback face while the real one arrives
   rather than the page being blank for a moment. */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('fonts/plus-jakarta-sans-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ============================================ everything v1 still needs
   Forty rules the live kit carried that v2 does not: the sheet, the toast, the
   drag and drop zones, the answer options, the logo marks. Not one selector
   here collides with one above, so nothing is overridden and nothing is lost.
   They go when the screen that uses them is redrawn to v2, and not before.
   ========================================================================= */
/* ============================================================================
   THE KIT. One stylesheet, loaded last on every screen, and it is the last word.
   ============================================================================

   WHAT THIS FILE IS

   handover/design/00-THE-KIT.md, section 10: one file, it loads last on every
   screen, and a screen that does not load it is a bug rather than a style
   choice. This is that file. assets/palette.css folded into it and stops being
   loaded by anything.

   The one rule that makes the rest work is the loading order, and it is not
   decided here. inc/head.php holds the list of screens and the sheets each one
   loads, this file is last on every one of them, and tests/test_kit.php runs
   those heads and reads the order back out of the markup they print.

   WHY IT IS SHORT

   It does not restyle anything. Every colour in the four sheets it lands on is
   already named as a variable and read through it, about a hundred and forty
   times. So this file points the old names at the kit's colours and every rule
   that already reads one repaints at once. A custom property declared twice
   takes its final value from the later declaration, and this is the later one.

   THE ACCENT IS THE COMPANY'S, NOT OURS

   The blue below is only the default: the Studio, the lesson page and a
   company's own door each print the account's colour into --a after this file,
   so a company with a green mark gets a green accent. That is the one thing on
   the page that is theirs. Everything else is the same in every account, which
   is the product rather than decoration.

   WHAT IT DELIBERATELY DOES NOT DO YET

   The parts in section 6 of the kit, the header, the buttons, the marquee, the
   sliding tabs, the footer and the toast, arrive with the screens that use
   them, which is section 10 step 3 of the same document: kit.css first, then
   one screen per run.

   Two numbers in the kit disagree with handover/design/app/editor-v8.html,
   which is what the Studio, the writing screen and the lesson page are built
   from: the near blacks and the two type scales. Both are Cowork's own files.
   Nothing here guesses which wins, so the values below are still the ones the
   built screens are drawn against and the disagreement is written on the board.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   The handful of places that name a colour instead of reading one. Same
   selector as the rule being corrected, so it is the later of two and wins
   without an !important anywhere.
   ------------------------------------------------------------------------ */

/* The rail: menu text, the version stamp, and the account row hovered. */
.nav button{color:var(--i4)}
.rf button{color:var(--i4)}
.ver{color:var(--i2)}
.acsw__b:hover{background:var(--i1)}

/* The plates that stand in for a picture, a film and a sound file. They were
   three different warm gradients doing the work an icon already does. */
.mf__t.img{background:var(--w3)}
.mf__t.vid{background:var(--w3)}
.mf__t.aud{background:var(--w3)}
.cov__p{background:var(--w3)}
.pk__t{background:var(--w3)}

/* A badge nobody has earned yet. Faint, and clearly not earned. */
.bdg__i{color:var(--i3)}
/* The mark on a badge is what it takes: a number of points, or a run of right
   answers. It was one of six pictures drawn for six badges that no longer
   exist, so anything outside that six drew an empty box. */
.bdg__i{font-family:var(--f);font-size:11px;font-weight:700;letter-spacing:0}
/* Earned. The accent, which is the company's, and the one place on this rail
   that is theirs. */
.bdg__i.is-on{background:var(--a);border-color:var(--a);color:var(--w)}
/* A badge nobody can win, because whoever set it up left it half done. Loud on
   purpose: the alternative is a badge that is simply never mentioned again. */
.bdg__i.is-loud{border-color:var(--no);color:var(--no)}
/* Nobody has set any badges up at all. */
.bdg__none{font-family:var(--f);font-size:var(--t3);color:var(--i3);line-height:1.45;margin-top:8px}
/* The badge moment carries the same mark. */
.toast__ic{font-family:var(--f);font-size:var(--t6);font-weight:700;letter-spacing:-.02em}

/* The strip on a block that is fine. It was a pale green. */
.att--ok{border-top-color:var(--a);background:var(--aw)}

/* The switcher at the foot of a door, which is a demonstration control and the
   only pure black and white left in either sheet. */
.demo{background:var(--i);color:var(--w)}
.demo button.on{background:var(--a);color:var(--w)}

/* ---------------------------------------------------------------------------
   Near black, seen through something.

   A shadow and a scrim are colours too, and these were three different ones:
   pure black, the old warm ink, and the old rail black. Nobody would spot the
   difference in a screenshot, which is exactly why they survive a redesign and
   why the check will not let them. Same alpha, same effect, one near black.
   ------------------------------------------------------------------------ */
.dd{box-shadow:0 14px 40px rgba(17,24,39,.4)}
.mm{box-shadow:0 -12px 40px rgba(17,24,39,.4)}
.mf__k{background:rgba(17,24,39,.75)}
.dw{background:rgba(17,24,39,.55)}
.sheet{box-shadow:0 1px 0 rgba(17,24,39,.02)}
.dd__chip.is-drag{box-shadow:0 14px 30px rgba(17,24,39,.22)}
.opt.is-pick .opt__n{color:rgba(17,24,39,.55)}
.opt.is-pick .opt__fb{color:rgba(17,24,39,.78)}
.mc__b.is-pick .mc__n{color:rgba(17,24,39,.5)}
.dd__z.is-filled .dd__got{color:rgba(17,24,39,.62)}
.bleed:has(img) .bleed__brief{background:linear-gradient(0deg, rgba(17,24,39,.86), rgba(17,24,39,0))}
@media (max-width:1000px){
  .insp{box-shadow:-8px 0 30px rgba(17,24,39,.14)}
}

/* ---------------------------------------------------------------------------
   A card on the marketing site with nothing behind it.

   The cards on the home page are courses, and a course is only a card if it has
   a page on this site to open. One that does not is still drawn, still named,
   and is not a button: rule 8 of the standing brief, a thing unrecognised
   becomes a visible thing that names itself rather than nothing.

   It is here and not in site.css because site.css is Cowork's, brought across
   by the extractor, and this is ours.
   ------------------------------------------------------------------------ */
/* A word on the marketing site that has no page of its own yet.

   Rule 1 of the standing brief: every click does something, or the control is
   not there. So the certificate, the plain pages and corporate training are
   words rather than links until those pages exist. A word is not a control, and
   it must not read as louder than the links beside it either: without these it
   would inherit the footer's white and come out brighter than the real links,
   which is the wrong thing twice. */
.st-notyet{font-size:var(--t4);color:var(--i3)}
.foot li .st-notyet{color:var(--i4)}
/* The bottom bar spreads its children with a margin. A word that is not a link
   must not push the row about. */
.foot__b span.st-notyet{margin-right:0;color:var(--i4);font-size:inherit}

.card--loud{cursor:default}
.card--loud .card__c{opacity:.35}
.card--loud .card__t{color:var(--no)}
.card--loud .card__m{color:var(--no)}

/* ---------------------------------------------------------------------------
   The logo.

   Section 4 of handover/design/00-THE-KIT.md: it is SkillTeam's own file, one
   file, and nobody redraws it. The picture itself and the two treatments are
   printed beside it by inc/head.php, because a filter that lives in two places
   drifts apart and that is the whole thing section 4 is about.

   The height is the one thing that does NOT get written onto the picture. A
   height on the element beats every stylesheet, so the logo could never shrink
   with the header, which section 5 says it does: 26px, 22px once the header has
   shrunk, 30px in a footer. So inc/head.php prints --h and the rule below is
   the only thing that turns it into a height. A screen can then shrink it with
   an ordinary rule, the way site.css does with .nav.sk .lgi.

   That makes this rule load bearing rather than decorative: a screen carrying
   --h with nothing reading it draws the file at its own 1393 pixels. It is here
   rather than in door.css or site.css because this is the sheet every screen
   loads, and tests/test_logo.php reads every screen through the cascade and
   fails if the height is not read out of --h.
   ------------------------------------------------------------------------ */
.lg{display:inline-flex;align-items:center;gap:11px;line-height:1}
.lg{transition:opacity .4s var(--e)}
.lgi{height:var(--h,26px);transition:none}
.lgb:hover .lg{opacity:.62}
/* The dark ground treatment. It is Cowork's own rule out of site-v3.html, and
   until now it was only in site.css, so the same class printed by the same one
   logo function meant something on the marketing pages and nothing on the
   Studio or on a door. Any word beside the picture on a near black panel is
   white. The picture's own filter is printed with it by inc/head.php. */
.lg--w{color:var(--w)}

/* Nothing else needs a rule here. Everything in our own stylesheets reads a
   token, so pointing the tokens somewhere else above was the whole change for
   them. The rules above are only the places in the sheets we do not write that
   name a colour outright. */

/* ==== MARKETING, lifted from handover/design/app/home-v4.html ==== */
/* ==========================================================================
   MARKETING. The app shell is a rail and a page. A marketing page is bands.
   Same tokens, different skeleton. These belong in kit.css under a heading
   of their own, and nothing here is allowed to invent a colour or a radius.
   ========================================================================== */
html,body{margin:0;padding:0}
[hidden]{display:none!important}
/* HER BODY IS WHITE BECAUSE HER FIRST BAND IS WHITE, and the bands
   alternate from there. Ours is every screen in the product, and the
   kit's first rule is that the ground is tinted and never white, so
   this goes onto the marketing body and no other. Left as she wrote
   it, it takes the Studio, the lesson and every door white with it. */
body.st-site{background:var(--st-surface)}

.st-wrap{max-width:1200px;margin:0 auto;padding:0 var(--st-7)}
.st-sec{padding:var(--st-10) 0}
.st-sec--dark{background:var(--st-ink);color:#fff}
.st-sec--tint{background:var(--st-canvas)}
.st-eye{font-size:var(--st-label);font-weight:var(--st-w-title);letter-spacing:var(--st-tr-label);
  text-transform:uppercase;color:var(--st-accent);margin-bottom:var(--st-4)}
.st-sec--dark .st-eye{color:var(--st-accent-light)}
.st-sec--tint .st-eye,.st-eye--mut{color:var(--st-ink-4)}

/* A display size only marketing gets. The app never goes above --st-h1. */
.st-display{font-size:clamp(34px,4.4vw,56px);font-weight:var(--st-w-bold);
  letter-spacing:-.02em;line-height:1.05;margin:0}
.st-lead{font-size:var(--st-body-lg);color:var(--st-ink-2);line-height:1.6;max-width:46ch;margin:var(--st-5) 0 0}
.st-sec--dark .st-lead{color:#A8AAB8}

/* --- header ------------------------------------------------------------- */
.st-hdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--st-line)}
.st-hdr__in{display:flex;align-items:center;gap:var(--st-6);height:68px}
.st-hdr .st-sp{flex:1}
.st-logo{display:flex;align-items:center;gap:9px;flex:none}
.st-logo svg{width:26px;height:26px}
.st-logo b{font-size:var(--st-body-lg);font-weight:var(--st-w-bold);letter-spacing:var(--st-tr-tight)}
.st-links{display:flex;gap:var(--st-5)}
.st-links a{position:relative;font-size:var(--st-body);font-weight:var(--st-w-title);
  color:var(--st-ink-2);text-decoration:none;padding:4px 0}
.st-links a:hover{color:var(--st-ink)}
.st-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--st-accent);border-radius:2px;transition:none}
.st-links a:hover::after,.st-links a[aria-current=page]::after{right:0}
.st-links a[aria-current=page]{color:var(--st-ink)}
.st-lang{display:inline-flex;background:var(--st-canvas);border-radius:var(--st-r-pill);padding:3px}
.st-lang button{padding:0 13px;height:28px;border-radius:var(--st-r-pill);font-size:var(--st-meta);
  font-weight:var(--st-w-title);color:var(--st-ink-3)}
.st-lang button[aria-pressed=true]{background:var(--st-surface);color:var(--st-ink);box-shadow:var(--st-sh-1)}

/* --- hero ---------------------------------------------------------------- */
.st-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--st-10);align-items:center;
  padding:var(--st-10) 0}
.st-hero__art{aspect-ratio:4/3;border-radius:var(--st-r-card);overflow:hidden;position:relative;
  background:linear-gradient(150deg,var(--st-lav),var(--st-sky));box-shadow:var(--st-sh-2)}
.st-hero__art span{position:absolute;inset:auto var(--st-5) var(--st-5);color:var(--st-ink-3);
  font-size:var(--st-meta)}

/* --- figures ------------------------------------------------------------- */
.st-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--st-4)}
.st-fig{background:var(--st-surface);border-radius:var(--st-r-card);padding:var(--st-6);
  box-shadow:var(--st-sh-1);transition:transform var(--st-mid) var(--st-e)}
.st-fig:hover{box-shadow:var(--st-sh-2);transform:translateY(-3px)}
.st-fig b{display:block;font-size:var(--st-num-lg);font-weight:var(--st-w-bold);
  letter-spacing:var(--st-tr-tight);line-height:1;font-variant-numeric:tabular-nums}
.st-fig span{display:block;font-size:var(--st-meta);color:var(--st-ink-3);margin-top:10px}
.st-fig i{display:block;font-style:normal;font-size:11px;color:var(--st-ink-4);margin-top:6px}

/* --- how it works: steps beside a panel ---------------------------------- */
.st-how{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--st-9);align-items:start}
.st-steps{border-left:2px solid rgba(255,255,255,.14);margin-top:var(--st-7)}
.st-steps button{display:block;width:100%;padding:var(--st-4) 0 var(--st-4) var(--st-5);
  margin-left:-2px;border-left:2px solid transparent;transition:all var(--st-fast) var(--st-e)}
.st-steps b{display:block;font-size:var(--st-h3);font-weight:var(--st-w-title);
  letter-spacing:var(--st-tr-tight);color:#6E7183;transition:none}
.st-steps p{font-size:var(--st-body);color:#A8AAB8;line-height:1.55;margin:10px 0 0;max-width:44ch;
  display:none}
.st-steps button:hover b{color:#C9CBD6}
.st-steps button[aria-pressed=true]{border-left-color:var(--st-accent-light)}
.st-steps button[aria-pressed=true] b{color:#fff}
.st-steps button[aria-pressed=true] p{display:block}

.st-panel{background:var(--st-surface);border-radius:var(--st-r-card);padding:var(--st-6);
  box-shadow:0 24px 60px -24px rgba(17,24,39,.7);min-height:390px}
.st-panel__h{display:flex;align-items:center;gap:var(--st-3);margin-bottom:var(--st-5)}
.st-panel__h b{font-size:var(--st-title);font-weight:var(--st-w-title)}
.st-panel__h span{margin-left:auto;font-size:var(--st-meta);color:var(--st-ink-4)}
.st-sect{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--st-3)}
.st-sect button{display:block;padding:var(--st-4);border-radius:var(--st-r);text-align:left;
  background:var(--st-canvas);transition:all var(--st-fast) var(--st-e)}
.st-sect button:hover{background:var(--st-accent-wash)}
.st-sect button[aria-pressed=true]{background:var(--st-accent);color:#fff}
.st-sect b{display:block;font-size:var(--st-body);font-weight:var(--st-w-title)}
.st-sect span{display:block;font-size:11.5px;color:var(--st-ink-4);margin-top:4px}
.st-sect button[aria-pressed=true] span{color:rgba(255,255,255,.72)}

/* --- two paths ----------------------------------------------------------- */
.st-paths{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--st-5)}
.st-path{border-radius:var(--st-r-card);padding:var(--st-8);box-shadow:var(--st-sh-1)}
.st-path--a{background:var(--st-ink);color:#fff}
.st-path--b{background:var(--st-surface)}
.st-path__n{font-size:48px;font-weight:var(--st-w-bold);letter-spacing:-.03em;line-height:1;
  color:var(--st-ink-5);opacity:.5}
.st-path--a .st-path__n{color:#3A3C4C;opacity:1}
.st-path ol{list-style:none;margin:var(--st-6) 0 var(--st-6);padding:0}
.st-path li{display:flex;gap:var(--st-4);align-items:baseline;padding:13px 0;
  border-top:1px solid var(--st-line)}
.st-path--a li{border-top-color:#26283A}
.st-path li em{font-style:normal;font-size:11px;font-weight:var(--st-w-title);color:var(--st-accent);
  font-variant-numeric:tabular-nums;flex:none;width:18px}
.st-path--a li em{color:var(--st-accent-light)}
.st-arrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--st-body);
  font-weight:var(--st-w-title);color:var(--st-accent);text-decoration:none}
.st-path--a .st-arrow{color:#fff}
.st-arrow svg{width:26px;height:9px;transition:none;
  fill:none;stroke:currentColor;stroke-width:1.6}
.st-arrow:hover svg{width:44px}

/* --- course cards -------------------------------------------------------- */
.st-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--st-5)}
.st-cc{display:block;background:var(--st-surface);border-radius:var(--st-r-card);overflow:hidden;
  box-shadow:var(--st-sh-1);text-align:left;width:100%;
  transition:transform var(--st-mid) var(--st-e)}
.st-cc:hover{box-shadow:var(--st-sh-2);transform:translateY(-4px)}
.st-cc__c{aspect-ratio:16/9;position:relative;background:var(--st-lav)}
.st-cc__c em{position:absolute;top:var(--st-3);left:var(--st-3);font-style:normal;
  background:var(--st-surface);color:var(--st-accent);font-size:11px;font-weight:var(--st-w-bold);
  letter-spacing:var(--st-tr-label);text-transform:uppercase;padding:5px 10px;border-radius:var(--st-r-pill)}
.st-cc__b{padding:var(--st-5)}
.st-cc__b b{display:block;font-size:var(--st-title);font-weight:var(--st-w-title);
  letter-spacing:var(--st-tr-tight);line-height:1.3}
.st-cc__b span{display:block;font-size:var(--st-meta);color:var(--st-ink-3);margin-top:8px}

/* --- the honest empty slot ----------------------------------------------
   A proof section with nothing in it yet is the hardest thing on this page to
   get right. A row of grey rectangles is worse than no section at all. So the
   slot is drawn as a real slot, it says what goes in it, and it says when. */
.st-slots{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--st-4)}
.st-slot{aspect-ratio:5/3;border-radius:var(--st-r);border:1.5px dashed var(--st-ink-5);
  display:grid;place-items:center;text-align:center;padding:var(--st-3);
  font-size:11px;color:var(--st-ink-4);line-height:1.4}
.st-note{display:flex;gap:var(--st-4);align-items:flex-start;padding:var(--st-5);
  border-radius:var(--st-r-card);background:var(--st-surface);box-shadow:var(--st-sh-1);
  margin-top:var(--st-6)}
.st-note b{display:block;font-size:var(--st-body);font-weight:var(--st-w-title);margin-bottom:6px}
.st-note p{font-size:var(--st-meta);color:var(--st-ink-3);line-height:1.6;max-width:70ch}

.st-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--st-5)}
.st-quote{background:var(--st-surface);border-radius:var(--st-r-card);padding:var(--st-6);
  box-shadow:var(--st-sh-1);display:flex;flex-direction:column;gap:var(--st-4);min-height:250px}
.st-quote__s{display:flex;gap:3px}
.st-quote__s i{width:13px;height:13px;border-radius:3px;background:var(--st-ink-5)}
.st-quote__w{flex:1;display:flex;flex-direction:column;gap:10px}
.st-quote__f{display:flex;align-items:center;gap:var(--st-3);padding-top:var(--st-4);
  border-top:1px solid var(--st-line)}
.st-ph{height:11px;border-radius:var(--st-r-sm);background:var(--st-canvas)}
.st-spec{font-size:11px;color:var(--st-accent);font-weight:var(--st-w-title);
  letter-spacing:var(--st-tr-label);text-transform:uppercase}

.st-people{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--st-5)}
.st-per{text-align:center}
.st-per__a{aspect-ratio:1;border-radius:var(--st-r-card);border:1.5px dashed var(--st-ink-5);
  display:grid;place-items:center;margin-bottom:var(--st-4);color:var(--st-ink-5)}
.st-per__a svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.4}

/* --- foot ---------------------------------------------------------------- */
.st-cta{border-radius:var(--st-r-card);background:var(--st-accent);color:#fff;
  padding:var(--st-10) var(--st-8);text-align:center;box-shadow:0 30px 60px -30px var(--st-accent)}
.st-cta .st-display{color:#fff}
.st-ftr{background:var(--st-ink);color:#9A9CAC;padding:var(--st-9) 0 var(--st-7)}
.st-ftr__g{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--st-7);margin-bottom:var(--st-8)}
.st-ftr h4{font-size:var(--st-label);font-weight:var(--st-w-title);letter-spacing:var(--st-tr-label);
  text-transform:uppercase;color:#63657A;margin:0 0 var(--st-4)}
.st-ftr a{display:block;color:#C9CBD6;text-decoration:none;font-size:var(--st-body);padding:6px 0}
.st-ftr a:hover{color:#fff}
.st-ftr__b{border-top:1px solid #26283A;padding-top:var(--st-5);display:flex;gap:var(--st-5);
  font-size:var(--st-meta);flex-wrap:wrap}

@media(max-width:1000px){
  .st-hero,.st-how{grid-template-columns:1fr;gap:var(--st-8)}
  .st-figs{grid-template-columns:repeat(2,1fr)}
  .st-slots{grid-template-columns:repeat(3,1fr)}
  .st-people{grid-template-columns:repeat(2,1fr)}
  .st-cards,.st-quotes,.st-paths{grid-template-columns:1fr}
  .st-ftr__g{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .st-wrap{padding:0 var(--st-4)}
  .st-sec{padding:var(--st-8) 0}
  .st-links,.st-hdr .st-btn--ghost{display:none}
  .st-figs,.st-slots{grid-template-columns:repeat(2,1fr)}
  .st-ftr__g{grid-template-columns:1fr}
  .st-path{padding:var(--st-6)}
}
/* ==========================================================================
   OURS, and it sits under her marketing block on purpose.

   Everything above this line is lifted from handover/design/app/home-v4.html
   and changes when she changes it. Everything below is the difference between
   a drawing and a page a server prints, and it is kept apart so that the next
   lift cannot quietly take it with it.

   Almost all of it is one thing: her file writes a spacing on the element,
   style="margin-bottom:var(--st-8)", because a single file that has to open in
   a browser on its own is easier to read that way. A renderer cannot do that.
   Author text is data and never markup, and a PHP string carrying a stylesheet
   inside an attribute is the shape nobody can maintain. So each of her inline
   values becomes a name here, at exactly the value she wrote.
   ========================================================================== */

/* The one word in the headline that carries the promise. Her file:
   style="color:var(--st-accent)". */
.st-display__a{color:var(--st-accent)}

/* Her two heading spacings. --h is a heading with a block under it, --t is one
   with a sentence under it first. */
.st-display--h{margin-bottom:var(--st-8)}
.st-display--t{margin-bottom:var(--st-3)}
.st-lead--b{margin-bottom:var(--st-8)}

/* The hero. */
.st-hero__acts{margin-top:var(--st-7)}
.st-hero__note{margin-top:var(--st-5)}
.st-hero__art img{width:100%;height:100%;object-fit:cover;display:block}
.st-figs__note{margin-top:var(--st-5);max-width:74ch}
.st-figs__note b{color:var(--st-ink)}

/* THE FOUR PANELS ARE ALL PRINTED AND THREE ARE HIDDEN.
   The server draws this page and the browser only ever toggles what is already
   on it, so there is one renderer and not two. display:contents is what keeps
   that free: the wrapper is not a box, so the panel that is showing is still
   the second child of the grid, exactly as it is in her file where there is
   only ever one. */
.st-panels{display:contents}

/* A WHITE CARD ON A DARK BAND HAS TO RESTATE ITS INK.
   .st-sec--dark sets color:#fff on the whole band and .st-panel does not set
   one, so every word inside it that has no colour of its own inherits white
   onto white. It is invisible rather than wrong, which is why it survived: the
   three ticks under the sector grid are in her own file and they cannot be
   read there either. Everything else in the panel happened to carry a colour. */
.st-panel{color:var(--st-ink)}
.st-panel .st-row__t b{font-weight:var(--st-w-body)}

.st-panel__q{font-size:var(--st-body-lg);line-height:1.5;margin-bottom:var(--st-5)}
.st-panel__n{margin-top:var(--st-5)}
.st-panel__ticks{margin-top:var(--st-5)}
.st-panel__go{width:100%}
.st-panel .st-field{margin-bottom:var(--st-4)}

/* A picture of a field, and not a field. Nothing on this page posts anywhere:
   an invite is a link, we never set anybody's password, and a box that took an
   email and did nothing with it would be the one thing on this site that lies.
   So it is drawn at the height of a real one and it is not typed into. */
.st-input--show{display:block;min-height:20px}

/* Her sector tiles are pressed to show a state. Ours go to the academy, so the
   first one is marked with data rather than with aria-pressed: a control that
   navigates is not a toggle, and saying it is would be read out as one. */
.st-sect [data-on]{background:var(--st-accent);color:#fff}
.st-sect [data-on] span{color:rgba(255,255,255,.72)}
.st-sect span[data-on],.st-sect span:not([data-on]){display:block;padding:var(--st-4);
  border-radius:var(--st-r);text-align:left}

/* A tick, and an answer. Her file writes these two as inline padding and an
   inline background on .st-row. */
.st-row--tick{padding:9px 0}
.st-row--sunk{background:var(--st-canvas)}

/* The certificate in step four. */
.st-cert{border-radius:var(--st-r);background:var(--st-canvas);padding:var(--st-7);text-align:center}
.st-cert__t{font-size:22px;font-weight:var(--st-w-bold);letter-spacing:var(--st-tr-tight);
  margin-top:var(--st-3)}
.st-cert__m{margin-top:10px}

/* The three cards. Her file makes them buttons; ours are links, because they go
   to a course page and a link is what you can open in a new tab, copy, or send
   to somebody. */
.st-cc{text-decoration:none;color:inherit}

/* AN ASPECT RATIO ON AN INLINE ELEMENT DOES NOTHING.
   Both halves of the card are spans in her markup, and .st-cc__c is given
   aspect-ratio:16/9 to be the cover. A span is inline, aspect-ratio does not
   apply to it, so the cover collapsed to nothing and the FREE tag inside it
   landed on top of the course title. It does the same in her own file. They
   are made blocks, which is the whole fix and changes nothing else. */
.st-cc__c,.st-cc__b{display:block}

.st-cc__c--lav{background:var(--st-lav)}
.st-cc__c--sky{background:var(--st-sky)}
.st-cc__c--but{background:var(--st-but)}
.st-free__all{margin-top:var(--st-7)}

/* The face beside a quote that nobody has said yet. */
.st-slot--face{width:38px;height:38px;aspect-ratio:auto;border-radius:50%;font-size:0;flex:none}
.st-quote__f .st-spec{display:block}
.st-quote__f .st-meta{display:block;margin-top:3px}
.st-per .st-meta{margin-top:5px}
.st-per__c{color:var(--st-ink-4)}

/* The band at the foot. Two buttons on the accent, so neither of them can be
   the accent. */
.st-cta__acts{justify-content:center;margin-top:var(--st-7)}
.st-cta .st-lead{color:rgba(255,255,255,.86);margin-left:auto;margin-right:auto;text-align:center}
.st-btn--onaccent{background:#fff;color:var(--st-accent);box-shadow:none}
.st-btn--onaccent-g{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
/* A word with no page behind it sits in a column of links, so it is laid out
   like one. Left inline, Privacy and Terms ran together as one word. */
.st-ftr .st-notyet{display:block;padding:6px 0;color:#6E7183}

/* The footer logo is the white one. */
.st-logo--w b{color:#fff}
.st-ftr p{font-size:var(--st-meta);line-height:1.7;max-width:34ch}

/* A word with no page behind it yet. It is named, it is quiet, and it says why
   when you point at it, which is rule 2 rather than a link that goes nowhere. */
.st-links .st-notyet,.st-ftr .st-notyet{cursor:default}

/* ==========================================================================
   THE STUDIO SCROLLS THE PAGE NOW, AND THE BODY HAS TO LET IT.

   In v1 the shell was height:100vh and the middle scrolled inside itself, so
   studio.css pins the body: html,body{height:100%} and body.st-studio with
   overflow:hidden. The kit's shell is min-height:100vh and grows, which is
   what lets the rail stay put with position:sticky instead of being a second
   scrolling box.

   Left as it was, the page grew past the window and nothing could reach it:
   People has five hundred rows and the list simply stopped at the bottom of
   the screen. Gauthier, 11 September: "can't scroll down on the people tab."
   ========================================================================== */
html:has(body.st-studio),body.st-studio{height:auto;overflow:visible}

/* ==========================================================================
   THE STUDIO SHELL. Three names her file has no rule for, because her file
   draws the shell once and ours draws it for twelve screens and every kind of
   person. Each one is here rather than as a style written onto the element.
   ========================================================================== */

/* The title and the sentence under it. min-width:0 so a long course name
   shortens instead of pushing the button off the end of the bar. */
.st-top__t{min-width:0}

/* The company switcher and the panel it opens. The panel is positioned against
   this, so it has to be the thing that is positioned: without it the panel
   measured itself against the page and opened at the top of the screen. */
.st-whobox{position:relative}
/* THE PANEL NEITHER COVERS THE MENU NOR MOVES IT.

   Two wrong answers were shipped before this one, and both were wrong in the
   same way: they made a click land somewhere the eye did not expect.

   Floating it over the rail covered Content, Media, People, Dashboard and
   Reports, so a click meant for Reports hit the panel.

   Putting it in the flow of the rail stopped that, and shoved the whole menu
   382 pixels down the moment it opened. Gauthier: "if i click on dashboard now
   or every other side menu item, it just opens the dropdown menu." It did not.
   Dashboard had moved, and the click landed inside the open panel.

   position:fixed is the answer, and the reason it is the answer is that the
   rail scrolls: overflow-y:auto clips anything absolutely positioned inside
   it, which is why floating it never worked properly in the first place. A
   fixed box is not clipped by an ancestor's overflow, so it can hang below the
   switcher, be wider than the 250px rail, and leave every menu item exactly
   where it was. assets/studio-list.js puts it under the button when it opens,
   because only the browser knows where that button actually is.

   Nothing on this rail must ever create a containing block for it: a transform
   or a filter on .st-rail would make fixed behave like absolute again and put
   this straight back where it started. */
.st-whobox .dd{position:fixed;left:auto;right:auto;top:auto;bottom:auto;
  width:284px;max-height:min(70vh,460px);overflow-y:auto;z-index:60;
  box-shadow:var(--st-sh-2);border:1px solid var(--st-line-2);
  border-radius:var(--st-r);padding:6px}

/* BELOW 900 THE RAIL IS A DRAWER AND IT IS TRANSFORMED, and a transform on an
   ancestor makes a fixed child behave like an absolute one. So at that width
   the panel is absolute on purpose, hanging under its button inside a drawer
   that is already floating over the page. Left as fixed it would be positioned
   against the transformed rail and land in the wrong place, which is the same
   fault as before wearing a media query. */
@media(max-width:900px){
  .st-whobox .dd{position:absolute;left:0;right:0;top:calc(100% + 6px);
    width:auto;max-height:min(60vh,380px)}
}

.dd__i--plain{grid-template-columns:22px 1fr}
.dd__i--plain .dd__n{white-space:nowrap;grid-column:2}

/* THE COMPANY YOU ARE IN IS MARKED, NOT SELECTED.
   studio.css gives the current row --fld, which was a warm grey in v1 and is
   the tinted canvas now, so it read as nothing at all against a white panel.
   It gets the accent's palest wash and the tick keeps the accent, which is the
   one thing in this panel you can act on. */
.st-whobox .dd__i.on{background:var(--st-accent-wash)}
.st-whobox .dd__i.on .dd__n{font-weight:var(--st-w-title)}
.st-whobox .dd__k{color:var(--st-accent)}
.st-whobox .dd__i:hover{background:var(--st-surface-2)}

/* THE ROLE UNDER A COMPANY IS A SENTENCE, NOT A LABEL.
   studio.css sets it uppercase, letter-spaced and heavy, which is the eyebrow
   treatment section 1 of the kit spends a paragraph removing: at that size it
   reads as a different typeface rather than a quieter one, and "OWNER, 1
   COMPANY UNDER IT" in caps across three lines is most of what this panel
   was. It is sentence case, at the meta size, at the body weight.

   And the rows get room. Four companies at eight pixels apart is a block of
   text you have to read rather than a list you can pick from. */
.st-whobox .dd__i{padding:12px 14px;gap:14px}
.st-whobox .dd__n{font-size:var(--st-body);font-weight:var(--st-w-title)}
.st-whobox .dd__n s{text-transform:none;letter-spacing:0;
  font-size:var(--st-meta);font-weight:var(--st-w-body);color:var(--st-ink-3);margin-top:3px}
.st-whobox .dd__h{text-transform:none;letter-spacing:0;font-size:var(--st-meta);
  font-weight:var(--st-w-title);color:var(--st-ink-4);padding:12px 14px 6px}
.st-whobox .dd__new{text-transform:none;letter-spacing:0;font-size:var(--st-body);
  font-weight:var(--st-w-title);padding:12px 14px}
.st-whobox .dd{padding:6px}
.st-whobox .dd__i.on:hover{background:var(--st-accent-wash)}

/* A COURSE TITLE IS A TITLE, NOT A HEADING.
   The kit has three weights and they mean three things: 500 body, 600 titles
   and controls, 700 numbers and headings. The content list set every course
   name at 700, which is the weight a figure on a tile gets, and beside a rail
   drawn at 600 it read as a different font rather than a heavier one. */
.nm b{font-size:var(--st-title);font-weight:var(--st-w-title);
  letter-spacing:var(--st-tr-tight)}

/* ==========================================================================
   THE LEARNER'S HOME, WEARING THE KIT.

   my.css is lifted from my-learning-v1.html and it is the one screen Gauthier
   asked to keep a rounded corner and a soft shadow when everything else was
   square, so its shape is his and it stays. What changes is what kit v2 says
   about every screen, and nothing here moves a control or a word.
   ========================================================================== */

/* INDIGO MEANS SOMETHING YOU CAN PRESS, and Continue learning is the thing a
   learner came here to press. It was near black, which is the ink, so the one
   button that matters read as a block of text. */
.st-my .btn{background:var(--st-accent);border-color:var(--st-accent);color:#fff}
.st-my .btn:hover{background:var(--st-accent-hover);border-color:var(--st-accent-hover)}

/* THE COVERS ARE IN COLOUR. They were grey until a pointer touched them, which
   is a hover effect on a page a learner reads on a phone, where there is no
   pointer at all. A course is easier to find by its picture than by its name
   and greyscale takes exactly that away. */
.st-my .row__pic img{filter:none}

/* The eyebrow treatment, everywhere it appears on this screen. 11px at .13em
   in caps is the single loudest reason the old screens read as a brochure;
   section 1 of the kit puts uppercase labels at +.01em and leaves it there. */
.st-my .eyebrow,.st-my .pill,.st-my .fld span,.st-my .ring-label span{
  letter-spacing:var(--st-tr-label)}

/* ==========================================================================
   COMPANY SETTINGS, WEARING THE KIT.

   Lifted from account-v1.html and drawn to kit v1: 3px and 4px corners, the
   primary button in the ink, and every field label in caps at .1em. Nothing
   here moves a control or a word. Corners, the accent on the one button that
   commits, and the eyebrow treatment off the labels.
   ========================================================================== */
.st-acct .card,.st-acct .drop{border-radius:var(--st-r-card)}
.st-acct input[type=text],.st-acct input[type=email],.st-acct input[type=number],
.st-acct select,.st-acct textarea,.st-acct input[type=color]{border-radius:var(--st-r)}
.st-acct .btn,.st-acct .idx button{border-radius:var(--st-r-pill)}
.st-acct .lg,.st-acct .swatch .b1{border-radius:var(--st-r-sm)}

/* SAVE IS THE THING YOU CAME HERE TO PRESS. It was the ink, which is the
   colour of the words around it. */
.st-acct .btn.k{background:var(--st-accent);border-color:var(--st-accent);color:#fff}
.st-acct .btn.k:hover{background:var(--st-accent-hover);border-color:var(--st-accent-hover)}

/* The label over a field, at the tracking section 1 puts uppercase labels at. */
.st-acct label.l{letter-spacing:var(--st-tr-label);font-weight:var(--st-w-title)}

/* The item you are on, in the list down the side. */
.st-acct .idx button[aria-current=page],.st-acct .idx button.on{
  background:var(--st-accent-wash);color:var(--st-accent-hover);border-left-color:transparent}

/* ==========================================================================
   THE COURSE PAGE, ON THE KIT.

   The screen somebody lands on before they start. It used to carry its own
   stylesheet lifted from a v1 drawing, which is why it was square cornered,
   flat grey and drawn in the old blue while the lesson one click behind it was
   kit v2 in the company's colour. Two designs, one click apart.

   It carries none of its own now, so it moves when the kit moves, and the
   accent is the COURSE's: a Viettel course page is red because its lessons are.

   EVERY SELECTOR BELOW WAS WRITTEN AGAINST THE MARKUP THE PAGE ACTUALLY
   PRINTS, read out of the page rather than remembered. The first version of
   this block was written against what the markup was assumed to be and half of
   it matched nothing at all: modules came out as boxes, lesson rows as grey
   slabs with bullets beside them, and the panel's rows ran their words
   together. It drew. It was just wrong.
   ========================================================================== */
body.st-course{
  background:var(--st-canvas);color:var(--st-ink);
  font-family:var(--st-font);font-size:var(--st-body);font-weight:var(--st-w-body);
  -webkit-font-smoothing:antialiased}
.st-course :where(ul,li){list-style:none;margin:0;padding:0}

/* ---- the bar across the top ---- */
.st-course .top{
  background:var(--st-surface);border-bottom:1px solid var(--st-line);
  padding:var(--st-4) var(--st-6)}
.st-course .top__i{
  max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:var(--st-5)}
.st-course .back{
  display:inline-flex;align-items:center;gap:var(--st-2);
  font-size:var(--st-meta);font-weight:var(--st-w-title);color:var(--st-ink-3);
  transition:none}
.st-course .back:hover{color:var(--st-ink)}

/* ---- the two columns ---- */
.st-course .wrap{max-width:1180px;margin:0 auto;padding:var(--st-9) var(--st-6) var(--st-10)}
.st-course .pg{display:grid;grid-template-columns:1fr 360px;gap:var(--st-9);align-items:start}

/* ---- the title and the four figures ---- */
.st-course h1{
  font-size:var(--st-h1);font-weight:var(--st-w-bold);letter-spacing:var(--st-tr-tight);
  line-height:1.15;margin:0 0 var(--st-3)}
.st-course .sub{
  font-size:var(--st-body-lg);line-height:1.55;color:var(--st-ink-2);
  max-width:60ch;margin:0 0 var(--st-7)}
/* THE FOUR FIGURES SIT ON SOMETHING. Four numbers floating on the ground with
   a hairline under them read as a caption. On a card they read as the facts of
   the course, which is what they are, and the one that matters carries the
   accent. */
.st-course .facts{
  display:flex;flex-wrap:wrap;gap:var(--st-8);margin-bottom:var(--st-8);
  background:var(--st-surface);border-radius:var(--st-r-card);
  box-shadow:var(--st-sh-1);padding:var(--st-5) var(--st-6)}
.st-course .facts .fact b{
  display:block;font-size:var(--st-num);font-weight:var(--st-w-bold);
  letter-spacing:var(--st-tr-tight);line-height:1}
.st-course .facts .fact:last-child b{color:var(--st-accent)}
.st-course .facts .fact span{
  display:block;margin-top:var(--st-1);font-size:var(--st-label);
  letter-spacing:var(--st-tr-label);text-transform:uppercase;color:var(--st-ink-3)}

/* ---- a section ---- */
.st-course .sec{margin-bottom:var(--st-9)}
.st-course .sec__h{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--st-4);margin-bottom:var(--st-5)}
.st-course .sec__h h2{
  font-size:var(--st-h3);font-weight:var(--st-w-bold);
  letter-spacing:var(--st-tr-tight);margin:0}
.st-course .sec__h .k{
  font-size:var(--st-label);letter-spacing:var(--st-tr-label);
  text-transform:uppercase;color:var(--st-ink-4)}

/* ---- what is in it. ONE CARD for the whole contents, modules inside it. ----
   A module is a heading, not a box: boxing each one made a course read as a
   list of containers with lessons hiding in them. */
.st-course .mods{
  background:var(--st-surface);border-radius:var(--st-r-card);
  box-shadow:var(--st-sh-1);overflow:hidden}
.st-course .mod + .mod{border-top:1px solid var(--st-line)}
.st-course .mod__h{
  width:100%;display:flex;align-items:center;gap:var(--st-3);text-align:left;
  padding:var(--st-4) var(--st-5);
  font-size:var(--st-label);letter-spacing:var(--st-tr-label);
  text-transform:uppercase;color:var(--st-ink-4);
  transition:none}
.st-course .mod__h:hover{background:var(--st-surface-2)}
.st-course .mod__n{font-weight:var(--st-w-bold);color:var(--st-ink-3)}
.st-course .mod__t{
  font-size:var(--st-title);font-weight:var(--st-w-title);color:var(--st-ink);
  text-transform:none;letter-spacing:var(--st-tr-flat)}
.st-course .mod__m{margin-left:auto;text-transform:none;letter-spacing:var(--st-tr-flat);
  font-size:var(--st-meta);font-variant-numeric:tabular-nums}
.st-course .mod__c{display:flex;align-items:center;color:var(--st-ink-4)}
.st-course .mod--bare .mod__h{display:none}

/* ---- a lesson ---- */
.st-course .ls li + li button{border-top:1px solid var(--st-line)}
.st-course .ls button{
  width:100%;display:flex;align-items:center;gap:var(--st-4);text-align:left;
  padding:var(--st-4) var(--st-5) var(--st-4) var(--st-6);
  transition:none}
.st-course .ls button:hover{background:var(--st-surface-2)}
.st-course .ls .dot{
  width:9px;height:9px;flex:none;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--st-ink-5);transition:none}
.st-course .ls .dot.on{background:var(--st-accent);box-shadow:none}
/* The number reads as a place in the course rather than as data beside it. */
.st-course .lnum{
  flex:none;min-width:30px;height:30px;display:grid;place-items:center;
  border-radius:var(--st-r-sm);background:var(--st-canvas);
  font-size:var(--st-meta);font-weight:var(--st-w-bold);
  color:var(--st-ink-3);font-variant-numeric:tabular-nums;
  transition:none}
.st-course .ls button:hover .lnum{background:var(--st-accent-wash);color:var(--st-accent-hover)}
.st-course .ltitle{
  flex:1;font-size:var(--st-body-lg);font-weight:var(--st-w-title);line-height:1.35}
.st-course .lmeta{
  flex:none;display:flex;gap:var(--st-4);align-items:baseline;
  font-size:var(--st-meta);color:var(--st-ink-3);font-variant-numeric:tabular-nums}
.st-course .pts{font-weight:var(--st-w-bold);color:var(--st-accent)}

/* ---- what you can earn ----
   FIVE BADGES AS FIVE IDENTICAL WHITE CARDS is five things a person has to
   read to tell apart. The kit carries five tints for exactly this, and the one
   a badge gets comes from its place in the list: they identify, they never
   judge, so there is no mint for good and no butter for nearly. */
.st-course .gets{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--st-4)}
.st-course .get{
  background:var(--st-surface);border-radius:var(--st-r-card);
  box-shadow:var(--st-sh-1);padding:var(--st-5);
  display:flex;align-items:flex-start;gap:var(--st-4);
  transition:none}
.st-course .get:hover{box-shadow:var(--st-sh-2)}
.st-course .get__m{
  width:44px;height:44px;flex:none;border-radius:var(--st-r);
  display:grid;place-items:center;
  font-size:var(--st-title);font-weight:var(--st-w-bold);
  font-variant-numeric:tabular-nums;letter-spacing:var(--st-tr-tight)}
/* WRITTEN AGAINST THE MARK, NOT AGAINST EVERY SPAN IN THE CARD.
   The mark IS a span, so a rule saying ".get span" out-specified the rule
   saying ".get__m" and the mark came out as twelve point grey text spilling out
   of its own square. Two classes and an element beats two classes, always, and
   the thing that loses is whichever was written first. */
.st-course .get__w{min-width:0;display:flex;flex-direction:column;gap:var(--st-1)}
.st-course .get__w b{display:block;font-size:var(--st-title);font-weight:var(--st-w-title);
  color:var(--st-ink)}
.st-course .get__w > span{display:block;font-size:var(--st-meta);line-height:1.5;color:var(--st-ink-3)}
.st-course .get--lav .get__m{background:var(--st-lav);color:var(--st-lav-ink)}
.st-course .get--sky .get__m{background:var(--st-sky);color:var(--st-sky-ink)}
.st-course .get--but .get__m{background:var(--st-but);color:var(--st-but-ink)}
.st-course .get--blu .get__m{background:var(--st-blu);color:var(--st-blu-ink)}
.st-course .get--min .get__m{background:var(--st-min);color:var(--st-min-ink)}

/* ---- the panel on the right ---- */
.st-course .rail{position:sticky;top:var(--st-6)}
.st-course .buy{
  background:var(--st-surface);border-radius:var(--st-r-card);
  box-shadow:var(--st-sh-2);overflow:hidden}
.st-course .cov{display:block;line-height:0}
.st-course .cov svg{display:block;width:100%;height:auto}
/* A REAL PICTURE, WHEN THE COURSE HAS ONE. Held to the same shape whatever was
   uploaded, because a course page whose panel changes height with the
   photograph is a page that looks different for every course. */
.st-course .cov--photo{aspect-ratio:16/9;overflow:hidden;background:var(--st-surface-2)}
.st-course .cov--photo img{display:block;width:100%;height:100%;object-fit:cover}
.st-course .buy__i{padding:var(--st-6)}
.st-course .price{display:flex;align-items:baseline;gap:var(--st-2);flex-wrap:wrap}
.st-course .price b{
  font-size:var(--st-h3);font-weight:var(--st-w-bold);letter-spacing:var(--st-tr-tight)}
.st-course .price em{font-style:normal;font-size:var(--st-meta);color:var(--st-ink-3)}
.st-course .buy .btn{
  width:100%;display:flex;align-items:center;justify-content:center;
  margin-top:var(--st-5);background:var(--st-accent);color:#fff;
  border-radius:var(--st-r);padding:13px var(--st-5);
  font-size:var(--st-body);font-weight:var(--st-w-title);
  transition:none}
.st-course .buy .btn:hover{background:var(--st-accent-hover)}
.st-course .buy .btn--g{
  background:var(--st-surface);color:var(--st-ink);
  box-shadow:inset 0 0 0 1px var(--st-line-2)}
.st-course .buy .btn--g:hover{background:var(--st-surface-2)}
.st-course .note{
  font-size:var(--st-meta);line-height:1.5;color:var(--st-ink-3);margin-top:var(--st-4)}

/* the four facts, as rows. They ran their words together because nothing
   here was putting a space between a label and its number. */
.st-course .rows{margin-top:var(--st-5)}
.st-course .rows .row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--st-4);
  padding:var(--st-3) 0;border-top:1px solid var(--st-line)}
.st-course .rows .row span{font-size:var(--st-body);color:var(--st-ink-3)}
.st-course .rows .row b{
  font-size:var(--st-body);font-weight:var(--st-w-title);
  font-variant-numeric:tabular-nums}

/* ---- how far in somebody is ---- */
.st-course .prog{margin-bottom:var(--st-7)}
.st-course .prog__r{
  display:flex;justify-content:space-between;gap:var(--st-4);
  font-size:var(--st-meta);color:var(--st-ink-3);margin-bottom:var(--st-2)}
.st-course .prog__b{height:6px;border-radius:999px;background:var(--st-line);overflow:hidden}
.st-course .prog__b i{display:block;height:100%;background:var(--st-accent);border-radius:999px}

@media(max-width:900px){
  .st-course .pg{grid-template-columns:1fr;gap:var(--st-7)}
  /* THE WAY IN COMES FIRST ON A PHONE. Stacked in source order it landed at
     the very bottom, under everything the course contains and everything it
     pays, so the one control the page exists for was three screens of scrolling
     away. */
  .st-course .rail{position:static;order:-1}
  .st-course .pg > *{min-width:0}
  .st-course .gets{grid-template-columns:1fr}
  .st-course .wrap{padding:var(--st-7) var(--st-4) var(--st-9)}
  .st-course h1{font-size:var(--st-h2)}
  .st-course .facts{gap:var(--st-6)}
  .st-course .ltitle{font-size:var(--st-body)}
}

/* ---- the platform's own settings ----
   Her file writes these as a style on the element. */
.st-plat__lede{margin-bottom:var(--st-5)}
.st-plat__note{margin-top:var(--st-4)}
.st-plat__sws{gap:var(--st-6);margin-bottom:var(--st-5)}
.st-plat__sw{display:flex;align-items:center;gap:var(--st-3)}
.st-plat__sw > span:first-child{width:38px;height:38px;border-radius:var(--st-r);
  box-shadow:inset 0 0 0 1px var(--st-line-2)}
.st-plat__swt b{display:block;font-size:var(--st-body);font-weight:var(--st-w-title)}
.st-plat__swt span{display:block;font-size:var(--st-meta);color:var(--st-ink-3)}
.st-plat__v{font-variant-numeric:tabular-nums;color:var(--st-ink-2)}
/* An empty state inside a card that is not empty: it is one thing on the card
   that is not built, not the whole card. */
.st-empty--flat{background:var(--st-surface-2);border-radius:var(--st-r);padding:var(--st-5)}
.st-ic--danger{background:var(--st-danger-wash);color:var(--st-danger)}

/* .hide LIVES IN THE KIT, BECAUSE EVERY SCREEN HAS A PANEL.

   It was declared in studio.css alone. The learner's screens do not load that
   sheet, so the class that closes a panel did not exist there, and the profile
   menu was open the moment the page arrived. Nothing errored: a class nobody
   has written a rule for is a class that does nothing, quietly, for ever.

   Anything that can be shut has to be shut by something every screen loads. */
.hide{display:none!important}

/* ---- the learner's own menu, in the corner ----
   Their account and their settings are not places, they are things about
   themselves, so they sit under their own name rather than across the top. */
.st-my .mewrap,.st-topbar .mewrap{position:relative}
.st-topbar .me{display:flex;align-items:center;gap:10px;background:none;border:0;
  cursor:pointer;padding:6px 8px;border-radius:var(--st-r-pill);font:inherit;color:inherit}
.st-topbar .me:hover{background:var(--st-surface-2)}
.st-topbar .me__c{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;color:var(--st-ink-4)}
.st-topbar .memenu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:210px;
  background:var(--st-surface);border-radius:var(--st-r);box-shadow:var(--st-sh-2);padding:6px}
.st-topbar .memenu a{display:block;padding:10px 12px;border-radius:var(--st-r-sm);
  font-size:var(--st-body);color:var(--st-ink);text-decoration:none}
.st-topbar .memenu a:hover{background:var(--st-surface-2)}
.st-topbar .me__sep{height:1px;background:var(--st-line);margin:6px 0}
.st-topbar .me__out{color:var(--st-danger)}
@media(max-width:640px){.st-topbar .me__n{display:none}}

/* ---- what else they could start ---- */
.st-my .more{margin-top:var(--st-9)}
.st-my .more__h{display:flex;align-items:baseline;gap:var(--st-3);margin-bottom:var(--st-5);
  flex-wrap:wrap}
.st-my .more__h h2{font-size:var(--st-h3);font-weight:var(--st-w-bold);
  letter-spacing:var(--st-tr-tight)}
.st-my .more__s{font-size:var(--st-meta);color:var(--st-ink-3)}
.st-my .more__h .sp{flex:1}
.st-my .more__all{font-size:var(--st-body);font-weight:var(--st-w-title);
  color:var(--st-accent);text-decoration:none}
.st-my .more__g{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--st-5)}
.st-my .more__c{display:block;background:var(--st-surface);border-radius:var(--st-r-card);
  overflow:hidden;box-shadow:var(--st-sh-1);text-decoration:none;color:inherit;
  transition:transform var(--st-mid) var(--st-e)}
.st-my .more__c:hover{box-shadow:var(--st-sh-2);transform:translateY(-4px)}
.st-my .more__p{display:block;aspect-ratio:16/9;background:var(--st-lav)}
.st-my .more__p img{width:100%;height:100%;object-fit:cover;display:block}
.st-my .more__b{display:block;padding:var(--st-5)}
.st-my .more__b b{display:block;font-size:var(--st-title);font-weight:var(--st-w-title);
  letter-spacing:var(--st-tr-tight);line-height:1.3}
.st-my .more__l{display:block;font-size:var(--st-meta);color:var(--st-ink-3);margin-top:6px;
  line-height:1.5}
.st-my .more__n{display:block;font-size:var(--st-meta);color:var(--st-ink-4);margin-top:10px}
@media(max-width:1000px){.st-my .more__g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.st-my .more__g{grid-template-columns:1fr}}

/* The learner's four figures, above their level. Same tiles the Studio's
   dashboard draws for a manager, drawn for the person themselves. */
.st-my__tiles{margin-bottom:var(--st-5)}
.st-my .st-tile{padding:var(--st-5) var(--st-6)}
.st-my .st-tile__n{font-size:var(--st-num)}
/* With the three figures gone from its right, the level takes the width. */
.st-my .levelpanel--wide{grid-template-columns:auto 1fr}

/* Corners, to the kit's. A card is 20, a control is 12, a tag is a pill. */
.st-my .row,.st-my .card,.st-my .list,.st-my .levelpanel{border-radius:var(--st-r-card)}
.st-my .btn,.st-my .tabs button{border-radius:var(--st-r-pill)}
.st-my .pill{border-radius:var(--st-r-pill)}
.st-my .row__pic{border-radius:var(--st-r) 0 0 var(--st-r)}
.st-my .row__pic img{border-radius:inherit}

/* ==========================================================================
   THE PANEL THAT OPENS ON ADD NEW, WEARING THE KIT.

   Square corners, a 2px black rule under the title, tiles separated by a 2px
   gap of page showing through, a black selected state, square uppercase tags
   and a bare times sign in the corner. Every one of those is v1, and this is
   the first thing an author sees after pressing the loudest button on the
   screen.

   Nothing here moves a control, a word or a step. It is corners, spacing, the
   two shadows, and indigo where indigo means something you can press.
   ========================================================================== */

/* The panel itself, and the dark it sits on. */
.mo{background:rgba(17,24,39,.55);padding:var(--st-6)}
.mo__p{border-radius:var(--st-r-card);box-shadow:var(--st-sh-2);overflow:hidden}

/* The head. A hairline, not a 2px rule: a boundary that means something is
   still a line and not a bar, and a serif heading has no business here. */
.mo__h{border-bottom:1px solid var(--st-line);padding:var(--st-6) var(--st-7) var(--st-5)}
.mo__h h2{font-family:var(--st-font);font-size:var(--st-h2);font-weight:var(--st-w-bold);
  letter-spacing:var(--st-tr-tight)}
.mo__h p{font-size:var(--st-meta);color:var(--st-ink-3);text-transform:none;letter-spacing:0}
.mo__b{padding:var(--st-6) var(--st-7) var(--st-7)}
.mo__sub{letter-spacing:var(--st-tr-label);font-size:var(--st-label);
  font-weight:var(--st-w-title);margin-bottom:var(--st-4)}

/* THE CLOSE, IN THE CORNER WHERE A PERSON LOOKS FOR IT.
   It was at the foot, below everything, which is the one place nobody looks
   to shut a panel. */
/* z-index 6, ABOVE THE HEAD'S 5. The head is sticky so that the title stays
   put while a long panel scrolls under it, and sticky is positioned, so it
   painted straight over the close. The button was in the right place, the
   right size and the right colour, and could not be clicked: the only way out
   of the panel was the dark behind it. Measured with a pointer rather than
   read off the sheet, which is the only way this kind of fault is ever found. */
.mo__x,.dw__x{position:absolute;top:var(--st-5);right:var(--st-5);width:34px;height:34px;
  display:grid;place-items:center;border-radius:var(--st-r-pill);margin-left:0;
  color:var(--st-ink-3);font-size:20px;line-height:1;z-index:6}
.mo__x:hover,.dw__x:hover{background:var(--st-surface-2);color:var(--st-ink)}
.mo__p{position:relative}

/* THE TWO CHOICES. They were separated by a 2px gap of the page showing
   through, and the one you picked went black. A choice you can press is
   indigo, and a card is a card. */
.two{grid-template-columns:1fr 1fr;gap:var(--st-4);margin-bottom:var(--st-6)}
.two button{background:var(--st-surface);border-radius:var(--st-r-card);
  padding:var(--st-5) var(--st-6);box-shadow:inset 0 0 0 1px var(--st-line-2);
  color:var(--st-ink)}

/* HOVER IS THE ACCENT, AND EVERY WORD ON IT GOES WHITE TOGETHER.
   studio.css turns the whole button white on hover and paints the ground with
   the ink. Giving it a pale ground and leaving the words alone left the title
   white on near white: it was there, and it could not be read. Either both
   move or neither does. */
.two button:hover,.two button.on{background:var(--st-accent);color:#fff;box-shadow:none}
.two button:hover b,.two button.on b{color:#fff}
.two button:hover span,.two button.on span{color:rgba(255,255,255,.8)}
.two b{font-size:var(--st-title);font-weight:var(--st-w-title);margin-bottom:6px}

/* The templates. Same again: real cards, real gaps, and a tag that is a tag. */
.tpl{grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--st-4)}
.tc{background:var(--st-surface);border-radius:var(--st-r-card);padding:var(--st-5) var(--st-6);
  box-shadow:var(--st-sh-1);transition:transform var(--st-mid) var(--st-e)}
/* A template card does the same thing, for the same reason: it is a choice. */
.tc:hover{background:var(--st-accent);color:#fff;box-shadow:var(--st-sh-2);
  transform:translateY(-3px)}
.tc:hover b,.tc:hover p,.tc:hover .tc__m{color:#fff}
.tc:hover p,.tc:hover .tc__m{color:rgba(255,255,255,.8)}
.tc:hover .tc__tag{background:rgba(255,255,255,.22);color:#fff}
.tc:hover .tc__go span{background:#fff;color:var(--st-accent)}
.tc:hover .tc__go span:last-child{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.tc b{font-size:var(--st-title);font-weight:var(--st-w-title);margin-bottom:6px}
.tc p{font-size:var(--st-meta);color:var(--st-ink-3);margin-bottom:var(--st-4)}
.tc__m{font-size:var(--st-meta);font-weight:var(--st-w-body);color:var(--st-ink-4);
  letter-spacing:0}
.tc__tag{top:var(--st-4);right:var(--st-4);border-radius:var(--st-r-pill);
  padding:4px 10px;font-size:10px;letter-spacing:var(--st-tr-label);
  background:var(--st-surface-2);color:var(--st-ink-3)}
/* REAL CONTENT is the one that is not a template, so it is the one that is
   told apart. A tint identifies it; it is not better than the others. */
.tc__tag.real{background:var(--st-lav);color:var(--st-lav-ink)}
.tc__go{gap:var(--st-2);padding-top:var(--st-4)}
.tc__go span{border-radius:var(--st-r-pill);padding:8px 12px;font-size:var(--st-meta);
  letter-spacing:0;text-transform:none;font-weight:var(--st-w-title);
  background:var(--st-accent);color:#fff}
.tc__go span:last-child{background:var(--st-surface);color:var(--st-ink);
  box-shadow:inset 0 0 0 1px var(--st-line-2)}

/* The form inside it, and the switches. */
.fg label{letter-spacing:var(--st-tr-label);font-size:var(--st-label);
  font-weight:var(--st-w-title);color:var(--st-ink-3)}
.fg input,.fg select{border-radius:var(--st-r);background:var(--st-surface-2);
  border:1px solid var(--st-line-2);font-size:var(--st-body)}
.fg input:focus,.fg select:focus{border-color:var(--st-accent);background:var(--st-surface)}
.sw{gap:var(--st-2)}
.sw button{border-radius:var(--st-r-pill);background:var(--st-surface-2);
  letter-spacing:0;text-transform:none;font-size:var(--st-meta);color:var(--st-ink-3)}
.sw button.on{background:var(--st-accent);color:#fff}
.dots button{border-radius:var(--st-r-pill)}
.dots button.on::after{border-radius:var(--st-r-pill);border-color:var(--st-accent)}
.mo__f{border-top:1px solid var(--st-line);padding-top:var(--st-5);margin-top:var(--st-6)}

/* A ROW HOVERS QUIETLY, AND ITS ENDS ARE ROUND.

   studio.css fills the whole row with the accent and turns every word in it
   white. That is a selection, not a hover: indigo means something you can
   press, and a row you are merely pointing at is not an action. It also ran
   square from edge to edge of a card whose corners are 20, so the one thing
   moving on the screen was the one thing with no radius on it.

   It is the palest step off the surface now, the words keep their own colours,
   and the first and last cells carry the radius so the shape follows the card
   it sits in. */
.st-tcard tr.row:hover td{background:var(--st-surface-2);color:inherit}
.st-tcard tr.row:hover .nm b,
.st-tcard tr.row:hover .nm span,
.st-tcard tr.row:hover .nm .nm__same,
.st-tcard tr.row:hover .acts button{color:inherit}
.st-tcard tr.row:hover .nm .nm__i{background:var(--st-surface);color:var(--st-ink-3)}
.st-tcard tr.row td:first-child{border-radius:var(--st-r) 0 0 var(--st-r)}
.st-tcard tr.row td:last-child{border-radius:0 var(--st-r) var(--st-r) 0}

/* A course's own cover in the list, where the page icon was. Same box, so a
   course with a picture and one without still line up. */
.nm__i--pic{padding:0;overflow:hidden;border-radius:var(--st-r-sm)}
.nm__i--pic img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- the content list, wearing the kit ----
   Every element here keeps the name assets/studio-list.js knows it by and
   gains the one the kit draws it by, so the filtering, the folders and the
   counts are untouched and only the clothes changed. These few turn the v1
   rules off where the two disagree, because studio.css is loaded first and a
   bare .flt is one class, same as ours. */
.st-filters.flt{display:flex;align-items:center;gap:var(--st-3);flex-wrap:wrap;
  border:0;padding:0;background:none;margin-bottom:var(--st-5)}

/* THE PILL CARRIES THE PADDING, NOT THE INPUT INSIDE IT.
   studio.css pads every input in this row, and .st-search pads itself, so the
   two stacked and the search came out half as tall again as the chips beside
   it and twice as wide as it needed to be. */
.st-search{flex:0 1 300px;padding:9px 16px}
.st-search input{border:0;background:none;outline:0;padding:0;width:100%;
  font:inherit;font-size:var(--st-body);color:var(--st-ink)}

.st-chip.chip{border-radius:var(--st-r-pill)}
.st-chip.chip.on{background:var(--st-accent);color:#fff}

/* THE CARD KEEPS ITS OWN PADDING. Taking the v1 border off took the kit's
   padding with it, and the table ran to both edges of the card: the word NAME
   was cut in half on the left and ACTIONS on the right. Only the border and
   the v1 scroll go; the card is still a card. */
.st-tcard.tw{border:0;overflow:visible;padding:var(--st-5) var(--st-6) var(--st-2)}
.st-tcard .st-scroll{overflow-x:auto}

/* ---- the Dashboard and Reports ----
   Her file writes these as a style on the element, because a single file that
   opens in a browser on its own is easier to read that way. A renderer cannot,
   so each of her values becomes a name here at exactly the value she wrote. */
.st-boards__tiles{margin-bottom:var(--st-5)}
.st-boards__two{grid-template-columns:1.6fr 1fr}
.st-boards__chart{margin-top:var(--st-6)}
.st-boards__chart h3{margin-bottom:var(--st-3)}
.st-boards__lede{margin-bottom:var(--st-4)}
.st-boards__num{margin:var(--st-2) 0 var(--st-5)}
.st-boards__num2{margin:var(--st-2) 0 var(--st-3)}
.st-boards__filters{margin-bottom:var(--st-5)}

/* Her file writes these three spacings on the element. */
.st-board__tiles{margin-bottom:18px}
.st-board__two{margin-bottom:18px}
.st-board .dl b{margin-left:auto;font-weight:var(--st-w-bold)}
.st-board .dl div{display:flex;align-items:center;gap:8px}

/* Her narrow layouts, written here because the lift drops her media queries.
   Same breakpoints, same columns. */
@media(max-width:1200px){
  .st-board .g4{grid-template-columns:repeat(2,1fr)}
  .st-board .g2,.st-board .g2b{grid-template-columns:1fr}
}
@media(max-width:760px){
  .st-board .g4{grid-template-columns:1fr}
}

/* THE PERIOD IS AN ADDRESS, so the segmented control is links and her rules
   name buttons. Same look, given the element we use, because a view a manager
   is looking at should survive a refresh and print as what is on screen. */
.st-seg a{display:inline-flex;align-items:center;justify-content:center;
  padding:8px 16px;border-radius:var(--st-r-pill);font-size:var(--st-meta);
  font-weight:var(--st-w-title);color:var(--st-ink-3);text-decoration:none;white-space:nowrap}
.st-seg a[aria-pressed=true]{background:var(--st-accent);color:#fff}

/* A control that cannot be used says why on hover rather than being left out.
   Rule 2, and there are three of them on this screen. */
.st-chip[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.st-boards__pc{font-size:var(--st-body-lg);color:var(--st-ink-4)}
@media(max-width:1100px){.st-boards__two{grid-template-columns:1fr}}

/* The folder chips above it, which are the same control in a different row. */
.shelf{border-radius:var(--st-r-pill)}
.shelf.on{background:var(--st-accent);color:#fff}
.shelf--new{border-radius:var(--st-r-pill)}

/* A MENU ITEM THAT HAS NO NUMBER BECAUSE THERE IS NOTHING TO COUNT.
   Never a bare number beside a name that opens nothing: People said 1 for
   weeks and there was no People to open. So where the count would be, it says
   what is actually true, and it says it again on hover. It is not the danger
   colour: not built yet is not a failure, and crimson means one thing. */
.st-nav__soon{font-size:10px;font-weight:var(--st-w-title);letter-spacing:var(--st-tr-label);
  text-transform:uppercase;color:var(--st-ink-4);background:var(--st-surface-2);
  padding:2px 6px;border-radius:var(--st-r-sm);font-style:normal}

/* INDIGO MEANS ONE THING: SOMETHING YOU CAN PRESS.

   In the live Studio it was the switcher background, the PUBLISHED badge and
   the primary button, so it meant three things and therefore none. The rule
   table at the foot of studio-shell-v1.html names that as a fault to fix.

   A status is a quiet tag. All three of them: Published, Draft and Given out
   are not better or worse than each other, they are three different facts, and
   the word is what tells them apart. The moment one of them is coloured, a
   reader starts looking for what the colour means, and there is nothing there
   to find. The only colour that carries a verdict on this product is crimson,
   and none of these is a failure. */
.pill--pub,.pill--draft,.pill--asg{background:var(--st-surface-2);color:var(--st-ink-3);
  font-weight:var(--st-w-title);letter-spacing:var(--st-tr-label);
  border-radius:var(--st-r-pill);padding:4px 9px}

/* ==========================================================================
   THE PAGES STILL DRAWN TO v1, WEARING THE KIT.

   The academy, About and Contact have no kit v2 contract yet, and INDEX.md is
   explicit about what to do until they get one: a v1 file is not wrong about
   what a control does, only about how it looks, and where the two disagree on
   look, 00-THE-KIT.md v2 wins. So nothing here moves a control, changes a word
   or touches a layout. It is corners, shadow and the one colour rule.

   Every value is a kit token. Nothing below invents a number.
   ========================================================================== */

/* FREE IS A FACT, NOT A BUTTON. Same rule as the Studio and the same fault:
   indigo means something you can press, and it was on the price badge, so on
   the academy blue meant a button and a price at the same time. A price is a
   quiet tag. Coming soon and a paid price already are. */
.st-site .badge--free{background:var(--st-surface-2);color:var(--st-ink-3)}

/* Corners. 20 for a card, 12 for a control, 8 for a small mark, 999 for a
   pill. The old kit was square everywhere and that is the single most visible
   thing between a v1 page and a v2 one. */
.st-site .card,.st-site .group,.st-site .pnl,.st-site .path,.st-site .step{border-radius:var(--st-r-card)}
.st-site .thumb,.st-site .shot{border-radius:var(--st-r-card) var(--st-r-card) 0 0}
.st-site .btn,.st-site .fld,.st-site input,.st-site textarea,.st-site select{border-radius:var(--st-r-pill)}
.st-site textarea{border-radius:var(--st-r)}
.st-site .badge,.st-site .chip,.st-site .gcount{border-radius:var(--st-r-pill)}

/* Shadow. There are exactly two and a card gets the first, lifting to the
   second under a pointer. A card on a tinted ground with no shadow and no
   border is not a card, it is a patch of white. */
.st-site .card{box-shadow:var(--st-sh-1)}
.st-site .card:hover{box-shadow:var(--st-sh-2)}

/* The crumb above a course name, which is the one screen whose bar is not
   just a title. Her shell has no crumb because her shell never opens one. */
.st-top .crumb{font-size:var(--st-meta);color:var(--st-ink-3);margin-bottom:3px}
.st-top .crumb b{color:var(--st-ink-2);font-weight:var(--st-w-title);cursor:pointer}
.st-top .crumb b:hover{color:var(--st-ink)}

/* THE LOGO IS A PICTURE, NOT A MARK AND A WORD.
   Her file draws a small rounded square and sets SkillTeam beside it in the
   page face. Ours is the real file, one picture with the word already in it,
   and the rule that never changes is that it is never redrawn. So .st-logo
   holds a picture here and the box it sits in is given the height her mark
   had. */
.st-logo .lg{display:inline-flex;align-items:center}
.st-logo img,.st-logo svg{height:26px;width:auto;display:block}
.st-ftr .st-logo{margin-bottom:var(--st-4)}

/* HER LANGUAGE TOGGLE IS TWO BUTTONS AND OURS IS TWO LINKS.
   It is an address so that it works with no script running at all and so that
   moving it leaves a person on the page they were reading. Her rules name the
   element, so they are given the element we use. */
.st-lang a{display:grid;place-items:center;padding:0 13px;height:28px;
  border-radius:var(--st-r-pill);font-size:var(--st-meta);
  font-weight:var(--st-w-title);color:var(--st-ink-3);text-decoration:none}
.st-lang a[aria-pressed=true]{background:var(--st-surface);color:var(--st-ink);
  box-shadow:var(--st-sh-1)}

/* WHERE SHE USES A BUTTON AND WE USE A LINK.
   A marketing page is read by people who share it, open it in a new tab and
   middle click it, so what carries an address here is an <a href>. Her rules
   for those controls name .st-btn and .st-logo, which a link wears perfectly
   well except for the one thing a browser gives a link and not a button. */
a.st-btn,a.st-logo,.st-links a,.st-ftr a,.st-arrow{text-decoration:none}
/* One class each, so every one of them is the same weight and the last one
   written wins in the order they are written. a.st-btn on its own is two parts
   and beat all three modifiers: the button on the accent band came out white
   on white, which is a control nobody can read and nothing said so. */
a.st-btn:not([class*="--"]){color:#fff}
a.st-btn--ghost{color:var(--st-ink)}
a.st-btn--onaccent{background:#fff;color:var(--st-accent);box-shadow:none}
a.st-btn--onaccent-g{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}

/* The phone menu. The panel and the burger are v1's ids because assets/site.js
   opens them by name, and the look is the kit's. Below 640 the links come off
   the header, so without this the site cannot be navigated on a phone at all. */
.st-hdr .st-burger{display:none;width:38px;height:38px;border-radius:var(--st-r);
  align-items:center;justify-content:center;background:none;border:0;cursor:pointer;
  color:var(--st-ink)}
.st-hdr .st-burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round}
@media(max-width:640px){.st-hdr .st-burger{display:inline-flex}}
.sheet{position:fixed;inset:0;z-index:60;background:var(--st-canvas);padding:var(--st-8) var(--st-5);
  opacity:0;visibility:hidden;transition:opacity var(--st-mid) var(--st-e)}
.sheet.on{opacity:1;visibility:visible}
.sheet a,.sheet .st-notyet{display:block;padding:var(--st-4) 0;font-size:var(--st-h3);
  font-weight:var(--st-w-title);color:var(--st-ink);text-decoration:none;
  border-bottom:1px solid var(--st-line)}
.sheet .st-notyet{color:var(--st-ink-4)}
.sheet .acts{display:flex;gap:var(--st-3);margin-top:var(--st-6)}
.sheet .acts .st-btn{flex:1}
.sheet__lang{margin-top:var(--st-5)}
/* BELOW 640 THE HEADER IS THE LOGO, ONE BUTTON AND THE BURGER, and everything
   else is inside the panel. Her file hides the links and Sign in at this width
   and stops there, because her file has no phone panel to move them into. With
   a burger added, the logo, the language, My learning and the burger came to
   468px on a 400px screen and the whole page scrolled sideways. */
@media(max-width:640px){
  .st-hdr .st-lang{display:none}
  .st-hdr__in{gap:var(--st-3)}
}

/* ==========================================================================
   THE SHARED HEADER AND FOOTER ON A PAGE STILL DRAWN TO v1.

   The header and the footer are kit v2 on every page of the site. The bodies
   under them move one screen at a time, and the ones that have not moved yet
   load site.css, where every selector is scoped ".st-site something" so as to
   beat the names kit.css also uses without being loaded after it.

   That scoping is two parts. A kit component is one. So on the academy, About
   and Contact, site.css quietly won: Sign in and My learning came out as
   underlined eighteen pixel text instead of buttons, and nothing said so.

   These give the two components their weight back, and nothing else: same
   selectors, one class deeper, so they match site.css and kit.css loads last.
   The values are the kit's own and are written twice, which is a thing that
   goes stale, so tests/test_site.php compares the header and the footer on the
   home page and on the academy property by property and fails when they drift.
   The day the last v1 body is redrawn, this block and that check both go.
   ========================================================================== */
.st-site .st-hdr,.st-site .st-ftr{font-size:var(--st-body);font-weight:var(--st-w-body)}
.st-site .st-hdr .st-btn,.st-site .st-ftr .st-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--st-2);
  padding:11px 18px;border-radius:var(--st-r-pill);font-size:var(--st-body);
  font-weight:var(--st-w-title);white-space:nowrap;
  background:var(--st-accent);color:#fff;box-shadow:var(--st-sh-accent)}
.st-site .st-hdr .st-btn--ghost{background:var(--st-surface);color:var(--st-ink);
  box-shadow:inset 0 0 0 1px var(--st-line-2),0 1px 2px rgba(17,24,39,.04)}
.st-site .st-hdr .st-btn--sm,.st-site .st-ftr .st-btn--sm{
  padding:8px 14px;font-size:var(--st-meta)}
.st-site .st-hdr a,.st-site .st-ftr a,.st-site .st-lang a{text-decoration:none}
.st-site .st-links a{font-size:var(--st-body);font-weight:var(--st-w-title)}
.st-site .st-lang a{font-size:var(--st-meta);font-weight:var(--st-w-title)}
.st-site .st-ftr a{font-size:var(--st-body);font-weight:var(--st-w-body)}
.st-site .st-ftr h4{font-size:var(--st-label);font-weight:var(--st-w-title)}
.st-site .st-ftr p{font-size:var(--st-meta)}
/* ==== end of the lifted marketing block ==== */
/* ==== THE DASHBOARD, lifted from handover/design/app/studio-app-feel.html ==== */
.st-board{
  
  --font:'Plus Jakarta Sans','Manrope','Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  --wH:700;            
  --wB:500;            
  --trH:-.01em;        
  --trL:.01em;         
  --rdC:20px;          
  --rdI:12px;          
  --rdP:999px;         
  --canvas:#F2F4FB;    
  --tint:1;            
  --sh:0 1px 2px rgba(17,24,39,.04), 0 6px 18px -6px rgba(17,24,39,.10);
  --shC:0 1px 2px rgba(17,24,39,.05), 0 12px 28px -10px rgba(17,24,39,.16);

  
  --br:#4F46E5; --br2:#4338CA; --br3:#6366F1; --brS:#EEEEFE; --brS2:#E0E0FC;
  
  --p1:#EEEDFE; --p1i:#5B54E8;   
  --p2:#E6F1FE; --p2i:#2A7FD4;   
  --p3:#FEF3DF; --p3i:#B57A16;   
  --p4:#FDECEF; --p4i:#C43C58;   
  --p5:#E7F6F1; --p5i:#1C8A6B;   

  --ink:#111827; --ink2:#4B5563; --ink3:#6B7280; --ink4:#9CA3AF; --ink5:#D1D5DB;
  --card:#FFFFFF; --line:#EEF0F4; --line2:#E3E7EE;
  --e:cubic-bezier(.16,1,.3,1);
}


.st-board,.st-board *{box-sizing:border-box}

.st-board{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:14px;
  font-weight:var(--wB);-webkit-font-smoothing:antialiased;transition:none}

.st-board button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}

.st-board input{font:inherit}

.st-board :focus-visible{outline:2px solid var(--br);outline-offset:3px}

.st-board h1,.st-board h2,.st-board h3{margin:0;font-weight:var(--wH);letter-spacing:var(--trH)}

.st-board .lab{font-size:11px;font-weight:600;letter-spacing:var(--trL);color:var(--ink3);text-transform:uppercase}



.st-board .bar{background:#0F1117;color:#fff;padding:12px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:12.5px}

.st-board .bar b{font-weight:700}

.st-board .bar em{font-style:normal;color:#8B93A7}

.st-board .bar .g{display:inline-flex;align-items:center;gap:6px;background:#1B1F2A;border-radius:999px;padding:3px}

.st-board .bar .g button{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;color:#A5ADC0;
  transition:.22s var(--e)}

.st-board .bar .g button:hover{color:#fff}

.st-board .bar .g button.on{background:#fff;color:#0F1117}

.st-board .bar .sw{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font-weight:600}

.st-board .bar .tog{width:52px;height:28px;border-radius:999px;background:#1B1F2A;position:relative;flex:none;
  transition:none}

.st-board .bar .tog i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  transition:transform .35s var(--e)}



.st-board .app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}

.st-board .side{padding:20px 14px;display:flex;flex-direction:column;gap:4px;background:var(--card);
  border-right:1px solid var(--line);transition:none}

.st-board .logo{display:flex;align-items:center;gap:11px;padding:6px 10px 22px}

.st-board .logo .m{width:36px;height:36px;border-radius:var(--rdI);flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--br3),var(--br2));color:#fff;font-weight:700;font-size:15px;
  box-shadow:0 6px 16px -6px var(--br)}

.st-board .logo b{font-size:15.5px;font-weight:700;letter-spacing:-.015em}

.st-board .logo span{display:block;font-size:11px;color:var(--ink4);font-weight:500;margin-top:1px}

.st-board .nav{display:flex;flex-direction:column;gap:3px;margin-top:4px}

.st-board .nav button{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:var(--rdI);
  color:var(--ink2);font-size:14px;font-weight:500;transition:.22s var(--e)}

.st-board .nav button:hover{background:var(--brS)}

.st-board .nav button.on{background:var(--br);color:#fff;box-shadow:0 8px 20px -8px var(--br)}

.st-board .nav .ic{width:20px;height:20px;flex:none}

.st-board .nav svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.st-board .nav em{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;background:var(--brS);
  color:var(--br2);padding:2px 8px;border-radius:999px}

.st-board .nav button.on em{background:rgba(255,255,255,.24);color:#fff}

.st-board .side .promo{margin-top:auto;background:linear-gradient(150deg,var(--br3),var(--br2));border-radius:var(--rdC);
  padding:20px 18px;color:#fff;position:relative;overflow:hidden}

.st-board .side .promo::after{content:"";position:absolute;right:-30px;bottom:-40px;width:120px;height:120px;
  border-radius:50%;background:rgba(255,255,255,.13)}

.st-board .side .promo b{display:block;font-size:15px;font-weight:700;letter-spacing:-.015em;line-height:1.3}

.st-board .side .promo p{margin:8px 0 14px;font-size:12.5px;line-height:1.5;opacity:.8}

.st-board .side .promo button{background:#fff;color:var(--br2);padding:9px 16px;border-radius:999px;font-size:12.5px;
  font-weight:700;position:relative;z-index:2}


.st-board .main{padding:22px 26px 70px;min-width:0}

.st-board .top{display:flex;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}

.st-board .search{flex:1;max-width:380px;display:flex;align-items:center;gap:10px;background:var(--card);
  border-radius:var(--rdP);padding:11px 18px;box-shadow:var(--sh);color:var(--ink4)}

.st-board .search input{flex:1;border:0;outline:0;background:none;font-size:13.5px;color:var(--ink)}

.st-board .search input::placeholder{color:var(--ink4)}

.st-board .ib{width:40px;height:40px;border-radius:var(--rdI);background:var(--card);box-shadow:var(--sh);
  display:grid;place-items:center;color:var(--ink2);position:relative;transition:.22s var(--e)}

.st-board .ib:hover{color:var(--br)}

.st-board .ib svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.st-board .ib .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--p4i);
  border:2px solid var(--card)}

.st-board .me{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:var(--rdP);padding:5px 14px 5px 5px;
  box-shadow:var(--sh)}

.st-board .me .av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;
  font-size:12px;font-weight:700;background:linear-gradient(140deg,var(--br3),var(--br2))}

.st-board .me b{display:block;font-size:13px;font-weight:600;line-height:1.2}

.st-board .me span{display:block;font-size:11px;color:var(--ink4);margin-top:1px}


.st-board .hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:20px}

.st-board .hero h1{font-size:24px}

.st-board .hero p{margin:6px 0 0;font-size:13.5px;color:var(--ink3)}

.st-board .seg{display:inline-flex;background:var(--card);border-radius:var(--rdP);padding:4px;box-shadow:var(--sh)}

.st-board .seg button{padding:0 15px;height:32px;border-radius:var(--rdP);font-size:12.5px;font-weight:600;
  color:var(--ink3);transition:.22s var(--e)}

.st-board .seg button.on{background:var(--br);color:#fff}

.st-board .btn{background:var(--br);color:#fff;padding:11px 18px;border-radius:var(--rdP);font-size:13.5px;
  font-weight:600;box-shadow:0 8px 20px -8px var(--br);transition:.22s var(--e);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap}

.st-board .btn:hover{background:var(--br2);transform:translateY(-1px)}

.st-board .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}



.st-board .grid{display:grid;gap:18px}

.st-board .g4{grid-template-columns:repeat(4,1fr)}

.st-board .g2{grid-template-columns:1.6fr 1fr;align-items:start}

.st-board .g2b{grid-template-columns:1.35fr 1fr;align-items:start}

.st-board .card{background:var(--card);border-radius:var(--rdC);box-shadow:var(--sh);padding:22px}

.st-board .card__h{display:flex;align-items:center;gap:12px;margin-bottom:18px}

.st-board .card__h h2{font-size:15.5px}

.st-board .card__h .sp{flex:1}



.st-board .tile{border-radius:var(--rdC);padding:20px;box-shadow:var(--sh);position:relative;overflow:hidden;
  transition:transform .3s var(--e)}

.st-board .tile:hover{transform:translateY(-3px);box-shadow:var(--shC)}

.st-board .tile .ic{width:42px;height:42px;border-radius:var(--rdI);display:grid;place-items:center;margin-bottom:16px}

.st-board .tile .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round}

.st-board .tile .n{font-size:28px;font-weight:var(--wH);letter-spacing:var(--trH);line-height:1;
  font-variant-numeric:tabular-nums}

.st-board .tile .t{font-size:13px;color:var(--ink3);margin-top:7px;font-weight:500}

.st-board .tile .d{position:absolute;top:20px;right:20px;display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.72)}

.st-board .tile .d svg{width:11px;height:11px;fill:currentColor}

.st-board .tile .spk{position:absolute;right:0;bottom:0;width:110px;height:46px;opacity:.5}



.st-board .plot{position:relative}

.st-board .plot svg{display:block;width:100%;height:auto;overflow:visible}

.st-board .tip{position:absolute;transform:translate(-50%,-100%);background:var(--ink);color:#fff;font-size:11.5px;
  font-weight:600;padding:7px 11px;border-radius:10px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .2s var(--e);z-index:9}

.st-board .xax{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink4);margin-top:12px;font-weight:500}

.st-board .leg{display:flex;gap:18px;flex-wrap:wrap}

.st-board .leg div{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2);font-weight:500}

.st-board .leg i{width:9px;height:9px;border-radius:3px;flex:none}


.st-board .donut{display:flex;flex-direction:column;align-items:center;gap:18px}

.st-board .donut svg{width:170px;height:170px}

.st-board .donut .mid b{font-size:26px;font-weight:var(--wH);letter-spacing:var(--trH);fill:var(--ink)}

.st-board .dl{width:100%;display:flex;flex-direction:column;gap:10px}

.st-board .dl div{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2);font-weight:500}

.st-board .dl i{width:10px;height:10px;border-radius:3px;flex:none}

.st-board .dl b{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}



.st-board .rows{display:flex;flex-direction:column;gap:10px}

.st-board .rw{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:var(--rdI);
  transition:none}

.st-board .rw:hover{background:var(--brS)}

.st-board .rw .ic{width:40px;height:40px;border-radius:var(--rdI);flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:700}

.st-board .rw .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.st-board .rw .t{flex:1;min-width:0}

.st-board .rw .t b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.005em}

.st-board .rw .t span{display:block;font-size:12px;color:var(--ink4);margin-top:3px;font-weight:500}

.st-board .rw .rt{font-size:12px;color:var(--ink4);white-space:nowrap;font-weight:500}

.st-board .pill{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;font-size:11.5px;
  font-weight:600;white-space:nowrap}



.st-board table{width:100%;border-collapse:collapse}

.st-board th{text-align:left;font-size:11.5px;font-weight:600;color:var(--ink4);padding:0 16px 14px 0;
  letter-spacing:var(--trL);text-transform:uppercase}

.st-board td{padding:14px 16px 14px 0;border-top:1px solid var(--line);font-size:13.5px;vertical-align:middle}

.st-board tbody tr{transition:none}

.st-board .per{display:flex;align-items:center;gap:12px}

.st-board .per .av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;
  font-size:13px;font-weight:700}

.st-board .per b{display:block;font-size:13.5px;font-weight:600}

.st-board .per span{display:block;font-size:12px;color:var(--ink4);margin-top:2px;font-weight:500}

.st-board .mini{height:7px;border-radius:999px;background:var(--line2);width:110px;overflow:hidden;display:block}

.st-board .mini i{display:block;height:100%;border-radius:999px;background:var(--br);width:0;transition:none}

.st-board .lnk{font-size:12.5px;font-weight:600;color:var(--br);padding:7px 12px;border-radius:999px;transition:.2s var(--e)}

.st-board .lnk:hover{background:var(--brS)}



.st-board .why{background:var(--card);border-radius:var(--rdC);box-shadow:var(--sh);padding:20px 22px;margin-bottom:20px}

.st-board .why h2{font-size:15.5px;margin-bottom:4px}

.st-board .why p{margin:0 0 16px;font-size:13px;color:var(--ink3);max-width:78ch;line-height:1.55}

.st-board .six{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

.st-board .six div{background:var(--brS);border-radius:var(--rdI);padding:13px 15px}

.st-board .six b{display:block;font-size:12.5px;font-weight:700;margin-bottom:4px}

.st-board .six span{display:block;font-size:12px;color:var(--ink3);line-height:1.5}


.st-board .tt{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(14px);background:var(--ink);
  color:#fff;padding:13px 20px;font-size:13px;font-weight:500;border-radius:999px;opacity:0;pointer-events:none;
  transition:.3s var(--e);z-index:99;max-width:76vw;box-shadow:var(--shC)}

.st-board .tt.on{opacity:1;transform:translateX(-50%)}
/* ==== end of the lifted dashboard ==== */