@charset "UTF-8";
/* =============================================================================
   ETEC v5 — Commercial Design System
   منصة التقويم الذاتي والاستعداد للتقويم الخارجي
   -----------------------------------------------------------------------------
   Arabic-first, RTL-native, institutional SaaS surface for schools.
   Loaded AFTER public/assets/v4/etec-v4.css (v4 is kept on disk and still linked).

   ── ABOUT `!important` IN THIS FILE ──────────────────────────────────────────
   v4 declares `!important` on a large number of component properties
   (buttons, badges, KPI cards, form controls, tables, headings, legacy admin
   wrappers). Because v4 is still loaded before this file, a normal declaration
   here can never win the cascade against a v4 `!important`, no matter how
   specific the selector, and CSS cascade layers cannot reverse that for both
   normal and important declarations at once.

   Therefore `!important` is used here ONLY on properties that v4 already marked
   `!important`. It is never used to patch a layout mistake in v5 itself.
   Sections that carry it are marked with an inline "!imp: overrides v4" note.
   New v5-only components (app shell, page header, empty states, drop zone,
   stat rows, timeline, owner portal…) use plain declarations.

   ── DYNAMIC VALUES ───────────────────────────────────────────────────────────
   Tenant branding is injected as inline custom properties by the PHP layer:
     --brand        school primary colour (arbitrary hex, may be light or dark)
     --brand-2      school secondary colour
     --accent       school accent colour
     --on-brand     readable foreground computed for --brand  (#fff or ink)
     --brand-ink    darkened brand, safe for text on light tints
     --brand-tint   very light brand wash, safe as a background
     --brand-line   soft brand border
   Never assume the school colour is dark. Body text always uses neutral ink.

   ── SECTIONS ─────────────────────────────────────────────────────────────────
    1. Design Tokens              14. Tables
    2. Base and Reset             15. Evidence Components
    3. Typography                 16. Task Components
    4. App Shell                  17. Team Components
    5. Sidebar                    18. Assignment Components
    6. Topbar                     19. Reports
    7. Page Header                20. Owner Portal
    8. Buttons                    21. Alerts and Empty States
    9. Forms                      22. Utilities
   10. Cards                      23. Responsive Rules
   11. KPI Components             24. Print Rules
   12. Progress Components        25. Reduced Motion
   13. Status Badges   (+22b sign-in, 22c drawer, 22d product signature)
   ========================================================================== */


/* =============================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand — fallbacks only; PHP overrides these per tenant */
  --brand:        #1D4ED8;
  --brand-2:      #0EA5E9;
  --accent:       #0F766E;
  --on-brand:     #FFFFFF;
  --brand-ink:    #1A44B8;
  --brand-tint:   #EEF3FE;
  --brand-line:   #C9D9F8;

  /* Neutral ink scale — always used for text, never the tenant colour */
  --ink:          #0D1526;
  --ink-2:        #1C2637;
  --text:         #414D63;
  --muted:        #5A6880;
  --muted-2:      #68768D;

  /* Surfaces — four levels of depth built from contrast, not from shadow */
  --canvas:       #F3F5F9;   /* level 0 — the page itself            */
  --surface:      #FFFFFF;   /* level 1 — panels and content         */
  --surface-2:    #F8FAFC;   /* level 2 — headers, quiet fills       */
  --surface-3:    #EEF2F7;   /* level 3 — sunken wells, tracks       */
  --surface-inv:  #0E1729;   /* owner portal rail                    */
  --bg:           var(--canvas);

  /* Lines — three weights so dividers can recede or assert */
  --line:         #E4E8F0;
  --line-2:       #EDF0F6;
  --line-strong:  #CBD4E1;

  /* Semantic — status colours (paired: ink / wash / border) */
  --success:      #05714A;
  --success-bg:   #ECFDF3;
  --success-line: #A9E5C4;
  --warning:      #9A5B08;
  --warning-bg:   #FFF8EB;
  --warning-line: #F5D08A;
  --danger:       #B32318;
  --danger-bg:    #FEF3F2;
  --danger-line:  #F5BDB8;
  --info:         #175CD3;
  --info-bg:      #EFF6FF;
  --info-line:    #B7D5FB;
  --neutral:      #475467;
  --neutral-bg:   #F3F5F8;
  --neutral-line: #DDE3EC;
  --violet:       #5B37B7;
  --violet-bg:    #F5F3FF;
  --violet-line:  #D6CCF5;

  /* Elevation — depth is carried by surface contrast and borders; shadow
     only marks the layers that genuinely float above the page. */
  --shadow-xs:    none;
  --shadow-sm:    0 1px 2px rgba(13,21,38,.04);
  --shadow-md:    0 4px 14px rgba(13,21,38,.06), 0 1px 3px rgba(13,21,38,.04);
  --shadow-lg:    0 18px 44px rgba(13,21,38,.12), 0 4px 10px rgba(13,21,38,.06);

  /* Radii — restrained; large radii read as consumer app, not institution */
  --r-xs: 5px;
  --r-sm: 7px;
  --r:    9px;
  --r-md: 11px;
  --r-lg: 13px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Spacing scale (4px base) */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 32px;  --s8: 40px;  --s9: 56px;

  /* Control heights */
  --h-sm: 34px;
  --h-md: 42px;
  --h-lg: 48px;
  --tap:  44px;          /* minimum comfortable tap target */

  /* Type scale — hierarchy comes from weight, colour and grouping as much
     as from size, so headings stay confident without becoming billboards. */
  --fs-display: 30px;   /* used sparingly: sign-in headline only        */
  --fs-h1:      24px;   /* page title                                    */
  --fs-h2:      16px;   /* section title                                 */
  --fs-h3:      15px;   /* card title                                    */
  --fs-num:     34px;   /* the lead metric on a screen                   */
  --fs-num-sm:  22px;   /* supporting metrics                            */
  --fs-body:    15px;   /* prose, comfortable for long working sessions  */
  --fs-sm:      14px;   /* table cells, controls, supporting text        */
  --fs-xs:      13px;   /* metadata — small, still readable              */
  --fs-label:   13px;
  --fs-badge:   12.5px;
  --fs-th:      12.5px;
  --fs-eyebrow: 12.5px;  /* group labels, eyebrows, small caps-like text */

  /* Letter-spacing: tighter as type grows, a signature of the scale */
  --ls-display: -.028em;
  --ls-title:   -.018em;
  --ls-num:     -.022em;
  --ls-eyebrow:  .06em;

  /* Motion */
  --dur-fast: 120ms;
  --dur:      170ms;
  --dur-slow: 220ms;
  --ease:     cubic-bezier(.2, .6, .3, 1);

  /* Shell metrics */
  --sidebar:      284px;
  --topbar:       68px;
  --content-max:  1400px;
  --gutter:       24px;

  /* Legacy aliases — several existing pages reference v3-era token names in
     inline styles that were never defined. Mapping them here removes the
     "undefined variable" fallbacks that caused transparent borders and
     collapsed spacing on the evidence/task pages. */
  --border:       var(--line);
  --border-light: var(--line-2);
  --accent-light: var(--info-bg);
  --accent-dark:  var(--brand-ink);
  --heading:      var(--ink);
  --card:         var(--surface);
  --r2:           var(--r-lg);
  --font: "IBM Plex Sans Arabic", "Tajawal", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
}


/* =============================================================================
   2. BASE AND RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;                 /* real 16px root: no micro text anywhere */
  -webkit-text-size-adjust: 100%;
}

body.etec-v4,
body.etec-v5 {
  margin: 0;
  min-height: 100vh;
  direction: rtl;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* v4 paints a decorative grid + radial washes over the whole viewport.
   The commercial surface is a calm flat neutral instead. */
body.etec-v4::before { content: none !important; } /* !imp: overrides v4 */

img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }

::selection { background: var(--brand-tint); color: var(--ink); }

/* Focus — visible on every interactive surface, never removed without a
   replacement (accessibility requirement §30). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Local icon system */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -.16em;
  fill: none;
  stroke: currentColor;
  pointer-events: none;
}
.ico--lg { width: 1.45em; height: 1.45em; }
.ico--xl { width: 22px;   height: 22px;   }

/* Skip link */
.skip-link {
  position: absolute;
  right: var(--s4);
  top: -60px;
  z-index: 200;
  padding: 10px var(--s4);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  font-weight: 700;
  color: var(--ink);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s3); }


/* =============================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 { margin: 0; color: var(--ink); line-height: 1.35; font-weight: 700; }

.t-display { font-size: var(--fs-display); font-weight: 750; letter-spacing: -.02em; color: var(--ink); line-height: 1.28; }
.t-h1      { font-size: var(--fs-h1);      font-weight: 750; letter-spacing: -.015em; color: var(--ink); }
.t-h2      { font-size: var(--fs-h2);      font-weight: 700; color: var(--ink); }
.t-h3      { font-size: var(--fs-h3);      font-weight: 700; color: var(--ink); }
.t-body    { font-size: var(--fs-body);    font-weight: 400; color: var(--text); }
.t-sub     { font-size: var(--fs-sm);      font-weight: 400; color: var(--muted); line-height: 1.75; }
.t-xs      { font-size: var(--fs-xs);      font-weight: 500; color: var(--muted); }
.t-num     { font-size: var(--fs-num);     font-weight: 750; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.t-strong  { font-weight: 700; color: var(--ink); }
.t-muted   { color: var(--muted); }

/* Numerals in data contexts line up column to column */
.table, .t-num, .kpi-card__value, .stat-tile__value, .metric__value,
.summary-card__value, .domain-stat__val, .mini-stat__value { font-variant-numeric: tabular-nums; }

/* Latin fragments (emails, domains, license keys, codes) stay LTR inside RTL */
.ltr, .u-email, .code-inline { direction: ltr; unicode-bidi: isolate; text-align: right; }
.code-inline {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
}


/* =============================================================================
   4. APP SHELL
   ========================================================================== */
.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg);
}

.app-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.content-wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s6) var(--gutter) var(--s9);
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  min-width: 0;
}


/* =============================================================================
   5. SIDEBAR
   ========================================================================== */
.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: none;                 /* no glass: institutional, not flashy */
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

/* Brand block — the platform name must never be clipped (§6) */
.side-brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s5);
  min-height: var(--topbar);
  border-bottom: 1px solid var(--line);
}
.side-brand__mark {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.side-brand__copy { min-width: 0; }
.side-brand__name {
  font-size: var(--fs-h3);
  font-weight: 650;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: var(--ls-title);
  /* wraps to a second line instead of being cut off */
  overflow-wrap: anywhere;
}
.side-brand__tag {
  margin-top: 1px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Current school */
/* School context: a light identity block, not a competing card. The brand
   rail ties it to the product's accent-rail motif. */
.tenant-card {
  position: relative;
  margin: var(--s5) var(--s4) var(--s3);
  padding-inline-start: var(--s4);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.tenant-card::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 2px; bottom: 2px;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--brand);
}
.tenant-card__label {
  font-size: var(--fs-eyebrow);
  font-weight: 650;
  letter-spacing: var(--ls-eyebrow);
  color: var(--muted-2);
}
.tenant-card__name {
  margin-top: 4px;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.tenant-card__meta { margin-top: 4px; display: flex; gap: var(--s2); flex-wrap: wrap; }
.tenant-card__meta span {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Navigation — scrolls internally on short viewports (§13.2) */
.side-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s2) var(--s3) var(--s4);
}
.side-nav::-webkit-scrollbar { width: 8px; }
.side-nav::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); border: 2px solid var(--surface); }

.side-nav__section,
.side-nav__label {
  padding: var(--s5) var(--s3) 6px;
  color: var(--muted-2);
  font-size: var(--fs-eyebrow);
  font-weight: 650;
  letter-spacing: var(--ls-eyebrow);
}
.side-nav > .side-nav__section:first-child { padding-top: var(--s2); }

.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 40px;
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 550;
  border: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.side-link__icon {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}
.side-link__icon .ico { width: 20px; height: 20px; }
.side-link__text {
  min-width: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;   /* long Arabic labels wrap, never truncate */
}
.side-link:hover {
  background: var(--surface-3);
  color: var(--ink);
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
.side-link:hover .side-link__icon { color: var(--ink-2); }

/* Active: a soft brand wash plus the accent rail — legible without shouting */
.side-link.active,
.side-link[aria-current="page"] {
  background: var(--brand-tint);
  color: var(--brand-ink);
  box-shadow: none;
  font-weight: 650;
}
.side-link.active .side-link__icon,
.side-link[aria-current="page"] .side-link__icon { color: var(--brand-ink); background: none; }
.side-link.active::before,
.side-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--brand);
}
.side-link.danger { color: var(--danger); }
.side-link.danger .side-link__icon { color: var(--danger); background: none; }
.side-link.danger:hover { background: var(--danger-bg); }

/* Account strip pinned to the bottom of the rail */
.side-foot {
  flex: none;
  border-top: 1px solid var(--line);
  padding: var(--s3);
  background: var(--surface);
}
.side-foot__user {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2);
  border-radius: var(--r);
  min-width: 0;
}
.side-foot__avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm);
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.side-foot__avatar img { width: 100%; height: 100%; object-fit: cover; }
.side-foot__body { min-width: 0; }
.side-foot__name  { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.side-foot__role  { font-size: var(--fs-xs); color: var(--muted); }
.side-foot__out {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: var(--s2);
  min-height: var(--h-sm);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: 650;
  transition: background var(--dur) var(--ease);
}
.side-foot__out:hover { background: var(--danger-bg); border-color: var(--danger-line); }

/* v4's decorative "work path" note is replaced by the account strip */
.work-note { display: none; }


/* =============================================================================
   6. TOPBAR
   ========================================================================== */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0;
  min-height: var(--topbar);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--gutter);
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.menu-btn {
  display: none;
  width: var(--tap);
  height: var(--tap);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-2);
  padding: 0;
  cursor: pointer;
}
.menu-btn .ico { width: 22px; height: 22px; }

/* Page identity — never overlaps the account block (§6) */
.page-heading { min-width: 0; }
.page-heading__eyebrow {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-heading__title {
  margin-top: 1px;
  font-size: var(--fs-h2);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: var(--ls-title);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-actions { display: flex; align-items: center; gap: var(--s2); min-width: 0; }

/* Secondary shortcuts: present but deliberately quiet, so the page title and
   the account block are not competing with three equal-weight buttons. */
.topbar-action {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--s3) !important;        /* !imp: overrides v4 .btn group */
  border: 0;
  border-radius: var(--r) !important;     /* !imp: overrides v4 .btn group */
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm) !important;     /* !imp: overrides v4 .btn group */
  font-weight: 550 !important;            /* !imp: overrides v4 .btn group */
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.topbar-action .ico { color: var(--muted-2); }
.topbar-action:hover { background: var(--surface-3); color: var(--ink); box-shadow: none; }
.topbar-action:hover .ico { color: var(--ink-2); }

/* User menu — click + keyboard driven, never hover-only (§13.3) */
.user-menu { position: relative; }
.user-pill {
  display: flex;
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 3px var(--s3) 3px 4px;
  min-width: 0;
  min-height: 42px;
  cursor: pointer;
  color: inherit;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.user-pill:hover { background: var(--surface-3); }
.user-pill[aria-expanded="true"] { background: var(--surface-3); border-color: var(--line-strong); }
.user-pill__avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-pill);
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.user-pill__avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-pill__body { display: grid; text-align: right; min-width: 0; max-width: 150px; }
.user-pill__body b {
  font-size: var(--fs-sm); color: var(--ink); font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-pill__body small { font-size: 11px; color: var(--muted); font-weight: 500; line-height: 1.3; }
.user-pill__caret { color: var(--muted-2); flex: none; }

.user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;                 /* RTL: aligns with the button's left edge */
  min-width: 224px;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  z-index: 60;
}
/* Open state is driven by JS (aria-expanded), not by :hover. */
.user-menu.is-open .user-dropdown { opacity: 1; visibility: visible; transform: none; }
.user-dropdown a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: 0 var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.user-dropdown a:hover { background: var(--surface-3); }
.user-dropdown a .ico { color: var(--muted); }
.user-dropdown hr { margin: 5px 4px; border-top: 1px solid var(--line-2); }
.user-dropdown .danger { color: var(--danger); }
.user-dropdown .danger .ico { color: var(--danger); }
.user-dropdown__head {
  padding: var(--s2) var(--s3) var(--s3);
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 5px;
}
.user-dropdown__head b { display: block; font-size: var(--fs-sm); color: var(--ink); font-weight: 700; }
.user-dropdown__head span { display: block; font-size: var(--fs-xs); color: var(--muted); }


/* =============================================================================
   7. PAGE HEADER
   ========================================================================== */
.pagehead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s5);
  padding: 0 0 var(--s5);
  border-bottom: 1px solid var(--line);
  background: none;
}
.pagehead__main { min-width: 0; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--s3);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
}
.crumbs a { color: var(--muted); border-radius: var(--r-xs); }
.crumbs a:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs__sep { color: var(--muted-2); flex: none; }
.crumbs__sep .ico { width: 14px; height: 14px; }
.crumbs [aria-current="page"] { color: var(--ink-2); font-weight: 650; }

.pagehead__title {
  font-size: var(--fs-h1) !important;      /* !imp: overrides v4 h1 clamp */
  font-weight: 700 !important;             /* !imp: overrides v4 h1 weight */
  color: var(--ink);
  letter-spacing: var(--ls-title);
  line-height: 1.3 !important;             /* !imp: overrides v4 h1 */
}
.pagehead__sub {
  margin: var(--s2) 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.8;
  max-width: 72ch;
}
.pagehead__meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.pagehead__actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Section heading inside a card */
.section-head, .sec__head, .table-card__head, .panel-head, .card-head, .action-sec__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: 0 0 var(--s4);
  border-bottom: 1px solid var(--line-2);
  background: none;
}
.section-title, .sec__title, .table-card__title, .panel-title, .card-title, .action-sec__title {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-h2) !important;      /* !imp: overrides v4 */
  font-weight: 700 !important;             /* !imp: overrides v4 */
  line-height: 1.4;
}
.section-sub, .sec__sub, .table-card__subtitle, .panel-sub, .card-subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-sm) !important;      /* !imp: overrides v4 */
  font-weight: 400;
  line-height: 1.7;
}

/* Legacy hero classes are folded into the flat page header language so the
   whole product reads as one system (§37). */
.page-hero, .page-header, .report-hero, .assign-hero, .ind-hero, .ev-hero, .ctx-card, .hero {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.page-hero, .page-header, .report-hero {
  position: relative;
  padding: var(--s5) var(--s6) !important;  /* !imp: overrides v4 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s5);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.page-hero::before, .page-header::before { content: none; }

.hero-kicker, .page-header__eyebrow, .eyebrow, .assign-kicker {
  display: inline-flex !important;         /* !imp: overrides v4 */
  align-items: center;
  gap: 6px;
  padding: 4px 10px !important;            /* !imp: overrides v4 */
  border-radius: var(--r-pill) !important; /* !imp: overrides v4 */
  background: var(--surface-3) !important; /* !imp: overrides v4 */
  color: var(--muted) !important;          /* !imp: overrides v4 */
  border: 1px solid var(--line) !important;/* !imp: overrides v4 */
  font-size: var(--fs-xs) !important;      /* !imp: overrides v4 */
  font-weight: 600 !important;             /* !imp: overrides v4 */
  margin-bottom: var(--s3) !important;     /* !imp: overrides v4 */
  line-height: 1.4 !important;             /* !imp: overrides v4 */
}
.hero-title, .page-header__title, .assign-title, .titlex, .ind-hero__title, .ev-hero__title {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-h1) !important;      /* !imp: overrides v4 */
  font-weight: 750 !important;             /* !imp: overrides v4 */
  letter-spacing: -.015em;
  line-height: 1.4 !important;             /* !imp: overrides v4 */
}
.hero-sub, .page-header__sub, .assign-sub, .subx {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm) !important;      /* !imp: overrides v4 */
  font-weight: 400;
  line-height: 1.8 !important;             /* !imp: overrides v4 */
  max-width: 78ch;
}
h1 {
  font-size: var(--fs-h1) !important;      /* !imp: overrides v4 h1 clamp */
  font-weight: 700 !important;             /* !imp: overrides v4 h1 weight */
  letter-spacing: var(--ls-title);
  line-height: 1.3 !important;             /* !imp: overrides v4 h1 */
}


/* =============================================================================
   8. BUTTONS
   ========================================================================== */
.btn, .pbtn, .tab-btn, .btnx, .btn-main, .del-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--h-md);
  padding: 0 var(--s4) !important;          /* !imp: overrides v4 */
  border-radius: var(--r) !important;       /* !imp: overrides v4 */
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-sm) !important;       /* !imp: overrides v4 */
  font-weight: 650 !important;              /* !imp: overrides v4 */
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  text-align: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:hover, .pbtn:hover, .tab-btn:hover, .btnx:hover, .btn-main:hover {
  transform: none;                          /* no lift: calm, institutional */
  box-shadow: none;
  background: var(--surface-3);
  border-color: var(--line-strong);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn:disabled, .btnx:disabled, .btn-main:disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — the single dominant action on a screen.
   Uses the tenant colour with a PHP-computed readable foreground. */
.btn-primary, .btn.brand, .pbtn-primary, .primary, .btn-main, .btn-blue {
  background: var(--brand) !important;      /* !imp: overrides v4 */
  color: var(--on-brand) !important;        /* !imp: overrides v4 */
  border-color: var(--brand) !important;    /* !imp: overrides v4 */
}
.btn-primary:hover, .btn.brand:hover, .primary:hover, .btn-main:hover, .btn-blue:hover {
  background: var(--brand-ink) !important;  /* !imp: overrides v4 */
  border-color: var(--brand-ink) !important;/* !imp: overrides v4 */
  color: var(--on-brand) !important;        /* !imp: overrides v4 */
}

.btn-outline, .btn-ghost, .ghost, .btn.secondary {
  border-color: var(--line) !important;     /* !imp: overrides v4 */
  background: var(--surface) !important;    /* !imp: overrides v4 */
  color: var(--ink-2) !important;           /* !imp: overrides v4 */
}
.btn-outline:hover, .btn-ghost:hover, .ghost:hover { background: var(--surface-3) !important; } /* !imp: overrides v4 */

.btn-subtle { background: var(--surface-3) !important; border-color: transparent !important; color: var(--ink-2) !important; } /* !imp: overrides v4 */

.btn-accent {
  background: var(--surface) !important;    /* !imp: overrides v4 */
  color: var(--brand-ink) !important;       /* !imp: overrides v4 */
  border-color: var(--brand-line) !important;/* !imp: overrides v4 */
}
.btn-success, .btn.success {
  background: var(--success-bg) !important; /* !imp: overrides v4 */
  color: var(--success) !important;         /* !imp: overrides v4 */
  border-color: var(--success-line) !important; /* !imp: overrides v4 */
}
.btn-danger, .del-btn, .btn.danger {
  background: var(--surface) !important;    /* !imp: overrides v4 */
  color: var(--danger) !important;          /* !imp: overrides v4 */
  border-color: var(--danger-line) !important; /* !imp: overrides v4 */
}
.btn-danger:hover, .del-btn:hover { background: var(--danger-bg) !important; } /* !imp: overrides v4 */
.btn.warn { background: var(--warning-bg) !important; color: var(--warning) !important; border-color: var(--warning-line) !important; } /* !imp: overrides v4 */

.btn-sm, .btn.small {
  min-height: var(--h-sm) !important;       /* !imp: overrides v4 */
  padding: 0 var(--s3) !important;          /* !imp: overrides v4 */
  border-radius: var(--r-sm) !important;    /* !imp: overrides v4 */
  font-size: var(--fs-xs) !important;       /* !imp: overrides v4 */
}
.btn-lg { min-height: var(--h-lg) !important; padding: 0 var(--s6) !important; font-size: var(--fs-body) !important; } /* !imp: overrides v4 */
.btn-block { width: 100%; }
.btn .ico { margin-inline-start: -2px; }

/* Icon-only control: must always carry an aria-label (§12.4) */
.btn-icon {
  width: var(--tap); height: var(--tap);
  min-height: var(--tap);
  padding: 0 !important;                    /* !imp: overrides v4 */
  border-radius: var(--r) !important;       /* !imp: overrides v4 */
}

.actions, .hero-actions, .filters, .form-actions, .card-actions, .report-actions, .toolbar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* Sticky action bar for long forms — never covers the last field (§25) */
.form-sticky {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  flex-wrap: wrap;
  margin: var(--s5) calc(var(--s5) * -1) calc(var(--s5) * -1);
  padding: var(--s3) var(--s5);
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.form-sticky__hint { margin-inline-end: auto; font-size: var(--fs-xs); color: var(--muted); }


/* =============================================================================
   9. FORMS
   ========================================================================== */
.form, .form-grid, .form-stack { display: grid; gap: var(--s4); }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.form-row, .form-group, .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-row-wide, .full, .form-group.full, .col-12 { grid-column: 1 / -1; }

/* Fieldset-style grouping for long forms (§25) */
.form-section { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-section + .form-section { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line-2); }
.form-section__legend {
  display: flex; align-items: center; gap: var(--s2);
  padding: 0; margin: 0 0 var(--s2);
  font-size: var(--fs-h3); font-weight: 700; color: var(--ink);
}
.form-section__legend .ico { color: var(--muted); }
.form-section__note { margin: 0 0 var(--s4); font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; }

.form-label, label, .field label, .label {
  font-size: var(--fs-label) !important;    /* !imp: overrides v4 */
  font-weight: 650 !important;              /* !imp: overrides v4 */
  color: var(--ink-2) !important;           /* !imp: overrides v4 */
  margin: 0 !important;                     /* !imp: overrides v4 */
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
}
.req, .form-label .req { color: var(--danger); font-weight: 700; }
.hint, .form-label .hint, .helper {
  color: var(--muted) !important;           /* !imp: overrides v4 */
  font-size: var(--fs-xs) !important;       /* !imp: overrides v4 */
  font-weight: 400 !important;              /* !imp: overrides v4 */
  line-height: 1.6;
}
.form-label .hint { margin-inline-start: auto; }
.field-error { color: var(--danger); font-size: var(--fs-xs); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.field-ok    { color: var(--success); font-size: var(--fs-xs); font-weight: 600; }

.form-control, .form-input, .form-input-sm, .form-select, .form-textarea, .input,
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], input[type="tel"], input[type="url"],
select, textarea {
  width: 100%;
  min-height: var(--h-md);
  border: 1px solid var(--line-strong) !important;  /* !imp: overrides v4 */
  border-radius: var(--r) !important;               /* !imp: overrides v4 */
  background: var(--surface) !important;            /* !imp: overrides v4 */
  color: var(--ink) !important;                     /* !imp: overrides v4 */
  padding: 9px var(--s3) !important;                /* !imp: overrides v4 */
  outline: none;
  font-size: var(--fs-body) !important;             /* !imp: overrides v4 */
  font-weight: 400 !important;                      /* !imp: overrides v4 */
  font-family: var(--font);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea, .form-textarea { resize: vertical; min-height: 108px; line-height: 1.8; }

select, .form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: left 18px top 50%, left 13px top 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-start: var(--s7) !important;       /* !imp: overrides v4 */
}

:is(.form-control, .form-input, .form-select, .form-textarea, .input, input, select, textarea):focus {
  border-color: var(--brand) !important;            /* !imp: overrides v4 */
  box-shadow: 0 0 0 3px var(--brand-tint) !important; /* !imp: overrides v4 */
}
:is(input, select, textarea)[disabled],
:is(input, select, textarea):disabled {
  background: var(--surface-3) !important;          /* !imp: overrides v4 */
  color: var(--muted) !important;                   /* !imp: overrides v4 */
  cursor: not-allowed;
}
:is(input, textarea)[readonly] { background: var(--surface-2) !important; }  /* !imp: overrides v4 */
:is(.form-control, .form-input, .form-select).error,
:is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--danger) !important;           /* !imp: overrides v4 */
  box-shadow: 0 0 0 3px var(--danger-bg) !important;/* !imp: overrides v4 */
}
::placeholder { color: var(--muted-2); opacity: 1; }

/* Short fields should not stretch across the page (§6, §25) */
.field--sm    { max-width: 220px; }
.field--md    { max-width: 340px; }
.field--date  { max-width: 210px; }

/* Choice controls */
.check, .help-check, .checks label {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: 6px var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.check:hover, .checks label:hover { background: var(--surface-3); }
.check input, .checks label input { width: 17px; height: 17px; accent-color: var(--brand); flex: none; margin: 0; cursor: pointer; }
.check:has(input:checked), .checks label:has(input:checked) {
  border-color: var(--brand-line);
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-weight: 600;
}
.checks { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* Selectable card option (evidence type, role choice) */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--s2); }
.choice { position: relative; display: block; }
.choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; }
.choice__box {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.choice__box .ico { color: var(--muted); }
.choice input:hover + .choice__box { background: var(--surface-3); }
.choice input:checked + .choice__box {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-ink);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.choice input:checked + .choice__box .ico { color: var(--brand-ink); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--brand-ink); outline-offset: 2px; }

/* Password field with a visibility toggle */
.input-wrap { position: relative; }
.input-wrap > .ico-lead {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  pointer-events: none;
}
.input-wrap.has-lead input  { padding-inline-end: 38px !important; }  /* !imp: overrides v4 */
.input-wrap.has-toggle input { padding-inline-start: 52px !important; } /* !imp: overrides v4 */
.pw-toggle {
  position: absolute;
  inset-inline-start: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0;
  background: transparent;
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
}
.pw-toggle:hover { background: var(--surface-3); color: var(--ink-2); }

/* File drop zone — the native input stays in the DOM and keeps working
   with JavaScript disabled (§17). */
.dropzone, .upload-zone, .file-zone {
  position: relative;
  display: block;
  border: 1.5px dashed var(--line-strong) !important;  /* !imp: overrides v4 */
  background: var(--surface-2) !important;             /* !imp: overrides v4 */
  border-radius: var(--r-lg) !important;               /* !imp: overrides v4 */
  padding: var(--s6) var(--s4) !important;             /* !imp: overrides v4 */
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dropzone:hover, .upload-zone:hover, .file-zone:hover,
.dropzone.is-over, .upload-zone.is-over, .file-zone.drag-over {
  border-color: var(--brand);
  background: var(--brand-tint) !important;            /* !imp: overrides v4 */
}
.dropzone input[type="file"], .upload-zone input[type="file"], .file-zone input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.dropzone__icon, .upload-zone__icon, .file-zone__icon {
  color: var(--muted-2);
  font-size: inherit !important;                       /* !imp: overrides v4 */
  opacity: 1 !important;                               /* !imp: overrides v4 */
  margin-bottom: var(--s2);
}
.dropzone__icon .ico, .upload-zone__icon .ico, .file-zone__icon .ico { width: 28px; height: 28px; }
.dropzone__title, .upload-zone__label, .file-zone__title {
  font-size: var(--fs-body) !important;                /* !imp: overrides v4 */
  font-weight: 650 !important;                         /* !imp: overrides v4 */
  color: var(--ink) !important;                        /* !imp: overrides v4 */
}
.dropzone__sub, .upload-zone__sub, .file-zone__sub {
  font-size: var(--fs-xs) !important;                  /* !imp: overrides v4 */
  color: var(--muted) !important;                      /* !imp: overrides v4 */
  margin-top: 4px;
}
.dropzone__note, .file-zone__qr-note {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s3);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.filelist { margin-top: var(--s3); display: flex; flex-direction: column; gap: 6px; }
.filelist__item, .file-item {
  display: flex; align-items: center; gap: var(--s2);
  padding: 7px var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.filelist__item .ico, .file-item__icon { color: var(--muted); flex: none; }
.filelist__name, .file-item__name { flex: 1; min-width: 0; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filelist__size, .file-item__size { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }

.copy-field { display: flex; gap: 6px; }
.copy-field input { direction: ltr; text-align: left; font-size: var(--fs-sm) !important; } /* !imp: overrides v4 */


/* =============================================================================
   10. CARDS
   ========================================================================== */
:where(.pro-card, .card, .sec, .table-card, .form-card, .summary-card, .domain-card,
       .standard-block, .ind-card, .notes-card, .pcard, .action-sec, .chart-card,
       .report-card, .wizard-card, .cardx, .panel, .table-panel, .hero-card,
       .score-card, .insight, .kpi, .action-panel, .stat-card, .files-sec) {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pro-card, .card, .sec, .table-card, .form-card, .pcard, .action-sec, .chart-card, .cardx {
  padding: var(--s5);
}
.sec__body, .form-card__body, .table-card__body, .ctx-card__body, .pcard-body, .action-sec__body {
  margin-top: var(--s4);
}
.card--flush { padding: 0 !important; }   /* !imp: overrides v4 padding on .card */
.card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-2);
}
.card__body { padding: var(--s5); }

.grid-2, .two-col, .chart-wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s5); }
.grid-3, .domains-grid, .reports-grid, .report-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s4); }
.grid-side { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr); gap: var(--s5); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--s5); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s3); }


/* =============================================================================
   11. KPI COMPONENTS
   ========================================================================== */
.kpi-grid, .kpi-strip, .summary-strip, .users-stats, .meta-grid, .insights, .kpis, .stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
}
.stat-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat-row--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.kpi-card, .summary-card, .mini-kpi, .rstat, .ustat, .hero-stat, .meta, .insight,
.kpi, .stat-tile, .stat-card, .sum-card, .statx {
  position: relative;
  padding: var(--s4) !important;                 /* !imp: overrides v4 */
  border-radius: var(--r-lg) !important;         /* !imp: overrides v4 */
  background: var(--surface) !important;         /* !imp: overrides v4 */
  border: 1px solid var(--line) !important;      /* !imp: overrides v4 */
  box-shadow: var(--shadow-xs) !important;       /* !imp: overrides v4 */
  overflow: hidden;
}
.kpi-card::after, .summary-card::after, .kpi::after, .stat-card::after { content: none !important; } /* !imp: overrides v4 decoration */

.kpi-card__icon, .summary-card__icon, .mini-kpi__icon, .rstat__icon, .ustat__icon,
.hero-stat__icon, .report-card__icon, .panel-icon, .stat-icon, .action-sec__icon {
  width: 34px !important;                        /* !imp: overrides v4 */
  height: 34px !important;                       /* !imp: overrides v4 */
  border-radius: var(--r-sm) !important;         /* !imp: overrides v4 */
  display: grid;
  place-items: center;
  background: var(--surface-3) !important;       /* !imp: overrides v4 */
  color: var(--muted) !important;                /* !imp: overrides v4 */
  font-size: inherit !important;                 /* !imp: overrides v4 */
  margin-bottom: var(--s3);
  flex: none;
}
.kpi-card__icon .ico, .summary-card__icon .ico, .stat-icon .ico,
.report-card__icon .ico, .panel-icon .ico, .action-sec__icon .ico { width: 19px; height: 19px; }

.kpi-card__label, .summary-card__label, .mini-kpi__lbl, .rstat__lbl, .ustat__lbl,
.hero-stat__lbl, .stat-label, .stat-tile__label, .sum-title,
.kpi > span, .insight > span, .meta > span {
  color: var(--muted) !important;                /* !imp: overrides v4 */
  font-size: var(--fs-xs) !important;            /* !imp: overrides v4 */
  font-weight: 600 !important;                   /* !imp: overrides v4 */
  margin-top: 0 !important;                      /* !imp: overrides v4 */
  line-height: 1.5;
  display: block;
}
.kpi-card__value, .summary-card__value, .mini-kpi__val, .rstat__val, .ustat__val,
.hero-stat__val, .stat-val, .stat-tile__value, .sum-val,
.kpi > strong, .insight > strong, .meta > strong {
  margin-top: 4px;
  color: var(--ink) !important;                  /* !imp: overrides v4 */
  font-size: var(--fs-num) !important;           /* !imp: overrides v4 */
  font-weight: 750 !important;                   /* !imp: overrides v4 */
  line-height: 1.15 !important;                  /* !imp: overrides v4 */
  display: block;
}
.sum-val small { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.kpi-card__sub, .summary-card__sub, .stat-tile__sub, .insight p, .kpi small {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--fs-xs) !important;            /* !imp: overrides v4 */
  font-weight: 400;
  line-height: 1.65 !important;                  /* !imp: overrides v4 */
  display: block;
}
/* KPI that also has to show its own state */
.stat-tile__delta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--s2);
  font-size: var(--fs-xs); font-weight: 600;
}
.stat-tile__delta.is-up   { color: var(--success); }
.stat-tile__delta.is-down { color: var(--danger); }
.stat-tile__delta.is-flat { color: var(--muted); }
.stat-tile--attention { border-color: var(--warning-line) !important; } /* !imp: overrides v4 */
.stat-tile--attention .stat-tile__value { color: var(--warning) !important; } /* !imp: overrides v4 */
.stat-tile--risk { border-color: var(--danger-line) !important; }       /* !imp: overrides v4 */
.stat-tile--risk .stat-tile__value { color: var(--danger) !important; } /* !imp: overrides v4 */
.stat-tile--good .stat-tile__value { color: var(--success) !important; }/* !imp: overrides v4 */

/* Readiness meter */
.hero-meter, .page-header__score, .score-ring {
  width: 132px !important;                        /* !imp: overrides v4 */
  height: 132px !important;                       /* !imp: overrides v4 */
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  box-shadow: none;
  flex: none;
}
.hero-meter__inner, .page-header__score-inner {
  width: 100px !important;                        /* !imp: overrides v4 */
  height: 100px !important;                       /* !imp: overrides v4 */
  border-radius: var(--r-pill);
  background: var(--surface);
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid var(--line);
}
.hero-meter__value, .page-header__score-val {
  display: block;
  color: var(--ink);
  font-size: 24px !important;                     /* !imp: overrides v4 */
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-meter__label, .page-header__score-lbl {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs) !important;             /* !imp: overrides v4 */
  font-weight: 500;
  margin-top: 4px;
}

/* Compact figure list used beside charts and inside cards */
.figure-list { display: grid; gap: var(--s3); }
.figure-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s3); align-items: center; }
.figure-row__label { font-size: var(--fs-sm); color: var(--text); font-weight: 500; min-width: 0; }
.figure-row__value { font-size: var(--fs-sm); color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Guided path steps */
.quick-path { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s3); }
.help-step, .rule {
  padding: var(--s4) !important;                  /* !imp: overrides v4 */
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: none;
}
/* Guidance steps are not data — they read as a flat sequence on the canvas,
   marked only by the accent rail. */
.path-step {
  padding: 2px 0 2px var(--s4) !important;        /* !imp: overrides v4 */
  padding-inline-start: var(--s4) !important;     /* !imp: overrides v4 */
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.path-step__num, .help-step__num {
  width: 28px; height: 28px; flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink-2);
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 700;
}
.path-step__title, .help-step h3 {
  margin: var(--s3) 0 0;
  color: var(--ink);
  font-size: var(--fs-h3) !important;             /* !imp: overrides v4 */
  font-weight: 700;
}
.help-step h3 { margin-top: 0; }
.path-step__text, .help-step p, .rule p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: var(--fs-sm) !important;             /* !imp: overrides v4 */
  font-weight: 400;
  line-height: 1.75 !important;                   /* !imp: overrides v4 */
}
.help-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s3); }
.help-step { display: flex; gap: var(--s3); align-items: flex-start; }
.rule b { display: block; color: var(--ink); margin-bottom: 5px; font-size: var(--fs-sm); }
.rules { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3); }


/* =============================================================================
   12. PROGRESS COMPONENTS
   ========================================================================== */
.progress, .kpi-card__progress, .domain-card__progress-bar, .domain-hero__progress-bar,
.ind-card__bar, .ctx-card__progress, .progress-track {
  height: 8px !important;                         /* !imp: overrides v4 */
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress__bar, .kpi-card__progress-fill, .domain-card__progress-fill, .domain-hero__progress-fill,
.ind-card__bar-fill, .ctx-card__progress-fill, .progress-fill, .bar {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--brand);
  transition: width var(--dur-slow) var(--ease);
}

/* Declarative meter: width from --progress-value, colour from --domain-color */
.progress-meter {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.progress-meter::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--progress-value, 0%);
  border-radius: var(--r-pill);
  background: var(--domain-color, var(--brand));
  transition: width var(--dur-slow) var(--ease);
}
.progress-meter--lg { height: 10px; }
.progress-line {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: var(--s2);
  align-items: baseline;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
}
.progress-line__label { color: var(--muted); font-weight: 500; }
.progress-line__value { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }


/* =============================================================================
   13. STATUS BADGES
   Colour is never the only signal — every badge carries a text label, and
   status badges also carry an icon (§12.2, §30).
   ========================================================================== */
.badge, .chip, .pill, .status-pill, .role-badge, .crumb-chip, .perm-badge, .ctx-chip,
.c-chip, .count-chip, .h-chip, .status, .str-pill, .type-chip, .files-badge,
.domain-badge, .panel-badge, .state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 10px !important;                   /* !imp: overrides v4 */
  border-radius: var(--r-pill) !important;        /* !imp: overrides v4 */
  background: var(--neutral-bg) !important;       /* !imp: overrides v4 */
  color: var(--neutral) !important;               /* !imp: overrides v4 */
  border: 1px solid var(--neutral-line) !important;/* !imp: overrides v4 */
  font-size: var(--fs-badge) !important;          /* !imp: overrides v4 */
  font-weight: 600 !important;                    /* !imp: overrides v4 */
  line-height: 1.5 !important;                    /* !imp: overrides v4 */
  white-space: nowrap;
  max-width: 100%;
}
.badge .ico, .status-pill .ico, .str-pill .ico, .role-badge .ico { width: 14px; height: 14px; flex: none; }

/* Success family: معتمد · مكتمل · منجز · نشط · مغطى */
.badge-green, .badge-success, .pill-covered, .s-approved, .str-strong,
.status.approved, .status.done, .status.strong, .okmsg,
.badge.active, .badge.success, .state-pill.green, .pill-on, .files-badge.has-files {
  background: var(--success-bg) !important;       /* !imp: overrides v4 */
  color: var(--success) !important;               /* !imp: overrides v4 */
  border-color: var(--success-line) !important;   /* !imp: overrides v4 */
}
/* Warning family: قيد المراجعة · قيد التنفيذ · يحتاج تعديلًا · متوسط */
.badge-amber, .badge-warning, .pill-partial, .s-review, .str-medium,
.status.in_review, .status.in_progress, .status.medium, .warning,
.badge.provisioning, .badge.warning, .state-pill.amber, .expiry.warn {
  background: var(--warning-bg) !important;       /* !imp: overrides v4 */
  color: var(--warning) !important;               /* !imp: overrides v4 */
  border-color: var(--warning-line) !important;   /* !imp: overrides v4 */
}
/* Danger family: مرفوض · متعثر · متأخر · موقوف · غير مغطى · ضعيف */
.badge-red, .badge-danger, .pill-not-covered, .s-rejected, .str-weak,
.status.rejected, .status.blocked, .status.weak, .errmsg,
.badge.failed, .badge.error, .badge.suspended, .badge.expired, .badge.cancelled,
.pill-off, .expiry.danger {
  background: var(--danger-bg) !important;        /* !imp: overrides v4 */
  color: var(--danger) !important;                /* !imp: overrides v4 */
  border-color: var(--danger-line) !important;    /* !imp: overrides v4 */
}
/* Neutral family: مسودة · مفتوح · مؤرشف · بدون */
.badge-neutral, .s-archived, .status.draft, .status.open, .status.none, .neutral, .badge.line {
  background: var(--neutral-bg) !important;       /* !imp: overrides v4 */
  color: var(--neutral) !important;               /* !imp: overrides v4 */
  border-color: var(--neutral-line) !important;   /* !imp: overrides v4 */
}
/* Info family */
.badge-blue, .badge-info, .badge-brand, .status.archived, .state-pill.blue, .badge.info {
  background: var(--info-bg) !important;          /* !imp: overrides v4 */
  color: var(--info) !important;                  /* !imp: overrides v4 */
  border-color: var(--info-line) !important;      /* !imp: overrides v4 */
}
/* Draft (violet) — distinguishes "not started yet" from "archived" */
.s-draft, .badge-violet {
  background: var(--violet-bg) !important;        /* !imp: overrides v4 */
  color: var(--violet) !important;                /* !imp: overrides v4 */
  border-color: var(--violet-line) !important;    /* !imp: overrides v4 */
}
/* Brand-tinted chip (codes, current context) */
.badge-brandtint, .ctx-chip.accent, .h-chip.accent, .chip-code, .ind-hero__code {
  background: var(--brand-tint) !important;       /* !imp: overrides v4 */
  color: var(--brand-ink) !important;             /* !imp: overrides v4 */
  border-color: var(--brand-line) !important;     /* !imp: overrides v4 */
}
/* Domain-role badges keep distinct, learnable hues */
.role-badge.lead      { background: var(--violet-bg) !important;  color: var(--violet) !important;  border-color: var(--violet-line) !important; }  /* !imp: overrides v4 */
.role-badge.collector { background: var(--success-bg) !important; color: var(--success) !important; border-color: var(--success-line) !important; } /* !imp: overrides v4 */
.role-badge.reviewer  { background: var(--warning-bg) !important; color: var(--warning) !important; border-color: var(--warning-line) !important; } /* !imp: overrides v4 */

.badge-dot { width: 8px; height: 8px; border-radius: var(--r-pill); flex: none; display: inline-block; }
.badge-lg { min-height: 30px; padding: 5px var(--s3) !important; font-size: var(--fs-sm) !important; } /* !imp: overrides v4 */


/* =============================================================================
   14. TABLES
   Horizontal scrolling is confined to the table container; the page itself
   never scrolls sideways (§26).
   ========================================================================== */
.table-wrap, .tbl-wrap, .tablewrap, .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: none;
  max-width: 100%;
}
.table, .tbl-wrap table, .tablex, .assign-table {
  width: 100%;
  border-collapse: separate !important;           /* !imp: overrides v4 */
  border-spacing: 0 !important;                   /* !imp: overrides v4 */
  min-width: 780px;
}
.table th, .table td,
.tbl-wrap table th, .tbl-wrap table td,
.tablex th, .tablex td,
.assign-table th, .assign-table td {
  padding: var(--s3) var(--s4) !important;        /* !imp: overrides v4 */
  border-bottom: 1px solid var(--line-2) !important; /* !imp: overrides v4 */
  vertical-align: middle;
  text-align: right;
  font-size: var(--fs-sm) !important;             /* !imp: overrides v4 */
  color: var(--text);
}
.table thead th, .tbl-wrap table thead th, .tablex thead th, .assign-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2) !important;        /* !imp: overrides v4 */
  color: var(--muted) !important;                 /* !imp: overrides v4 */
  font-size: var(--fs-th) !important;             /* !imp: overrides v4 */
  font-weight: 650 !important;                    /* !imp: overrides v4 */
  letter-spacing: .02em;
  white-space: nowrap;
  border-bottom: 1px solid var(--line) !important;/* !imp: overrides v4 */
}
.table tbody tr:hover, .tbl-wrap table tbody tr:hover,
.tablex tbody tr:hover, .assign-table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0 !important; } /* !imp: overrides v4 */

.cell-primary, .domain-row__name, .domain-card__name, .standard-block__title,
.ind-card__title, .file-name, .u-name, .gap-title, .school-title strong {
  font-weight: 650;
  color: var(--ink);
  line-height: 1.5;
  font-size: var(--fs-sm) !important;             /* !imp: overrides v4 */
}
.cell-secondary, .domain-row__meta, .muted-cell, .domain-meta, .u-email, .file-meta {
  color: var(--muted) !important;                 /* !imp: overrides v4 */
  font-size: var(--fs-xs) !important;             /* !imp: overrides v4 */
  font-weight: 400;
  line-height: 1.6 !important;                    /* !imp: overrides v4 */
  margin-top: 2px;
}
/* Long text stays readable: wraps over two lines instead of a misleading cut. */
.cell-clamp, .truncate {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal !important;                 /* !imp: overrides v4 .truncate */
  max-width: none !important;                     /* !imp: overrides v4 .truncate */
  text-overflow: clip;
}
.col-actions { width: 1%; white-space: nowrap; }
.col-actions .actions { justify-content: flex-start; flex-wrap: nowrap; }
.qr-cell img {
  width: 56px !important; height: 56px !important;/* !imp: overrides v4 */
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 3px;
}
.empty-row td, .empty {
  padding: var(--s7) var(--s4) !important;        /* !imp: overrides v4 */
  text-align: center;
  color: var(--muted) !important;                 /* !imp: overrides v4 */
  font-weight: 500 !important;                    /* !imp: overrides v4 */
}
.avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface-3);
  flex: none;
}
.usercell, .user-cell { display: flex; align-items: center; gap: var(--s3); min-width: 0; }


/* =============================================================================
   15. EVIDENCE COMPONENTS
   ========================================================================== */
/* Context strip: domain › standard › indicator, always above the work area */
.ctx-card, .ind-hero, .ev-hero, .hero {
  margin-bottom: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.ctx-card__bar, .ind-hero__bar, .ev-hero__bar, .hero-bar { height: 3px; width: 100%; }
.ctx-card__body, .ind-hero__body, .ev-hero__body, .hero-body {
  padding: var(--s5) var(--s5);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.ctx-card__chips, .ind-hero__meta, .ev-hero__chips, .hero-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--s3);
  flex-wrap: wrap;
}
.ctx-card__title, .ind-hero__title, .ev-hero__title {
  font-size: var(--fs-h1) !important;             /* !imp: overrides v4 */
  font-weight: 750 !important;                    /* !imp: overrides v4 */
  color: var(--ink) !important;                   /* !imp: overrides v4 */
  line-height: 1.45 !important;                   /* !imp: overrides v4 */
  margin: 0;
  overflow-wrap: anywhere;                        /* full indicator text, never cut */
}
.ctx-card__sub, .ind-hero__std {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 400;
  margin-top: 4px;
  line-height: 1.7;
}
.ev-hero__badges { display: flex; gap: 6px !important; flex-wrap: wrap; margin-top: var(--s3); align-items: center; } /* !imp: overrides v4 */
.ev-hero__right, .ind-hero__actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: flex-start; flex: none; }
.crumb-sep { color: var(--muted-2); font-size: var(--fs-xs); }

/* Evidence meta rows */
.ev-hero__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px !important; margin-top: var(--s4); } /* !imp: overrides v4 */
.ev-meta-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-sm) !important;             /* !imp: overrides v4 */
  padding: 7px var(--s3) !important;              /* !imp: overrides v4 */
  border-radius: var(--r-sm) !important;          /* !imp: overrides v4 */
  background: var(--surface-2) !important;        /* !imp: overrides v4 */
  border: 1px solid var(--line-2) !important;     /* !imp: overrides v4 */
  color: var(--text);
}
.ev-meta-row .ico { color: var(--muted-2); }
.ev-meta-row span { color: var(--muted); }
.ev-meta-row strong { color: var(--ink); font-weight: 650; }

/* Reviewer / author note */
.notes-card {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4) !important;        /* !imp: overrides v4 */
  border-radius: var(--r) !important;             /* !imp: overrides v4 */
  background: var(--warning-bg) !important;       /* !imp: overrides v4 */
  border: 1px solid var(--warning-line) !important; /* !imp: overrides v4 */
  margin-top: var(--s3);
}
.notes-card .ico, .notes-card__icon { color: var(--warning); flex: none; }
.notes-card__text {
  font-size: var(--fs-sm) !important;             /* !imp: overrides v4 */
  line-height: 1.75 !important;                   /* !imp: overrides v4 */
  font-weight: 400 !important;                    /* !imp: overrides v4 */
  color: var(--ink-2);
}
.notes-card__text strong { color: var(--ink); font-weight: 650; }
.notes-card--info { background: var(--info-bg) !important; border-color: var(--info-line) !important; } /* !imp: overrides v4 */
.notes-card--info .ico { color: var(--info); }

/* Two action panels: upload vs. review — visually separated (§17) */
.action-grid, .action-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
.action-sec { padding: 0 !important; }            /* !imp: overrides v4 */
.action-sec__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-2);
}
.action-sec__icon { margin-bottom: 0; }
.action-sec__body { padding: var(--s5); margin-top: 0; }
.action-sec--review { border-color: var(--brand-line); }
.review-decisions {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  padding-top: var(--s4);
  margin-top: var(--s4);
  border-top: 1px solid var(--line-2);
}
.review-decisions .btn { flex: 1 1 160px; }

.no-perm {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.no-perm .ico { color: var(--muted-2); flex: none; }

/* File cards */
.files-sec { padding: 0; }
.files-sec__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-2);
}
.files-sec__title { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-h2); font-weight: 700; color: var(--ink); }
.files-sec__title .ico { color: var(--muted); }
.file-grid, .files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s3);
  padding: var(--s5);
}
.file-card {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4) !important;                  /* !imp: overrides v4 */
  border-radius: var(--r-lg) !important;          /* !imp: overrides v4 */
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
  transition: border-color var(--dur) var(--ease);
}
.file-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.file-card__top { display: flex; align-items: flex-start; gap: var(--s3); min-width: 0; }
.file-icon {
  width: 36px !important; height: 36px !important;/* !imp: overrides v4 */
  border-radius: var(--r-sm) !important;          /* !imp: overrides v4 */
  background: var(--surface-3);
  display: grid; place-items: center;
  color: var(--muted);
  font-size: inherit !important;                  /* !imp: overrides v4 */
  flex: none;
}
.file-card__body { min-width: 0; }
.file-card__name { display: flex; align-items: flex-start; gap: 6px; font-weight: 650; color: var(--ink); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.file-card__name .ico { color: var(--muted); flex: none; margin-top: 2px; }
.file-card__meta { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.file-card__qr { display: grid; place-items: center; padding: var(--s2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r); }
.file-card__qr img { width: 96px; height: 96px; }
.file-card__no-qr { font-size: var(--fs-xs); color: var(--muted-2); text-align: center; line-height: 1.5; padding: var(--s5) 0; }
.file-card__footer { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line-2); }
.files-empty { padding: var(--s7); text-align: center; }

/* Domain / indicator cards */
.domain-card, .ind-card, .report-card {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5) !important;                  /* !imp: overrides v4 */
  border-radius: var(--r-lg) !important;          /* !imp: overrides v4 */
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.domain-card:hover, .ind-card:hover, .report-card:hover {
  transform: none;
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.domain-card__bar { height: 3px; margin: calc(var(--s5) * -1) calc(var(--s5) * -1) 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.domain-card__stats, .stats-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.domain-stat, .mini-stat {
  flex: 1; min-width: 84px;
  padding: var(--s3) !important;                  /* !imp: overrides v4 */
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface-2);
  text-align: center;
}
.domain-stat__val, .mini-stat__value {
  display: block; color: var(--ink);
  font-size: var(--fs-h1) !important;             /* !imp: overrides v4 */
  font-weight: 750; line-height: 1.1;
}
.domain-stat__lbl, .mini-stat__label {
  display: block; color: var(--muted);
  font-size: var(--fs-xs) !important;             /* !imp: overrides v4 */
  font-weight: 500; margin-top: 4px;
}
.domain-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line-2); }
.domain-card__name { font-size: var(--fs-h3) !important; line-height: 1.5; }  /* !imp: overrides v4 */

.domain-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: var(--s3); align-items: center;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
a.domain-row:hover { border-color: var(--line-strong); background: var(--surface-2); }
.domain-row + .domain-row { margin-top: var(--s2); }
.domain-row__pct { font-size: var(--fs-h2) !important; color: var(--ink) !important; font-weight: 750; font-variant-numeric: tabular-nums; } /* !imp: overrides v4 */

/* Standard accordion */
.standard-block { padding: 0 !important; }        /* !imp: overrides v4 */
.standard-block__head {
  width: 100%;
  padding: var(--s4) var(--s5) !important;        /* !imp: overrides v4 */
  background: var(--surface-2);
  border: 0;
  border-bottom: 1px solid var(--line-2);
  display: flex; justify-content: space-between; gap: var(--s3); align-items: center;
  cursor: pointer;
  text-align: right;
  font-family: var(--font);
  transition: background var(--dur) var(--ease);
}
.standard-block__head:hover { background: var(--surface-3); }
.standard-block__head .ico-caret { color: var(--muted); transition: transform var(--dur) var(--ease); }
.standard-block.collapsed .ico-caret { transform: rotate(-90deg); }
.standard-block__title { margin: 0; font-size: var(--fs-h3) !important; }  /* !imp: overrides v4 */
.standard-block__meta { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.standard-block__body { padding: var(--s4); display: grid; gap: var(--s3); }
.standard-block.collapsed .standard-block__body { display: none; }

.ind-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.ind-card__title { font-size: var(--fs-h3) !important; margin: var(--s2) 0 0 !important; line-height: 1.6; overflow-wrap: anywhere; } /* !imp: overrides v4 */
.ind-card__meta { color: var(--muted); font-size: var(--fs-xs) !important; font-weight: 400; line-height: 1.7 !important; } /* !imp: overrides v4 */
.ind-card__facts { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s2); }
.ind-card__fact { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.ind-card__fact .ico { width: 14px; height: 14px; color: var(--muted-2); }
.ind-card__fact b { color: var(--ink-2); font-weight: 650; }


/* =============================================================================
   16. TASK COMPONENTS
   ========================================================================== */
.task-progress { display: grid; gap: 6px; min-width: 118px; }
.task-progress__top { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-xs); }
.task-progress__value { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.task-due { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text); white-space: nowrap; }
.task-due .ico { color: var(--muted-2); width: 14px; height: 14px; }
.task-due.is-overdue { color: var(--danger); font-weight: 650; }
.task-due.is-overdue .ico { color: var(--danger); }
.task-due.is-soon { color: var(--warning); font-weight: 650; }
.task-due.is-soon .ico { color: var(--warning); }

.timeline { display: flex; flex-direction: column; gap: var(--s3); }
.timeline__item {
  position: relative;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}
.timeline__head { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.timeline__body { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-2); white-space: pre-wrap; line-height: 1.8; }


/* =============================================================================
   17. TEAM COMPONENTS
   ========================================================================== */
.perm-list { display: flex; flex-wrap: wrap; gap: 6px; }
.role-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.role-help__item {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}
.role-help__name { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.role-help__name .ico { color: var(--muted); }
.role-help__text { margin: 5px 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.75; }

/* Member table: roles form stays compact and scannable */
.rolesform { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rolesform .check { min-height: 32px; padding: 3px 9px; font-size: var(--fs-xs); }
.rolesform .check input { width: 15px; height: 15px; }

/* Mobile card fallback for the member list — no data is dropped (§20) */
.record-list { display: none; flex-direction: column; gap: var(--s3); }
.record {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--s4);
  box-shadow: var(--shadow-xs);
}
.record__head { display: flex; align-items: center; gap: var(--s3); justify-content: space-between; flex-wrap: wrap; }
.record__row { display: flex; justify-content: space-between; gap: var(--s3); padding: 7px 0; border-top: 1px solid var(--line-2); font-size: var(--fs-sm); }
.record__row dt { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; margin: 0; }
.record__row dd { margin: 0; color: var(--ink-2); text-align: left; min-width: 0; overflow-wrap: anywhere; }
.record__actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }


/* =============================================================================
   18. ASSIGNMENT COMPONENTS
   ========================================================================== */
.assign-wrap { max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* !imp: overrides v4 */
.assign-layout { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr); gap: var(--s5); align-items: start; }
.panel { overflow: visible; }
.panel-head { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-2); background: var(--surface-2); display: flex; align-items: center; gap: var(--s3); }
.panel-body { padding: var(--s5); }
.panel-icon { margin-bottom: 0; }

/* Numbered assignment journey */
.steps { display: flex; flex-direction: column; gap: 0; counter-reset: step; }
.step { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: var(--s3); position: relative; padding-bottom: var(--s4); }
.step:last-child { padding-bottom: 0; }
.step::before {
  counter-increment: step;
  content: counter(step);
  width: 28px; height: 28px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-2);
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 700;
  border: 1px solid var(--line);
}
.step::after {
  content: "";
  position: absolute;
  inset-inline-start: 13px;
  top: 30px; bottom: 4px;
  width: 1px;
  background: var(--line);
}
.step:last-child::after { display: none; }
.step__title { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.step__body { min-width: 0; }

/* Role selector — accessible radios, not click-only labels */
.role-pills { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.role-pill {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
  display: flex; align-items: center; gap: var(--s3);
  cursor: pointer;
  color: var(--ink-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  min-height: var(--tap);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.role-pill:hover { transform: none; background: var(--surface-3); border-color: var(--line-strong); }
.role-pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.role-pill__text { display: grid; min-width: 0; }
.role-pill__text small { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.role-pill .ico { color: var(--muted); flex: none; }
.role-pill:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand); }
.role-pill:has(input:checked) .ico { color: var(--brand-ink); }
.role-pill:has(input:focus-visible) { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
/* Legacy JS-selected states kept working */
.role-pill.selected-lead      { border-color: var(--violet-line);  background: var(--violet-bg);  color: var(--violet); }
.role-pill.selected-collector { border-color: var(--success-line); background: var(--success-bg); color: var(--success); }
.role-pill.selected-reviewer  { border-color: var(--warning-line); background: var(--warning-bg); color: var(--warning); }

.note-box {
  margin-top: var(--s4);
  border: 1px solid var(--info-line);
  background: var(--info-bg);
  color: var(--info);
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.8;
}
.table-panel { overflow: hidden; }
.table-head { padding: var(--s4) var(--s5) !important; border-bottom: 1px solid var(--line-2); background: var(--surface-2); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } /* !imp: overrides v4 */
.table-title { font-size: var(--fs-h2) !important; font-weight: 700; color: var(--ink); }  /* !imp: overrides v4 */
.toolbar input, .toolbar select { min-height: var(--h-sm); max-width: 240px; }
.domain-dot { width: 9px; height: 9px; border-radius: var(--r-pill); flex: none; }
.stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s3) !important; margin: 0 0 var(--s5) !important; } /* !imp: overrides v4 */


/* =============================================================================
   19. REPORTS
   ========================================================================== */
.report-card { position: relative; }
.report-card__title { font-weight: 700; color: var(--ink); font-size: var(--fs-h3) !important; } /* !imp: overrides v4 */
.report-card__text { font-size: var(--fs-sm) !important; color: var(--muted); font-weight: 400; line-height: 1.75; } /* !imp: overrides v4 */
.report-card__facts { display: grid; gap: 6px; margin-top: var(--s2); }
.report-card__fact { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.report-card__fact .ico { width: 14px; height: 14px; color: var(--muted-2); flex: none; margin-top: 2px; }
.report-card__fact b { color: var(--ink-2); font-weight: 650; }
.report-card__cta {
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--line-2);
  color: var(--brand-ink);
  font-size: var(--fs-sm);
  font-weight: 650;
  display: inline-flex; align-items: center; gap: 6px;
}
.report-filter { display: flex; gap: var(--s2); align-items: flex-end; flex-wrap: wrap; }
.report-filter select { max-width: 320px; }
.report-mini-stats { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.report-mini-stats span {
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  padding: 4px 9px;
  border-radius: var(--r-pill);
}
.report-row-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
.domain-card__progress-header { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s2); }
.domain-card__progress-header strong { color: var(--ink); font-weight: 700; }
.domain-card__dot { width: 9px; height: 9px; border-radius: var(--r-pill); display: inline-block; margin-inline-end: 7px; }


/* =============================================================================
   20. OWNER PORTAL
   Same design language, deliberately distinct chrome (dark rail) so the
   platform owner can never confuse it with a school workspace (§11.6).
   ========================================================================== */
.owner-body { background: var(--bg); }
.owner-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; }
.owner-rail {
  position: sticky; top: 0; height: 100vh;
  background: var(--surface-inv);
  color: #E7EDF7;
  padding: var(--s5) var(--s4);
  display: flex; flex-direction: column; gap: var(--s5);
  overflow-y: auto;
}
.owner-rail__brand { display: flex; align-items: center; gap: var(--s3); }
.owner-rail__mark {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center;
  font-weight: 750; color: #fff;
}
.owner-rail__name { font-size: var(--fs-h3); font-weight: 700; color: #fff; line-height: 1.3; }
.owner-rail__tag  { font-size: var(--fs-xs); color: #9FB3D0; margin-top: 2px; }
.owner-rail__section { font-size: 11px; letter-spacing: .05em; color: #7C90AE; font-weight: 700; padding: 0 var(--s3) var(--s1); }
.owner-nav { display: flex; flex-direction: column; gap: 2px; }
.owner-nav a {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  color: #C3D2E6;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.owner-nav a .ico { color: #8CA3C2; }
.owner-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.owner-nav a.active, .owner-nav a[aria-current="page"] { background: rgba(255,255,255,.12); color: #fff; }
.owner-nav a.active .ico { color: #fff; }
.owner-nav a.danger { color: #FCA5A5; }
.owner-nav a.danger .ico { color: #FCA5A5; }
.owner-rail__foot { margin-top: auto; font-size: var(--fs-xs); color: #7C90AE; line-height: 1.7; border-top: 1px solid rgba(255,255,255,.10); padding-top: var(--s4); }
.owner-main { min-width: 0; display: flex; flex-direction: column; }
.owner-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: var(--topbar);
  padding: var(--s3) var(--s6);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.owner-content { padding: var(--s6); max-width: 1500px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s5); }
.owner-login-page { min-height: 100vh; display: grid; place-items: center; padding: var(--s6); background: var(--bg); }
.owner-login-card {
  width: min(430px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--s7);
}
.owner-login-card__mark {
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: var(--surface-inv);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 750;
  margin-bottom: var(--s4);
}
/* Legacy owner.css shapes realigned to the v5 language */
.owner-shell .card, .owner-content .card { padding: var(--s5); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.school-title small { display: block; color: var(--muted); margin-top: 4px; direction: ltr; text-align: right; font-size: var(--fs-xs); }
.expiry { font-size: var(--fs-sm); }
.modal { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: none; align-items: center; justify-content: center; padding: var(--s6); z-index: 100; }
.modal.open { display: flex; }
.modal-card { background: var(--surface); border-radius: var(--r-xl); width: min(860px, 100%); max-height: 92vh; overflow: auto; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; justify-content: space-between; gap: var(--s3); align-items: center; padding: var(--s5); border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: var(--fs-h2); }
.modal-body { padding: var(--s5); }
.close { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); width: 38px; height: 38px; cursor: pointer; color: var(--ink-2); display: grid; place-items: center; }
.close:hover { background: var(--surface-3); }
.note { padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); color: var(--text); line-height: 1.8; font-size: var(--fs-sm); }


/* =============================================================================
   21. ALERTS AND EMPTY STATES
   ========================================================================== */
.alert, .alertx, .notice, .okmsg, .errmsg, .alert-error {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4) !important;        /* !imp: overrides v4 */
  border-radius: var(--r) !important;             /* !imp: overrides v4 */
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-sm) !important;             /* !imp: overrides v4 */
  font-weight: 400 !important;                    /* !imp: overrides v4 */
  line-height: 1.75 !important;                   /* !imp: overrides v4 */
  margin: 0 !important;                           /* !imp: overrides v4 */
}
.alert .ico, .alertx .ico, .alert__icon, .alert-error__icon { flex: none; margin-top: 2px; }
.alert strong { font-weight: 700; color: inherit; }
.alert-success, .alertx.ok, .okmsg {
  background: var(--success-bg) !important;       /* !imp: overrides v4 */
  color: var(--success) !important;               /* !imp: overrides v4 */
  border-color: var(--success-line) !important;   /* !imp: overrides v4 */
}
.alert-warning, .notice {
  background: var(--warning-bg) !important;       /* !imp: overrides v4 */
  color: var(--warning) !important;               /* !imp: overrides v4 */
  border-color: var(--warning-line) !important;   /* !imp: overrides v4 */
}
.alert-danger, .alert-error, .alertx.err, .errmsg {
  background: var(--danger-bg) !important;        /* !imp: overrides v4 */
  color: var(--danger) !important;                /* !imp: overrides v4 */
  border-color: var(--danger-line) !important;    /* !imp: overrides v4 */
}
.alert-info {
  background: var(--info-bg) !important;          /* !imp: overrides v4 */
  color: var(--info) !important;                  /* !imp: overrides v4 */
  border-color: var(--info-line) !important;      /* !imp: overrides v4 */
}
.alert ul { margin: 5px 0 0; padding-inline-start: 18px; }

/* Empty state — icon, title, one line of guidance, and the real next action */
.empty-state, .files-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s2);
  padding: var(--s8) var(--s5) !important;        /* !imp: overrides v4 */
}
.empty-state__icon, .files-empty__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--surface-3);
  color: var(--muted-2);
  font-size: inherit !important;                  /* !imp: overrides v4 */
  margin-bottom: var(--s2);
}
.empty-state__icon .ico, .files-empty__icon .ico { width: 24px; height: 24px; }
.empty-state__title, .files-empty__title {
  font-size: var(--fs-h3);
  font-weight: 700 !important;                    /* !imp: overrides v4 */
  color: var(--ink);
  margin-top: 0 !important;                       /* !imp: overrides v4 */
}
.empty-state__sub, .files-empty__sub {
  color: var(--muted) !important;                 /* !imp: overrides v4 */
  font-weight: 400 !important;                    /* !imp: overrides v4 */
  font-size: var(--fs-sm);
  max-width: 46ch;
  line-height: 1.75;
  margin-top: 0 !important;                       /* !imp: overrides v4 */
}
.empty-state__actions { margin-top: var(--s3); display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; }
td > .empty-state { padding: var(--s7) var(--s4) !important; } /* !imp: overrides v4 */


/* =============================================================================
   22. UTILITIES
   ========================================================================== */
.u-flex      { display: flex; }
.u-between   { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.u-wrap      { flex-wrap: wrap; }
.u-gap-1     { gap: var(--s1); }
.u-gap-2     { gap: var(--s2); }
.u-gap-3     { gap: var(--s3); }
.u-gap-4     { gap: var(--s4); }
.u-mt-2      { margin-top: var(--s2); }
.u-mt-3      { margin-top: var(--s3); }
.u-mt-4      { margin-top: var(--s4); }
.u-mt-5      { margin-top: var(--s5); }
.u-grow      { flex: 1 1 auto; min-width: 0; }
.u-none      { flex: none; }
.u-right     { text-align: right; }
.u-left      { text-align: left; }
.u-center    { text-align: center; }
.u-nowrap    { white-space: nowrap; }
.u-break     { overflow-wrap: anywhere; }
.u-end       { margin-inline-start: auto; }
.u-divider   { height: 1px; background: var(--line-2); margin: var(--s4) 0; }

/* Screen-reader-only text — used for the accessible name of icon-only controls */
.sr-only {
  position: absolute !important;                  /* !imp: must win over layout rules */
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.hide-sm, .hide-mobile { }


/* =============================================================================
   22b. SIGN-IN PAGE (public/login.php)
   -----------------------------------------------------------------------------
   The form is the primary object on this screen. It sits in a fixed, generous
   column on the reading side (the right, in RTL); the product story fills the
   remaining space and is deliberately quieter — no invented statistics, no
   landing-page hero inside a working product.
   ========================================================================== */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 500px) minmax(0, 1fr);
  align-items: stretch;
  background: var(--canvas);
}

/* ── Form column ─────────────────────────────────────────────────────────── */
.auth-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s8) var(--s7);
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
  min-width: 0;
}
.auth-card { width: 100%; max-width: 380px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s5); }

.auth-brandline { display: flex; align-items: center; gap: var(--s3); }
.auth-brandline__mark {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-brand);
  display: grid; place-items: center;
  font-weight: 700; font-size: 17px;
  letter-spacing: -.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.auth-brandline__name { font-size: var(--fs-h3); font-weight: 650; color: var(--ink); line-height: 1.25; letter-spacing: var(--ls-title); }
.auth-brandline__tag  {
  margin-top: 4px;
  font-size: var(--fs-eyebrow); font-weight: 650;
  letter-spacing: var(--ls-eyebrow);
  color: var(--muted);
}

.auth-card__head { display: flex; flex-direction: column; gap: var(--s2); }
.auth-card__title { margin: 0; font-size: var(--fs-h1); font-weight: 700; color: var(--ink); letter-spacing: var(--ls-title); line-height: 1.3; }
.auth-card__sub   { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.75; }

/* School identity: the accent-rail motif, so the sign-in screen already looks
   like the product the user is about to enter. */
.auth-tenant {
  position: relative;
  padding-inline-start: var(--s4);
  padding-block: 2px;
}
.auth-tenant::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 2px; bottom: 2px;
  width: 3px; border-radius: var(--r-pill);
  background: var(--brand);
}
.auth-tenant__label { font-size: var(--fs-eyebrow); font-weight: 650; letter-spacing: var(--ls-eyebrow); color: var(--muted); }
.auth-tenant__name  { margin-top: 4px; font-size: var(--fs-body); font-weight: 650; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.auth-tenant__meta  { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }
.auth-tenant__meta .ltr { display: inline-block; }

.auth-form { display: grid; gap: var(--s4); }
.auth-note {
  display: flex; gap: var(--s2); align-items: flex-start;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.7;
}
.auth-note .ico { color: var(--muted-2); flex: none; margin-top: 2px; }
.auth-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  padding-top: var(--s4);
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.auth-foot a { color: var(--brand-ink); font-weight: 650; }

/* ── Story column ────────────────────────────────────────────────────────── */
.auth-aside {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  padding: var(--s8) var(--s8);
  justify-content: center;
  background: var(--canvas);
  min-width: 0;
}
.auth-aside__inner { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: var(--s6); }
.auth-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-eyebrow); font-weight: 650;
  letter-spacing: var(--ls-eyebrow);
  color: var(--brand-ink);
}
.auth-eyebrow .ico { width: 15px; height: 15px; }
.auth-headline {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: var(--ls-title);
  max-width: 24ch;
}
.auth-lead {
  margin: 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.9;
}

/* The four capability points reuse the accent rail rather than four more boxes */
.auth-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); margin: 0; padding: 0; list-style: none; }
.auth-point { position: relative; padding-inline-start: var(--s4); }
.auth-point::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 4px; bottom: 4px;
  width: 2px; border-radius: var(--r-pill);
  background: var(--line-strong);
}
.auth-point__head { display: flex; align-items: center; gap: 6px; }
.auth-point__head .ico { width: 16px; height: 16px; color: var(--muted); flex: none; }
.auth-point__title { font-size: var(--fs-sm); font-weight: 650; color: var(--ink); line-height: 1.4; }
.auth-point__text  { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.8; }

.auth-store {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.auth-store__title { font-size: var(--fs-sm); font-weight: 650; color: var(--ink); }
.auth-store__text  { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; max-width: 52ch; }

/* =============================================================================
   22c. MOBILE DRAWER
   ========================================================================== */
.mobile-drawer { display: none; }
.mobile-drawer__panel { background: var(--surface); }
.mobile-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4);
  border-bottom: 1px solid var(--line-2);
}
.mobile-drawer__close {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r);
  color: var(--ink-2);
  cursor: pointer;
  margin: 0;
  padding: 0;
  font-size: 0;
}
.mobile-drawer__close .ico { width: 20px; height: 20px; font-size: initial; }
.mobile-drawer__body { padding: var(--s3); display: flex; flex-direction: column; gap: 2px; }
.mobile-brand-card { margin-bottom: 0; }


/* =============================================================================
   22d. PRODUCT SIGNATURE COMPONENTS
   -----------------------------------------------------------------------------
   These are the components that give the platform a recognisable face. The
   shared motif is the ACCENT RAIL: a 3px bar on the inline-start edge of an
   element, carrying either the brand colour, a domain colour, or a semantic
   colour. It replaces "another bordered white box" as the way importance and
   ownership are expressed, and it is the reason a screenshot of any screen
   reads as the same product.

   The second motif is the SEGMENTED TRACK: progress is drawn as a measured
   track rather than a plain bar, because every number in this product is a
   count of indicators — a discrete thing, not a continuous one.
   ========================================================================== */

/* ── Accent rail ──────────────────────────────────────────────────────────── */
.rail {
  position: relative;
  padding-inline-start: var(--s5);
}
.rail::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--rail-color, var(--brand));
}
.rail--soft::before { opacity: .55; }

/* ── Section label: a quiet eyebrow + hairline, used instead of a card head
      when a group needs a name but not a container ───────────────────────── */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.section-label__text {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: var(--ls-eyebrow);
  color: var(--muted);          /* sits on the canvas, needs the darker tone */
  white-space: nowrap;
}
.section-label__rule { flex: 1 1 auto; height: 1px; background: var(--line-2); }
.section-label__action { flex: none; }

/* ── Panel: the flat surface used for most grouping. One border, no shadow,
      generous but measured padding. ──────────────────────────────────────── */
.panel-flat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.panel-flat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line-2);
}
.panel-flat__title { font-size: var(--fs-h2); font-weight: 650; color: var(--ink); letter-spacing: var(--ls-title); }
.panel-flat__sub   { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.65; }
.panel-flat__body  { padding: var(--s5); }
.panel-flat__body--tight { padding: var(--s3) var(--s5) var(--s5); }
.panel-flat__foot {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line-2);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ── Readiness command area ───────────────────────────────────────────────
      One integrated region, not seven cards: status, the headline number,
      what it means, the supporting counts, and the single next action.     */
.readiness {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s7);
  align-items: center;
  padding: var(--s6) var(--s6) var(--s6) var(--s6);
  background:
    linear-gradient(180deg, var(--brand-tint) 0%, rgba(255,255,255,0) 190px),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.readiness__main { min-width: 0; }
.readiness__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: var(--ls-eyebrow);
  color: var(--brand-ink);
}
.readiness__eyebrow .ico { width: 15px; height: 15px; }
.readiness__figure {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-top: var(--s3);
  flex-wrap: wrap;
}
.readiness__pct {
  font-size: 44px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: var(--ls-num);
  font-variant-numeric: tabular-nums;
}
.readiness__of {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 500;
}
.readiness__of b { color: var(--ink-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.readiness__note {
  margin: var(--s3) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.8;
  max-width: 62ch;
}
.readiness__track { margin-top: var(--s5); }
.readiness__stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--s5);
  border-top: 1px solid var(--line-2);
  padding-top: var(--s4);
  gap: 0;
}
.readiness__stat {
  padding-inline: var(--s5);
  border-inline-start: 1px solid var(--line-2);
  min-width: 0;
}
.readiness__stat:first-child { padding-inline-start: 0; border-inline-start: 0; }
.readiness__stat-label { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.readiness__stat-value {
  display: block; margin-top: 4px;
  font-size: var(--fs-num-sm); font-weight: 700; color: var(--ink);
  letter-spacing: var(--ls-num); font-variant-numeric: tabular-nums;
}
.readiness__stat--warn .readiness__stat-value { color: var(--warning); }
.readiness__stat--ok   .readiness__stat-value { color: var(--success); }
.readiness__gauge { flex: none; display: grid; place-items: center; }

/* ── Gauge: a real SVG ring, thin and calm, with a composed centre ──────── */
.gauge { display: block; }
.gauge__track { stroke: var(--surface-3); }
.gauge__value { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset var(--dur-slow) var(--ease); }
.gauge__pct   { fill: var(--ink); font-size: 26px; font-weight: 700; letter-spacing: var(--ls-num); }
.gauge__cap   { fill: var(--muted); font-size: var(--fs-eyebrow); font-weight: 600; }
.gauge-wrap { display: grid; place-items: center; gap: var(--s3); }
.gauge-legend { display: flex; gap: var(--s4); flex-wrap: wrap; justify-content: center; }
.gauge-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.gauge-legend__dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* ── Next-best-action: an action component, not another card ────────────── */
.nba {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s5);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-lg);
  background: var(--brand-tint);
}
.nba__mark {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
}
.nba__mark .ico { width: 20px; height: 20px; }
.nba__label {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: var(--ls-eyebrow);
  color: var(--brand-ink);
}
.nba__title {
  margin-top: 4px;
  font-size: var(--fs-h3);
  font-weight: 650;
  color: var(--ink);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.nba__why { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; }
.nba__cta { margin-top: var(--s4); }

/* ── Metric strip: one panel divided by hairlines. Replaces four identical
      floating cards, and lets the lead metric carry more weight. ─────────── */
.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.metric {
  position: relative;
  padding: var(--s5);
  border-inline-start: 1px solid var(--line-2);
  min-width: 0;
}
.metric:first-child { border-inline-start: 0; }
.metric__head { display: flex; align-items: center; gap: 6px; }
.metric__head .ico { width: 16px; height: 16px; color: var(--muted-2); flex: none; }
.metric__label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.metric__value {
  display: block;
  margin-top: var(--s3);
  font-size: var(--fs-num-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: var(--ls-num);
  font-variant-numeric: tabular-nums;
}
.metric__value small { font-size: var(--fs-sm); font-weight: 500; color: var(--muted-2); letter-spacing: 0; }
.metric__foot { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.metric__bar { margin-top: var(--s3); }
/* The lead metric of the strip */
.metric--lead { background: var(--surface-2); }
.metric--lead .metric__value { font-size: var(--fs-num); color: var(--ink); }
.metric--lead::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand);
}
.metric--warn .metric__value   { color: var(--warning); }
.metric--danger .metric__value { color: var(--danger); }
.metric--ok .metric__value     { color: var(--success); }

/* ── Segmented track: progress drawn as a measured scale ────────────────── */
.track {
  position: relative;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.track::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--progress-value, 0%);
  border-radius: var(--r-pill);
  background: var(--domain-color, var(--brand));
  transition: width var(--dur-slow) var(--ease);
}
.track--ticks::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: repeating-linear-gradient(
    to left,
    transparent 0,
    transparent calc(10% - 1px),
    rgba(255, 255, 255, .85) calc(10% - 1px),
    rgba(255, 255, 255, .85) 10%
  );
  pointer-events: none;
}
.track--lg { height: 10px; }
.track-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: 7px;
}
.track-head__label { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.track-head__value { font-size: var(--fs-sm); color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ── Domain row: the identity of a محور inside the system ───────────────── */
.domain-list { display: flex; flex-direction: column; }
.domain-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5) var(--s4) var(--s4);
  border-top: 1px solid var(--line-2);
  transition: background var(--dur) var(--ease);
}
.domain-item:first-child { border-top: 0; }
.domain-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 10px; bottom: 10px;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--domain-color, var(--brand));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
a.domain-item:hover { background: var(--surface-2); }
a.domain-item:hover::before { opacity: 1; }
.domain-item__body { min-width: 0; }
.domain-item__top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.domain-item__code {
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.domain-item__name {
  font-size: var(--fs-h3);
  font-weight: 650;
  color: var(--ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.domain-item__counts { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.domain-item__counts b { color: var(--ink-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.domain-item__meter { width: 168px; flex: none; }
.domain-item__pct {
  min-width: 62px;
  text-align: left;
  font-size: var(--fs-num-sm);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--ls-num);
  font-variant-numeric: tabular-nums;
}
.domain-item__chev { color: var(--muted-2); flex: none; }

/* ── Priority list: gaps that need a human decision ─────────────────────── */
.priority-list { display: flex; flex-direction: column; }
.priority-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: center;
  padding: var(--s4) var(--s5) var(--s4) var(--s4);
  border-top: 1px solid var(--line-2);
}
.priority-item:first-child { border-top: 0; }
.priority-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 10px; bottom: 10px;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--sev-color, var(--line-strong));
}
.priority-item--high   { --sev-color: var(--danger); }
.priority-item--medium { --sev-color: var(--warning); }
.priority-item--low    { --sev-color: var(--line-strong); }
.priority-item__rank {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.priority-item--high .priority-item__rank   { background: var(--danger-bg);  color: var(--danger); }
.priority-item--medium .priority-item__rank { background: var(--warning-bg); color: var(--warning); }
.priority-item__body { min-width: 0; }
.priority-item__code { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.priority-item__title {
  margin-top: 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.priority-item__meta { margin-top: 4px; display: flex; gap: var(--s3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); }
.priority-item__meta span { display: inline-flex; align-items: center; gap: 6px; }
.priority-item__meta .ico { width: 14px; height: 14px; color: var(--muted-2); }
.priority-item__action { flex: none; }

/* ── Activity row: recent work, readable at a glance ────────────────────── */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line-2);
  transition: background var(--dur) var(--ease);
}
.activity-item:first-child { border-top: 0; }
.activity-item:hover { background: var(--surface-2); }
.activity-item__title {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.activity-item__meta { margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }

/* ── Status distribution: shares of a whole, as one bar plus a key ──────── */
.dist { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3); }
.dist__seg { height: 100%; min-width: 2px; transition: width var(--dur-slow) var(--ease); }
.dist__seg--ok    { background: var(--success); }
.dist__seg--warn  { background: var(--warning); }
.dist__seg--draft { background: var(--violet); }
.dist__seg--bad   { background: var(--danger); }
.dist-key { display: grid; gap: var(--s2); margin-top: var(--s4); }
.dist-key__row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: var(--s3);
  align-items: center;
  font-size: var(--fs-sm);
}
.dist-key__dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dist-key__label { color: var(--text); }
.dist-key__value { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ── Trust cues on the sign-in screen ───────────────────────────────────── */
.trust-row { display: flex; gap: var(--s5); flex-wrap: wrap; }
.trust { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.trust .ico { width: 15px; height: 15px; color: var(--muted-2); }

/* =============================================================================
   23. RESPONSIVE RULES
   Breakpoints target the sizes in §29:
   1920 / 1440 / 1366 / 1280 / 1024 / 768 / 390 / 360
   ========================================================================== */

/* Very wide screens: keep the reading measure sane, don't stretch forever */
@media (min-width: 1700px) {
  :root { --content-max: 1520px; --gutter: 32px; }
}

/* 1366 × 768 and similar laptops — the most common school device */
@media (max-width: 1440px) {
  :root { --sidebar: 264px; --gutter: 20px; }
}

@media (max-width: 1280px) {
  .kpi-grid, .kpi-strip, .summary-strip, .users-stats, .meta-grid, .insights, .kpis, .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat-row--5, .stat-row--6, .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* !imp: overrides v4 */
  .grid-2, .two-col, .chart-wrap, .panel-grid, .action-grid, .action-panel-grid,
  .assign-layout, .grid-side { grid-template-columns: 1fr; }

  /* The metric strip keeps its divided-panel look but wraps to two rows. */
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(odd) { border-inline-start: 0; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .quick-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .domains-grid, .reports-grid, .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet & below: the rail collapses into a drawer */
@media (max-width: 1024px) {
  .app-shell { display: block; }
  .app-sidebar { display: none; }
  .app-topbar { padding: var(--s3) var(--s4); }
  .content-wrap { padding: var(--s5) var(--s4) var(--s8); }
  .menu-btn { display: inline-flex; }
  .hide-sm { display: none !important; }         /* !imp: overrides v4 */
  .user-pill__body { display: none; }
  .user-pill { min-width: auto; }

  .mobile-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 120;
    overflow: hidden;   /* clips the off-canvas panel: no page-level overflow */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .mobile-drawer.open { opacity: 1; visibility: visible; }
  .mobile-drawer__overlay { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
  .mobile-drawer__panel {
    position: absolute;
    top: 0;
    inset-inline-start: 0;          /* RTL: the right edge, matching the sidebar */
    height: 100%;
    width: min(88vw, 330px);
    background: var(--surface);
    padding: 0;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);            /* parked off-canvas past the right edge */
    transition: transform var(--dur-slow) var(--ease);
    display: flex;
    flex-direction: column;
  }
  .mobile-drawer.open .mobile-drawer__panel { transform: translateX(0); }
}

/* The readiness area stacks before the gauge starts squeezing the text */
@media (max-width: 900px) {
  .readiness {
    grid-template-columns: 1fr;
    gap: var(--s5);
    padding: var(--s5);
    background: var(--surface);
  }
  .readiness__gauge { justify-self: center; }
  .readiness__pct { font-size: 38px; }
  .readiness__stats { gap: var(--s3) 0; }
  .readiness__stat { flex: 1 1 40%; padding-inline: var(--s4); }
  .readiness__stat:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .domain-item { grid-template-columns: minmax(0, 1fr) auto; }
  .domain-item__meter { display: none; }   /* the % stays; the bar is redundant here */
}

/* Small tablets / large phones */
@media (max-width: 768px) {
  .pagehead { grid-template-columns: 1fr; gap: var(--s4); }
  .pagehead__actions { width: 100%; }
  .page-hero, .page-header, .report-hero { grid-template-columns: 1fr; padding: var(--s5) !important; } /* !imp: overrides v4 */
  .hero-meter, .page-header__score, .score-ring { width: 112px !important; height: 112px !important; }  /* !imp: overrides v4 */
  .hero-meter__inner, .page-header__score-inner { width: 84px !important; height: 84px !important; }    /* !imp: overrides v4 */
  .form-grid { grid-template-columns: 1fr; }
  .rules, .role-help { grid-template-columns: 1fr; }
  .auth-page { grid-template-columns: 1fr; }
  /* Sign-in form comes first on small screens (§14) */
  .auth-main  { order: 1; padding: var(--s6) var(--s4) var(--s6); border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .auth-aside { order: 2; padding: var(--s6) var(--s4) var(--s8); }
  .auth-points { grid-template-columns: 1fr; gap: var(--s4); }
  .auth-headline { font-size: 22px; max-width: none; }
  .owner-shell { grid-template-columns: 1fr; }
  .owner-rail { position: relative; height: auto; }
  .owner-content { padding: var(--s5) var(--s4); }
}

/* Phones: 390×844 and 360×800 */
@media (max-width: 640px) {
  :root { --fs-display: 24px; --fs-h1: 20px; --fs-num: 25px; --gutter: 16px; }
  .kpi-grid, .kpi-strip, .summary-strip, .users-stats, .grid-3, .domains-grid,
  .reports-grid, .report-grid, .form-grid, .quick-path, .meta-grid, .insights,
  .kpis, .stat-row, .file-grid, .files-grid, .help-steps {
    grid-template-columns: 1fr !important;       /* !imp: overrides v4 */
  }
  .stats-grid, .stat-row--5, .stat-row--6 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } /* !imp: overrides v4 */

  /* One metric per row: the numbers are the point, they must stay readable. */
  .metric-strip { grid-template-columns: 1fr; }
  .metric { border-inline-start: 0; border-top: 1px solid var(--line-2); }
  .metric:first-child { border-top: 0; }
  .metric--lead::before { inset-inline: 0 auto; width: 3px; }

  .readiness__pct { font-size: 34px; }
  .readiness__stat { flex: 1 1 100%; padding-inline: 0; border-inline-start: 0; }
  .readiness__stat + .readiness__stat { border-top: 1px solid var(--line-2); padding-top: var(--s3); }

  /* The gap list becomes a stacked block so the CTA keeps a full-width target */
  .priority-item { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--s3); }
  .priority-item__action { grid-column: 1 / -1; }
  .priority-item__action .btn { width: 100%; }

  .activity-item { grid-template-columns: minmax(0, 1fr) auto; }
  .activity-item .domain-item__chev { display: none; }

  .domain-item { grid-template-columns: minmax(0, 1fr) auto; }
  .domain-item__pct { min-width: 48px; }

  .auth-points { grid-template-columns: 1fr; }
  .trust-row { gap: var(--s3); }
  .steps .step { grid-template-columns: 26px minmax(0, 1fr); }
  .page-heading__title { font-size: var(--fs-h3); }
  .page-heading__eyebrow { display: none; }
  .hide-mobile { display: none !important; }     /* !imp: overrides v4 */
  .domain-row { grid-template-columns: 1fr; }
  .table, .tbl-wrap table, .tablex, .assign-table { min-width: 640px; }
  .file-grid, .files-grid { padding: var(--s4); }
  .ctx-card__body, .ind-hero__body, .ev-hero__body, .hero-body { padding: var(--s4); }
  .pro-card, .card, .sec, .table-card, .form-card, .pcard, .cardx { padding: var(--s4); }
  .form-sticky { margin: var(--s4) calc(var(--s4) * -1) calc(var(--s4) * -1); padding: var(--s3) var(--s4); }
  .form-sticky .btn { flex: 1 1 auto; }
  .form-sticky__hint { display: none; }
  .hero-actions .btn, .pagehead__actions .btn { flex: 1 1 auto; }
  .review-decisions .btn { flex: 1 1 100%; }
  .field--sm, .field--md, .field--date { max-width: none; }

  /* Member/assignment tables become record cards so nothing is hidden (§20, §26) */
  .responsive-cards .table-wrap { display: none; }
  .responsive-cards .record-list { display: flex; }
}

@media (max-width: 380px) {
  .content-wrap { padding-inline: var(--s3); }
  .toolbar input, .toolbar select { max-width: none; width: 100%; }
}


/* =============================================================================
   24. PRINT RULES
   ========================================================================== */
@media print {
  :root { --content-max: none; }
  body.etec-v4, body.etec-v5, .app-shell, .app-main, .owner-shell { background: #fff !important; } /* !imp: overrides v4 */
  .app-sidebar, .app-topbar, .mobile-drawer, .skip-link, .owner-rail, .owner-topbar,
  .hero-actions, .pagehead__actions, .filters, .toolbar, .report-actions,
  .form-sticky, .no-print, .side-foot {
    display: none !important;                    /* !imp: overrides v4 */
  }
  .app-shell, .owner-shell { display: block; }
  .content-wrap, .owner-content { padding: 0; max-width: none; gap: 12px; }

  /* Printed reports must still identify the school and the report */
  .print-head { display: block !important; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #0F172A; }
  .print-head__school { font-size: 15pt; font-weight: 700; color: #0F172A; }
  .print-head__meta   { font-size: 9pt; color: #475569; margin-top: 4px; }

  .pagehead { border-bottom: 1px solid #94A3B8; padding-bottom: 8px; }
  .pagehead__title, .hero-title, .page-header__title { font-size: 15pt !important; }  /* !imp: overrides v4 */
  .pagehead__sub, .hero-sub, .page-header__sub { font-size: 9pt !important; }         /* !imp: overrides v4 */

  .page-hero, .page-header, .pro-card, .card, .sec, .table-card, .form-card,
  .kpi-card, .summary-card, .stat-tile, .domain-card, .report-card, .standard-block,
  .file-card, .panel, .table-panel, .action-sec {
    box-shadow: none !important;                 /* !imp: overrides v4 */
    border-color: #CBD5E1 !important;            /* !imp: overrides v4 */
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .table-wrap, .tbl-wrap { overflow: visible !important; border-color: #CBD5E1; } /* !imp: overrides v4 */
  .table, .tbl-wrap table { min-width: 0 !important; font-size: 9pt; }             /* !imp: overrides v4 */
  .table thead th { position: static !important; background: #F1F5F9 !important; color: #334155 !important; } /* !imp: overrides v4 */
  .table thead { display: table-header-group; }
  .table tr { break-inside: avoid; page-break-inside: avoid; }
  .badge, .status, .status-pill { border: 1px solid #94A3B8 !important; background: #fff !important; color: #0F172A !important; } /* !imp: overrides v4 */
  a[href]::after { content: ""; }
  .standard-block.collapsed .standard-block__body { display: grid !important; }   /* !imp: print must show all data */
}
.print-head { display: none; }


/* =============================================================================
   25. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;        /* !imp: user preference wins */
    animation-iteration-count: 1 !important;      /* !imp: user preference wins */
    transition-duration: .001ms !important;       /* !imp: user preference wins */
    scroll-behavior: auto !important;             /* !imp: user preference wins */
  }
  .mobile-drawer__panel { transition: none !important; }  /* !imp: user preference wins */
}

/* Forced-colors (Windows high contrast): keep structure readable */
@media (forced-colors: active) {
  .btn, .badge, .card, .pro-card, .table-wrap, .side-link, .user-pill { border: 1px solid ButtonBorder; }
  .side-link.active { forced-color-adjust: none; }
}