/* =========================================================================
   David Bryan Finances — Agent Portal
   styles.css · v2.2.0

   Design language: deep navy ground, a working blue for action, and silver
   as the brand metal on dark surfaces. Playfair Display sets every display
   line; DM Sans carries the interface. Silver is used the way leaf would be
   — rules, marks, seals and active markers — never as a background wash.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Fonts — bundled locally, no third-party request at runtime
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* -------------------------------------------------------------------------
   2. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Navy — the brand ground */
  --navy-950: #050f1c;
  --navy-900: #071426;
  --navy-850: #0b1d36;
  --navy-800: #112947;
  --navy-700: #1b3a60;
  --navy-600: #2b5182;

  /* Action blue — the brand's working colour */
  --blue-50:  #eef4fb;
  --blue-100: #d8e5f4;
  --blue-200: #b0caea;
  --blue-300: #74a3d8;
  --blue-400: #3d7cbe;
  --blue-500: #2563a8;
  --blue-600: #1a4c85;
  --blue-700: #123761;

  /* Silver — the brand metal on dark surfaces */
  --silver-100: #f4f7fa;
  --silver-200: #e4eaf1;
  --silver-300: #c5d5e8;
  --silver-400: #a6b8cc;
  --silver-500: #8496ab;

  /* Cool paper neutrals */
  --paper:    #f3f6fa;
  --paper-2:  #e8eef5;
  --surface:  #ffffff;
  --surface-2:#f9fbfd;

  /* Ink */
  --ink:      #11213a;
  --ink-2:    #33425b;
  --muted:    #5f6e84;
  --muted-2:  #8593a6;

  /* Hairlines */
  --line:     #e3e9f1;
  --line-2:   #d2dbe7;
  --line-cool:#e2e8f0;

  /* Status */
  --green: #1a7f57;  --green-soft: #e9f6f0;
  --amber: #a2711a;  --amber-soft: #fdf3de;
  --red:   #c23b3b;  --red-soft:   #fdeeee;
  --info:  #2b5182;  --info-soft:  #eaf0f8;
  --purple:#5b46b0;  --purple-soft:#efecfb;

  /* Elevation — low, wide and warm; never a hard drop shadow */
  --shadow-xs: 0 1px 2px rgba(16, 27, 46, .05);
  --shadow-sm: 0 2px 4px rgba(16, 27, 46, .04), 0 8px 20px rgba(16, 27, 46, .05);
  --shadow-md: 0 4px 10px rgba(16, 27, 46, .05), 0 18px 44px rgba(16, 27, 46, .08);
  --shadow-lg: 0 10px 24px rgba(7, 20, 38, .12), 0 40px 90px rgba(7, 20, 38, .20);
  --shadow-blue: 0 8px 20px rgba(21, 71, 128, .24);

  /* Geometry */
  --r-xs: 8px;
  --r-sm: 11px;
  --r:    15px;
  --r-lg: 20px;
  --sidebar: 268px;

  /* Type */
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --fs-2xs: 12.5px;
  --fs-xs:  13.5px;
  --fs-sm:  14.8px;
  --fs-md:  16px;
  --fs-lg:  17.5px;

  --ring: 0 0 0 3px rgba(37, 99, 168, .3);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* -------------------------------------------------------------------------
   3. Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.18;
  margin: 0 0 8px;
  color: var(--ink);
}
p { margin: 0 0 10px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
table { border-collapse: collapse; width: 100%; }

/* Numerals: lining + tabular everywhere a figure can change */
strong, b, td, th, kbd, .metric-copy strong, .req-progress, .summary-row strong {
  font-variant-numeric: tabular-nums lining-nums;
}

.icon { width: 18px; height: 18px; flex: none; display: block; }
svg { width: 18px; height: 18px; }

/* Focus: one consistent blue ring, keyboard-only */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Skip link for keyboard and screen-reader users */
.skip-link {
  position: fixed;
  left: 16px; top: -60px;
  z-index: 10000;
  background: var(--navy-900);
  color: #fff;
  padding: 11px 18px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-md);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

.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;
}

::selection { background: var(--blue-100); color: var(--navy-900); }

/* Scrollbars — thin and neutral where we own the surface */
.side-nav, .lesson-list, .global-results, .modal-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 152, 170, .45) transparent;
}
.side-nav::-webkit-scrollbar,
.lesson-list::-webkit-scrollbar,
.global-results::-webkit-scrollbar,
.modal-body::-webkit-scrollbar { width: 8px; }
.side-nav::-webkit-scrollbar-thumb,
.lesson-list::-webkit-scrollbar-thumb,
.global-results::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
  background: rgba(140, 152, 170, .4);
  border-radius: 99px;
}

/* -------------------------------------------------------------------------
   4. Brand lockup
   ------------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 13px; }

/* The lion is a knockout mark: it takes its colour from the surface it sits
   on rather than living inside a tile, so the linework stays legible. */
.brand-mark {
  flex: none;
  display: flex;
  align-items: center;
  color: var(--navy-850);
}
.lion {
  height: 48px;
  width: auto;
  display: block;
}
/* The mane carries a lot of fine linework — it needs size to stay readable,
   so each surface gets its own scale rather than one shared value. */
.auth-story .lion { height: 54px; }
.auth-card .lion  { height: 64px; }

.brand-copy strong {
  display: block;
  font-size: 15.5px;
  line-height: 1;
  letter-spacing: .17em;
  font-weight: 600;
  color: var(--navy-900);
}
.brand-copy span {
  display: block;
  font-size: 9.6px;
  letter-spacing: .36em;
  color: var(--muted-2);
  margin-top: 6px;
  font-weight: 500;
}
.brand-light .brand-mark { color: #fff; }
.brand-light .brand-copy strong { color: #fff; }
.brand-light .brand-copy span { color: rgba(217, 227, 240, .62); }

/* -------------------------------------------------------------------------
   5. Kickers, eyebrows, pills, status
   ------------------------------------------------------------------------- */
.section-kicker, .eyebrow, .accent-label {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: 7px;
}
.eyebrow, .accent-label { color: var(--silver-300); }
.panel-header .section-kicker,
.page-intro .section-kicker,
.modal-head .section-kicker { color: var(--muted-2); }

.pill {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-700);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border-radius: 99px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  border: 1px solid transparent;
}
.status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.status.green, .status.active   { background: var(--green-soft); color: var(--green); border-color: rgba(26, 127, 87, .18); }
.status.amber, .status.pending  { background: var(--amber-soft); color: var(--amber); border-color: rgba(162, 113, 26, .2); }
.status.inactive                { background: #f1f0ec; color: var(--muted); border-color: var(--line-2); }
.status.red                     { background: var(--red-soft); color: var(--red); border-color: rgba(194, 59, 59, .2); }

.priority {
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: 99px;
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid transparent;
}
.priority.standard  { background: var(--info-soft);   color: var(--info);   border-color: rgba(43, 81, 130, .16); }
.priority.important { background: var(--amber-soft);  color: var(--amber);  border-color: rgba(162, 113, 26, .2); }
.priority.required  { background: var(--red-soft);    color: var(--red);    border-color: rgba(194, 59, 59, .2); }

.priority-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 7px; }
.priority-dot.standard  { background: var(--info); }
.priority-dot.important { background: var(--amber); }
.priority-dot.required  { background: var(--red); }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.green-bg { background: var(--green); }
.pending-bg  { background: var(--amber); }
.gray-bg  { background: var(--silver-400); }
.green-text { color: var(--green); }

.required-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 99px;
  background: rgba(7, 20, 38, .78);
  color: var(--silver-300);
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .05em;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(197, 213, 232, .3);
}
.required-badge svg { width: 14px; height: 14px; }

/* -------------------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------------------- */
.btn {
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 11px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .005em;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  white-space: nowrap;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              background-color .16s var(--ease), border-color .16s var(--ease);
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(160deg, var(--blue-400) 0%, var(--blue-500) 46%, var(--blue-700) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--shadow-blue);
}
.btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 12px 26px rgba(21, 71, 128, .32);
  transform: translateY(-1px);
}
.btn-primary:active { box-shadow: inset 0 2px 5px rgba(9, 34, 66, .3); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink-2);
  border-color: var(--line-2);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { border-color: var(--blue-500); color: var(--navy-900); }

.btn-light {
  background: #fff;
  color: var(--navy-900);
  box-shadow: var(--shadow-sm);
}
.btn-light:hover { transform: translateY(-1px); }

.btn-sm { padding: 8px 13px; font-size: var(--fs-xs); border-radius: var(--r-xs); }
.btn-sm svg { width: 15px; height: 15px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

.text-btn, .link-btn {
  color: var(--blue-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 2px 0;
  display: inline-flex; align-items: center; gap: 7px;
  border-bottom: 1px solid transparent;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.text-btn:hover, .link-btn:hover { border-bottom-color: var(--blue-500); }
.text-btn svg, .link-btn svg { width: 15px; height: 15px; }

.icon-btn {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  display: grid; place-items: center;
  color: var(--muted);
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.icon-btn:hover { background: var(--paper-2); color: var(--navy-900); border-color: var(--line); }
.icon-btn.danger { color: var(--red); }
.icon-btn.danger:hover { background: var(--red-soft); border-color: rgba(194, 59, 59, .2); }

.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--muted);
  margin-bottom: 20px;
  transition: color .15s var(--ease);
}
.back-link:hover { color: var(--navy-900); }

/* -------------------------------------------------------------------------
   7. Form controls
   ------------------------------------------------------------------------- */
label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 7px;
  color: var(--ink-2);
}

.input, .select, .textarea {
  width: 100%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: var(--fs-sm);
  color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--blue-500);
  box-shadow: var(--ring);
  outline: none;
}
.input[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(194, 59, 59, .16);
}
.textarea { min-height: 124px; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6e84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 17px;
  padding-right: 40px;
}

.input-wrap { position: relative; margin-bottom: 16px; }
.input-wrap svg {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  pointer-events: none;
}
.input-wrap .input { padding-left: 43px; }
.input-wrap:focus-within svg { color: var(--blue-600); }
.input-action {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  color: var(--muted);
}
.input-action:hover { background: var(--paper-2); color: var(--navy-900); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.form-grid .full { grid-column: 1 / -1; }

.field-error[hidden] { display: none; }
.field-error {
  display: flex; align-items: center; gap: 7px;
  color: var(--red);
  font-size: var(--fs-xs);
  font-weight: 600;
  margin: -8px 0 14px;
}
.field-error svg { width: 15px; height: 15px; }

.check {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-2); margin: 0; cursor: pointer;
}
.check input { width: 17px; height: 17px; accent-color: var(--blue-600); cursor: pointer; }

.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; inset: 0;
  background: #d5d0c4;
  border-radius: 99px;
  transition: background-color .2s var(--ease);
}
.switch span::after {
  content: "";
  position: absolute; left: 3px; top: 3px;
  width: 22px; height: 22px;
  background: #fff; border-radius: 50%;
  box-shadow: var(--shadow-xs);
  transition: transform .2s var(--ease);
}
.switch input:checked + span { background: linear-gradient(135deg, var(--blue-400), var(--blue-600)); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { box-shadow: var(--ring); }

/* -------------------------------------------------------------------------
   8. Progress, avatars, rings
   ------------------------------------------------------------------------- */
.progress {
  height: 8px;
  border-radius: 99px;
  background: var(--paper-2);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(16, 27, 46, .06);
}
.progress span {
  display: block; height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue-700), var(--blue-400));
  box-shadow: 0 1px 3px rgba(21, 71, 128, .35);
  transition: width .5s var(--ease);
}

.avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-900));
  color: var(--silver-300);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  box-shadow: inset 0 0 0 1px rgba(197, 213, 232, .26);
}
.avatar.sm { width: 34px; height: 34px; border-radius: 10px; font-size: var(--fs-2xs); }

.ring {
  --p: 0;
  width: 132px; height: 132px;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(closest-side, var(--navy-900) 79%, transparent 80%),
    conic-gradient(var(--blue-300) calc(var(--p) * 1%), rgba(255, 255, 255, .13) 0);
  box-shadow: inset 0 0 0 1px rgba(197, 213, 232, .2);
}
.ring span {
  font-family: var(--serif);
  font-size: 29px; font-weight: 600;
  color: #fff; text-align: center; line-height: 1;
}
.ring span small {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(217, 227, 240, .6);
  margin-top: 7px;
}

.donut-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.donut {
  width: 128px; height: 128px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(closest-side, var(--surface) 76%, transparent 77%),
    conic-gradient(var(--blue-500) 0 62%, var(--blue-200) 0 80%, var(--silver-200) 0);
}
.donut span {
  font-family: var(--serif);
  font-size: 30px; font-weight: 600;
  text-align: center; line-height: 1;
}
.donut span small {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-top: 6px;
}
.legend { display: grid; gap: 12px; font-size: var(--fs-sm); }
.legend span { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 500; }

/* -------------------------------------------------------------------------
   9. Toasts
   ------------------------------------------------------------------------- */
.toast-region {
  position: fixed;
  right: 22px; top: 22px;
  z-index: 9999;
  display: grid; gap: 10px;
  max-width: min(380px, calc(100vw - 44px));
}
.toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  box-shadow: var(--shadow-md);
  padding: 14px 18px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  animation: toast-in .28s var(--ease);
}
.toast svg { color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast.error svg { color: var(--red); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   10. Authentication — the portal's front door
   ------------------------------------------------------------------------- */
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--paper);
}

.auth-story {
  position: relative;
  overflow: hidden;
  padding: 52px 56px 44px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(165deg, var(--navy-950) 0%, var(--navy-850) 52%, var(--navy-800) 100%);
}
/* Hairline silver rule down the seam between the two halves */
.auth-story::after {
  content: "";
  position: absolute; inset: 0 0 0 auto;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(197, 213, 232, .5), transparent);
}
/* Faint engraved guilloche, the way a certificate or share is printed */
.auth-story::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 14%, rgba(197, 213, 232, .1), transparent 34%),
    repeating-linear-gradient(58deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 13px);
  pointer-events: none;
}
.auth-brand, .auth-copy, .auth-quote, .auth-assurance { position: relative; z-index: 2; }

.auth-copy { max-width: 640px; margin: auto 0; }
.auth-copy h1 {
  font-size: clamp(46px, 4.6vw, 74px);
  line-height: .96;
  letter-spacing: -.035em;
  font-weight: 500;
  color: #fff;
  margin: 30px 0 20px;
}
.auth-copy h1 em {
  font-style: italic;
  color: var(--blue-300);
}
.auth-copy p {
  max-width: 520px;
  color: rgba(206, 218, 232, .88);
  font-size: var(--fs-lg);
  line-height: 1.68;
  margin: 0;
}

/* Three short assurances, replacing an empty column of navy */
.auth-assurance {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 30px;
}
.auth-assurance span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid rgba(197, 213, 232, .26);
  background: rgba(255, 255, 255, .04);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgba(226, 234, 244, .9);
}
.auth-assurance svg { width: 15px; height: 15px; color: var(--silver-300); }

.auth-quote {
  position: relative;
  border-top: 1px solid rgba(197, 213, 232, .2);
  padding-top: 22px;
  max-width: 580px;
  color: rgba(217, 227, 240, .82);
  font-size: var(--fs-sm);
  font-family: var(--serif);
  font-style: italic;
  line-height: 1.7;
}

.auth-orb {
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 50%;
  right: -270px; bottom: -190px;
  background: radial-gradient(circle at 38% 36%,
    rgba(197, 213, 232, .26),
    rgba(37, 99, 168, .1) 44%,
    transparent 70%);
  pointer-events: none;
}

.auth-form-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 44px 40px 30px;
  background:
    radial-gradient(circle at 50% 0%, #fff 0%, var(--paper) 62%);
}

.auth-card {
  width: 100%;
  max-width: 424px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 38px 38px 32px;
  box-shadow: var(--shadow-md);
  position: relative;
}
/* Silver capital rule across the top edge of the card */
.auth-card::before {
  content: "";
  position: absolute; left: 38px; right: 38px; top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--silver-400), transparent);
}
.auth-card .brand { margin-bottom: 28px; }

.auth-title { margin-bottom: 24px; }
.auth-title h2 { font-size: 28px; letter-spacing: -.025em; margin-bottom: 6px; }
.auth-title p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

.login-options {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 4px 0 20px;
}

.auth-back { margin-top: 18px; }

.demo-box {
  margin-top: 24px;
  padding: 15px 17px;
  border-radius: var(--r-sm);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  font-size: var(--fs-xs);
  line-height: 1.85;
  color: var(--blue-700);
}
.demo-box strong { color: var(--navy-900); font-weight: 700; }
.demo-box .demo-title {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  font-size: 11px; color: var(--blue-700);
  margin-bottom: 8px;
}
.demo-box .demo-title svg { width: 14px; height: 14px; }
.demo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1px 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(37, 99, 168, .22);
}
.demo-row:last-child { border-bottom: 0; padding-bottom: 0; }
.demo-row strong {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.demo-row span {
  grid-column: 1 / -1;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  word-break: break-all;
}
.demo-fill {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-700);
  border-bottom: 1px solid var(--blue-500);
}

.public-button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  border-radius: var(--r-sm);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.public-button:hover { color: var(--navy-900); background: var(--paper-2); }

.auth-footer {
  margin-top: 26px;
  font-size: var(--fs-xs);
  color: var(--muted-2);
  display: flex; align-items: center; gap: 9px;
}
.auth-footer span { color: var(--blue-500); }

/* -------------------------------------------------------------------------
   11. Prototype public site
   ------------------------------------------------------------------------- */
.public-page { min-height: 100vh; background: var(--paper); display: flex; flex-direction: column; }
.public-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 22px clamp(20px, 5vw, 62px);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.public-header nav { display: flex; align-items: center; gap: 28px; }
.public-header nav a {
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2);
  transition: color .15s var(--ease);
}
.public-header nav a:hover { color: var(--blue-700); }

.public-hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 56px;
  align-items: center;
  padding: clamp(48px, 8vw, 104px) clamp(20px, 5vw, 62px);
}
.public-hero h1 {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 500;
  margin: 22px 0 18px;
}
.public-hero p { font-size: var(--fs-lg); color: var(--muted); max-width: 540px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }

.public-panel {
  padding: 40px 36px;
  border-radius: var(--r-lg);
  color: #fff;
  background: linear-gradient(165deg, var(--navy-850), var(--navy-950));
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.public-panel::after {
  content: ""; position: absolute; inset: 10px; border-radius: 14px;
  border: 1px solid rgba(197, 213, 232, .2); pointer-events: none;
}
.public-panel span {
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .26em; color: var(--silver-300);
}
.public-panel h3 { color: #fff; font-size: 27px; margin: 16px 0 12px; }
.public-panel p { color: rgba(206, 218, 232, .82); margin: 0; }

.public-footer {
  padding: 22px clamp(20px, 5vw, 62px);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.public-footer button { color: var(--blue-700); font-weight: 600; }

/* -------------------------------------------------------------------------
   12. App shell
   ------------------------------------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  padding: 22px 16px 16px;
  color: #fff;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  box-shadow: inset -1px 0 0 rgba(197, 213, 232, .14);
  z-index: 60;
}
.sidebar-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0 6px 20px;
}
.sidebar .brand-mark { color: #fff; }
.sidebar .lion { height: 44px; }
.sidebar-close { display: none; color: rgba(217, 227, 240, .7); }

.workspace-label {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(197, 213, 232, .16);
}
.workspace-label span {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em;
  color: var(--silver-300);
}
.workspace-label small { font-size: var(--fs-2xs); color: rgba(190, 203, 219, .75); font-weight: 500; }

.side-nav { display: grid; gap: 3px; overflow-y: auto; padding-right: 2px; }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(205, 217, 232, .84);
  text-align: left;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav-item svg { color: rgba(190, 203, 219, .68); transition: color .15s var(--ease); }
.nav-item span { flex: 1; }
.nav-item b {
  min-width: 21px; height: 21px;
  border-radius: 99px;
  display: grid; place-items: center;
  background: var(--silver-300);
  color: var(--navy-850);
  font-size: 11.5px; font-weight: 700;
  padding: 0 6px;
}
.nav-item:hover { background: rgba(255, 255, 255, .055); color: #fff; }
.nav-item:hover svg { color: var(--silver-300); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(197, 213, 232, .16), rgba(197, 213, 232, .04));
  color: #fff;
  font-weight: 600;
}
.nav-item.active svg { color: var(--silver-300); }
/* Silver marker on the active row */
.nav-item.active::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--blue-300);
}

.sidebar-card {
  margin-top: auto;
  padding: 18px;
  border-radius: var(--r);
  background: linear-gradient(160deg, rgba(197, 213, 232, .14), rgba(197, 213, 232, .03));
  border: 1px solid rgba(197, 213, 232, .22);
}
.side-card-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(197, 213, 232, .18);
  color: var(--silver-300);
  margin-bottom: 12px;
}
.sidebar-card strong {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-md);
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}
.sidebar-card p {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(203, 216, 232, .78);
  margin: 0 0 12px;
}
.sidebar-card button {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--silver-300);
  border-bottom: 1px solid transparent;
}
.sidebar-card button:hover { border-bottom-color: var(--silver-300); }
.sidebar-card svg { width: 14px; height: 14px; }

.sidebar-user {
  display: flex; align-items: center; gap: 11px;
  margin-top: 14px;
  padding: 12px 10px 4px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.sidebar-user > div:not(.avatar) { flex: 1; min-width: 0; }
.sidebar-user strong {
  display: block; font-size: var(--fs-sm); font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user span { font-size: var(--fs-2xs); color: rgba(190, 203, 219, .72); }
.sidebar-user .icon-btn { color: rgba(190, 203, 219, .8); }
.sidebar-user .icon-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: transparent; }
.sidebar-user .avatar { background: rgba(255, 255, 255, .08); }

/* --- Main column --- */
.app-main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 15px clamp(18px, 3vw, 38px);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.topbar-left h1 {
  font-size: 23px;
  margin: 2px 0 0;
  letter-spacing: -.022em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crumb {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.menu-btn { display: none; }

.top-actions { display: flex; align-items: center; gap: 9px; }

.global-search {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 13px;
  min-width: 250px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.global-search:hover { border-color: var(--blue-500); background: #fff; }
.global-search span { flex: 1; text-align: left; }
.global-search kbd {
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  color: var(--muted);
}

.notification-btn { position: relative; }
.notify-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue-500);
  box-shadow: 0 0 0 2px #fff;
}

.profile-trigger {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 11px 5px 5px;
  border-radius: 99px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  transition: border-color .15s var(--ease);
}
.profile-trigger:hover { border-color: var(--blue-500); }
.profile-trigger > span { display: grid; text-align: left; line-height: 1.25; }
.profile-trigger strong { font-size: var(--fs-xs); font-weight: 600; }
.profile-trigger small { font-size: 11.5px; color: var(--muted); }
.profile-trigger svg { width: 15px; height: 15px; color: var(--muted-2); }

.content {
  flex: 1;
  padding: clamp(22px, 3vw, 34px) clamp(18px, 3vw, 38px) 44px;
  max-width: 1560px;
  width: 100%;
}

.app-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 20px clamp(18px, 3vw, 38px);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--muted-2);
}

.mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(6, 16, 30, .5);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
  z-index: 55;
}
.mobile-overlay.show { opacity: 1; pointer-events: auto; }

/* Compact density preference */
.app-shell.compact .content { padding-top: 18px; padding-bottom: 28px; }
.app-shell.compact .panel { padding: 20px; }
.app-shell.compact .nav-item { padding: 8px 13px; }
.app-shell.compact .metric-card { padding: 17px; }
.app-shell.compact .dashboard-grid,
.app-shell.compact .metrics-grid { gap: 16px; }

/* -------------------------------------------------------------------------
   13. Page furniture — intros, panels, toolbars
   ------------------------------------------------------------------------- */
.page-intro {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.page-intro h2 {
  font-size: clamp(27px, 2.6vw, 35px);
  letter-spacing: -.028em;
  margin-bottom: 8px;
  max-width: 22ch;
}
.page-intro p { color: var(--muted); font-size: var(--fs-sm); max-width: 62ch; margin: 0; }

.intro-stat {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.intro-stat svg { color: var(--blue-600); width: 20px; height: 20px; }
.intro-stat strong { color: var(--ink); font-weight: 700; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.panel-header, .panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.panel-header h3, .panel-head strong {
  font-family: var(--serif);
  font-size: 19.5px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -.02em;
}
.panel-header .section-kicker { margin-bottom: 5px; }

.toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.search-box {
  position: relative;
  flex: 1; min-width: 240px;
}
.search-box svg {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  pointer-events: none;
}
.search-box input {
  width: 100%;
  padding: 12px 14px 12px 43px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: var(--fs-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.search-box input:focus { border-color: var(--blue-500); box-shadow: var(--ring); outline: none; }

.filter-tabs {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding: 5px;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.filter-tab {
  padding: 8px 15px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.filter-tab:hover { color: var(--navy-900); }
.filter-tab.active {
  background: var(--surface);
  color: var(--navy-900);
  box-shadow: var(--shadow-xs);
}
.resource-toolbar .compact-select { max-width: 230px; }

.empty-state {
  grid-column: 1 / -1;
  display: grid; place-items: center;
  gap: 6px;
  padding: 62px 24px;
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--muted);
}
.empty-state svg {
  width: 40px; height: 40px;
  color: var(--blue-500);
  margin-bottom: 6px;
  stroke-width: 1.2;
}
.empty-state h3 { font-size: 20px; margin: 0; }
.empty-state p { margin: 0; font-size: var(--fs-sm); }

/* -------------------------------------------------------------------------
   14. Dashboard
   ------------------------------------------------------------------------- */
.welcome-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  padding: 36px 40px;
  border-radius: var(--r-lg);
  color: #fff;
  background: linear-gradient(150deg, var(--navy-850) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}
.welcome-banner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 88% 22%, rgba(197, 213, 232, .16), transparent 42%),
    repeating-linear-gradient(58deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 14px);
  pointer-events: none;
}
.welcome-banner > div { position: relative; z-index: 2; }
.welcome-banner h2 {
  color: #fff;
  font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -.028em;
  margin: 12px 0 10px;
  font-weight: 500;
}
.welcome-banner p {
  color: rgba(206, 218, 232, .86);
  font-size: var(--fs-md);
  max-width: 56ch;
  margin: 0 0 22px;
}
.welcome-banner p strong { color: var(--silver-300); font-weight: 600; }
.welcome-ring { position: relative; z-index: 2; }

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.metric-card {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 21px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.metric-icon {
  width: 46px; height: 46px; flex: none;
  border-radius: 13px;
  display: grid; place-items: center;
  border: 1px solid transparent;
}
.metric-icon svg { width: 21px; height: 21px; }
.metric-icon.blue   { background: var(--info-soft);   color: var(--info);   border-color: rgba(43, 81, 130, .14); }
.metric-icon.green  { background: var(--green-soft);  color: var(--green);  border-color: rgba(26, 127, 87, .14); }
.metric-icon.steel  { background: var(--silver-200); color: var(--navy-800); border-color: var(--silver-300); }
.metric-icon.purple { background: var(--purple-soft); color: var(--purple); border-color: rgba(91, 70, 176, .14); }

.metric-copy { min-width: 0; }
.metric-copy span {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  /* Reserve two lines so the figures below stay on one baseline whether the
     label wraps or not. */
  min-height: 2.9em;
}
.metric-copy strong {
  display: block;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin: 4px 0 2px;
}
.metric-copy small { font-size: var(--fs-xs); color: var(--muted); }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.dashboard-grid .span-2 { grid-column: span 2; }

.continue-card {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 20px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.continue-art {
  width: 84px; height: 84px; flex: none;
  border-radius: 15px;
  display: grid; place-items: center;
  color: var(--silver-300);
  background: linear-gradient(150deg, var(--navy-800), var(--navy-950));
  box-shadow: inset 0 0 0 1px rgba(197, 213, 232, .3);
}
.continue-art svg { width: 28px; height: 28px; }
.continue-main { flex: 1; min-width: 220px; }
.continue-main h3 { font-size: 21px; margin: 11px 0 6px; }
.continue-main p { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 14px; }
.continue-progress { display: grid; gap: 8px; }
.continue-progress span { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }

.event-list { display: grid; gap: 4px; }
.event-row {
  display: flex; align-items: center; gap: 15px;
  padding: 12px 10px;
  border-radius: var(--r-sm);
  transition: background-color .15s var(--ease);
}
.event-row:hover { background: var(--surface-2); }
.event-row > div:last-child { min-width: 0; }
.event-row strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.event-row span { font-size: var(--fs-xs); color: var(--muted); }
.event-date {
  width: 54px; height: 56px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center; align-content: center;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  line-height: 1.1;
}
.event-date strong {
  font-family: var(--serif);
  font-size: 21px; font-weight: 600;
  color: var(--navy-900);
}
.event-date span {
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em;
  color: var(--blue-700);
}
.event-list.large .event-row { padding: 14px 10px; border-bottom: 1px solid var(--line); border-radius: 0; }
.event-list.large .event-row:last-child { border-bottom: 0; }

.required-list { display: grid; gap: 3px; }
.required-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 13px 12px;
  border-radius: var(--r-sm);
  text-align: left;
  transition: background-color .15s var(--ease);
}
.required-row:hover { background: var(--surface-2); }
.required-row > span:nth-child(2) { flex: 1; min-width: 0; }
.required-row strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.required-row small { font-size: var(--fs-xs); color: var(--muted); }
.req-icon {
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-700);
}
.req-progress {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy-900);
}
.required-row > svg { color: var(--muted-2); }

.mini-announcements { display: grid; gap: 4px; }
.mini-announcements > div {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 10px;
  border-radius: var(--r-sm);
  transition: background-color .15s var(--ease);
}
.mini-announcements > div:hover { background: var(--surface-2); }
.mini-announcements p { margin: 0; min-width: 0; }
.mini-announcements strong { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; }
.mini-announcements small { font-size: var(--fs-xs); color: var(--muted); }

/* -------------------------------------------------------------------------
   15. Course cards & training
   ------------------------------------------------------------------------- */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}
.course-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-100);
}
.course-cover {
  position: relative;
  height: 172px;
  padding: 15px;
  display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-950));
}
.course-cover::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(58deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 12px);
}
/* Category tinting — a different dark hue per track, silver stays the constant */
.cover-onboarding { background: linear-gradient(150deg, #143050, var(--navy-950)); }
.cover-products   { background: linear-gradient(150deg, #143f43, #061c20); }
.cover-sales      { background: linear-gradient(150deg, #3d2a47, #16091f); }
.cover-compliance { background: linear-gradient(150deg, #45301a, #1c1006); }
.cover-growth     { background: linear-gradient(150deg, #1a3b2c, #06180f); }
.cover-leadership { background: linear-gradient(150deg, #2a3352, #0a1024); }

.course-category {
  position: relative; z-index: 2;
  padding: 5px 11px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.course-cover .required-badge { position: relative; z-index: 2; }
.course-play {
  position: absolute; right: 15px; bottom: 15px;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #fff, var(--silver-300));
  color: var(--navy-900);
  box-shadow: 0 6px 16px rgba(7, 20, 38, .45);
  transition: transform .18s var(--ease);
}
.course-card:hover .course-play { transform: scale(1.08); }

.course-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.course-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.course-meta span:not(:last-child)::after { content: " ·"; margin-left: 9px; color: var(--line-2); }
.course-body h3 { font-size: 20px; margin-bottom: 8px; }
.course-body > p {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0 0 18px;
  flex: 1;
}
.course-progress { display: grid; gap: 8px; margin-bottom: 15px; }
.course-progress > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.course-progress span { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.course-progress small { font-size: var(--fs-xs); color: var(--muted-2); }
.course-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: auto;
}
.course-footer > div { display: flex; align-items: center; gap: 7px; }

/* --- Course detail --- */
.course-detail-head { margin-bottom: 24px; }
.course-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 306px;
  gap: 30px;
  align-items: start;
}
.course-detail-grid h2 {
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -.03em;
  margin: 14px 0 10px;
}
.course-detail-grid > div:first-child > p {
  color: var(--muted);
  font-size: var(--fs-lg);
  line-height: 1.65;
  max-width: 64ch;
}
.detail-meta {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.detail-meta span { display: inline-flex; align-items: center; gap: 8px; }
.detail-meta svg { color: var(--blue-600); width: 17px; height: 17px; }

.course-completion-card {
  padding: 24px;
  border-radius: var(--r);
  color: #fff;
  background: linear-gradient(160deg, var(--navy-850), var(--navy-950));
  box-shadow: var(--shadow-lg);
  display: grid; gap: 10px;
}
.course-completion-card > span {
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--silver-300);
}
.course-completion-card > strong {
  font-family: var(--serif);
  font-size: 46px; font-weight: 600;
  line-height: 1; letter-spacing: -.035em;
}
.course-completion-card .progress { background: rgba(255, 255, 255, .12); box-shadow: none; }
.course-completion-card small { font-size: var(--fs-xs); color: rgba(200, 213, 230, .8); }

.course-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 22px;
  align-items: start;
}
.video-placeholder {
  height: 320px;
  border-radius: var(--r);
  display: grid; place-items: center; align-content: center; gap: 14px;
  background: linear-gradient(150deg, var(--navy-850), var(--navy-950));
  color: rgba(206, 218, 232, .7);
  font-size: var(--fs-sm);
  position: relative; overflow: hidden;
  margin-bottom: 24px;
}
.video-placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(58deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 14px);
}
.video-placeholder > div {
  position: relative; z-index: 2;
  width: 66px; height: 66px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #fff, var(--silver-300));
  color: var(--navy-900);
  box-shadow: 0 6px 16px rgba(7, 20, 38, .45);
}
.video-placeholder > div svg { width: 26px; height: 26px; }
.video-placeholder span { position: relative; z-index: 2; letter-spacing: .06em; }

.lesson-copy h3 { font-size: 23px; margin: 4px 0 10px; }
.lesson-copy p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; max-width: 68ch; margin-bottom: 20px; }

.lesson-panel { position: sticky; top: 88px; }
.lesson-list { display: grid; gap: 3px; max-height: 480px; overflow-y: auto; }
.lesson-row {
  display: flex; align-items: center; gap: 13px;
  width: 100%;
  padding: 12px;
  border-radius: var(--r-sm);
  text-align: left;
  transition: background-color .15s var(--ease);
}
.lesson-row:hover { background: var(--surface-2); }
.lesson-row > span:first-child {
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--paper-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.lesson-row > div { flex: 1; min-width: 0; }
.lesson-row strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.lesson-row small { font-size: var(--fs-xs); color: var(--muted-2); }
.lesson-row > svg { color: var(--line-2); }
.lesson-row.done > span:first-child { background: var(--green-soft); color: var(--green); }
.lesson-row.done > svg { color: var(--green); }
.lesson-row.done strong { color: var(--muted); }
.lesson-row.current {
  background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue-100);
}
.lesson-row.current > span:first-child {
  background: linear-gradient(140deg, var(--blue-400), var(--blue-700));
  color: #fff;
}
.lesson-row.current > svg { color: var(--blue-700); }

/* -------------------------------------------------------------------------
   16. Resources
   ------------------------------------------------------------------------- */
.resource-table { display: grid; }
.resource-head, .resource-item {
  display: grid;
  grid-template-columns: 40px 52px minmax(220px, 2.4fr) 1fr .9fr .7fr auto;
  align-items: center;
  gap: 16px;
}
.resource-head {
  grid-template-columns: 40px 52px minmax(220px, 2.4fr) 1fr .9fr .7fr auto;
  padding: 0 6px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted-2);
}
/* The head has no cells for the star and filetype columns */
.resource-head span:first-child { grid-column: 3; }
.resource-head span:nth-child(2) { grid-column: 4; }
.resource-head span:nth-child(3) { grid-column: 5; }
.resource-head span:nth-child(4) { grid-column: 6; }

.resource-item {
  padding: 14px 6px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
  transition: background-color .15s var(--ease);
}
.resource-item:last-child { border-bottom: 0; }
.resource-item:hover { background: var(--surface-2); }

.favorite-btn {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  color: var(--line-2);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.favorite-btn:hover { color: var(--blue-500); background: var(--blue-50); }
.favorite-btn svg[fill="currentColor"] { color: var(--blue-500); }

.filetype {
  width: 46px; height: 46px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  border: 1px solid transparent;
}
.filetype.pdf  { background: var(--red-soft);   color: var(--red);   border-color: rgba(194, 59, 59, .18); }
.filetype.pptx { background: var(--amber-soft); color: var(--amber); border-color: rgba(162, 113, 26, .2); }
.filetype.docx { background: var(--info-soft);  color: var(--info);  border-color: rgba(43, 81, 130, .16); }
.filetype.zip  { background: var(--purple-soft);color: var(--purple);border-color: rgba(91, 70, 176, .16); }

.resource-name { min-width: 0; }
.resource-name strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.resource-name small { font-size: var(--fs-xs); color: var(--muted-2); }
.resource-category {
  justify-self: start;
  padding: 4px 11px;
  border-radius: 99px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--ink-2);
}
.resource-actions { display: flex; align-items: center; gap: 6px; justify-self: end; }

/* -------------------------------------------------------------------------
   17. Calendar
   ------------------------------------------------------------------------- */
.calendar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.calendar-month {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}
.calendar-month h3 { font-size: 21px; margin: 0; }
.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.calendar-week span {
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.calendar-day {
  position: relative;
  aspect-ratio: 1 / .92;
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  transition: border-color .15s var(--ease);
}
.calendar-day:hover { border-color: var(--blue-500); }
.calendar-day.muted-day { background: transparent; border-color: transparent; }
.calendar-day.has-event {
  background: var(--blue-50);
  border-color: var(--silver-300);
  color: var(--navy-900);
  font-weight: 700;
}
.calendar-day.has-event span {
  position: absolute; bottom: 7px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue-600);
}

/* -------------------------------------------------------------------------
   18. Certificates
   ------------------------------------------------------------------------- */
.certificate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}
.certificate-card {
  position: relative;
  padding: 32px 28px 26px;
  border-radius: var(--r);
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, var(--silver-100) 100%);
  border: 1px solid var(--silver-200);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.certificate-card::after {
  content: "";
  position: absolute; inset: 9px;
  border-radius: 11px;
  border: 1px solid var(--silver-300);
  pointer-events: none;
}
.certificate-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cert-seal {
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--navy-800) 0%, var(--navy-900) 60%, var(--navy-950) 100%);
  color: var(--silver-300);
  box-shadow: 0 8px 20px rgba(19, 55, 97, .28), inset 0 0 0 2px rgba(197, 213, 232, .55);
  margin-bottom: 16px;
}
.cert-seal svg { width: 27px; height: 27px; }
.certificate-card > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.certificate-card h3 {
  font-size: 22px;
  margin: 12px 0 10px;
  max-width: 26ch;
}
.certificate-card p { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 6px; }
.certificate-card p strong { color: var(--ink); }
.certificate-card small {
  font-size: var(--fs-xs);
  color: var(--muted-2);
  letter-spacing: .05em;
  margin-bottom: 20px;
}
.certificate-card .btn { margin-top: auto; }
.certificate-card.earned {
  background: var(--surface);
  border-color: var(--line);
  border-style: dashed;
}
.certificate-card.earned::after { display: none; }
.certificate-card.earned .cert-seal {
  background: var(--green-soft);
  color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(26, 127, 87, .2);
}
.certificate-card.earned > span { color: var(--green); }

/* -------------------------------------------------------------------------
   19. Announcements
   ------------------------------------------------------------------------- */
.announcement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.announcement-card {
  display: flex; flex-direction: column;
  padding: 24px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.announcement-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.announcement-card:has(.priority.required)  { border-left-color: var(--red); }
.announcement-card:has(.priority.important) { border-left-color: var(--blue-500); }
.announcement-card:has(.priority.standard)  { border-left-color: var(--info); }
.announcement-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.announcement-top > span:last-child { font-size: var(--fs-xs); color: var(--muted-2); font-weight: 500; }
.announcement-card h3 { font-size: 20px; margin-bottom: 9px; }
.announcement-card > p {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 18px;
}
.announcement-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.announcement-bottom > span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
}
.announcement-bottom svg { width: 16px; height: 16px; color: var(--blue-600); }
.announcement-bottom > div { display: flex; gap: 5px; }

/* -------------------------------------------------------------------------
   20. Profile & support
   ------------------------------------------------------------------------- */
.profile-hero {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 28px 30px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.profile-hero > div:nth-child(2) { flex: 1; min-width: 200px; }
.profile-hero h2 { font-size: 30px; letter-spacing: -.03em; margin: 2px 0 4px; }
.profile-hero p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.profile-avatar-lg {
  width: 88px; height: 88px; flex: none;
  border-radius: 22px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-950));
  color: var(--silver-300);
  font-family: var(--serif);
  font-size: 31px;
  font-weight: 600;
  letter-spacing: .03em;
  box-shadow: inset 0 0 0 1px rgba(197, 213, 232, .32), var(--shadow-sm);
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.account-summary { position: sticky; top: 88px; }
.summary-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.summary-row span { color: var(--muted); }
.summary-row strong { font-weight: 600; }
.summary-row:last-of-type { border-bottom: 0; margin-bottom: 18px; }

.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.support-card {
  padding: 24px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.support-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--blue-100); }
.support-card > svg {
  width: 44px; height: 44px;
  padding: 11px;
  border-radius: 13px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-700);
  margin-bottom: 15px;
  stroke-width: 1.6;
}
.support-card h3 { font-size: 19px; margin-bottom: 7px; }
.support-card p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; margin: 0; }
.support-form-panel .form-grid { max-width: 780px; }

/* -------------------------------------------------------------------------
   21. Admin
   ------------------------------------------------------------------------- */
.admin-welcome {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.admin-welcome h2 { font-size: clamp(27px, 2.6vw, 35px); letter-spacing: -.028em; margin-bottom: 7px; }
.admin-welcome p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.quick-buttons { display: flex; gap: 11px; flex-wrap: wrap; }

.analytics-bars, .report-bars { display: grid; gap: 18px; }
.analytics-bars > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  grid-template-areas: "label value" "bar bar";
  align-items: center;
  gap: 8px 14px;
}
.analytics-bars > div > span { grid-area: label; font-size: var(--fs-sm); font-weight: 600; }
.analytics-bars > div > .progress { grid-area: bar; }
.analytics-bars > div > strong { grid-area: value; text-align: right; font-size: var(--fs-sm); font-weight: 700; }

.report-bars > div { display: grid; gap: 8px; }
.report-bars > div > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.report-bars strong { font-size: var(--fs-sm); font-weight: 600; }
.report-bars span { font-size: var(--fs-sm); font-weight: 700; color: var(--blue-700); }

.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  align-items: start;
}
.agent-progress-list { display: grid; gap: 18px; }
.agent-progress-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  grid-template-areas: "user value" "bar bar";
  align-items: center;
  gap: 9px 14px;
}
.agent-progress-list .user-cell { grid-area: user; }
.agent-progress-list > div > strong { grid-area: value; text-align: right; font-size: var(--fs-sm); font-weight: 700; }
.agent-progress-list .progress { grid-area: bar; }

.activity-list, .audit-list { display: grid; gap: 2px; }
.activity-row, .audit-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 10px;
  border-radius: var(--r-sm);
  transition: background-color .15s var(--ease);
}
.activity-row:hover, .audit-row:hover { background: var(--surface-2); }
.activity-row > div, .audit-row > div { flex: 1; min-width: 0; }
.activity-row strong, .audit-row strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.activity-row span, .audit-row > div span { font-size: var(--fs-xs); color: var(--muted); }
/* Wins over `.activity-row > div { flex: 1 }`, which would otherwise stretch
   the icon across the row. */
.activity-row > .activity-icon,
.activity-icon {
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--blue-700);
}
.audit-row { border-bottom: 1px solid var(--line); border-radius: 0; }
.audit-row:last-child { border-bottom: 0; }
.audit-ip {
  flex: none;
  padding: 4px 11px;
  border-radius: 99px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.content-stats { display: grid; gap: 2px; }
.content-stats > div {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 13px 10px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.content-stats > div:last-child { border-bottom: 0; }
.content-stats span { color: var(--muted); }
.content-stats strong { font-family: var(--serif); font-size: 21px; font-weight: 600; }

.admin-course-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

/* --- Data table --- */
.table-panel { padding: 6px 6px 4px; overflow-x: auto; }
.table-panel table { min-width: 780px; }
.table-panel th {
  text-align: left;
  padding: 16px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}
.table-panel td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
  vertical-align: middle;
}
.table-panel tbody tr { transition: background-color .15s var(--ease); }
.table-panel tbody tr:hover { background: var(--surface-2); }
.table-panel tbody tr:last-child td { border-bottom: 0; }

.user-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.user-cell strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.user-cell span { font-size: var(--fs-xs); color: var(--muted); }
.user-cell small { font-size: var(--fs-xs); color: var(--muted); display: block; }
.row-actions { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }

/* --- Settings --- */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}
.settings-card {
  display: flex; align-items: center; gap: 18px;
}
.settings-card > div { flex: 1; min-width: 0; }
.settings-card h3 { font-size: 19px; margin-bottom: 5px; }
.settings-card p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; margin: 0; }
.settings-icon {
  width: 50px; height: 50px; flex: none;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-950));
  color: var(--silver-300);
  box-shadow: inset 0 0 0 1px rgba(197, 213, 232, .3);
}
.settings-icon svg { width: 21px; height: 21px; }

/* -------------------------------------------------------------------------
   22. Notification panel
   ------------------------------------------------------------------------- */
.notification-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: clamp(18px, 3vw, 38px);
  width: min(384px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 80;
  animation: pop-in .18s var(--ease);
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.notification-panel .panel-head {
  align-items: center;
  padding: 12px 12px 14px;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--line);
}
.notification-panel .panel-head span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 500;
}
.notification-item {
  display: flex; align-items: flex-start; gap: 13px;
  width: 100%;
  padding: 13px 12px;
  border-radius: var(--r-sm);
  text-align: left;
  transition: background-color .15s var(--ease);
}
.notification-item:hover { background: var(--surface-2); }
.notification-item > span:last-child { min-width: 0; }
.notification-item strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.notification-item small {
  display: -webkit-box;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.5;
  margin: 3px 0 5px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notification-item em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.notification-icon {
  width: 36px; height: 36px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-700);
}
.notification-all {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 13px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--blue-700);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: background-color .15s var(--ease);
}
.notification-all:hover { background: var(--blue-50); }

/* -------------------------------------------------------------------------
   23. Global search (⌘K)
   ------------------------------------------------------------------------- */
.search-overlay {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(6, 16, 30, .5);
  backdrop-filter: blur(5px);
  display: flex; justify-content: center;
  padding: clamp(48px, 12vh, 132px) 20px 20px;
  animation: fade-in .16s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.search-modal {
  width: min(660px, 100%);
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: rise-in .2s var(--ease);
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.search-modal-top {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.search-modal-top svg { color: var(--muted-2); }
.search-modal-top input {
  flex: 1;
  border: 0;
  background: none;
  font-size: var(--fs-lg);
  outline: none;
}
.search-modal-top input::placeholder { color: var(--muted-2); }
.key {
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted);
}

.global-results { max-height: min(440px, 54vh); overflow-y: auto; padding: 8px; }
.global-result {
  display: flex; align-items: center; gap: 13px;
  width: 100%;
  padding: 12px 13px;
  border-radius: var(--r-sm);
  text-align: left;
  transition: background-color .15s var(--ease);
}
.global-result:hover, .global-result.is-active { background: var(--blue-50); }
.global-result svg { color: var(--blue-700); flex: none; }
.global-result > span { flex: 1; min-width: 0; }
.global-result strong { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.global-result small { font-size: var(--fs-xs); color: var(--muted); }

.search-hint {
  display: grid; place-items: center; gap: 10px;
  padding: 46px 20px;
  text-align: center;
  color: var(--muted-2);
}
.search-hint svg { width: 30px; height: 30px; color: var(--blue-500); stroke-width: 1.3; }
.search-hint p { font-size: var(--fs-sm); margin: 0; }

/* -------------------------------------------------------------------------
   24. Modals
   ------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0;
  z-index: 300;
  background: rgba(6, 16, 30, .55);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
  animation: fade-in .16s var(--ease);
}
.modal {
  width: min(680px, 100%);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: rise-in .22s var(--ease);
  margin: auto;
}
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.modal-head h3 { font-size: 23px; margin: 0; letter-spacing: -.025em; }
.modal-body { padding: 26px; max-height: 64vh; overflow-y: auto; }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 11px;
  padding: 18px 26px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.delete-icon {
  width: 54px; height: 54px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid rgba(194, 59, 59, .18);
  margin-bottom: 16px;
}
.delete-icon svg { width: 24px; height: 24px; }
.delete-copy h4 { font-size: 21px; margin-bottom: 8px; }
.delete-copy p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

/* -------------------------------------------------------------------------
   25. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid .span-2 { grid-column: span 2; }
  .course-layout,
  .course-detail-grid,
  .profile-layout,
  .calendar-grid { grid-template-columns: minmax(0, 1fr); }
  .lesson-panel, .account-summary { position: static; }
  .lesson-list { max-height: none; }
}

@media (max-width: 1024px) {
  .auth-shell { grid-template-columns: minmax(0, 1fr); }
  .auth-story { padding: 40px 34px; min-height: auto; }
  .auth-story::after { display: none; }
  .auth-copy { margin: 28px 0; }
  .auth-copy h1 { font-size: clamp(38px, 7vw, 54px); margin: 20px 0 16px; }
  .auth-quote { display: none; }
  .auth-form-side { padding: 34px 22px 28px; }
  .public-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .public-header nav a { display: none; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: min(300px, 86vw);
    transform: translateX(-102%);
    transition: transform .28s var(--ease);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .sidebar-close { display: grid; }
  .menu-btn { display: grid; }
  .global-search { min-width: 0; }
  .global-search span, .global-search kbd { display: none; }
  .global-search { width: 38px; height: 38px; justify-content: center; padding: 0; }
  .profile-trigger > span, .profile-trigger > svg { display: none; }
  .profile-trigger { padding: 4px; border: 0; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-grid .span-2 { grid-column: span 1; }
  .welcome-banner { padding: 28px 24px; }
  .resource-head { display: none; }
  /* The action is a labelled button now, not two icons — it needs its own row
     or it crowds the resource name off the card. */
  .resource-item {
    grid-template-columns: 34px 46px minmax(0, 1fr) auto;
    grid-template-areas:
      "star type name name"
      "meta meta upd  size"
      "act  act  act  act";
    row-gap: 11px;
    column-gap: 12px;
    padding: 16px 6px;
  }
  .resource-item .favorite-btn      { grid-area: star; }
  .resource-item .filetype          { grid-area: type; }
  .resource-item .resource-name     { grid-area: name; }
  .resource-item > .resource-category { grid-area: meta; justify-self: start; }
  .resource-item > .res-updated     { grid-area: upd;  justify-self: end; font-size: var(--fs-xs); }
  .resource-item > .res-size        { grid-area: size; justify-self: end; font-size: var(--fs-xs); }
  .resource-item .resource-actions  { grid-area: act; justify-self: stretch; gap: 8px; }
  .resource-item .resource-actions .btn { flex: 1; }
  .resource-item .resource-actions .icon-btn { border: 1px solid var(--line-2); }
}

@media (max-width: 640px) {
  .content { padding-left: 16px; padding-right: 16px; }
  .topbar { padding-left: 16px; padding-right: 16px; }
  .topbar-left h1 { font-size: 20px; }
  .page-intro, .admin-welcome { align-items: flex-start; }
  .page-intro .btn, .admin-welcome .quick-buttons { width: 100%; }
  .quick-buttons .btn { flex: 1; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .welcome-banner { gap: 26px; }
  .welcome-ring { margin: 0 auto; }
  .metric-copy strong { font-size: 30px; }
  .course-grid, .certificate-grid, .announcement-grid { grid-template-columns: minmax(0, 1fr); }
  .toast-region { right: 12px; left: 12px; top: 12px; max-width: none; }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }
  .app-footer { flex-direction: column; align-items: flex-start; gap: 6px; }
  .auth-card { padding: 28px 22px 24px; }
  .auth-card::before { left: 22px; right: 22px; }
}

/* Touch targets stay comfortable on small screens */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .nav-item { padding: 13px 14px; }
}

/* -------------------------------------------------------------------------
   26. Motion & print
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .metric-card:hover, .course-card:hover,
  .certificate-card:hover, .support-card:hover, .announcement-card:hover {
    transform: none;
  }
}

@media print {
  .sidebar, .topbar, .app-footer, .mobile-overlay,
  .notification-panel, .search-overlay, .toast-region,
  .btn, .icon-btn, .back-link, .skip-link { display: none !important; }
  body { background: #fff; }
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .content { padding: 0; max-width: none; }
  .panel, .certificate-card, .metric-card {
    box-shadow: none;
    border-color: #cfcabd;
    break-inside: avoid;
  }
  .certificate-card { page-break-after: always; }
}

/* -------------------------------------------------------------------------
   27. Course cover photography
   The photo sits under the existing category gradient and hatch. If it fails
   to load — offline, blocked, or a dead URL — the gradient is already there
   and the card still reads correctly.
   ------------------------------------------------------------------------- */
.cover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A light pull toward the brand — enough to sit with the navy, not so much
     that faces go murky. */
  filter: saturate(.88) contrast(1.02) brightness(.97);
  transition: transform .5s var(--ease);
}
.course-card:hover .cover-photo { transform: scale(1.045); }

/* Scrim: keeps the category chip, Required badge and play control legible
   over whatever the photo happens to be doing underneath. */
.course-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Just enough at the top for the chips and at the bottom for the play
     control; the middle of the photo stays clear. */
  background:
    linear-gradient(180deg,
      rgba(5, 15, 28, .58) 0%,
      rgba(5, 15, 28, .06) 38%,
      rgba(5, 15, 28, .10) 62%,
      rgba(5, 15, 28, .46) 100%),
    linear-gradient(90deg, rgba(11, 29, 54, .34), transparent 55%);
  pointer-events: none;
}
.course-cover::before { z-index: 1; }
.course-cover::after  { z-index: 1; }
/* Lift the existing cover controls above the scrim by z-index only. A blanket
   `position: relative` on the children would drag the photo back into flow and
   knock the play control out of its corner. */
.cover-photo    { z-index: 0; }
.course-category,
.course-cover .required-badge,
.course-play    { z-index: 2; }

.field-hint {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--muted-2);
}

@media (prefers-reduced-motion: reduce) {
  .course-card:hover .cover-photo { transform: none; }
}

/* -------------------------------------------------------------------------
   28. Agent identity & profile
   ------------------------------------------------------------------------- */

/* PHP numbers are reference codes — tabular figures so columns of them scan
   vertically, and a tinted chip so they read as an identifier, not prose. */
.php-number {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--r-xs);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.php-number.empty {
  background: transparent;
  border-color: var(--line-2);
  border-style: dashed;
  color: var(--muted-2);
  font-weight: 600;
}

/* The whole user cell opens the profile, so it needs to look pressable */
.user-cell-link {
  width: 100%;
  padding: 4px;
  margin: -4px;
  border-radius: var(--r-xs);
  text-align: left;
  transition: background-color .15s var(--ease);
}
.user-cell-link:hover { background: var(--blue-50); }
.user-cell-link:hover strong { color: var(--blue-700); }

.hero-tags {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.profile-hero .hero-actions { margin-top: 0; display: flex; gap: 10px; flex-wrap: wrap; }

/* Vertical stacks inside the two-column profile layout */
.stack { display: grid; gap: 20px; align-content: start; min-width: 0; }
.profile-layout > .account-summary.stack { position: sticky; top: 88px; }

.panel-header .intro-stat { padding: 9px 14px; font-size: var(--fs-xs); }

@media (max-width: 1180px) {
  .profile-layout > .account-summary.stack { position: static; }
}
@media (max-width: 640px) {
  .profile-hero .hero-actions { width: 100%; }
  .profile-hero .hero-actions .btn { flex: 1; }
}

/* -------------------------------------------------------------------------
   29. Content assistant panel
   ------------------------------------------------------------------------- */
.ai-panel {
  padding: 18px;
  margin-bottom: 24px;
  border-radius: var(--r);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
}
.ai-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.ai-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-700);
}
.ai-badge svg { width: 16px; height: 16px; }

/* The mode chip is the honesty signal: it must be obvious at a glance whether
   a draft came from a model or from the local template. */
.ai-mode {
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  border: 1px solid transparent;
}
.ai-mode.live { background: var(--green-soft); color: var(--green); border-color: rgba(26, 127, 87, .2); }
.ai-mode.demo { background: var(--amber-soft); color: var(--amber); border-color: rgba(162, 113, 26, .22); }

.ai-panel label { color: var(--blue-700); }
.ai-prompt { min-height: 78px; background: #fff; }

.ai-actions {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 12px;
}
.ai-note {
  font-size: var(--fs-xs);
  color: var(--muted);
  flex: 1;
  min-width: 180px;
}

.ai-result {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--line-2);
}
.ai-result[hidden], .ai-drafts[hidden] { display: none; }
.ai-result-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.ai-result-head strong { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.ai-body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-2);
  white-space: pre-wrap;
  max-height: 260px;
  overflow-y: auto;
}

.ai-drafts { display: grid; gap: 7px; margin-top: 14px; }
.ai-draft {
  display: grid; gap: 3px;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--line-2);
  text-align: left;
  transition: border-color .15s var(--ease);
}
.ai-draft:hover { border-color: var(--blue-400); }
.ai-draft strong { font-size: var(--fs-sm); font-weight: 600; }
.ai-draft small { font-size: var(--fs-xs); color: var(--muted); }

.modal-lede {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 18px;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--paper-2);
  color: var(--ink-2);
}

/* =========================================================================
   30. Responsive optimisation pass
   Breakpoints, largest to smallest:
     ≥1200   full sidebar, multi-column
     901–1199 icon rail sidebar — reclaims ~190px, which is what lets the
             admin tables fit on an iPad in landscape without scrolling
     ≤900    off-canvas drawer (set earlier)
     ≤760    tables restack as labelled cards
     ≤640    single column throughout
   ========================================================================= */

/* --- Global guards ------------------------------------------------------- */
html, body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }
/* Long emails and certificate numbers are the usual culprits for stray
   horizontal scroll on a 360px phone. */
.resource-name strong,
.user-cell span,
.sidebar-user strong,
.profile-trigger strong,
.announcement-card h3,
.course-body h3,
.event-row strong,
.notification-item strong { overflow-wrap: anywhere; }

/* Respect notches and home indicators */
.topbar { padding-top: max(15px, env(safe-area-inset-top)); }
.content { padding-bottom: max(44px, env(safe-area-inset-bottom)); }
.app-footer { padding-bottom: max(20px, env(safe-area-inset-bottom)); }

/* --- Icon rail: tablet landscape and small laptops ----------------------- */
@media (min-width: 901px) and (max-width: 1199px) {
  .app-shell { grid-template-columns: 78px minmax(0, 1fr); }

  .sidebar { padding: 18px 11px 14px; align-items: center; }
  .sidebar-top { justify-content: center; padding: 0 0 16px; }
  .sidebar .brand-copy,
  .workspace-label,
  .sidebar-card,
  .sidebar-user > div:not(.avatar),
  .nav-item span { display: none; }
  .sidebar .lion { height: 32px; }

  .side-nav { width: 100%; }
  .nav-item {
    justify-content: center;
    padding: 12px 0;
    gap: 0;
  }
  .nav-item svg { width: 21px; height: 21px; }
  /* The unread count becomes a corner dot — there is no room for a numeral */
  .nav-item b {
    position: absolute;
    top: 6px; right: 12px;
    min-width: 9px; width: 9px; height: 9px;
    padding: 0;
    font-size: 0;
    background: var(--blue-300);
    box-shadow: 0 0 0 2px var(--navy-900);
  }
  .sidebar-user { justify-content: center; gap: 8px; padding: 12px 0 4px; flex-wrap: wrap; }

  /* Reclaimed width goes straight to the tables */
  .table-panel table { min-width: 0; }
  .table-panel th, .table-panel td { padding: 13px 10px; }
  .col-joined { display: none; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid .span-2 { grid-column: span 2; }
}

/* --- Tablet portrait ------------------------------------------------------ */
@media (max-width: 900px) {
  /* The login story panel becomes a compact band so the form is reachable
     without scrolling on an iPad in portrait. */
  .auth-story { padding: 30px 30px 34px; }
  .auth-copy { margin: 22px 0 0; }
  .auth-copy h1 { font-size: clamp(32px, 5.4vw, 46px); margin: 16px 0 12px; }
  .auth-copy p { font-size: var(--fs-md); max-width: 60ch; }
  .auth-assurance { margin-top: 20px; }
  .auth-orb { width: 380px; height: 380px; right: -200px; bottom: -170px; }
  .auth-form-side { padding: 30px 22px 26px; }

  .course-detail-grid { gap: 22px; }
  .support-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Tables restack as cards --------------------------------------------- */
@media (max-width: 900px) {
  .table-panel { overflow-x: visible; padding: 4px; }
  /* The base rule sets min-width: 780px to force a scroll on desktop; it has
     to be cleared here or the "cards" stay 780px wide and scroll anyway. */
  .table-panel table { min-width: 0; }
  .table-panel table,
  .table-panel tbody,
  .table-panel tr,
  .table-panel td { display: block; width: 100%; }
  .table-panel thead { display: none; }

  .table-panel tbody tr {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-xs);
  }
  .table-panel tbody tr:last-child { margin-bottom: 4px; }
  .table-panel tbody tr:hover { background: var(--surface); }
  .table-panel td { border: 0; padding: 0; }

  /* Name block on top, then one labelled row per field */
  .table-panel td.cell-user { margin-bottom: 12px; }
  .table-panel td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
  }
  .table-panel td[data-label]::before {
    content: attr(data-label);
    flex: none;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted-2);
  }
  .table-panel td.cell-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .table-panel .row-actions { justify-content: flex-start; gap: 8px; }
  .table-panel .row-actions .icon-btn { border: 1px solid var(--line-2); }
  .col-joined { display: flex; }
}

/* --- Phones --------------------------------------------------------------- */
@media (max-width: 640px) {
  .content { padding-top: 18px; }
  .page-intro, .admin-welcome { gap: 16px; padding-bottom: 18px; margin-bottom: 20px; }
  .page-intro h2, .admin-welcome h2 { font-size: clamp(24px, 7vw, 30px); }
  .intro-stat { width: 100%; justify-content: flex-start; }

  .panel { padding: 18px; }
  .panel-header, .panel-head { gap: 12px; margin-bottom: 16px; }
  .panel-header h3, .panel-head strong { font-size: 18px; }

  .toolbar { gap: 10px; }
  .search-box { min-width: 0; flex: 1 1 100%; }
  .filter-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { white-space: nowrap; }
  .resource-toolbar .compact-select, .toolbar .select { max-width: none; width: 100%; }
  .toolbar .btn { flex: 1; }

  /* Welcome banner: ring under the copy, not squeezed beside it */
  .welcome-banner { flex-direction: column; align-items: stretch; text-align: left; padding: 24px 20px; }
  .welcome-banner .btn { width: 100%; }
  .welcome-ring { display: flex; justify-content: center; }
  .ring { width: 116px; height: 116px; }

  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .metric-card { flex-direction: column; gap: 11px; padding: 16px; }
  .metric-copy span { min-height: 0; font-size: 11.5px; letter-spacing: .1em; }
  .metric-copy strong { font-size: 27px; }

  .continue-card { padding: 16px; gap: 16px; }
  .continue-art { width: 60px; height: 60px; border-radius: 13px; }
  .continue-main { min-width: 0; }
  .continue-main h3 { font-size: 19px; }

  .course-detail-grid h2 { font-size: clamp(25px, 7vw, 32px); }
  .detail-meta { gap: 12px 18px; }
  .video-placeholder { height: 210px; margin-bottom: 18px; }
  .lesson-copy h3 { font-size: 20px; }

  .certificate-card { padding: 26px 20px 22px; }
  .certificate-card h3 { font-size: 20px; }

  .profile-hero { padding: 20px; gap: 16px; }
  .profile-avatar-lg { width: 66px; height: 66px; border-radius: 18px; font-size: 24px; }
  .profile-hero h2 { font-size: 25px; }
  .profile-hero > div:nth-child(2) { min-width: 0; flex: 1 1 100%; }

  .analytics-bars > div,
  .agent-progress-list > div { grid-template-columns: minmax(0, 1fr) 46px; }

  .calendar-days { gap: 4px; }
  .calendar-day { font-size: var(--fs-xs); border-radius: 6px; }
  .calendar-week span { font-size: 10px; letter-spacing: .06em; }
  .calendar-month h3 { font-size: 18px; }

  .audit-row { flex-wrap: wrap; gap: 10px; }
  .audit-ip { order: 3; }

  .app-footer { font-size: var(--fs-2xs); }

  /* Assistant panel */
  .ai-panel { padding: 15px; margin-bottom: 18px; }
  .ai-actions .btn { flex: 1 1 auto; }
  .ai-note { flex-basis: 100%; }
  .ai-body { max-height: 200px; }
}

/* --- Narrow phones -------------------------------------------------------- */
@media (max-width: 400px) {
  .content, .topbar { padding-left: 13px; padding-right: 13px; }
  .topbar { gap: 10px; }
  .topbar-left { gap: 9px; }
  .topbar-left h1 { font-size: 18px; }
  .crumb { display: none; }
  .top-actions { gap: 5px; }
  .metrics-grid { grid-template-columns: minmax(0, 1fr); }
  .metric-card { flex-direction: row; align-items: center; }
  .php-number { font-size: var(--fs-2xs); }
  .brand-copy strong { font-size: 14px; letter-spacing: .13em; }
}

/* --- Dialogs become bottom sheets on phones ------------------------------- */
@media (max-width: 640px) {
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    width: 100%;
    max-height: 94dvh;
    display: flex;
    flex-direction: column;
    margin: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: sheet-up .26s var(--ease);
  }
  .modal-head { padding: 20px 20px 16px; }
  .modal-head h3 { font-size: 21px; }
  .modal form { display: flex; flex-direction: column; min-height: 0; }
  .modal-body { padding: 20px; max-height: none; flex: 1; }
  .modal-foot { padding: 14px 20px max(14px, env(safe-area-inset-bottom)); }

  .search-overlay { padding: 0; }
  .search-modal { border-radius: 0; height: 100dvh; height: 100vh; display: flex; flex-direction: column; }
  .global-results { max-height: none; flex: 1; }
  .search-modal-top .key { display: none; }
}
@keyframes sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* --- Phone landscape: short viewports ------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .auth-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .auth-story { padding: 22px; }
  .auth-copy h1 { font-size: 28px; }
  .auth-quote, .auth-assurance { display: none; }
  .auth-form-side { padding: 22px 18px; }
  .sidebar { padding-top: 14px; }
  .modal { max-height: 96dvh; }
  .modal-body { max-height: none; }
}

/* --- Touch devices -------------------------------------------------------- */
@media (hover: none) {
  /* Hover lifts read as stuck states on touch, so drop them */
  .metric-card:hover, .course-card:hover, .certificate-card:hover,
  .support-card:hover, .announcement-card:hover, .btn-primary:hover,
  .btn-light:hover { transform: none; }
  .course-card:hover .cover-photo { transform: none; }
  .table-panel tbody tr:hover { background: inherit; }
}

/* --- Tablet portrait: use the width that's actually there ----------------- */
@media (min-width: 641px) and (max-width: 900px) {
  /* Without this the progress ring wraps below the copy and leaves a tall
     band of empty navy — there is plenty of room for it alongside. */
  .welcome-banner { flex-wrap: nowrap; align-items: center; gap: 26px; padding: 30px 32px; }
  .welcome-banner > div:first-child { min-width: 0; }
  .welcome-banner p { max-width: none; }
  .ring { width: 124px; height: 124px; }

  /* Two columns halves the scroll depth on the dashboards */
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid .span-2 { grid-column: span 2; }
  .profile-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-layout > .stack:first-child { grid-column: span 2; }
}

/* -------------------------------------------------------------------------
   31. Attachment sources — upload, video, link
   ------------------------------------------------------------------------- */
.source-picker { margin-bottom: 24px; }

.source-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  margin-bottom: 14px;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.source-tab {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.source-tab svg { width: 16px; height: 16px; }
.source-tab:hover { color: var(--navy-900); }
.source-tab.active { background: var(--surface); color: var(--navy-900); box-shadow: var(--shadow-xs); }
.source-pane[hidden] { display: none; }

.dropzone {
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 30px 20px;
  margin: 0;
  text-align: center;
  border: 2px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--blue-400); background: var(--blue-50); }
.dropzone.over { border-color: var(--blue-500); background: var(--blue-50); }
.dropzone svg { width: 28px; height: 28px; color: var(--blue-500); stroke-width: 1.4; }
.dropzone strong { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.dropzone small { font-size: var(--fs-xs); color: var(--muted); max-width: 46ch; line-height: 1.5; }

.file-chip {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 13px;
  padding: 12px 13px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line-2);
}
.file-chip[hidden] { display: none; }
/* Over the inline-storage limit: keep it visible but clearly caveated */
.file-chip.warn { background: var(--amber-soft); border-color: rgba(162, 113, 26, .28); }
.file-chip-copy { flex: 1; min-width: 0; }
.file-chip-copy strong {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-chip-copy small { font-size: var(--fs-xs); color: var(--muted); }

.meta-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-2);
}

/* New file-type chips alongside the original four */
.filetype.xlsx  { background: var(--green-soft);  color: var(--green);  border-color: rgba(26, 127, 87, .18); }
.filetype.video { background: var(--purple-soft); color: var(--purple); border-color: rgba(91, 70, 176, .18); }
.filetype.audio { background: #f3ecfb;            color: #6d3fa8;       border-color: rgba(109, 63, 168, .18); }
.filetype.image { background: var(--blue-50);     color: var(--blue-600); border-color: var(--blue-100); }
.filetype.link  { background: var(--silver-200);  color: var(--navy-800); border-color: var(--silver-300); }

/* --- Media preview -------------------------------------------------------- */
.media-modal { width: min(880px, 100%); }
.media-modal .modal-body { padding: 0; background: var(--navy-950); max-height: 74vh; }
.media-frame { position: relative; aspect-ratio: 16 / 9; }
.media-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-el { display: block; width: 100%; max-height: 74vh; background: var(--navy-950); }
audio.media-el { padding: 22px; background: var(--surface); }

@media (max-width: 640px) {
  .source-tabs { gap: 4px; }
  .source-tab { padding: 10px 6px; font-size: var(--fs-2xs); }
  .source-tab svg { width: 15px; height: 15px; }
  .dropzone { padding: 24px 14px; }
  .media-modal .modal-body { max-height: 62vh; }
}

/* -------------------------------------------------------------------------
   32. Lesson media & the lesson editor
   ------------------------------------------------------------------------- */

/* The stage replaces the old static placeholder when a lesson carries media */
.lesson-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--navy-950);
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.lesson-stage iframe,
.lesson-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.lesson-linkcard {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 22px;
  margin-bottom: 24px;
  border-radius: var(--r);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.lesson-linkcard:hover { border-color: var(--blue-400); transform: translateY(-1px); }
.lesson-linkcard > div { flex: 1; min-width: 0; }
.lesson-linkcard strong { display: block; font-size: var(--fs-md); font-weight: 600; }
.lesson-linkcard small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lesson-linkcard svg { color: var(--blue-600); flex: none; }
.lesson-linkcard > svg:first-child { width: 24px; height: 24px; }

/* --- Editor inside the course dialog -------------------------------------- */
.lesson-editor {
  margin-top: 24px;
  padding: 18px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.lesson-editor .panel-head { align-items: center; margin-bottom: 14px; }
/* strong is inline, and the kicker above it is inline-block — without this
   they render on the same line. */
.lesson-editor .panel-head strong { display: block; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.lesson-rows { display: grid; gap: 9px; margin-bottom: 12px; }

.lesson-edit-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1.3fr) 128px minmax(0, 1.5fr) 38px;
  align-items: center;
  gap: 8px;
}
.lesson-num {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lesson-edit-row .input,
.lesson-edit-row .select { padding: 9px 11px; font-size: var(--fs-xs); }
.lesson-edit-row .select { padding-right: 32px; background-position: right 9px center; background-size: 15px; }

@media (max-width: 760px) {
  .lesson-edit-row {
    grid-template-columns: 26px minmax(0, 1fr) 38px;
    grid-template-areas:
      "num title del"
      ".   kind  kind"
      ".   url   url";
    row-gap: 7px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--line);
  }
  .lesson-edit-row:last-child { border-bottom: 0; padding-bottom: 0; }
  .lesson-num { grid-area: num; align-self: center; }
  .lesson-edit-row [name="l_title"] { grid-area: title; }
  .lesson-edit-row [name="l_kind"]  { grid-area: kind; }
  .lesson-edit-row [name="l_url"]   { grid-area: url; }
  .lesson-edit-row .icon-btn        { grid-area: del; }
  .lesson-editor .panel-head { flex-wrap: wrap; }
}

/* -------------------------------------------------------------------------
   33. Cover loading
   A 20px WebP of the same photo is inlined as the cover background, so the
   card is never blank on refresh. The real image fades in over it once
   decoded, which removes the pop-in entirely.
   ------------------------------------------------------------------------- */
.course-cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cover-photo {
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.cover-photo.is-loaded { opacity: 1; }

/* A cached image can finish before the stylesheet applies the transition;
   without this it would stay invisible. */
.cover-photo[src]:not(.is-loaded) { animation: cover-fallback 0s .9s forwards; }
@keyframes cover-fallback { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .cover-photo { transition: none; opacity: 1; }
}

/* -------------------------------------------------------------------------
   34. Agent schedule
   ------------------------------------------------------------------------- */
.schedule-split {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.mini-calendar .calendar-month { margin-bottom: 12px; justify-content: flex-start; }
.mini-calendar .calendar-month h3 { font-size: 17px; }
.mini-calendar .calendar-day { aspect-ratio: 1; font-size: var(--fs-xs); }
.mini-calendar .calendar-week span { font-size: 10.5px; }

.schedule-list > .section-kicker { margin-bottom: 10px; }

/* Two marker colours: a scheduled event, and the agent's own deadline */
.calendar-day.has-event span { background: var(--blue-500); }
.calendar-day.has-due { background: var(--amber-soft); border-color: rgba(162, 113, 26, .35); }
.calendar-day.has-due span { background: var(--amber); }
.calendar-day.is-today {
  box-shadow: inset 0 0 0 2px var(--navy-850);
  font-weight: 700;
  color: var(--navy-900);
}

.calendar-key {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.calendar-key span { display: inline-flex; align-items: center; gap: 7px; }
.blue-bg  { background: var(--blue-500); }
.amber-bg { background: var(--amber); }

/* A deadline row reads differently from an event row */
.event-row.is-due .event-date {
  background: var(--amber-soft);
  border-color: rgba(162, 113, 26, .3);
}
.event-row.is-due .event-date strong { color: var(--amber); }
.event-row.is-due .event-date span { color: var(--amber); }
.event-row.is-due[data-course] { cursor: pointer; }

@media (max-width: 900px) {
  .schedule-split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mini-calendar { max-width: 360px; }
}