/* Website reference.css identity, adapted to the existing student controls.
   Load last through student/_portal_theme.html. All color changes are scoped
   to student surfaces and screen media; printed records keep their paper styles. */
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../website/assets/roboto-condensed.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Shared logo lockup also has bounded dimensions when printing. */
.student-ui a > .portal-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  text-align: left;
}
.student-ui .portal-brand-logo {
  display: block;
  flex-shrink: 0;
  height: 44px;
  max-height: 44px;
  max-width: 220px;
  padding: 4px;
  border-radius: 5px;
  background: #fff;
  object-fit: contain;
}
.student-ui .portal-brand-logo-mark { width: 44px; }
.student-ui .portal-brand-logo-full { width: auto; }
.student-ui .portal-brand-lockup .portal-brand-wordmark {
  display: block;
  margin: 0;
  color: inherit;
  font: 400 21px/1.1 Abel, 'Arial Narrow', sans-serif;
  letter-spacing: .045em;
}
.student-ui .portal-brand-wordmark > span {
  display: block;
  margin-top: 6px;
  color: inherit;
  font: 400 9px/1.3 Abel, 'Arial Narrow', sans-serif;
  letter-spacing: .16em;
}

@media screen {
  .student-ui {
    --portal-navy: #091e32;
    --portal-navy-raised: #153249;
    --portal-on-navy: #fff;
    --portal-on-navy-muted: #c4d0dc;
    --portal-heading: 'Roboto Condensed', 'Arial Narrow', sans-serif;
    --portal-ink: #102238;
    --portal-muted: #627185;
    --portal-line: #dbe3eb;
    --portal-surface: #fff;
    --portal-soft: #eef2f6;
    --portal-ground: #f5f7fa;
    --portal-red: #d50938;
    --portal-red-dark: #ad072d;
    --portal-accent: var(--portal-red);
    --portal-radius: 12px;
    --portal-shadow: 0 3px 12px #10223808;
    --bs-link-color: var(--portal-red);
    --bs-link-hover-color: var(--portal-red-dark);
    background: var(--portal-ground);
  }
  [data-student-theme='dark'] .student-ui {
    --portal-ink: #edf3f8;
    --portal-muted: #bccbd9;
    --portal-line: #34506a;
    --portal-surface: #10283e;
    --portal-soft: #18344d;
    --portal-ground: #081a2c;
    --portal-accent: #ff91a6;
    --portal-red: #d50938;
    --portal-red-dark: #ad072d;
    --portal-shadow: 0 3px 12px #0002;
    --bs-body-bg-rgb: 16, 40, 62;
    --bs-body-color-rgb: 237, 243, 248;
    --bs-secondary-color-rgb: 188, 203, 217;
    --bs-tertiary-bg-rgb: 24, 52, 77;
    background: var(--portal-ground);
  }
  html[data-student-theme='dark']:has(> body.student-ui) { background: #081a2c; }
  .student-ui.bg-light { background: var(--portal-ground) !important; }
  .student-ui.academy,
  .student-ui .commerce-page,
  .student-ui .certification-shell { background: var(--portal-ground); }

  /* Match the website's heading face without enlarging course or exam content. */
  .student-ui :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4, .service-title),
  .student-ui.student-portal :is(.profile-hero h1, .dashboard-section-heading h2),
  .student-ui:not(.student-portal) .hero-title,
  .student-ui .commerce-page :is(h1, h2, h3, .commerce-title),
  .student-ui.academy :is(h1, h2, h3, h4) {
    font-family: var(--portal-heading);
    font-weight: 650;
    letter-spacing: -.02em;
  }
  .student-ui .service-title { font-size: 20px; }
  .student-ui .student-agenda .agenda-brief h3 { font-family: var(--portal-heading); font-weight: 650; }
  .student-ui :is(.learning-panel-header h3, .class-program-link strong) { font-family: var(--portal-heading); font-weight: 650; }

  /* Navy navigation is identical in light and dark mode. Dropdowns keep their
     own reading surface, so their links are deliberately outside this list. */
  .student-ui.student-portal .portal-masthead,
  .student-ui .commerce-page .commerce-mast,
  .student-ui.academy .mast,
  .student-ui .certification-shell .cert-masthead,
  .student-ui .ci-page .ci-nav,
  body.student-ui > .ai-header {
    background: var(--portal-navy);
    color: var(--portal-on-navy);
    border-color: #ffffff26;
    box-shadow: none;
  }
  .student-ui :is(.portal-brand, .commerce-brand, .mast .academy-brand, .cert-brand, .ci-brand, .ai-header > a),
  .student-ui .commerce-navigation > a,
  .student-ui .commerce-account > summary,
  .student-ui .mast nav a,
  .student-ui .certification-shell .cert-tabs a:not(.btn):not(.cert-brand),
  .student-ui .ci-nav .ci-link {
    color: var(--portal-on-navy);
    text-decoration: none;
  }
  .student-ui :is(.portal-label, .portal-brand-wordmark > span, .ci-brand small, .ai-header > a > span) { color: var(--portal-on-navy-muted); }
  .student-ui a:is(.portal-brand, .commerce-brand, .academy-brand, .cert-brand) > .portal-brand-lockup,
  .student-ui a .portal-brand-lockup .portal-brand-wordmark { color: var(--portal-on-navy); }
  .student-ui a .portal-brand-lockup .portal-brand-wordmark > span { color: var(--portal-on-navy-muted); }
  .student-ui .commerce-navigation > a[aria-current],
  .student-ui .certification-shell .cert-tabs a[aria-current]:not(.btn):not(.cert-brand) {
    background: #ffffff0c;
    border-color: #ff4264;
    color: var(--portal-on-navy);
  }
  .student-ui .commerce-account > div { z-index: 20; }
  .student-ui .commerce-account > div a { color: var(--portal-ink); }
  .student-ui .commerce-account > div a:hover { background: var(--portal-soft); color: var(--portal-accent); }
  .student-ui :is(.portal-masthead, .commerce-mast, .mast, .cert-masthead, .ci-nav, .ai-header) .portal-theme-toggle,
  .student-ui.student-portal .portal-masthead :is(.dashboard-button, .portal-updates-button) {
    color: var(--portal-on-navy);
    background: transparent;
    border: 1px solid #8297aa;
    min-height: 44px;
  }
  .student-ui :is(.portal-masthead, .commerce-mast, .mast, .cert-masthead, .ci-nav, .ai-header) .portal-theme-toggle:hover,
  .student-ui.student-portal .portal-masthead :is(.dashboard-button, .portal-updates-button):hover { background: #ffffff12; border-color: #fff; }
  .student-ui :is(.portal-masthead, .commerce-mast, .mast, .cert-masthead, .ci-nav, .ai-header) :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  .student-ui .commerce-account > div :focus-visible { outline-color: var(--portal-accent); }
  .student-ui .portal-theme-toggle[aria-checked='true'] .portal-theme-track { background: #d50938; }

  /* Compact aviation welcome, using the same decorative map as the website. */
  .student-ui.student-portal .profile-hero {
    padding-top: 28px;
    color: var(--portal-on-navy);
    background: linear-gradient(90deg, #091e32 20%, #091e32c9),
      url('../website/assets/route-world-unlabelled.svg') right 45% / 680px auto no-repeat,
      var(--portal-navy);
  }
  .student-ui.student-portal .profile-hero .hero-shell { gap: 20px; background: transparent; }
  .student-ui.student-portal .profile-hero h1 { color: #fff; font-size: clamp(30px, 3.1vw, 42px); line-height: 1.12; }
  .student-ui.student-portal .profile-hero h1 > span { color: #fff; }
  .student-ui .portal-welcome .dashboard-eyebrow { color: #c4d0dc; font-size: 11px; letter-spacing: .18em; }
  .student-ui .portal-welcome .dashboard-eyebrow::after { content: ''; display: block; width: 34px; height: 3px; background: #ff4264; margin-top: 9px; }
  .student-ui.student-portal .profile-hero .hero-subtitle,
  .student-ui .profile-hero .portal-profile div > span { color: var(--portal-on-navy-muted); }
  .student-ui .profile-hero .portal-profile { min-width: 0; border-color: #ffffff26; }
  .student-ui .profile-hero .portal-profile strong { color: #fff; }
  .student-ui .profile-hero .portal-avatar { border: 1px solid #ffffff26; border-radius: 10px; background: #ffffff09; color: #fff; }
  .student-ui.student-portal .profile-hero .hero-meta { border-color: #ffffff26; padding-block: 13px; border-bottom: 0; }
  .student-ui.student-portal .profile-hero .hero-meta .hero-chip { background: transparent; color: var(--portal-on-navy-muted); }
  .student-ui.student-portal .profile-hero .hero-meta .hero-chip strong { color: #fff; }

  /* Keep all four product tiles compact and their existing access state labels. */
  .student-ui .service-grid { gap: 14px; }
  .student-ui .service-tile { border-top: 3px solid var(--portal-line); background: var(--portal-surface); box-shadow: var(--portal-shadow); }
  .student-ui .service-tile.service-unlocked { border-top-color: var(--portal-navy); }
  .student-ui .service-tile.service-selected,
  .student-ui .service-tile.service-expanded { border-color: var(--portal-red); }
  .student-ui .service-tile:hover { border-color: var(--portal-accent); background: var(--portal-surface); }
  .student-ui .service-launch { min-height: 142px; gap: 10px; padding: 16px; }
  .student-ui .service-tile-top { gap: 10px; }
  .student-ui .service-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--portal-navy); color: #fff; }
  .student-ui .service-inactive .service-icon { background: var(--portal-soft); color: var(--portal-muted); }
  .student-ui .service-description { font-size: 15px; }
  .student-ui .service-expansion { border-radius: 0 11px 11px 0; }
  .student-ui .service-learning-panel { box-shadow: var(--portal-shadow); }
  .student-ui .learning-panel-header { background: var(--portal-soft); border-radius: 11px 11px 0 0; }
  .student-ui :is(.agenda-brief, .agenda-grid, .dashboard-account a, .class-program-link, .class-next-step, .summary-card) {
    background: var(--portal-surface);
    box-shadow: var(--portal-shadow);
    border-color: var(--portal-line);
  }
  .student-ui .summary-card { border: 1px solid var(--portal-line); border-radius: var(--portal-radius); }
  .student-ui .agenda-brief-attention { background: var(--portal-soft); }
  .student-ui .agenda-brief-label { color: var(--portal-muted); }
  .student-ui .dashboard-account a > svg:first-child { color: var(--portal-accent); }
  .student-ui .dashboard-account a:hover { border-color: var(--portal-accent); }

  /* Documents, attendance, materials, and exams retain their original forms. */
  .student-ui:not(.student-portal) .hero-shell,
  .student-ui .page-hero {
    background: linear-gradient(120deg, var(--portal-navy), var(--portal-navy-raised));
    color: var(--portal-on-navy);
    border-color: transparent;
  }
  .student-ui:not(.student-portal) .hero-shell :is(.hero-title, .hero-subtitle, .hero-chip),
  .student-ui .page-hero :is(.hero-title, .hero-subtitle) { color: #fff; }
  .student-ui:not(.student-portal) .hero-shell .hero-subtitle { color: var(--portal-on-navy-muted); }
  .student-ui:not(.student-portal) .hero-shell .hero-eyebrow { color: #ff91a6; letter-spacing: .14em; }
  .student-ui:not(.student-portal) .hero-shell .hero-chip { background: #ffffff0d; border-color: #ffffff26; }
  .student-ui:not(.student-portal) .hero-shell .btn-outline-secondary { color: #fff; background: transparent; border-color: #8297aa; }
  .student-ui:not(.student-portal) .hero-shell .btn-outline-secondary:hover { background: #ffffff12; border-color: #fff; }
  .student-ui:not(.student-portal) .hero-shell :focus-visible { outline-color: #fff; }
  .student-ui .commerce-page :is(.commerce-card, .learning-card, .today-session, .today-aside),
  .student-ui :is(.card-panel, .doc-card, .material-card) { box-shadow: var(--portal-shadow); }
  .student-ui .commerce-page .today-session-top { background: var(--portal-soft); }
  .student-ui :is(.btn, .dashboard-button, .ci-button) { border-radius: 8px; }

  /* Only the app chrome changes; reading, signing and media canvases keep their
     original layout and colors. No filters or new positioning on those surfaces. */
  [data-student-theme='dark'] .student-ui .summary-card :is(.summary-label, .summary-value) { color: var(--portal-ink); }
}

@media screen and (max-width: 760px) {
  .student-ui .portal-masthead-inner { gap: 14px; }
  .student-ui .portal-brand-lockup .portal-brand-wordmark { font-size: 19px; }
  .student-ui.student-portal .profile-hero .hero-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .student-ui .profile-hero .portal-profile { max-width: none; padding-left: 0; border-left: 0; }
  .student-ui .profile-hero .portal-avatar { width: 38px; height: 42px; }
  .student-ui .profile-hero .portal-profile strong { font-size: 18px; }
  .student-ui.student-portal .profile-hero .hero-meta { gap: 10px 22px; flex-wrap: wrap; }
}
@media screen and (max-width: 600px) {
  .student-ui .service-grid { gap: 10px; }
  .student-ui .service-launch { min-height: 120px; }
  .student-ui .service-expansion { border-radius: 0 0 11px 11px; }
  .student-ui.student-portal .profile-hero { padding-top: 22px; }
  .student-ui .portal-brand-logo-full { max-width: min(220px, 65vw); }
  .student-ui .commerce-page .commerce-mast { gap: 16px; }
}