/* ============================================================
   Cine Artistlabs LMS — the blue field, and quiet cards inside it
   Layered over learn.css, loaded after it by LearnLayout. Everything
   here is an override, so deleting the <link> restores the old chrome.

   The shell is the design: one blue field from the logo, and the app
   sitting inside it as a single rounded panel. Inside that panel the
   work is legibility, not colour — cards are paper or charcoal, lifted
   by a hairline and a soft shadow, and colour appears in slivers: a
   3px rule on the card that leads the page, the bars in a chart, a dot
   on a status chip. Filling whole cards with orange read as cheap.

   Type is untouched. Nothing here sets a font, a size or a case.
   ============================================================ */
.learn-app,
.chat-drawer,
.event-drawer {
  --blk-rust:   #C25A22;
  --blk-orange: #E89A4A;
  --blk-teal:   #6FB5A8;
  --blk-blue:   #2F6480;
  --blk-cream:  #EBE4D2;
  --blk-ink:    #14130F;
  --blk-bone:   #F0EADB;

  --radius-card: 20px;

  /* The default accent. Each screen overrides it below. */
  --accent-blk: var(--blk-orange);
  --accent-fg:  var(--blk-ink);
}

/* One ink per theme, set with the charts further down — a screen that
   carries two accents reads as a legend. Screens keep their own hue only
   where colour means something (an event's status, a room's state).
*/

/* Card surfaces. Paper sits a shade off the panel's white so a card
   reads as an object on it; charcoal does the same going the other way. */
:root[data-ui="light"] .learn-app {
  --blk-plain: #FFFFFF;
  --blk-plain-fg: var(--blk-ink);
  --blk-stroke: rgba(20, 19, 15, 0.12);
  --blk-lift: 0 1px 2px rgba(20, 19, 15, 0.04), 0 10px 24px -16px rgba(20, 19, 15, 0.30);
}
:root:not([data-ui="light"]) .learn-app {
  --blk-plain: #14130F;
  --blk-plain-fg: var(--blk-bone);
  --blk-stroke: rgba(240, 234, 219, 0.14);
  --blk-lift: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 28px -18px rgba(0, 0, 0, 0.70);
}

/* ============================================================
   CARDS — one surface, one hairline, one soft lift
   ============================================================ */
.learn-app :is(
  .events__list .event,
  .members__grid .member,
  .settings .card,
  .library__grid .asset,
  .library__packs .pack,
  .rooms .room,
  .studio__kpis .stat-tile,
  .panel,
  .meter-card,
  .rank-list,
  .resume-card,
  .downloads__list .download
) {
  border: 1px solid var(--blk-stroke);
  border-radius: 14px;
  background: var(--blk-plain);
  color: var(--blk-plain-fg);
  box-shadow: var(--blk-lift);
}

/* The card that leads the page keeps a 3px accent edge and nothing
   else — the colour marks it without shouting over the numbers. */
.learn-app :is(
  .resume-card,
  .studio__kpis .stat-tile:first-child,
  .events__list .event:first-child,
  .rooms .room[aria-pressed="true"],
  .members__grid .member:has(.member__name-you)
) {
  border-left: 3px solid var(--accent-line, var(--blk-orange));
}

/* Numbers are the point of the studio, so give them room and let the
   labels sit back. Sizes stay exactly as learn.css set them. */
.learn-app .studio__kpis .stat-tile { padding: 20px 22px 22px; }
.learn-app :is(.stat-tile__label, .resume-card__label) {
  align-self: flex-start;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 100px;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Buttons stay soft rectangles; chips stay pills. A primary button is
   ink on paper and bone on charcoal, never a black slab on orange. */
.learn-app :where(.btn, .event__cta, .member__btn, .asset__btn, .pack__btn) { border-radius: var(--radius-btn, 10px); }
.learn-app :where(.learn-pill) { border-radius: 100px; }
:root[data-ui="light"] .learn-app .btn--primary { background: var(--blk-ink); color: var(--blk-bone); border-color: var(--blk-ink); }
:root:not([data-ui="light"]) .learn-app .btn--primary { background: var(--blk-bone); color: var(--blk-ink); border-color: var(--blk-bone); }

/* ============================================================
   THE SHELL — one blue field, one panel inside it
   The blues are sampled from the logo bars: #2F6480 on light, and the
   darkest one, #1A394B, on dark. The field runs the whole window: the
   nav rail does not have a panel of its own, it simply sits on the
   field, and the content is a single rounded panel inset in it.
   The field stays blue in both themes — only the panel changes.
   ============================================================ */
.learn-app {
  /* The blue margin around the panel. Grows a little on wide screens
     so the field reads as a border rather than a seam. */
  --field-gap: clamp(18px, 1.8vw, 26px);
  background: var(--field);
  gap: 0;
  padding: 0;
  align-items: flex-start;
}
/* The field, on the window as well as the shell, so overscroll and the
   area past the last card stay blue. */
/* The logo's darkest bar, the same in both themes. The selectors carry
   the theme attribute because learn.css paints the light body #F4F4F3 at
   that weight — which showed as grey beside the panel and behind the
   chat drawer. */
.learn-app { --field: #1A394B; background: #1A394B; }
:root[data-ui="light"] body:has(.learn-app),
:root:not([data-ui="light"]) body:has(.learn-app),
:root:has(.learn-app) { background: #1A394B; }
.chat-drawer { --field: #1A394B; }

/* The rail is the field. No surface, no border, no rounding. */
.learn-app .learn-sidebar {
  background: transparent;
  border-right: 0;
  border-radius: 0;
  height: 100vh;
  top: 0;
  padding: var(--field-gap) 14px 16px;
  color: var(--blk-bone);
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-body: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.6);
  --app-bg: transparent;
  --app-surface: transparent;
  --app-raised: rgba(255, 255, 255, 0.12);
  --app-border: rgba(255, 255, 255, 0.18);
  --app-border-strong: rgba(255, 255, 255, 0.3);
  --app-hover: rgba(255, 255, 255, 0.12);
}
.learn-app .learn-sidebar__brand { border-bottom: 0; }
/* White logo on the blue, in both themes. */
.learn-app .learn-sidebar__brand .logo--dark { display: block; }
.learn-app .learn-sidebar__brand .logo--light { display: none; }
.learn-app .learn-nav-item[aria-current="page"] { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }

/* The content: one panel, inset in the field on all four sides. */
.learn-app .learn-shell {
  border-radius: 24px;
  background: var(--blk-shell);
  overflow: hidden;
  /* The field shows on every side of the panel, the rail included. */
  margin: var(--field-gap);
  margin-left: var(--field-gap);
  min-height: calc(100vh - (var(--field-gap) * 2));
}
:root[data-ui="light"] .learn-app { --blk-shell: #FFFFFF; }
:root:not([data-ui="light"]) .learn-app { --blk-shell: #14130F; }

/* The utility bar belongs to the panel now, not the window. */
.learn-app .learn-utility {
  background: var(--blk-shell);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Cards sit on the panel, so they need a surface of their own. */
/* Cards take the panel's own surface — a second off-white inside a white
   panel read as a smudge. Only the hairline separates them. */
:root[data-ui="light"] .learn-app { --app-surface: #FFFFFF; --app-raised: #FFFFFF; }

/* Softer corners throughout, matching the panel. */
.learn-app :is(.event, .member, .card, .asset, .pack, .room, .stat-tile, .panel, .meter-card, .rank-list, .resume-card) {
  border-radius: 16px;
}

@media (max-width: 820px) {
  /* The rail is a top bar on phones; the panel keeps its inset below it. */
  .learn-app .learn-sidebar { height: auto; }
  .learn-app .learn-shell { margin: var(--field-gap); border-radius: 20px; min-height: 0; }
}

/* ============================================================
   THE PANEL SCROLLS, NOT THE WINDOW
   The panel is exactly as tall as the gap allows and the content
   scrolls inside it, so its bottom rounded corner and the blue under
   it are on screen the whole way down a long page.
   ============================================================ */
@media (min-width: 821px) {
  html:has(.learn-app), body:has(.learn-app) { height: 100%; overflow: hidden; }
  .learn-app { height: 100vh; overflow: hidden; }
  .learn-app .learn-shell {
    height: calc(100vh - (var(--field-gap) * 2));
    min-height: 0;
    overflow: hidden;
  }
  /* The utility bar is a sibling above this, so it holds the panel top
     while the page below it moves. */
  .learn-app .learn-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .learn-app .learn-main::-webkit-scrollbar { width: 8px; }
  .learn-app .learn-main::-webkit-scrollbar-thumb {
    background: var(--app-border-strong);
    border-radius: 4px;
  }
  /* Sticky offsets were measured against the window; inside the panel
     the scroll container starts below the utility bar. */
  .learn-app .learn-main .learn-filters { top: 0; }
}

/* ============================================================
   CHAT COMPOSER — a rounded bar, not a strip with a rule over it
   ============================================================ */
.learn-app .community__composer {
  margin: 0 14px 14px;
  padding: 10px 12px;
  border-top: 0;
  border-radius: 16px;
  background: var(--blk-plain);
  box-shadow: inset 0 0 0 2px var(--blk-stroke);
}
.learn-app .community__composer .chat-rail__input {
  background: transparent;
  border-color: transparent;
}
.learn-app .community__composer .chat-rail__input:focus { border-color: transparent; }
.learn-app :is(.community__composer, .chat-drawer__composer) .chat-rail__send { border-radius: 12px; }

/* The drawer is a fixed layer outside .learn-app, so it needs the
   field's own measurements. */
.chat-drawer { --field-gap: clamp(18px, 1.8vw, 26px); }
:root[data-ui="light"] .chat-drawer { --blk-stroke: rgba(20,19,15,0.10); }
:root:not([data-ui="light"]) .chat-drawer { --blk-stroke: rgba(240,234,219,0.10); }

/* ============================================================
   LAB CHAT DRAWER — same slide, inset rounded panel
   It keeps its transform and its timing; only the shape changes, so
   it sits in the blue field like the main panel does rather than
   butting against the window edges.
   ============================================================ */
@media (min-width: 821px) {
  .chat-drawer__panel {
    top: var(--field-gap, 22px);
    right: var(--field-gap, 22px);
    bottom: var(--field-gap, 22px);
    border-radius: 24px;
    border-left: 0;
    box-shadow: inset 0 0 0 2px var(--blk-stroke), -30px 0 80px rgba(0, 0, 0, 0.5);
    overflow: hidden;
  }
  /* The slide has to clear the gap as well, or the panel peeks. */
  .chat-drawer__panel { transform: translateX(calc(100% + var(--field-gap, 22px))); }
  .chat-drawer[data-open] .chat-drawer__panel { transform: translateX(0); }
}

/* The squeezed app stops one gap short of the drawer, so the two panels
   have the field between them rather than meeting edge to edge. */
@media (min-width: 821px) {
  body[data-chat-open] .learn-app,
  body[data-event-open] .learn-app {
    margin-right: calc(var(--chat-drawer-w) + var(--field-gap));
  }
}

/* ============================================================
   YOUR DOWNLOADS — a shelf, not a table of links
   Each row carries a monogram in place of art nobody generated, the
   name and when it was taken stacked underneath, and a real button —
   filled for a file this app can hand back, an owned mark for one it
   can't (a purchase already delivered by email, or a Notion link too
   short-lived to keep). Rows still separate on a hairline; the plain
   text link that used to sit on the right read as unfinished.
   ============================================================ */
.learn-app .downloads__list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--blk-stroke);
  border-radius: 14px;
  background: var(--blk-plain);
  box-shadow: var(--blk-lift);
  padding: 4px 16px;
}
.learn-app .downloads__list .download {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--blk-stroke);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.learn-app .downloads__list .download:last-child { border-bottom: 0; }
.learn-app .download__mono {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-line, var(--chart-ink)) 12%, transparent);
  color: var(--accent-line, var(--chart-ink));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
}
.learn-app .download__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.learn-app .download__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.learn-app .download__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.learn-app .download__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-btn, 10px);
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
}
:root[data-ui="light"] .learn-app .download__btn { background: var(--blk-ink); color: var(--blk-bone); }
:root:not([data-ui="light"]) .learn-app .download__btn { background: var(--blk-bone); color: var(--blk-ink); }
.learn-app .download__btn:hover { opacity: 0.88; }
/* Owned — no file to hand back. A quiet outline with a check, so a
   purchase or an expired Notion link reads as settled, not broken. */
.learn-app .download__btn--owned {
  background: none;
  border-color: var(--blk-stroke);
  color: var(--text-muted);
}
.learn-app .download__btn--owned:hover { opacity: 1; }

/* ============================================================
   THE RAIL — logo in a box, search on the field
   ============================================================ */
/* The brand box lines up with the search and the nav items: same left and
   right edge, same corner. learn.css pulled it out past the rail with a
   negative margin, which is what had it hanging off to one side. */
.learn-app .learn-sidebar__brand {
  /* 56px and no top margin, so the outline's top edge and the panel's top
     edge are the same line across the window, and the logo centres with
     the page name opposite it. */
  height: 56px;
  margin: 0 0 12px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  background: none;
  justify-content: center;
}
.learn-app .learn-sidebar__brand a { justify-content: center; width: 100%; }
.learn-app .learn-sidebar__brand img { height: 22px; margin: 0 auto; }

.learn-app .learn-sidebar__search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  margin: 0 0 18px;
  padding: 0 12px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.72);
}
.learn-app .learn-sidebar__search:focus-within { border-color: rgba(255, 255, 255, 0.5); }
.learn-app .learn-sidebar__search svg { flex: none; }
.learn-app .learn-sidebar__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 13px;
}
.learn-app .learn-sidebar__search input::placeholder { color: rgba(255, 255, 255, 0.6); }

/* The panel's top rail carries the page name now. */
.learn-app .learn-utility__page {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 820px) {
  /* The rail is a row of icons on phones — the box and the search would
     both eat the width the nav needs. */
  .learn-app .learn-sidebar__brand { height: 40px; margin: 6px 8px 6px 0; padding: 0 12px; border-radius: 10px; }
  .learn-app .learn-sidebar__search { display: none; }
}

/* Your own row on the leaderboard marked with the accent rather than a
   grey wash, which was the last grey left inside the panel. */
.learn-app .rank-row--me {
  background: color-mix(in srgb, var(--accent-line, var(--blk-orange)) 10%, transparent);
  border-left: 3px solid var(--accent-line, var(--blk-orange));
}

/* ============================================================
   CHARTS AND ACCENTS — the field's navy, not orange
   Orange at bar size turns a quiet panel into a warning sign. The
   charts take the blue the whole app sits in, one hue, with the track
   a pale wash of the same. On charcoal the same figure is drawn in
   bone, because navy on charcoal is a stain.
   ============================================================ */
:root[data-ui="light"] .learn-app {
  --chart-ink: #1A394B;
  --chart-track: #EDF0F1;
  --accent-line: #1A394B;
}
:root:not([data-ui="light"]) .learn-app {
  --chart-ink: #D9D2C1;
  --chart-track: rgba(240, 234, 219, 0.07);
  --accent-line: #D9D2C1;
}

.learn-app .col__bar { fill: var(--chart-ink); }
.learn-app .col__track { fill: var(--chart-track); }
.learn-app :is(.hbar__fill, .meter__fill) { background: var(--chart-ink); }
.learn-app :is(.hbar__track, .meter) { background: var(--chart-track); }

/* The lead card's edge and your own leaderboard row follow the same ink,
   so a screen carries one colour rather than two. */
.learn-app .rank-row--me {
  background: color-mix(in srgb, var(--chart-ink) 8%, transparent);
  border-left: 3px solid var(--chart-ink);
}

/* A larger logo in the same 56px box. */
.learn-app .learn-sidebar__brand img { height: 30px; }

/* The level card matches the leaderboard's height instead of stopping
   short inside the same-coloured row — see rank__grid in learn.css. */
.learn-app .rank__grid { align-items: stretch; }