/* ==========================================================================
   ACCAcademy — brought onto the site's design system
   ==========================================================================

   The academy was built as a separate product with its own palette, its own
   dark layer and its own component set. Everything else on this site runs on
   acc-tokens.css: dark glass, gold and cyan, one display face, one mono face.
   Two design systems on one site read as two websites, and that is exactly
   what it looked like.

   This file is the bridge. It does three things, in this order:

     1. re-declares the academy's own variable names in terms of the site's,
        so every rule the academy already has starts drawing in our colours;
     2. replaces the component styling the academy hardcoded past those
        variables — cards, buttons, pills, stats, inputs;
     3. removes the furniture that carried no information: the large empty
        gradient panels at the top of every card.

   WHY THIS FIXES LIGHT MODE TOO. acc-tokens.css already ships a full light
   palette under [data-bs-theme="light"]. The academy never used it — it kept
   its own light set and flipped to white while the rest of the site stayed
   dark. Reading our tokens means the academy now follows the site's theme,
   both ways, with no separate dark layer of its own.

   SPECIFICITY. Academy pages carry their styles inline, in the body, which
   is later in source order than this file. Every rule here is therefore
   written as `.acc-shell .thing` — one class more than the page's own
   `.thing` — so it wins on specificity rather than on luck.
   ========================================================================== */

/* --- 0. Two names that were never the academy's ------------------------- */

/* WHAT I GOT WRONG ON 02.09, AND WHAT THE PAGE ACTUALLY SAID.

   I wrote here that my_training.blade.php overwrites `--acc-text` ON THE
   SHELL, and built a copy-aside layer on that belief. Measured in the
   browser on 03.09, the truth is worse and simpler: three academy pages
   open their stylesheet with a full palette on `:root` —

       :root { … --acc-text:#0E2A4E; --acc-gold:#1B6FE3; … }

   — and `:root` is the whole document, not the academy. Two of those
   fourteen names are the site's own: `--acc-text` and `--acc-gold`.
   So on those three pages our word for "text colour" meant dark navy
   everywhere, header and sidebar included, and our word for "money gold"
   meant blue.

   That is why the copy-aside layer did nothing. A copy taken at `:root`
   reads the value that WON at `:root` — the page's. It was a bandage
   applied to the wrong wound.

   THE CAUSE IS REMOVED AT THE SOURCE. The three pages no longer declare
   those two names (see tokeny-akademii.php, batch 180); their own twelve
   private names are untouched. Nothing has to be copied aside any more,
   and every rule below simply reads the site's token.

   THE RULE THIS LEAVES BEHIND: an academy page may name anything it likes,
   except a name that already exists in acc-tokens.css. There the site is
   the only author. */

/* --- 1. The bridge ------------------------------------------------------ */

/* THE SHELL ITSELF NEEDS ONE MORE STEP OF SPECIFICITY.

   Every rule below is written as `.acc-shell .thing`, which beats a page's
   own `.thing`. The shell has no such luxury: a page writing `.acc-shell
   { background: … }` in its own inline block ties on specificity and wins
   on source order, because inline blocks come later than this file.

   `body .acc-shell` is one element more, and that settles it. Without this
   the academy kept its own pale page surface, and our translucent dark
   cards sat on top of it as grey mush — which is exactly how it looked on
   the first attempt. */
body .acc-shell {
  /* text — the academy's own names, pointed at ours */
  --acc-ink: var(--acc-text);
  --acc-ink-2: var(--acc-text-dim);
  --acc-mut: var(--acc-text-mute);
  --acc-text-2: var(--acc-text-dim);
  --acc-text-mut: var(--acc-text-mute);

  /* lines and surfaces */
  --acc-line: var(--acc-glass-brd);
  --acc-line-2: var(--acc-glass-hi);
  --acc-border: var(--acc-glass-brd);
  --acc-border-2: var(--acc-glass-brd);
  --acc-page: transparent;
  --acc-card: var(--acc-glass);
  --acc-soft: var(--acc-raise);
  --acc-bg-deep: transparent;
  --acc-bg-1: var(--acc-raise);
  --acc-bg-2: var(--acc-ghost);
  --acc-surface-1: var(--acc-glass);
  --acc-surface-2: var(--acc-raise);

  /* accent — cyan is this site's "go", gold is its "money" */
  --acc-blue: var(--acc-cyan);
  --acc-blue-d: var(--acc-cyan-dim);
  --acc-blue-50: var(--acc-cyan-soft);
  --acc-blue-2: var(--acc-cyan);

  /* the three training stages */
  --ind: var(--acc-ok);
  --ind-50: var(--acc-ok-soft);
  --ind-ink: var(--acc-ok);
  --type: var(--acc-cyan);
  --type-50: var(--acc-cyan-soft);
  --type-ink: var(--acc-cyan);
  --rec: var(--acc-gold);
  --rec-50: var(--acc-gold-soft);
  --rec-ink: var(--acc-gold);

  /* status */
  --acc-ok-50: var(--acc-ok-soft);
  --acc-ok-ink: var(--acc-ok);
  --acc-warn-50: var(--acc-gold-soft);
  --acc-warn-ink: var(--acc-gold);
  --acc-danger: var(--acc-err);
  --acc-danger-50: var(--acc-err-soft);
  --acc-danger-ink: var(--acc-err);
  --acc-success: var(--acc-ok);

  /* the academy called its accent "gold" in a few places */
  --acc-gold-2: var(--acc-gold);

  background: none !important;
  color: var(--acc-text);
  padding: var(--acc-sp-6) 0 var(--acc-sp-16);
  font-family: var(--acc-font-text);
}

/* Some academy pages paint a light panel around their content instead of
   styling .acc-shell. Those are wrappers, not content: clear them and let
   the site's own page surface show through. */
body .acc-shell :is(.acc-wrap, .acc-page, .acc-container, .acc-inner,
                     .acc-cert-legacy-wrap, .acc-content) {
  background: none;
}

/* --- 2. Typography ------------------------------------------------------ */

/* Titles in the display face, like every other heading on the site. The
   academy set them in the body face at 800 weight, which is why they read
   heavier and rounder than the rest of the site without being larger. */
.acc-shell :is(h1, h2, h3, .acc-hero-title, .acc-section-title,
                .acc-stage-title, .acc-step-title, .acc-track-title) {
  font-family: var(--acc-font-display);
  letter-spacing: .01em;
  color: var(--acc-text);
}

.acc-shell .acc-hero-title {
  font-size: clamp(28px, 4vw, var(--acc-fs-48));
  font-weight: 600;
  line-height: 1.08;
}

/* Eyebrows, codes and stage labels: mono, small, wide. This is the site's
   voice for anything that labels rather than states. */
.acc-shell :is(.acc-hero-tag, .acc-stat-label, .acc-card-badge, .acc-cbadge,
                .acc-stage-eyebrow, .acc-track-state, .acc-rm-pill,
                .acc-section-head) {
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.acc-shell :is(.acc-stat-value, .acc-course-cost, .acc-enr-meta, .acc-cmeta) {
  font-variant-numeric: tabular-nums;
}

/* --- 3. Cards ----------------------------------------------------------- */

.acc-shell :is(.acc-card, .acc-cert, .acc-enr, .acc-stat, .acc-msg,
                .acc-empty, .acc-curr-item, .acc-rm-step, .acc-track-step) {
  background: var(--acc-glass);
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-card);
  box-shadow: none;
  color: var(--acc-text);
}

.acc-shell :is(.acc-card, .acc-cert, .acc-enr):hover {
  border-color: var(--acc-glass-hi);
}

/* THE EMPTY PANELS ARE GONE.

   Every programme card opened with a 180px gradient block holding one
   oversized glyph — a star on the A320, an aeroplane on the B737F, chosen
   with no rule. It pushed the actual content below the fold and told the
   reader nothing. A card should start with its name. */
.acc-shell :is(.acc-card-cover, .acc-enr-cover) {
  display: none !important;
}

/* --- 4. Buttons --------------------------------------------------------- */

.acc-shell .acc-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--acc-sp-2);
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--acc-r-ctrl);
  font-family: var(--acc-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--acc-dur-fast) var(--acc-ease),
              border-color var(--acc-dur-fast) var(--acc-ease),
              color var(--acc-dur-fast) var(--acc-ease);
}

.acc-shell :is(.acc-btn-primary, .acc-btn-gold) {
  background: var(--acc-cyan);
  border-color: var(--acc-cyan);
  color: var(--acc-on-cyan);
  box-shadow: 0 6px 24px var(--acc-cyan-glow);
}

.acc-shell :is(.acc-btn-primary, .acc-btn-gold):hover {
  background: var(--acc-cyan-dim);
  border-color: var(--acc-cyan-dim);
  color: var(--acc-on-cyan);
}

.acc-shell :is(.acc-btn-secondary, .acc-btn-ghost) {
  background: var(--acc-glass);
  border-color: var(--acc-glass-brd);
  color: var(--acc-text);
}

.acc-shell :is(.acc-btn-secondary, .acc-btn-ghost):hover {
  border-color: var(--acc-cyan-dim);
  color: var(--acc-text);
}

/* A locked step is not a broken button. It stays legible and simply does
   not invite the hand. */
.acc-shell .acc-btn-locked {
  background: transparent;
  border-color: var(--acc-glass-brd);
  color: var(--acc-text-mute);
  cursor: default;
  box-shadow: none;
}

/* --- 5. Pills ----------------------------------------------------------- */

.acc-shell .acc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-pill);
  background: var(--acc-raise);
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--acc-text-dim);
}

.acc-shell .acc-pill-success { background: var(--acc-ok-soft); border-color: var(--acc-ok-brd); color: var(--acc-ok); }
.acc-shell .acc-pill-warning { background: var(--acc-gold-soft); border-color: var(--acc-gold-brd); color: var(--acc-gold); }
.acc-shell .acc-pill-danger  { background: var(--acc-err-soft); border-color: var(--acc-err-brd); color: var(--acc-err); }
.acc-shell .acc-pill-info,
.acc-shell .acc-pill-purple  { background: var(--acc-cyan-soft); border-color: var(--acc-cyan-dim); color: var(--acc-cyan); }
.acc-shell .acc-pill-muted   { background: var(--acc-ghost); border-color: var(--acc-glass-brd); color: var(--acc-text-mute); }

/* --- 6. Stats ----------------------------------------------------------- */

.acc-shell .acc-stat {
  padding: var(--acc-sp-4) var(--acc-sp-4) var(--acc-sp-4);
  border-left: 2px solid var(--acc-glass-brd);
}

.acc-shell .acc-stat-label { color: var(--acc-text-mute); }

.acc-shell .acc-stat-value {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-34);
  font-weight: 600;
  line-height: 1.1;
  color: var(--acc-text);
}

.acc-shell .acc-stat-sub { color: var(--acc-text-mute); font-size: var(--acc-fs-12); }

/* One accent per row, not four. The academy tinted every stat card a
   different colour, which made a row of four look like four warnings. */
.acc-shell .acc-stat.is-gold    { border-left-color: var(--acc-gold); }
.acc-shell .acc-stat.is-blue    { border-left-color: var(--acc-cyan); }
.acc-shell .acc-stat.is-purple  { border-left-color: var(--acc-cyan-dim); }
.acc-shell .acc-stat.is-success { border-left-color: var(--acc-ok); }
.acc-shell .acc-stat.is-gold .acc-stat-value    { color: var(--acc-gold); }
.acc-shell .acc-stat.is-success .acc-stat-value { color: var(--acc-ok); }

/* --- 7. Progress -------------------------------------------------------- */

.acc-shell :is(.acc-prog-bar, .acc-progress-bar, .acc-test-progress,
                .acc-enr-progress) {
  background: var(--acc-ghost);
  border-radius: var(--acc-r-pill);
  overflow: hidden;
}

.acc-shell :is(.acc-prog-fill, .acc-progress-fill, .acc-enr-progress-fill) {
  background: var(--acc-cyan);
  box-shadow: 0 0 12px var(--acc-cyan-glow);
}

/* --- 8. The step ladder ------------------------------------------------- */

.acc-shell .acc-track-step {
  padding: var(--acc-sp-4);
  gap: var(--acc-sp-4);
}

.acc-shell .acc-track-badge {
  background: var(--acc-ghost);
  border: 1px solid var(--acc-glass-brd);
  color: var(--acc-text-dim);
  font-family: var(--acc-font-mono);
}

.acc-shell .acc-track-step.is-done .acc-track-badge {
  background: var(--acc-ok-soft);
  border-color: var(--acc-ok-brd);
  color: var(--acc-ok);
}

.acc-shell .acc-track-step.is-now .acc-track-badge {
  background: var(--acc-cyan-soft);
  border-color: var(--acc-cyan-dim);
  color: var(--acc-cyan);
}

/* A locked step recedes. It is a fact, not a scolding. */
.acc-shell .acc-track-step.is-locked {
  opacity: .62;
}

.acc-shell .acc-track-text,
.acc-shell .acc-track-hint { color: var(--acc-text-dim); }

.acc-shell .acc-track-state.s-done { color: var(--acc-ok); }
.acc-shell .acc-track-state.s-now  { color: var(--acc-cyan); }
.acc-shell .acc-track-state.s-lock { color: var(--acc-text-mute); }

/* --- 9. Forms ----------------------------------------------------------- */

/* THE WHITE BAR ON /programs. It stayed white after everything else went
   dark, and the reason is a detail worth writing down: the search bar is
   painted with a background IMAGE, not a colour —

       background: linear-gradient(#EFF4FB, #EFF4FB)

   — a flat gradient used as a fill. Setting `background-color` below it
   changes nothing, because the image is drawn over the colour. It has to
   be turned off by name. */
.acc-shell :is(.acc-filter-bar, .acc-toolbar, .acc-panel-light) {
  background-image: none;
  background-color: var(--acc-glass);
  border-color: var(--acc-glass-brd);
}

.acc-shell :is(.acc-filter-input, .acc-filter-select, input[type="text"],
                input[type="search"], input[type="number"], select, textarea) {
  background: var(--acc-bg-800);
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-ctrl);
  color: var(--acc-text);
  font-family: var(--acc-font-text);
}

/* A <select> left on `appearance: auto` is drawn by Windows itself: white
   box, black text, our colours ignored. It has to be taken over, and then
   it needs its arrow drawn back — the arrow is part of what we switched
   off. Inline SVG so nothing is fetched.

   `body` IS IN THE SELECTOR ON PURPOSE, and I only learned why by testing
   it in the live page. At plain `.acc-shell` weight the rule set
   `appearance` and `padding` but its background-image stayed `none` — and
   an identical rule injected AFTER it lost too, so it was not source
   order. One step of extra weight, and the arrow appears. Same medicine
   as the shell itself two hundred lines up. */
body .acc-shell :is(select, .acc-filter-select) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237f8ea3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 7px;
}

body .acc-shell :is(select, .acc-filter-select) option {
  background: var(--acc-bg-800);
  color: var(--acc-text);
}

.acc-shell :is(.acc-filter-input, .acc-filter-select, input, select, textarea):focus {
  outline: none;
  border-color: var(--acc-cyan-dim);
}

.acc-shell ::placeholder { color: var(--acc-text-mute); }

/* --- 9b. The notifications page ------------------------------------------ */

/* ЭТА СТРАНИЦА НЕ ЗНАЕТ СЛОВА acc-shell.

   Найдена 03.09, когда скрипт из партии 180 неожиданно поправил
   notifications.blade.php: у неё тоже был :root с нашими именами. Пошёл
   посмотреть глазами — и увидел белую панель с невидимым заголовком на
   тёмной странице.

   Причина в одну строку: вся эта страница построена на своих классах
   nt-*, оболочка называется .nt-shell, и НИ ОДНО правило этого файла до
   неё не доходит — все они начинаются с .acc-shell.

   А светлой её делают не цвета, а КАРТИНКИ: три элемента залиты
   градиентами. Цвет под градиентом менять бесполезно, ровно как с
   полосой поиска на /programs. Гасим по имени. */

.nt-shell :is(.nt-header, .nt-item) {
  background-image: none;
  background-color: var(--acc-glass);
  border: 1px solid var(--acc-glass-brd);
  color: var(--acc-text);
}

/* НЕПРОЧИТАННОЕ КРАСИТСЯ ОТДЕЛЬНЫМ ПРАВИЛОМ, И ОНО ВЕСИТ БОЛЬШЕ.

   Проверено глазами после 182: шапка стала тёмной, а сама карточка
   осталась светлой. Страница пишет `.nt-item.is-unread` — два класса,
   ровно столько же, сколько у моего `.nt-shell :is(.nt-item)`. При
   равном весе побеждает тот, кто ниже, а встроенный стиль страницы
   всегда ниже подключённого файла.

   Отсюда `body` впереди. Третий раз за два дня одно и то же: ничья по
   весу читается как поражение. */
body .nt-shell .nt-item.is-unread {
  background-image: none;
  background-color: var(--acc-glass);
  border-left: 3px solid var(--acc-cyan);
}

.nt-shell .nt-title { color: var(--acc-text); }
.nt-shell .nt-eyebrow { color: var(--acc-gold); }
.nt-shell :is(.nt-sub, .nt-item-body-text) { color: var(--acc-text-dim); }
.nt-shell .nt-item-title { color: var(--acc-text); }
.nt-shell .nt-item-meta { color: var(--acc-text-mute); }
.nt-shell .nt-item-meta a { color: var(--acc-cyan); }

.nt-shell .nt-item-icon {
  background: var(--acc-raise);
  border: 1px solid var(--acc-glass-brd);
  color: var(--acc-text-dim);
}

.nt-shell .nt-btn {
  background-image: none;
  background-color: var(--acc-cyan-soft);
  border: 1px solid var(--acc-cyan-dim);
  color: var(--acc-cyan);
}

.nt-shell .nt-btn:hover {
  background-color: var(--acc-hover);
  color: var(--acc-text);
}

.nt-shell :is(.nt-pill, .nt-pill-new) {
  background: var(--acc-gold-soft);
  border: 1px solid var(--acc-gold-brd);
  color: var(--acc-gold);
}

/* --- 10. Odds and ends -------------------------------------------------- */

.acc-shell .acc-bc,
.acc-shell .acc-bc a { color: var(--acc-text-mute); }
.acc-shell .acc-bc a:hover { color: var(--acc-cyan); }

.acc-shell :is(.acc-sub, .acc-hero-sub, .acc-stage-text, .acc-step-desc,
                .acc-prog-text, .acc-legend) {
  color: var(--acc-text-dim);
}

.acc-shell .acc-alert {
  background: var(--acc-glass);
  border: 1px solid var(--acc-glass-brd);
  border-left: 3px solid var(--acc-cyan);
  border-radius: var(--acc-r-ctrl);
  color: var(--acc-text);
}

.acc-shell .acc-alert-ok { border-left-color: var(--acc-ok); }

.acc-shell a { color: var(--acc-cyan); }

/* The hero panel: the site treats a hero as glass over the page, not as a
   painted box of its own colour. */
.acc-shell :is(.acc-hero, .acc-page-header) {
  background: var(--acc-glass);
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-card);
  color: var(--acc-text);
}

.acc-shell .acc-hero-tag {
  background: var(--acc-cyan-soft);
  border: 1px solid var(--acc-cyan-dim);
  border-radius: var(--acc-r-pill);
  color: var(--acc-cyan);
}

/* The decorative aircraft silhouette behind the hero text. Kept, but taken
   down to a whisper: it is texture, and it was competing with the words. */
.acc-shell .acc-hero-visual-plane { opacity: .10; }

.acc-shell :is(.acc-subnav-wrap, .acc-subnav) {
  background: transparent;
  border-bottom: 1px solid var(--acc-glass-brd);
}

.acc-shell .acc-subnav-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--acc-r-ctrl);
  color: var(--acc-text-mute);
  font-family: var(--acc-font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
}

.acc-shell .acc-subnav-tab:hover { color: var(--acc-text); }

.acc-shell .acc-subnav-tab.is-active {
  background: var(--acc-cyan-soft);
  border-color: var(--acc-cyan-dim);
  color: var(--acc-cyan);
}

/* --- 11. Panels the pages paint themselves ------------------------------ */

/* The "training overview" panel beside the hero, the little figure boxes
   inside it, and the chart cards were all painted a pale blue in the page's
   own stylesheet, so they survived the move and now sit on our glass like
   patches. Same treatment as everything else. */
body .acc-shell :is(.acc-hero-visual, .acc-hero-visual-stat, .acc-chart-card,
                    .acc-chart, .acc-panel, .acc-box) {
  background: var(--acc-raise);
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-card);
  color: var(--acc-text);
}

body .acc-shell :is(.acc-hero-visual-eyebrow, .acc-hero-visual-stat-lab,
                    .acc-chart-title) {
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
}

body .acc-shell :is(.acc-hero-visual-stat-num, .acc-chart-value) {
  font-family: var(--acc-font-display);
  color: var(--acc-text);
}

body .acc-shell .acc-hero-visual-text { color: var(--acc-text-dim); }

/* One line under a chart, in words, for the reader who is looking at an
   almost empty grid and cannot tell whether it is broken or simply new. */
body .acc-shell .acc-chart-note {
  margin: 2px 0 12px;
  max-width: 70ch;
  font-size: var(--acc-fs-12);
  line-height: 1.55;
  color: var(--acc-text-mute);
}