/*
  RMI brand foundation, October 2026.

  Link this as the LAST stylesheet in every page's <head>:
    <link rel="stylesheet" href="assets/css/rmi-brand.css?v=1">
  (blog pages use ../assets/css/rmi-brand.css, the 404 page uses /assets/css/rmi-brand.css)

  Part 1 defines the brand tokens. Part 2 maps the old token names used across
  the site onto the new ones, so a page switches to the new colours and fonts as
  soon as this file is linked. Part 3 holds small shared building blocks.
  Remove Part 2 once every page uses the new token names directly.

  Fonts: load once per page, before this file:
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap">
*/

/* Part 1: brand tokens */
:root {
  /* Company colours: black and white, greys in support, no accent */
  --onyx: #0B0B0C;        /* page background */
  --graphite: #1C1C1F;    /* cards, panels */
  --smoke: #2A2A2E;       /* lines, dividers, borders */
  --steel: #8A8A90;       /* secondary text on Onyx */
  --mist: #BDBBB5;        /* body text on Onyx */
  --porcelain: #F5F3EE;   /* headings, logo, primary buttons on Onyx */
  --iron: #55555B;        /* secondary text on Porcelain */
  --line-light: #DCD9D2;  /* lines on Porcelain */

  /* Learner experience only (dashboard progress, Kids Mode). Never in the logo or marketing pages */
  --learn-teal: #0E7C7B;
  --kids-amber: #F5A524;

  /* Status colours, muted so they sit in a black and white brand. Use for state only */
  --ok: #6FBF8E;
  --warn: #E0B252;
  --danger: #E5675C;

  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale: fluid, 375 px → 1440 px viewport.
     Instrument Serif is loaded at weight 400 only; Geist at 300-600.
     Use these tokens everywhere - never hard-code a font-size. */
  --text-xs:   0.72rem;                                              /* 11.5 px - mono labels, eyebrows */
  --text-sm:   0.875rem;                                             /* 14 px - captions, small UI */
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw,  1rem);            /* 15-16 px - interface copy */
  --text-body: clamp(1rem,      0.95rem + 0.25vw, 1.0625rem);      /* 16-17 px - body copy */
  --text-lead: clamp(1.0625rem, 1rem   + 0.35vw,  1.125rem);       /* 17-18 px - lead / large body */
  --text-h4:   clamp(1.25rem,   1.1rem + 0.75vw,  1.5rem);         /* 20-24 px - h4, dialog titles */
  --text-h3:   clamp(1.5rem,    1.2rem + 1.5vw,   1.875rem);       /* 24-30 px - h3, card titles */
  --text-h2:   clamp(2rem,      1.5rem + 2.5vw,   2.75rem);        /* 32-44 px - section headings */
  --text-h1:   clamp(2.75rem,   2rem   + 3.75vw,  4rem);           /* 44-64 px - hero / page h1 */

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Surface elevation ladder */
  --surface-0: var(--onyx);        /* page canvas */
  --surface-1: var(--graphite);    /* frame: header, footer, sidebar, tab bar, bands, cards on canvas */
  --surface-2: var(--smoke);       /* raised: menus, popovers, dropdowns, hover, cards on bands */
  --surface-inset: var(--onyx);    /* inputs and inset cards on Graphite */
  --hairline: rgba(245, 243, 238, 0.08);
  --hairline-strong: rgba(245, 243, 238, 0.16);
  --header-bg: rgba(28, 28, 31, 0.94);
  --shadow-1: 0 1px 0 rgba(245, 243, 238, 0.04), 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* Part 2: bridge from the old token names (remove when pages are migrated) */
:root {
  --navy: var(--onyx);
  --deep-navy: var(--onyx);
  --night: var(--onyx);
  --card-bg: var(--graphite);
  --border: rgba(245, 243, 238, 0.10);
  --teal: var(--porcelain);
  --teal-dark: var(--line-light);
  --silver: var(--mist);
  --white: var(--porcelain);
  --font-display: var(--font-serif);
  --font-body: var(--font-sans);
}

/* Part 3: shared building blocks */
html { background: var(--onyx); font-synthesis: none; }
body { background: var(--onyx); color: var(--mist); font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.65; }
h1 { font: 400 var(--text-h1)/1.05 var(--font-serif); color: var(--porcelain); letter-spacing: 0; text-wrap: balance; }
h2 { font: 400 var(--text-h2)/1.1  var(--font-serif); color: var(--porcelain); letter-spacing: 0; text-wrap: balance; }
h3 { font: 400 var(--text-h3)/1.15 var(--font-serif); color: var(--porcelain); letter-spacing: 0; text-wrap: balance; }
h4 { font: 400 var(--text-h4)/1.2  var(--font-serif); color: var(--porcelain); letter-spacing: 0; text-wrap: balance; }
::selection { background: var(--porcelain); color: var(--onyx); }
:focus-visible { outline: 2px solid var(--porcelain); outline-offset: 3px; }

.rmi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.7rem 1.2rem; border-radius: var(--radius-sm);
  font: 500 0.95rem/1 var(--font-sans); text-decoration: none; cursor: pointer;
  background: var(--porcelain); color: var(--onyx); border: 1px solid var(--porcelain);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.rmi-btn:hover { background: #FFFFFF; }
.rmi-btn.is-quiet { background: transparent; color: var(--porcelain); border-color: var(--smoke); }
.rmi-btn.is-quiet:hover { border-color: var(--steel); }

.rmi-card { background: var(--graphite); border: 1px solid var(--smoke); border-radius: var(--radius); }
.rmi-eyebrow { font: 400 0.75rem/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
.rmi-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rmi-rule { height: 1px; background: var(--smoke); border: 0; }

.rmi-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; font: 500 0.75rem/1.4 var(--font-sans); border: 1px solid var(--smoke); color: var(--mist); }
.rmi-chip.is-ok { color: var(--ok); border-color: rgba(111, 191, 142, 0.4); }
.rmi-chip.is-warn { color: var(--warn); border-color: rgba(224, 178, 82, 0.4); }
.rmi-chip.is-danger { color: var(--danger); border-color: rgba(229, 103, 92, 0.4); }

/* Header logo: 40 px tall on phones, 46 px on desktop */
.header-logo { display: block; height: 40px; width: auto; }
@media (min-width: 960px) { .header-logo { height: 46px; } }

/* Printable documents only (certificates, invoices): black on white. Website pages stay black */
.rmi-print { background: #FFFFFF; color: #000000; }
.rmi-print h1, .rmi-print h2, .rmi-print h3 { color: #000000; }

/* WhatsApp shared component */
.wa-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--porcelain); color: var(--onyx);
  border: 1px solid var(--smoke); border-radius: 50px;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem;
  padding: 0.65rem 1.2rem; text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.wa-btn:hover { background: var(--onyx); color: var(--porcelain); border-color: var(--porcelain); }

/* Floating WhatsApp button */
#waFloatWrap {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 7999;
  display: flex; align-items: center;
  transition: opacity 0.2s, transform 0.2s;
}
#waFloatWrap.wa-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
#waFloat {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--porcelain); color: var(--onyx);
  border: 1px solid var(--smoke); border-radius: 50px;
  height: 52px; padding: 0 20px 0 16px;
  font-family: var(--font-sans); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.4);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
#waFloat:hover { background: var(--onyx); color: var(--porcelain); border-color: var(--porcelain); }
#waFloat:focus-visible { outline: 2px solid var(--porcelain); outline-offset: 3px; }
#waLabel { font-size: 0.85rem; font-weight: 600; }
@media (max-width: 959px) {
  #waFloatWrap { bottom: max(80px, calc(80px + env(safe-area-inset-bottom))); right: max(16px, env(safe-area-inset-right)); }
  #waFloat { width: 52px; height: 52px; border-radius: 50%; padding: 0; justify-content: center; }
  #waLabel { display: none; }
}

/* Part 4: Component set */

/* ── Sprite icon ───────────────────────────────────────────── */
.ri { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle; }
.ri use { pointer-events: none; }
/* The sprite is injected once by shell.js; icon sheets link independently in pages that load before shell.js */
#rmi-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Extended button modifiers ─────────────────────────────── */
.rmi-btn.is-primary { background: var(--porcelain); color: var(--onyx); border-color: var(--porcelain); }
.rmi-btn.is-primary:hover { background: var(--onyx); color: var(--porcelain); border-color: var(--porcelain); }
.rmi-btn.is-secondary { background: transparent; color: var(--porcelain); border-color: var(--porcelain); }
.rmi-btn.is-secondary:hover { background: rgba(245,243,238,.06); }
.rmi-btn.is-ghost { background: transparent; border-color: transparent; color: var(--mist); }
.rmi-btn.is-ghost:hover { color: var(--porcelain); text-decoration: underline; }
.rmi-btn.is-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.rmi-btn.is-danger:hover { background: rgba(229,103,92,.08); }
.rmi-btn.is-compact { min-height: 36px; padding: .4rem .9rem; font-size: .875rem; }
.rmi-btn[disabled], .rmi-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.rmi-btn.is-loading { pointer-events: none; position: relative; }
.rmi-btn.is-loading > * { visibility: hidden; }
.rmi-btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: rmi-spin .7s linear infinite;
}
.rmi-btn.is-icon { min-width: 44px; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-sm); }
.rmi-btn.is-icon .ri { width: 20px; height: 20px; }
.rmi-btn:active:not([disabled]) { transform: translateY(1px); }
.rmi-btn-group { display: flex; gap: 8px; align-items: center; }
@media (max-width: 599px) { .rmi-btn-group.is-stacked { flex-direction: column-reverse; } .rmi-btn-group.is-stacked .rmi-btn { width: 100%; justify-content: center; } }

@keyframes rmi-spin { to { transform: rotate(360deg); } }

/* ── Form fields ───────────────────────────────────────────── */
.rmi-field { display: flex; flex-direction: column; gap: .35rem; }
.rmi-label { font: 500 .8rem/1.2 var(--font-sans); color: var(--mist); letter-spacing: .01em; }
.rmi-input, .rmi-textarea, .rmi-select {
  background: var(--graphite); color: var(--porcelain);
  border: 1px solid var(--smoke); border-radius: var(--radius-sm);
  font: 400 .95rem/1 var(--font-sans); padding: 0 14px;
  height: 44px; width: 100%; max-width: 100%;
  /* border-box: width:100% plus padding used to run 30px past the container,
     making pages wider than a phone screen. */
  box-sizing: border-box;
  transition: border-color .15s;
}
.rmi-textarea { height: auto; min-height: 100px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.rmi-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A90' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}
.rmi-input:focus, .rmi-textarea:focus, .rmi-select:focus { border-color: var(--porcelain); outline: none; }
.rmi-input::placeholder, .rmi-textarea::placeholder { color: var(--steel); }
.rmi-field-error { font: 400 .78rem/1.3 var(--font-sans); color: var(--danger); display: none; }
.rmi-field-error.is-visible, .rmi-field.has-error .rmi-field-error { display: block; }
.rmi-field.has-error .rmi-input, .rmi-field.has-error .rmi-textarea, .rmi-field.has-error .rmi-select { border-color: var(--danger); }
.rmi-check { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; user-select: none; }
.rmi-check input { width: 18px; height: 18px; min-width: 18px; appearance: none; border: 1.5px solid var(--smoke); border-radius: 4px; background: var(--graphite); transition: all .15s; margin-top: 2px; }
.rmi-check input:checked { background: var(--porcelain); border-color: var(--porcelain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-size: cover; }
.rmi-check input[type="radio"] { border-radius: 50%; }
.rmi-check input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 4px var(--onyx); background: var(--porcelain); }
.rmi-check-label { font: 400 .9rem/1.5 var(--font-sans); color: var(--mist); }

/* ── Tabs ──────────────────────────────────────────────────── */
.rmi-tabs { display: flex; border-bottom: 1px solid var(--smoke); gap: 0; list-style: none; padding: 0; margin: 0; overflow-x: auto; scrollbar-width: none; }
.rmi-tabs::-webkit-scrollbar { display: none; }
.rmi-tab-btn { background: none; border: none; border-bottom: 2px solid transparent; color: var(--steel); cursor: pointer; font: 400 .9rem/1 var(--font-sans); padding: 10px 16px; white-space: nowrap; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.rmi-tab-btn[aria-selected="true"] { color: var(--porcelain); border-bottom-color: var(--porcelain); }
.rmi-tab-btn:hover { color: var(--mist); }
.rmi-tab-panel[hidden] { display: none; }

/* ── Dialog ────────────────────────────────────────────────── */
dialog.rmi-dialog {
  background: var(--graphite); color: var(--porcelain);
  border: 1px solid var(--smoke); border-radius: var(--radius);
  padding: 0; max-width: min(520px, calc(100vw - 32px)); width: 100%;
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  margin: 0; box-shadow: 0 32px 64px rgb(0 0 0 / .6);
  animation: rmi-dialog-in .2s var(--ease);
}
dialog.rmi-dialog::backdrop { background: rgb(11 11 12 / .7); animation: rmi-fade-in .2s; }
dialog.rmi-dialog[data-closing] { animation: rmi-dialog-out .15s var(--ease) forwards; }
dialog.rmi-dialog[data-closing]::backdrop { animation: rmi-fade-out .15s forwards; }
@media (max-width: 599px) {
  dialog.rmi-dialog {
    top: auto; left: 0; right: 0; bottom: 0; transform: none;
    max-width: 100%; border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: rmi-sheet-in .25s var(--ease);
  }
  dialog.rmi-dialog[data-closing] { animation: rmi-sheet-out .2s var(--ease) forwards; }
}
.rmi-dialog-drag { width: 40px; height: 4px; background: var(--smoke); border-radius: 2px; margin: 12px auto 0; display: none; }
@media (max-width: 599px) { .rmi-dialog-drag { display: block; } }
.rmi-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 20px 0; gap: 12px; }
.rmi-dialog-title { font: 400 1.35rem/1.2 var(--font-serif); color: var(--porcelain); }
.rmi-dialog-close { background: none; border: none; color: var(--steel); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rmi-dialog-close:hover { color: var(--porcelain); background: rgba(245,243,238,.06); }
.rmi-dialog-body { padding: 12px 20px; font: 400 .95rem/1.6 var(--font-sans); color: var(--mist); }
.rmi-dialog-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 20px 20px; flex-wrap: wrap; }
@media (max-width: 599px) { .rmi-dialog-foot { flex-direction: column-reverse; } .rmi-dialog-foot .rmi-btn { width: 100%; justify-content: center; } }

@keyframes rmi-dialog-in { from { opacity:0; transform:translate(-50%,-50%) scale(.96); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes rmi-dialog-out { to { opacity:0; transform:translate(-50%,-50%) scale(.96); } }
@keyframes rmi-sheet-in { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes rmi-sheet-out { to { opacity:0; transform:translateY(40px); } }
@keyframes rmi-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes rmi-fade-out { to { opacity:0; } }

/* ── Toasts ────────────────────────────────────────────────── */
#rmiToastRegion {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
}
.rmi-toast {
  background: var(--graphite); color: var(--porcelain);
  border: 1px solid var(--smoke); border-radius: 50px;
  font: 500 .875rem/1 var(--font-sans); padding: 10px 18px;
  display: flex; align-items: center; gap: 8px;
  pointer-events: auto; animation: rmi-toast-in .2s var(--ease);
  box-shadow: 0 8px 24px rgb(0 0 0 / .4);
  max-width: 400px; text-align: center;
}
.rmi-toast.is-ok { border-color: rgba(111,191,142,.4); color: var(--ok); }
.rmi-toast.is-warn { border-color: rgba(224,178,82,.4); color: var(--warn); }
.rmi-toast.is-error { border-color: rgba(229,103,92,.4); color: var(--danger); }
.rmi-toast[data-closing] { animation: rmi-toast-out .18s var(--ease) forwards; }
.rmi-toast .ri { width: 16px; height: 16px; }
@keyframes rmi-toast-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes rmi-toast-out { to { opacity:0; transform:translateY(12px); } }
.rmi-update-toast {
  background: var(--graphite); color: var(--porcelain);
  border: 1px solid var(--smoke); border-radius: 50px;
  font: 500 .875rem/1.2 var(--font-sans); padding: 8px 8px 8px 18px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .4);
  animation: rmi-toast-in .2s var(--ease); pointer-events: auto;
}
.rmi-update-toast button {
  background: var(--smoke); color: var(--porcelain); border: none;
  border-radius: 50px; padding: 6px 16px;
  font: 500 .8125rem/1 var(--font-sans); cursor: pointer; white-space: nowrap;
}
.rmi-update-toast button:hover { background: var(--steel); }

/* ── Tables ────────────────────────────────────────────────── */
.rmi-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--smoke); border-radius: var(--radius); }
.rmi-table { width: 100%; border-collapse: collapse; font: 400 .875rem/1.4 var(--font-sans); }
.rmi-table th { text-align: left; padding: 10px 16px; font: 500 .72rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); border-bottom: 1px solid var(--smoke); background: var(--graphite); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.rmi-table td { padding: 12px 16px; border-bottom: 1px solid rgba(42,42,46,.6); color: var(--mist); }
.rmi-table tr:last-child td { border-bottom: none; }
.rmi-table tr:hover td { background: rgba(245,243,238,.03); }
.rmi-table .rmi-table-empty td { text-align: center; padding: 2.5rem; color: var(--steel); }

/* ── Tags ──────────────────────────────────────────────────── */
.rmi-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  font: 500 .72rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--smoke); color: var(--steel); background: var(--graphite);
  white-space: nowrap;
}
.rmi-tag.is-ok { color: var(--ok); border-color: rgba(111,191,142,.3); background: rgba(111,191,142,.06); }
.rmi-tag.is-warn { color: var(--warn); border-color: rgba(224,178,82,.3); background: rgba(224,178,82,.06); }
.rmi-tag.is-danger { color: var(--danger); border-color: rgba(229,103,92,.3); background: rgba(229,103,92,.06); }
.rmi-tag.is-porcelain { color: var(--onyx); background: var(--porcelain); border-color: var(--porcelain); }
/* Course access level tags - label shape (4 px radius, not pill) */
.rmi-tag.is-trial { color: var(--mist); border-radius: 4px; }
.rmi-tag.is-student { color: var(--porcelain); background: transparent; border-radius: 4px; }
.rmi-tag.is-power { color: var(--porcelain); border-radius: 4px; }
.rmi-tag.is-pro { color: var(--onyx); background: var(--porcelain); border-color: var(--porcelain); border-radius: 4px; }

/* ── Skeleton loaders ──────────────────────────────────────── */
.rmi-skeleton { border-radius: var(--radius-sm); background: var(--graphite); position: relative; overflow: hidden; }
.rmi-skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(245,243,238,.04) 50%, transparent 100%);
  animation: rmi-shimmer 1.5s infinite;
}
@keyframes rmi-shimmer { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
.rmi-skeleton-line { height: 14px; width: 100%; margin-bottom: 8px; }
.rmi-skeleton-line.is-short { width: 60%; }
.rmi-skeleton-line.is-heading { height: 22px; width: 75%; }
.rmi-skeleton-circle { border-radius: 50%; }

/* ── Empty state ───────────────────────────────────────────── */
.rmi-empty { display: flex; flex-direction: column; align-items: center; padding: 3rem 1.5rem; text-align: center; gap: 12px; }
.rmi-empty .ri { width: 40px; height: 40px; color: var(--smoke); }
.rmi-empty-title { font: 400 1rem/1.3 var(--font-serif); color: var(--mist); }
.rmi-empty-body { font: 400 .875rem/1.5 var(--font-sans); color: var(--steel); max-width: 300px; }

/* ── Stat card ─────────────────────────────────────────────── */
.rmi-stat { display: flex; flex-direction: column; gap: 4px; padding: 1.2rem 1.4rem; }
.rmi-stat-num { font: 400 2rem/1 var(--font-serif); color: var(--porcelain); }
.rmi-stat-label { font: 400 .78rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--steel); }
.rmi-stat-delta { font: 500 .8rem/1 var(--font-sans); }
.rmi-stat-delta.is-up { color: var(--ok); }
.rmi-stat-delta.is-down { color: var(--danger); }

/* ── Shell: header ─────────────────────────────────────────── */
.rmi-header {
  position: sticky; top: 0; z-index: 8000;
  height: 64px; display: flex; align-items: center;
  padding: 0; background: var(--header-bg);
  border-bottom: 1px solid var(--hairline-strong);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.rmi-header.is-scrolled { box-shadow: var(--shadow-1); }
.rmi-header.is-hidden { transform: translateY(-100%); }
.rmi-header-inner {
  display: flex; align-items: center;
  width: 100%; max-width: 1200px;
  margin: 0 auto; padding: 0 24px;
}
.rmi-header-logo { display: block; height: 36px; width: auto; flex-shrink: 0; }
.rmi-header-nav {
  display: flex; align-items: center; gap: 0;
  flex: 1; margin: 0 2rem; list-style: none; padding: 0;
}
.rmi-header-nav ul {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.rmi-header-nav a {
  font: 400 .9375rem/1 var(--font-sans); color: var(--mist);
  text-decoration: none; padding: .5rem .75rem;
  border-radius: var(--radius-sm); transition: color .15s; display: block;
}
.rmi-header-nav a:hover { color: var(--porcelain); }
.rmi-header-nav a[aria-current="page"],
.rmi-header-nav a.is-active {
  color: var(--porcelain);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  text-decoration-color: var(--porcelain);
}
.rmi-header-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Avatar button */
.rmi-avatar-btn {
  position: relative; width: 32px; height: 32px; border-radius: 50%;
  background: var(--smoke); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 500;
  color: var(--porcelain);
  transition: box-shadow .15s; flex-shrink: 0;
}
.rmi-avatar-btn:focus-visible { outline: 2px solid var(--porcelain); outline-offset: 2px; }
.rmi-avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.rmi-kids-dot {
  display: none; position: absolute; bottom: 0; right: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--kids-amber); border: 1.5px solid var(--header-bg);
}
.rmi-avatar-btn.is-kids .rmi-kids-dot { display: block; }

/* Account menu */
.rmi-avatar-wrap { position: relative; }
.rmi-account-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 240px; background: var(--graphite);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px; box-shadow: var(--shadow-2);
  z-index: 9000; overflow: hidden;
}
.rmi-account-menu[hidden] { display: none; }
.rmi-account-menu-head {
  padding: 12px 14px 10px; border-bottom: 1px solid var(--hairline);
}
.rmi-account-menu-name {
  font-size: .875rem; font-weight: 600; color: var(--porcelain);
  margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rmi-account-menu-email {
  font-size: .75rem; color: var(--steel);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rmi-account-menu-body { list-style: none; padding: 6px 0; }
.rmi-account-menu-foot { padding: 4px 0 6px; border-top: 1px solid var(--hairline); }
.rmi-account-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 14px;
  background: none; border: none; cursor: pointer;
  font: 400 .875rem/1 var(--font-sans); color: var(--mist);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.rmi-account-menu-item:hover,
.rmi-account-menu-item:focus-visible { background: var(--smoke); color: var(--porcelain); outline: none; }
.rmi-account-menu-item .ri { flex-shrink: 0; width: 16px; height: 16px; }
.rmi-account-menu-item.is-sign-out { color: var(--steel); }
.rmi-account-menu-item.is-sign-out:hover { color: var(--porcelain); background: var(--smoke); }
.rmi-account-menu-kids-label { flex: 1; }

/* Kids Mode toggle switch (visual only, managed by JS) */
.rmi-toggle {
  position: relative; display: inline-flex;
  width: 34px; height: 20px; flex-shrink: 0;
}
.rmi-toggle-track {
  position: absolute; inset: 0;
  background: var(--smoke); border-radius: 10px;
  transition: background .2s;
}
.rmi-toggle-thumb {
  position: absolute; left: 3px; top: 3px;
  width: 14px; height: 14px;
  background: var(--steel); border-radius: 50%;
  transition: transform .2s, background .2s;
}
.rmi-toggle.is-on .rmi-toggle-track { background: var(--kids-amber); }
.rmi-toggle.is-on .rmi-toggle-thumb { transform: translateX(14px); background: var(--porcelain); }

/* App/auth/learner pages hide the marketing nav (learner pages show the
   role-based .rmi-app-nav from shell.js instead); auth/learner pages hide guest CTAs */
[data-family="app"] .rmi-header-nav,
[data-family="auth"] .rmi-header-nav,
[data-family="learner"] .rmi-header-nav:not(.rmi-app-nav),
[data-family="tutor"] .rmi-header-nav,
[data-family="staff"] .rmi-header-nav:not(.rmi-app-nav) { display: none !important; }
[data-family="auth"] .rmi-hdr-guest,
[data-family="learner"] .rmi-hdr-guest,
[data-family="tutor"] .rmi-hdr-guest,
[data-family="staff"] .rmi-hdr-guest { display: none !important; }
[data-family="learner"] .rmi-hdr-my-learning,
[data-family="tutor"] .rmi-hdr-my-learning,
[data-family="staff"] .rmi-hdr-my-learning { display: none !important; }
.rmi-hdr-console[hidden] { display: none; }
.rmi-app-nav a { white-space: nowrap; }
@media (max-width: 1199px) {
  .rmi-app-nav { margin: 0 1rem; }
  .rmi-app-nav a { padding: .5rem .5rem; }
}

.rmi-header-menu-btn {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--porcelain); padding: 8px; border-radius: var(--radius-sm);
}
.rmi-role-chip { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.06em; color: var(--porcelain); border: 1px solid var(--porcelain); border-radius: 4px; padding: 2px 6px; text-transform: uppercase; white-space: nowrap; background: none; }
@media (max-width: 959px) {
  .rmi-header { height: 56px; }
  .rmi-header-inner { padding: 0 16px; }
  .rmi-header-logo { height: 32px; }
  .rmi-header-nav { display: none !important; }
  .rmi-header-menu-btn { display: flex; align-items: center; justify-content: center; }
  .rmi-hdr-login,
  .rmi-hdr-my-learning { display: none !important; }
}
/* Store apps (body.is-app from assets/js/platform.js, RMI_APP_PAYMENTS 'store' in learn.js):
   no prices, plan purchases, donations or links to the plans, subscription and
   donation sections. Tutor session booking and its payment stay visible. */
body.is-app [data-store-hide],
body.is-app a[href*="#pricing"],
body.is-app a[href*="#donate"],
body.is-app a[href*="action=manage-subscription"] { display: none !important; }

/* Installed app on iPhone: the status bar is black-translucent, so the header
   makes room for it. env() is 0 everywhere else. */
@media (display-mode: standalone) {
  .rmi-header { padding-top: env(safe-area-inset-top, 0px); height: calc(64px + env(safe-area-inset-top, 0px)); }
}
@media (display-mode: standalone) and (max-width: 959px) {
  .rmi-header { height: calc(56px + env(safe-area-inset-top, 0px)); }
}

/* ── Shell: mobile menu ────────────────────────────────────── */
.rmi-menu-overlay { position: fixed; inset: 0; background: rgba(11,11,12,.65); z-index: 8500; opacity: 0; pointer-events: none; transition: opacity .25s; }
.rmi-menu-overlay.is-open { opacity: 1; pointer-events: auto; }
.rmi-menu-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 8600;
  left: auto; height: auto; padding-left: 0; padding-right: 0;
  width: min(420px, 100vw); background: var(--surface-1);
  border-left: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s var(--ease);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  visibility: hidden;
}
.rmi-menu-panel.is-open { transform: translateX(0); visibility: visible; }
.rmi-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--smoke); min-height: 56px; }
.rmi-menu-head img { height: 32px; width: auto; }
.rmi-menu-links { flex: 1; overflow-y: auto; padding: 8px 0; }
.rmi-menu-link { display: flex; align-items: center; height: 56px; padding: 0 20px; gap: 14px; font: 400 1.2rem/1 var(--font-serif); color: var(--porcelain); text-decoration: none; border-bottom: 1px solid rgba(42,42,46,.5); transition: background .1s; }
.rmi-menu-link:hover, .rmi-menu-link:focus { background: rgba(245,243,238,.04); }
.rmi-menu-link.is-small { font: 400 .95rem/1 var(--font-sans); color: var(--mist); height: 48px; }
.rmi-menu-section-label { font: 400 .72rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); padding: 20px 20px 8px; }
.rmi-menu-foot { border-top: 1px solid var(--smoke); padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }

/* ── Shell: bottom tab bar (phones only, < 960 px) ─────────── */
.rmi-tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 7000;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface-1); border-top: 1px solid var(--hairline-strong);
  display: none; align-items: stretch; justify-content: space-around;
}
@media (max-width: 959px) {
  body.is-app-page .rmi-tab-bar { display: flex; }
  body.is-app-page { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
.rmi-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; text-decoration: none; border: none;
  background: none; cursor: pointer;
  color: var(--steel); font: 500 .65rem/1 var(--font-sans);
  padding-top: 10px; transition: color .15s; min-width: 0;
}
.rmi-tab .ri { width: 22px; height: 22px; }
.rmi-tab[aria-current] { color: var(--porcelain); }
/* ── More sheet (slides up from bottom) ──────────────────── */
.rmi-more-sheet-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(11,11,12,.6); display: none; align-items: flex-end;
}
.rmi-more-sheet-overlay.is-open { display: flex; }
.rmi-more-sheet {
  width: 100%; background: var(--graphite);
  border-radius: 16px 16px 0 0; border-top: 1px solid var(--smoke);
  padding: 12px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px);
}
.rmi-more-sheet-handle {
  width: 36px; height: 4px; background: var(--smoke);
  border-radius: 2px; margin: 0 auto 16px;
}
.rmi-more-sheet-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px; font: 400 .95rem/1 var(--font-sans);
  color: var(--porcelain); text-decoration: none;
  background: none; border: none; cursor: pointer; width: 100%; text-align: left;
  transition: background .1s;
}
.rmi-more-sheet-item:hover { background: rgba(245,243,238,.06); }
.rmi-more-sheet-item .ri { width: 20px; height: 20px; color: var(--mist); flex-shrink: 0; }
.rmi-more-sheet-item.is-danger { color: var(--danger); }
.rmi-more-sheet-item.is-danger .ri { color: var(--danger); }

/* ── App layout (sidebar + main) ───────────────────────────── */
.rmi-app-layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 64px); }
.rmi-sidebar { background: var(--surface-1); border-right: 1px solid var(--hairline-strong); padding: 20px 0; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; }
.rmi-sidebar-link { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font: 400 .9rem/1 var(--font-sans); color: var(--mist); text-decoration: none; transition: background .1s, color .1s; }
.rmi-sidebar-link .ri { width: 18px; height: 18px; flex-shrink: 0; }
.rmi-sidebar-link:hover { background: rgba(245,243,238,.04); color: var(--porcelain); }
.rmi-sidebar-link[aria-current] { background: rgba(245,243,238,.07); color: var(--porcelain); }
.rmi-sidebar-section { font: 400 .68rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); padding: 20px 20px 6px; }
.rmi-app-main { padding: 32px 40px; min-width: 0; }
@media (max-width: 959px) {
  .rmi-app-layout { grid-template-columns: 1fr; }
  .rmi-sidebar { display: none; }
  .rmi-app-main { padding: 20px 16px 88px; }
}

/* ── Admin navigation (assets/js/admin-nav.js) ─────────────── */
.admin-nav-search { display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); margin: 0 16px 4px; padding: 9px 12px; background: none; border: 1px solid var(--smoke); border-radius: var(--radius-sm); color: var(--steel); font: 400 .85rem/1 var(--font-sans); cursor: pointer; }
.admin-nav-search:hover { color: var(--porcelain); border-color: var(--steel); }
.admin-nav-search .ri { width: 16px; height: 16px; }
.admin-nav-search span { flex: 1; text-align: left; }
.admin-nav-search kbd { font: 400 .68rem/1 var(--font-mono); color: var(--steel); }
.admin-nav-phonebar { display: none; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.admin-nav-overlay { position: fixed; inset: 0; z-index: 9500; background: rgba(11,11,12,.7); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.admin-nav-dialog { width: 100%; max-width: 520px; background: var(--graphite); border: 1px solid var(--smoke); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.6); overflow: hidden; }
.admin-nav-dialog .rmi-input { width: 100%; border: 0; border-bottom: 1px solid var(--smoke); border-radius: 0; font-size: 16px; padding: 16px; background: transparent; }
.admin-nav-results { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
.admin-nav-results li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--mist); font: 400 .9rem/1.2 var(--font-sans); cursor: pointer; }
.admin-nav-results li .ri { width: 16px; height: 16px; flex-shrink: 0; }
.admin-nav-results li[aria-selected="true"], .admin-nav-results li[data-i]:hover { background: rgba(245,243,238,.07); color: var(--porcelain); }
.admin-nav-results .admin-nav-empty { color: var(--steel); cursor: default; }
.admin-nav-hint { margin: 0; padding: 8px 16px 12px; font: 400 .7rem/1 var(--font-mono); color: var(--steel); }
@media (max-width: 959px) {
  .admin-nav-phonebar { display: flex; }
  .admin-hdr-logout { display: none; }
  .admin-nav-overlay { padding-top: 16px; }
}

/* ── Access denied ─────────────────────────────────────────── */
.rmi-access-denied { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: 2rem; gap: 16px; }
.rmi-access-denied .ri { width: 48px; height: 48px; color: var(--smoke); }
.rmi-access-denied h1 { font: 400 1.8rem/1.2 var(--font-serif); color: var(--porcelain); }
.rmi-access-denied p { font: 400 .95rem/1.6 var(--font-sans); color: var(--mist); max-width: 360px; }

/* ── Auth loading guard ─────────────────────────────────────── */
#rmiAuthGuard { position: fixed; inset: 0; z-index: 9990; background: var(--onyx); display: flex; align-items: center; justify-content: center; transition: opacity .3s; }
#rmiAuthGuard.is-resolved { opacity: 0; pointer-events: none; }

/* ── View-as bar ───────────────────────────────────────────── */
.rmi-view-as-bar { background: var(--graphite); border-bottom: 1px solid var(--smoke); padding: 6px 5%; font: 500 .78rem/1 var(--font-sans); color: var(--warn); display: flex; align-items: center; gap: 8px; }
.rmi-view-as-bar .ri { width: 14px; height: 14px; }

/* ── Notification bell (assets/js/rmi-bell.js, admin.html) ─── */
.rmi-bell-wrap { position: relative; display: inline-flex; }
.rmi-bell-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--danger); border: 2px solid var(--onyx); color: #fff; font: 600 9px/12px var(--font-sans); text-align: center; pointer-events: none; }
/* The panel lives on <body>, not in the header: the header slides away on
   scroll, which used to drag the panel off screen on phones. */
.rmi-bell-panel { position: fixed; z-index: 9000; width: 360px; max-width: calc(100vw - 24px); background: var(--graphite); border: 1px solid var(--smoke); border-radius: var(--radius); box-shadow: 0 8px 32px rgb(0 0 0 / .55); overflow: hidden; }
.rmi-bell-panel[hidden] { display: none; }
.rmi-bell-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--smoke); }
.rmi-bell-head h2 { margin: 0; font: 600 .9rem/1 var(--font-sans); color: var(--porcelain); }
.rmi-bell-list { max-height: min(420px, calc(100dvh - 180px)); overflow-y: auto; overscroll-behavior: contain; }
.rmi-bell-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--smoke); background: transparent; color: inherit; text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.rmi-bell-item:hover, .rmi-bell-item:focus-visible { background: rgb(245 243 238 / .06); outline: none; }
.rmi-bell-item.is-unread { background: rgb(245 243 238 / .04); }
.rmi-bell-item.is-unread .rmi-bell-title::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--porcelain); }
.rmi-bell-item .ri { width: 16px; height: 16px; margin-top: 2px; color: var(--steel); }
.rmi-bell-text { flex: 1; min-width: 0; }
.rmi-bell-title { margin: 0 0 2px; font: 500 .85rem/1.35 var(--font-sans); color: var(--porcelain); }
.rmi-bell-body { margin: 0; font: 400 .8rem/1.45 var(--font-sans); color: var(--steel); }
.rmi-bell-time { flex-shrink: 0; margin-top: 2px; font: 400 .72rem/1 var(--font-mono); color: var(--steel); }
.rmi-bell-empty { padding: 24px 16px; margin: 0; text-align: center; font: 400 .875rem/1.4 var(--font-sans); color: var(--steel); }
.rmi-bell-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; }
/* Phones: centred under the header instead of hanging off the bell. */
@media (max-width: 640px) {
  .rmi-bell-panel { left: 50% !important; right: auto !important; transform: translateX(-50%); width: calc(100vw - 24px); max-width: 420px; }
}

/* ── Page families ─────────────────────────────────────────── */

/* Marketing bands: full-width alternating Onyx/Graphite sections */
.rmi-band {
  background: var(--surface-0);
  width: 100%;
}
.rmi-band.is-raised {
  background: var(--surface-1);
}

/* Marketing masthead */
.rmi-masthead {
  background: var(--surface-1);
  padding: 4rem 5% 3rem;
  border-bottom: 1px solid var(--hairline);
}
.rmi-masthead-eyebrow { font: 400 .72rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: 12px; }
.rmi-masthead-title { font: 400 clamp(1.8rem, 4vw, 3rem)/1.1 var(--font-serif); color: var(--porcelain); margin: 0; text-wrap: balance; }
@media (max-width: 599px) { .rmi-masthead { padding: 2.5rem 16px 2rem; } }

/* Sign-in split layout */
.rmi-auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.rmi-auth-brand {
  background: var(--surface-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem; gap: 2rem;
  border-right: 1px solid var(--hairline);
}
.rmi-auth-brand img { width: min(260px, 80%); height: auto; }
.rmi-auth-brand-tagline { font: 400 1.1rem/1.5 var(--font-serif); color: var(--mist); text-align: center; max-width: 280px; }
.rmi-auth-form {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem;
}
@media (max-width: 699px) {
  .rmi-auth-split { grid-template-columns: 1fr; }
  .rmi-auth-brand { padding: 2.5rem 16px 1.5rem; border-right: none; border-bottom: 1px solid var(--hairline); }
  .rmi-auth-form { padding: 2rem 16px; }
}

/* Part 4 end */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}