/**
 * Deenscovery — Compact Authenticated Application Shell (Phase A of
 * the Global Compact Layout Standard).
 *
 * Loaded ONLY for authenticated NON-STUDENT roles (teacher, parent,
 * school admin, super admin) plus the compact auth pages (login /
 * register opt in via $appShellCss) — see includes/header.php. Public
 * marketing pages never load this file, students use
 * assets/css/student.css instead, and no Worksheet V2 or print/PDF
 * surface ever loads it. Everything here is additive and scoped
 * under .app-shell / .auth-compact so shared style.css primitives
 * (.section, .hero, .page-hero, .card, headings, footer, print
 * rules) remain untouched for marketing, Worksheet V1 PDF, and
 * reflection print paths.
 *
 * Locked geometry standard (approved blueprint decisions G-1/G-2):
 * 76px header · default app max 1840px (workbench pages may opt to
 * ~96vw later) · gutters clamp(16px, 2vw, 32px) · 50-70px title/action
 * row · compact spacing tokens · >=44px touch targets. Compact means
 * efficient, never cramped.
 */

.app-shell {
  --app-header-height: 76px;
  --app-max: 1840px;
  --app-gutter: clamp(16px, 2vw, 32px);
  --app-section-gap: 16px;
  --app-card-gap: 14px;
  --app-card-pad: clamp(18px, 1.5vw, 24px);
  --app-title-gap: 12px;
  --app-ink: #123A66;
  --app-muted: #52677A;
  --app-line: rgba(18, 58, 102, .12);
  /* --app-surface / --app-bg are defined in the SURFACE SYSTEM block
     below (single source of truth for the pastel families). */
  --app-accent: var(--teal-dark, #087C8B);
  --app-accent-soft: #E4F1F4;
  --app-radius: 14px;
  --app-shadow: 0 4px 14px rgba(18, 58, 102, .08);
  background: var(--app-bg);
}

/* ------------------------------------------------------------
   DEENSCOVERY APPLICATION SURFACE SYSTEM — soft pastel families
   mixed from the logo palette. Approved refinement targets: 25-30
   percent tint strength (the inner color-mix), 75 percent surface
   opacity (the outer color-mix against transparent — panels are 25
   percent transparent, so the role ground shows through subtly),
   plus semantic tint utilities so the portal never reads as a sea
   of stark white boxes. Sticky chrome (header, collapsed nav) stays
   on the solid surface token so it never goes translucent. Text and
   controls stay fully opaque — only the background is tinted.
   ------------------------------------------------------------ */
.app-shell {
  --brand-teal: #14A3B0;
  --brand-blue: #1793BC;
  --brand-green: #67A02E;
  --brand-gold: #F0B01B;
  --brand-orange: #F2721C;
  --brand-purple: #8E6FD1;
  /* Surface depth calibrated to the original pre-V2 quran.php
     pastels, using only logo hues. Approved refinement targets:
     25-30 percent tint strength, 75 percent surface opacity - the
     inner color-mix sets the tint, the outer color-mix against
     transparent sets exactly the alpha, so the ground shows through
     subtly and panels read as soft frosted color, never flat white. */
  --app-surface: color-mix(in srgb, color-mix(in srgb, #F0B01B 13%, #FFFFFF) 75%, transparent);
  --app-surface-solid: #FBF7EE;
  --app-surface-teal: color-mix(in srgb, color-mix(in srgb, #14A3B0 28%, #FFFFFF) 75%, transparent);
  --app-surface-sky: color-mix(in srgb, color-mix(in srgb, #1793BC 27%, #FFFFFF) 75%, transparent);
  --app-surface-green: color-mix(in srgb, color-mix(in srgb, #67A02E 28%, #FFFFFF) 75%, transparent);
  --app-surface-gold: color-mix(in srgb, color-mix(in srgb, #F0B01B 30%, #FFFFFF) 75%, transparent);
  --app-surface-peach: color-mix(in srgb, color-mix(in srgb, #F2721C 27%, #FFFFFF) 75%, transparent);
  --app-surface-lavender: color-mix(in srgb, color-mix(in srgb, #8E6FD1 28%, #FFFFFF) 75%, transparent);
  --app-surface-cream: color-mix(in srgb, color-mix(in srgb, #F0B01B 20%, #FFFFFF) 75%, transparent);
  /* Page ground: pale branded neutral (role blocks re-tint it). */
  --app-bg: #F0F5F4;
}

/* Role accents + role page grounds — geometry identical, personality
   per role: teacher friendly teal, parent warm cream, school admin
   soft blue, super admin neutral teal-slate. */
.app-shell.role-teacher      { --app-accent: #0E7C7B; --app-accent-soft: #E2F1F0; --app-bg: #EFF5F3; }
.app-shell.role-parent       { --app-accent: #B26A00; --app-accent-soft: #FBEEDD; --app-bg: #F9F4EC; }
.app-shell.role-school-admin { --app-accent: #1D5FA8; --app-accent-soft: #E3EEF9; --app-bg: #EFF4F8; }
.app-shell.role-super-admin  { --app-accent: #123A66; --app-accent-soft: #E7EDF4; --app-bg: #F1F5F5; }

/* ------------------------------------------------------------
   APP HEADER — 76px, everything vertically centered, professional
   neutral surface. No wallpaper, no mascots, no marketing geometry.
   Keeps the shared .menu-toggle/.site-nav class pair so
   assets/js/script.js's existing mobile collapse works unchanged.
   ------------------------------------------------------------ */
.app-shell .app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  height: var(--app-header-height);
  padding: 0 var(--app-gutter);
  background: var(--app-surface-solid);
  border-bottom: 1px solid var(--app-line);
  box-shadow: 0 3px 12px rgba(18, 58, 102, .06);
}
.app-shell .app-brand { display: flex; align-items: center; flex-shrink: 0; }
.app-shell .app-brand img { width: clamp(140px, 11vw, 178px); height: auto; display: block; }

.app-shell .app-header .site-nav { display: flex; align-items: center; gap: 4px; }
.app-shell .app-header .site-nav a {
  color: var(--app-ink);
  font-weight: 800;
  font-size: .95rem;
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
}
.app-shell .app-header .site-nav a:hover { background: var(--app-accent-soft); color: var(--app-accent); }
.app-shell .app-header .site-nav a.active { background: var(--app-accent); color: #fff; }
/* Neutralize style.css's marketing last-link CTA treatment. */
.app-shell .app-header .site-nav a:last-child { background: none; color: var(--app-ink); padding: 9px 16px; box-shadow: none; }
.app-shell .app-header .site-nav a:last-child::before { content: none; }
.app-shell .app-header .site-nav a:last-child:hover { background: var(--app-accent-soft); color: var(--app-accent); }
.app-shell .app-header .site-nav a:last-child.active { background: var(--app-accent); color: #fff; }

.app-shell .app-role-badge {
  background: var(--app-accent-soft);
  color: var(--app-accent);
  border: 1px solid var(--app-line);
  font-weight: 900;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 13px;
  border-radius: 999px;
  white-space: nowrap;
}
.app-shell .app-profile {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.app-shell .app-profile .nav-link-button {
  border: 0;
  background: none;
  color: var(--app-muted);
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
  padding: 9px 10px;         /* >=44px hit area with line-height */
  border-radius: 999px;
  min-height: 44px;
}
.app-shell .app-profile .nav-link-button:hover { color: var(--app-accent); background: var(--app-accent-soft); }
.app-shell .app-menu-toggle {
  display: none;
  border: 0;
  background: var(--app-accent);
  color: #fff;
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 1.25rem;
  min-height: 44px;
  margin-left: auto;
}

/* ------------------------------------------------------------
   PAGE CONTAINER + TITLE ROW
   ------------------------------------------------------------ */
.app-shell .app-page {
  width: min(100% , var(--app-max));
  margin: 0 auto;
  padding: 14px var(--app-gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: var(--app-section-gap);
}
.app-shell .app-page--wide { --app-max: 96vw; }

/* Title + context + actions on ONE row (50-70px) — omit entirely on
   pages that need no heading strip. */
.app-shell .app-titlebar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 50px;
  padding: 4px 2px;
}
.app-shell .app-titlebar h1 {
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  margin: 0;
  color: var(--app-ink);
}
.app-shell .app-crumb { font-size: .82rem; font-weight: 800; color: var(--app-muted); }
.app-shell .app-crumb a { color: var(--app-accent); text-decoration: none; }
.app-shell .app-crumb a:hover { text-decoration: underline; }
.app-shell .app-title-sub { font-size: .88rem; font-weight: 700; color: var(--app-muted); margin: 0; }
.app-shell .app-title-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.app-shell .app-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  padding: 10px 14px;
}

/* ------------------------------------------------------------
   CONTENT PRIMITIVES
   ------------------------------------------------------------ */
.app-shell .app-card {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  padding: var(--app-card-pad);
}
.app-shell .app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--app-card-gap);
  align-items: stretch;
}
/* Two-column desktop field layout for short fields; groups keep
   compact 10-12px gaps, controls keep >=44px targets. */
.app-shell .app-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 14px;
  align-items: end;
}
.app-shell .app-form-grid label { font-weight: 800; font-size: .84rem; color: var(--app-ink); }
.app-shell .app-table-wrap {
  overflow-x: auto;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
}
.app-shell .app-table-wrap table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.app-shell .app-table-wrap th {
  text-align: left;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--app-muted);
  background: var(--app-accent-soft);
  padding: 9px 12px;
  border-bottom: 2px solid var(--app-line);
  white-space: nowrap;
}
.app-shell .app-table-wrap td { padding: 8px 12px; border-bottom: 1px solid var(--app-line); }
.app-shell .app-table-wrap tr:last-child td { border-bottom: none; }

/* Compact intentional empty state — never a giant blank panel. */
.app-shell .app-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--app-accent-soft);
  border-radius: var(--app-radius);
  padding: 14px 18px;
}
.app-shell .app-empty-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--app-surface);
  border: 2px solid var(--app-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.app-shell .app-empty-title { font-weight: 900; color: var(--app-ink); margin: 0; font-size: .95rem; }
.app-shell .app-empty-sub { font-weight: 700; color: var(--app-muted); margin: 2px 0 0; font-size: .82rem; }


/* Compact app footer (G-9) — a caption, not a marketing band. Shared
   by the authenticated app shell and the compact auth pages. */
.app-shell .app-footer,
.auth-shell .app-footer {
  margin-top: auto;
  padding: 18px 16px 24px;
  text-align: center;
}
.app-shell .app-footer .copyright,
.app-shell .app-footer .copyright a,
.auth-shell .app-footer .copyright,
.auth-shell .app-footer .copyright a { background: transparent; margin: 0; padding: 0; color: var(--app-muted, #52677A); font-weight: 700; font-size: .85rem; }
.app-shell .app-footer .copyright::before,
.app-shell .app-footer .copyright::after,
.auth-shell .app-footer .copyright::before,
.auth-shell .app-footer .copyright::after { content: none; }
.app-shell .app-footer .copyright a:hover,
.auth-shell .app-footer .copyright a:hover { color: var(--app-accent, #087C8B); }

/* ------------------------------------------------------------
   PHASE C PRIMITIVES — reusable application patterns for the
   Super/School Admin migrations (and Phase D later). All scoped
   under .app-shell; none of these touch shared style.css classes.
   ------------------------------------------------------------ */

/* Launcher grid — the dashboard's tool launchpad: compact cards in
   3-4 desktop columns instead of full-width stacked banners. */
.app-shell .app-launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--app-card-gap);
  align-items: stretch;
}
.app-shell .app-launcher {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  padding: 14px 16px;
}
.app-shell .app-launcher-head { display: flex; align-items: center; gap: 10px; }
.app-shell .app-launcher-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--app-accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.app-shell .app-launcher h2 { font-size: 1rem; margin: 0; color: var(--app-ink); }
.app-shell .app-launcher p { margin: 0; font-size: .85rem; font-weight: 600; color: var(--app-muted); flex: 1; }
.app-shell .app-launcher .btn { align-self: flex-start; margin-top: 4px; padding: 9px 18px; font-size: .88rem; }

/* Card headings inherit marketing's clamp(1.6-2.4rem) from style.css
   — far too loud for dense application panels. Compact hierarchy. */
.app-shell .app-card h2 { font-size: 1.2rem; margin-bottom: 10px; }
.app-shell .app-card h3 { font-size: 1.05rem; margin-bottom: 8px; }

/* Section heading outside cards — compact, never a stacked band. */
.app-shell .app-section-title {
  font-size: 1.02rem;
  color: var(--app-ink);
  margin: 6px 2px 0;
}

/* Status pill — compact state chip for titlebars/tables. */
.app-shell .app-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--app-accent-soft);
  color: var(--app-accent);
  border-radius: 999px;
  font-weight: 900;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 5px 12px;
  white-space: nowrap;
}

/* Actions row — buttons/links grouped on one wrapping line. */
.app-shell .app-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Two-column form behavior for legacy .form field groups: opt in by
   adding app-form-grid to the same element. Groups keep their
   markup; short fields flow into responsive columns, and anything
   long opts out with .app-field-full. The submit button always gets
   its own full row. */
.app-shell .app-form-grid > button[type="submit"],
.app-shell .app-form-grid > .app-field-full { grid-column: 1 / -1; }
.app-shell .app-form-grid > button[type="submit"] { justify-self: start; }
.app-shell .app-form-grid label { display: block; margin-bottom: 4px; }
.app-shell .app-form-grid input,
.app-shell .app-form-grid select { width: 100%; min-height: 44px; }

/* The marketing body decorations (sky gradient clouds + the fixed
   star/heart strip that style.css paints on every page) never render
   inside the professional application or auth shells. Scoped body
   overrides only — style.css itself is untouched. */
.app-shell::before,
.auth-shell::before { content: none; }
.app-shell::after,
.auth-shell::after { content: none; }

/* Setup-surah workbench compaction — the authoring page's own
   setup-* classes stay (style.css), the app shell only removes the
   dead vertical space around them and pulls the picker into the
   titlebar row. The form must never shrink below its two combos
   (flex: 0 0 auto), or it wraps into a stacked column. */
.app-shell .app-titlebar .setup-picker-row { display: flex; gap: 12px; flex-wrap: nowrap; flex: 0 0 auto; margin-left: auto; }
.app-shell .app-titlebar .setup-picker-row > div { flex: 0 1 300px; display: flex; flex-direction: column; gap: 3px; }
.app-shell .app-titlebar .setup-picker-row label { font-size: .78rem; font-weight: 900; color: var(--app-muted); }
@media (max-width: 1100px) {
  .app-shell .app-titlebar .setup-picker-row { flex-wrap: wrap; flex: 1 1 100%; margin-left: 0; }
  .app-shell .app-titlebar .setup-picker-row > div { flex: 1 1 260px; }
}
.app-shell .setup-ayah-header { margin: 2px 0 8px; }
.app-shell .setup-tabs { justify-content: flex-start; margin-bottom: 10px; }

/* ------------------------------------------------------------
   QUR'AN PAGE — authenticated non-student (teacher) treatment
   (approved role-aware rule). Compact application geometry with NO
   wallpaper, NO mascots, NO student personalization — professional
   friendly pastel surfaces from the app families. Scoped to the
   .app-shell body class only: logged-out/public rendering has no
   shell class and stays pixel-identical, and students keep the
   Student V2 focus shell via student.css. The 1180px reading
   measure is kept — only vertical waste compacts (G-2).
   ------------------------------------------------------------ */
.app-shell .quran-explorer { padding: 8px clamp(16px, 2vw, 32px) 40px; }
.app-shell .quran-mascot { display: none; }
.app-shell .quran-picker-bar { margin: 2px 0 6px; gap: 10px; }
.app-shell .quran-picker-card { padding: 10px 18px; max-width: none; flex: 1; background: var(--app-surface-teal); }
.app-shell .quran-picker-card .quran-picker-title { margin-bottom: 6px; font-size: .95rem; }
.app-shell .ayah-display-card    { background: var(--app-surface-cream); }
.app-shell .translit-card        { background: var(--app-surface-sky); }
.app-shell .root-card            { background: var(--app-surface-green); }
.app-shell .wbw-card             { background: var(--app-surface-gold); }
.app-shell .translation-card     { background: var(--app-surface-teal); }
.app-shell .simple-translation-card { background: var(--app-surface-sky); }
.app-shell .explanation-card     { background: var(--app-surface-peach); }
.app-shell .story-card           { background: var(--app-surface-gold); }
.app-shell .connection-card      { background: var(--app-surface-green); }
.app-shell .reflection-card      { background: var(--app-surface-lavender); }
.app-shell .mark-complete-card   { background: var(--app-surface-teal); }
.app-shell .activities-card      { background: var(--app-surface-sky); }

/* Checkbox rows inside legacy .form blocks: style.css gives every
   .form input width:100%, which floats a lone checkbox onto its own
   line above its label text. Inside the app shell a checkbox sits
   inline with its label (teacher/parent Quran Screen setup). */
.app-shell .form label input[type="checkbox"] {
  width: auto;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

/* Tint utilities — apply to .app-card, .app-launcher, .app-toolbar,
   or any app surface. Border picks up a whisper of the same hue.
   Declared AFTER every surface primitive so the tint wins the
   cascade at equal specificity. */
.app-shell .app-tint-teal     { background: var(--app-surface-teal);     border-color: color-mix(in srgb, var(--brand-teal) 22%, transparent); }
.app-shell .app-tint-sky      { background: var(--app-surface-sky);      border-color: color-mix(in srgb, var(--brand-blue) 20%, transparent); }
.app-shell .app-tint-green    { background: var(--app-surface-green);    border-color: color-mix(in srgb, var(--brand-green) 22%, transparent); }
.app-shell .app-tint-gold     { background: var(--app-surface-gold);     border-color: color-mix(in srgb, var(--brand-gold) 28%, transparent); }
.app-shell .app-tint-peach    { background: var(--app-surface-peach);    border-color: color-mix(in srgb, var(--brand-orange) 20%, transparent); }
.app-shell .app-tint-lavender { background: var(--app-surface-lavender); border-color: color-mix(in srgb, var(--brand-purple) 22%, transparent); }
.app-shell .app-tint-cream    { background: var(--app-surface-cream);    border-color: color-mix(in srgb, var(--brand-gold) 18%, transparent); }

/* Keyboard focus — same accessibility layer the student shell has. */
.app-shell a:focus-visible,
.app-shell button:focus-visible,
.app-shell input:focus-visible,
.app-shell select:focus-visible,
.app-shell textarea:focus-visible,
.app-shell [tabindex]:focus-visible {
  outline: 3px solid var(--app-accent);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ------------------------------------------------------------
   COMPACT AUTH SHELL (login/register, G-4 + Phase A final
   correction). A dedicated ~76px authentication header — brand plus
   one quiet way back Home, nothing else — then the small context
   heading, then the form immediately. Never a 138px marketing
   header or a 250px+ hero above a two-field form.
   ------------------------------------------------------------ */
.auth-shell .auth-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 76px;
  padding: 0 clamp(16px, 2vw, 32px);
  background: #FDFCF8;
  border-bottom: 1px solid rgba(18, 58, 102, .12);
  box-shadow: 0 3px 12px rgba(18, 58, 102, .06);
}
.auth-shell .auth-header .app-brand { display: flex; align-items: center; flex-shrink: 0; }
.auth-shell .auth-header .app-brand img { width: clamp(140px, 11vw, 178px); height: auto; display: block; }
.auth-shell .auth-home-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #52677A;
  font-weight: 800;
  font-size: .92rem;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 999px;
  min-height: 44px;
}
.auth-shell .auth-home-link:hover { color: var(--teal-dark, #087C8B); background: #E4F1F4; }
.auth-shell { background: #F2F7F5; }
.auth-shell main { min-height: calc(100vh - 76px - 70px); }
.auth-compact .auth-heading {
  max-width: 480px;
  margin: 18px auto 0;
  padding: 0 16px;
  text-align: center;
}
.auth-compact .auth-heading h1 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0 0 4px; }
/* The marketing star-pill eyebrow reads as decoration — on the auth
   shell it becomes a quiet uppercase label. */
.auth-compact .auth-heading .eyebrow {
  background: none;
  box-shadow: none;
  color: var(--app-muted, #52677A);
  padding: 0;
  margin-bottom: 4px;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.auth-compact .auth-heading .eyebrow::before { content: none; }
.auth-compact .auth-heading p { color: var(--app-muted, #52677A); font-weight: 700; font-size: .92rem; margin: 0; }
.auth-compact .auth-card-slot { padding-top: 14px; }

/* ------------------------------------------------------------
   Responsive — reflow without giant vertical gaps; never reproduce
   the legacy mobile .section 44px inflation inside this shell.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .app-shell .app-menu-toggle { display: block; }
  .app-shell .app-header { height: 68px; }
  .app-shell .app-header .site-nav {
    display: none;
    position: absolute;
    left: 16px; right: 16px; top: 70px;
    background: var(--app-surface-solid);
    border: 1px solid var(--app-line);
    border-radius: 14px;
    padding: 10px;
    box-shadow: var(--app-shadow);
  }
  .app-shell .app-header .site-nav.open { display: grid; gap: 4px; }
  .app-shell .app-titlebar { min-height: 0; }
  .app-shell .app-title-actions { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .app-shell .app-page { padding: 12px 16px 32px; }
  /* The header row must fit a 390px phone: the role badge is
     redundant context there, the brand shrinks, and the logout
     button tightens — no horizontal page overflow, ever. */
  .app-shell .app-header { gap: 10px; padding: 0 12px; }
  .app-shell .app-brand img { width: 118px; }
  .app-shell .app-role-badge { display: none; }
  .app-shell .app-profile { gap: 4px; }
  .app-shell .app-profile .nav-link-button { font-size: .82rem; padding: 8px 6px; }
}