/* ============================================================
   Cine Artistlabs LMS — /learn shell + catalog
   Sidebar + dense grid. Ported from the LMS wireframe (screen 01A).

   Layout contract:
     .learn-app            flex row  · owns the chrome theme (data-ui)
       .learn-sidebar      sticky 240px rail
       .learn-shell        flex column
         .learn-utility    sticky 56px  · search / alerts / you
         .learn-main       scroll body  · billboard, rails, dense grid

   The sidebar brand block and the utility bar share one 56px rail so
   their bottom rules line up across the fold.
   ============================================================ */

/* learn.css only ships on LearnLayout pages, so these resets are safe here
   and keep the sticky rails measuring against the real viewport. */
body { margin: 0; }
.learn-app *,
.learn-app *::before,
.learn-app *::after { box-sizing: border-box; }

.learn-app {
  display: flex;
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--text-primary);
  font-size: 14px;

  /* Chrome surfaces — remapped wholesale by [data-ui="light"] below. */
  --app-bg: var(--charcoal-deepest);
  --app-surface: var(--charcoal-main);
  --app-raised: var(--charcoal-surface);
  --app-border: var(--border-on-dark);
  --app-border-strong: var(--border-on-dark-strong);
  --app-hover: rgba(240, 234, 219, 0.05);
  --app-accent: var(--accent-orange);
  --rail-w: 240px;
  --gutter: clamp(16px, 2.6vw, 36px);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.learn-sidebar {
  width: var(--rail-w);
  flex: none;
  background: var(--app-surface);
  border-right: 1px solid var(--app-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 10px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.learn-sidebar::-webkit-scrollbar { width: 6px; }
.learn-sidebar::-webkit-scrollbar-thumb { background: var(--app-border); border-radius: 3px; }

/* Brand block — 56px to match the utility bar opposite it. */
.learn-sidebar__brand {
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  margin: 0 -10px 2px;
  padding-inline: 16px;
  border-bottom: 1px solid var(--app-border);
  position: sticky;
  top: 0;
  background: var(--app-surface);
  z-index: 2;
}
.learn-sidebar__brand a { display: inline-flex; align-items: center; }
.learn-sidebar__brand img { height: 26px; display: block; }
.learn-sidebar__brand .logo--light { display: none; }

/* Workspace switcher */
.learn-sidebar__workspace {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 4px 0 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: var(--app-raised);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-confident),
              background var(--dur-micro) var(--ease-confident);
}
.learn-sidebar__workspace:hover { border-color: var(--app-border-strong); }
.learn-sidebar__workspace-icon { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; flex: none; }
.learn-sidebar__workspace-name { flex: 1; text-align: left; }
.learn-sidebar__workspace-chevron { color: var(--text-muted); flex: none; }

.learn-sidebar__group { display: flex; flex-direction: column; gap: 1px; }
.learn-sidebar__group--push { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--app-border); }
.learn-sidebar__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 10px 4px;
}

/* Nav row — bare line icon, roomy hit area, no filled pill. */
.learn-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--text-body);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-confident),
              background var(--dur-micro) var(--ease-confident);
}
.learn-nav-item:hover { color: var(--text-primary); background: var(--app-hover); }
.learn-nav-item__ico {
  width: 18px;
  height: 18px;
  flex: none;
  color: currentColor;
  opacity: 0.85;
}
.learn-nav-item__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.learn-nav-item[aria-current="page"] {
  color: var(--text-primary);
  background: var(--app-hover);
}
.learn-nav-item[aria-current="page"] .learn-nav-item__ico { opacity: 1; }
.learn-nav-item__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-orange);
  flex: none;
}
.learn-nav-item__count {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  flex: none;
}
.learn-nav-item__tone {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex: none;
  margin-left: 5px;
}

/* The signed-in identity block lives with the auth styles further down —
   it is shared with the login/signup screens. */

/* ============================================================
   SHELL + UTILITY BAR
   ============================================================ */
.learn-shell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--app-bg);
}

.learn-utility {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-bg) 82%, transparent);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
}
.learn-utility__search {
  flex: 1;
  max-width: 420px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 6px 0 12px;
  border-radius: 100px;
  background: var(--app-raised);
  border: 1px solid var(--app-border);
  color: var(--text-muted);
  transition: border-color var(--dur-micro) var(--ease-confident);
}
.learn-utility__search:focus-within { border-color: var(--app-border-strong); }
.learn-utility__search svg { flex: none; }
.learn-utility__search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-primary);
}
.learn-utility__search input::placeholder { color: var(--text-muted); }
.learn-utility__kbd {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border: 1px solid var(--app-border);
  border-radius: 100px;
  padding: 3px 8px;
}
.learn-utility__spacer { flex: 1; }
.learn-utility__btn {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--app-border);
  background: var(--app-raised);
  color: var(--text-body);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-confident),
              border-color var(--dur-micro) var(--ease-confident);
}
.learn-utility__btn:hover { color: var(--text-primary); border-color: var(--app-border-strong); }
.learn-utility__dot {
  position: absolute;
  top: 1px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-rust);
  border: 1.5px solid var(--app-bg);
}
.learn-utility__me {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 3px 14px 3px 3px;
  border-radius: 100px;
  background: var(--app-raised);
  border: 1px solid var(--app-border);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-confident);
}
.learn-utility__me:hover { border-color: var(--app-border-strong); }
/* Avatar-only chip — a rounded square, matching the studio header face. */
.learn-utility__me { padding: 3px; }
.learn-utility__avatar,
.learn-utility__fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--app-border-strong);
  background:
    radial-gradient(circle at 30% 20%, rgba(232,154,74,0.30), transparent 65%),
    var(--app-raised);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
.learn-utility__avatar[hidden] { display: none; }
/* When a real photo is showing, the initials underneath are redundant. */
.learn-utility__me:has(.learn-utility__avatar:not([hidden])) .learn-utility__fallback { display: none; }

/* ============================================================
   MAIN
   ============================================================ */
.learn-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 96px;
}

/* ---------- Billboard (Netflix-style hero) ---------- */
.billboard {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: clamp(460px, 62vh, 660px);
  display: flex;
  align-items: flex-end;
  padding: clamp(32px, 4vw, 56px);
  isolation: isolate;
  margin: 24px var(--gutter) 8px;
  color: var(--text-primary);
}
.billboard__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Background reel — a Cloudflare Stream iframe sized to cover a frame that
   is neither 16:9 nor a fixed size, plus the dev-mode poster fallback. */
.billboard__reel {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.92;
  filter: saturate(0.95) contrast(1.02);
}
.billboard__reel iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.billboard__reel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.billboard[data-has-image="true"] .billboard__art {
  background:
    linear-gradient(90deg, rgba(15,14,12,0.95) 0%, rgba(15,14,12,0.7) 30%, rgba(15,14,12,0.3) 55%, rgba(15,14,12,0.05) 80%, rgba(15,14,12,0) 100%),
    linear-gradient(180deg, rgba(15,14,12,0) 55%, rgba(15,14,12,0.85) 100%) !important;
}
.billboard__art {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(15,14,12,0.95) 0%, rgba(15,14,12,0.55) 45%, rgba(15,14,12,0.1) 75%, rgba(15,14,12,0) 100%),
    linear-gradient(180deg, rgba(15,14,12,0) 50%, rgba(15,14,12,0.85) 100%),
    linear-gradient(135deg, var(--accent-rust) 0%, #1F1D19 70%, #0F0E0C 100%);
}
.billboard[data-tone="orange"] .billboard__art { background: linear-gradient(90deg, rgba(15,14,12,0.95) 0%, rgba(15,14,12,0.55) 45%, rgba(15,14,12,0.1) 75%, rgba(15,14,12,0) 100%), linear-gradient(180deg, rgba(15,14,12,0) 50%, rgba(15,14,12,0.85) 100%), linear-gradient(135deg, #C46B22 0%, #1F1D19 70%, #0F0E0C 100%); }
.billboard[data-tone="teal"]   .billboard__art { background: linear-gradient(90deg, rgba(15,14,12,0.95) 0%, rgba(15,14,12,0.55) 45%, rgba(15,14,12,0.1) 75%, rgba(15,14,12,0) 100%), linear-gradient(180deg, rgba(15,14,12,0) 50%, rgba(15,14,12,0.85) 100%), linear-gradient(135deg, #4A8F87 0%, #1F3D3A 70%, #0F0E0C 100%); }
.billboard[data-tone="blue"]   .billboard__art { background: linear-gradient(90deg, rgba(15,14,12,0.95) 0%, rgba(15,14,12,0.55) 45%, rgba(15,14,12,0.1) 75%, rgba(15,14,12,0) 100%), linear-gradient(180deg, rgba(15,14,12,0) 50%, rgba(15,14,12,0.85) 100%), linear-gradient(135deg, #2F6480 0%, #15303F 70%, #0F0E0C 100%); }
.billboard__art::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 75% 30%, rgba(232,154,74,0.20), transparent 45%),
    radial-gradient(circle at 25% 80%, rgba(184,92,40,0.15), transparent 50%);
}
.billboard__inner {
  position: relative;
  z-index: 2;
  max-width: min(560px, 60%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}
.billboard__inner > * { margin: 0; }
/* Strip sits above the label rather than beside it — stacked, the six bars
   read as a mark introducing the course instead of a bullet before the text. */
.billboard__series {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.billboard__series-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  height: 4px;
  width: 64px;
  flex: none;
}
.billboard__series-bars > span:nth-child(1) { background: var(--accent-orange); }
.billboard__series-bars > span:nth-child(2) { background: #D47A3A; }
.billboard__series-bars > span:nth-child(3) { background: var(--accent-rust); }
.billboard__series-bars > span:nth-child(4) { background: var(--accent-teal); }
.billboard__series-bars > span:nth-child(5) { background: #4A8F87; }
.billboard__series-bars > span:nth-child(6) { background: var(--accent-blue); }
.billboard__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-orange);
}
.billboard__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 4.6vw, 60px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: #F0EADB;
  text-wrap: balance;
}
.billboard__sub {
  font-size: 15px;
  color: #C4BDAF;
  max-width: 480px;
  line-height: 1.5;
}

/* Instructor line — portrait + role tag + name */
.billboard__coach { display: flex; align-items: center; gap: 10px; }
.billboard__coach img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 1.5px solid rgba(240,234,219,0.3);
}
.billboard__coach-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  color: #F0EADB;
}
.billboard__rating {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(240,234,219,0.3);
  padding: 3px 8px;
  border-radius: 100px;
  color: #C4BDAF;
  white-space: nowrap;
  flex: none;
}
.billboard__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C4BDAF;
  flex-wrap: wrap;
}
/* Inline "33% watched" progress readout */
.billboard__watch { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-orange); }
.billboard__watch-bar {
  width: 72px;
  height: 3px;
  border-radius: 2px;
  background: rgba(240,234,219,0.25);
  overflow: hidden;
}
.billboard__watch-bar > i { display: block; height: 100%; background: var(--accent-orange); }
.billboard__cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   FILTER BAR — sticky under the utility rail
   ============================================================ */
.learn-filters {
  position: sticky;
  top: 56px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--app-bg) 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-confident);
}
.learn-filters[data-stuck="true"] { border-bottom-color: var(--app-border); }
.learn-filters__scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
  min-width: 0;
}
.learn-filters__scroll::-webkit-scrollbar { display: none; }

/* ---------- Pills ---------- */
.learn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--app-border-strong);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-confident),
              border-color var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident);
}
.learn-pill:hover { color: var(--text-primary); border-color: var(--text-primary); }
.learn-pill--solid,
.learn-pill[aria-pressed="true"] {
  background: var(--bone-white);
  color: #14130F;
  border-color: var(--bone-white);
}
.learn-pill--solid:hover,
.learn-pill[aria-pressed="true"]:hover { opacity: 0.9; color: #14130F; }
.learn-pill--accent { border-color: var(--accent-orange); color: var(--accent-orange); }
.learn-pill--accent:hover { background: var(--accent-orange); color: #14130F; border-color: var(--accent-orange); }

/* ============================================================
   CATALOG RAILS (horizontal rows)
   ============================================================ */
.catalog-row { padding: 20px 0 4px; }
.catalog-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--gutter);
  margin-bottom: 12px;
}
.catalog-row__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
}
.catalog-row__more {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-confident);
}
.catalog-row__more:hover { color: var(--accent-orange); }

/* The rail itself + its hover-in arrows. */
.catalog-row__viewport { position: relative; }
.catalog-row__rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Room for the poster hover-lift so it isn't clipped by the scroller. */
  padding: 10px var(--gutter) 22px;
  /* Without this the first card snaps flush to the scrollport and eats
     the gutter, so the rail sits left of its own heading. */
  scroll-padding-inline: var(--gutter);
}
.catalog-row__rail::-webkit-scrollbar { display: none; }
.catalog-row__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--app-border-strong);
  background: color-mix(in srgb, var(--app-bg) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease-confident),
              background var(--dur-micro) var(--ease-confident);
}
.catalog-row__nav--prev { left: calc(var(--gutter) - 19px); }
.catalog-row__nav--next { right: calc(var(--gutter) - 19px); }
.catalog-row__viewport:hover .catalog-row__nav,
.catalog-row__nav:focus-visible { opacity: 1; }
.catalog-row__nav:hover { background: var(--bone-white); color: #14130F; }
.catalog-row__nav[disabled] { opacity: 0 !important; pointer-events: none; }

/* One card size, everywhere. A row still carries whatever --sm/--md/--lg the
   catalogue data asked for, but they all render at the size the masterclass
   rail uses: a poster that changes size from row to row reads as a different
   kind of thing, and it isn't. */
.catalog-row__rail .poster { width: 226px; }
/* Ranked rows carry the numeral in a reserved gutter inside the card. It eats
   into the artwork rather than widening the card, so the row stands exactly as
   tall as every other one. */
.catalog-row--ranked .catalog-row__rail .poster { padding-left: 46px; }
.catalog-row--ranked .catalog-row__rail .poster__rank { left: -6px; font-size: 112px; }

/* Every shelf can filter itself out at once, so the catalogue needs somewhere
   to say so. */
.catalog-empty {
  margin: 8px var(--gutter) 0;
  /* The global `p { max-width: 58ch }` measure is for prose. This is a panel
     standing in for the shelves, so it takes their width. */
  max-width: none;
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--radius-card);
  color: var(--text-body);
  font-size: 14px;
}
.catalog-empty b { color: var(--text-primary); font-weight: 500; }
.catalog-empty button { margin-top: 12px; display: inline-flex; }

/* ============================================================
   POSTER CARD
   ============================================================ */
.poster {
  position: relative;
  /* The border-box reset above only reaches inside .learn-app, and the same
     card is used on the sales pages, which sit outside it — without this the
     poster is 2px larger there and no longer matches the rest. */
  box-sizing: border-box;
  aspect-ratio: 2/3;
  border-radius: 10px;
  overflow: hidden;
  background: #1F1D19;
  border: 1px solid var(--border-on-dark);
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  transition: transform var(--dur-micro) var(--ease-confident),
              box-shadow var(--dur-micro) var(--ease-confident);
}
/* `.poster` sets its own display, which beats the UA rule for [hidden] — so a
   card the lab or the search filters out needs this or it stays on screen. */
.poster[hidden] { display: none; }

.poster:hover,
.poster:focus-visible {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px var(--accent-orange);
  z-index: 4;
  outline: none;
}
.poster__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* With a real photo the gradient becomes a vignette over the image. */
.poster[data-has-image="true"] .poster__art {
  background:
    linear-gradient(180deg, transparent 0%, transparent 50%, rgba(15,14,12,0.55) 78%, rgba(15,14,12,0.92) 100%) !important;
}
.poster__art {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 40%, rgba(15,14,12,0.55) 75%, rgba(15,14,12,0.95) 100%),
    linear-gradient(135deg, var(--accent-rust), #0F0E0C);
}
.poster[data-tone="orange"]  .poster__art { background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(15,14,12,0.55) 75%, rgba(15,14,12,0.95) 100%), linear-gradient(160deg, #C46B22 0%, #6B2810 60%, #0F0E0C 100%); }
.poster[data-tone="rust"]    .poster__art { background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(15,14,12,0.55) 75%, rgba(15,14,12,0.95) 100%), linear-gradient(160deg, #8C3818 0%, #3A1A10 60%, #0F0E0C 100%); }
.poster[data-tone="teal"]    .poster__art { background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(15,14,12,0.55) 75%, rgba(15,14,12,0.95) 100%), linear-gradient(160deg, #4A8F87 0%, #1F3D3A 60%, #0F0E0C 100%); }
.poster[data-tone="blue"]    .poster__art { background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(15,14,12,0.55) 75%, rgba(15,14,12,0.95) 100%), linear-gradient(160deg, #2F6480 0%, #15303F 60%, #0F0E0C 100%); }
.poster[data-tone="charcoal"] .poster__art { background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(15,14,12,0.55) 75%, rgba(15,14,12,0.95) 100%), linear-gradient(160deg, #3C3833 0%, #1A1813 60%, #0F0E0C 100%); }
.poster[data-tone="cream"]   .poster__art { background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(15,14,12,0.60) 75%, rgba(15,14,12,0.95) 100%), linear-gradient(160deg, #C9B894 0%, #4A4138 60%, #0F0E0C 100%); }
.poster__art::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 30% 20%, rgba(240,234,219,0.08), transparent 50%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.poster__rank {
  position: absolute;
  top: 0; left: -2px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 96px;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: rgba(240,234,219,0.06);
  -webkit-text-stroke: 1px rgba(240,234,219,0.35);
  z-index: 1;
  pointer-events: none;
}
.poster__top {
  position: relative;
  z-index: 2;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}
/* Keeps the badge right even when it wraps to its own line on a narrow card. */
.poster__top .poster__badge { margin-left: auto; }
.poster__bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  height: 3px;
  width: 42px;
  flex: none;
  margin-bottom: 9px;
}
.poster__bars > span:nth-child(1) { background: var(--accent-orange); }
.poster__bars > span:nth-child(2) { background: #D47A3A; }
.poster__bars > span:nth-child(3) { background: var(--accent-rust); }
.poster__bars > span:nth-child(4) { background: var(--accent-teal); }
.poster__bars > span:nth-child(5) { background: #4A8F87; }
.poster__bars > span:nth-child(6) { background: var(--accent-blue); }
.poster__badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F0EADB;
  background: rgba(15,14,12,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(240,234,219,0.25);
  padding: 4px 8px;
  border-radius: 100px;
  white-space: nowrap;
}
.poster__badge--accent {
  background: var(--accent-orange);
  color: #14130F;
  border-color: var(--accent-orange);
}
.poster__body {
  position: relative;
  z-index: 2;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.poster__series {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-orange);
  background: rgba(15,14,12,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(232,154,74,0.4);
  padding: 4px 8px;
  border-radius: 100px;
  white-space: nowrap;
}
.poster__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #F0EADB;
  text-wrap: balance;
  margin: 0;
}
.poster__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C4BDAF;
  margin-top: 4px;
}
.poster__meta-dot { width: 2px; height: 2px; background: #8A8478; border-radius: 50%; flex: none; }
.poster__progress {
  height: 2px;
  background: rgba(240,234,219,0.18);
  margin-top: 8px;
}
.poster__progress > span { display: block; height: 100%; background: var(--accent-orange); }

/* ============================================================
   LIGHT CHROME — warm paper walls, cinematic surfaces stay dark.
   Toggled by the sun/moon button in the utility bar; persisted
   to localStorage by lms-catalog.js.
   ============================================================ */
:root[data-ui="light"] .learn-app {
  /* Neutral off-white, not cream — the warm bone read as yellow across a
     full screen of app chrome. Cards are pure white so they still lift off
     the page without a colour cast. */
  --app-bg: #F4F4F3;
  --app-surface: #FFFFFF;
  --app-raised: #FFFFFF;
  --app-border: rgba(17, 17, 17, 0.11);
  --app-border-strong: rgba(17, 17, 17, 0.2);
  --app-hover: rgba(17, 17, 17, 0.04);
  --text-primary: #16150F;
  --text-secondary: #46443E;
  --text-body: #5C5A54;
  --text-muted: #8B8880;
  --border-on-dark: rgba(17, 17, 17, 0.11);
  --border-on-dark-strong: rgba(17, 17, 17, 0.2);
  --accent-orange: #B85C28;
}
/* Keeps overscroll bounce from flashing charcoal behind the light shell. */
:root[data-ui="light"] body:has(.learn-app) { background: #F4F4F3; }
:root[data-ui="light"] .learn-app .learn-sidebar__brand .logo--dark { display: none; }
:root[data-ui="light"] .learn-app .learn-sidebar__brand .logo--light { display: block; }
:root[data-ui="light"] .learn-app .learn-pill--solid,
:root[data-ui="light"] .learn-app .learn-pill[aria-pressed="true"] {
  background: #16150F;
  color: #FFFFFF;
  border-color: #16150F;
}
:root[data-ui="light"] .learn-app .learn-pill--solid:hover,
:root[data-ui="light"] .learn-app .learn-pill[aria-pressed="true"]:hover { color: #FFFFFF; }
:root[data-ui="light"] .learn-app .catalog-row__nav:hover { background: #16150F; color: #FFFFFF; }
/* Posters and the billboard re-declare the dark palette so the
   cinematic surfaces never flip to paper. */
:root[data-ui="light"] .learn-app .poster,
:root[data-ui="light"] .learn-app .billboard {
  --text-primary: #F0EADB;
  --text-secondary: #C4BDAF;
  --text-body: #A69F91;
  --text-muted: #8A8478;
  --accent-orange: #E89A4A;
  --border-on-dark: rgba(240, 234, 219, 0.12);
  color: #F0EADB;
}
:root[data-ui="light"] .learn-app .poster { border-color: rgba(20, 19, 15, 0.14); }
:root[data-ui="light"] .learn-app .poster:hover {
  box-shadow: 0 20px 44px rgba(20,19,15,0.25), 0 0 0 1px var(--accent-rust);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .learn-app { --rail-w: 208px; }
  .billboard { min-height: 360px; padding: 28px; }
  .billboard__inner { max-width: 72%; }
}

@media (max-width: 820px) {
  .learn-app { flex-direction: column; --gutter: 16px; }
  .learn-sidebar {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 40;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--app-border);
  }
  .learn-sidebar__brand {
    height: 52px;
    margin: 0 8px 0 0;
    padding-inline: 0;
    border-bottom: none;
    border-right: 1px solid var(--app-border);
    padding-right: 14px;
    position: static;
  }
  .learn-sidebar__brand img { height: 22px; }
  .learn-sidebar__workspace,
  .learn-sidebar__label,
  .learn-sidebar__user { display: none; }
  .learn-sidebar__group { flex-direction: row; gap: 2px; }
  .learn-sidebar__group--push { margin-top: 0; padding-top: 0; border-top: none; }
  .learn-nav-item { padding: 8px 10px; }
  .learn-nav-item__label { display: none; }
  .learn-nav-item__ico { width: 20px; height: 20px; }
  .learn-utility { top: 52px; }
  .learn-filters { top: 108px; }
  .learn-utility__me { padding: 3px; }
  .billboard { min-height: 300px; padding: 22px; border-radius: 12px; margin-inline: var(--gutter); }
  .billboard__inner { max-width: 100%; }
  .billboard__sub { display: none; }
  .catalog-row__nav { display: none; }
  .catalog-row__rail .poster { width: 168px; }
  .catalog-row--ranked .catalog-row__rail .poster { padding-left: 36px; }
  .catalog-row--ranked .catalog-row__rail .poster__rank { font-size: 86px; }
}

@media (max-width: 560px) {
  .learn-utility__kbd { display: none; }
  .learn-utility__search { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-row__rail { scroll-behavior: auto; }
  .poster:hover, .poster:focus-visible { transform: none; }
}

/* ============================================================
   Sales page (/learn/c/[slug]) — cinematic, dark, scrollable
   v2 — dramatic hero, contrast bands, real rhythm
   ============================================================ */

.sales-page {
  background: var(--charcoal-deepest);
  color: var(--text-primary);
  min-height: 100vh;
  --sales-gutter: clamp(24px, 5vw, 96px);
  --sales-pad-y: clamp(64px, 9vw, 128px);
}

.sales-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* -------- sticky topbar (slimmer, more film-credit) -------- */
.sales-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px var(--sales-gutter);
  height: 56px;
  background: rgba(15, 14, 12, 0.72);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border-bottom: 1px solid var(--border-on-dark);
}
.sales-topbar__brand { display: inline-flex; align-items: center; }
.sales-topbar__brand img { height: 20px; display: block; }
.sales-topbar__title {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sales-topbar__code {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-orange);
}
.sales-topbar__cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: none;
}
.sales-topbar__price {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

/* -------- HERO v2 — dramatic, full-bleed, cinematic -------- */
.sales-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 14vw, 180px) var(--sales-gutter) clamp(48px, 8vw, 80px);
  min-height: clamp(560px, 88vh, 920px);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
}
.sales-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  filter: saturate(1.05) contrast(1.05);
}
.sales-hero__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(80% 60% at 0% 100%, rgba(15,14,12,0.94) 0%, rgba(15,14,12,0.45) 38%, rgba(15,14,12,0) 70%),
    radial-gradient(60% 80% at 100% 0%, rgba(232,154,74,0.12) 0%, rgba(232,154,74,0) 60%),
    linear-gradient(180deg, rgba(15,14,12,0.55) 0%, rgba(15,14,12,0) 25%, rgba(15,14,12,0) 65%, rgba(15,14,12,0.92) 100%);
}
.sales-hero[data-has-image="false"] .sales-hero__art,
.sales-hero:not([data-has-image]) .sales-hero__art {
  background:
    radial-gradient(80% 60% at 0% 100%, rgba(15,14,12,0.92), rgba(15,14,12,0.3) 70%),
    linear-gradient(135deg, var(--accent-rust) 0%, var(--charcoal-surface) 60%, var(--charcoal-deepest) 100%);
}
/* SVG-noise film grain layer — subtle, pulls everything together */
.sales-hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sales-hero__inner {
  position: relative;
  z-index: 2;
  max-width: min(720px, 64%);
  align-self: end;
}
.sales-hero__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.sales-hero__bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  height: 4px;
  width: 72px;
  flex: none;
}
.sales-hero__bars > span:nth-child(1) { background: var(--accent-orange); }
.sales-hero__bars > span:nth-child(2) { background: #D47A3A; }
.sales-hero__bars > span:nth-child(3) { background: var(--accent-rust); }
.sales-hero__bars > span:nth-child(4) { background: var(--accent-teal); }
.sales-hero__bars > span:nth-child(5) { background: #4A8F87; }
.sales-hero__bars > span:nth-child(6) { background: var(--accent-blue); }
.sales-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-orange);
}
.sales-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.045em;
  line-height: 0.94;
  color: var(--text-primary);
  text-wrap: balance;
  margin: 0;
  text-shadow: 0 2px 24px rgba(15,14,12,0.4);
}
.sales-hero__sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-secondary);
  margin: 22px 0 0;
  max-width: 580px;
  line-height: 1.55;
  text-shadow: 0 1px 12px rgba(15,14,12,0.55);
}
.sales-hero__cta {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.sales-hero__urgency {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin: 22px 0 0;
}
.sales-hero__urgency-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-orange);
  box-shadow: 0 0 12px rgba(232, 154, 74, 0.6);
  animation: sales-pulse 2s ease-in-out infinite;
}
@keyframes sales-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* -------- HERO CREDITS strip — film-credits aesthetic -------- */
.sales-hero__credits {
  position: relative;
  z-index: 2;
  margin-top: clamp(48px, 8vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  border-top: 1px solid rgba(240,234,219,0.18);
  padding-top: 18px;
}
.sales-hero__credits > div {
  padding: 0 14px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid rgba(240,234,219,0.08);
}
.sales-hero__credits > div:last-child { border-right: none; }
.sales-hero__credit-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sales-hero__credit-value {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.sales-hero__rating {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em;
  border: 1px solid rgba(240,234,219,0.4);
  padding: 4px 8px;
  border-radius: 3px;
  width: max-content;
  font-weight: 500 !important;
}

/* -------- SALES CTA — outline button system -------- */
.sales-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--radius-btn, 10px);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--dur-micro) var(--ease-confident),
              background var(--dur-micro) var(--ease-confident),
              border-color var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident);
  white-space: nowrap;
}
.sales-cta--primary {
  background: transparent;
  color: var(--accent-orange);
  border-color: var(--accent-orange);
}
.sales-cta--primary:hover {
  background: var(--accent-orange);
  color: var(--charcoal-main);
  transform: translateY(-1px);
}
.sales-cta--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: rgba(240,234,219,0.35);
  backdrop-filter: blur(12px);
}
.sales-cta--ghost:hover {
  border-color: var(--bone-white);
  background: rgba(240, 234, 219, 0.04);
}
.sales-cta__arrow { transition: transform var(--dur-micro) var(--ease-confident); }
.sales-cta:hover .sales-cta__arrow { transform: translateX(3px); }
.sales-cta__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  color: var(--accent-orange);
}

/* -------- AUDIENCE band — thin contrast strip under hero -------- */
.sales-audience {
  background: var(--charcoal-main);
  border-top: 1px solid var(--border-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
}
.sales-audience__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  padding: 22px var(--sales-gutter);
}
.sales-audience__group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sales-audience__group--right .sales-audience__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sales-audience__dot { color: var(--text-muted); }
.sales-audience__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.sales-audience-pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--accent-orange);
  color: var(--accent-orange);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* -------- PITCH section — story-brand framing -------- */
.sales-pitch {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  padding: var(--sales-pad-y) var(--sales-gutter);
  align-items: start;
}
.sales-pitch__left { max-width: 56ch; }
.sales-pitch__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 60px);
  letter-spacing: -0.038em;
  line-height: 1.0;
  color: var(--text-primary);
  margin: 14px 0 0;
  text-wrap: balance;
}
.sales-pitch__body {
  font-size: 16px;
  color: var(--text-body);
  margin: 22px 0 0;
  max-width: 56ch;
  line-height: 1.7;
}
.sales-pitch__bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-self: start;
}
.sales-pitch__bullet {
  background: var(--charcoal-surface);
  border: 1px solid var(--border-on-dark);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dur-micro) var(--ease-confident),
              border-color var(--dur-micro) var(--ease-confident);
}
.sales-pitch__bullet:hover { transform: translateY(-2px); border-color: rgba(232,154,74,0.35); }
.sales-pitch__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent-orange);
}
.sales-pitch__bullet > span:last-child {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}
.sales-pitch__aside {
  background: var(--charcoal-surface);
  border: 1px solid var(--border-on-dark);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sales-pitch__takeaways {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sales-pitch__takeaways li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.5;
}
.sales-pitch__takeaways li span {
  color: var(--accent-orange);
  font-family: var(--font-mono);
  flex: none;
  font-size: 13px;
  margin-top: 4px;
}

/* -------- QUOTE band — A24 magazine break -------- */
.sales-quote {
  position: relative;
  padding: clamp(72px, 11vw, 144px) var(--sales-gutter);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(232,154,74,0.06), transparent 60%),
    linear-gradient(180deg, var(--bone-cream) 0%, #ddd4bf 100%);
  color: var(--text-primary-light);
  text-align: center;
  border-top: 1px solid var(--border-on-light);
  border-bottom: 1px solid var(--border-on-light);
}
.sales-quote__open {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(80px, 12vw, 160px);
  line-height: 0.4;
  color: var(--accent-rust);
  opacity: 0.4;
  margin-bottom: 12px;
}
.sales-quote__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.028em;
  line-height: 1.18;
  color: var(--text-primary-light);
  max-width: 880px;
  margin: 0 auto;
  text-wrap: balance;
}
.sales-quote__attr {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary-light);
}
.sales-quote__bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  height: 3px;
  width: 56px;
}
.sales-quote__bars > span:nth-child(1) { background: var(--accent-orange); }
.sales-quote__bars > span:nth-child(2) { background: #D47A3A; }
.sales-quote__bars > span:nth-child(3) { background: var(--accent-rust); }
.sales-quote__bars > span:nth-child(4) { background: var(--accent-teal); }
.sales-quote__bars > span:nth-child(5) { background: #4A8F87; }
.sales-quote__bars > span:nth-child(6) { background: var(--accent-blue); }

/* -------- IN THE BOX -------- */
.sales-included {
  padding: var(--sales-pad-y) var(--sales-gutter);
}
.sales-included__head { margin-bottom: 36px; max-width: 720px; }
.sales-included__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.sales-included__item {
  display: flex;
  gap: 16px;
  padding: 22px;
  background: var(--charcoal-surface);
  border: 1px solid var(--border-on-dark);
  border-radius: 12px;
  align-items: flex-start;
}
.sales-included__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(232,154,74,0.12);
  color: var(--accent-orange);
  font-family: var(--font-mono);
  font-size: 13px;
  flex: none;
  margin-top: 2px;
}
.sales-included__label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.sales-included__sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* -------- CURRICULUM v2 -------- */
.sales-curriculum {
  padding: var(--sales-pad-y) var(--sales-gutter);
  background: var(--charcoal-main);
  border-top: 1px solid var(--border-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
}
.sales-curriculum__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
  max-width: 720px;
  position: relative;
}
.sales-curriculum__count {
  position: absolute;
  top: 4px;
  right: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sales-curriculum__list { display: flex; flex-direction: column; gap: 8px; }
.sales-curriculum__module {
  background: var(--charcoal-surface);
  border: 1px solid var(--border-on-dark);
  border-radius: 12px;
}
.sales-curriculum__module-head {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sales-curriculum__module-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent-orange);
}
.sales-curriculum__module-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.015em;
}
.sales-curriculum__module-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Real curriculum rendering (when sidecar JSON has data) */
.sales-curriculum__list { display: flex; flex-direction: column; gap: 8px; }
.sales-curriculum__module > summary.sales-curriculum__module-head {
  cursor: pointer;
  list-style: none;
}
.sales-curriculum__module > summary::-webkit-details-marker { display: none; }
.sales-curriculum__module[open] {
  border-color: rgba(232, 154, 74, 0.4);
}
.sales-curriculum__module-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.sales-curriculum__chev {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--text-muted);
  width: 18px;
  display: inline-flex;
  justify-content: center;
  transition: transform var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident);
}
.sales-curriculum__module[open] .sales-curriculum__chev {
  transform: rotate(45deg);
  color: var(--accent-orange);
}
.sales-curriculum__lessons {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-on-dark);
}
.sales-curriculum__lesson {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  padding: 16px 22px;
  align-items: center;
  border-top: 1px solid var(--border-on-dark-subtle);
}
.sales-curriculum__lesson:first-child { border-top: none; }
.sales-curriculum__lesson-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}
.sales-curriculum__lesson-body { min-width: 0; }
.sales-curriculum__lesson-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sales-curriculum__lesson-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  color: var(--accent-orange);
  border: 1px solid var(--accent-orange);
  padding: 3px 8px;
  border-radius: 10px;
}
.sales-curriculum__lesson-tag--soft {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border-on-dark-strong);
}
.sales-curriculum__lesson-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}
.sales-curriculum__lesson-time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.sales-curriculum__lesson[data-ready="true"] .sales-curriculum__lesson-num {
  color: var(--accent-teal);
}

/* Designed empty state — looks intentional, not a TODO */
.sales-curriculum__skeleton {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--charcoal-surface);
  border: 1px solid var(--border-on-dark);
  border-radius: 14px;
  padding: 14px;
}
.sales-curriculum__row {
  display: grid;
  grid-template-columns: 56px 1fr 1fr 120px;
  align-items: center;
  gap: 18px;
  padding: 16px 14px;
  border-radius: 8px;
  transition: background var(--dur-micro) var(--ease-confident);
}
.sales-curriculum__row:hover { background: rgba(240,234,219,0.03); }
.sales-curriculum__row-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: rgba(240,234,219,0.18);
  -webkit-text-stroke: 1px rgba(240,234,219,0.35);
}
.sales-curriculum__row-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.015em;
}
.sales-curriculum__row-bar {
  height: 1px;
  background: linear-gradient(90deg, var(--border-on-dark-strong), transparent);
}
.sales-curriculum__row-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: right;
}
.sales-curriculum__note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  margin: 14px 6px 4px;
  line-height: 1.6;
}
.sales-curriculum__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-teal);
  box-shadow: 0 0 12px rgba(111,181,168,0.6);
  flex: none;
  animation: sales-pulse 2.2s ease-in-out infinite;
}

/* -------- INSTRUCTOR -------- */
.sales-instructor {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(28px, 5vw, 64px);
  padding: var(--sales-pad-y) var(--sales-gutter);
  align-items: start;
}
.sales-instructor__portrait {
  aspect-ratio: 4/5;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 50%, rgba(15,14,12,0.7) 100%),
    linear-gradient(160deg, var(--accent-rust) 0%, var(--charcoal-deepest) 100%);
  border: 1px solid var(--border-on-dark);
  position: relative;
}
.sales-instructor__portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.sales-instructor__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}
.sales-instructor__portrait[data-has-image="true"] {
  background: var(--charcoal-deepest);
}
/* Subtle warm wash + grain over a B&W portrait to tie it to the brand */
.sales-instructor__portrait[data-has-image="true"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(15,14,12,0.55) 100%),
    linear-gradient(160deg, rgba(232,154,74,0.10) 0%, transparent 55%);
  z-index: 2;
  pointer-events: none;
}
.sales-instructor__portrait[data-has-image="true"]::after {
  z-index: 3;
}
.sales-instructor__body { max-width: 640px; }
.sales-instructor__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 8px 0 0;
}
.sales-instructor__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
  gap: 36px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-on-dark);
}
.sales-instructor__stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.035em;
}
.sales-instructor__stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}

/* -------- PRICING -------- */
.sales-pricing {
  padding: var(--sales-pad-y) var(--sales-gutter);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(232,154,74,0.06), transparent 60%),
    var(--charcoal-main);
  border-top: 1px solid var(--border-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
}
.sales-pricing__head { margin-bottom: 36px; text-align: center; }
.sales-pricing__head .sales-pitch__headline { margin: 12px auto 0; }
.sales-pricing__grid {
  display: grid;
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}
.sales-pricing__grid[data-count="1"] { grid-template-columns: minmax(280px, 480px); justify-content: center; }
.sales-pricing__grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.sales-pricing__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.sales-pricing__tier {
  background: var(--charcoal-surface);
  border: 1px solid var(--border-on-dark);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform var(--dur-micro) var(--ease-confident),
              box-shadow var(--dur-micro) var(--ease-confident);
}
.sales-pricing__tier:hover { transform: translateY(-3px); }
.sales-pricing__tier--featured {
  background: var(--charcoal-deepest);
  border-color: var(--accent-orange);
  box-shadow: 0 28px 80px -16px rgba(232, 154, 74, 0.28);
}
.sales-pricing__badge {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--charcoal-deepest);
  color: var(--accent-orange);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 10px;
  border: 1px solid var(--accent-orange);
  font-weight: 500;
}
.sales-pricing__price {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  margin-top: 8px;
  line-height: 1;
}
.sales-pricing__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
}
.sales-pricing__perks {
  list-style: none;
  padding: 18px 0;
  margin: 0;
  border-top: 1px solid var(--border-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sales-pricing__perks li {
  display: flex;
  gap: 12px;
  font-size: 14px;
  color: var(--text-body);
  align-items: flex-start;
  line-height: 1.5;
}
.sales-pricing__tick {
  color: var(--accent-orange);
  font-family: var(--font-mono);
  flex: none;
  font-size: 13px;
  margin-top: 2px;
}
.sales-pricing__tier .learn-pill { align-self: stretch; justify-content: center; padding: 11px 18px; }
.sales-pricing__fine {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin: 32px 0 0;
}

/* -------- FAQ -------- */
.sales-faq {
  padding: var(--sales-pad-y) var(--sales-gutter);
}
.sales-faq__head { margin-bottom: 36px; max-width: 720px; }
.sales-faq__list { display: flex; flex-direction: column; gap: 6px; max-width: 880px; }
.sales-faq__item {
  background: var(--charcoal-main);
  border: 1px solid var(--border-on-dark);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--dur-micro) var(--ease-confident);
}
.sales-faq__item[open] { border-color: rgba(232,154,74,0.4); }
.sales-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.sales-faq__q::-webkit-details-marker { display: none; }
.sales-faq__chev {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--text-muted);
  transition: transform var(--dur-micro) var(--ease-confident);
  flex: none;
}
.sales-faq__item[open] .sales-faq__chev { transform: rotate(45deg); color: var(--accent-orange); }
.sales-faq__a {
  padding: 0 22px 22px;
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.7;
  margin: 0;
  max-width: 70ch;
}

/* -------- FINAL CTA -------- */
.sales-final-cta {
  padding: clamp(80px, 12vw, 160px) var(--sales-gutter);
  background:
    radial-gradient(60% 80% at 50% 100%, rgba(232,154,74,0.12), transparent 60%),
    linear-gradient(180deg, var(--charcoal-main) 0%, var(--charcoal-deepest) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.sales-final-cta__bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  height: 5px;
  width: 140px;
}
.sales-final-cta__bars > span:nth-child(1) { background: var(--accent-orange); }
.sales-final-cta__bars > span:nth-child(2) { background: #D47A3A; }
.sales-final-cta__bars > span:nth-child(3) { background: var(--accent-rust); }
.sales-final-cta__bars > span:nth-child(4) { background: var(--accent-teal); }
.sales-final-cta__bars > span:nth-child(5) { background: #4A8F87; }
.sales-final-cta__bars > span:nth-child(6) { background: var(--accent-blue); }
.sales-final-cta__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5.6vw, 64px);
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--text-primary);
  margin: 0;
  max-width: 780px;
  text-wrap: balance;
}
.sales-final-cta__buttons { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- responsive collapses ---------- */
@media (max-width: 920px) {
  .sales-topbar { padding: 10px 16px; height: 52px; }
  .sales-topbar__title { font-size: 12px; }
  .sales-hero { padding-top: 100px; min-height: auto; }
  .sales-hero__inner { max-width: 100%; }
  .sales-pitch { grid-template-columns: 1fr; }
  .sales-pitch__bullets { grid-template-columns: 1fr; }
  .sales-instructor { grid-template-columns: 1fr; }
  .sales-instructor__portrait { max-width: 200px; }
  .sales-pricing__grid[data-count="2"],
  .sales-pricing__grid[data-count="3"] { grid-template-columns: 1fr; }
  .sales-curriculum__row { grid-template-columns: 40px 1fr 80px; gap: 12px; }
  .sales-curriculum__row-bar { display: none; }
  .sales-curriculum__count { position: static; }
}

/* ============================================================
   Auth pages — /learn/signup · /login · /forgot-password
   ============================================================ */
/* ============================================================
   AUTH — signup / login / forgot password
   One lifted card on the charcoal ground. The card sits a shade
   above the page and carries a warm hairline: a dark card on a
   dark background has no edge of its own, so it has to be given
   one or it reads as a panel welded to the page.
   ============================================================ */
.auth-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 40px);
  background:
    radial-gradient(60% 50% at 50% 8%, rgba(232, 154, 74, 0.045), transparent 60%),
    #0B0A08;
  isolation: isolate;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 20px 16px;
  border-radius: 22px;
  /* Clearly lighter than the page. At two shades apart the card read as welded
     to the background — the reference got its separation free by sitting a dark
     card on light grey, and this one has to earn it. */
  background: #1C1A15;
  border: 1px solid rgba(240, 234, 219, 0.13);
  box-shadow:
    /* Top edge catching light, the way a raised surface does. */
    inset 0 1px 0 rgba(240, 234, 219, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 24px 48px -12px rgba(0, 0, 0, 0.7),
    0 60px 120px -30px rgba(0, 0, 0, 0.85);
}

.auth-card__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 0;
}
.auth-card__kicker p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--text-secondary);
}
/* Shorter and thinner than the strip elsewhere on the site: inline beside a
   sentence it reads as a mark, and at full width it would read as a rule. */
.auth-card__bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  height: 3px;
  width: 44px;
  flex: none;
}
.auth-card__bars > span:nth-child(1) { background: var(--accent-orange); }
.auth-card__bars > span:nth-child(2) { background: #D47A3A; }
.auth-card__bars > span:nth-child(3) { background: var(--accent-rust); }
.auth-card__bars > span:nth-child(4) { background: var(--accent-teal); }
.auth-card__bars > span:nth-child(5) { background: #4A8F87; }
.auth-card__bars > span:nth-child(6) { background: var(--accent-blue); }

/* ---- The still, inset with its own radius ---- */
.auth-card__media {
  position: relative;
  width: 100%;
  /* Shorter than the 3:2 source on purpose: that overflow is what there is to
     crop. At 3:2 the frame matched the photo exactly and object-position had
     nothing to move. */
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #0F0E0C;
}
.auth-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Centred. The old desk shot wanted its crop pushed to the top; this one is
     built on symmetry — guitars either side, plaques in a row — and anchoring
     it anywhere but the middle throws that away. */
  object-position: 50% 50%;
  /* Barely there — the frame is warm and muted as shot, so this only takes
     the last of the digital edge off it. */
  filter: saturate(0.95);
}

/* ---- Body ---- */
.auth-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2px 4px 0;
}
.auth-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-orange);
}
.auth-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 36px);
  letter-spacing: -0.035em;
  line-height: 1.03;
  color: var(--text-primary);
  margin: -4px 0 0;
  text-wrap: balance;
}
.auth-card__sub {
  font-size: 13.5px;
  color: var(--text-body);
  margin: -8px 0 0;
  line-height: 1.5;
}
.auth-card__aside {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: -2px;
}
.auth-card__aside p { margin: 0; }
.auth-link {
  color: var(--accent-orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-confident);
}
.auth-link:hover { border-color: var(--accent-orange); }

/* ---- Foot: brand left, what you get right ---- */
.auth-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px 2px;
  border-top: 1px solid rgba(240, 234, 219, 0.08);
}
.auth-card__brand { display: inline-flex; align-items: center; }
.auth-card__brand img { height: 18px; display: block; }
.auth-card__tags {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.auth-card__tags i { font-style: normal; color: var(--accent-orange); margin: 0 2px; }

.auth-shell__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Form ---- */
.auth-form { display: flex; flex-direction: column; gap: 13px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.auth-field__aside {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-confident);
}
.auth-field__aside:hover { color: var(--accent-orange); }
.auth-field__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.auth-field__input {
  background: rgba(11, 10, 8, 0.55);
  border: 1px solid rgba(240, 234, 219, 0.11);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text-primary);
  box-sizing: border-box;
  transition: border-color var(--dur-micro) var(--ease-confident),
              background var(--dur-micro) var(--ease-confident),
              box-shadow var(--dur-micro) var(--ease-confident);
}
.auth-field__input::placeholder { color: var(--text-muted); }
.auth-field__input:hover { border-color: rgba(240, 234, 219, 0.2); }
.auth-field__input:focus {
  outline: none;
  border-color: var(--accent-orange);
  background: rgba(240, 234, 219, 0.06);
  box-shadow: 0 0 0 3px rgba(232, 154, 74, 0.14);
}
.auth-field__hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
/* An outline, not a fill. It gets its weight from three things instead of a
   white background: the full width of the form, an accent border against a
   card with no other colour on it, and a hover that finally fills. The radius
   matches the fields above it — the brand's 100px pill read as a lozenge
   floating under a stack of square-cornered inputs. */
.auth-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 14px 20px;
  border-radius: var(--radius-btn, 10px);
  border: 1px solid var(--accent-orange);
  /* A wash, not a fill — enough to separate it from the recessed inputs. */
  background: rgba(232, 154, 74, 0.1);
  color: var(--accent-orange);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident),
              box-shadow var(--dur-micro) var(--ease-confident);
}
.auth-form__submit:hover {
  background: var(--accent-orange);
  color: #14130F;
  /* The glow is the pop — same warm shadow the brand uses on card hover. */
  box-shadow: 0 12px 34px rgba(232, 154, 74, 0.24);
}
.auth-form__submit:focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 3px;
}
.auth-form__submit:active { transform: translateY(1px); }
/* Disabled while the request is in flight — it must stop looking pressable. */
.auth-form__submit:disabled {
  border-color: rgba(240, 234, 219, 0.16);
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
  cursor: default;
}
.auth-form__error {
  font-size: 12.5px;
  color: var(--accent-orange);
  background: rgba(232, 154, 74, 0.08);
  border: 1px solid rgba(232, 154, 74, 0.3);
  border-radius: 10px;
  padding: 9px 12px;
  margin: 0;
  line-height: 1.45;
}
.auth-form__notice {
  font-size: 12.5px;
  color: var(--text-primary);
  background: rgba(111, 181, 168, 0.08);
  border: 1px solid rgba(111, 181, 168, 0.3);
  border-radius: 10px;
  padding: 9px 12px;
  margin: 0;
  line-height: 1.45;
}
.auth-form__fine { font-size: 11.5px; color: var(--text-muted); margin: 0; line-height: 1.5; }

@media (max-width: 460px) {
  .auth-card { padding: 14px 14px 12px; border-radius: 18px; }
  .auth-card__media { aspect-ratio: 16 / 10; }
  .auth-card__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   Auth state classes — pre-resolved + anon/user visibility toggles
   driven by the lms-auth-widget.js script.
   ============================================================ */
.auth-state-pending [data-auth-state] { visibility: hidden; }
:root:not(.auth-state-user) [data-auth-state="user"],
:root:not(.auth-state-anon) [data-auth-state="anon"],
:root:not(.auth-state-admin) [data-auth-state="admin"],
:root:not(.auth-state-staff) [data-auth-state="staff"] { display: none !important; }
/* The inverse: chrome that only a non-staff account should see, so the same
   link can sit in two places without ever showing twice. */
:root.auth-state-staff [data-hide-for-staff] { display: none !important; }

/* ---------- sidebar user widget (visible when logged in) ---------- */
.learn-sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: var(--charcoal-surface);
  border: 1px solid var(--border-on-dark);
  margin-bottom: 4px;
}
.learn-sidebar__user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-rust));
  flex: none;
}
.learn-sidebar__user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.learn-sidebar__user-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.learn-sidebar__user-email {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   "YOUR STUDIO" — student home dashboard (/learn/app)

   Charts are single-hue on purpose: every question here is
   magnitude ("how much", "how far"), not identity, so the label
   carries the identity and the accent carries the value. The six
   brand tones fail a categorical palette check on this surface.
   ============================================================ */
.studio {
  padding: clamp(24px, 3vw, 40px) var(--gutter) 96px;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 44px);
  max-width: 1400px;
}

.studio__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bar-strip-mini {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  height: 3px;
  width: 72px;
  margin-bottom: 12px;
}
.bar-strip-mini > span:nth-child(1) { background: var(--accent-orange); }
.bar-strip-mini > span:nth-child(2) { background: #D47A3A; }
.bar-strip-mini > span:nth-child(3) { background: var(--accent-rust); }
.bar-strip-mini > span:nth-child(4) { background: var(--accent-teal); }
.bar-strip-mini > span:nth-child(5) { background: #4A8F87; }
.bar-strip-mini > span:nth-child(6) { background: var(--accent-blue); }

/* Sample-data banner — present only when signed out. */
.studio__demo {
  margin: -8px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  font-size: 12.5px;
  color: var(--text-body);
}
.studio__demo[hidden] { display: none; }
.studio__demo span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-orange);
}
.studio__demo a { color: var(--text-primary); }

/* ---------- Header ---------- */
.studio__head {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.studio__head-copy { flex: 1; min-width: 240px; }
.studio__head .learn-pill { flex: none; }

/* ---------- Presence strip (header, right) ---------- */
.presence {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: none;
  padding: 12px 18px;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
}
.presence[hidden] { display: none; }
.presence__stat { display: flex; align-items: center; gap: 9px; }
.presence__stat--people { padding-left: 22px; border-left: 1px solid var(--app-border); }
.presence__stat--people .avatar-stack:empty { display: none; }
/* Friends stack (Members header) rings each face in the friend colour, so it
   matches the teal a friend's card carries. The studio's stack is people you
   share courses with, not friends, so it keeps the neutral surface ring. */
[data-members-friend-faces] .avatar-stack__face {
  border-width: 1.5px;
  border-color: var(--accent-teal);
  box-shadow: 0 0 0 1px var(--app-surface);
}
.presence__stat--people[hidden] { display: none; }
.presence__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(232, 154, 74, 0.16);
  flex: none;
}
.presence__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.presence__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.avatar-stack { display: inline-flex; }
.avatar-stack__face {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  display: grid;
  place-items: center;
  border: 2px solid var(--app-surface);
  background:
    radial-gradient(circle at 30% 20%, rgba(232,154,74,0.28), transparent 65%),
    var(--app-raised);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  color: var(--text-primary);
}
.avatar-stack__face + .avatar-stack__face { margin-left: -8px; }
.avatar-stack__face--more {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
}

/* Rounded-square face — square, not a circle, so it reads as a frame. */
.face { flex: none; }
.face__btn {
  position: relative;
  display: block;
  width: clamp(64px, 7vw, 88px);
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  /* Dashed while empty so it reads as a slot to fill, solid once filled. */
  border: 1.5px dashed var(--app-border-strong);
  background:
    radial-gradient(circle at 30% 20%, rgba(232,154,74,0.20), transparent 62%),
    var(--app-raised);
  color: var(--text-muted);
  transition: border-color var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident),
              transform var(--dur-micro) var(--ease-confident);
}
.face__btn:hover { border-color: var(--accent-orange); color: var(--accent-orange); transform: translateY(-2px); }
.face__btn:has(.face__img:not([hidden])) { border-style: solid; border-color: var(--app-border-strong); }

.face__plus { position: absolute; inset: 0; display: grid; place-items: center; }
.face__btn:has(.face__img:not([hidden])) .face__plus { display: none; }
.face__btn:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 3px; }
.face__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.face__img[hidden] { display: none; }
/* The camera badge sits in the corner until you hover, then covers the tile. */
.face__btn:not(:has(.face__img:not([hidden]))) .face__overlay { display: none; }
.face__overlay {
  position: absolute;
  inset: auto 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--text-primary);
  background: rgba(15, 14, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top-left-radius: 10px;
  transition: inset var(--dur-micro) var(--ease-confident),
              width var(--dur-micro) var(--ease-confident),
              height var(--dur-micro) var(--ease-confident),
              background var(--dur-micro) var(--ease-confident);
}
.face__btn:hover .face__overlay,
.face__btn:focus-visible .face__overlay {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: rgba(15, 14, 12, 0.6);
}
.face[data-busy="true"] .face__btn { opacity: 0.6; pointer-events: none; }
.face__note { font-size: 12px; color: var(--text-muted); margin: 8px 0 0; }
.face__note--error { color: var(--accent-rust); }
.face__note[hidden] { display: none; }
.studio__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.8vw, 46px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--text-primary);
  margin: 6px 0 0;
}
.studio__sub {
  font-size: 14px;
  color: var(--text-body);
  margin: 10px 0 0;
  max-width: 60ch;
}

.studio__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.studio__section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
}

/* ---------- Resume + weekly meter ---------- */
.studio__resume {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: 16px;
}
.resume-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 210px;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-micro) var(--ease-confident),
              transform var(--dur-micro) var(--ease-confident);
}
a.resume-card:hover { border-color: var(--app-border-strong); transform: translateY(-2px); }
.resume-card__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.resume-card__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(15,14,12,0.94) 0%, rgba(15,14,12,0.6) 55%, rgba(15,14,12,0.1) 100%),
    linear-gradient(180deg, rgba(15,14,12,0) 40%, rgba(15,14,12,0.8) 100%);
}
.resume-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 46ch; }
.resume-card__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-orange);
}
.resume-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text-primary);
}
.resume-card__course { font-size: 13px; color: var(--text-body); }
.resume-card__cta { margin-top: 6px; }
.resume-card__note { font-size: 13px; color: var(--text-body); margin: 0; max-width: 46ch; }
/* The art-backed card keeps dark ink even when the chrome is paper. */
.resume-card:has(.resume-card__scrim) {
  --text-primary: #F0EADB;
  --text-body: #C4BDAF;
  --accent-orange: #E89A4A;
}
.resume-card[hidden],
.resume-card--empty[hidden] { display: none; }
.resume-card--empty {
  background:
    radial-gradient(circle at 85% 15%, rgba(232,154,74,0.12), transparent 55%),
    var(--app-surface);
  gap: 8px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.meter-card {
  margin: 0;
  padding: 22px;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.meter-card__head { display: flex; flex-direction: column; gap: 8px; }
.meter-card__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-secondary);
}
.meter-card__value b {
  font-size: clamp(30px, 3.4vw, 40px);
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-weight: 500;
  margin-right: 6px;
}
.meter-card__note { font-size: 12px; color: var(--text-muted); margin: 0; }

/* Same-ramp track meter, used for weekly goal + course progress. */
.meter {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 100px;
  background: var(--app-hover);
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--accent-orange);
  transition: width var(--dur-entrance) var(--ease-confident);
}
.meter--onArt { background: rgba(240,234,219,0.25); margin: 4px 0; }

/* ---------- KPI row ---------- */
.studio__kpis {
  display: grid;
  /* 160px min keeps all four tiles on one row once the chat rail takes its
     320px; above 190px they wrapped 3 + 1 at common laptop widths. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px 22px;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
}
.stat-tile__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat-tile__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.stat-tile__hint { font-size: 12px; color: var(--text-body); }

/* ---------- Chart panels ---------- */
.studio__charts {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 16px;
}
.panel {
  margin: 0;
  padding: 22px;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.panel__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 6px 0 0;
}
.panel__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.panel__body { min-width: 0; }
.panel__foot {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  max-width: 62ch;
}

/* SVG column chart */
.chart { position: relative; }
.chart svg { display: block; overflow: visible; }
.col__track { fill: var(--app-hover); }
.col__bar { fill: var(--accent-orange); }
.col__base { stroke: var(--app-border); stroke-width: 1; }
.col__label {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
}
.col__hit { fill: transparent; cursor: default; }
.col__hit:hover { fill: rgba(240, 234, 219, 0.035); }
/* `hidden` must beat the component's own display value. */
.chart__tip[hidden] { display: none; }
.chart__tip {
  position: absolute;
  top: 0;
  transform: translate(-50%, -100%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--app-border-strong);
  background: var(--app-bg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  pointer-events: none;
  white-space: nowrap;
}
.chart__tip b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-primary);
}
.chart__tip span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Horizontal magnitude bars */
.hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hbar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.hbar__label {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hbar__value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.hbar__track {
  grid-column: 1 / -1;
  display: block;
  height: 8px;
  border-radius: 100px;
  background: var(--app-hover);
  overflow: hidden;
}
.hbar__fill { display: block; height: 100%; border-radius: 100px; background: var(--accent-orange); }

/* ---------- Empty / error states ---------- */
.studio-empty {
  padding: 40px 24px;
  text-align: center;
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--radius-card);
  color: var(--text-body);
  font-size: 14px;
  margin: 0;
}
.studio-empty--sm { padding: 24px 16px; font-size: 13px; }
.studio-empty a { color: var(--accent-orange); text-decoration: none; }
.studio-empty a:hover { text-decoration: underline; }
.studio-empty__retry {
  background: none;
  border: none;
  font: inherit;
  color: var(--accent-orange);
  cursor: pointer;
  padding: 0;
}

/* Chart data in text form, for screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Two-column body: content + chat rail ---------- */
.studio__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  /* stretch, not start: the rail's height is defined by the column beside
     it, so its bottom edge lands on the bottom of the "By course" panel. */
  align-items: stretch;
}
.studio__col {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 44px);
  min-width: 0;
}

/* ---------- Chat rail ---------- */
.chat-rail {
  display: flex;
  flex-direction: column;
  /* No fixed height — the grid row sizes it. min-height keeps it usable if
     the column beside it is ever short. */
  min-height: 420px;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  overflow: hidden;
}
.chat-rail__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--app-border);
  flex: none;
}
.chat-rail__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(232, 154, 74, 0.16);
  flex: none;
}
.chat-rail__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 2px 0 0;
}

.chat-rail__thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
}
.chat-rail__thread::-webkit-scrollbar { width: 6px; }
.chat-rail__thread::-webkit-scrollbar-thumb { background: var(--app-border); border-radius: 3px; }
.chat-rail__state {
  margin: auto 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.chat-rail__state[hidden] { display: none; }

/* Sits above a sample conversation so the rail never passes examples off
   as the real room. Sticky: the thread scrolls, the disclaimer shouldn't. */
.chat-note {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid rgba(232, 154, 74, 0.28);
  border-radius: 10px;
  background: var(--app-surface);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.chat-note a { color: var(--accent-orange); text-decoration: none; }
.chat-note a:hover { text-decoration: underline; }

.chat-msg { display: flex; gap: 10px; align-items: flex-start; }
.chat-msg__face {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--app-border);
  background:
    radial-gradient(circle at 30% 20%, rgba(232,154,74,0.28), transparent 65%),
    var(--app-raised);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  color: var(--text-primary);
}
/* No avatar circles — the name carries it, and the circles were noise
   against a bubble. */
.chat-msg__face, .chat-msg__face--spacer { display: none; }
.chat-msg__main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.chat-msg__meta { display: flex; align-items: baseline; gap: 8px; }
.chat-msg__meta b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.chat-msg__meta span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
/* Everyone gets a bubble; only the side and the tint change. */
.chat-msg__body {
  margin: 4px 0 0;
  padding: 8px 13px;
  border-radius: 14px;
  /* Translucent bone rather than --app-raised, which sits too close to the
     panel behind it to read as a bubble on either surface. */
  background: rgba(240, 234, 219, 0.07);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-body);
  overflow-wrap: anywhere;
  max-width: 46ch;
}
/* Your own messages sit on the right in a bubble, the way a messaging app
   reads. No avatar on your own side — you know who you are, and dropping it
   lets the bubble run to the edge. */
.chat-msg--mine { flex-direction: row-reverse; }
.chat-msg--mine .chat-msg__main { align-items: flex-end; text-align: right; }
.chat-msg--mine .chat-msg__meta { flex-direction: row-reverse; }
.chat-msg--mine .chat-msg__body {
  background: rgba(111, 181, 168, 0.16);
  color: var(--text-secondary);
  text-align: left;
}

.chat-rail__composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--app-border);
  flex: none;
}
.chat-rail__composer[data-disabled="true"] { opacity: 0.5; pointer-events: none; }
.chat-rail__input {
  flex: 1;
  min-width: 0;
  resize: none;
  max-height: 120px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--app-border);
  background: var(--app-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  outline: none;
  transition: border-color var(--dur-micro) var(--ease-confident);
}
.chat-rail__input::placeholder { color: var(--text-muted); }
.chat-rail__input:focus { border-color: var(--app-border-strong); }
.chat-rail__send {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--app-border-strong);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident);
}
.chat-rail__send:hover:not(:disabled) { background: var(--accent-orange); border-color: var(--accent-orange); color: #14130F; }
.chat-rail__send:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 1240px) {
  .studio__body { grid-template-columns: 1fr; }
  .chat-rail { height: 460px; }
}

@media (max-width: 1100px) {
  .studio__resume { grid-template-columns: 1fr; }
  .studio__charts { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .studio { padding-bottom: 64px; }
  .presence { width: 100%; justify-content: space-between; }
  .studio__head { align-items: flex-start; }
  .panel__foot { display: none; }
}

/* Course carousel sits flush with the rest of the studio gutter. */
.studio__courses { padding: 0; }
.studio__courses .catalog-row__head { padding: 0; margin-bottom: 12px; }
/* The 4px inline padding is headroom for the poster hover-lift; pulling the
   track out by the same amount lands the posters exactly on the gutter. */
.studio__courses .catalog-row__rail {
  padding: 10px 4px 22px;
  margin-inline: -4px;
  scroll-padding-inline: 4px;
}
/* Grow to fill the row when there are only a few courses, but never shrink —
   past a full row the posters keep their size and the rail scrolls. */
.studio__courses .catalog-row__rail .poster {
  width: auto;
  flex: 1 0 190px;
  max-width: 240px;
}
.studio__courses .catalog-row__nav--prev { left: -19px; }
.studio__courses .catalog-row__nav--next { right: -19px; }
.studio__courses .studio-empty { flex: 1; }

/* ============================================================
   COMMUNITY — the full-page version of the studio's chat rail.
   Shares .chat-msg / .chat-rail__input / .chat-rail__send with the
   rail; only the container geometry differs.
   ============================================================ */
.community {
  padding: clamp(24px, 3vw, 40px) var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1100px;
  /* Fill the viewport below the 56px utility bar so the composer sits
     at the bottom of the screen rather than floating mid-page. */
  min-height: calc(100vh - 56px);
}
.community__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.community__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--text-primary);
  margin: 6px 0 0;
}
.community__sub {
  font-size: 14px;
  color: var(--text-body);
  margin: 10px 0 0;
  max-width: 56ch;
}

.community__room {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  overflow: hidden;
}
.community__thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
}
.community__thread::-webkit-scrollbar { width: 6px; }
.community__thread::-webkit-scrollbar-thumb { background: var(--app-border); border-radius: 3px; }
.community__composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--app-border);
  flex: none;
}
.community__composer[data-disabled="true"] { opacity: 0.5; pointer-events: none; }
/* Roomier than the rail: this page has the width for it. */
.community .chat-msg__body { font-size: 14px; max-width: 52ch; }
.community .chat-rail__input { font-size: 14px; padding: 11px 14px; }

@media (max-width: 820px) {
  .community { min-height: calc(100vh - 108px); padding-bottom: 24px; }
}

/* ============================================================
   SETTINGS
   ============================================================ */
.settings {
  padding: clamp(24px, 3vw, 40px) var(--gutter) 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}
.settings__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin: 6px 0 0;
}

.card {
  padding: 24px;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.card__head { display: flex; flex-direction: column; gap: 4px; }
.card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}
.card__note { font-size: 13px; color: var(--text-body); margin: 0; max-width: 60ch; }

.settings__row { display: flex; align-items: center; gap: 18px; }
.settings__row-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.settings__form { display: flex; flex-direction: column; gap: 8px; }
.settings__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.settings__hint { font-size: 12px; color: var(--text-muted); margin: 0; max-width: 60ch; }
.settings__readonly {
  font-size: 14px;
  color: var(--text-primary);
  margin: 0;
}
.settings__field-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.settings__input {
  flex: 1;
  min-width: 220px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--app-border);
  background: var(--app-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color var(--dur-micro) var(--ease-confident);
}
.settings__input::placeholder { color: var(--text-muted); }
.settings__input:focus { border-color: var(--app-border-strong); }
.settings__msg { font-size: 12.5px; margin: 2px 0 0; }
.settings__msg[hidden] { display: none; }
.settings__msg[data-kind="ok"] { color: var(--accent-teal); }
.settings__msg[data-kind="error"] { color: var(--accent-rust); }
.settings__msg[data-kind="info"] { color: var(--text-muted); }

.settings__choices { display: flex; gap: 10px; flex-wrap: wrap; }
.settings__choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--app-border);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident);
}
.settings__choice:hover { color: var(--text-primary); border-color: var(--app-border-strong); }
.settings__choice[aria-pressed="true"] { border-color: var(--accent-orange); color: var(--text-primary); }
.settings__swatch {
  width: 30px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--app-border-strong);
  flex: none;
}
.settings__swatch--dark { background: linear-gradient(140deg, #1F1D19, #0F0E0C); }
.settings__swatch--light { background: linear-gradient(140deg, #FFFFFF, #F4F4F3); }

/* The settings face control is smaller than the studio's. */
.settings .face__btn { width: 72px; }

/* ============================================================
   LEVELS + LEADERBOARD
   XP and levels are derived from lessons completed and watch time —
   see functions/api/app/leaderboard.js for the curve.
   ============================================================ */
.rank[hidden] { display: none; }
.rank__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 16px;
  align-items: start;
}

/* --- Your level card --- */
.level {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background:
    radial-gradient(circle at 88% 8%, rgba(232, 154, 74, 0.14), transparent 58%),
    var(--app-surface);
}
.level__face { position: relative; flex: none; }
.level__img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  border: 2px solid var(--accent-orange);
  background: var(--app-raised);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  color: var(--text-primary);
}
/* The level number rides the avatar, like a rank pip. */
.level__badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 100px;
  display: grid;
  place-items: center;
  background: var(--accent-orange);
  color: #14130F;
  border: 2px solid var(--app-surface);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.level__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.level__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.level__tier {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
}
.level__body .meter { margin-top: 4px; }
.level__meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Ranked list --- */
.rank-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
}
.rank-row {
  display: grid;
  grid-template-columns: 26px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.rank-row--me {
  background: var(--app-bg);
  border-color: var(--app-border);
}
.rank-row__n {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rank-row:nth-child(1) .rank-row__n { color: var(--accent-orange); }
.rank-row__face {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  border: 1px solid var(--app-border);
  background: var(--app-raised);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-primary);
}
.rank-row__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rank-row__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-row__name-you {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-left: 4px;
}
.rank-row__tier {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rank-row__xp {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .rank__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SHOW / HIDE PASSWORD
   The wrapper is injected by lms-password-eye.js around every
   password input, so it has to inherit whatever sizing the field
   had — hence display:flex + width:100%.
   ============================================================ */
/* display:block, not flex: as a flex item in a COLUMN container, `flex: 1`
   sets flex-basis on the vertical axis and the wrapper collapsed to 0 wide. */
.pw-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.pw-wrap > input {
  width: 100%;
  /* These inputs are content-box, so width:100% plus padding pushed the field
     past its wrapper — the password row sat wider than every other field on
     the auth and settings forms. */
  box-sizing: border-box;
  /* Room for the button so long passwords don't run under it. */
  padding-right: 44px;
}
/* Inside a row of controls it has to behave like the field it replaced. */
.settings__field-row .pw-wrap { flex: 1; min-width: 0; width: auto; }
.pw-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-confident),
              background var(--dur-micro) var(--ease-confident);
}
.pw-eye:hover { color: var(--text-primary); background: var(--app-hover); }
.pw-eye:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.pw-eye[aria-pressed="true"] { color: var(--accent-orange); }

/* The auth screens sit outside .learn-app, so they don't get --app-* tokens. */
.auth-field .pw-eye { color: var(--text-muted); }
.auth-field .pw-eye:hover { color: var(--text-primary); background: rgba(240, 234, 219, 0.06); }


/* ============================================================
   MEMBER DIRECTORY
   Card = full-bleed portrait, padded body, flush action footer.
   The portrait and the footer both run to the card's edges; only the
   middle is inset.
   ============================================================ */
.members {
  padding: clamp(24px, 3vw, 40px) var(--gutter) 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
}
.members__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.members__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin: 6px 0 0;
}
.members__sub { font-size: 13px; color: var(--text-body); margin: 10px 0 0; max-width: 60ch; }
.members__filters { display: flex; gap: 8px; }

.members__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}
.member {
  display: flex;
  flex-direction: column;
  /* Zero padding: portrait and footer are edge to edge, body is inset. */
  padding: 0;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  text-align: center;
  overflow: hidden;
  height: 100%;
  transition: border-color var(--dur-micro) var(--ease-confident),
              background var(--dur-micro) var(--ease-confident),
              transform var(--dur-micro) var(--ease-confident);
}
.member:hover { border-color: var(--app-border-strong); transform: translateY(-2px); }

/* ---- Portrait: full width across the top of the card ---- */
.member__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  flex: none;
  background: var(--app-raised);
}
.member__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(232, 154, 74, 0.26), transparent 62%),
    var(--app-raised);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 40px;
  color: var(--text-primary);
}
.member__level {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 100px;
  display: grid;
  place-items: center;
  background: var(--accent-orange);
  color: #14130F;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.member__dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #5FBF8A;
  box-shadow: 0 0 0 3px rgba(15, 14, 12, 0.55);
}

/* ---- Body ---- */
.member__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 14px 16px;
}
.member__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member__name-you {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-left: 4px;
}
.member__meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.member__place {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-body);
  max-width: 100%;
  /* Wraps rather than truncating — "Sunshine Coast, Australia" was ellipsing
     on a narrow card, and a half-shown place name is worse than two lines. */
  text-wrap: balance;
}
.member__place::before { content: '◍ '; color: var(--text-muted); }
.member__tag {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-orange);
  border: 1px solid rgba(232, 154, 74, 0.35);
  border-radius: 100px;
  padding: 3px 9px;
}
/* ---- Action footer: flush to the bottom edge ---- */
.member__foot {
  margin-top: auto;
  width: 100%;
  border-top: 1px solid var(--app-border);
  display: grid;
  grid-template-columns: 1fr;
}
.member__foot--split { grid-template-columns: 1fr 1fr; }
/* Staff footer — same slot as the friend button, but a label, not a control.
   Solid accent so a host reads as a host from across the grid. */
.member__foot--admin { background: var(--accent-orange); border-top-color: var(--accent-orange); }
.member__badge {
  display: block;
  padding: 12px 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #14130F;
}
.member__foot--split .member__btn + .member__btn { border-left: 1px solid var(--app-border); }

.member__btn {
  width: 100%;
  padding: 12px 10px;
  border: none;
  border-radius: var(--radius-btn, 10px);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-confident),
              background var(--dur-micro) var(--ease-confident);
}
.member__btn:hover:not(:disabled) { color: var(--text-primary); background: var(--app-hover); }
.member__btn:disabled { opacity: 0.5; cursor: default; }
.member__btn--solid { background: var(--accent-orange); color: #14130F; }
.member__btn--solid:hover:not(:disabled) { background: var(--accent-orange); color: #14130F; opacity: 0.9; }
.member__btn--muted { color: var(--text-muted); }
.member__btn--is-friend { color: var(--accent-teal); }
.member__btn--is-friend:hover:not(:disabled) { color: var(--accent-rust); background: rgba(184, 92, 40, 0.08); }

/* ---- Friends: the whole card takes the friend colour ---- */
.member[data-friend="friends"] {
  border-color: rgba(111, 181, 168, 0.45);
  background:
    radial-gradient(circle at 50% 100%, rgba(111, 181, 168, 0.18), transparent 65%),
    var(--app-surface);
}
.member[data-friend="friends"]:hover { border-color: var(--accent-teal); }
.member[data-friend="friends"] .member__foot { border-top-color: rgba(111, 181, 168, 0.32); }
.member[data-friend="friends"] .member__level { background: var(--accent-teal); color: #14130F; }
.member[data-friend="friends"] .member__tag {
  color: var(--accent-teal);
  border-color: rgba(111, 181, 168, 0.4);
}

/* ---- Staff: orange, the brand accent ---- */
.member[data-role="admin"] {
  border-color: rgba(232, 154, 74, 0.55);
  background:
    radial-gradient(circle at 50% 100%, rgba(232, 154, 74, 0.18), transparent 65%),
    var(--app-surface);
}
.member[data-role="admin"]:hover { border-color: var(--accent-orange); }
.member[data-role="admin"] .member__level { background: #14130F; color: var(--accent-orange); }

/* ---- A request waiting on you: blue, so it can't be mistaken for staff
   (orange) or an existing friend (teal). Each state also carries its own
   text label, so colour is never the only signal. ---- */
.member[data-friend="incoming"] {
  border-color: rgba(62, 127, 160, 0.6);
  background:
    radial-gradient(circle at 50% 100%, rgba(62, 127, 160, 0.2), transparent 65%),
    var(--app-surface);
}
.member[data-friend="incoming"]:hover { border-color: #3E7FA0; }
.member[data-friend="incoming"] .member__foot { border-top-color: rgba(62, 127, 160, 0.4); }
.member[data-friend="incoming"] .member__btn--solid { background: #3E7FA0; color: #F0EADB; }
.member[data-friend="incoming"] .member__btn--solid:hover:not(:disabled) { background: #3E7FA0; color: #F0EADB; opacity: 0.9; }
.member[data-friend="incoming"] .member__level { background: #3E7FA0; color: #F0EADB; }

@media (max-width: 560px) {
  .members__grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .member__photo { font-size: 30px; }
}

/* ============================================================
   EVENTS — what's on, live from the Notion Events database
   ============================================================ */
.events {
  padding: clamp(24px, 3vw, 40px) var(--gutter) 96px;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.2vw, 40px);
  max-width: 1100px;
}
.events__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.events__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin: 6px 0 0;
}
.events__sub { font-size: 13.5px; color: var(--text-body); margin: 10px 0 0; max-width: 60ch; }
.events__section[hidden] { display: none; }
.events__list { display: flex; flex-direction: column; gap: 10px; }

/* ---- Hero: the next thing happening ---- */
.event-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Tall enough for the reel to read as footage rather than a texture,
     without pushing the rest of the calendar off the fold. */
  min-height: clamp(360px, 46vh, 520px);
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background:
    radial-gradient(circle at 82% 12%, rgba(232, 154, 74, 0.16), transparent 58%),
    var(--app-surface);
}
.event-hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.event-hero[data-has-image="true"] .event-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(15,14,12,0.94) 0%, rgba(15,14,12,0.6) 55%, rgba(15,14,12,0.15) 100%),
    linear-gradient(180deg, rgba(15,14,12,0) 40%, rgba(15,14,12,0.85) 100%);
}
/* With artwork behind it the card keeps dark ink whatever the chrome theme. */
.event-hero[data-has-image="true"] {
  --text-primary: #F0EADB;
  --text-body: #C4BDAF;
  --text-muted: #A69F91;
  --accent-orange: #E89A4A;
}
.event-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 60ch; }
.event-hero__when {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-orange);
}
.event-hero__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
.event-hero__meta { font-size: 13px; color: var(--text-body); }
.event-hero__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.event-hero .event__cta { margin-top: 8px; }

/* ---- Row ---- */
.event {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px 14px 14px;
  border-radius: 12px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  transition: border-color var(--dur-micro) var(--ease-confident);
}
.event:hover { border-color: var(--app-border-strong); }
.event--past { opacity: 0.62; }

.event__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.event__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.event__side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.event__countdown {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--app-border);
  border-radius: 100px;
  padding: 4px 10px;
}
.event__price {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
  white-space: nowrap;
}
/* Availability carries a word as well as a colour — never colour alone. */
.event__avail {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 4px 10px;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.event__avail[data-tone="open"] { color: var(--accent-teal); }
.event__avail[data-tone="low"]  { color: var(--accent-orange); }
.event__avail[data-tone="out"]  { color: var(--text-muted); }
.event__avail[data-tone="soon"] { color: #3E7FA0; }

@media (max-width: 760px) {
  .event {
    grid-template-columns: 50px minmax(0, 1fr);
    row-gap: 10px;
    padding: 12px;
  }
  .event__side { grid-column: 2; justify-content: flex-start; }
  .event__cta { grid-column: 1 / -1; justify-content: center; }
  .event__meta { white-space: normal; }
}

/* ---- Event row v2: poster, explicit date + venue, prominent price ---- */
.event {
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 18px 14px 14px;
}

/* Poster reference — 2:3, the same proportion as a course poster. */
.event__poster {
  position: relative;
  width: 68px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 8px 7px;
  background: var(--app-bg);
  border: 1px solid var(--app-border);
}
.event__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No artwork in Notion yet — a tone plate keyed to the event type, so the
   row reads as a poster slot rather than a broken image. */
.event__poster--blank[data-tone="rust"]     { background: linear-gradient(165deg, #8C3818 0%, #2A1710 70%, #14130F 100%); }
.event__poster--blank[data-tone="teal"]     { background: linear-gradient(165deg, #4A8F87 0%, #1F3D3A 70%, #14130F 100%); }
.event__poster--blank[data-tone="blue"]     { background: linear-gradient(165deg, #2F6480 0%, #15303F 70%, #14130F 100%); }
.event__poster--blank[data-tone="charcoal"] { background: linear-gradient(165deg, #3C3833 0%, #1A1813 70%, #14130F 100%); }
.event__poster-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  height: 2px;
  width: 100%;
}
.event__poster-bars > span:nth-child(1) { background: var(--accent-orange); }
.event__poster-bars > span:nth-child(2) { background: #D47A3A; }
.event__poster-bars > span:nth-child(3) { background: var(--accent-rust); }
.event__poster-bars > span:nth-child(4) { background: var(--accent-teal); }
.event__poster-bars > span:nth-child(5) { background: #4A8F87; }
.event__poster-bars > span:nth-child(6) { background: var(--accent-blue); }
.event__poster-city {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F0EADB;
  line-height: 1.2;
}

.event__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.event__type {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-orange);
}
.event__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.event__line {
  font-size: 12.5px;
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event__line::before { content: '◷ '; color: var(--text-muted); }
.event__line--where::before { content: '◍ '; }
.event__line--tba { color: var(--text-muted); font-style: normal; }

/* Right column: price leads, then availability, then the action. */
.event__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  flex: none;
}
.event__price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.event__price--hero { font-size: clamp(24px, 2.6vw, 32px); }
.event-hero__foot { align-items: baseline; }
.event-hero .event__line { font-size: 13.5px; }

@media (max-width: 760px) {
  .event {
    grid-template-columns: 58px minmax(0, 1fr);
    row-gap: 12px;
  }
  .event__poster { width: 58px; }
  .event__side {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .event__line { white-space: normal; }
}

/* ---- Event row v3: one line, separated by hairlines ----------------
   The right column was a big price, a bordered pill and a filled button
   stacked on top of each other — three competing boxes. It's now a
   single baseline-aligned line with 1px rules between the parts, and the
   status is a marked word rather than another container.
   ------------------------------------------------------------------ */
.event__side {
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.event__avail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 9.5px;
  letter-spacing: 0.14em;
}
.event__avail > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.event__avail[data-tone="out"] > i { background: none; box-shadow: inset 0 0 0 1px currentColor; }

.event__price { font-size: 20px; }
.event__cta { padding: 9px 16px; font-size: 11.5px; }

/* ---- Hero foot gets the same treatment ---- */
.event-hero__foot {
  align-items: center;
  gap: 0;
  margin-top: 4px;
}
.event__countdown {
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 9.5px;
  letter-spacing: 0.14em;
}

@media (max-width: 760px) {
  .event__side { flex-wrap: wrap; row-gap: 10px; }
  .event-hero__foot { flex-wrap: wrap; row-gap: 8px; }
}


/* ---- Event row v4: visible rules, outlined ticket button -----------
   v3 used borders on the text spans: only as tall as the text and at
   12% opacity, so they read as nothing. These are real elements with
   their own height and weight.
   ------------------------------------------------------------------ */
.event__side { gap: 16px; }
.event__rule {
  width: 1px;
  height: 30px;
  flex: none;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--app-border-strong) 22%,
    var(--app-border-strong) 78%,
    transparent
  );
}

/* Outlined, not a white blob. Fills with the accent on hover, and the
   arrow steps forward — same behaviour as the buttons on the tour site. */
.event__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--accent-orange);
  background: transparent;
  color: var(--accent-orange);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident);
}
.event__cta > i {
  font-style: normal;
  transition: transform var(--dur-micro) var(--ease-confident);
}
.event__cta:hover { background: var(--accent-orange); color: #14130F; }
.event__cta:hover > i { transform: translateX(3px); }

.event-hero__foot { gap: 18px; }
.event-hero .event__rule { height: 34px; background: linear-gradient(to bottom, transparent, rgba(240,234,219,0.34) 22%, rgba(240,234,219,0.34) 78%, transparent); }
.event-hero .event__cta { padding: 12px 22px; font-size: 13px; }

@media (max-width: 760px) {
  .event__side { flex-wrap: wrap; row-gap: 12px; gap: 12px; }
  .event__side .event__cta { width: 100%; justify-content: center; }
  /* A rule immediately before a full-width button just floats. */
  .event__side .event__cta + .event__rule,
  .event__side .event__rule:has(+ .event__cta) { display: none; }
}

/* ---- "Next up" background reel ----
   Cloudflare Stream serves a 16:9 iframe; this covers a card of any shape,
   the same technique the homepage hero uses. */
.event-hero__reel {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.9;
  filter: saturate(0.95) contrast(1.02);
}
.event-hero__reel iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* ---- Hero: anchor the top of the frame ----
   With the card at 360-520px tall, copy sitting only at the bottom read as
   having slid down an empty rectangle. A mark top-left and the status
   top-right give the composition two ends, the way the poster card does. */
.event-hero { flex-direction: column; justify-content: space-between; align-items: stretch; }
.event-hero__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
/* Outlined tag holding the brand stripes and the category, so the top-left
   anchor is an object rather than loose marks floating on footage. */
.event-hero__mark {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid rgba(240, 234, 219, 0.22);
  background: rgba(15, 14, 12, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.event-hero__bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  height: 3px;
  width: 40px;
  flex: none;
}
.event-hero__bars > span:nth-child(1) { background: var(--accent-orange); }
.event-hero__bars > span:nth-child(2) { background: #D47A3A; }
.event-hero__bars > span:nth-child(3) { background: var(--accent-rust); }
.event-hero__bars > span:nth-child(4) { background: var(--accent-teal); }
.event-hero__bars > span:nth-child(5) { background: #4A8F87; }
.event-hero__bars > span:nth-child(6) { background: var(--accent-blue); }
.event-hero__type {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F0EADB;
  white-space: nowrap;
}
/* Status reads against artwork up here, so it gets a backing. */
.event__avail--hero {
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid rgba(240, 234, 219, 0.22);
  background: rgba(15, 14, 12, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Top corner needs its own falloff now there's content in it. */
.event-hero[data-has-image="true"] .event-hero__scrim {
  background:
    linear-gradient(90deg, rgba(15,14,12,0.94) 0%, rgba(15,14,12,0.6) 55%, rgba(15,14,12,0.15) 100%),
    linear-gradient(180deg, rgba(15,14,12,0.7) 0%, rgba(15,14,12,0.15) 30%, rgba(15,14,12,0.2) 45%, rgba(15,14,12,0.9) 100%);
}

/* ---- Community: rooms rail, room head, day dividers, grouping ---- */
.community__grid {
  flex: 1;
  min-height: 0;
  display: grid;
  /* rooms · thread · people */
  grid-template-columns: 190px minmax(0, 1fr) 210px;
  gap: 16px;
  align-items: stretch;
}

.rooms {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 10px;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  align-self: start;
}
.rooms__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 2px 10px 8px;
}
.room {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border: none;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-confident);
}
.room:hover { background: var(--app-hover); }
.room[aria-pressed="true"] { background: var(--app-hover); }
.room__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--text-body);
}
.room[aria-pressed="true"] .room__name { color: var(--accent-orange); }
.room__blurb { font-size: 11px; color: var(--text-muted); }

.community__roomhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--app-border);
  flex: none;
}
.community__roomname {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.community__roomname::before { content: '# '; color: var(--text-muted); }

/* Day divider — a rule with the day sitting in it. */
.chat-day {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0;
}
.chat-day::before,
.chat-day::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--app-border);
}
.chat-day > span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Consecutive messages from the same person tuck under the first. */
.chat-msg--grouped { margin-top: -12px; }
.chat-msg__face--spacer { background: none; border: none; }

@media (max-width: 1180px) {
  .community__grid { grid-template-columns: 180px minmax(0, 1fr); }
  /* People move under the thread rather than squeezing the conversation. */
  .rooms--dm { grid-column: 1 / -1; align-self: start; }
  .rooms--dm .rooms__people { flex-direction: row; overflow-x: auto; }
  .rooms--dm .dm { flex: none; width: auto; }
}

@media (max-width: 820px) {
  .community__grid { grid-template-columns: 1fr; }
  .rooms { flex-direction: row; overflow-x: auto; padding: 10px; }
  .rooms--dm { flex-direction: column; }
  .rooms__label { display: none; }
  .rooms--dm .rooms__label { display: block; }
  .room { flex: none; }
  .room__blurb { display: none; }
}

/* ---- Direct messages in the rooms rail ---- */
/* The people rail can run long — let it scroll rather than stretch the page. */
.rooms--dm { align-self: stretch; overflow-y: auto; scrollbar-width: thin; }
.rooms--dm::-webkit-scrollbar { width: 6px; }
.rooms--dm::-webkit-scrollbar-thumb { background: var(--app-border); border-radius: 3px; }
.rooms__people { display: flex; flex-direction: column; gap: 2px; }
.rooms__loading { font-size: 11px; color: var(--text-muted); padding: 2px 11px; }

.dm {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 11px;
  border: none;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-confident);
}
.dm:hover, .dm[aria-pressed="true"] { background: var(--app-hover); }
.dm__face {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--app-border);
  background: var(--app-raised);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10px;
  color: var(--text-primary);
}
.dm__name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm[aria-pressed="true"] .dm__name { color: var(--accent-orange); }
.dm__dot { width: 7px; height: 7px; border-radius: 50%; background: #5FBF8A; flex: none; }

/* A DM heading is a person, not a channel — drop the # */
.community__roomname[data-kind="dm"]::before { content: ''; }

/* ============================================================
   CINE ASSETS — /learn/library
   The downloadable shelf. Cards are the members grid's structure
   (art / body / flush footer) at a wider tile, because an asset
   needs a line of description where a member needs a name.
   ============================================================ */
.library {
  padding: clamp(24px, 3vw, 40px) var(--gutter) 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
}
.library__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.library__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin: 6px 0 0;
}
.library__sub { font-size: 13.5px; color: var(--text-body); margin: 10px 0 0; max-width: 60ch; }
.library__filters { display: flex; gap: 8px; }

.library__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.asset {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  overflow: hidden;
  height: 100%;
  transition: border-color var(--dur-micro) var(--ease-confident),
              transform var(--dur-micro) var(--ease-confident);
}
.asset:hover { border-color: var(--app-border-strong); transform: translateY(-2px); }

/* ---- Art: thumbnail, or the file type set large ---- */
.asset__art {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  flex: none;
  background: var(--app-raised);
}
.asset__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.asset__image--blank {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(232, 154, 74, 0.22), transparent 64%),
    var(--app-raised);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
}
.asset__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-orange);
  border: 1px solid rgba(232, 154, 74, 0.35);
  border-radius: 100px;
  padding: 4px 10px;
  /* Sits over artwork as often as over the blank tile, so it carries its
     own dark ground rather than trusting whatever is behind it. */
  background: rgba(15, 14, 12, 0.72);
  backdrop-filter: blur(6px);
}

/* ---- Body ---- */
.asset__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 16px;
}
.asset__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}
.asset__desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-body);
  margin: 0;
}
.asset__meta {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Action footer: flush to the bottom edge, as on member cards ---- */
.asset__foot {
  margin-top: auto;
  width: 100%;
  border-top: 1px solid var(--app-border);
}
.asset__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident);
}
.asset__btn:hover { background: var(--accent-orange); color: #14130F; }
.asset__btn-ext { color: var(--text-muted); letter-spacing: 0.12em; }
.asset__btn:hover .asset__btn-ext { color: #14130F; opacity: 0.7; }
/* Sample rows have nothing to download — a label, not a control. */
.asset__btn--muted { color: var(--text-muted); cursor: default; }
.asset__btn--muted:hover { background: transparent; color: var(--text-muted); }

@media (max-width: 640px) {
  .library__grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* The tag's scrim is hardcoded because it sits over artwork, so it has to
   flip by hand — rust orange on a dark chip is unreadable in light chrome. */
:root[data-ui="light"] .learn-app .asset__tag {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(184, 92, 40, 0.4);
}

/* ---- Cine Assets: packs ----------------------------------------
   Packs are the better-value way in, so they get a wider card and the
   only solid button on the page. Everything else here is a ghost. */
.library__section[hidden] { display: none; }
.library__packs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.pack {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  overflow: hidden;
  height: 100%;
  transition: border-color var(--dur-micro) var(--ease-confident),
              transform var(--dur-micro) var(--ease-confident);
}
.pack:hover { border-color: var(--accent-orange); transform: translateY(-2px); }
.pack__art {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  flex: none;
  background: var(--app-raised);
}
.pack__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.pack__image--blank {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 26% 22%, rgba(232, 154, 74, 0.3), transparent 66%),
    var(--app-raised);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.22em;
  color: var(--text-secondary);
}
.pack__body { display: flex; flex-direction: column; gap: 7px; padding: 16px 16px 18px; }
.pack__count {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-orange);
}
.pack__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
}
.pack__desc { font-size: 12.5px; line-height: 1.45; color: var(--text-body); margin: 0; }
.pack__includes {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 2px 0 0;
}
.pack__price { display: flex; align-items: baseline; gap: 9px; margin-top: 8px; flex-wrap: wrap; }
.pack__price-now {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.pack__price-was {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.pack__save {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-teal);
  border: 1px solid rgba(111, 181, 168, 0.4);
  border-radius: 100px;
  padding: 3px 9px;
}
.pack__foot { margin-top: auto; width: 100%; }
.pack__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 12px;
  background: var(--accent-orange);
  color: #14130F;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--dur-micro) var(--ease-confident);
}
.pack__btn:hover { opacity: 0.9; }
.pack__btn-price { font-variant-numeric: tabular-nums; opacity: 0.72; }
.pack__btn--muted {
  background: transparent;
  border-top: 1px solid var(--app-border);
  color: var(--text-muted);
  cursor: default;
}
.pack__btn--muted:hover { opacity: 1; }

/* ---- Cine Assets: free vs paid on the single cards ---- */
.asset__free {
  position: absolute;
  right: 10px;
  top: 10px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-teal);
  border: 1px solid rgba(111, 181, 168, 0.4);
  border-radius: 100px;
  padding: 4px 10px;
  /* Same reasoning as .asset__tag — it sits over artwork as often as not. */
  background: rgba(15, 14, 12, 0.72);
  backdrop-filter: blur(6px);
}
/* A paid single is still a ghost button: the pack is the offer we're making. */
.asset__btn--buy { color: var(--accent-orange); }
.asset__btn-price { font-variant-numeric: tabular-nums; opacity: 0.72; }
.asset__btn--buy:hover .asset__btn-price { color: #14130F; opacity: 0.7; }

:root[data-ui="light"] .learn-app .asset__free {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(74, 143, 135, 0.45);
}

@media (max-width: 640px) {
  .library__packs { grid-template-columns: 1fr; }
}

/* ============================================================
   NOTIFICATIONS — the bell dropdown in the top rail
   ============================================================ */
.notif { position: relative; flex: none; display: flex; }

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40; /* above the rail's own 30 */
  width: min(340px, calc(100vw - 32px));
  max-height: min(440px, calc(100vh - 96px));
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.notif-panel[hidden] { display: none; }

.notif-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--app-border);
  flex: none;
}
.notif-panel__title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.notif-panel__body { overflow-y: auto; overscroll-behavior: contain; }

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--app-border);
  transition: background var(--dur-micro) var(--ease-confident);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--app-hover); }
/* Unread marker: a warm hairline down the leading edge rather than a second
   dot — the bell already owns the dot, and two of them read as two states. */
.notif-item[data-new="true"] { box-shadow: inset 2px 0 0 var(--accent-orange); }

.notif-item__face {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  border: 1px solid var(--app-border);
  background: var(--app-raised);
  color: var(--text-secondary);
}
.notif-item__face--icon[data-kind="friend"] { color: var(--accent-teal); }
.notif-item__face--icon[data-kind="event"] { color: var(--accent-orange); }

.notif-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-item__title {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-primary);
}
.notif-item__body {
  font-size: 11.5px;
  line-height: 1.35;
  /* Body copy, not metadata — muted grey is too thin to read on the white
     panel in light chrome. The timestamp beside it stays muted. */
  color: var(--text-body);
  /* One line only — the panel is a nudge, the room has the conversation. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-item__time {
  flex: none;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 2px;
}

.notif-group {
  padding: 10px 14px 6px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--app-border);
  background: var(--app-raised);
}

.notif-empty, .notif-note {
  margin: 0;
  padding: 22px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}
.notif-note {
  padding: 10px 14px 14px;
  font-size: 11px;
  border-top: 1px solid var(--app-border);
}

@media (max-width: 520px) {
  /* Anchored to the rail rather than the button, so it can't hang off-screen. */
  .notif-panel { position: fixed; top: 62px; right: 16px; left: 16px; width: auto; }
}

/* ============================================================
   HOVER PREVIEW — the 16:9 panel a poster raises
   Lives on <body> and is position:fixed, because the poster rows
   scroll horizontally and clip anything grown inside them.
   The panel IS the frame: title and meta sit over the video.
   ============================================================ */
.preview {
  position: fixed;
  z-index: 60;
  border-radius: 12px;
  overflow: hidden;
  background: #0F0E0C;
  /* Warm hairline, not an accent ring — the orange outline shouted louder
     than the frame it was around. Separation comes from the shadow. */
  border: 1px solid rgba(240, 234, 219, 0.14);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.72);
  opacity: 0;
  /* Opens by growing out of the poster it belongs to: seated over the card at
     2:3, then out to the right into 16:9. Geometry has to animate for that,
     so left/top/width/height are in the transition — a transform cannot take
     one aspect ratio to another without squashing the picture inside it. */
  transition: opacity 140ms cubic-bezier(0.16, 1, 0.3, 1),
              left 380ms cubic-bezier(0.16, 1, 0.3, 1),
              top 380ms cubic-bezier(0.16, 1, 0.3, 1),
              width 380ms cubic-bezier(0.16, 1, 0.3, 1),
              height 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.preview[data-open="true"] { opacity: 1; }
/* On the way out the panel fades rather than blinking off, so the card
   underneath cross-fades back in. While it is fading it must not swallow the
   pointer, or the poster it is sitting over can't be hovered again. */
.preview:not([data-open]) { pointer-events: none; }

/* Cards pushed aside for an opening preview. Matches the panel's travel so
   the two read as one movement rather than two. */
.poster[data-shoved] {
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* The card the panel is standing in for. It is 2:3 and the stage is 16:9, so
   its top and bottom edges showed above and below the panel. Kept in the
   layout and still hoverable — only its paint goes. */
.poster[data-previewing] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .preview { transition: opacity 140ms linear; }
}
.preview[hidden] { display: none; }

/* The whole panel still opens the course, but as a layer underneath the copy
   rather than a wrapper around it — buttons cannot live inside an <a>. */
.preview__link { position: absolute; inset: 0; z-index: 2; }

/* ---- Stage: the whole panel ---- */
.preview__stage {
  position: relative;
  display: block;
  width: 100%;
  /* Fills the panel rather than declaring its own ratio — the panel is what
     travels from the poster's 2:3 to 16:9, and a fixed ratio here would fight
     it mid-flight. */
  height: 100%;
  background: #0F0E0C;
  overflow: hidden;
}
.preview__still,
.preview__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.preview__still { object-fit: cover; z-index: 0; }
/* The course still holds the stage, then the reel fades up over it once it is
   actually playing. Covering it the instant the iframe exists showed the
   player's own black ground first, which read as the preview breaking. */
.preview__video {
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-confident);
}
.preview__video.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .preview__video { transition: none; }
}

/* Copy sits on the video, so it carries its own ground. */
.preview__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(15,14,12,0.45) 0%,
    rgba(15,14,12,0) 34%,
    rgba(15,14,12,0.72) 78%,
    rgba(15,14,12,0.94) 100%);
}
.preview__badge {
  position: absolute;
  z-index: 3;
  left: 12px;
  top: 12px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F0EADB;
  background: rgba(15, 14, 12, 0.7);
  border: 1px solid rgba(240, 234, 219, 0.2);
  border-radius: 100px;
  padding: 4px 9px;
  backdrop-filter: blur(6px);
}

/* ---- Body: overlaid along the bottom of the frame ---- */
.preview__body {
  position: absolute;
  z-index: 3;
  /* Above the link layer, so clicks on the copy have to be let through to it. */
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 15px;
}
.preview__series {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-orange);
}
.preview__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #F0EADB;
}
.preview__meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240, 234, 219, 0.62);
}
/* One line of the course's own promise. Two at most — the panel is a glance,
   not the course page. */
.preview__blurb {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(240, 234, 219, 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Progress ---- */
.preview__progress {
  display: block;
  height: 3px;
  margin-top: 9px;
  background: rgba(240, 234, 219, 0.22);
}
.preview__progress > span { display: block; height: 100%; background: var(--accent-orange); }
.preview__progress-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 234, 219, 0.62);
  margin-top: 5px;
}

/* ---- Actions ---- */
.preview__actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  /* The body sits over the link so its text can be read, but only the buttons
     should swallow a click — everywhere else opens the course. */
  pointer-events: auto;
}
.preview__btn {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: var(--radius-btn, 10px);
  border: 1px solid rgba(240, 234, 219, 0.28);
  background: rgba(15, 14, 12, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #F0EADB;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident),
              border-color var(--dur-micro) var(--ease-confident);
}
.preview__btn:hover { background: var(--bone-white); border-color: var(--bone-white); color: #14130F; }
.preview__btn--go { background: var(--bone-white); border-color: var(--bone-white); color: #14130F; }
.preview__btn--go:hover { background: #FFF; border-color: #FFF; }
/* Saved. The tick carries it; the fill would shout over the primary action. */
.preview__btn[aria-pressed="true"] {
  border-color: var(--accent-orange);
  color: var(--accent-orange);
}
.preview__btn[aria-pressed="true"]:hover {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  color: #14130F;
}

@media (prefers-reduced-motion: reduce) {
  .preview { transition: none; }
}

/* ============================================================
   STUDIO ADMIN — /learn/admin
   Layered cards on a slightly recessed ground, colour-coded
   progress, chips, and circular actions. The reference Peter
   sent was light; this takes its structure and motion, not its
   palette — the ground goes darker so cards can sit above it.
   ============================================================ */
.admin {
  padding: clamp(24px, 3vw, 40px) var(--gutter) 96px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1240px;
}
/* The sections live inside this wrapper, so .admin's gap applies to the
   wrapper and never between them. Without this they stacked with no
   separation at all, which left every heading crowding the section above it
   and drifting away from its own content. */
.admin [data-admin-body] {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* A heading belongs to what comes after it. The section's own gap sets that
   distance; this margin was adding a second one on top. */
.admin .studio__section-head { margin-bottom: 0; }
/* The header is the box now, rather than the takings figure carrying its own
   outline inside it. */
.admin__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px solid var(--app-border);
  background:
    radial-gradient(90% 160% at 100% 0%, rgba(232, 154, 74, 0.07), transparent 60%),
    var(--app-surface);
}
.admin__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin: 6px 0 0;
}
.admin__sub { font-size: 13.5px; color: var(--text-body); margin: 10px 0 0; max-width: 60ch; }

.admin__section { display: flex; flex-direction: column; gap: 14px; }
.admin__stamp {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Entrance: sections rise in sequence -------------------------
   80ms apart, matching the brand's hero stagger. Purely decorative,
   so it is removed wholesale under reduced motion rather than sped up. */
@keyframes admin-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
[data-reveal] {
  opacity: 0;
  animation: admin-rise 640ms var(--ease-confident) forwards;
}
[data-reveal]:nth-of-type(1) { animation-delay: 40ms; }
[data-reveal]:nth-of-type(2) { animation-delay: 120ms; }
[data-reveal]:nth-of-type(3) { animation-delay: 200ms; }
[data-reveal]:nth-of-type(4) { animation-delay: 280ms; }
[data-reveal]:nth-of-type(5) { animation-delay: 360ms; }

/* ---- Stat tiles ---- */
/* Fixed columns, not auto-fit: six tiles on an auto-fit grid wrapped 5-and-1
   and left one stranded on its own row. */
.admin__tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1180px) { .admin__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .admin__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.atile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 16px 14px;
  border-radius: 18px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  overflow: hidden;
  transition: transform var(--dur-micro) var(--ease-confident),
              border-color var(--dur-micro) var(--ease-confident);
}
.atile:hover { transform: translateY(-2px); border-color: var(--app-border-strong); }
/* A wash bleeding in from the corner, so the tiles aren't six identical
   rectangles. Tinted per tone rather than per tile, so it still reads as a set. */
.atile::after {
  content: '';
  position: absolute;
  inset: auto -30% -60% auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 234, 219, 0.05), transparent 70%);
  pointer-events: none;
}
.atile[data-tone="accent"]::after { background: radial-gradient(circle, rgba(232, 154, 74, 0.16), transparent 70%); }
.atile[data-tone="live"]::after { background: radial-gradient(circle, rgba(111, 181, 168, 0.14), transparent 70%); }
.atile[data-tone="warn"]::after { background: radial-gradient(circle, rgba(184, 92, 40, 0.14), transparent 70%); }

.atile__head { display: flex; align-items: center; gap: 8px; }
.atile__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: var(--app-raised);
  border: 1px solid var(--app-border);
  color: var(--text-secondary);
}
.atile[data-tone="accent"] .atile__icon { color: var(--accent-orange); border-color: rgba(232, 154, 74, 0.3); }
.atile[data-tone="live"] .atile__icon { color: var(--accent-teal); border-color: rgba(111, 181, 168, 0.3); }
.atile[data-tone="warn"] .atile__icon { color: var(--accent-rust); border-color: rgba(184, 92, 40, 0.3); }
.atile__label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.3;
}
.atile__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.atile__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.atile__hint { font-size: 11.5px; color: var(--text-muted); }
.atile__delta {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-teal);
  border: 1px solid rgba(111, 181, 168, 0.32);
  border-radius: 100px;
  padding: 3px 8px;
  white-space: nowrap;
}
.atile__delta[hidden] { display: none; }
.atile__delta[data-dir="down"] { color: var(--accent-rust); border-color: rgba(184, 92, 40, 0.34); }

/* ---- Panels ---- */
.admin__split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin__panel {
  border: 1px solid var(--app-border);
  border-radius: 18px;
  background: var(--app-surface);
  padding: 15px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.admin__panel-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Order rows, each with its own circular action ---- */
.admin__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.admin__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--app-border);
}
.admin__row:last-child { border-bottom: none; }
.admin__row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin__row-title { font-size: 13px; color: var(--text-primary); }
.admin__row-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin__row-value {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.admin__row-when {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 34px;
  text-align: right;
}

/* ---- Revenue bars ---- */
.admin__bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.admin__bar { display: flex; flex-direction: column; gap: 6px; }
.admin__bar-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.admin__bar-name { font-size: 12.5px; color: var(--text-body); }
.admin__bar-value {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.admin__bar-track {
  display: block;
  height: 7px;
  border-radius: 100px;
  background: var(--app-raised);
  overflow: hidden;
}
/* Grows from nothing on load, so the comparison draws itself. */
@keyframes admin-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.admin__bar-track > i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--accent-orange);
  transform-origin: left center;
  animation: admin-fill 760ms var(--ease-confident) both;
  animation-delay: 260ms;
}
.admin__bar-sub {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Course cards: the table became cards, which is where the
        reference's medication grid earns its keep ---- */
.admin__courses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.ccard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 16px 14px;
  border-radius: 18px;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  transition: transform var(--dur-micro) var(--ease-confident),
              border-color var(--dur-micro) var(--ease-confident);
}
.ccard:hover { transform: translateY(-2px); border-color: var(--app-border-strong); }
.ccard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ccard__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.ccard__chip {
  flex: none;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 4px 9px;
  white-space: nowrap;
  border: 1px solid;
}
/* The chip names the problem, so the colour has to mean something:
   nobody started it, some did, most did. */
.ccard__chip[data-state="cold"] { color: var(--accent-rust); border-color: rgba(184, 92, 40, 0.34); }
.ccard__chip[data-state="warm"] { color: var(--accent-orange); border-color: rgba(232, 154, 74, 0.34); }
.ccard__chip[data-state="good"] { color: var(--accent-teal); border-color: rgba(111, 181, 168, 0.34); }

.ccard__stats { display: flex; gap: 18px; }
.ccard__stat { display: flex; flex-direction: column; gap: 2px; }
.ccard__stat-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.ccard__stat-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ccard__track {
  display: block;
  height: 7px;
  border-radius: 100px;
  background: var(--app-raised);
  overflow: hidden;
}
.ccard__track > i {
  display: block;
  height: 100%;
  border-radius: 100px;
  transform-origin: left center;
  animation: admin-fill 760ms var(--ease-confident) both;
  animation-delay: 300ms;
}
.ccard__track > i[data-state="cold"] { background: var(--accent-rust); }
.ccard__track > i[data-state="warm"] { background: var(--accent-orange); }
.ccard__track > i[data-state="good"] { background: var(--accent-teal); }

.ccard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--app-border);
}
.ccard__meta { font-size: 11.5px; color: var(--text-muted); }
/* Circular action, straight from the reference. */
.ccard__go {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--app-border);
  background: var(--app-raised);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident),
              transform var(--dur-micro) var(--ease-confident);
}
.ccard__go:hover {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  color: #14130F;
  transform: translateX(2px);
}

/* ---- Tables ---- */
.admin__table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admin__table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--app-border);
  white-space: nowrap;
}
.admin__table td {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid var(--app-border);
  color: var(--text-body);
  vertical-align: middle;
}
.admin__table tbody tr { transition: background var(--dur-micro) var(--ease-confident); }
.admin__table tbody tr:hover { background: var(--app-hover); }
.admin__table tr:last-child td { border-bottom: none; }
.admin__table td:first-child { color: var(--text-primary); }
.admin__table td:not(:first-child),
.admin__table th:not(:first-child) { font-variant-numeric: tabular-nums; }

.admin__who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.admin__face {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  border: 1px solid var(--app-border);
  background: var(--app-raised);
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-primary);
}
.admin__who-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.admin__who-name { font-size: 12.5px; color: var(--text-primary); }
.admin__who-email {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 26ch;
}
.admin__pill {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-orange);
  border: 1px solid rgba(232, 154, 74, 0.35);
  border-radius: 100px;
  padding: 2px 6px;
  margin-left: 4px;
}
.admin__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5FBF8A;
  margin-left: 4px;
  box-shadow: 0 0 0 3px rgba(95, 191, 138, 0.14);
}
.admin__warn { color: var(--accent-orange); }

.admin__search { display: block; }
.admin__search input {
  width: 100%;
  box-sizing: border-box;
  background: var(--app-raised);
  border: 1px solid var(--app-border);
  border-radius: 100px;
  padding: 11px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-primary);
}
.admin__search input::placeholder { color: var(--text-muted); }
.admin__search input:focus {
  outline: none;
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(232, 154, 74, 0.14);
}
.admin__more { display: flex; justify-content: center; }
.admin__more button[hidden] { display: none; }

/* ---- Content health ---- */
.admin__health { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.admin__health-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--app-border);
}
.admin__health-row:last-child { border-bottom: none; }
.admin__health-name {
  font-size: 12.5px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin__health-gaps { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.admin__gap {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-orange);
  border: 1px solid rgba(232, 154, 74, 0.3);
  border-radius: 100px;
  padding: 3px 8px;
  white-space: nowrap;
}
.admin__health-status {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 78px;
  text-align: right;
}

@media (max-width: 900px) {
  .admin__split { grid-template-columns: 1fr; }
  .admin__panel { overflow-x: auto; }
  .admin__health-row { grid-template-columns: 1fr; gap: 6px; }
  .admin__health-gaps { justify-content: flex-start; }
  .admin__health-status { text-align: left; }
}

/* Decoration, so it goes entirely rather than running faster. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; animation: none; }
  .admin__bar-track > i,
  .ccard__track > i { animation: none; }
  .atile:hover, .ccard:hover { transform: none; }
}

/* ============================================================
   FIRST-RUN SETUP — /learn/welcome
   Lives inside the auth card, so it borrows the field and button
   styles and only adds what the three steps need.
   ============================================================ */
.setup { display: flex; flex-direction: column; gap: 14px; }
.setup[hidden] { display: none; }

.setup__dots { display: flex; gap: 6px; }
.setup__dots > span {
  width: 22px;
  height: 3px;
  border-radius: 100px;
  background: rgba(240, 234, 219, 0.14);
  transition: background var(--dur-micro) var(--ease-confident);
}
.setup__dots > span.is-current { background: var(--accent-orange); }
.setup__dots > span.is-done { background: rgba(232, 154, 74, 0.45); }

.setup__step { display: flex; flex-direction: column; gap: 9px; }
.setup__step[hidden] { display: none; }
.setup__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.setup__label--spaced { margin-top: 6px; }
.setup__name { width: 100%; }

/* ---- Photo ---- */
.setup__photo { display: flex; align-items: center; gap: 12px; }
.setup__face {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 234, 219, 0.14);
  background: rgba(11, 10, 8, 0.55);
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-secondary);
}
.setup__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.setup__photo-actions { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.setup__file {
  align-self: flex-start;
  border: 1px solid rgba(240, 234, 219, 0.16);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident);
}
.setup__file:hover { border-color: var(--accent-orange); color: var(--accent-orange); }
.setup__hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }

/* ---- Chips ---- */
.setup__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.setup__chip {
  border: 1px solid rgba(240, 234, 219, 0.14);
  border-radius: 100px;
  background: transparent;
  padding: 8px 13px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-body);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-confident),
              background var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident);
}
.setup__chip:hover { border-color: rgba(240, 234, 219, 0.3); color: var(--text-primary); }
/* Chosen chips fill, so a glance across the row counts the answers. */
.setup__chip[aria-pressed="true"] {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  color: #14130F;
}

/* ---- Nav ---- */
.setup__nav { display: flex; align-items: center; gap: 10px; }
.setup__nav .setup__next { margin-top: 0; }
.setup__back {
  flex: none;
  border: 1px solid rgba(240, 234, 219, 0.16);
  border-radius: 10px;
  background: transparent;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident);
}
.setup__back:hover { border-color: rgba(240, 234, 219, 0.32); color: var(--text-primary); }
.setup__back[hidden] { display: none; }

.setup__skip {
  align-self: center;
  border: none;
  background: transparent;
  padding: 2px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}
.setup__skip:hover { color: var(--text-primary); }

/* ============================================================
   SOCIAL SIGN-IN — Google / Apple on the auth card
   ============================================================ */
.social { display: flex; flex-direction: column; gap: 9px; }
.social__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: var(--radius-btn, 10px);
  border: 1px solid rgba(240, 234, 219, 0.16);
  background: rgba(240, 234, 219, 0.04);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-confident),
              background var(--dur-micro) var(--ease-confident);
}
.social__btn:hover {
  border-color: rgba(240, 234, 219, 0.34);
  background: rgba(240, 234, 219, 0.07);
}
.social__btn:focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 3px;
}
.social__mark { flex: none; display: block; }

/* Rule with the label sitting in a gap in it. */
.social__or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 1px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.social__or::before,
.social__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(240, 234, 219, 0.1);
}

/* ---- Roles in the admin people table ---- */
.admin__role { display: inline-flex; }
.admin__role-select,
.admin__role--static {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 4px 10px;
  border: 1px solid var(--app-border);
  background: var(--app-raised);
  color: var(--text-body);
}
.admin__role-select {
  cursor: pointer;
  /* The native arrow drags a chunk of platform chrome into a pill; the shape
     is the affordance here. */
  appearance: none;
  padding-right: 10px;
  transition: border-color var(--dur-micro) var(--ease-confident),
              color var(--dur-micro) var(--ease-confident);
}
.admin__role-select:hover { border-color: var(--app-border-strong); color: var(--text-primary); }
.admin__role-select:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; }
.admin__role-select:disabled { opacity: 0.5; cursor: default; }
/* Options render in the platform's own menu, so they need readable colours
   of their own rather than inheriting the pill's. */
.admin__role-select option { background: #1F1D19; color: #F0EADB; }

/* The tier is the point, so it carries the colour. */
.admin__role[data-role="owner"] .admin__role-select,
.admin__role--static[data-role="owner"] {
  color: #14130F;
  background: var(--accent-orange);
  border-color: var(--accent-orange);
}
.admin__role[data-role="admin"] .admin__role-select,
.admin__role--static[data-role="admin"] {
  color: var(--accent-orange);
  border-color: rgba(232, 154, 74, 0.4);
}
.admin__role[data-role="coach"] .admin__role-select,
.admin__role--static[data-role="coach"] {
  color: var(--accent-teal);
  border-color: rgba(111, 181, 168, 0.4);
}

/* ---- Takings: four totals and the quarter behind them ---- */
.admin__takings { gap: 18px; }
.admin__totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.atotal {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--app-raised);
  border: 1px solid var(--app-border);
}
/* All time is the one that carries the weight, so it gets the accent. */
.atotal--lead {
  background: rgba(232, 154, 74, 0.09);
  border-color: rgba(232, 154, 74, 0.28);
}
.atotal__label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.atotal--lead .atotal__label { color: var(--accent-orange); }
.atotal__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.admin__chart { display: flex; flex-direction: column; gap: 9px; }
.admin__chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.achart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 128px;
  padding: 0 1px;
}
.achart__col { flex: 1; display: flex; align-items: flex-end; height: 100%; min-width: 0; }
@keyframes achart-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.achart__bar {
  display: block;
  width: 100%;
  border-radius: 4px 4px 2px 2px;
  background: var(--accent-orange);
  transform-origin: bottom center;
  animation: achart-grow 560ms var(--ease-confident) both;
  transition: background var(--dur-micro) var(--ease-confident);
}
.achart__col:hover .achart__bar { background: #F0EADB; }
/* A week with no takings still gets a mark, so the quarter reads as thirteen
   weeks rather than only the ones that sold. */
.achart__bar--empty { background: var(--app-border-strong); }

.achart__axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .admin__totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .achart__bar { animation: none; }
}

/* ---- All-time takings: its own box, opposite the page title ---- */
.lifetime__box[hidden] { display: none; }
/* No box of its own — the header's outline is the container. It only needs
   to sit at the right-hand end and read big. */
.lifetime__box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  text-align: right;
  flex: none;
}
.lifetime__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-orange);
}
.lifetime__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.lifetime__hint { font-size: 12px; color: var(--text-muted); }

/* Three across now that all time has moved out. */
.admin__totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .admin__totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   LMS LANDING (/learn) — the front door
   Reuses the sales-page bands; these are the three sections that
   only exist here: the topbar's anchor nav, the four pillars, and
   the three steps.
   ============================================================ */

/* The catalogue rail is built for the app shell, where --gutter is the
   sidebar's rhythm. On the landing page it should breathe with the sales
   bands instead, so the row's arrows and cards line up with everything
   above and below it. */
.lab-rail {
  --gutter: var(--sales-gutter);
  padding: calc(var(--sales-pad-y) * 0.55) 0;
  border-top: 1px solid var(--border-on-dark);
}

/* -------- topbar anchors -------- */
.lab-landing__nav {
  display: none;
  margin-left: auto;
  gap: 22px;
}
.lab-landing__nav a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-confident);
}
.lab-landing__nav a:hover { color: var(--text-primary); }
@media (min-width: 900px) {
  .lab-landing__nav { display: inline-flex; }
}
/* Without the anchors the CTA pair still has to sit hard right. */
.lab-landing .sales-topbar__cta { margin-left: auto; }
@media (min-width: 900px) {
  .lab-landing .sales-topbar__cta { margin-left: 0; }
}

/* -------- four pillars -------- */
.lab-pillars {
  padding: var(--sales-pad-y) var(--sales-gutter);
  border-top: 1px solid var(--border-on-dark);
  background: var(--charcoal-main);
}
.lab-pillars__head { margin-bottom: clamp(28px, 4vw, 48px); }
.lab-pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1040px) {
  .lab-pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .lab-pillars__grid { grid-template-columns: 1fr; }
}
.lab-pillar {
  background: var(--charcoal-surface);
  border: 1px solid var(--border-on-dark);
  border-radius: 14px;
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform var(--dur-micro) var(--ease-confident),
              border-color var(--dur-micro) var(--ease-confident);
}
.lab-pillar:hover { transform: translateY(-2px); border-color: var(--border-on-dark-strong); }
/* Three short bars, tinted per door — the same film-leader motif the rest of
   the page uses, shrunk to a card marker. */
.lab-pillar__bars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}
.lab-pillar__bars > span {
  width: 14px;
  height: 3px;
  border-radius: 1px;
  background: var(--text-muted);
}
.lab-pillar[data-tone="rust"]   .lab-pillar__bars > span { background: var(--accent-rust); }
.lab-pillar[data-tone="teal"]   .lab-pillar__bars > span { background: var(--accent-teal); }
.lab-pillar[data-tone="orange"] .lab-pillar__bars > span { background: var(--accent-orange); }
.lab-pillar[data-tone="blue"]   .lab-pillar__bars > span { background: var(--accent-blue); }
.lab-pillar__bars > span:nth-child(2) { opacity: 0.62; }
.lab-pillar__bars > span:nth-child(3) { opacity: 0.34; }
.lab-pillar__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 4px 0 0;
}
.lab-pillar__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
}

/* -------- three steps -------- */
.lab-steps {
  padding: var(--sales-pad-y) var(--sales-gutter);
  border-top: 1px solid var(--border-on-dark);
}
.lab-steps__head { margin-bottom: clamp(28px, 4vw, 48px); }
.lab-steps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 780px) {
  .lab-steps__grid { grid-template-columns: 1fr; }
}
.lab-step {
  border-top: 1px solid var(--border-on-dark-strong);
  padding-top: 20px;
}
.lab-step__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent-orange);
}
.lab-step__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 26px);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 12px 0 0;
}
.lab-step__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
  margin: 12px 0 0;
  max-width: 42ch;
}

/* ============================================================
   WORKSPACE (LAB) SWITCHER
   The sidebar button was a dead chevron; it now opens the list
   of labs an account can look at.
   ============================================================ */
.learn-workspace { position: relative; }
.learn-workspace .learn-sidebar__workspace { width: 100%; }
.learn-workspace__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--app-raised);
  border: 1px solid var(--app-border-strong);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.learn-workspace__menu[hidden] { display: none; }
.learn-workspace__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 8px 6px;
}
.learn-workspace__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background var(--dur-micro) var(--ease-confident);
}
.learn-workspace__item:hover { background: var(--app-hover); }
.learn-workspace__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--text-muted);
}
.learn-workspace__dot[data-tone="orange"] { background: var(--accent-orange); }
.learn-workspace__dot[data-tone="blue"]   { background: var(--accent-blue); }
.learn-workspace__dot[data-tone="teal"]   { background: var(--accent-teal); }
.learn-workspace__dot[data-tone="rust"]   { background: var(--accent-rust); }
.learn-workspace__text { flex: 1; min-width: 0; }
.learn-workspace__item-name {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.3;
}
.learn-workspace__item-blurb {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
/* The tick only belongs to the lab you are actually in. */
.learn-workspace__tick { flex: none; color: var(--accent-orange); opacity: 0; }
.learn-workspace__item[aria-checked="true"] .learn-workspace__tick { opacity: 1; }

/* One lab granted: the switcher becomes a label, not a menu. */
.learn-workspace[data-single="true"] .learn-sidebar__workspace {
  cursor: default;
  pointer-events: none;
}
.learn-workspace[data-single="true"] .learn-sidebar__workspace-chevron { display: none; }
.learn-workspace__item[hidden] { display: none; }
/* A room belonging to another lab is not yours to open. */
.room[hidden] { display: none; }

/* ---------- Lab grants in the People table (/learn/admin) ---------- */
.admin__labs { display: inline-flex; gap: 4px; }
.admin__lab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--app-border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-confident),
              border-color var(--dur-micro) var(--ease-confident),
              background var(--dur-micro) var(--ease-confident);
}
.admin__lab[data-on="true"] {
  color: var(--text-primary);
  border-color: var(--accent-orange);
  background: rgba(232, 154, 74, 0.12);
}
.admin__lab:hover:not(:disabled) { border-color: var(--app-border-strong); }
.admin__lab:disabled { opacity: 0.5; cursor: progress; }
/* Staff reach every lab through their role, so there is nothing to toggle. */
.admin__lab--all { cursor: default; border-style: dashed; }

/* ---- Signups not open yet ---- */
.auth-closed {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(232, 154, 74, 0.28);
  background: rgba(232, 154, 74, 0.07);
}
.auth-closed[hidden] { display: none; }
.auth-closed__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-orange);
}
.auth-closed__line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.auth-closed__sub { font-size: 12.5px; line-height: 1.5; color: var(--text-body); }