/* ═══════════════════════════════════════════════════════════════════════════
   Construction Progress Portal — app.css
   Release v14.1.0 · Microsoft Fluent 2 design language

   CONSOLIDATED STYLESHEET. Replaces portal.css, admin.css and report.css.
   Delete all three after deploying this file.

   Layers, in order:
     1  Design tokens (Fluent 2 ramps, light + dark)
     2  Reset and base
     3  Accessibility primitives  (WCAG 2.2 AA)
     4  Bootstrap component re-skin
     5  Portal components
     6  Admin components
     7  Print / PDF report
     8  Legacy inline-style shims

   Fluent 2 reference values are used verbatim: the neutral and communication
   blue ramps, the six elevation levels, the corner-radius scale, the type ramp
   and the motion curves. Typography is Segoe UI Variable with a graceful
   fallback chain, so it renders natively on Windows and sensibly elsewhere.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1 · DESIGN TOKENS
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Communication blue ramp */
  --brand-10:#061724; --brand-20:#082338; --brand-30:#0a2e4a; --brand-40:#0c3b5e;
  --brand-50:#0e4775; --brand-60:#0f548c; --brand-70:#115ea3; --brand-80:#0f6cbd;
  --brand-90:#2886de; --brand-100:#479ef5; --brand-110:#62abf5; --brand-120:#77b7f7;
  --brand-130:#96c6fa; --brand-140:#b4d6fa; --brand-150:#cfe4fa; --brand-160:#eff6fc;

  /* Semantic brand */
  --colorBrandBackground:        var(--brand-80);
  --colorBrandBackgroundHover:   var(--brand-70);
  --colorBrandBackgroundPressed: var(--brand-40);
  --colorBrandBackgroundSelected:var(--brand-60);
  --colorBrandForeground1:       var(--brand-80);
  --colorBrandForeground2:       var(--brand-70);
  --colorBrandStroke1:           var(--brand-80);
  --colorBrandBackground2:       var(--brand-160);
  --colorBrandBackground2Hover:  var(--brand-150);

  /* Neutrals — light theme */
  --colorNeutralBackground1:        #ffffff;
  --colorNeutralBackground1Hover:   #f5f5f5;
  --colorNeutralBackground1Pressed: #e0e0e0;
  --colorNeutralBackground2:        #fafafa;
  --colorNeutralBackground3:        #f5f5f5;
  --colorNeutralBackground4:        #f0f0f0;
  --colorNeutralBackground5:        #ebebeb;
  --colorNeutralBackground6:        #e6e6e6;
  --colorNeutralBackgroundInverted: #292929;
  --colorSubtleBackgroundHover:     #f5f5f5;
  --colorSubtleBackgroundPressed:   #e0e0e0;

  --colorNeutralForeground1:         #242424;
  --colorNeutralForeground2:         #424242;
  --colorNeutralForeground3:         #616161;
  --colorNeutralForeground4:         #707070;
  --colorNeutralForegroundDisabled:  #bdbdbd;
  --colorNeutralForegroundInverted:  #ffffff;
  --colorNeutralForegroundOnBrand:   #ffffff;

  --colorNeutralStroke1:           #d1d1d1;
  --colorNeutralStroke2:           #e0e0e0;
  --colorNeutralStroke3:           #f0f0f0;
  --colorNeutralStrokeAccessible:  #616161;
  --colorTransparentStroke:        transparent;

  /* Status — Fluent shared colours, all AA against their own backgrounds */
  --colorPaletteRedForeground1:    #b10e1c;
  --colorPaletteRedBackground1:    #fdf3f4;
  --colorPaletteRedBorder1:        #f1bbbc;
  --colorPaletteGreenForeground1:  #0e700e;
  --colorPaletteGreenBackground1:  #f1faf1;
  --colorPaletteGreenBorder1:      #9fd89f;
  --colorPaletteYellowForeground1: #835b00;
  --colorPaletteYellowBackground1: #fff9f5;
  --colorPaletteYellowBorder1:     #ffd394;
  --colorPaletteBlueBackground1:   #eff6fc;

  /* Elevation */
  --shadow2:  0 1px 2px rgba(0,0,0,.14),  0 0 2px rgba(0,0,0,.12);
  --shadow4:  0 2px 4px rgba(0,0,0,.14),  0 0 2px rgba(0,0,0,.12);
  --shadow8:  0 4px 8px rgba(0,0,0,.14),  0 0 2px rgba(0,0,0,.12);
  --shadow16: 0 8px 16px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --shadow28: 0 14px 28px rgba(0,0,0,.24),0 0 8px rgba(0,0,0,.20);
  --shadow64: 0 32px 64px rgba(0,0,0,.24),0 0 8px rgba(0,0,0,.20);

  /* Corner radius */
  --borderRadiusNone:0; --borderRadiusSmall:2px; --borderRadiusMedium:4px;
  --borderRadiusLarge:6px; --borderRadiusXLarge:8px; --borderRadiusCircular:10000px;

  /* Spacing — 4px grid */
  --spacingXXS:2px;  --spacingXS:4px;   --spacingSNudge:6px; --spacingS:8px;
  --spacingMNudge:10px; --spacingM:12px; --spacingL:16px;     --spacingXL:20px;
  --spacingXXL:24px; --spacingXXXL:32px;

  /* Typography */
  --fontFamilyBase: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI",
                    -apple-system, BlinkMacSystemFont, system-ui, Roboto,
                    "Helvetica Neue", sans-serif;
  --fontFamilyDisplay: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI",
                    -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --fontFamilyMonospace: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  --fontSizeBase100:10px; --fontSizeBase200:12px; --fontSizeBase300:14px;
  --fontSizeBase400:16px; --fontSizeBase500:20px; --fontSizeBase600:24px;
  --fontSizeHero700:28px; --fontSizeHero800:32px; --fontSizeHero900:40px;

  --lineHeightBase100:14px; --lineHeightBase200:16px; --lineHeightBase300:20px;
  --lineHeightBase400:22px; --lineHeightBase500:26px; --lineHeightBase600:32px;
  --lineHeightHero700:36px; --lineHeightHero800:40px; --lineHeightHero900:52px;

  --fontWeightRegular:400; --fontWeightMedium:500;
  --fontWeightSemibold:600; --fontWeightBold:700;

  /* Motion */
  --durationUltraFast:50ms;  --durationFaster:100ms; --durationFast:150ms;
  --durationNormal:200ms;    --durationSlow:300ms;   --durationSlower:400ms;
  --curveAccelerateMid:cubic-bezier(.9,.1,1,.2);
  --curveDecelerateMid:cubic-bezier(.1,.9,.2,1);
  --curveEasyEase:cubic-bezier(.33,0,.67,1);

  /* Focus — Fluent's double stroke */
  --strokeWidthThin:1px; --strokeWidthThick:2px;
  --colorStrokeFocus1:#ffffff; --colorStrokeFocus2:#000000;

  --navHeight:48px;
  color-scheme: light dark;
}

/* Dark theme — token swap only. Applied by OS preference or data-theme. */
@media (prefers-color-scheme: dark) {
  /* Only when theme is auto/unset or explicitly dark — never override light/reserve */
  :root:not([data-theme="light"]):not([data-theme="reserve"]) {
    --colorBrandBackground:        var(--brand-70);
    --colorBrandBackgroundHover:   var(--brand-80);
    --colorBrandBackgroundPressed: var(--brand-60);
    --colorBrandForeground1:       var(--brand-100);
    --colorBrandForeground2:       var(--brand-110);
    --colorBrandStroke1:           var(--brand-100);
    --colorBrandBackground2:       var(--brand-20);
    --colorBrandBackground2Hover:  var(--brand-30);

    --colorNeutralBackground1:        #292929;
    --colorNeutralBackground1Hover:   #3d3d3d;
    --colorNeutralBackground1Pressed: #1f1f1f;
    --colorNeutralBackground2:        #242424;
    --colorNeutralBackground3:        #1f1f1f;
    --colorNeutralBackground4:        #1a1a1a;
    --colorNeutralBackground5:        #141414;
    --colorNeutralBackground6:        #0f0f0f;
    --colorNeutralBackgroundInverted: #ffffff;
    --colorSubtleBackgroundHover:     #383838;
    --colorSubtleBackgroundPressed:   #2e2e2e;

    --colorNeutralForeground1:        #ffffff;
    --colorNeutralForeground2:        #e0e0e0;
    --colorNeutralForeground3:        #c7c7c7;
    --colorNeutralForeground4:        #999999;
    --colorNeutralForegroundDisabled: #5c5c5c;
    --colorNeutralForegroundInverted: #242424;

    --colorNeutralStroke1:          #666666;
    --colorNeutralStroke2:          #4d4d4d;
    --colorNeutralStroke3:          #3d3d3d;
    --colorNeutralStrokeAccessible: #adadad;

    --colorPaletteRedForeground1:    #ff9ea0;
    --colorPaletteRedBackground1:    #3b1b1c;
    --colorPaletteRedBorder1:        #6e2b2c;
    --colorPaletteGreenForeground1:  #9fd89f;
    --colorPaletteGreenBackground1:  #10290f;
    --colorPaletteGreenBorder1:      #2c5c2c;
    --colorPaletteYellowForeground1: #ffd394;
    --colorPaletteYellowBackground1: #3b2a10;
    --colorPaletteYellowBorder1:     #6b4e1a;
    --colorPaletteBlueBackground1:   var(--brand-20);

    --colorStrokeFocus1:#000000; --colorStrokeFocus2:#ffffff;

    --shadow2:  0 1px 2px rgba(0,0,0,.28), 0 0 2px rgba(0,0,0,.24);
    --shadow4:  0 2px 4px rgba(0,0,0,.28), 0 0 2px rgba(0,0,0,.24);
    --shadow8:  0 4px 8px rgba(0,0,0,.28), 0 0 2px rgba(0,0,0,.24);
    --shadow16: 0 8px 16px rgba(0,0,0,.28),0 0 2px rgba(0,0,0,.24);
    --shadow28: 0 14px 28px rgba(0,0,0,.4), 0 0 8px rgba(0,0,0,.34);
    --shadow64: 0 32px 64px rgba(0,0,0,.4), 0 0 8px rgba(0,0,0,.34);
  }
}
:root[data-theme="dark"] {
  --colorNeutralBackground1:#292929; --colorNeutralBackground2:#242424;
  --colorNeutralBackground3:#1f1f1f; --colorNeutralBackground4:#1a1a1a;
  --colorNeutralForeground1:#ffffff; --colorNeutralForeground2:#e0e0e0;
  --colorNeutralForeground3:#c7c7c7; --colorNeutralStroke1:#666666;
  --colorNeutralStroke2:#4d4d4d; --colorNeutralStrokeAccessible:#adadad;
  --colorBrandForeground1:var(--brand-100); --colorStrokeFocus2:#ffffff;
}

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

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

body {
  margin: 0;
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  font-weight: var(--fontWeightRegular);
  color: var(--colorNeutralForeground1);
  background: var(--colorNeutralBackground3);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fontFamilyDisplay);
  font-weight: var(--fontWeightSemibold);
  color: var(--colorNeutralForeground1);
  margin: 0 0 var(--spacingS);
}
h1 { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); }
h2 { font-size: var(--fontSizeBase600); line-height: var(--lineHeightBase600); }
h3 { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); }
h4, h5, h6 { font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); }

p { margin: 0 0 var(--spacingM); }

a { color: var(--colorBrandForeground1); text-decoration: none; }
a:hover { color: var(--colorBrandForeground2); text-decoration: underline; }

code, .font-monospace { font-family: var(--fontFamilyMonospace); font-size: .92em; }

hr {
  border: 0; border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  margin: var(--spacingL) 0; opacity: 1;
}

img { max-width: 100%; }

/* ───────────────────────────────────────────────────────────────────────────
   3 · ACCESSIBILITY PRIMITIVES — WCAG 2.2 AA
   ─────────────────────────────────────────────────────────────────────────── */

/* 2.4.7 Focus Visible + 1.4.11 Non-text Contrast.
   Fluent's double stroke stays visible on any background: an inner stroke in
   the theme's focus colour and an outer stroke in its inverse. */
:focus { outline: none; }
:focus-visible {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: var(--strokeWidthThin);
  box-shadow: 0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus1);
  border-radius: var(--borderRadiusMedium);
}
/* Keyboard users only — never suppress focus for them. */
.js-focus-visible :focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* 2.4.1 Bypass Blocks */
.skip-link {
  position: absolute; left: var(--spacingS); top: -100px; z-index: 2000;
  background: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand);
  padding: var(--spacingS) var(--spacingL); border-radius: var(--borderRadiusMedium);
  font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase300);
  transition: top var(--durationFast) var(--curveDecelerateMid);
}
.skip-link:focus { top: var(--spacingS); color: var(--colorNeutralForegroundOnBrand); text-decoration: none; }

/* 1.4.13 Content on Hover or Focus / screen-reader-only text */
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 2.5.8 Target Size (Minimum) — 24x24 CSS px floor for all pointer targets */
.btn, .nav-link, button, [role="button"], .form-check-input,
.tree-tower, .tree-category, .tree-master-btn, .vid-pick, .page-btn {
  min-width: 24px; min-height: 24px;
}

/* 2.3.3 Animation from Interactions + respecting reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 1.4.12 Text Spacing — tolerate user overrides without clipping */
p, li, .progress-description { overflow-wrap: break-word; }

/* Forced-colors / Windows High Contrast */
@media (forced-colors: active) {
  .card-fluent, .update-card, .stat-card, .btn { border: 1px solid CanvasText; }
  :focus-visible { outline: 2px solid Highlight; }
}

/* ───────────────────────────────────────────────────────────────────────────
   4 · BOOTSTRAP COMPONENT RE-SKIN
   The markup keeps Bootstrap's class names; these rules give them Fluent's
   appearance, so the visual language is Fluent without a markup rewrite.
   ─────────────────────────────────────────────────────────────────────────── */

/* Buttons */
.btn {
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  font-weight: var(--fontWeightSemibold);
  border-radius: var(--borderRadiusMedium);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  padding: var(--spacingSNudge) var(--spacingM);
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  transition: background var(--durationFaster) var(--curveEasyEase),
              border-color var(--durationFaster) var(--curveEasyEase);
  box-shadow: none;
}
.btn:hover { background: var(--colorNeutralBackground1Hover); color: var(--colorNeutralForeground1); border-color: var(--colorNeutralStroke1); }
.btn:active { background: var(--colorNeutralBackground1Pressed); }
.btn-sm { padding: var(--spacingXS) var(--spacingS); font-size: var(--fontSizeBase200); }

.btn-primary, .btn-magenta, .btn-brand {
  background: var(--colorBrandBackground);
  border-color: var(--colorBrandBackground);
  color: var(--colorNeutralForegroundOnBrand);
}
.btn-primary:hover, .btn-magenta:hover, .btn-brand:hover {
  background: var(--colorBrandBackgroundHover);
  border-color: var(--colorBrandBackgroundHover);
  color: var(--colorNeutralForegroundOnBrand);
}
.btn-primary:active, .btn-magenta:active, .btn-brand:active {
  background: var(--colorBrandBackgroundPressed); border-color: var(--colorBrandBackgroundPressed);
}
.btn-light, .btn-outline-secondary { background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); }
.btn-outline-danger { background: transparent; border-color: var(--colorPaletteRedBorder1); color: var(--colorPaletteRedForeground1); }
.btn-outline-danger:hover { background: var(--colorPaletteRedBackground1); border-color: var(--colorPaletteRedForeground1); color: var(--colorPaletteRedForeground1); }
.btn-outline-success { background: transparent; border-color: var(--colorPaletteGreenBorder1); color: var(--colorPaletteGreenForeground1); }
.btn-outline-success:hover { background: var(--colorPaletteGreenBackground1); color: var(--colorPaletteGreenForeground1); }
.btn.text-danger, .btn .text-danger { color: var(--colorPaletteRedForeground1) !important; }
.btn.text-primary, .btn .text-primary { color: var(--colorBrandForeground1) !important; }

.btn-close {
  border-radius: var(--borderRadiusMedium); opacity: 1;
  min-width: 24px; min-height: 24px;
  filter: none;
}
.btn-close-white { filter: invert(1) grayscale(1) brightness(2); }

/* Form controls */
.form-control, .form-select {
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  color: var(--colorNeutralForeground1);
  background: var(--colorNeutralBackground1);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);
  border-radius: var(--borderRadiusMedium);
  padding: var(--spacingSNudge) var(--spacingM);
  transition: border-color var(--durationFast) var(--curveEasyEase);
}
.form-control:focus, .form-select:focus {
  border-color: var(--colorNeutralStroke1);
  border-bottom: var(--strokeWidthThick) solid var(--colorBrandStroke1);
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  box-shadow: none;
}
.form-control::placeholder { color: var(--colorNeutralForeground4); opacity: 1; }
.form-label {
  font-size: var(--fontSizeBase200); font-weight: var(--fontWeightSemibold);
  color: var(--colorNeutralForeground2); text-transform: none; letter-spacing: 0;
  margin-bottom: var(--spacingXS);
}
.form-check-input {
  width: 18px; height: 18px;
  border: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);
  border-radius: var(--borderRadiusSmall);
  background-color: var(--colorNeutralBackground1);
}
.form-check-input:checked { background-color: var(--colorBrandBackground); border-color: var(--colorBrandBackground); }
.form-check-input:focus { box-shadow: none; }
.input-group-text {
  background: var(--colorNeutralBackground3); border-color: var(--colorNeutralStroke1);
  color: var(--colorNeutralForeground2); border-radius: var(--borderRadiusMedium);
}

/* Cards and surfaces */
.card, .card-lux, .card-fluent {
  background: var(--colorNeutralBackground1);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusXLarge);
  box-shadow: var(--shadow2);
}

/* Tables */
.table { color: var(--colorNeutralForeground1); border-color: var(--colorNeutralStroke2); margin-bottom: 0; }
.table > :not(caption) > * > * { background: transparent; color: inherit; }
.table-custom th {
  background: var(--colorNeutralBackground2);
  font-size: var(--fontSizeBase200); font-weight: var(--fontWeightSemibold);
  letter-spacing: 0; text-transform: none;
  color: var(--colorNeutralForeground2);
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  padding: var(--spacingS) var(--spacingM);
}
.table-custom td { padding: var(--spacingMNudge) var(--spacingM); font-size: var(--fontSizeBase300); vertical-align: middle; }
.table-custom tbody tr { border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke3); }
.table-custom tbody tr:hover, .table-hover > tbody > tr:hover > * { background: var(--colorSubtleBackgroundHover); color: inherit; }
.table-custom tbody tr:last-child { border-bottom: none; }

/* Badges */
.badge {
  font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightSemibold); letter-spacing: 0;
  border-radius: var(--borderRadiusCircular); padding: var(--spacingXXS) var(--spacingS);
}
.badge.bg-info    { background: var(--colorPaletteBlueBackground1)  !important; color: var(--colorBrandForeground1) !important; }
.badge.bg-success { background: var(--colorPaletteGreenBackground1) !important; color: var(--colorPaletteGreenForeground1) !important; }
.badge.bg-warning { background: var(--colorPaletteYellowBackground1)!important; color: var(--colorPaletteYellowForeground1) !important; }
.badge.bg-primary { background: var(--colorBrandBackground) !important; color: var(--colorNeutralForegroundOnBrand) !important; }
.badge.bg-secondary, .badge.bg-dark { background: var(--colorNeutralBackground6) !important; color: var(--colorNeutralForeground2) !important; }

/* Alerts → Fluent MessageBar */
.alert, .sys-alert {
  border-radius: var(--borderRadiusMedium);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  border-left: var(--spacingXS) solid var(--colorBrandBackground);
  background: var(--colorPaletteBlueBackground1);
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase300); padding: var(--spacingM) var(--spacingL);
}
.alert-danger  { background: var(--colorPaletteRedBackground1);    border-left-color: var(--colorPaletteRedForeground1);    color: var(--colorNeutralForeground1); }
.alert-warning { background: var(--colorPaletteYellowBackground1); border-left-color: var(--colorPaletteYellowForeground1); color: var(--colorNeutralForeground1); }
.alert-info    { background: var(--colorPaletteBlueBackground1);   border-left-color: var(--colorBrandBackground); }

/* Dialog → Fluent Dialog */
.modal-content {
  background: var(--colorNeutralBackground1);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusXLarge) !important;
  box-shadow: var(--shadow64);
  color: var(--colorNeutralForeground1);
}
.modal-header, .modal-footer { border-color: var(--colorNeutralStroke2) !important; }
.modal-title { font-family: var(--fontFamilyDisplay) !important; font-weight: var(--fontWeightSemibold); }
.modal-backdrop.show { opacity: .4; }

/* Offcanvas */
.offcanvas { background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); }
.offcanvas-header { border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); background: var(--colorNeutralBackground2) !important; }

/* List group */
.list-group-item { background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); border-color: var(--colorNeutralStroke3); }

/* Bootstrap utility neutralisation — keep text legible in both themes */
.text-muted   { color: var(--colorNeutralForeground3) !important; }
.text-dark    { color: var(--colorNeutralForeground1) !important; }
.text-secondary { color: var(--colorNeutralForeground2) !important; }
.bg-white, .bg-light { background: var(--colorNeutralBackground1) !important; }
.border       { border-color: var(--colorNeutralStroke2) !important; }
.border-bottom, .border-top { border-color: var(--colorNeutralStroke2) !important; }
.shadow-sm    { box-shadow: var(--shadow2) !important; }
.rounded      { border-radius: var(--borderRadiusMedium) !important; }

/* ───────────────────────────────────────────────────────────────────────────
   5 · PORTAL COMPONENTS (public dashboard)
   ─────────────────────────────────────────────────────────────────────────── */
body { padding-top: var(--navHeight); }

.site-nav {
  height: var(--navHeight);
  background: var(--colorNeutralBackground1);
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  box-shadow: var(--shadow2);
}
.site-nav img { max-height: 28px; width: auto; object-fit: contain; }
.site-nav-title {
  font-family: var(--fontFamilyDisplay);
  font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400);
  font-weight: var(--fontWeightSemibold);
  margin: 0; color: var(--colorNeutralForeground1);
}

/* Navigation pane — Fluent Nav */
@media (min-width: 992px) {
  #sidebarMenu {
    position: sticky !important;
    top: calc(var(--navHeight) + var(--spacingL));
    max-height: calc(100vh - var(--navHeight) - var(--spacingXXXL));
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusXLarge);
    box-shadow: var(--shadow2);
    overflow-y: auto !important; overflow-x: hidden !important;
    background: var(--colorNeutralBackground1);
  }
}
@media (max-width: 991.98px) {
  #sidebarMenu { width: 320px; border: none !important; border-radius: 0 !important; }
}
#sidebarMenu::-webkit-scrollbar { width: 6px; }
#sidebarMenu::-webkit-scrollbar-thumb { background: var(--colorNeutralStroke1); border-radius: var(--borderRadiusCircular); }

.tree-master-btn {
  display: flex; align-items: center; gap: var(--spacingS);
  padding: var(--spacingM) var(--spacingL);
  background: var(--colorNeutralBackground1);
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke3);
  font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase300);
  color: var(--colorNeutralForeground1); cursor: pointer; text-align: left;
  transition: background var(--durationFaster) var(--curveEasyEase);
}
.tree-master-btn:hover { background: var(--colorSubtleBackgroundHover); }
.tree-master-btn.active { background: var(--colorBrandBackground2); color: var(--colorBrandForeground1); }
.tree-master-btn i { width: 16px; text-align: center; }

.tree-category {
  padding: var(--spacingS) var(--spacingL);
  background: var(--colorNeutralBackground2);
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke3);
  font-size: var(--fontSizeBase200); font-weight: var(--fontWeightSemibold);
  color: var(--colorNeutralForeground2); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  text-transform: none; letter-spacing: 0;
  transition: background var(--durationFaster) var(--curveEasyEase);
}
.tree-category:hover { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground1); }
.tree-category .chevron { transition: transform var(--durationNormal) var(--curveEasyEase); font-size: var(--fontSizeBase100); }
.tree-category:not(.collapsed) .chevron { transform: rotate(180deg); }

.tree-tower {
  display: block; width: 100%; text-align: left;
  padding: var(--spacingMNudge) var(--spacingL) var(--spacingMNudge) var(--spacingXXXL);
  color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase300);
  background: var(--colorNeutralBackground1);
  border: 0; border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke3);
  cursor: pointer; position: relative;
  transition: background var(--durationFaster) var(--curveEasyEase);
}
.tree-tower:hover { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground1); }
.tree-tower.active {
  background: var(--colorBrandBackground2); color: var(--colorBrandForeground1);
  font-weight: var(--fontWeightSemibold);
}
/* Fluent's selected-nav indicator */
.tree-tower.active::after {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: var(--borderRadiusCircular);
  background: var(--colorBrandBackground);
}

/* Update cards */
.update-card {
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusXLarge);
  padding: var(--spacingXL) var(--spacingXXL);
  margin-bottom: var(--spacingL);
  background: var(--colorNeutralBackground1);
  box-shadow: var(--shadow2);
  content-visibility: auto; contain-intrinsic-size: auto 300px;
  transition: box-shadow var(--durationNormal) var(--curveEasyEase);
}
.update-card:hover { box-shadow: var(--shadow8); }
.update-card h3 {
  font-family: var(--fontFamilyDisplay); font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400); font-weight: var(--fontWeightSemibold);
}
.ledger-even, .ledger-odd { background: var(--colorNeutralBackground1); }

.progress-description { font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase400); color: var(--colorNeutralForeground2); }
.progress-description p { margin-bottom: var(--spacingS); }
.progress-description p:last-child { margin-bottom: 0; }
.progress-description ul, .progress-description ol { padding-left: var(--spacingXL); margin-bottom: var(--spacingS); }
.ql-align-center { text-align: center; } .ql-align-right { text-align: right; } .ql-align-justify { text-align: justify; }

/* Thumbnails */
.thumb-wrapper {
  width: 100%; aspect-ratio: 4/3; position: relative; overflow: hidden;
  border-radius: var(--borderRadiusMedium);
  background: var(--colorNeutralBackground4);
  cursor: pointer; border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  transition: box-shadow var(--durationFast) var(--curveEasyEase);
}
.thumb-wrapper:hover { box-shadow: var(--shadow8); }
.thumb-wrapper::after {
  content: '\f065'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--fontSizeBase500); color: #fff; background: rgba(0,0,0,0);
  opacity: 0; transition: opacity var(--durationFast) var(--curveEasyEase), background var(--durationFast) var(--curveEasyEase);
}
.thumb-wrapper:hover::after { opacity: 1; background: rgba(0,0,0,.45); }
.update-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--colorNeutralBackground1); }

/* Section headers — Fluent uses weight and scale, not colour, for hierarchy */
.project-group-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacingM);
  padding-bottom: var(--spacingM);
  border-bottom: var(--strokeWidthThick) solid var(--colorNeutralStroke1);
  margin: var(--spacingS) 0 var(--spacingXL);
}
.project-group-header h2 {
  font-family: var(--fontFamilyDisplay); font-size: var(--fontSizeHero700);
  line-height: var(--lineHeightHero700); font-weight: var(--fontWeightSemibold);
  color: var(--colorNeutralForeground1); margin: 0;
}
.type-group-header {
  border-left: var(--spacingXS) solid var(--colorBrandBackground);
  padding: var(--spacingS) var(--spacingL);
  background: var(--colorNeutralBackground2);
  border-radius: 0 var(--borderRadiusMedium) var(--borderRadiusMedium) 0;
  margin-bottom: var(--spacingL);
}
.type-group-header h3, .type-group-header h4 {
  font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightSemibold); text-transform: uppercase;
  letter-spacing: .04em; color: var(--colorNeutralForeground2); margin: 0;
}

.date-badge {
  display: inline-flex; align-items: center; gap: var(--spacingXS);
  font-size: var(--fontSizeBase200); font-weight: var(--fontWeightMedium);
  color: var(--colorNeutralForeground2); background: var(--colorNeutralBackground3);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusCircular); padding: var(--spacingXXS) var(--spacingMNudge);
}

/* Toolbar / search */
.title-bar {
  background: var(--colorNeutralBackground1);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusXLarge);
  padding: var(--spacingM) var(--spacingL); box-shadow: var(--shadow2);
}
.search-wrap {
  border-radius: var(--borderRadiusMedium); overflow: hidden;
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);
  background: var(--colorNeutralBackground1);
  transition: border-color var(--durationFast) var(--curveEasyEase);
}
.search-wrap:focus-within { border-bottom: var(--strokeWidthThick) solid var(--colorBrandStroke1); }
.search-wrap input { background: transparent; color: var(--colorNeutralForeground1); }
.search-wrap input:focus { outline: none; box-shadow: none; }
.btn-sidebar-toggle {
  background: transparent; color: var(--colorNeutralForeground2);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  width: 32px; height: 32px; border-radius: var(--borderRadiusMedium);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
  transition: background var(--durationFaster) var(--curveEasyEase);
}
.btn-sidebar-toggle:hover { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground1); }

/* Featured media */
.wip-video-card {
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusXLarge); overflow: hidden;
  margin-bottom: var(--spacingL); background: var(--colorNeutralBackground1);
  box-shadow: var(--shadow2);
}
.wip-video-card video { width: 100%; height: auto; max-height: 55vh; display: block; object-fit: contain; background: #000; }
.wip-video-header { background: var(--colorNeutralBackground2); border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); padding: var(--spacingL) var(--spacingXL) var(--spacingM); }
.wip-video-empty { padding: var(--spacingXXXL) var(--spacingXL); text-align: center; color: var(--colorNeutralForeground3); background: var(--colorNeutralBackground2); }
.wip-video-empty i { font-size: var(--fontSizeBase600); opacity: .4; display: block; margin-bottom: var(--spacingM); }
.wip-video-empty p { margin: 0; font-size: var(--fontSizeBase300); }
.live-badge {
  display: inline-flex; align-items: center; gap: var(--spacingXS);
  font-size: var(--fontSizeBase200); font-weight: var(--fontWeightSemibold);
  color: var(--colorPaletteGreenForeground1); background: var(--colorPaletteGreenBackground1);
  border: var(--strokeWidthThin) solid var(--colorPaletteGreenBorder1);
  border-radius: var(--borderRadiusCircular); padding: var(--spacingXXS) var(--spacingS);
}
.live-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Empty state */
.empty-state { padding: var(--spacingXXXL) var(--spacingXL); text-align: center; }
.empty-state-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--colorNeutralBackground4);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--spacingL); font-size: var(--fontSizeBase500);
  color: var(--colorNeutralForeground3);
}

footer {
  background: var(--colorNeutralBackground1);
  border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  padding: var(--spacingXXL) 0; margin-top: auto;
}
footer p { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); line-height: var(--lineHeightBase300); max-width: 1000px; margin: 0 auto; }
footer .footer-shield {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--colorNeutralBackground4); display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--colorNeutralForeground3); margin-bottom: var(--spacingS);
}
.footer-links { display: flex; gap: var(--spacingL); justify-content: center; flex-wrap: wrap; margin-bottom: var(--spacingM); }
.footer-links a { font-size: var(--fontSizeBase200); font-weight: var(--fontWeightMedium); }

#lightboxImage { border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow64); }

/* ───────────────────────────────────────────────────────────────────────────
   6 · ADMIN COMPONENTS
   ─────────────────────────────────────────────────────────────────────────── */
.login-card {
  background: var(--colorNeutralBackground1);
  padding: var(--spacingXXXL); border-radius: var(--borderRadiusXLarge);
  box-shadow: var(--shadow16); width: 100%; max-width: 400px; margin: auto;
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}
.login-logo-wrap { display: flex; align-items: center; justify-content: center; gap: var(--spacingM); margin-bottom: var(--spacingXL); }
.login-logo-sep { width: 1px; height: 28px; background: var(--colorNeutralStroke2); }
.login-title { font-family: var(--fontFamilyDisplay); font-size: var(--fontSizeBase500); font-weight: var(--fontWeightSemibold); margin-bottom: var(--spacingXS); }
.login-sub { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); margin-bottom: var(--spacingXL); }

/* Pivot (tabs) */
.admin-nav {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--spacingXXS);
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  scrollbar-width: none;
}
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav .nav-link {
  color: var(--colorNeutralForeground2); font-weight: var(--fontWeightSemibold);
  font-size: var(--fontSizeBase300); border-radius: var(--borderRadiusMedium) var(--borderRadiusMedium) 0 0;
  padding: var(--spacingS) var(--spacingM); white-space: nowrap; flex-shrink: 0;
  border: 0; background: transparent; position: relative;
  display: inline-flex; align-items: center; gap: var(--spacingS); text-decoration: none;
  transition: background var(--durationFaster) var(--curveEasyEase), color var(--durationFaster) var(--curveEasyEase);
}
.admin-nav .nav-link:hover:not(.active) { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground1); }
.admin-nav .nav-link.active { color: var(--colorBrandForeground1); background: transparent; }
.admin-nav .nav-link.active::after {
  content: ''; position: absolute; left: var(--spacingM); right: var(--spacingM); bottom: -1px;
  height: 2px; background: var(--colorBrandBackground); border-radius: var(--borderRadiusCircular);
}
.admin-nav .nav-divider { width: 1px; height: 20px; background: var(--colorNeutralStroke2); flex-shrink: 0; margin: 0 var(--spacingXS); }
.admin-nav .nav-link.border { border: var(--strokeWidthThin) solid var(--colorNeutralStroke1) !important; border-radius: var(--borderRadiusMedium); }

/* Stat tiles */
.stat-card {
  background: var(--colorNeutralBackground1);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusXLarge);
  padding: var(--spacingXL) var(--spacingL); text-align: center;
  box-shadow: var(--shadow2); transition: box-shadow var(--durationNormal) var(--curveEasyEase);
}
.stat-card:hover { box-shadow: var(--shadow8); }
.stat-card .stat-value {
  font-family: var(--fontFamilyDisplay); font-size: var(--fontSizeHero800);
  line-height: var(--lineHeightHero800); font-weight: var(--fontWeightSemibold);
  color: var(--colorNeutralForeground1); margin-bottom: var(--spacingXS);
}
.stat-card .stat-label {
  font-size: var(--fontSizeBase200); font-weight: var(--fontWeightMedium);
  color: var(--colorNeutralForeground3); text-transform: none; letter-spacing: 0;
}

@media (min-width: 992px) {
  .sidebar-sticky {
    position: sticky; top: calc(var(--navHeight) + var(--spacingXL));
    max-height: calc(100vh - var(--navHeight) - var(--spacingXXXL)); overflow-y: auto;
  }
  .sidebar-sticky::-webkit-scrollbar { width: 6px; }
  .sidebar-sticky::-webkit-scrollbar-thumb { background: var(--colorNeutralStroke1); border-radius: var(--borderRadiusCircular); }
}

/* Quill */
#quill-toolbar {
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1) !important;
  border-bottom: 0 !important;
  border-radius: var(--borderRadiusMedium) var(--borderRadiusMedium) 0 0;
  background: var(--colorNeutralBackground2);
}
#quill-editor {
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1) !important;
  border-radius: 0 0 var(--borderRadiusMedium) var(--borderRadiusMedium);
  min-height: 160px; font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300);
  background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1);
}
.ql-snow .ql-stroke { stroke: var(--colorNeutralForeground2); }
.ql-snow .ql-fill { fill: var(--colorNeutralForeground2); }
.ql-snow .ql-picker-label { color: var(--colorNeutralForeground2); }

.logout-link {
  color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase300);
  text-decoration: none; display: inline-flex; align-items: center; gap: var(--spacingXS);
  padding: var(--spacingSNudge) var(--spacingM); border-radius: var(--borderRadiusMedium);
  border: var(--strokeWidthThin) solid transparent; font-weight: var(--fontWeightSemibold);
  transition: background var(--durationFaster) var(--curveEasyEase);
}
.logout-link:hover { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground1); text-decoration: none; }

.img-preview-item, .sortable-img-item {
  position: relative; border-radius: var(--borderRadiusMedium); overflow: hidden;
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  transition: box-shadow var(--durationFast) var(--curveEasyEase);
}
.img-preview-item:hover, .sortable-img-item:hover { box-shadow: var(--shadow8); }
.sortable-ghost { opacity: .4; outline: var(--strokeWidthThick) dashed var(--colorBrandStroke1); }

/* 2.5.7 Dragging Movements — keyboard/click alternative to drag reordering */
.img-order-controls { display: flex; gap: 2px; position: absolute; bottom: 2px; left: 2px; z-index: 6; }
.img-order-btn {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusSmall); font-size: var(--fontSizeBase200);
  cursor: pointer; padding: 0;
}
.img-order-btn:hover { background: var(--colorSubtleBackgroundHover); }
.img-delete-toggle {
  position: absolute; top: 0; right: 0; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--colorPaletteRedForeground1); color: #fff;
  border-bottom-left-radius: var(--borderRadiusMedium); font-size: var(--fontSizeBase200); z-index: 5;
}

/* Housekeeping + media picker */
.hk-note { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); }
.hk-scroll { max-height: 320px; overflow-y: auto; }
.hk-check { width: 40px; }
.hk-path { font-family: var(--fontFamilyMonospace); font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground1); word-break: break-all; }
.vid-hint { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); margin-top: var(--spacingSNudge); line-height: var(--lineHeightBase200); }
.vid-hint code { background: var(--colorNeutralBackground4); padding: 1px 5px; border-radius: var(--borderRadiusSmall); }
.vid-hint-warn { color: var(--colorPaletteYellowForeground1); }
.vid-pick {
  background: var(--colorBrandBackground2); border: var(--strokeWidthThin) solid var(--colorBrandStroke1);
  color: var(--colorBrandForeground1); border-radius: var(--borderRadiusMedium);
  font-size: var(--fontSizeBase200); font-weight: var(--fontWeightSemibold);
  padding: var(--spacingXS) var(--spacingS); margin: var(--spacingXS) var(--spacingXS) 0 0; cursor: pointer;
}
.vid-pick:hover { background: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); }

/* Pagination (analytics ledger) */
.pager { display: flex; align-items: center; gap: var(--spacingS); flex-wrap: wrap; }
.page-btn {
  background: var(--colorNeutralBackground1); border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  color: var(--colorNeutralForeground1); border-radius: var(--borderRadiusMedium);
  padding: var(--spacingXS) var(--spacingMNudge); font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightSemibold); text-decoration: none; display: inline-flex; align-items: center;
}
.page-btn:hover { background: var(--colorSubtleBackgroundHover); text-decoration: none; }
.page-btn[aria-current="page"] { background: var(--colorBrandBackground); border-color: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); }
.page-btn.disabled { color: var(--colorNeutralForegroundDisabled); pointer-events: none; }

/* Consent banner (DPDP) */
.consent-bar {
  position: fixed; inset: auto 0 0 0; z-index: 1600;
  background: var(--colorNeutralBackground1);
  border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  box-shadow: var(--shadow28); padding: var(--spacingL) var(--spacingXL);
}
.consent-inner { max-width: 1100px; margin: 0 auto; display: flex; gap: var(--spacingL); align-items: flex-start; flex-wrap: wrap; }
.consent-copy { flex: 1 1 420px; font-size: var(--fontSizeBase300); color: var(--colorNeutralForeground2); }
.consent-copy h2 { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); margin-bottom: var(--spacingXS); }
.consent-actions { display: flex; gap: var(--spacingS); flex-wrap: wrap; align-items: center; }
.consent-note { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); margin: var(--spacingS) 0 0; }

/* Legal pages */
.legal-wrap { max-width: 820px; margin: 0 auto; padding: var(--spacingXXXL) var(--spacingL) var(--spacingXXXL); }
.legal-wrap h1 { font-size: var(--fontSizeHero800); line-height: var(--lineHeightHero800); margin-bottom: var(--spacingS); }
.legal-wrap h2 { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); margin: var(--spacingXXL) 0 var(--spacingS); }
.legal-wrap h3 { font-size: var(--fontSizeBase400); margin: var(--spacingL) 0 var(--spacingXS); }
.legal-wrap p, .legal-wrap li { color: var(--colorNeutralForeground2); font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase400); }
.legal-wrap table { width: 100%; border-collapse: collapse; margin: var(--spacingM) 0 var(--spacingXL); }
.legal-wrap th, .legal-wrap td {
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  padding: var(--spacingS) var(--spacingM); text-align: left;
  font-size: var(--fontSizeBase300); vertical-align: top;
}
.legal-wrap th { background: var(--colorNeutralBackground2); font-weight: var(--fontWeightSemibold); }
.legal-meta { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); margin-bottom: var(--spacingXXL); }

/* Error page */
.err-body { align-items: center; justify-content: center; padding: var(--spacingXXL); }
.err-card {
  background: var(--colorNeutralBackground1); border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusXLarge); padding: var(--spacingXXXL); max-width: 460px;
  text-align: center; box-shadow: var(--shadow16); margin: auto;
}
.err-code { font-family: var(--fontFamilyDisplay); font-size: var(--fontSizeHero900); line-height: var(--lineHeightHero900); font-weight: var(--fontWeightSemibold); color: var(--colorBrandForeground1); margin: 0 0 var(--spacingS); }
.err-card p { color: var(--colorNeutralForeground3); margin-bottom: var(--spacingXL); }
.err-card a {
  display: inline-block; background: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand);
  font-weight: var(--fontWeightSemibold); padding: var(--spacingMNudge) var(--spacingXXL);
  border-radius: var(--borderRadiusMedium); text-decoration: none;
}
.err-card a:hover { background: var(--colorBrandBackgroundHover); color: var(--colorNeutralForegroundOnBrand); text-decoration: none; }

/* ───────────────────────────────────────────────────────────────────────────
   7 · PRINT / PDF REPORT
   Light tokens are forced: a dark-theme visitor must not print dark pages.
   ─────────────────────────────────────────────────────────────────────────── */
.page-shell {
  width: 210mm; min-height: 297mm; margin: 14mm auto 20mm;
  background: #fff; padding: 14mm 13mm 20mm; box-shadow: var(--shadow16);
}
.print-toolbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--colorBrandBackground); color: #fff;
  padding: var(--spacingS) var(--spacingXL);
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacingL);
  font-size: var(--fontSizeBase300); box-shadow: var(--shadow8);
}
.print-toolbar h1 { font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); margin: 0; color: #fff; }
.print-toolbar .btn-group { display: flex; gap: var(--spacingS); }
.btn-print, .btn-back {
  padding: var(--spacingXS) var(--spacingL); border: 0; border-radius: var(--borderRadiusMedium);
  font-size: var(--fontSizeBase200); font-weight: var(--fontWeightSemibold); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: var(--spacingXS);
}
.btn-print { background: #fff; color: var(--colorBrandBackground); }
.btn-back { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.4); }

.report-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6mm; margin-bottom: 7mm; border-bottom: 2pt solid #0f6cbd; }
.report-header .logos { display: flex; align-items: center; gap: 12px; }
.report-header .logos img { height: 36px; width: auto; object-fit: contain; }
.report-header .title-block { text-align: right; }
.report-header h2 { font-size: 14pt; font-weight: 600; color: #0f6cbd; margin: 0; line-height: 1.2; }
.report-header .subtitle { font-size: 7.5pt; color: #616161; margin-top: 2px; }

.project-group { margin-bottom: 8mm; }
.project-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1.5pt solid #0f6cbd; padding: 2.5mm 0; margin: 5mm 0 3.5mm; }
.project-heading:first-child { margin-top: 0; }
.project-heading h2 { font-size: 12pt; font-weight: 600; color: #0f6cbd; margin: 0; }
.project-heading .proj-logo { height: 26px; max-width: 72px; width: auto; object-fit: contain; flex-shrink: 0; }
.type-group { margin-bottom: 4mm; }
.type-heading { background: #0f6cbd; padding: 2mm 5mm; margin-bottom: 2mm; }
.type-heading h3 { font-size: 7.5pt; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #fff; margin: 0; }
.card-text { flex: 1 1 0; min-width: 0; padding: 3.5mm 4mm; }
.card-text h4 { font-size: 9pt; font-weight: 600; color: #242424; margin: 0 0 1.5mm; line-height: 1.25; }
.card-text .desc { font-size: 8pt; line-height: 1.35; color: #424242; word-break: break-word; margin: 0; }
.card-text .desc p { margin-bottom: 1.5mm; }
.card-text .desc p:last-child { margin-bottom: 0; }
.card-text .desc ul, .card-text .desc ol { padding-left: 12pt; margin-bottom: 1.5mm; }
.card-imgs { flex: 0 0 42%; max-width: 42%; min-width: 0; border-left: .5pt solid #d1d1d1; padding: 3mm 3mm 3mm 3.5mm; display: flex; flex-direction: column; gap: 2mm; }
.card-imgs .date-badge { align-self: flex-start; font-size: 6.5pt; }
.img-grid { display: flex; flex-wrap: wrap; gap: 1.5mm; }
.img-grid .img-cell { flex: 0 0 calc(50% - .75mm); max-width: calc(50% - .75mm); }
.img-grid img { display: block; width: 100%; height: 26mm; object-fit: cover; border: .4pt solid #d1d1d1; border-radius: 2px; }
.update-card.no-images .card-text { padding-right: 4mm; }
.update-card.no-images .card-imgs { display: none; }
.update-card.no-images .card-text .inline-date { display: inline-block; font-size: 6.5pt; font-weight: 600; color: #616161; background: #f0f0f0; border-radius: 2px; padding: .8pt 4pt; margin-bottom: 1.5mm; }
.page-footer { display: none; }
.empty { text-align: center; padding: 20mm 0; color: #707070; font-size: 11pt; }

body.report-body { background: #e6e6e6; padding-top: 44px; display: block; }
body.report-body .update-card {
  display: flex; flex-direction: row; align-items: flex-start; gap: 0;
  border: .5pt solid #d1d1d1; border-left: 3pt solid #0f6cbd;
  margin-bottom: 2mm; background: #fff; width: 100%; overflow: hidden;
  border-radius: 0; padding: 0; box-shadow: none;
}
body.report-body .update-card.ledger-odd { background: #fafafa; border-left-color: #479ef5; }

@media print {
  @page { size: A4 portrait; margin: 14mm 12mm 18mm; }
  :root {
    --colorNeutralBackground1:#fff; --colorNeutralBackground2:#fafafa;
    --colorNeutralForeground1:#000; --colorNeutralForeground2:#242424;
    --colorNeutralForeground3:#424242; --colorNeutralStroke1:#999; --colorNeutralStroke2:#ccc;
  }
  body, body.report-body { background: #fff !important; color: #000 !important; padding: 0 !important; }
  .page-shell { width: 100%; margin: 0; padding: 0; box-shadow: none; min-height: unset; }
  .no-print, .print-toolbar, .site-nav, #leftSidebar, .action-btn-group,
  #wipVideoBlock, footer, .modal, .web-title-row, .consent-bar, .skip-link { display: none !important; }
  .page-footer {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    border-top: .4pt solid #ccc; padding: 2.5mm 12mm; font-size: 7pt; color: #424242;
    background: #fff; justify-content: space-between; align-items: center;
  }
  #mainContent { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; flex: 0 0 100% !important; }
  #print-header { display: flex !important; }
  .project-group-header, .type-group-header { break-after: avoid; page-break-after: avoid; }
  .update-card { break-inside: avoid; page-break-inside: avoid; border: 1px solid #ccc !important; box-shadow: none !important; background: #fff !important; }
  .type-group { break-inside: avoid-page; }
  .print-flex-row { display: flex !important; flex-direction: row !important; gap: 16px; }
  .print-text-col { flex: 0 0 55% !important; max-width: 55% !important; }
  .print-img-col { flex: 0 0 45% !important; max-width: 45% !important; }
  .print-img-grid { display: flex !important; flex-wrap: wrap !important; gap: 8px; }
  .print-img-item { flex: 0 0 calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; padding: 0 !important; }
  .thumb-wrapper { border: 1px solid #ddd !important; break-inside: avoid; }
  .thumb-wrapper::after { display: none !important; }
  a[href]::after { content: ''; }
}

/* ───────────────────────────────────────────────────────────────────────────
   8 · LEGACY INLINE-STYLE SHIMS
   The templates still carry a handful of static style="" attributes. Under a
   CSP whose style-src contains a hash, 'unsafe-inline' is ignored and those
   attributes are dropped — so each is reproduced here as an attribute
   selector. Harmless, and it keeps the markup untouched. Replacing them with
   real classes is cosmetic cleanup for a later pass.
   ─────────────────────────────────────────────────────────────────────────── */
[style="width: 120px; flex-shrink: 0;"] { width: 120px; flex-shrink: 0; }
[style="width: 120px; flex-shrink: 0; text-align: right;"] { width: 120px; flex-shrink: 0; text-align: right; }
[style="width:120px;"] { width: 120px; }
[style="width:120px; text-align:right;"] { width: 120px; text-align: right; }
[style="max-width: 1600px;"] { max-width: 1600px; }
[style="overflow-x: auto; padding-bottom: 2px;"] { overflow-x: auto; padding-bottom: 2px; }
[style="display:none;"] { display: none; }
[style="max-height: 320px; overflow-y: auto;"] { max-height: 320px; overflow-y: auto; }
[style="transform: scale(1.3); cursor: pointer;"] { cursor: pointer; }

/* Admin photo tiles — 80px thumb with 24px minimum targets (WCAG 2.2 · 2.5.8) */
.photo-tile {
  position: relative; width: 80px; height: 80px; flex-shrink: 0; overflow: hidden;
  border-radius: var(--borderRadiusMedium);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  background: var(--colorNeutralBackground1); cursor: grab;
}
.photo-tile-img { object-fit: cover; pointer-events: none; transition: opacity var(--durationFast) var(--curveEasyEase), filter var(--durationFast) var(--curveEasyEase); }
.photo-tile.is-deleted { border-color: var(--colorPaletteRedForeground1); }
.photo-tile.is-deleted .photo-tile-img { opacity: .3; filter: grayscale(100%); }
.photo-tile:focus-within { box-shadow: var(--shadow8); }

/* ── Resource-centre embed (status-tab.php) ── */
.rc-status-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacingL);
  flex-wrap: wrap; padding-bottom: var(--spacingL); margin-bottom: var(--spacingL);
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); }
.rc-status-title { font-family: var(--fontFamilyDisplay); font-size: var(--fontSizeHero700);
  line-height: var(--lineHeightHero700); font-weight: var(--fontWeightSemibold); margin: 0 0 var(--spacingXS); }
.rc-status-sub { font-size: var(--fontSizeBase300); color: var(--colorNeutralForeground3); margin: 0; }
.rc-status-actions { display: flex; gap: var(--spacingS); flex-wrap: wrap; }
.rc-status-project { margin-bottom: var(--spacingXXL); }
.rc-status-card { display: flex; gap: var(--spacingL); align-items: flex-start; flex-wrap: wrap; }
.rc-status-card-text { flex: 1 1 320px; min-width: 0; }
.rc-status-card-imgs { flex: 0 0 240px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacingS); }
.rc-status-card-imgs .thumb-wrapper { display: block; }
.rc-status-foot { margin-top: var(--spacingXL); padding-top: var(--spacingM);
  border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); }
.dev-footer { display: flex; flex-wrap: wrap; gap: var(--spacingS); align-items: center; justify-content: center;
  font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); margin: var(--spacingM) 0 0; }
.dev-footer-sep { color: var(--colorNeutralStroke1); }
.dev-footer-version { font-family: var(--fontFamilyMonospace); }
@media (max-width: 575.98px) { .rc-status-card-imgs { flex-basis: 100%; } }


/* ═══════════════════════════════════════════════════════════════════════════
   RC three-theme bridge (light / dark / reserve) — explicit data-theme wins
   over prefers-color-scheme so /status/ matches Resource Centre shells.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  color-scheme: light;
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground2: #fafafa;
  --colorNeutralBackground3: #f5f5f5;
  --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #424242;
  --colorNeutralForeground3: #616161;
  --colorNeutralStroke1: #d1d1d1;
  --colorNeutralStroke2: #e0e0e0;
  --colorBrandBackground: var(--brand-80);
  --colorBrandForeground1: var(--brand-80);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --colorBrandBackground: var(--brand-70);
  --colorBrandBackgroundHover: var(--brand-80);
  --colorBrandForeground1: var(--brand-100);
  --colorNeutralBackground1: #292929;
  --colorNeutralBackground2: #242424;
  --colorNeutralBackground3: #1f1f1f;
  --colorNeutralBackground4: #1a1a1a;
  --colorNeutralForeground1: #ffffff;
  --colorNeutralForeground2: #e0e0e0;
  --colorNeutralForeground3: #c7c7c7;
  --colorNeutralStroke1: #666666;
  --colorNeutralStroke2: #4d4d4d;
}

/* Reserve = warm executive (matches RC --rc-paper cream) */
:root[data-theme="reserve"] {
  color-scheme: light;
  --colorBrandBackground: #0078D4;
  --colorBrandBackgroundHover: #106EBE;
  --colorBrandForeground1: #005A9E;
  --colorNeutralBackground1: #FBF6EF;
  --colorNeutralBackground2: #F7F0E6;
  --colorNeutralBackground3: #F0E6D8;
  --colorNeutralBackground4: #E8DCC8;
  --colorNeutralBackground5: #E0D2BA;
  --colorNeutralBackground6: #D6C6A8;
  --colorNeutralForeground1: #2C2416;
  --colorNeutralForeground2: #4A3F2F;
  --colorNeutralForeground3: #6B5C48;
  --colorNeutralForeground4: #8A7A62;
  --colorNeutralStroke1: #D4C4A8;
  --colorNeutralStroke2: #E5D9C4;
  --colorNeutralStroke3: #EFE6D8;
  --colorNeutralStrokeAccessible: #6B5C48;
  --colorSubtleBackgroundHover: #F0E6D8;
  --colorSubtleBackgroundPressed: #E8DCC8;
  --shadow2: 0 1px 2px rgba(44,36,22,.08), 0 0 2px rgba(44,36,22,.06);
  --shadow4: 0 2px 4px rgba(44,36,22,.08), 0 0 2px rgba(44,36,22,.06);
}

/* Theme strip on public portal */
.st-theme-seg {
  display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px;
  border: 1px solid var(--colorNeutralStroke1);
  background: var(--colorNeutralBackground2);
}
.st-theme-seg button {
  appearance: none; border: 0; border-radius: 8px; padding: 4px 10px;
  font: 600 11px/1.2 system-ui, sans-serif; cursor: pointer;
  color: var(--colorNeutralForeground2);
  background: transparent;
}
.st-theme-seg button[aria-pressed="true"] {
  background: var(--colorBrandBackground);
  color: #fff;
}


/* Compatibility aliases used by index.php / admin markup */
:root, .rc-status {
  --brand-dark: var(--colorBrandForeground1, #0f6cbd);
  --brand-primary: var(--colorBrandBackground, #0f6cbd);
  --text-muted: var(--colorNeutralForeground3, #616161);
  --text-main: var(--colorNeutralForeground1, #242424);
  --font-display: "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
  --surface: var(--colorNeutralBackground1, #fff);
  --surface-2: var(--colorNeutralBackground2, #fafafa);
  --border: var(--colorNeutralStroke1, #d1d1d1);
}
body {
  background: var(--colorNeutralBackground1, #fff);
  color: var(--colorNeutralForeground1, #242424);
}

/* Project / status logo plate — golden sand dune (matches Media Kit visibility) */
.st-logo-plate,
.project-logo-plate,
img.project-logo,
td.logo-cell img,
.rc-status img.update-thumb {
  /* thumbs keep normal look */
}
.st-logo-plate,
.project-logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 40px;
  max-width: 96px;
  max-height: 56px;
  padding: 6px 10px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,248,230,.55), transparent 55%),
    linear-gradient(165deg, #c9a66b 0%, #e8d4a8 38%, #d4b07a 72%, #b8956a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.12);
}
.st-logo-plate img,
.project-logo-plate img {
  max-width: 80px;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
body.st-embed .st-theme-seg,
body[data-embed="1"] .st-theme-seg {
  display: none !important;
}

/* SVG / project logos — always visible on sand plate */
.project-logo-plate.st-logo-plate,
.st-logo-plate {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 44px;
  max-width: 120px;
  padding: 8px 12px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,248,230,.6), transparent 55%),
    linear-gradient(165deg, #c9a66b 0%, #e8d4a8 38%, #d4b07a 72%, #b8956a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.12);
}
.st-logo-plate img,
.st-logo-img,
.project-logo-plate img {
  display: block !important;
  max-width: 96px !important;
  max-height: 48px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  /* Help light-ink SVGs read on the plate */
  filter: drop-shadow(0 0 0.5px rgba(0,0,0,.25));
}
.st-logo-plate.is-broken {
  outline: 1px dashed rgba(0,0,0,.25);
  min-width: 56px;
}
.st-logo-plate.is-broken::after {
  content: "logo";
  font: 600 10px/1 system-ui,sans-serif;
  color: rgba(0,0,0,.45);
}
.sidebar-project-logo .st-logo-plate,
.nav-project .st-logo-plate { max-width: 72px; min-height: 36px; padding: 4px 8px; }
.sidebar-project-logo img, .nav-project img.st-logo-img { max-height: 32px !important; max-width: 64px !important; }


/* 3.2.63 — SVG project logos visible on sand plate (all themes / mobile) */
.st-logo-plate--svg,
.project-logo-plate.st-logo-plate--svg,
.st-logo-plate.st-logo-plate--svg {
  display: inline-flex !important;
  /* Dark plate so white / light-ink SVG logos stay readable */
  background:
    radial-gradient(ellipse at 30% 15%, rgba(80,90,110,.55), transparent 55%),
    linear-gradient(165deg, #1a1d24 0%, #2a2f3a 42%, #1e222b 100%) !important;
  min-width: 64px !important;
  min-height: 48px !important;
  padding: 8px 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 3px rgba(0,0,0,.35) !important;
}
/* Non-SVG logos keep sand plate for colour marks */
.st-logo-plate:not(.st-logo-plate--svg) {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,248,230,.55), transparent 55%),
    linear-gradient(165deg, #c9a66b 0%, #e8d4a8 38%, #d4b07a 72%, #b8956a 100%) !important;
}
.st-logo-img--svg,
img.st-logo-img--svg,
.st-logo-plate--svg img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  max-width: 100px !important;
  max-height: 52px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.2)) !important;
}