/* =========================================================
   Clerical Tribunal Management — Shared Stylesheet
   Loaded by every page under ctm-admin/ and (via ../ctm-admin/styles.css)
   every page under ctm-public/.

   Layout of this file (top to bottom):
     1. Tokens / :root                — CSS custom properties (colours, spacing,
                                        typography, sidebar width, radii).
     2. Reset + base                  — universal box-sizing, headings.
     3. App shell                     — .SHELL_shell, .SHELL_main, sidebar.
     4. Sections and cards            — .CARD, .SECTION_header, .IS_collapsible.
     5. Pills                         — .BADGE, .AVATAR_party, .BADGE_outcome, .BADGE_history
                                        (see also `docs/dynamic-selector-safelist`).
     6. Forms                         — inputs, selects, textareas, focus rings.
     7. Modals                        — .MODAL shell and its two variants.
     8. Utilities                     — .IS_clickable, .BTN_icon, .UTIL_hidden, .u-*, etc.
     9. Watermarks                    — placeholder text and empty-state icons.
    10. Button-height standard         — every button in the app is 32px.
    11. Search-field-height standard   — every field beside a button is 32px.

   Documentation:
     - Every major component below has a comment block explaining its purpose,
       the pages that use it, and any JavaScript coupling.
     - `docs/css-class-usage.md`         — full class inventory with usage.
     - `docs/dynamic-selector-safelist.md` — patterns built at runtime.
     - `docs/retained-inline-styles.md`  — inline styles kept intentionally.
     - `docs/retained-inline-handlers.md` — inline on* handlers kept intentionally.

   State-class vocabulary (must remain in lockstep with `app.js`):
     .IS_collapsible / .IS_expanded  — disclosure widgets; the `.IS_collapsible` container
                                 also carries `aria-expanded` on its toggle.
     .IS_active                    — currently selected tab / stepper step / row.
     .IS_open                      — modal open, dropdown open, dropdown menu on.
     .IS_visible                      — advanced-search panel open, .MENU_act open.
     .IS_selected                  — decision option or hearing option chosen.
     .IS_done                      — decree step completed.
     .UTIL_hidden                    — element hidden (see also .UTIL_hidden utility).

   Do NOT rename any state class without updating every JavaScript reference.
   ========================================================= */

/* ==========================================================================
   Design tokens

   Every colour, spacing value, font family, radius, and shadow used by
   the app is declared once in the :root block below. Component rules
   throughout this file reference the tokens by var(--Name), not by
   literal value.

   Naming pattern:
     --ColourName      : brand palette (--NavyBlue, --Bronze, --Gold, …)
     --Grey names      : neutral scale (--BorderGrey, --SlateGrey, --WarmGrey, …)
     --Pad*            : spacing scale in pixels (2, 4, 6, 8, 10, 12, …)
     --Radius*         : border-radius scale
     --Font*           : font families
     --title-*         : heading sizes
     --text-*          : body sizes
     --weight-*        : font weights
     --SidebarWidth    : shared shell dimensions
     --LogoSize
     --Shadow*         : box-shadow presets

   Rules:
   - Never use a raw hex value in a component rule. If the value isn't in
     the token table below, add it.
   - Adjust a token here to change the entire app. The bronze bars, the
     navy focus rings, the sidebar background, the spacing scale — all
     downstream of these six dozen custom properties.
   ========================================================================== */

/* =========================================================
   1. TOKENS / DESIGN SYSTEM
   ========================================================= */

@import url("https://fonts.googleapis.CARD_com/css2?family=Source+Code+Pro:wght@400;500;600&family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@700;800;900&display=swap");

:root{
  /* ── Sidebar / App Shell ── */
  --SidebarWidth: 220px;
  --LogoSize: 80px;

  /* ── Backgrounds ── */
  --PageGrey:      #e2e2e2;   /* admin shell page bg — cool grey */
  --PageParchment: #e8e6e0;   /* public portal page bg — warm parchment */
  --CharcoalNavy:  #3a3d47;   /* top nav / sidebar bg */
  --OffWhite:      #f7f7f7;   /* card / window bg */
  --White:         #ffffff;   /* pure white inner bg */

  /* ── Brand — Blue family ── */
  --NavyBlue:     #1e4d7b;   /* primary navy blue */
  --NavyBlueDark: #163854;   /* deep navy — hover states */

  /* ── Brand — Gold & Bronze family ── */
  --Gold:         #cc9900;   /* decorative gold — never use as standalone text on white; use --Bronze instead */   /* primary gold — active accents */
  --GoldLight:    #f5d978;   /* pale gold — highlights */
  --Bronze:       #8b6f47;   /* warm bronze — page headers, section markers */
  --BronzeLight:  #b89968;   /* light bronze — hover on bronze */

  /* ── Typography ── */
  --InkBlack:  #1a1614;   /* primary text — near-black warm */
  --SlateGrey: #4a4643;   /* secondary text — dark warm grey */
  --WarmGrey:  #75716d;   /* muted text — medium warm grey */
  --CoolGrey:  #5a6270;   /* muted text — medium cool grey (public pages) */

  /* ── Borders ── */
  --BorderGrey:   #c0c0c0;                /* solid border — cards, inputs */

  /* ── Status — Danger ── */
  --Crimson:  #b91c1c;   /* danger — dark red */

  /* Consolidated danger palette */

  /* ── Status — Success ── */
  --Green:      #15803d;   /* success — dark green */

  /* Consolidated success palette */

  /* ── Status — Warning ── */
  --Orange:      #ea580c;   /* warning — dark orange */

  /* ── Gender indicator colors ── */

  --CoralRose:       #F08080;  /* female name color */

  /* ── Spacing ── */
  /* ── Extended spacing tokens (whole numbers) ── */
  --Pad2:  2px;
  --Pad10: 10px;
  --Pad14: 14px;
  --Pad18: 18px;
  --Pad28: 28px;
  --Pad36: 36px;
  --Pad48: 48px;
  --Pad56: 56px;
  --Pad64: 64px;
  --Pad4: 4px;   --Pad6: 6px;   --Pad8: 8px;
  --Pad12: 12px; --Pad16: 16px; --Pad20: 20px;
  --Pad24: 24px; --Pad32: 32px; --Pad40: 40px;

  /* ── Shadows ── */
  --ShadowCard:  0 0 6px rgba(0,0,0,.04);

  /* ── Radius ── */
  --Radius8: 8px;

  /* =========================================================
     TYPOGRAPHY TOKENS
     Prefix guide:
       --title-*    Headings and large display text
       --text-*     All non-heading text sizes
  ========================================================= */

  /* ── Font stacks ── */
  --FontSans:    'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  --FontDisplay: 'Segoe UI Variable Display', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
  --FontMono:    'Source Code Pro', 'Courier New', monospace;

  /* ── Title scale ── */
  --title-xl:  28px;   /* Hero / page heading */
  --title-lg:  20px;   /* Section heading */
  --title-md:  18px;   /* Subsection, card, modal title */

  /* ── Text scale ── */
  --text-xs:   9px;   /* Labels, small captions */
  --text-sm:   11px;   /* Hints, helpers, footnotes */
  --text-md:   12px;   /* Badges, pills, tabs, data values */
  --text-lg:   15px;   /* Buttons, base body, form controls */

  /* ── Font weights ── */
  --weight-regular:   400;
  --weight-semibold:  600;
  --weight-extrabold: 800;
}

/* =========================================================
   2. BASE RESET
   ========================================================= */

*{ box-sizing: border-box; margin: 0; padding: 0; }
*, *::before, *::after{ box-sizing: border-box; }
html{ height: 100%; overflow-y: scroll; }
body{ height: 100%; margin: 0; background: var(--PageGrey); font-family: var(--FontSans); font-size: var(--text-lg); line-height: 1.6; color: var(--InkBlack); font-weight: var(--weight-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a{ color: var(--NavyBlue); text-decoration: none; }

/* =========================================================
   3. TYPOGRAPHY — App Shell
   ========================================================= */

.TXT_h2, .TXT_h3{ font-family: var(--FontDisplay); margin: 0; color: var(--InkBlack); font-weight: var(--weight-extrabold); }
.TXT_h2{ font-size: var(--title-xl); font-weight: var(--weight-extrabold); line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; }
.TXT_h3{ font-size: var(--title-lg); font-weight: var(--weight-extrabold); line-height: 1.25; letter-spacing: -0.01em; }

.TXT_subtitle{ margin: 0; font-size: var(--text-lg); font-weight: var(--weight-regular); color: var(--SlateGrey); line-height: 1.5; letter-spacing: 0.005em; }
.TXT_caption{ margin: 0; font-size: var(--text-md); font-weight: var(--weight-regular); color:var(--SlateGrey); line-height: 1.5; }
.TXT_dateline{ font-family: var(--FontSans); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--InkBlack); margin: 0; }
.AVATAR_male{ color: var(--NavyBlue); }
.AVATAR_female{ color: var(--CoralRose); }
.AVATAR_female::before{ content:''; display:inline-block; width:13px; height:15px; margin-right:var(--Pad4); vertical-align:-2px; background:url('./assets/ico-gender-female.svg') no-repeat center/contain; }
.AVATAR_male::before{ content:''; display:inline-block; width:13px; height:14px; margin-right:var(--Pad4); vertical-align:-2px; background:url('./assets/ico-gender-male.svg') no-repeat center/contain; }
.GRID_kv{ display:grid; grid-template-columns:auto auto 1fr; gap:var(--Pad2) 0; font-size:var(--text-md); line-height:1.6; }
.GRID_kv dt{ font-family:var(--FontSans); font-weight:var(--weight-regular); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:0.08em; color:var(--NavyBlue); white-space:nowrap; align-self:baseline; }
.GRID_kv .LYT_kvPipe{ text-align:center; width:24px; color:rgba(0,0,0,0.15); font-weight:300; font-size:var(--text-md); user-select:none; align-self:baseline; }
.GRID_kv dd{ margin:0; font-family:var(--FontMono); font-weight:var(--weight-regular); font-size:var(--text-md); color:var(--InkBlack); letter-spacing:0.01em; align-self:baseline; }
.TXT_label{ margin:0; font-family:var(--FontSans); font-size:var(--text-xs); font-weight:var(--weight-regular); color:var(--NavyBlue); text-transform:uppercase; letter-spacing:0.08em; }
.UTIL_mono{ font-family:var(--FontMono); font-size:0.95em; letter-spacing:0.01em; }

/* =========================================================
   4. APP SHELL
   ========================================================= */

.SHELL_shell{ min-height: 100vh; }
.SHELL_main{ margin-left: var(--SidebarWidth); min-width: 0; padding: 0; background: var(--PageGrey); overflow-x: clip; }
.SHELL_contentInner{ max-width: 1400px; width: 100%; margin: 0 auto; min-width: 0; padding:20px var(--Pad28) var(--Pad24); }

/* ==========================================================================
   Component: Application Sidebar & Primary Navigation

   Purpose:
   Fixed left rail on every admin page. Displays the diocese brand block at
   the top, the primary NAV list, and a sticky footer with logout + version.

   Used in:
   - Every ctm-admin/*.html page (injected by injectLayout() in app.js).

   Main classes:
   - #appSidebar            - fixed positioning + full-height container
   - .PANEL_sidebarBrand    - top brand card
   - .HDR_brandLogoWrapper  - centres the crest image
   - .HDR_brandLogoLarge    - the crest image itself
   - .HDR_brandDivider      - thin divider between crest and text
   - .TXT_brandTitleCaps    - tribunal name in gold
   - .TXT_dioceseName       - diocese subtitle in muted grey
   - .NAV                   - vertical stack of nav items
   - .NAV_item              - each row (anchor)
   - .NAV_item.IS_active    - the row for the current page
   - .NAV_icon / .NAV_label - icon + text inside a row
   - .SHELL_sidebottom      - sticky footer container

   JavaScript:
   The sidebar HTML lives in a template in app.js (SIDEBAR_HTML) and is
   injected by injectLayout(). The current page is marked with IS_active
   at render time based on window.location.pathname.

   Notes:
   - Sidebar width is a token: --SidebarWidth (220px). Change it there,
     everything reflows.
   - Sidebar sits inside the .SHELL_shell grid; do not change position:fixed
     without updating the .SHELL_main margin.
   ========================================================================== */

/* =========================================================
   5. SIDEBAR & NAVIGATION
   ========================================================= */

#appSidebar{ position:fixed; top:0; left:0; width:var(--SidebarWidth); height:100vh; z-index:100; background:var(--CharcoalNavy); color:#f5f4f2; margin:0; padding:var(--Pad16) var(--Pad12); overflow-x:hidden; overflow-y:auto; box-shadow:2px 0 12px rgba(0,0,0,0.15); display:flex; flex-direction:column; }
.PANEL_sidebarBrand{ text-align:center; padding:var(--Pad16) var(--Pad12); margin:0 0 var(--Pad16) 0; background:rgba(255,255,255,0.05); border-radius:var(--Pad6); border:1px solid rgba(255,255,255,0.08); min-height:148px; display:flex; flex-direction:column; justify-content:center; }
.HDR_brandLogoWrapper{ display:flex; justify-content:center; align-items:center; width:100%; margin:0 0 var(--Pad10) 0; }
.HDR_brandLogoLarge{ width:var(--LogoSize); height:var(--LogoSize); object-fit:contain; display:block; margin:0 auto; flex-shrink:0; }
.HDR_brandDivider{ height:1px; background:rgba(245,244,242,0.15); margin:var(--Pad8) 0; }
.TXT_brandTitleCaps{ font-family:var(--FontDisplay); font-weight:var(--weight-extrabold); font-size:var(--text-xs); line-height:1.1; letter-spacing:0.14em; text-transform:uppercase; color:var(--Gold); margin:0; }
.TXT_dioceseName{ font-family:var(--FontDisplay); font-weight:var(--weight-semibold); font-size:var(--text-xs); line-height:1.1; letter-spacing:0.14em; text-transform:uppercase; color:rgba(245,244,242,0.7); margin:0; }
.NAV{ display:flex; flex-direction:column; gap:var(--Pad6); flex:1; }
.NAV_item{ display:flex; align-items:center; gap:var(--Pad10); padding:var(--Pad8) var(--Pad12); border-radius:var(--Pad4); color:#f5f4f2; text-decoration:none; border:1px solid transparent; border-left:var(--Pad6) solid transparent; font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-regular); letter-spacing:0; line-height:1.3; cursor:pointer; min-height:42px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.NAV_item:hover{ background:rgba(255,255,255,0.08); border:1px solid rgba(173,181,189,0.35); border-left:var(--Pad6) solid transparent; border-radius:var(--Pad4); color:#e9ecef; }
.NAV_item.IS_active{ background:rgba(204,153,0,0.22); border:1px solid rgba(204,153,0,0.50); border-left:var(--Pad6) solid #ba7d04; border-radius:var(--Pad4); color:var(--White); font-weight:var(--weight-semibold); }
.NAV_item.IS_active:hover{ background:rgba(204,153,0,0.22); border:1px solid rgba(204,153,0,0.50); border-left:var(--Pad6) solid #ba7d04; color:var(--White); }
.NAV_icon{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.NAV_label{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; line-height:1.35; }
.SHELL_sidebottom{ margin-top:auto; padding-top:var(--Pad16); border-top:1px solid rgba(245,244,242,0.15); display:flex; flex-direction:column; gap:var(--Pad6); }

/* ==========================================================================
   Component: Page Header (.PAG_pageHead) + Case Head (.CARD_caseHead)

   Purpose:
   - .PAG_pageHead      : bronze bar at the top of admin index / management /
                          sessions / reports. Holds the H2 page title and an
                          optional right-side action.
   - .BREAD             : breadcrumbs, one line above the page head.
   - .CARD_caseHead     : bronze case-context bar shown on every case-scoped
                          page (case-summary, hearings, requisition, etc.).
                          Displays applicant + respondent + the assigned
                          priest + case number.

   Used in:
   - .PAG_pageHead     : admin-index / admin-management / admin-sessions* /
                          admin-reports / admin-user-account.
   - .BREAD            : most admin pages that are not the dashboard.
   - .CARD_caseHead    : every admin-case-*.html page (13 pages).

   Main classes:
   - .PAG_pageHead                - the outer bar
   -   .PAG_pageHead .TXT_h2      - H2 sized for the bronze bar
   -   .PAG_pageHead .TXT_subtitle - subtitle in muted white
   - .BREAD                       - flex row of anchors
   -   .BREAD_chev / .BREAD_home / .BREAD_current - decoration and current
   - .CARD_caseHead               - the bronze case-context bar
   -   .SHELL_sidecaseHead / .LYT_right          - left/right party columns
   -   .CARD_caseHeadPhoto        - party avatar
   -   .CARD_caseHeadRole         - "Applicant" / "Respondent" label
   -   .CARD_caseHeadName         - party name (uses .AVATAR_party pill)
   -   .CARD_caseHeadCenter       - centre column with case number + priest
   -   .CARD_caseHeadCase         - the case number (mono)
   -   .CARD_caseHeadPriest       - assigned priest photo
   -   .CARD_caseHeadManaged      - "Managed by ..." caption

   JavaScript:
   - .CARD_caseHeadCase is a selector target of CASE_ID_SELECTOR in app.js.
     The case-id prefix decorator watches every element that matches it
     and prepends the configured prefix (CTM- by default).
   - .CARD_caseHeadName wraps a .AVATAR_party pill built by partyPill().

   Notes:
   - The bronze gradient is intentional (matches the sidebar bronze rail).
     Do not replace with a solid colour without also updating the sidebar.
   - The mobile break (768px) wraps the three columns and reduces the photo
     size to 40px. Below that, the case number moves under the priest.
   ========================================================================== */

/* =========================================================
   6. PAGE HEADER & CASE HEAD
   ========================================================= */

.BREAD{ display:flex; align-items:center; gap:var(--Pad8); padding:var(--Pad8) 0 var(--Pad10) 0; margin:0;  margin-bottom:var(--Pad16); }
.BREAD:empty{ display:none; } /* pages without breadcrumbs (e.g. dashboard) get no dead space */
.BREAD a{ font-family:var(--FontSans); font-size:var(--text-sm); font-weight:var(--weight-regular); color:var(--SlateGrey); text-decoration:none; display:inline-flex; align-items:center; gap:var(--Pad2); }
.BREAD a:hover{ color:var(--NavyBlue); }
.BREAD_chev{ width:10px; height:10px; color:var(--SlateGrey); flex-shrink:0; }
.BREAD_current{ font-family:var(--FontSans); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--InkBlack); }
.BREAD_home{ width:13px; height:13px; color:var(--SlateGrey); vertical-align:-1px; margin-right:var(--Pad2); }
.PAG_pageHead{ display:flex; align-items:center; justify-content:space-between; gap:var(--Pad24); padding:var(--Pad20) var(--Pad28); margin:0; border-radius:0; background:var(--Bronze); box-shadow:0 2px 12px rgba(0,0,0,0.15); max-width:none; }
.PAG_pageHead .TXT_h2{ color:var(--White); }
.PAG_pageHead .TXT_subtitle{ color:rgba(255,255,255,0.8); }
.CARD_caseHead{ display:flex; align-items:center; justify-content:space-between; padding:var(--Pad10) var(--Pad18); margin:0 0 var(--Pad28) 0; background:linear-gradient(180deg,#a8894d 0%,#9a7d44 20%,var(--Bronze) 40%,var(--Bronze) 60%,#9a7d44 80%,#a8894d 100%); box-shadow:0 2px 12px rgba(0,0,0,0.15); }
.SHELL_sidecaseHead{ display:flex; align-items:center; gap:var(--Pad12); flex:1; }
.SHELL_sidecaseHead.LYT_right{ flex-direction:row-reverse; text-align:right; }
.CARD_caseHeadPhoto{ width:52px; height:52px; border-radius:var(--Pad8); object-fit:cover; border:2px solid rgba(255,255,255,0.25); flex-shrink:0; background:var(--White); }
.CARD_caseHeadRole{ font-family:var(--FontSans); font-size:var(--text-xs); font-weight:var(--weight-semibold); text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.55); }
.CARD_caseHeadName{ font-family:var(--FontDisplay); font-size:var(--title-lg); font-weight:var(--weight-extrabold); color:var(--White); }
.CARD_caseHeadCenter{ text-align:center; padding:0 var(--Pad24); flex-shrink:0; }

.CARD_caseHeadCase{ font-family:var(--FontMono); font-size:var(--text-lg); font-weight:var(--weight-semibold); color:rgba(255,255,255,0.85); white-space:nowrap; }
.CARD_caseHeadPriest{ width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:top; background:var(--White); border:2px solid rgba(255,255,255,0.5); margin:6px auto 3px; display:block; }
.CARD_caseHeadManaged{ font-family:var(--FontSans); font-size:var(--text-xs); color:rgba(255,255,255,0.75); white-space:nowrap; }
.MENU_head{ display:flex; align-items:center; gap:var(--Pad10); flex-shrink:0; }
.BTN_head{ display:inline-flex; align-items:center; gap:var(--Pad8); height:38px; padding:0 var(--Pad16); font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--White); text-decoration:none; border:1px solid rgba(255,255,255,0.15); border-radius:var(--Pad8); background:rgba(255,255,255,0.12); cursor:pointer; white-space:nowrap; backdrop-filter:blur(4px); }
.BTN_head:hover{ background:rgba(255,255,255,0.22); border-color:rgba(255,255,255,0.35); }
.ICON_head{ width:16px; height:16px; flex-shrink:0; filter: invert(1) brightness(2); }
.PAG_pageHead .BADGE{ background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.3); color:var(--White); }

@media(max-width:768px){
.CARD_caseHead{ flex-wrap:wrap; gap:var(--Pad12); padding:var(--Pad16) var(--Pad20); justify-content:center; }
  .SHELL_sidecaseHead{ flex:none; }
  .CARD_caseHeadPhoto{ width:40px; height:40px; }
  .CARD_caseHeadName{ font-size:var(--title-md); }
  .CARD_caseHeadCase{ font-size:var(--text-md); }
  .CARD_caseHeadCenter{ padding:0 var(--Pad12); }
}

/* ==========================================================================
   Component: Case Menu Tabs (.MENU_case / .TAB_case)

   Purpose:
   Dark navy tab bar shown on every case-scoped page, one row under
   .CARD_caseHead. Links between the 12 case-scoped sub-pages
   (Summary, Requisition, Intake, Parties, Hearings, Documents, Evidence,
   Communications, Notes, Timeline, Audit, Decree).

   Used in:
   Every admin-case-*.html page. The DOM is built at runtime by app.js
   renderCaseMenu(); the CSS below styles that generated markup.

   Main classes:
   - .MENU_case         - outer navy bar
   - .MENU_caseInner    - flex row of tabs (no wrap)
   - .TAB_case          - each tab (anchor)
   - .TAB_case.IS_active - the tab for the current page
   - .TAB_case:hover
   - .ICON_caseTab      - icon inside a tab
   - .TAB_case_label    - text under the icon

   JavaScript:
   - app.js renderCaseMenu() writes both an inline <style> block and the
     <a class="TAB_case"> anchors. The inline <style> mirrors the rules
     below so the tabs can render even before styles.css has loaded.
     See docs/dynamic-selector-safelist.md for the runtime templates.
   - The active tab is chosen from window.location.pathname.

   Notes:
   - The vertical divider between tabs is a ::before on the second-child+
     tabs. Do not remove the .TAB_case+.TAB_case::before rule.
   - IS_active applies both a gold background AND makes the icon fully
     opaque via .TAB_case.IS_active .ICON_caseTab.
   ========================================================================== */

/* =========================================================
   6b. CASE MENU TABS
   ========================================================= */

.MENU_case{ background:var(--CharcoalNavy); border-radius:var(--Radius8); margin-bottom:var(--Pad24); padding:var(--Pad10); }
.MENU_caseInner{ display:flex; flex-wrap:wrap; gap:var(--Pad2); }
.TAB_case{ display:inline-flex; align-items:center; padding:var(--Pad8) var(--Pad14); font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-regular); color:rgba(245,244,242,0.7); text-decoration:none; border-radius:var(--Pad4); border:1px solid transparent; white-space:nowrap; }
.TAB_case:hover{ color:#f5f4f2; background:rgba(255,255,255,0.08); }
.TAB_case.IS_active{ color:#fff; font-weight:var(--weight-semibold); background:rgba(204,153,0,0.22); border-color:rgba(204,153,0,0.4); }

/* ==========================================================================
   Component: Cards (.CARD family)

   Purpose:
   The base surface for every framed panel in the app - dashboards,
   forms, tables, session frames, decree frames. Everything that reads
   as "a bordered content block with a title and a body" is a .CARD.

   Used in:
   Every ctm-admin/*.html page has multiple .CARD instances.

   Main classes:
   - .CARD                        - base container: border, radius, shadow
   - .CARD.MOD_flush              - variant with no inner padding
                                     (used when the child fills the frame,
                                      e.g. session lists, decree bodies)
   - .CARD_head                   - top row with title + right actions
   - .CARD_title / .CARD_subtitle - typography inside the head
   - .CARD_body                   - main content region
   - .CARD_footer                 - optional footer row
   - .CARD.IS_collapsible         - marks a card as a disclosure
   - .CARD.IS_collapsible.IS_expanded - the open state
   - .CARD_collapsibleBody        - the body that gets hidden/shown

   Case-family CARDs (compound-heavy sub-components):
   - .CARD_caseHead                    - the bronze case-context bar (§6)
   - .CARD_case / .CARD_caseCard       - per-case row on the sessions grid
   - .CARD_caseOverviewCell            - overview cell inside a case card
   - .CARD_previewInfo / .CARD_previewInfoRow / etc. - preview panel
   - .CARD_stageRow                    - workflow-stage editor row

   JavaScript:
   - Disclosure widgets flip .IS_expanded via setDisclosure() /
     toggleDisclosure() in app.js. Those helpers also keep aria-expanded
     on the .JS_collapseToggle button in lockstep with the class.

   Notes:
   - The .CARD box (border, radius, shadow) is defined ONCE below and
     inherited by every variant. Do not duplicate the shadow into
     variant rules.
   - A card that starts open ships .IS_expanded on the container.
     The disclosure helper syncs aria-expanded on load.
   ========================================================================== */

/* =========================================================
   7. CARDS
   ========================================================= */

/* ===== UNIVERSAL CARD — every card uses this one spec.
   STANDARD CARD PADDING: 16px vertical / 24px horizontal — applies to every card body. ===== */
.CARD{
  background: var(--OffWhite);
  border: 1px solid var(--BorderGrey);
  border-radius: var(--Radius8);
  box-shadow: var(--ShadowCard);
  padding: 16px 24px;
}
/* RULE: a card nested inside another card gets smaller padding and a White background */
.CARD .CARD{
  background: var(--White);
  padding: 12px 16px;
}
/* Flush variant — full-bleed headers/tables inside, so no padding */
.CARD.MOD_flush{
  padding: 0;
  overflow: hidden;
}
.CARD.MOD_flush + .CARD.MOD_flush{ margin-top:var(--Pad16); }
.PANEL_body{ padding:16px 24px; }
.CARD.MOD_flush .BTN{ display:inline-flex; align-items:center; justify-content:center; gap:var(--Pad6); padding:6px 16px; font-family:var(--FontSans); font-size:var(--text-sm); font-weight:var(--weight-semibold); line-height:1.5; border-radius:6px; border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; }
.SECTION_headerRight .BTN{ min-width:80px; white-space:nowrap; text-align:center; }
/* UNIVERSAL CARD HEADING — same spec everywhere */
.SECTION_header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:var(--Pad20); padding-bottom:8px; border-bottom:1px solid var(--BorderGrey); }
/* Inside flush cards the heading is inset via margins — the divider never touches the card edges */
.CARD.MOD_flush .SECTION_header{ margin:0 24px 8px 24px; padding:16px 0 8px 0; }
/* Collapsed card: heading is the last visible row — no divider beneath it */
/* ==========================================================================
   Disclosure (collapsible section)
   Markup:  <div class="CARD MOD_flush IS_collapsible [IS_expanded]">
              <div class="SECTION_header"> … <button class="JS_collapseToggle"
                   aria-expanded="true|false" aria-controls="<body id>"> </div>
              <div class="CARD_collapsibleBody" id="<body id>"> … </div>
            </div>
   `.IS_collapsible` marks a card as a disclosure; `.IS_expanded` is the open state.
   Default (no `.IS_expanded`) is closed, matching aria-expanded="false".
   The `.IS_collapsible` marker is required — without it `:not(.IS_expanded)` would
   also match the ~40 non-collapsible `.CARD.MOD_flush` cards.
   JS toggles `.IS_expanded` and `aria-expanded` together; see each page's script.
   ========================================================================== */
.IS_collapsible:not(.IS_expanded) .SECTION_header{ border-bottom:none; margin-bottom:0; }
/* UNIVERSAL CARD TITLE — one look for every card heading.
   Merged 2026-08-06 with the duplicate `.CARD_title` that lived in the
   dissolution-typography section; the merged body below is the exact
   computed style both rules were producing together. */
.CARD_title{
  font-family: var(--FontDisplay);
  font-size: var(--text-md);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--NavyBlue);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
  margin: 0 0 var(--Pad4) 0;
}
.SECTION_headerLeft{ display:flex; align-items:center; gap:var(--Pad12); flex:1; min-width:0; }
.SECTION_headerRight{ display:flex; align-items:center; gap:var(--Pad12); flex-wrap:wrap; justify-content:flex-end; }
.CARD_case .SECTION_headerRight{ flex-shrink:0; width:140px; }
.SECTION_divider{ display:flex; align-items:center; gap:var(--Pad8); padding:var(--Pad16) var(--Pad20) var(--Pad6); }
.SECTION_divider svg{ width:14px; height:14px; color:var(--NavyBlue); flex-shrink:0; }
.SECTION_divider span{ font-family:var(--FontDisplay); font-size:var(--text-md); font-weight:var(--weight-extrabold); letter-spacing:0.05em; color:var(--NavyBlue); white-space:nowrap; text-transform:uppercase; }
.SECTION_divider .LYT_divLine{ flex:1; height:1px; background:var(--NavyBlue); opacity:0.25; }
.SECTION_divider + .GRID_p, .SECTION_divider + .GRID_caseOverview{ padding-left:var(--Pad40); }
.SECTION_divider + .GRID_p .TBL_pCell, .SECTION_divider + .GRID_caseOverview .CARD_caseOverviewCell{ padding:var(--Pad14) var(--Pad20); }
.CARD_collapsibleBody{ padding:16px 24px; }
.IS_collapsible:not(.IS_expanded) .CARD_collapsibleBody{ display:none; }
.GRID_banner{ display:grid; grid-template-columns:1fr 280px; gap:var(--Pad24); align-items:start; padding:16px 24px; }
.TXT_bannerTitleRow{ display:flex; align-items:center; gap:var(--Pad14); flex-wrap:wrap; margin-bottom:var(--Pad12); position:relative; }

/* ==========================================================================
   Component: Buttons (.BTN family)

   Purpose:
   Every clickable rectangular action in the app - primary/secondary form
   actions, table row actions, dialog buttons, header actions. All share
   the same box (height, radius, focus ring); the modifier picks the
   colour intent.

   Used in:
   Every page. Concentrated in forms, tables, and modal footers.

   Base + variants:
   - .BTN                   - base box (height 32px, radius, focus)
   - .BTN_primary           - navy fill for the main action
   - .BTN_accent            - gold-accent secondary action
   - .BTN_ghost             - transparent with border only
   - .BTN_white             - white pill button (used on bronze bars)
   - .BTN_danger / .BTN_dangerTint / .BTN_dangerSolid - destructive actions
   - .BTN_icon              - square icon-only button (32x32)
   - .BTN_docPreview        - document-preview action
   - .BTN_upload / .BTN_ocr - document intake actions
   - .BTN_head              - header action (larger, transparent on bronze)
   - .BTN_close             - modal close (X) button
   - .BTN_save / .BTN_cancel - form-footer shortcuts
   - .BTN.MOD_sm            - compact variant
   - .BTN_pill / .BTN_pillGhost / .BTN_pillLabel - pill-shaped variants

   States:
   - :hover, :focus-visible, :active, :disabled - handled uniformly on
     the base class; every variant inherits these.

   Notes:
   - Button height is standardised to 32px (see the Button-height standard
     section at the bottom of this file). Do not add per-variant heights.
   - .BTN_white is used across every bronze bar (dashboard, session
     header, case-management head). If you change its background, the
     bronze bars go with it.
   - Every button in the app should be a real <button> or <a>, not a
     <div> or <span>. See docs/retained-inline-handlers.md for the 28
     onclick="location.href='…'" sites that still need to convert.
   ========================================================================== */

/* =========================================================
   8. BUTTONS
   ========================================================= */

.BTN{ display:inline-flex; justify-content:center; align-items:center; gap:var(--Pad6); padding:6px 16px; border-radius:6px; border:1px solid var(--NavyBlue); background:var(--NavyBlue); color:var(--White); font-family:var(--FontSans); font-size:var(--text-sm); font-weight:var(--weight-semibold); line-height:1.5; text-align:center; text-decoration:none; cursor:pointer; user-select:none; }
.BTN:hover{ background:var(--NavyBlueDark); border-color:var(--NavyBlueDark); }
.BTN_primary{ background:var(--NavyBlue); color:var(--White); border-color:var(--NavyBlue); }
.BTN_primary:hover{ background:var(--NavyBlueDark); border-color:var(--NavyBlueDark); }

.BTN_white.BTN_dangerTint{ color:#c2473a; border-color:#c2473a; }
.BTN_white.BTN_dangerTint:hover{ background:#c2473a; color:#fff; }

/* Hero-style outlined button — THE standard secondary action button */
.BTN_white{
  padding: 6px 16px;
  border-radius: 6px;
  font-family: var(--FontSans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: 1px solid var(--NavyBlue);
  background: transparent;
  color: var(--NavyBlue);
}
.BTN_white:hover{ background: var(--NavyBlue); color: #fff; }
.BTN_white img{ width: 14px; height: 14px; flex-shrink: 0; }

.BTN_sm{ padding:6px 16px !important; font-size:var(--text-sm) !important; }
.BTN svg{ width:20px; height:20px; flex:none; }
.BTN:disabled{ opacity:0.65; cursor:not-allowed; box-shadow:none; pointer-events:none; }
.BTN:active:not(:disabled){ box-shadow:inset 0 3px 5px rgba(0,0,0,0.125); }
.JS_collapseToggle{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:none; background:transparent; cursor:pointer; border-radius:var(--Radius8); color:var(--SlateGrey); padding:0; }
/* OUTER-layer collapse toggle: solid circle, inverted colors (white arrow) —
   distinguishes the outer card's expander from inner expanders */
.JS_collapseToggle.TGL_circle{ width:28px; height:28px; border-radius:50%; background:var(--BorderGrey); border:1px solid #959392; color:var(--White); }
.JS_collapseToggle.TGL_circle .NAV_caretSm{ border-color:var(--White); opacity:1; width:8px; height:8px; }
.JS_collapseToggle.TGL_circle:hover{ background:#959392; }
/* Case-row headers are rows, not headings — no divider line */
.CARD_case .SECTION_header{ border-bottom:none; margin-bottom:0; }
.JS_collapseToggle:hover{ background:rgba(0,0,0,0.04); color:var(--InkBlack); }
.NAV_caretSm{ display:inline-block; width:10px; height:10px; border-right:var(--Pad2) solid currentColor; border-bottom:var(--Pad2) solid currentColor; transform:rotate(45deg); opacity:.7; }
.IS_collapsible:not(.IS_expanded) .NAV_caretSm{ transform:rotate(-135deg); }

/* ==========================================================================
   Component: Forms (.FORM_*, .FLD_*, .INP_*, .SEL_*, .TGL_*, .CHK_*, .RAD_*)

   Purpose:
   Every form control in the app. Inputs, selects, textareas, checkboxes,
   toggles, radio buttons, labels, groups, rows, hints, error states.

   Used in:
   admin-user-account (biggest form), admin-management (staff editor,
   canonical reasons editor), every case-* form (intake, requisition,
   parties, hearings edit), and the public-petition intake form.

   Main classes:
   - .FORM              - base form wrapper (rarely used directly)
   - .FORM_row          - one horizontal row of fields
   - .FORM_group        - a labelled group (label + control + hint)
   - .FORM_label        - the primary label above / beside a control
   - .FORM_hint         - muted helper text below a control
   - .FORM_row.HAS_error / .FLD_error - error state + message
   - .INP / .INP_f      - text inputs
   - .SEL / .SEL_mini   - selects
   - .TGL_seg           - segmented control (multi-state toggle)
   - .CHK / .RAD        - checkbox / radio row layouts

   States:
   - :focus / :focus-visible - navy focus ring (2px), soft shadow
   - :disabled  - muted, no cursor
   - HAS_error  - crimson border + error message shown

   JavaScript:
   - Change handlers are inline in most pages (`onchange="…"`); see
     docs/retained-inline-handlers.md for the migration plan.
   - .TGL_seg uses `data-val` on each button and swaps IS_active via
     per-page click handlers.

   Notes:
   - Text-input and select heights are standardised to 32px (matches the
     button standard) - do not vary per-page.
   - The multi-line textarea rules live in the modal section
     (§15) because textareas are only used inside modals.
   ========================================================================== */

/* =========================================================
   9. FORMS
   ========================================================= */

.FORM_control{ display:block; width:100%; padding:var(--Pad6) var(--Pad12); font-family:var(--FontMono); font-size:var(--text-md); font-weight:var(--weight-regular); line-height:1; letter-spacing:-0.07em; word-spacing:-0.25em; color:var(--InkBlack); background-color:var(--White); border:1px solid #dee2e6; border-radius:var(--Radius8); -webkit-appearance:none; -moz-appearance:none; appearance:none; }
/* ── FORM CONTROL STANDARD ──
   Every select gets a chevron arrow and consistent, equal padding.
   Every input/textarea uses the same inset. Placeholders hide on focus. */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("./assets/ico-chevron-down-dark.svg") !important;
  background-repeat:no-repeat !important;
  background-position:right 10px center !important;
  background-size:14px 10px !important;
  background-color:var(--White);
  padding:8px 32px 8px 12px !important;
  font-family:var(--FontMono);
  font-size:var(--text-md);
  color:var(--InkBlack);
  border:1px solid #dee2e6;
  border-radius:var(--Radius8);
  cursor:pointer;
}
:where(input[type="text"], input[type="search"], input[type="email"], input[type="date"], textarea){
  padding:8px 12px;
  box-sizing:border-box;
}
/* ── SEGMENTED TOGGLE ──────────────────────────────────────
   Separated pill buttons, active one filled navy. Used by the timeline filters
   and the Users Active/Previous switch. */
.TGL_seg{ display:flex; gap:var(--Pad6); }
.TGL_seg button{
  padding:5px 16px;
  font-family:var(--FontSans); font-size:var(--text-sm); font-weight:var(--weight-semibold);
  border:1px solid var(--BorderGrey); border-radius:var(--Pad4);
  background:var(--White); color:var(--SlateGrey);
  cursor:pointer; white-space:nowrap;
}
.TGL_seg button:hover{ border-color:var(--NavyBlue); color:var(--NavyBlue); }
.TGL_seg button.IS_on{ background:var(--NavyBlue); color:#fff; border-color:var(--NavyBlue); }

/* ── FORM CONTROL SURFACES ─────────────────────────────────
   Every editable surface — inputs, textareas, selects, date pickers and
   contenteditable rich-text bodies — sits on --White. Declared once here so pages
   can't reintroduce an off-white field. */
/* Checkboxes and radios keep their native rendering. */
input[type="checkbox"], input[type="radio"]{ background: none; }

/* ==========================================================================
   Utilities extracted from inline style attributes
   These replace repeated `style="…"` on markup. Each is documented with what
   it was extracted from so the intent is not lost.
   ========================================================================== */


/* Modal/dialog paragraph copy inside .MODAL_body. Extracted from
   `margin:0;font-family:var(--FontSans);font-size:var(--text-md);color:var(--InkBlack)`
   which appeared inline on 4 confirmation dialogs. */
.MODAL_bodyText{ margin:0; font-family:var(--FontSans); font-size:var(--text-md); color:var(--InkBlack); }

/* Hidden by default (non-animated). Same behaviour as [hidden] but survives
   CSS resets that redefine display for the element type. */

/* Muted body copy, used in dialog and card descriptions. Was written inline as
   `color:var(--SlateGrey);font-size:var(--text-sm)`. */

/* Muted body copy in modal footers / hint areas. Was inline as
   `font-family:var(--FontSans);font-size:var(--text-sm);color:var(--SlateGrey);margin-top:4px`. */
.UTIL_noteSm{ font-family:var(--FontSans); font-size:var(--text-sm); color:var(--SlateGrey); margin-top:4px; }

/* Compact spacing utilities (repeated inline). */
.UTIL_mb24{ margin-bottom:24px; }
.UTIL_mr4 { margin-right:4px; }

/* Rows and headers that navigate or expand on click. Applied to <tr> elements
   with an onclick handler and to clickable section headers.
   JS never writes .style.cursor on these (only on document.TXT_body, in the
   document-explorer resizer), so this is purely presentational. */

/* Icon sitting to the left of button text. Extracted from repeated
   `style="margin-right:5px;vertical-align:middle"` on <img> inside buttons. */
.BTN_icon{ margin-right:5px; vertical-align:middle; }

/* Search-field icon, absolutely positioned inside .SEARCH_wrap.
   Extracted from repeated inline positioning on the Cases / Search / Sessions
   search bars. .SEARCH_wrap supplies the positioning context. */
.SEARCH_wrap img{ position:absolute; left:14px; top:50%; transform:translateY(-50%); pointer-events:none; }

/* Destructive confirm button inside a modal footer. Extracted from repeated
   inline `background:var(--Crimson);color:#fff;border:none`. */
.BTN_dangerSolid{ background:var(--Crimson); color:#fff; border:none; }

/* ── WATERMARKS ────────────────────────────────────────────
   Placeholder text and in-field/empty-state icons all read at --BorderGrey.
   Declared once here; pages must not restate a placeholder colour. */
input::placeholder, textarea::placeholder,
.FORM_control::placeholder, .INP_q::placeholder, .SEARCH_hist::placeholder,
.CARD_rteRteBody:empty::before, [contenteditable]:empty::before{
  color: var(--BorderGrey);
  opacity: 1;
}
/* Source SVGs stroke in currentColor, which resolves to black when loaded via
   img/background-image — invert(75.3%) maps that black to #c0c0c0 (--BorderGrey). */
.ICON_watermark{ filter: invert(75.3%); }

input:focus::placeholder, textarea:focus::placeholder{ color:transparent; }
.FORM_control:focus{ color:var(--InkBlack); background-color:var(--White); border-color:var(--NavyBlue); outline:0; box-shadow:0 0 0 0.25rem rgba(37,99,160,0.25); }
.FORM_control:disabled{ background-color:#e9ecef; opacity:1; }
textarea.FORM_control{ min-height:calc(1.5em + 12px + 2px); resize:vertical; }
.CARD_rteRteWrap{ border:1px solid #d1d5db; border-radius:var(--Pad8); overflow:hidden; }
.CARD_rteRteWrap:focus-within{ border-color:#4a7fa5; box-shadow:0 0 0 3px rgba(74,127,165,0.12); }
.CARD_rteRteToolbar{ display:flex; align-items:center; gap:var(--Pad2); padding:var(--Pad6) var(--Pad10); flex-wrap:wrap; border-bottom:1px solid #d1d5db; background:var(--White); }
.BTN_rteTool{ width:28px; height:26px; border:none; background:transparent; border-radius:var(--Pad4); cursor:pointer; display:flex; align-items:center; justify-content:center; color:#6b7280; font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-extrabold); }
.BTN_rteTool:hover{ background:#e5e7eb; color:#111827; }
.BTN_rteTool.IS_active{ background:rgba(74,127,165,0.12); color:var(--NavyBlue); }
.CARD_rteRteTbSep{ width:1px; height:16px; background:#d1d5db; margin:0 var(--Pad2); }
.CARD_rteRteBody{ padding:var(--Pad12) var(--Pad14); outline:none; font-family:var(--FontSans); font-size:var(--text-md); line-height:1.7; color:var(--InkBlack); background:var(--White); }
.CARD_rteRteBody:empty::before{ pointer-events:none; content:attr(data-placeholder); }
select.FORM_control{ background-image:url("./assets/ico-chevron-down-dark.svg"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px 12px; padding-right:var(--Pad36); }
/* Canonical .FORM_group — merged 2026-08-06 from three duplicate definitions
   (admin margin-only, dissolution flex-column x 2). Preserves the effective
   computed style each page was already receiving. */
.FORM_group{ display:flex; flex-direction:column; gap:var(--Pad4); margin-bottom:var(--Pad16); }
.SEL_mini{ border:1px solid #dee2e6; background:var(--White); padding:var(--Pad6) var(--Pad12); border-radius:var(--Radius8); outline:none; font-family:var(--FontMono); font-size:var(--text-md); font-weight:var(--weight-regular); color:var(--InkBlack); cursor:pointer; }
.SEL_mini:focus{ border-color:var(--NavyBlue); box-shadow:0 0 0 0.25rem rgba(37,99,160,0.25); }

/* ==========================================================================
   Component: Badges & Pills (.BADGE, .AVATAR_party, .STAT_number families)

   Purpose:
   Small data-display capsules. The base .BADGE is a 21px-high pill with
   font, padding, border, radius, and centre-alignment already set. Every
   variant only changes colour, and (rarely) size.

   Used in:
   Every list, every table, every row. Concentrated on the archived,
   cases, search, historical-sessions, and case-hearings pages.

   Base:
   - .BADGE                 - 21px pill with muted background and border

   Party avatars (JS-emitted via partyPill/userPill/clergyPill):
   - .AVATAR_party          - name pill with gender-tinted background
   - .AVATAR_party.MOD_female / .MOD_male / .MOD_clergy - colour variants
   - .AVATAR_party.MOD_sm   - compact variant for dense tables

   Outcome pills (session/decree outcomes):
   - .BADGE_outcome         - the outcome pill on a case row
   - .BADGE_outcomeGranted / _Denied / _Withdrawn / _Deferred /
     _Settled / _Review - colour by outcome
   - .BADGE_history         - historical variant, larger and centred

   Domain-specific pills:
   - .BADGE_reason          - reason pill (colour from CASE_REASONS via
                              reasonPill(), inline style="background:...")
   - .BADGE_neutral         - grey pill for "System" and offices
   - .BADGE_caseId          - mono case-number pill; targeted by the
                              case-id prefix decorator in app.js
   - .BADGE_typeCall / _typeEmail / _typeInbound - comm-type pills
   - .BADGE_taskCase / _taskDoc / _taskPerson / _taskSession - task pills
   - .BADGE_kbd             - keyboard-shortcut hint
   - .BADGE_statusLive      - "live now" indicator with pulsing dot

   Stat numbers (used on dashboard cards):
   - .STAT_number           - large mono number
   - .STAT_label            - small caption under a stat

   JavaScript:
   - .AVATAR_party is BUILT AT RUNTIME by partyPill() in app.js. The
     class token depends on the `gender` argument. Adding another gender
     modifier means updating both the CSS and partyPill().
   - .BADGE_reason is BUILT AT RUNTIME by reasonPill() with a runtime
     style="background:...;color:...;border-color:..." derived from
     window.CASE_REASONS.
   - .BADGE_caseId is a target of CASE_ID_SELECTOR - do not remove
     without updating the selector in app.js.

   Notes:
   - Every pill is exactly 21px tall. If you're tempted to add a taller
     variant, use .BADGE_history instead.
   - Colour tokens for the party pills live in the pill section below;
     they map onto the underlying gender colour palette.
   ========================================================================== */

/* =========================================================
   10. BADGES & PILLS
   ========================================================= */

@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(21,128,61,0.15); } 50%{ box-shadow:0 0 0 6px rgba(21,128,61,0.08); } }
/* Status / outcome pills share the .BADGE box exactly — only colours vary.
   Declared here so pages can't resize them independently. */
.BADGE_outcome, .BADGE_history{
  display:inline-flex; align-items:center; justify-content:flex-start; gap:5px;
  padding:5px 10px 5px 6px; border-radius:var(--Pad4);
  font-family:var(--FontMono); font-size:var(--text-md); font-weight:var(--weight-regular);
  line-height:1; letter-spacing:-0.07em; word-spacing:-0.25em;
  text-align:left; white-space:nowrap; vertical-align:middle;
  border:1px solid transparent; box-sizing:border-box;
}
/* Outcome-pill colour variants. Consolidated 2026-08-06 from duplicated
   page-local blocks in admin-archived and admin-session-summary. */
.BADGE_outcomeDenied    { background:rgba(185,28,28,.08);   border-color:rgba(185,28,28,.35);   color:#b91c1c; }
.BADGE_outcomeDeferred  { background:rgba(217,119,6,.08);   border-color:rgba(217,119,6,.35);   color:#b45309; }
.BADGE_outcomeGranted, .BADGE_outcomeSettled{ background:rgba(21,128,61,.08);   border-color:rgba(21,128,61,.35);   color:#15803d; }
.BADGE_outcomeWithdrawn { background:rgba(100,100,100,.08); border-color:rgba(100,100,100,.35); color:#666; }
.BADGE_outcomeReview    { background:rgba(30,77,123,.08);   border-color:rgba(30,77,123,.3);    color:var(--NavyBlue); }
/* Canonical pill — identical shape/typography to .AVATAR_party (22px tall,
   Mono 12/400, 5px gap, 5/10/5/6 padding, 4px radius, tight letter/word-spacing). */
.BADGE{ display:inline-flex; align-items:center; justify-content:flex-start; gap:5px; padding:5px 10px 5px 6px; border-radius:var(--Pad4); font-family:var(--FontMono); font-size:var(--text-md); font-weight:var(--weight-regular); line-height:1; letter-spacing:-0.07em; word-spacing:-0.25em; text-align:left; white-space:nowrap; vertical-align:middle; box-sizing:border-box; background:var(--OffWhite); border:1px solid rgba(0,0,0,0.08); color:var(--InkBlack); }
table .BADGE, .GRID .BADGE{ display:block; width:100%; box-sizing:border-box; text-align:left; }
.BADGE_muted{ background:rgba(117,113,109,0.1); border:1px solid rgba(117,113,109,0.2); color:var(--SlateGrey); }
.BADGE_primary{ background:rgba(30,77,123,0.08); border:1px solid rgba(30,77,123,0.3); color:var(--NavyBlue); }
.BADGE_success{ background:rgba(21,128,61,0.1); border:1px solid rgba(21,128,61,0.35); color:var(--Green); }
.BADGE_info{ background:rgba(52,152,219,0.12); border:1px solid rgba(29,111,165,0.35); color:#1d6fa5; }
.BADGE_warn{ background:rgba(243,156,18,0.14); border:1px solid rgba(200,127,10,0.4); color:#b45309; }
.BADGE_danger{ background:rgba(185,28,28,0.1); border:1px solid rgba(185,28,28,0.35); color:var(--Crimson); }
/* Neutral pill — offices and non-person actors (System, Tribunal Secretary) */
.BADGE_neutral{ background:var(--OffWhite); border:1px solid var(--BorderGrey); color:var(--WarmGrey); }
/* Reason pill — every CASE_REASONS entry uses the same maroon (#7b1e1e).
   Lifted from an inline style emitted by reasonPill() in app.js. */
.BADGE_reason{ background:rgba(123,30,30,0.1); border:1px solid rgba(123,30,30,0.35); color:rgb(123,30,30); }
/* Green pill — inherits canonical shape from .BADGE; colours only. */
.BADGE_green{ background:#80b393; border:1px solid #1d733d; color:#046a2a; }
.BADGE_yellow{
  align-items:center;
  padding:var(--Pad4) var(--Pad10);
  border-radius:var(--Pad4);
  font-family:var(--FontMono);
  font-size:var(--text-md);
  font-weight:var(--weight-regular);
  line-height:1;
  white-space:nowrap;
  vertical-align:middle;
  background:#cf8077;
  border:1px solid #be1e0d;
  color:#fff;
}

/* ==========================================================================
   Component: Tribunal Sessions & Case Cards
     (.CARD_case, .CARD_caseRow*, session-list rows)

   Purpose:
   The row-per-case rendering used everywhere cases are listed - the
   dashboard preview, the sessions-upcoming assignment grids, the
   historical session expand-cards.

   Used in:
   - admin-index (dashboard preview rows).
   - admin-sessions (past-session expand cards).
   - admin-sessions-upcoming (Cases-to-Assign + Cases-Assigned grids).
   - admin-sessions-historical (per-session case rows).
   - admin-cases (main cases list, uses a variant).

   Main classes:
   - .CARD_case              - single case card
   - .CARD_caseCard          - the outer container for an expand-card
   - .CARD_caseUnassigned    - variant for "not yet assigned" cases
   - .CARD_caseRow           - the base row layout
   - .CARD_caseRowAligned    - grid-aligned row inside a card
   - .CARD_caseRowParty      - column that shows a party pill
   - .CARD_caseExpandedBody  - the body region shown when open
   - .CARD_caseHead*         - see §6 (page-header block)

   JavaScript:
   - Rows are clickable via the site-wide data-href handler (see §5
     handler-migration notes in retained-inline-handlers.md); each row
     carries data-href="admin-case-summary.html" and navigates on click.
   - Case-card open/close (on sessions-upcoming) uses IS_collapsible +
     IS_expanded via setDisclosure().
   ========================================================================== */

/* =========================================================
   11. TRIBUNAL SESSIONS & CASE CARDS
   ========================================================= */

.CARD_tribUpcomingStack{ display:flex; flex-direction:column; gap:0; }
.CARD_kpiStack{ display:flex; flex-direction:column; gap:var(--Pad12); }
.CARD_kpi{ border:1px solid rgba(0,0,0,0.08); border-radius:var(--Radius8); padding:var(--Pad16) var(--Pad18); }
.CARD_kpiBlue{ background:#eaf1f7; border-color:#c5d6e5; }
.CARD_kpiBlue .CARD_kpiValue{ color:var(--NavyBlue); }
.CARD_kpiGold{ background:#f3efe8; border-color:#d9d0c1; }
.CARD_kpiGold .CARD_kpiValue{ color:var(--Bronze); }
.CARD_kpiRow{ display:flex; align-items:center; justify-content:space-between; gap:var(--Pad14); }
.CARD_kpiValue{ margin:0; font-family:var(--FontDisplay); font-weight:var(--weight-extrabold); font-size:var(--title-xl); line-height:1; color:var(--NavyBlue); letter-spacing:-0.02em; }
.LIST_case{ display:flex; flex-direction:column; gap:var(--Pad16); }
.CARD_case{ border:1px solid #c8ccd1; border-radius:var(--Radius8); background:#f5f4f2; overflow:hidden; }
.CARD_caseUnassigned{ background:var(--White); border-color:var(--BorderGrey); }
.CARD_case.IS_collapsible:not(.IS_expanded) .CARD_collapsibleBody{ display:none; }
.CARD_case.IS_collapsible:not(.IS_expanded) .NAV_caretSm{ transform:rotate(-135deg); }
.CARD_casePreview{ padding:var(--Pad16) var(--Pad20); }
.CARD_caseExpandedBody, .CARD_commPreviewRte, .CARD_rationaleEditor, .FORM_commInput, .INP_f, .INP_intakeTitle, .SEL_f{ background:var(--White); }
.TXT_caseRowTitle{ font-weight:var(--weight-extrabold); font-size:var(--text-lg); font-family:var(--FontDisplay); letter-spacing:0.005em; }
.CARD_caseRowAligned{ display:grid; grid-template-columns:minmax(150px,200px) minmax(150px,200px) minmax(100px,150px) minmax(80px,110px) minmax(110px,130px); align-items:center; column-gap:0; min-width:0; }
.CARD_caseRowAligned > .CARD_caseRowParty{ position:relative; min-width:0; padding:0 var(--Pad14); }
.CARD_caseRowAligned > .CARD_caseRowParty:first-child{ padding-left:0; }
.CARD_caseRowAligned > .CARD_caseRowParty + .CARD_caseRowParty{ padding-left:var(--Pad14); }
.CARD_caseRowAligned > .CARD_caseRowParty + .CARD_caseRowParty::before{ content:""; position:absolute; left:0; top:15%; bottom:15%; width:1px; background:linear-gradient(to bottom,transparent,rgba(0,0,0,0.12) 40%,rgba(0,0,0,0.12) 60%,transparent); }
.CARD_caseRowParty{ display:flex; flex-direction:column; gap:var(--Pad2); min-width:0; }
/* pills size to their content, never stretched by the flex column (prevents clipped names) */
.CARD_caseRowParty > .AVATAR_party, .CARD_caseRowParty > .BADGE{ align-self:flex-start; }

/* =========================================================
   MONO TEXT TIGHTENING — declared ONCE, here.
   Applies only to mono DATA text (ids, dates, values, pills, table cells).
   Prose and form controls opt out below: they override font-family to a
   proportional face, where negative word-spacing collapses the word gaps.
   ========================================================= */
.TBL tbody td,
.FORM_value, .CARD_childEntry, .UTIL_mono, .NAV_monoId, .TBL_tdMono, .TBL_tdId, .BADGE_caseId,
.BADGE, .AVATAR_party, .BADGE_outcome, .BADGE_history,
.CARD_caseHeadCase, .HDR_heroPrevDate, .HDR_heroPrevMeta strong,
.CARD_timelineDate, .CARD_activityDate, .CARD_histCount strong,
.CARD_upcomingRowDate, .CARD_upcomingRowId, .STAT_upcomingRow, .STAT_upcomingRow strong,
.CARD_histSessionDate, .CARD_histSessionNum, .STAT_histSession, .STAT_histSession strong,
.CARD_livingDetail, .CARD_histCommSubject, .CARD_histCommDate, .CARD_histCommParty, .CARD_histCommType{
  letter-spacing: -0.07em;
  word-spacing: -0.25em;
}

/* Opt-out: anything that is prose or a form control keeps normal spacing,
   even when it inherits/extends a mono class. */
.TXT_proseVal, .CARD_prose, .CARD_minutesBody, .TXT_reqText, .MODAL_recReadonly, .CARD_rteRteBody, .MODAL_commBody, .PROGRESS_notice, .TXT_caption, .TXT_subtitle, input, textarea, select, option, button, .BTN, .BTN_white, .BTN_docPreview{
  letter-spacing: normal;
  word-spacing: normal;
}

.FORM_label{ display:block; font-family:var(--FontSans); font-size:var(--text-xs); font-weight:var(--weight-regular); text-transform:uppercase; letter-spacing:0.08em; color:var(--NavyBlue); line-height:1; margin-bottom:var(--Pad4); }
.FORM_value{ font-family:var(--FontMono); font-size:var(--text-md); font-weight:var(--weight-regular); line-height:1; letter-spacing:-0.07em; word-spacing:-0.25em; color:var(--InkBlack); }
.CARD_assign{ background:#eaf1f7; border:1px solid #c5d6e5; border-radius:var(--Pad8); padding:var(--Pad10) var(--Pad16); margin-bottom:var(--Pad16); }
.CARD_assignInner{ display:flex; align-items:center; gap:var(--Pad12); flex-wrap:wrap; }
.CARD_assignInner .SECTION_title{ margin-bottom:0; padding-bottom:0; border-bottom:none; }
.CARD_assign .TXT_caption{ margin:0; }
.BADGE_child{ display:inline-flex; align-items:center; gap:var(--Pad6); padding:var(--Pad4) var(--Pad12); background:#f3efe8; border-radius:var(--Pad20); font-size:var(--text-md); }
/* .BADGE_child .CARD_childName / .CARD_childMeta typography overrides removed
   2026-08-23 — child name/meta now render per their base class in every context. */

.HDR_kvMicro{ font-family:var(--FontDisplay); font-size:var(--text-sm); font-weight:var(--weight-extrabold); letter-spacing:0.02em; color:var(--Bronze); margin-top:var(--Pad16); margin-bottom:var(--Pad6); padding-top:var(--Pad10); border-top:1px solid var(--PageGrey); display:flex; align-items:center; gap:8px; }
.ICON_micro{ display:inline-flex; width:12px; height:12px; flex-shrink:0; color:var(--Bronze); }
.ICON_micro svg{ width:100%; height:100%; }
.CARD_previewInfo .HDR_kvMicro:first-of-type{ margin-top:0; padding-top:0; border-top:none; }
.CARD_childrenInline{ display:flex; gap:var(--Pad8); flex-wrap:wrap; }
.CARD_kvStackedRow{ display:flex; gap:var(--Pad24); flex-wrap:wrap; margin:1px 0; }
.CARD_kvStackedVal{ font-family:var(--FontMono); font-size:var(--text-md); font-weight:var(--weight-regular); color:var(--InkBlack); letter-spacing:0.01em; white-space:nowrap; }
.GRID_doc{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--Pad16); }
.CARD_previewTwoCol{ display:grid; grid-template-columns:1fr 1fr; gap:var(--Pad16); align-items:stretch; }
.CARD_previewTwoCol > .CARD_previewInfo{ min-height:0; }
.CARD_previewFullRow{ margin-top:var(--Pad16); }
.CARD_previewInfo{ background:var(--White); border:1px solid var(--BorderGrey); border-radius:var(--Pad8); padding:var(--Pad14) var(--Pad16); display:flex; flex-direction:column; }
.CARD_previewInfo .SECTION_title{ margin-bottom:var(--Pad10); padding-bottom:var(--Pad8); border-bottom:1px solid var(--PageGrey); }
.CARD_partyInner{ display:flex; gap:var(--Pad14); align-items:flex-start; flex:1; }
.AVATAR_square{ width:64px; height:64px; flex-shrink:0; border-radius:var(--Pad6); display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(139,111,71,0.12),rgba(139,111,71,0.22)); border:2px solid rgba(139,111,71,0.18); font-weight:var(--weight-extrabold); font-family:var(--FontDisplay); font-size:var(--title-md); color:var(--Bronze); overflow:hidden; }
.AVATAR_square img{ width:100%; height:100%; object-fit:cover; }
.CARD_previewPartyName{ font-family:var(--FontDisplay); font-size:var(--text-lg); font-weight:var(--weight-extrabold); margin-bottom:var(--Pad4); }
.CARD_kvStackedItem, .CARD_partySubItem{ display:flex; flex-direction:column; gap:1px; }
.TXT_kvStackedLabel, .TXT_partySubLabel{ font-family:var(--FontSans); font-size:var(--text-xs); font-weight:var(--weight-regular); text-transform:uppercase; letter-spacing:0.08em; color:var(--NavyBlue); line-height:1; }
.CARD_partySubVal{ font-family:var(--FontMono); font-size:var(--text-md); font-weight:var(--weight-regular); color:var(--InkBlack); letter-spacing:0.01em; line-height:1.4; }
.CARD_childName{ font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--InkBlack); }
.CARD_childMeta{ font-family:var(--FontMono); font-size:var(--text-md); font-weight:var(--weight-regular); color:var(--InkBlack); }
.TXT_reqTextWrap{ position:relative; }
.TXT_reqTextWrap.IS_collapsed .TXT_reqText{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.TXT_reqTextWrap.IS_collapsed::after{ content:""; position:absolute; bottom:0; left:0; right:0; height:32px; background:linear-gradient(to bottom,rgba(255,255,255,0),var(--White)); pointer-events:none; }
.TXT_reqText{ font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-regular); color:var(--SlateGrey); line-height:1.6; margin-top:var(--Pad8); }
.TGL_req{ background:none; border:none; padding:0; margin-top:var(--Pad8); cursor:pointer; font-family:var(--FontSans); font-size:var(--text-sm); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:0.06em; color:var(--NavyBlue); }
.TGL_req:hover{ opacity:0.7; }
.CARD_docItem{ display:flex; align-items:center; gap:var(--Pad10); padding:var(--Pad8) var(--Pad10); border-radius:var(--Pad6); text-decoration:none; color:inherit; position:relative; }
.CARD_docItem::after{ content:""; width:16px; height:16px; flex-shrink:0; opacity:0; background-image:url("./assets/ico-download-blue.svg"); background-size:contain; background-repeat:no-repeat; }
.CARD_docItem:hover::after{ opacity:1; }
.CARD_docItem:hover{ background:rgba(37,99,160,0.06); }
.ICON_doc{ width:20px; height:20px; flex-shrink:0; opacity:0.65; }
.CARD_docName{ font-family:var(--FontMono); font-size:var(--text-md); font-weight:var(--weight-regular); color:var(--NavyBlue); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.CARD_docMeta{ font-family:var(--FontSans); font-size:var(--text-xs); font-weight:var(--weight-regular); text-transform:uppercase; letter-spacing:0.06em; color:var(--SlateGrey); margin-top:1px; }
.SECTION_title{ font-weight:var(--weight-regular); font-size:var(--text-xs); letter-spacing:0.08em; text-transform:uppercase; font-family:var(--FontSans); color:var(--NavyBlue); margin-bottom:var(--Pad8); }
.CARD_party{ border:1px solid rgba(0,0,0,0.08); border-radius:var(--Radius8); padding:var(--Pad14); display:flex; gap:var(--Pad12); background:var(--OffWhite); }
.AVATAR_circle{ width:40px; height:40px; flex-shrink:0; border-radius:999px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(139,111,71,0.15),rgba(139,111,71,0.25)); border:2px solid rgba(139,111,71,0.2); font-weight:var(--weight-extrabold); font-family:var(--FontDisplay); font-size:var(--text-lg); color:var(--Bronze); letter-spacing:0.05em; }
.CARD_partyName{ font-weight:var(--weight-extrabold); font-family:var(--FontDisplay); font-size:var(--text-lg); color:var(--InkBlack); margin-bottom:var(--Pad2); }
.CARD_partyLine{ font-size:var(--text-md); font-weight:var(--weight-regular); color:var(--InkBlack); font-family:var(--FontMono); line-height:1.5; letter-spacing:0.01em; }
.BTN_assign{ flex-shrink:0; }
/* Consolidated 2026-08-06 from page-local duplicates. */
.CARD_foot{ display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 20px; }
.EMPTY{ padding:48px; text-align:center; font-size:var(--text-md); color:var(--SlateGrey); }
.LIST_hearings{ display:flex; flex-direction:column; gap:var(--Pad16); padding:0; max-height:640px; overflow:auto; }
.CARD_hearingRow{ display:grid; grid-template-columns:56px 1fr auto; border-radius:var(--Radius8); border:1px solid var(--BorderGrey); background:var(--White); overflow:hidden; align-items:center; }
.CARD_hearingRow.IS_dragging{ opacity:0.5; }
.CARD_hearingOrderCell{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--Pad4); padding:var(--Pad8) var(--Pad4); background:var(--White); border-right:1px solid var(--PageGrey); user-select:none; align-self:stretch; cursor:move; }
.CARD_hearingOrderNum{ font-weight:var(--weight-extrabold); font-size:var(--text-lg); font-family:var(--FontDisplay); color:var(--NavyBlue); letter-spacing:0.02em; }
.ICON_hearingReorder{ opacity:.5; font-size:var(--title-md); color:var(--NavyBlue); }
.CARD_hearingMain{ padding:var(--Pad14) var(--Pad24) var(--Pad14) var(--Pad12); min-width:0; overflow:hidden; }
.CARD_hearingRowAligned{ display:grid; grid-template-columns:160px 160px 220px auto; align-items:center; column-gap:0; min-width:0; }
.CARD_hearingRowAligned > .CARD_caseRowParty, .CARD_hearingRowAligned > .BADGE_hearingGroup{ position:relative; min-width:0; padding:0 var(--Pad14); }
.CARD_hearingRowAligned > .CARD_caseRowParty:first-child{ padding-left:0; }
.CARD_hearingRowAligned > .CARD_caseRowParty + .CARD_caseRowParty, .CARD_hearingRowAligned > .CARD_caseRowParty + .BADGE_hearingGroup{ padding-left:var(--Pad14); }
.CARD_hearingRowAligned > .CARD_caseRowParty + .CARD_caseRowParty::before, .CARD_hearingRowAligned > .CARD_caseRowParty + .BADGE_hearingGroup::before{ content:""; position:absolute; left:0; top:10%; bottom:10%; width:1px; background:linear-gradient(to bottom,transparent,rgba(0,0,0,0.12) 35%,rgba(0,0,0,0.12) 65%,transparent); }
.BADGE_hearingGroup{ display:flex; flex-direction:column; gap:var(--Pad6); align-items:flex-start; }
.BADGE_hearingGroup .BTN_pill{ justify-content:center; text-align:center; min-width:200px; }
.BTN_pill{ display:inline-flex; align-items:center; gap:var(--Pad4); padding:var(--Pad4) var(--Pad12); border-radius:6px; font-family:var(--FontSans); font-size:var(--text-sm); font-weight:var(--weight-regular); letter-spacing:0.01em; cursor:pointer; white-space:nowrap; border:1px solid transparent; line-height:1; }
.BTN_pill svg{ flex-shrink:0; }
.BTN_pillGhost{ background:transparent; border-color:rgba(0,0,0,0.15); color:var(--SlateGrey); }
.BTN_pillGhost:hover{ background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.2); color:var(--SlateGrey); }
.BTN_pillGhost:disabled{ opacity:0.35; cursor:not-allowed; }

.CARD_hearingUnassigned{ color:var(--Orange) !important; }
.MODAL_recDate{ font-family:var(--FontMono); font-size:var(--text-md); font-weight:var(--weight-regular); color:var(--InkBlack); margin-bottom:var(--Pad16); }
.MODAL_recReadonly{ font-size:var(--text-lg); font-weight:var(--weight-regular); color:var(--SlateGrey); line-height:1.7; padding:var(--Pad16) var(--Pad18); background:#fff; border-radius:var(--Pad8); border:1px solid rgba(0,0,0,0.06); }
.MODAL_body textarea{ width:100%; min-height:180px; padding:var(--Pad12) var(--Pad14); border:1px solid #d1d5db; border-radius:var(--Pad8); font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-regular); line-height:1.7; color:var(--InkBlack); resize:vertical; outline:none; box-sizing:border-box; }
.MODAL_body textarea:focus{ border-color:#4a7fa5; box-shadow:0 0 0 3px rgba(74,127,165,0.12); }
.CARD_hearingActions{ padding:0 var(--Pad16); display:flex; align-items:center; justify-content:flex-end; flex-shrink:0; width:80px; }

/* =========================================================
   12. DASHBOARD
   ========================================================= */

/* =========================================================
   13. SPACING / DIVIDERS
   ========================================================= */

.UTIL_mt12{ margin-top:var(--Pad12); }
.UTIL_spacer24{ height:24px; }
.UTIL_spacer32{ height:32px; }
.LYT_divider{ width:1px; min-height:16px; align-self:stretch; background:rgba(0,0,0,0.12); flex-shrink:0; }
.LYT_divider.LYT_dividerLight{ background:rgba(255,255,255,0.2); }

/* ==========================================================================
   Component: Toasts (.TOAST)

   Purpose:
   Short-lived notifications shown at the bottom-right of the viewport after
   an action succeeds or fails. Created by the toast() helper in per-page
   scripts; auto-dismisses after ~3s.

   Used in:
   Every page that has any save / delete / send action.

   Main classes:
   - .TOAST                 - the notification pill
   - .TOAST.IS_visible      - shown state (adds transform+opacity)

   JavaScript:
   The toast() helper is currently defined per-page in inline <script>
   (via `onclick="toast('Saved')"` handlers, 6 sites). Consolidation
   into app.js is on the follow-up list in docs/cleanup-plan.md.

   Notes:
   Both @keyframes toastIn and @keyframes toastOut were removed in the
   earlier cleanup passes; the toast now uses a class-toggle + CSS
   transition, not keyframes.
   ========================================================================== */

/* =========================================================
   14. TOASTS
   ========================================================= */

.TOAST_container{ position:fixed; bottom:var(--Pad24); right:var(--Pad24); z-index:9500; display:flex; flex-direction:column; gap:var(--Pad10); pointer-events:none; }
.TOAST{ display:flex; align-items:center; gap:var(--Pad10); padding:var(--Pad12) var(--Pad20); border-radius:var(--Pad8); font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--White); background:var(--CharcoalNavy); box-shadow:0 4px 16px rgba(0,0,0,0.2); pointer-events:auto; max-width:380px; }
/* used by showToast() in admin-sessions-upcoming.html */
.TOAST.TOAST_success{ background:var(--Green); }
.TOAST.TOAST_error{ background:var(--Crimson); }
.TOAST.TOAST_warning{ background:var(--Orange); }
.TOAST svg{ width:16px; height:16px; flex-shrink:0; stroke:var(--White); fill:none; }
.TOAST_dismiss{ margin-left:auto; background:none; border:none; color:rgba(255,255,255,0.7); cursor:pointer; font-size:var(--text-lg); padding:0 0 0 var(--Pad8); line-height:1; }
.TOAST_dismiss:hover{ color:var(--White); }
/* ==========================================================================
   Component: Universal Modal (.MODAL family)

   Purpose:
   Every dialog in the app uses this one shell. Open/close is done by
   toggling .UTIL_hidden on the outer .MODAL container; the shell itself
   is always display:flex.

   Used in:
   - admin-management: Edit User, Reset Password, Delete User, Delete
     Reason, Delete Stage, Purge Confirmation.
   - admin-case-hearings: Attendance modal, Reschedule modal.
   - admin-case-communications: Email modal (uses .MODAL_comm variant -
     see docs/merge-candidates.md for the consolidation proposal).
   - admin-sessions-upcoming: Confirm modals for assignment actions.

   Main classes:
   - .MODAL                 - fixed overlay + centred flexbox
   - .MODAL.UTIL_hidden     - hidden state (display:none)
   - .MODAL_inner           - the actual card
   - .MODAL_head            - top row with title and X button
   - .MODAL_title           - main title
   - .MODAL_subtitle        - optional muted subtitle under the title
   - .MODAL_body            - scrolling content region
   - .MODAL_footer          - bottom action row
   - .MODAL_bodyText        - typography inside .MODAL_body
   - .MODAL_close           - the X button

   Variant:
   - .MODAL_comm            - communications modal shell; targeted for
                              consolidation. See docs/merge-candidates.md.

   JavaScript:
   - Modals are shown by removing .UTIL_hidden and hidden by adding it.
     Do not change the outer .MODAL display:flex - the toggle relies on
     .UTIL_hidden setting display:none to override.
   - The X close button (.MODAL_close) is wired per-page inline; it's a
     candidate for migration to a delegated listener.

   Accessibility:
   - Modals do not currently trap focus or set role="dialog" - this is
     a known gap; see docs/cleanup-plan.md.

   Notes:
   - The overlay colour rgba(0,0,0,0.35) is fixed here; no variant should
     redefine it.
   - The shell is designed for a max-width of ~560px; the comms and
     attendance modals bump it via .MODAL_inner { max-width: … }.
   ========================================================================== */

/* =========================================================
   15. UNIVERSAL MODAL
   ========================================================= */

.MODAL{ position:fixed; top:0; bottom:0; left:var(--SidebarWidth); right:0; background:rgba(0,0,0,0.45); z-index:9000; display:flex; align-items:center; justify-content:center; padding:16px 24px; }
.MODAL.UTIL_hidden{ display:none; }
.MODAL_ctmInner{ background:var(--OffWhite); border-radius:var(--Radius8); box-shadow:0 16px 48px rgba(0,0,0,0.25),0 0 0 1px rgba(0,0,0,0.08); width:100%; max-width:640px; max-height:85vh; margin:auto; display:flex; flex-direction:column; overflow:hidden; }
.MODAL_head{ padding:var(--Pad20) var(--Pad28); background:var(--NavyBlue); border-bottom:var(--Pad2) solid var(--Bronze); display:flex; align-items:flex-start; justify-content:space-between; gap:var(--Pad16); }
.MODAL_ctmHeadLeft{ display:flex; flex-direction:column; gap:var(--Pad4); }
.MODAL_title{ font-family:var(--FontDisplay); font-size:var(--title-md); font-weight:var(--weight-extrabold); color:var(--White); letter-spacing:0.01em; line-height:1.3; margin:0; }
.MODAL_subtitle{ font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-regular); color:rgba(255,255,255,0.6); letter-spacing:0.02em; }
.MODAL_subtitle .AVATAR_male, .MODAL_subtitle .AVATAR_female{ color:rgba(255,255,255,0.75); }
.MODAL_ctmLiveDot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#22c55e; margin-right:var(--Pad6); vertical-align:middle; }
/* Light modal close button, used by the communications and hearings dialogs.
   (The navy `.MODAL_ctmClose` below is the shared-shell variant.) */
.MODAL_commClose, .MODAL_hClose{
  width:28px; height:28px; border:none; background:transparent;
  border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--WarmGrey);
}
.MODAL_commClose:hover, .MODAL_hClose:hover{ background:rgba(0,0,0,0.06); }
.MODAL_ctmClose{ background:none; border:none; font-size:var(--title-lg); line-height:1; color:rgba(255,255,255,0.5); cursor:pointer; padding:0 var(--Pad2); }
.MODAL_ctmClose:hover{ color:var(--White); }
.MODAL_body{ padding:var(--Pad24) var(--Pad28); flex:1; overflow-y:auto; overflow-x:hidden; background:var(--OffWhite); }
.MODAL_ctmFoot{ padding:var(--Pad16) var(--Pad28); background:#eceae6; border-top:1px solid rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:flex-end; gap:var(--Pad12); }
.MODAL_ctmFoot .BTN{ border:none; }
.MODAL_ctmFoot .BTN_docPreview.MOD_ghost{ background:transparent; color:var(--SlateGrey); border:1px solid rgba(0,0,0,0.15); }
.MODAL_ctmFoot .BTN_docPreview.MOD_ghost:hover{ color:var(--InkBlack); border-color:rgba(0,0,0,0.25); background:rgba(0,0,0,0.03); }
.MODAL_ctmFoot .BTN_accent{ background:var(--Bronze); color:var(--White); font-weight:var(--weight-extrabold); }
.MODAL_ctmFoot .BTN_accent:hover{ background:var(--BronzeLight); }
/* Status tab bar. Wrapper `.TAB_status` holds a row of `.TAB_statusBtn`
   buttons. Split 2026-08-06 — the two roles previously shared the same
   `.TAB_status` class name, so the wrapper element was inheriting the
   button styles too. */
.TAB_status{ display:inline-flex; gap:0; border:1px solid rgba(0,0,0,0.12); border-radius:var(--Pad8); overflow:hidden; background:var(--OffWhite); }
.TAB_statusBtn{ display:inline-flex; align-items:center; gap:var(--Pad6); padding:var(--Pad6) var(--Pad16); font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--SlateGrey); background:none; border:none; cursor:pointer; border-right:1px solid rgba(0,0,0,0.08); white-space:nowrap; }
.TAB_statusBtn:last-child{ border-right:none; }
.TAB_statusBtn:hover{ background:rgba(0,0,0,0.03); }
.TAB_statusBtn.IS_active{ background:#fff; color:var(--InkBlack); font-weight:var(--weight-extrabold); box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.TAB_statusBtn.IS_active[data-val="Upcoming"]{ background:rgba(234,88,12,0.08); color:#c2410c; }
.TAB_statusBtn.IS_active[data-val="In Session"]{ background:rgba(21,128,61,0.08); color:var(--Green); }
.TAB_statusBtn.IS_active[data-val="In Session"] .TAB_statusDot{ background:var(--Green); box-shadow: 0 0 0 2px var(--Green); }
.TAB_statusBtn.IS_active[data-val="Completed"]{ background:rgba(30,77,123,0.08); color:var(--NavyBlueDark); }
.TAB_statusDot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.TAB_statusDot.BADGE_dotUpcoming{ background:var(--Orange); }
.TAB_statusDot.BADGE_dotInSession{ background:#22c55e; }
.TAB_statusDot.BADGE_dotCompleted{ background:var(--NavyBlue); }
.SECTION_am{ margin-bottom:var(--Pad20); }
.SECTION_am:last-child{ margin-bottom:0; }
.SECTION_amLabel{ font-family:var(--FontDisplay); font-size:var(--text-md); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:0.06em; color:var(--SlateGrey); margin-bottom:var(--Pad12); padding-bottom:var(--Pad8); border-bottom:1px solid rgba(0,0,0,0.08); }
.GRID_amRoll{ display:grid; grid-template-columns:1fr 1fr; gap:var(--Pad4) var(--Pad24); }
.CARD_amRollItem{ display:flex; align-items:center; gap:var(--Pad10); padding:var(--Pad6) 0; cursor:pointer; border-radius:var(--Pad6); }
.CARD_amRollItem:hover{ background:rgba(0,0,0,0.02); }
.CARD_amRollInfo{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.CARD_amRollRole{ font-family:var(--FontSans); font-size:var(--text-xs); font-weight:var(--weight-regular); text-transform:uppercase; letter-spacing:0.08em; color:var(--NavyBlue); line-height:1.2; }
.CARD_amRollName{ font-family:var(--FontMono); font-size:var(--text-md); font-weight:var(--weight-regular); color:var(--InkBlack); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.CARD_attendCheck{ width:16px; height:16px; border-radius:var(--Pad4); accent-color:var(--NavyBlue); cursor:pointer; flex-shrink:0; }
.TBL_ctmCompact thead th{ padding:var(--Pad4) var(--Pad8); font-size:var(--text-xs); }
.TBL_ctmCompact tbody td{ padding:var(--Pad4) var(--Pad8); font-size:var(--text-md); }
.TBL_ctmCompact .TBL_tdId{ font-size:var(--text-md); padding:1px var(--Pad6); }
.TBL_ctmCompact .TBL_tdName{ font-size:var(--text-md); }
.TBL_ctmCompact .TBL_tdMono{ font-size:var(--text-md); }
.TBL{ width:100%; border-collapse:separate; border-spacing:0; font-family:var(--FontSans); font-size:var(--text-md); border-radius:var(--Pad8); overflow:hidden; border:1px solid var(--BorderGrey); }
/* Tables inside flush cards: inset within the card padding, own border + rounded corners */
.CARD.MOD_flush .TBL, .CARD.MOD_flush [id*="Table"] .TBL, .CARD.MOD_flush [id*="table"] .TBL{ margin:0 24px 16px; width:calc(100% - 48px); }
.CARD.MOD_flush .UTIL_overflowXAuto{ margin:0 24px 16px; }
.CARD.MOD_flush .UTIL_overflowXAuto .TBL{ margin:0; width:100%; }
.TBL thead th{ font-family:var(--FontSans); font-size:var(--text-xs); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:0.08em; color:var(--SlateGrey); text-align:left; padding:var(--Pad10) var(--Pad12); background:var(--PageGrey); border-bottom:1px solid var(--BorderGrey); border-right:1px solid var(--BorderGrey); white-space:nowrap; }
.TBL thead th:first-child{ padding-left:var(--Pad20); }
.TBL thead th:last-child{ padding-right:var(--Pad20); border-right:none; }
.TBL tbody td{ padding:var(--Pad12) var(--Pad12); border-bottom:1px solid var(--PageGrey); border-right:1px solid var(--PageGrey); color:var(--InkBlack); font-family:var(--FontMono); font-size:var(--text-md); font-weight:var(--weight-regular); vertical-align:middle; }
.TBL tbody td:first-child{ padding-left:var(--Pad20); }
.TBL tbody td:last-child{ padding-right:var(--Pad20); border-right:none; }
.TBL tbody tr:last-child td{ border-bottom:none; }
.TBL tbody tr:hover{ background:rgba(95,143,184,0.04); }

td.BADGE_mut{ white-space:nowrap; }
/* CASE ID STANDARD — one chip style for every case id in grids (same as .TBL_tdId) */
/* Case-ID chip. `.BADGE_caseId` is the anchor form, `.TBL .TBL_tdId` the plain-cell
   form; identical apart from the link underline reset. */
.BADGE_caseId, .TBL .TBL_tdId{
  font-family:var(--FontMono); font-size:var(--text-md); font-weight:var(--weight-semibold);
  color:var(--NavyBlue); background:rgba(95,143,184,0.08);
  padding:5px 10px 5px 6px; border-radius:var(--Pad4);
  white-space:nowrap; display:inline-flex; align-items:center; gap:5px;
  line-height:1; letter-spacing:-0.07em; word-spacing:-0.25em; box-sizing:border-box;
}
.BADGE_caseId{ text-decoration:none; }

/* Large statistic figure. Shared by the dashboard stat cards and the council
   member profile; the member variant adds its own bottom margin. */
.STAT_number, .STAT_number{
  font-family:var(--FontDisplay); font-size:var(--title-xl);
  font-weight:var(--weight-extrabold); line-height:1; color:var(--NavyBlue);
}
.BADGE_caseId:hover{ text-decoration:underline; }

.TBL .TBL_tdName{ font-family:var(--FontDisplay); font-size:var(--text-md); font-weight:var(--weight-semibold); white-space:nowrap; }
.TBL .TBL_tdMono{ font-family:var(--FontMono); font-size:var(--text-md); font-weight:var(--weight-regular); white-space:nowrap; }

.TBL .TBL_tdCheck{ width:32px; text-align:center; }
.TBL input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--NavyBlue); cursor:pointer; }
.CARD_docExplorer{ display:flex; min-height:360px; overflow:hidden; }
.LIST_docExplorer{ flex:1.35; min-width:200px; overflow-y:auto; overflow-x:hidden; }
/* The table must fit its flex column — otherwise its natural width overflows and
   overflow-x:hidden silently clips the right-hand USER column. Fixed layout lets the
   Document Name cell absorb the slack via its existing ellipsis. */
.TBL_docExplorer{ width:100%; table-layout:fixed; }
.TBL_docExplorer th:nth-child(2), .TBL_docExplorer td:nth-child(2){ width:46px; }
.TBL_docExplorer th:nth-child(3), .TBL_docExplorer td:nth-child(3){ width:86px; }
.TBL_docExplorer th:nth-child(4), .TBL_docExplorer td:nth-child(4){ width:170px; }
.TBL_docExplorer tbody tr{ border-bottom:1px solid rgba(0,0,0,0.03); cursor:pointer; }
.TBL_docExplorer tbody tr.IS_active{ background:rgba(30,77,123,0.06); }
.ICON_docFile img{ width:16px !important; height:16px !important; opacity:0.65; filter:invert(27%) sepia(50%) saturate(500%) hue-rotate(190deg); }
.ICON_docFile{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:16px; height:16px; }
.TBL_docExplorer tbody tr.IS_active .ICON_docFile{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:16px; height:16px; }
.FILE_docNameText{ font-weight:var(--weight-semibold); color:var(--NavyBlue); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.TBL_docExplorer tbody tr.IS_active .FILE_docNameText{ font-weight:var(--weight-extrabold); }
.FILE_docMeta, .FILE_docType{ font-family:var(--FontMono); font-size:var(--text-sm); color:var(--SlateGrey); white-space:nowrap; }
.CARD_docExplorerResizer{ width:8px; cursor:col-resize; background:rgba(0,0,0,0.04); border-left:1px solid rgba(0,0,0,0.08); border-right:1px solid rgba(0,0,0,0.08); flex-shrink:0; position:relative; display:flex; align-items:center; justify-content:center; }
.CARD_docExplorerResizer::after{ content:''; width:2px; height:32px; border-left:1px solid rgba(0,0,0,0.15); border-right:1px solid rgba(0,0,0,0.15); }
.CARD_docExplorerResizer:hover, .CARD_docExplorerResizer.IS_active{ background:rgba(30,77,123,0.12); }
.CARD_docExplorerResizer:hover::after, .CARD_docExplorerResizer.IS_active::after{ border-left-color:var(--NavyBlue); border-right-color:var(--NavyBlue); }
.CARD_docExplorerPreview{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--Pad24); background:rgba(0,0,0,0.015); text-align:center; flex:1; min-width:200px; }
.ICON_docPreview{ width:64px; height:64px; margin-bottom:var(--Pad16); color:var(--SlateGrey); opacity:0.4; filter: invert(40%) sepia(5%) saturate(400%) hue-rotate(340deg) brightness(80%); }
.CARD_docPreviewName{ font-family:var(--FontDisplay); font-size:var(--text-lg); font-weight:var(--weight-extrabold); color:var(--InkBlack); margin-bottom:var(--Pad4); word-break:break-all; }
.CARD_docPreviewMeta{ font-family:var(--FontMono); font-size:var(--text-sm); color:var(--SlateGrey); margin-bottom:var(--Pad16); }
.CARD_docPreviewActions{ display:flex; gap:var(--Pad8); }
.BTN_docPreview{ display:inline-flex; align-items:center; gap:var(--Pad4); padding:6px 16px; font-family:var(--FontSans); font-size:var(--text-sm); font-weight:var(--weight-semibold); border-radius:6px; cursor:pointer; }
.BTN_docPreview.MOD_primary{ background:var(--NavyBlue); border:1px solid var(--NavyBlue); color:#fff; }
.BTN_docPreview.MOD_primary:hover{ background:var(--NavyBlueDark); }
.BTN_docPreview.MOD_ghost{ background:transparent; border:1px solid rgba(0,0,0,0.12); color:var(--SlateGrey); }
.BTN_docPreview.MOD_ghost:hover{ border-color:var(--InkBlack); color:var(--InkBlack); }
.BTN_docPreview svg{ width:14px; height:14px; }
.TAB_internalTabs{ display:flex; gap:0; border-bottom:var(--Pad2) solid rgba(0,0,0,0.06); margin-bottom:var(--Pad20); }
.TAB_i{ padding:var(--Pad12) var(--Pad24); font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-extrabold); color:var(--SlateGrey); border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; }
.TAB_i:hover:not(.IS_disabled){ color:var(--InkBlack); }
.TAB_i.IS_active{ color:var(--NavyBlue); border-bottom-color:var(--NavyBlue); }
.TAB_i.IS_disabled{ color:var(--SlateGrey); opacity:0.5; cursor:not-allowed; }
.PANEL_iTab{ display:none; }
.PANEL_iTab.IS_active{ display:block; }

/* =========================================================
   16. RESPONSIVE
   ========================================================= */

@media(max-width:1200px){
  .BADGE_hearingGroup .BTN_pillLabel{ display:none; }
  .BADGE_hearingGroup .BTN_pill{ padding:var(--Pad6); border-radius:50%; width:32px; height:32px; justify-content:center; }
  .BADGE_hearingGroup{ flex-direction:row; gap:var(--Pad6); align-items:center; }
}

@media(max-width:1024px){
  .CARD_caseRowAligned{ grid-template-columns:1fr 1fr; gap:var(--Pad8); }
  .CARD_caseRowAligned > .CARD_caseRowParty + .CARD_caseRowParty::before{ display:none; }
  .CARD_hearingRowAligned{ grid-template-columns:1fr 1fr; gap:var(--Pad8); }
  .CARD_hearingRowAligned > .CARD_caseRowParty + .CARD_caseRowParty::before,
  .CARD_hearingRowAligned > .CARD_caseRowParty + .BADGE_hearingGroup::before{ display:none; }
  .BADGE_hearingGroup{ grid-column:1 / -1; }
  .CARD_previewTwoCol{ grid-template-columns:1fr; }
  .GRID_doc{ grid-template-columns:1fr; }
  .MODAL{ left:0; }
  .CARD_docExplorer{ flex-direction:column; }
  .LIST_docExplorer{ border-bottom:1px solid rgba(0,0,0,0.06); max-height:250px; }
  .CARD_docExplorerResizer{ display:none; }
}

@media(max-width:768px){
  .PAG_pageHead{ flex-direction:column; align-items:flex-start; gap:var(--Pad16); }
  .PAG_pageHead .LYT_divider{ display:none; }
  .MENU_head{ width:100%; flex-wrap:wrap; }
  .CARD_hearingRow{ grid-template-columns:1fr; }
  .CARD_hearingOrderCell{ flex-direction:row; border-right:none; border-bottom:1px solid var(--PageGrey); padding:var(--Pad8) var(--Pad16); }
  .CARD_hearingActions{ padding:0 var(--Pad16) var(--Pad14); }
  .GRID_banner{ grid-template-columns:1fr; }
}

@media(max-width:900px){
  .CARD_docExplorer{ flex-direction:column; }
}

/* =========================================================
   17. DISSOLUTION / PUBLIC PORTAL STYLES
   ========================================================= */

/* Body override for public pages — flex column, full viewport */
body.PAG_dissPage{
  background: var(--PageParchment);
  color: var(--InkBlack);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── NAV ── */
nav.NAV_diss{ background:var(--CharcoalNavy); padding:0 var(--Pad40); display:flex; align-items:stretch; justify-content:space-between; position:sticky; top:0; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.NAV_brand{ display:flex; align-items:center; gap:var(--Pad12); padding:var(--Pad8) 0; }
.NAV_seal{ width:40px; height:40px; object-fit:contain; }
.NAV_office{ font-size:var(--text-xs); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.45); line-height:1.4; }
.NAV_council{ font-size:var(--text-md); font-weight:var(--weight-extrabold); color:#fff; line-height:1.3; }
.NAV_links, .NAV_right{ display:flex; align-items:stretch; }
.NAV_link{ display:flex; align-items:center; padding:0 var(--Pad12); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:rgba(255,255,255,.62); border-bottom:var(--Pad2) solid transparent; white-space:nowrap; text-decoration:none; }
.NAV_link:hover{ color:#fff; }
.NAV_link.IS_active{ color:#fff; border-bottom-color:var(--Bronze); }
.NAV_back{ display:flex; align-items:center; gap:var(--Pad4); padding:0 var(--Pad16); font-size:var(--text-xs); font-weight:var(--weight-extrabold); color:rgba(255,255,255,.45); border-left:1px solid rgba(255,255,255,.1); text-decoration:none; white-space:nowrap; }
.NAV_back:hover{ color:rgba(255,255,255,.8); }
.NAV_auth{ display:flex; align-items:center; gap:var(--Pad6); margin-left:var(--Pad12); padding-left:var(--Pad12); border-left:1px solid rgba(255,255,255,.12); }
.NAV_authLogin{ padding:var(--Pad4) var(--Pad12); font-size:var(--text-xs); font-weight:var(--weight-extrabold); color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.22); border-radius:var(--Pad4); text-decoration:none; }
.NAV_authLogin:hover{ color:#fff; }
.NAV_authSignup{ padding:var(--Pad4) var(--Pad12); font-size:var(--text-xs); font-weight:var(--weight-extrabold); background:var(--Gold); color:#1e2027; border-radius:var(--Pad4); text-decoration:none; white-space:nowrap; }
.NAV_authSignup:hover{ opacity:.88; }

/* ── HERO ── */
.PAGE_dissHero{ background:linear-gradient(118deg,#7a5c2e 0%,var(--Gold) 52%,#9a7218 100%); border-bottom:var(--Pad2) solid var(--CharcoalNavy); box-shadow:inset 0 -2px 50px rgba(30,32,39,.3); position:relative; overflow:hidden; flex-shrink:0; }
.PAGE_dissHero::before{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:600px; height:600px; background:url('./assets/logo/logo.svg') center/contain no-repeat; opacity:.04; pointer-events:none; }
.PAGE_dissHeroInner{ max-width:1160px; margin:0 auto; padding:var(--Pad28) var(--Pad48); position:relative; z-index:1; }
.TXT_dissHeroLabel{ font-size:var(--text-xs); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.55); margin-bottom:var(--Pad6); }
.TXT_dissHeroTitle{ font-size:var(--title-xl); font-weight:var(--weight-extrabold); color:#fff; line-height:1.15; margin-bottom:var(--Pad8); }
.PAGE_dissHeroRule{ width:48px; height:3px; background:rgba(255,255,255,.35); }
.PAGE_dissHeroStrip{ background:rgba(0,0,0,.22); padding:var(--Pad12) 0; }
.PAGE_dissHeroStripInner{ max-width:1160px; margin:0 auto; padding:0 var(--Pad48); display:flex; align-items:center; gap:var(--Pad20); }
.PROGRESS_dissHeroStrip{ width:3px; flex-shrink:0; align-self:stretch; background:var(--Gold); border-radius:var(--Pad2); opacity:.8; }
.TXT_dissHeroStripText{ font-size:var(--text-sm); font-style:italic; font-weight:var(--weight-regular); color:rgba(255,255,255,.88); line-height:1.7; flex:1; }
.PAGE_dissHeroStripRef{ font-size:var(--text-xs); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.45); margin-left:var(--Pad10); white-space:nowrap; font-style:normal; }

/* ── PAGE BODY ── */
.PAGE_dissBody{ background:linear-gradient(to bottom,#f0eeea 0%,#d8d4cc 100%); flex:1; }
.PAGE_dissWrap{ max-width:1160px; margin:0 auto; padding:0 var(--Pad48) var(--Pad56); }
/* ── DISSOLUTION TYPOGRAPHY ── */
.MOD_st{ font-size:var(--title-lg); font-weight:var(--weight-extrabold); color:var(--NavyBlue); line-height:1.2; margin-bottom:var(--Pad16); }
.MOD_sl{ font-size:var(--text-xs); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:.14em; color:var(--Bronze); margin-bottom:var(--Pad8); }
.CARD_prose{ font-size:var(--text-md); line-height:1.75; color:var(--InkBlack); }
.CARD_prose p{ margin-bottom:var(--Pad16); }
.CARD_prose p:last-child{ margin-bottom:0; }
/* .CARD_title merged into the single rule near line 496 (2026-08-06 silent-dup fix). */
.CARD_body{ font-size:var(--text-md); line-height:1.7; color:var(--CoolGrey); text-align:justify; }
.CARD_quote{ font-size:var(--text-lg); font-weight:var(--weight-extrabold); font-style:italic; color:var(--Bronze); line-height:1.65; margin-bottom:var(--Pad20); }
.LNK_inline{ color:var(--NavyBlue); text-decoration:underline; }
.TXT_secLabel{ font-size:var(--text-xs); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:.16em; color:var(--Bronze); margin-bottom:var(--Pad6); }

/* ── PADDING ── */
.UTIL_pad{ padding:var(--Pad20) 0; }

/* ── DIVIDER DECORATIVE ── */
.LYT_dividerDeco{ display:flex; align-items:center; gap:var(--Pad16); padding:var(--Pad10) 0; }
.LYT_dividerLine{ flex:1; height:1px; background:linear-gradient(to right,transparent,rgba(139,111,71,.35),transparent); }
.LYT_dividerDiamond{ width:8px; height:8px; background:var(--Bronze); transform:rotate(45deg); opacity:.5; flex-shrink:0; }
.LYT_dividerDiamond.MOD_small{ width:5px; height:5px; opacity:.3; }

/* ── CARD ── */
/* Duplicate `.CARD` rule removed 2026-08-06 — it lived in the dissolution-
   typography section and was silently overriding the universal .CARD's
   background (var(--OffWhite) → rgba(255,255,255,.8)) on every page. The
   universal spec at line 455 is the intended one; the dissolution pages
   no longer get the transparent white variant. */
.CARD_iconRow{ display:flex; align-items:center; gap:var(--Pad10); margin-bottom:var(--Pad10); }
.CARD_iconRow svg{ width:26px; height:26px; stroke:var(--NavyBlue); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.LYT_colSpan{ grid-column:1/-1; }

/* ── PETITION CARD ── */
.CARD_petition{ grid-column:1/-1; background:rgba(255,255,255,.8); border:1px solid var(--BorderGrey); border-radius:var(--Pad8); padding:var(--Pad28) var(--Pad32); display:flex; align-items:center; justify-content:space-between; gap:var(--Pad48); }
.CARD_petitionLeft{ flex:1; }

/* ── GRIDS ── */
.GRID_2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--Pad16); }
.GRID_3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--Pad16); }
/* ── PROCESS STEPS ── */
.LIST_proc{ display:flex; flex-direction:column; border:1.5px solid var(--BorderGrey); border-radius:var(--Pad8); overflow:hidden; background:rgba(255,255,255,.8); margin-top:var(--Pad8); }
.CARD_procStep{ display:grid; grid-template-columns:52px 1fr; border-bottom:1px solid #e8e7e3; }
.CARD_procStep:last-child{ border-bottom:none; }
.ICON_proc{ background:var(--NavyBlue); display:flex; align-items:center; justify-content:center; }
.ICON_proc svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.CARD_procBody{ padding:var(--Pad16) var(--Pad18); }

/* ── DETERMINATIONS ── */
.LIST_determ{ border:1px solid var(--BorderGrey); border-radius:var(--Pad8); overflow:hidden; background:rgba(255,255,255,.8); }
.CARD_determItem{ padding:var(--Pad18) var(--Pad24); border-bottom:1px solid rgba(0,0,0,.07); }
.CARD_determItem:last-child{ border-bottom:none; }

/* ── FAQ ── */
.LIST_faq{ display:flex; flex-direction:column; border:1.5px solid var(--BorderGrey); border-radius:var(--Pad8); overflow:hidden; background:rgba(255,255,255,.8); margin-top:var(--Pad20); }
.CARD_faqItem{ border-bottom:1px solid #e8e7e3; }
.CARD_faqItem:last-child{ border-bottom:none; }
.CARD_faqQ{ width:100%; background:none; border:none; padding:var(--Pad16) var(--Pad20); text-align:left; font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-extrabold); color:var(--NavyBlue); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:var(--Pad16); }
.CARD_faqQ svg{ width:16px; height:16px; stroke:var(--CoolGrey); fill:none; stroke-width:2; flex-shrink:0; }
.CARD_faqItem.IS_open .CARD_faqQ svg{ transform:rotate(180deg); }
.CARD_faqItem.IS_open .CARD_faqA{ display:block; }
.CARD_faqA{ display:none; padding:0 var(--Pad20) var(--Pad18) var(--Pad20); font-size:var(--text-md); line-height:1.75; color:var(--InkBlack); }
.LIST_faq.HAS_open .CARD_faqItem{ opacity:.35; }
.LIST_faq.HAS_open .CARD_faqItem.IS_open{ opacity:1; }

/* ── GOLD BORDER ACCENT ── */
.MOD_goldBorder{ border-left:var(--Pad4) solid var(--Gold); padding-left:var(--Pad24); }

/* ── BUTTONS (dissolution-specific) ── */
.BTN_cta{ display:inline-block; padding:var(--Pad12) var(--Pad28); background:var(--NavyBlue); color:#fff; border-radius:var(--Pad4); font-size:var(--text-md); font-weight:var(--weight-extrabold); white-space:nowrap; text-decoration:none; }
.BTN_cta:hover{ background:var(--NavyBlueDark); }
.BTN_outlineNavy{ display:inline-block; padding:var(--Pad12) var(--Pad28); background:transparent; color:var(--NavyBlue); border:1.5px solid var(--NavyBlue); border-radius:var(--Pad4); font-size:var(--text-md); font-weight:var(--weight-extrabold); white-space:nowrap; text-decoration:none; }
.BTN_outlineNavy:hover{ background:var(--NavyBlue); color:#fff; }

/* ── FOOTER ── */
footer.FTR_diss{ background:var(--CharcoalNavy); padding:0 var(--Pad40) var(--Pad24); flex-shrink:0; }
.FTR_top{ display:grid; grid-template-columns:1.2fr 1fr 1fr auto; gap:var(--Pad40); padding:var(--Pad36) 0 var(--Pad28); }
.FTR_name{ font-size:var(--text-md); font-weight:var(--weight-extrabold); color:rgba(255,255,255,.75); line-height:1.5; }
.FTR_col a{ display:block; font-size:var(--text-sm); color:rgba(255,255,255,.5); margin-bottom:var(--Pad8); text-decoration:none; }
.FTR_col a:hover{ color:#fff; }
.FTR_login{ display:inline-flex; align-items:center; gap:var(--Pad6); padding:var(--Pad8) var(--Pad16); background:rgba(204,153,0,.2); color:var(--GoldLight); border:1px solid rgba(204,153,0,.4); border-radius:var(--Pad4); font-size:var(--text-xs); font-weight:var(--weight-extrabold); text-decoration:none; }
.FTR_login:hover{ background:rgba(204,153,0,.3); }
.FTR_seal{ width:40px; height:40px; object-fit:contain; opacity:.8; margin-bottom:var(--Pad10); }
.FTR_muted{ font-size:var(--text-sm); color:rgba(255,255,255,.45); line-height:1.65; }
.FTR_dim{ color:rgba(255,255,255,.4); }

/* ── CONTACT FORM ──
   Scoped to .FORM_contactFull 2026-08-06 so its FORM_* rules stop colliding
   with the shared / appForm variants. */
.FORM_success{ display:none; margin-top:var(--Pad16); padding:var(--Pad12) var(--Pad16); background:#eaf3de; border-radius:var(--Pad6); font-size:var(--text-md); color:var(--Green); font-weight:var(--weight-semibold); }
.FORM_contactFull .FORM_row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--Pad12); }
/* Public-form label variant — consolidated 2026-08-23.
   Admin pages use the base .FORM_label (9px/regular/.08em); every public
   form (contact + petition) shares this heavier, more readable style. */
.FORM_contactFull .FORM_label,
#appForm .FORM_label{ font-size:var(--text-sm); font-weight:var(--weight-extrabold); color:var(--NavyBlue); text-transform:uppercase; letter-spacing:.06em; }
.FORM_contactFull .FORM_input{ padding:var(--Pad10) var(--Pad14); border:1px solid var(--BorderGrey); border-radius:var(--Pad6); font-family:var(--FontSans); font-size:var(--text-md); color:var(--InkBlack); background:#fff; outline:none; }

.FORM_submit{ padding:var(--Pad12) var(--Pad28); background:var(--NavyBlue); color:#fff; border:none; border-radius:var(--Pad4); font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-extrabold); cursor:pointer; }
.BADGE_charCount{ font-size:var(--text-sm); color:var(--CoolGrey); text-align:right; }
.ALERT_authBanner{ display:flex; align-items:center; justify-content:space-between; gap:var(--Pad32); }
.ALERT_authBannerBtns{ display:flex; gap:var(--Pad10); flex-shrink:0; }
.BADGE_admin{ display:flex; align-items:flex-start; gap:var(--Pad10); background:rgba(30,77,123,.07); border:1px solid rgba(30,77,123,.2); border-radius:var(--Pad8); padding:var(--Pad12) var(--Pad16); font-size:var(--text-sm); line-height:1.6; color:var(--NavyBlue); }
.BADGE_admin svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; stroke:var(--NavyBlue); }
.BTN_adminSignin{ background:var(--NavyBlueDark); }
.BTN_adminSignin:hover{ background:#0f2a3d; }

/* ── SIGN IN ── */
.PAG_signinPage{ background:linear-gradient(to bottom,#f0eeea,#d8d4cc); flex:1; display:flex; align-items:center; justify-content:center; padding:var(--Pad48) var(--Pad24); }
.CARD_signinContainer{ width:100%; max-width:440px; display:flex; flex-direction:column; gap:var(--Pad16); }
.CARD_signinSeal{ width:52px; height:52px; object-fit:contain; opacity:.85; margin-bottom:var(--Pad12); }
.TXT_signinTitle{ font-size:var(--title-lg); font-weight:var(--weight-extrabold); color:var(--NavyBlue); line-height:1.2; margin-bottom:var(--Pad4); }
.CARD_signinSub{ font-size:var(--text-md); color:var(--CoolGrey); line-height:1.5; }
.CARD_signin{ padding:var(--Pad28); }
.CARD_signinForgot{ margin-bottom:var(--Pad20); margin-top:var(--Pad6); font-size:var(--text-sm); }
.BTN_signin{ width:100%; padding:var(--Pad12); font-size:var(--text-md); font-weight:var(--weight-extrabold); background:var(--NavyBlue); color:#fff; border:none; border-radius:var(--Pad4); font-family:var(--FontSans); cursor:pointer; }
.BTN_signin:hover{ background:var(--NavyBlueDark); }
.CARD_signinDivider{ display:flex; align-items:center; gap:var(--Pad12); }
.CARD_signinDividerLine{ flex:1; height:1px; background:rgba(139,111,71,.25); }
.TXT_signinDividerText{ font-size:var(--text-xs); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:.1em; color:var(--CoolGrey); flex-shrink:0; }
.CARD_signinAlt{ padding:var(--Pad20) var(--Pad28); display:flex; flex-direction:column; gap:var(--Pad10); }
.TXT_signinAltTitle{ font-size:var(--text-md); font-weight:var(--weight-extrabold); color:var(--NavyBlue); }
.CARD_signinAltBody{ font-size:var(--text-md); line-height:1.6; color:var(--CoolGrey); }
.BTN_signinAlt{ display:inline-block; padding:var(--Pad10) var(--Pad20); background:transparent; color:var(--NavyBlue); border:1.5px solid var(--NavyBlue); border-radius:var(--Pad4); font-size:var(--text-md); font-weight:var(--weight-extrabold); text-decoration:none; text-align:center; }
.BTN_signinAlt:hover{ background:var(--NavyBlue); color:#fff; }
.CARD_signinNote{ display:flex; align-items:flex-start; gap:var(--Pad8); font-size:var(--text-xs); line-height:1.6; color:var(--CoolGrey); padding:0 var(--Pad4); }
.CARD_signinNote svg{ width:14px; height:14px; flex-shrink:0; margin-top:1px; stroke:var(--CoolGrey); }

/* ── PETITION FORM ── */
.SHELL_layout{ display:flex; min-height:100vh; flex-direction:column; }
.SHELL_body{ display:flex; flex:1; max-width:1260px; margin:0 auto; width:100%; padding:var(--Pad28) var(--Pad32) var(--Pad64); gap:var(--Pad24); }
.SHELL_sideapp{ width:220px; flex-shrink:0; position:sticky; top:68px; align-self:flex-start; }
.SHELL_sideappInner{ background:rgba(255,255,255,.9); border:1px solid var(--BorderGrey); border-radius:var(--Pad8); }
.SHELL_sidehd{ background:var(--CharcoalNavy); padding:var(--Pad14) var(--Pad16); border-radius:var(--Pad8) var(--Pad8) 0 0; }
.SHELL_sidehdTitle{ font-size:var(--text-sm); font-weight:var(--weight-extrabold); color:#fff; }
.SHELL_sidehdSub{ font-size:var(--text-xs); color:rgba(255,255,255,.4); margin-top:var(--Pad2); }
.SHELL_sideprog{ padding:var(--Pad10) var(--Pad16); border-bottom:1px solid var(--BorderGrey); display:flex; align-items:center; gap:var(--Pad8); }
.PROGRESS_prog{ flex:1; height:4px; background:#ddd; border-radius:var(--Pad2); }
.PROGRESS_fill{ height:100%; background:var(--Gold); border-radius:var(--Pad2); }
.PROGRESS_pct{ font-size:var(--text-xs); font-weight:var(--weight-extrabold); color:var(--NavyBlue); }
.SHELL_sidelinks{ padding:var(--Pad6) 0; }
.SHELL_sidelink{ display:flex; align-items:center; gap:var(--Pad10); padding:var(--Pad8) var(--Pad16); cursor:pointer; border-left:var(--Pad2) solid transparent; }
.SHELL_sidelink:hover{ background:rgba(30,77,123,.06); }
.SHELL_sidelink.IS_active{ background:rgba(30,77,123,.09); border-left-color:var(--Bronze); }
.SHELL_sidelink.IS_done{ border-left-color:var(--NavyBlue); }
.LNK_num{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--text-xs); font-weight:var(--weight-extrabold); background:#e0ddd8; color:var(--CoolGrey); flex-shrink:0; }
.SHELL_sidelink.IS_active .LNK_num, .SHELL_sidelink.IS_done .LNK_num{ background:var(--NavyBlue); color:#fff; }
.TXT_linkText{ font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--CoolGrey); flex:1; line-height:1.2; }
.SHELL_sidelink.IS_active .TXT_linkText{ color:var(--NavyBlue); font-weight:var(--weight-extrabold); }
.SHELL_sidelink.IS_done .TXT_linkText{ color:var(--NavyBlue); }
.LNK_pct{ font-size:var(--text-xs); font-weight:var(--weight-extrabold); color:var(--CoolGrey); }
.SHELL_sidelink.IS_active .LNK_pct{ color:var(--Bronze); }
.SHELL_sidelink.IS_done .LNK_pct{ color:var(--NavyBlue); }
#appForm .PANEL_section{ display:none !important; }
#appForm .PANEL_section.IS_active{ display:block !important; }
.FORM_card{ background:rgba(255,255,255,.88); border:1px solid var(--BorderGrey); border-radius:var(--Pad8); padding:var(--Pad24) var(--Pad28); margin-bottom:var(--Pad16); }
.TXT_fcardTitle{ font-size:var(--text-md); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:.1em; color:var(--Bronze); padding-bottom:var(--Pad10); border-bottom:1px solid var(--BorderGrey); margin-bottom:var(--Pad16); }
/* .SECTION_header margin-bottom merged into the main .SECTION_header rule
   above (2026-08-06 silent-dup fix). */
.SECTION_headerLabel{ font-size:var(--text-xs); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:.14em; color:var(--Bronze); margin-bottom:var(--Pad4); }
.SECTION_headerTitle{ font-size:var(--title-lg); font-weight:var(--weight-extrabold); color:var(--NavyBlue); }
.SECTION_headerDesc{ font-size:var(--text-md); line-height:1.6; color:var(--CoolGrey); margin-top:var(--Pad6); }
/* Application-wizard form styles — scoped to #appForm 2026-08-06 to prevent
   collision with the top-level .FORM_* rules used site-wide. */
#appForm .FORM_row{ display:grid; gap:var(--Pad14); margin-bottom:var(--Pad14); }
#appForm .FORM_row:last-child{ margin-bottom:0; }
#appForm .FORM_row.GRID_col1{ grid-template-columns:1fr; }
#appForm .FORM_row.GRID_col2{ grid-template-columns:1fr 1fr; }
#appForm .FORM_row.GRID_col3{ grid-template-columns:1fr 1fr 1fr; }
/* #appForm .FORM_label typography merged into the public-form variant above (2026-08-23). */
#appForm .FORM_label .BADGE_req{ color:#c0392b; margin-left:var(--Pad2); }
.FORM_hint{ font-size:var(--text-xs); color:var(--CoolGrey); line-height:1.5; }
#appForm .FORM_input{ padding:var(--Pad8) var(--Pad12); border:1px solid var(--BorderGrey); border-radius:var(--Pad4); font-family:var(--FontSans); font-size:var(--text-md); color:var(--InkBlack); background:#fff; outline:none; width:100%; }
#appForm .FORM_input:focus{ border-color:var(--NavyBlue); box-shadow:0 0 0 2px rgba(30,77,123,.1); }
select.FORM_input{ appearance:none; background-image:url("./assets/ico-chevron-down-muted.svg"); background-repeat:no-repeat; background-position:right 10px center; padding-right:30px; }
textarea.FORM_input{ resize:vertical; min-height:120px; line-height:1.65; }
.CARD_partySubRow, .RAD_row{ display:flex; gap:var(--Pad20); margin-top:var(--Pad4); }
.RAD_opt{ display:flex; align-items:center; gap:var(--Pad8); font-size:var(--text-md); color:var(--InkBlack); cursor:pointer; }
.RAD_opt input{ accent-color:var(--NavyBlue); width:15px; height:15px; }
.CHK_checkboxOpt{ display:flex; align-items:flex-start; gap:var(--Pad8); font-size:var(--text-md); line-height:1.6; color:var(--InkBlack); cursor:pointer; }
.CHK_checkboxOpt input{ accent-color:var(--NavyBlue); width:15px; height:15px; margin-top:var(--Pad2); flex-shrink:0; }
.CARD_cond{ display:none; margin-top:var(--Pad14); padding-top:var(--Pad14); border-top:1px solid rgba(0,0,0,.07); }
.CARD_cond.IS_visible{ display:block; }
.PROGRESS_pwd{ height:4px; border-radius:var(--Pad2); background:#e0ddd8; margin-top:var(--Pad6); }
.INP_pwdFill{ height:100%; border-radius:var(--Pad2); }
.CARD_child{ background:#f7f6f3; border:1px solid var(--BorderGrey); border-radius:var(--Pad8); padding:var(--Pad16) var(--Pad20); margin-bottom:var(--Pad12); }
.CARD_childHd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--Pad14); }
.CARD_childRm{ background:none; border:none; cursor:pointer; color:var(--CoolGrey); font-size:var(--text-sm); font-weight:var(--weight-extrabold); font-family:var(--FontSans); }
.CARD_childRm:hover{ color:#c0392b; }
.BTN_addChild{ display:flex; align-items:center; gap:var(--Pad8); padding:var(--Pad8) var(--Pad18); background:transparent; color:var(--NavyBlue); border:1.5px dashed var(--NavyBlue); border-radius:var(--Pad4); font-family:var(--FontSans); font-size:var(--text-sm); font-weight:var(--weight-extrabold); cursor:pointer; margin-top:var(--Pad4); }
.BTN_addChild:hover{ background:rgba(30,77,123,.05); }
.FORM_noChildMsg{ text-align:center; padding:var(--Pad18); font-size:var(--text-md); color:var(--CoolGrey); }
.UPLOAD_zone{ border:1.5px dashed var(--BorderGrey); border-radius:var(--Pad6); padding:var(--Pad12) var(--Pad16); display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--Pad10); background:#fff; cursor:pointer; }
.UPLOAD_zone:hover,.UPLOAD_zone.IS_uploaded{ border-color:var(--NavyBlue); }
.UPLOAD_zone.IS_uploaded{ background:rgba(30,77,123,.03); }
.UPLOAD_name{ font-size:var(--text-sm); font-weight:var(--weight-extrabold); color:var(--NavyBlue); }
.UPLOAD_hint{ font-size:var(--text-xs); color:var(--CoolGrey); margin-top:var(--Pad2); }
.UPLOAD_done{ font-size:var(--text-xs); color:green; margin-top:var(--Pad2); display:none; }
.BTN_upload{ padding:var(--Pad6) var(--Pad14); background:var(--NavyBlue); color:#fff; border:none; border-radius:var(--Pad4); font-size:var(--text-xs); font-weight:var(--weight-extrabold); cursor:pointer; font-family:var(--FontSans); white-space:nowrap; }
.CARD_consentScroll{ background:#f7f6f3; border:1px solid var(--BorderGrey); border-radius:var(--Pad6); padding:var(--Pad16) var(--Pad20); font-size:var(--text-sm); line-height:1.85; color:var(--InkBlack); height:220px; overflow-y:auto; margin-bottom:var(--Pad16); }
.CARD_consentScroll p{ margin-bottom:var(--Pad12); }
.TAB_consent{ display:flex; gap:0; border-bottom:var(--Pad2) solid var(--BorderGrey); margin-bottom:0; }
/* Petition-consent language button (English / Arabic). Originally `.ctab`,
   which the class rename collapsed onto `.TAB_case` — collision with the
   case-menu tab class. Given its own name 2026-08-06 to keep the two
   apart. Only used inside `.TAB_consent` on public-petition.html. */
.TAB_consentBtn{ padding:var(--Pad8) var(--Pad20); font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-extrabold); color:var(--CoolGrey); background:#f7f6f3; border:1px solid var(--BorderGrey); border-bottom:none; cursor:pointer; border-radius:var(--Pad4) var(--Pad4) 0 0; margin-right:var(--Pad4); }
.TAB_consentBtn.IS_active{ background:#fff; color:var(--NavyBlue); border-bottom:var(--Pad2) solid #fff; margin-bottom:-2px; }
.CARD_clergy{ background:#f7f6f3; border:1px solid var(--BorderGrey); border-radius:var(--Pad8); padding:var(--Pad14) var(--Pad18); margin-bottom:var(--Pad10); }
.CARD_clergyHd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--Pad12); }
.CARD_childNum, .CARD_clergyNum{ font-size:var(--text-xs); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:.08em; color:var(--NavyBlue); }
.CARD_clergyRm{ background:none; border:none; cursor:pointer; color:var(--CoolGrey); font-size:var(--text-sm); font-weight:var(--weight-extrabold); font-family:var(--FontSans); }
.CARD_clergyRm:hover{ color:#c0392b; }
.CARD_sigCanvas{ border:1.5px solid var(--BorderGrey); border-radius:var(--Pad6); background:#fafafa; cursor:crosshair; display:block; width:100%; height:130px; touch-action:none; }
.BTN_sigClear{ font-size:var(--text-sm); font-weight:var(--weight-extrabold); color:var(--NavyBlue); background:none; border:none; cursor:pointer; padding:var(--Pad4) 0; text-decoration:underline; font-family:var(--FontSans); margin-top:var(--Pad6); display:inline-block; }
.SECTION_nav{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--Pad20); }
.BTN_prev{ padding:var(--Pad10) var(--Pad24); background:transparent; color:var(--NavyBlue); border:1.5px solid var(--NavyBlue); border-radius:var(--Pad4); font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-extrabold); cursor:pointer; }
.BTN_prev:hover{ background:var(--NavyBlue); color:#fff; }
.BTN_nextS{ padding:var(--Pad10) var(--Pad28); background:var(--NavyBlue); color:#fff; border:none; border-radius:var(--Pad4); font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-extrabold); cursor:pointer; }
.BTN_nextS:hover{ background:var(--NavyBlueDark); }
.BTN_submitS{ padding:var(--Pad10) var(--Pad28); background:var(--Gold); color:#1e2027; border:none; border-radius:var(--Pad4); font-family:var(--FontSans); font-size:var(--text-md); font-weight:var(--weight-extrabold); cursor:pointer; }
.CARD_success{ background:rgba(255,255,255,.88); border:1px solid var(--BorderGrey); border-radius:var(--Pad8); padding:var(--Pad48) var(--Pad40); text-align:center; display:none; }
.CARD_success.IS_visible{ display:block; }
.UTIL_mobileTabs{ display:none; overflow-x:auto; background:rgba(255,255,255,.9); border-bottom:1px solid var(--BorderGrey); padding:0 var(--Pad16); white-space:nowrap; }
.TAB_mobile{ display:inline-flex; align-items:center; padding:var(--Pad12) var(--Pad14); font-size:var(--text-xs); font-weight:var(--weight-extrabold); color:var(--CoolGrey); border-bottom:var(--Pad2) solid transparent; cursor:pointer; white-space:nowrap; }
.TAB_mobile.IS_active{ color:var(--NavyBlue); border-bottom-color:var(--Bronze); }
.LIST_check{ display:flex; flex-direction:column; gap:var(--Pad10); }
.CHK_checkItem{ display:flex; align-items:flex-start; gap:var(--Pad10); }
.BADGE_checkDot{ width:6px; height:6px; background:var(--Gold); border-radius:50%; flex-shrink:0; margin-top:var(--Pad4); }
.CARD_cta{ display:flex; align-items:center; justify-content:space-between; gap:var(--Pad32); background:rgba(255,255,255,.8); border:1px solid var(--BorderGrey); border-radius:var(--Pad8); padding:var(--Pad28) var(--Pad32); }
.GRID_parts{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.CARD_partsItem{ display:flex; align-items:baseline; gap:var(--Pad14); padding:var(--Pad10) 0; border-bottom:1px solid rgba(0,0,0,.06); }
.CARD_partsItem:last-child{ border-bottom:none; padding-bottom:0; }
.CARD_partsItem:first-child{ padding-top:0; }
.CARD_partsNum{ font-size:var(--text-xs); font-weight:var(--weight-extrabold); color:var(--NavyBlue); opacity:.45; flex-shrink:0; width:14px; text-align:right; }
.CARD_partsItemFull{ grid-column:1/-1; border-top:1px solid rgba(0,0,0,.06); }
.FORM_contactFull{ width:100%; display:flex; flex-direction:column; gap:var(--Pad14); }

@media(max-width:768px){
  .SHELL_sideapp{ display:none; }
  .UTIL_mobileTabs{ display:block; }
  .SHELL_body{ padding:var(--Pad16); }
  .FORM_row.GRID_col2,.FORM_row.GRID_col3{ grid-template-columns:1fr; }
}

/* =========================================================
   UTILITY CLASSES — replaces common inline style patterns
   ========================================================= */

/* Margin resets */
.UTIL_m0  { margin: 0; }
.UTIL_mb0 { margin-bottom: 0; }
.UTIL_mt0 { margin-top: 0; }
/* Padding resets */
/* Display helpers */

/* Flex helpers */

/* Width helpers */
/* Text alignment */
.UTIL_textCenter { text-align: center; }

/* Overflow */

/* Position */

/* Cursor */
.IS_clickable, .UTIL_cursorPointer{ cursor: pointer; }

/* Opacity */

/* Border-radius shorthand */

/* Font weight overrides */

/* Colour utility overrides */
.UTIL_textNavy    { color: var(--NavyBlue); }

/* Background utilities */

/* Vertical align */

/* User select */
/* List reset */
/* =========================================================
   EXTRACTED INLINE STYLE CLASSES
   ========================================================= */
.PAG_pageTitleWhite { font-family:var(--FontDisplay); font-size:var(--title-lg); font-weight:var(--weight-extrabold); color:#fff; margin-bottom:var(--Pad12); }
.SHELL_sideemptyHint { font-family:var(--FontSans); font-size:var(--text-lg); color:#8b9db8; line-height:1.6; max-width:280px; }
.SHELL_sidetimestamp { font-family:var(--FontSans); font-size:var(--text-sm); color:#4a5568; margin-top:var(--Pad24); }
.UTIL_mt20 { margin-top:var(--Pad20); }
.UTIL_mb6 { margin-bottom:var(--Pad6); }
.UTIL_mb8 { margin-bottom:var(--Pad8); }
.UTIL_mb10 { margin-bottom:var(--Pad10); }
.UTIL_mb12 { margin-bottom:var(--Pad12); }
.UTIL_mb14 { margin-bottom:var(--Pad14); }
.UTIL_mb20 { margin-bottom:var(--Pad20); }
.NAV_monoId { color:var(--NavyBlue); font-family:var(--FontMono); font-size:var(--text-sm); font-weight:var(--weight-semibold); }
.UTIL_fsHelper { font-size:var(--text-sm); }
.HDR_signin, .UTIL_centerMb4{ text-align:center; margin-bottom:var(--Pad4); }
.UTIL_w110 { width:110px; }
.UTIL_overflowXAuto { overflow-x:auto; }
/* .FILTER_invert unified below at the .FILTER_invert { invert+brightness } rule
   (2026-08-06 silent-dup fix — the earlier `filter:invert(1)` alone was dead
   code, overridden 100 % by the later `invert(1) brightness(2)` rule). */
.TXT_labelBronzeCaps { font-size:var(--text-md); font-weight:var(--weight-extrabold); color:var(--Bronze); text-transform:uppercase; letter-spacing:0.06em; }
.FILE_docName, .LYT_flexItemsGap8{ display:flex; align-items:center; gap:var(--Pad8); }
.LYT_flexItemsGap24 { display:flex; align-items:center; gap:var(--Pad24); }
.UTIL_textMutedCenter { text-align:center; padding:var(--Pad20); color:var(--SlateGrey); }
.UTIL_textMutedCenterLg { text-align:center; padding:var(--Pad32); color:var(--SlateGrey); font-size:var(--text-md); }
.UTIL_bgEmerald { background:var(--Green); }
.UTIL_bgBronze  { background:var(--Bronze); }
.UTIL_bgNavy    { background:var(--NavyBlue); }
.UTIL_borderNone { border-bottom:none; }
.UTIL_centerW20 { text-align:center; width:20%; }
.UTIL_centerW90 { text-align:center; width:90px; }
.UTIL_fsLgMb14 { font-size:var(--text-lg); margin-bottom:var(--Pad14); }
.FILE_docUser, .UTIL_mutedSm, .UTIL_textHelperMuted{ font-size:var(--text-sm); color:var(--SlateGrey); }
.UTIL_w32 { width:32px; }

/* One-off extracted classes */

.UTIL_w90  { width:90px; }
.UTIL_w100 { width:100px; }
.UTIL_w120 { width:120px; }
.UTIL_w140 { width:140px; }
.UTIL_w160 { width:160px; }

.UTIL_centerW80  { text-align:center; width:80px; }
.UTIL_centerW70  { text-align:center; width:70px; }

.UTIL_lh15 { line-height:1.5; }
.UTIL_fsUiSm   { font-size:var(--text-md); }
.UTIL_mb16 { margin-bottom:var(--Pad16); }
.UTIL_mt6  { margin-top:var(--Pad6); }
.UTIL_textCenterMaxw { text-align:center; max-width:480px; margin:0 auto var(--Pad24); }
/* Final one-off extracted classes */
.UTIL_cellPadXl { padding:var(--Pad14) var(--Pad20); }
.UTIL_mt8, .UTIL_mt9{ margin-top:var(--Pad8); }
.FORM_actions, .UTIL_mt1, .UTIL_mt5{ margin-top:var(--Pad4); }
.UTIL_mt2, .UTIL_mt3{ margin-top:var(--Pad2); }
.LYT_flexGap10 { display:flex; align-items:center; gap:var(--Pad10); }

.LYT_flexColGap14 { display:flex; flex-direction:column; gap:var(--Pad14); }
.UTIL_dFlexAuto { margin:auto; display:flex; }
.LYT_flexColHidden { display:none; flex-direction:column; flex:1; }
.CARD_docInfo, .CARD_partyDetails, .FORM_app, .LYT_flex1Minw0{ flex:1; min-width:0; }
.CARD_petitionRight, .LYT_flexShrink0{ flex-shrink:0; }
.UTIL_textUnderline { text-decoration:underline; }
.UTIL_w220 { width:220px; }
.UTIL_w36  { width:36px; }
.UTIL_maxW420 { max-width:420px; }
.UTIL_maxW560 { max-width:560px; }
.HDR_bannerLeft, .UTIL_minW0{ min-width:0; }
.UTIL_pad12 { padding:var(--Pad12); }

.UTIL_pad48Center { padding:var(--Pad48); text-align:center; }

.UTIL_margin1416 { margin:var(--Pad14) var(--Pad16); }
.UTIL_nowrapFlexGap4 { white-space:nowrap; display:flex; gap:var(--Pad4); align-items:center; }
.UTIL_bgCoral   { background:var(--CoralRose); }

.UTIL_bgCrimson, .UTIL_bgRed{ background:var(--Crimson); }
.UTIL_textCoral   { color:var(--CoralRose); }
.UTIL_textBronze2 { color:var(--Bronze); }

.UTIL_textRed2    { color:var(--Crimson); }
.UTIL_textEmerald2{ color:var(--Green); }
.UTIL_fwSemiboldOnly { font-weight:var(--weight-semibold); }
.UTIL_fwMediumOnly { font-weight:var(--weight-regular); }
.UTIL_opacity70 { opacity:0.7; }

.UTIL_rtlHidden { display:none; direction:rtl; text-align:right; line-height:2; }

.TXT_displayLgText { font-size:var(--title-xl); }
.SECTION_bold { font-size:var(--title-lg); font-weight:var(--weight-extrabold); }

/* Last batch of extracted classes */
.TXT_cellLabelMuted { font-family:var(--FontSans); font-size:var(--text-xs); color:var(--SlateGrey); align-self:center; }
.UTIL_textReset { color:var(--InkBlack); text-transform:none; letter-spacing:0; }
.EMPTY_docPreview, .UTIL_bodyMuted{ font-family:var(--FontSans); font-size:var(--text-md); color:var(--SlateGrey); }
.UTIL_bodySlate { font-size:var(--text-md); color:var(--SlateGrey); }
.UTIL_pad48424 { padding:var(--Pad4) var(--Pad24) var(--Pad4) var(--Pad8); }
.UTIL_centerPad24 { text-align:center; padding:var(--Pad24); color:var(--SlateGrey); }

.TXT_displayHeadingDark { font-family:var(--FontDisplay); color:var(--InkBlack); }
.UTIL_bgAmber2 { background:var(--Orange); }
.UTIL_textAmber2 { color:var(--Orange); }
.UTIL_fsBodyLg, .UTIL_fsUiLgOnly{ font-size:var(--text-lg); }

/* =========================================================
   SVG ICON COLOURING
   <img> tags can't use CSS 'color'. We use CSS filter to tint
   currentColor SVGs to the correct colour per context.
   ========================================================= */

/* Nav sidebar icons — always white (dark sidebar background) */
.NAV_iconImg{ filter:invert(1) brightness(2); opacity:0.8; width:18px; height:18px; flex-shrink:0; border-radius:0 !important; }

/* Section header calendar/file icons — white on coloured header bg */
/* .ICON_head filter merged into the main .ICON_head rule (2026-08-06 silent-dup fix). */

/* Case tab icons — navy when active, grey when inactive */
.TAB_case.IS_active .ICON_caseTab { filter: invert(1) brightness(2); opacity:1; }
.TAB_case .ICON_caseTab { filter: invert(1) brightness(2); opacity:1; }

/* Breadcrumb icons — muted grey */
.BREAD_chev,
.BREAD_home { filter: invert(40%) sepia(5%) saturate(400%) hue-rotate(340deg) brightness(80%); opacity: .7; }

/* Close / dismiss buttons — WarmGrey */
.BTN_close img,
.MODAL_ctmClose img,
[class*="closeBtn"] img { filter: invert(40%) sepia(5%) saturate(400%) hue-rotate(340deg) brightness(80%); }

/* Document preview icons — SlateGrey */
/* .ICON_docPreview filter merged into the main rule (2026-08-06 silent-dup fix). */

/* Warning icon — Orange */

/* Info icon — Navy */

/* Check/success icon — Green */

/* Icons on coloured/dark backgrounds — invert to white */
.ICON_proc img,
[class*="headerBlue"] img,
.BTN_nextS img,
.BTN_prev img { filter: invert(1) brightness(2); }

/* filter-invert utility — for manually placed icons on dark bg */
.FILTER_invert { filter: invert(1) brightness(2); }

/* ico-display in the case header breadcrumb (dark #1A2332 bg) */
.CARD.MOD_flush .BREAD img { filter: invert(1) brightness(2); opacity: .6; }

/* Icon colour filter utilities — apply to <img> tags */
.ICON_white  { filter: invert(1) brightness(2); }
.ICON_navy   { filter: invert(44%) sepia(10%) saturate(1000%) hue-rotate(175deg) brightness(80%); }
.ICON_green  { filter: invert(35%) sepia(20%) saturate(500%) hue-rotate(60deg) brightness(80%); }
.ICON_orange { filter: invert(45%) sepia(70%) saturate(900%) hue-rotate(10deg) brightness(90%); }
.ICON_grey   { filter: invert(40%) sepia(5%) saturate(400%) hue-rotate(340deg) brightness(80%); }
/* ── Restored hover / interactive states ── */
.BTN_pill:hover{ opacity:0.85; }
.TBL tbody tr:hover td{ background:var(--OffWhite); }
.CARD_caseRowAligned:hover .TXT_caseRowTitle{ color:var(--NavyBlue); }
a:hover{ opacity:0.85; }

/* ================================================================
   BUTTON ICON COLOUR INHERITANCE
   All ico-* img tags inside buttons/links inherit button text colour
   via CSS filter rules targeting known button classes.
   ================================================================ */

/* White text buttons → white icons */
.BTN.BTN_accent img, .BTN.BTN_primary img, .BTN_q img, .SEARCH_advApply img, .BTN_head img, .BTN_f.MOD_primary img{ filter: invert(1) brightness(2); }

/* Ghost / outline buttons → navy icons */
.BTN_docPreview.MOD_ghost img,
.TGL_adv img,
.BTN_addRow img,
.BTN_print img,
.BTN_f.MOD_ghost img { filter: invert(44%) sepia(10%) saturate(1000%) hue-rotate(175deg) brightness(80%); }

/* Muted / close buttons → WarmGrey icons */
.BTN_popoutClose img, .BTN_popout img, .BTN_act img{ filter: invert(40%) sepia(5%) saturate(400%) hue-rotate(340deg) brightness(80%); }

/* ── COUNCIL MEMBER CARDS (shared: dashboard, session summary) ── */
.GRID_cm{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;padding:16px 24px}
.CARD_cm{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:0 12px;cursor:pointer;transition:box-shadow .15s,transform .15s}
.CARD_cm:hover{box-shadow:0 6px 20px rgba(0,0,0,0.08);transform:translateY(-2px)}
.AVATAR_cm{grid-row:1;grid-column:1;width:48px;height:48px;border-radius:var(--Radius8);object-fit:cover;object-position:top;flex-shrink:0;border:1px solid rgba(0,0,0,0.08)}
.CARD_cmInfo{grid-row:1;grid-column:2;min-width:0;display:flex;flex-direction:column;justify-content:center}
.CARD_cmName{font-family:var(--FontDisplay);font-size:var(--text-md);font-weight:600;color:var(--InkBlack);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.CARD_cmLast{display:block}
.CARD_cmRole{font-family:var(--FontSans);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--WarmGrey);margin-top:2px}
.CARD_cmCount{grid-row:2;grid-column:1/-1;display:flex;align-items:baseline;justify-content:flex-end;gap:4px;margin-top:8px;padding-top:8px;border-top:1px solid var(--BorderGrey)}
.CARD_cmNum{font-family:var(--FontSans);font-size:16px;font-weight:600;color:var(--NavyBlue);line-height:1}
.TXT_cmLabel{font-family:var(--FontSans);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--SlateGrey)}
@media(max-width:600px){.GRID_cm{grid-template-columns:1fr 1fr;gap:10px}.CARD_cm{padding:12px}.AVATAR_cm{width:40px;height:40px}}

/* ═══════════════════════════════════════════════════════════════
   SEARCH FIELD HEIGHT — matches the 32px button standard below, so the
   input and the Search/Filters buttons beside it line up exactly.
   Declared once here; pages must not restate the box.
   ═══════════════════════════════════════════════════════════════ */
.INP_q, .SEARCH_hist, .CARD_auditSrch input{
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 0 14px 0 38px;          /* left inset clears the search icon */
  font-family: var(--FontSans);
  font-size: var(--text-sm);
  line-height: 1;
  border: 1px solid var(--BorderGrey);
  border-radius: 6px;
  color: var(--InkBlack);
  outline: 0;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON STANDARD — every button in the admin site is 32px tall.
   The box (height, radius, flex layout) is fixed here for every
   button class in the app. The horizontal padding and font-size are
   NOT set here — they come from one of three explicit size modifiers:
   .MOD_small / .MOD_medium / .MOD_normal (see below).
   Every button must carry exactly one of those modifiers.
   Colours / borders vary by variant class (BTN_primary, BTN_white,
   BTN_ghost, etc.), never by the box or size.
   ═══════════════════════════════════════════════════════════════ */
.BTN, .BTN_sm, .BTN_white, .BTN_docPreview, .BTN_upRowOpen, .BTN_histOpen,
.BTN_memberOpen, .BTN_popout, .BTN_print, .BTN_q, .BTN_h, .BTN_comm, .BTN_f,
.BTN_intakeAction, .BTN_ocr, .BTN_upload, .BTN_addRow, .BTN_tmplNew,
.BTN_pill, .BTN_assign, .BTN_head, .TGL_adv, .SEARCH_advClear, .SEARCH_advApply,
.BTN_q, .BTN_histPage, .BTN_upRowRemove{
  box-sizing: border-box;
  min-height: 32px;
  height: 32px;
  font-family: var(--FontSans);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON SIZE TIERS — added 2026-08-06.
   All three tiers keep the 32px height; they differ only in
   horizontal padding + font-size. Every <button> in the app carries
   exactly one of these three modifier classes.

   .MOD_small   — inline row actions (Open / Remove inside a list row,
                   Clear inside a signature pad)
   .MOD_medium  — the default for form footers, search bars, modal
                   actions, tool buttons
   .MOD_normal  — prominent CTAs in a page header or sticky footer
                   (Create Session, Record Votes & Continue)

   Segmented toggles (.TGL_seg, .TAB, .TGL_adv) sit at the SAME 32px
   height so they align in a row with buttons, but they are NOT part
   of the .BTN class family; they keep their own component styles.
   ═══════════════════════════════════════════════════════════════ */
.MOD_small { padding: 0 var(--Pad10) !important; font-size: var(--text-xs) !important; }
.MOD_medium{ padding: 0 var(--Pad16) !important; font-size: var(--text-sm) !important; }
.MOD_normal{ padding: 0 var(--Pad24) !important; font-size: var(--text-md) !important; }

/* Per-button font-weight intent — bumped-specificity overrides so the
   button-standard rule's default weight-semibold doesn't win on source
   order. Only the buttons whose intent differs from semibold need to
   be listed here. */
.BTN_pill.BTN_pill    { font-weight: var(--weight-regular); }
.BTN_upload.BTN_upload{ font-weight: var(--weight-extrabold); }

/* Segmented-toggle button styles kept OUT of the .BTN size system per
   Option 1 (2026-08-06). These match the .MOD_medium visual (32px height,
   0 16px padding, text-sm) so they align inline with medium buttons in
   the search-bar row. Colour treatment stays their own component look. */
.TGL_adv{ padding:0 var(--Pad16); font-family:var(--FontSans); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--NavyBlue); background:rgba(30,77,123,.06); border:1px solid rgba(30,77,123,.12); cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:var(--Pad6); }
.TGL_adv:hover{ background:rgba(30,77,123,.12); }
.TGL_adv svg, .TGL_adv img{ width:12px; height:12px; flex-shrink:0; }
/* icons inside buttons keep a consistent size */
.BTN img, .BTN_white img, .BTN_docPreview img, .BTN_upRowOpen img,
.BTN_popout img, .BTN_print img, .BTN_comm img, .BTN_intakeAction img,
.BTN_addRow img, .BTN_pill img, .BTN_head img{ width:14px; height:14px; flex-shrink:0; }
/* full-width variants keep the height but stretch */
.BTN_addRow{ width:100%; justify-content:flex-start; }

/* upRowOpenBtn — compact outlined action button (global standard) */
.BTN_upRowOpen{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:5px 14px;
  font-family:var(--FontSans); font-size:var(--text-sm); font-weight:var(--weight-semibold);
  border:1px solid rgba(30,77,123,0.2); border-radius:6px;
  background:transparent; color:var(--NavyBlue);
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
.BTN_upRowOpen:hover{ background:var(--NavyBlue); color:#fff; border-color:var(--NavyBlue); }
.BADGE_hearingGroup .BTN_upRowOpen{ min-width:200px; }
/* BTN_white (transparent bg, navy text) */
.BTN_white img { filter: invert(44%) sepia(10%) saturate(1000%) hue-rotate(175deg) brightness(80%); }

/* docPreviewBtn primary → white, ghost → navy */
.BTN_docPreview.MOD_primary img { filter: invert(1) brightness(2); }
.BTN_docPreview.MOD_ghost img   { filter: invert(44%) sepia(10%) saturate(1000%) hue-rotate(175deg) brightness(80%); }
/* docPreviewBtn without explicit variant — check background */
.BTN_docPreview img { filter: invert(44%) sepia(10%) saturate(1000%) hue-rotate(175deg) brightness(80%); }

/* FAQ accordion chevron — matches the navy label colour */
.CARD_faqQ img { filter: invert(44%) sepia(10%) saturate(1000%) hue-rotate(175deg) brightness(80%); }

/* docItem icons — match the WarmGrey file label colour */
.CARD_docItem img { filter: invert(40%) sepia(5%) saturate(400%) hue-rotate(340deg) brightness(80%); }

/* Breadcrumb home icon — WarmGrey */
.BREAD_link img { filter: invert(40%) sepia(5%) saturate(400%) hue-rotate(340deg) brightness(80%); }

/* app.js nav-back, footer-login */
.NAV_back img     { filter: invert(1) brightness(2); }
.FTR_login img { filter: invert(40%) sepia(5%) saturate(400%) hue-rotate(340deg) brightness(80%); }

/* Generic rule: any button with explicit colour classes */
/* .BTN img / button img: no default sizing — rely on the specific rules above */

/* Content padding after section headers */
.SECTION_header + .GRID_caseOverview,
.SECTION_header + .CARD_p,
.SECTION_header + .PANEL_body,
.SECTION_header + table,
.SECTION_header + .TBL { padding-top: 0; }
.CARD.MOD_flush > .TBL,
.CARD.MOD_flush > table { margin:0 24px 16px; width:calc(100% - 48px); }

.TBL_pCell{ padding:var(--Pad12) var(--Pad20) var(--Pad12) 0; }

/* Overview grid cell — declared ONCE here; pages set only their column count. */
.CARD_caseOverviewCell{
  padding: 14px 20px;
  border-right: 1px solid var(--PageGrey);
}
/* Breathing room under the last row of an overview grid, with no rule line. */
.CARD.MOD_flush > .GRID_caseOverview:last-child{ padding-bottom: 16px; }

/* Align pageHead content to contentInner max-width on wide screens */
@media (min-width: 1560px) {
  .PAG_pageHead {
    padding-left: calc((100% - 1400px) / 2 + var(--Pad28));
    padding-right: calc((100% - 1400px) / 2 + var(--Pad28));
  }
}

/* ── Party name pills ── */
.AVATAR_party{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;   /* pill text stays LEFT aligned */
  gap:5px;
  /* Canonical pill padding — every BADGE + AVATAR uses this exact box:
     5px top, 10px right, 5px bottom, 6px left. Left inset is tighter to sit
     closer to the leading icon (present on AVATAR, optional on BADGE). */
  padding:5px 10px 5px 6px;
  border-radius:var(--Pad4);
  font-family:var(--FontMono);
  font-size:var(--text-md);
  font-weight:var(--weight-regular);
  white-space:nowrap;
  vertical-align:middle;
  line-height:1;
  letter-spacing:-0.07em;
  word-spacing:-0.25em;
  box-sizing:border-box;
}
.AVATAR_party img{ width:13px; height:13px; flex-shrink:0; }
.AVATAR_party.MOD_female{
  background:#FBEAF0; border:1px solid #ED93B1; color:#72243E;
}
.AVATAR_party.MOD_male{
  background:#E6F1FB; border:1px solid #85B7EB; color:#0C447C;
}
.AVATAR_party.MOD_clergy{
  background:#636465; border:1px solid #000000; color:var(--White);
}
.AVATAR_party.MOD_sm{ font-size:var(--text-md); padding:5px 10px 5px 6px; }
.AVATAR_party.MOD_sm img{ width:11px; height:11px; }

/* ── Portal Home (public-ctm-home.html) ── */
.PAGE_portalBar{ background:var(--CharcoalNavy); padding:10px 56px; display:flex; align-items:center; border-bottom:2px solid rgba(0,0,0,.15); box-shadow:0 2px 8px rgba(0,0,0,.25); flex-shrink:0; }
.PAGE_portalBrand{ display:flex; align-items:center; gap:12px; }
.PAGE_portalSeal{ width:36px; height:36px; object-fit:contain; }
.PAGE_portalOrg{ font-size:var(--text-xs); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.5); }
.PAGE_portalHero{ background:linear-gradient(118deg,#7a5c2e 0%,var(--Gold) 52%,#9a7218 100%); border-bottom:var(--Pad2) solid var(--CharcoalNavy); box-shadow:inset 0 -2px 50px rgba(30,32,39,.3); position:relative; overflow:hidden; flex-shrink:0; }
.PAGE_portalHero::before{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:600px; height:600px; background:url('./assets/logo/diocese_logo.svg') center/contain no-repeat; opacity:.04; pointer-events:none; }
.PAGE_portalHeroInner{ max-width:1160px; margin:0 auto; padding:var(--Pad28) var(--Pad48); display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--Pad48); position:relative; z-index:1; }
.TXT_portalHeroLabel{ font-size:var(--text-xs); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:.14em; color:var(--GoldLight); margin-bottom:var(--Pad6); }
.TXT_portalHeroTitle{ font-family:var(--FontDisplay); font-size:var(--title-lg); font-weight:var(--weight-extrabold); color:#fff; line-height:1.2; margin-bottom:var(--Pad8); }
.PAGE_portalHeroRule{ width:48px; height:3px; background:var(--GoldLight); }
.PAGE_portalHeroSeal{ width:100px; height:100px; object-fit:contain; opacity:.85; }
.PAGE_portalBody{ flex:1; background:linear-gradient(to bottom,#f0eeea,#d8d4cc); padding:var(--Pad48) 80px 56px; display:flex; flex-direction:column; align-items:center; gap:var(--Pad28); }
.TXT_portalSectionLabel{ font-size:var(--title-md); font-weight:var(--weight-extrabold); text-transform:uppercase; letter-spacing:.08em; color:var(--Bronze); text-align:center; }

/* Suppress ::before icon when partyPill is present inside name elements */
.AVATAR_female .AVATAR_party::before, .AVATAR_male .AVATAR_party::before{ display: none !important; }

/* When a nameFemale/nameMale element directly contains a partyPill, hide the pseudo-element */
.AVATAR_female:has(.AVATAR_party)::before, .AVATAR_male:has(.AVATAR_party)::before{ display: none !important; content: none !important; }

/* ── Icon sizing & border-radius ── */
/* Only ico-* named assets get border-radius:0 */
img[src*="/ico-"] {
    border-radius: 0 !important;
}
/* Icons inline in table cells — 16px proportional to body text */
td img[src*="/ico-"],
.TBL img[src*="/ico-"],
.ICON_histComm img[src*="/ico-"],
.ICON_docFile img[src*="/ico-"],
.CARD_tmplCatRow img[src*="/ico-"],
.FILE_tmplRow img[src*="/ico-"],
.CARD_commCatRow img[src*="/ico-"] {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle;
    flex-shrink: 0;
    border-radius: 0 !important;
}
/* Party pill icons */
.AVATAR_party img {
    width: 13px !important;
    height: 13px !important;
    border-radius: 0 !important;
    vertical-align: middle;
}
.AVATAR_party.MOD_sm img {
    width: 11px !important;
    height: 11px !important;
    border-radius: 0 !important;
    vertical-align: middle;
}

/* The generic table-icon rule (.TBL img[src*="/ico-"] { 16px !important })
   outranks .AVATAR_party img, which made party pills taller inside tables than
   outside them. Re-assert the pill icon size at higher specificity, matched to
   the 12px text so every pill is exactly the same height as .BADGE. */
.TBL .AVATAR_party img[src*="/ico-"],
td .AVATAR_party img[src*="/ico-"],
.AVATAR_party img[src*="/ico-"] {
    width: 12px !important;
    height: 12px !important;
}
/* Nav/sidebar icons */
/* .NAV_iconImg border-radius merged into the main rule (2026-08-06 silent-dup fix). */
.ICON_caseTab { border-radius: 0 !important; }

/* ── Breadcrumb row with inline action button ── */
.BREAD_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.BREAD_row .BREAD { margin-bottom: 0; }


/* Consolidated 2026-08-06 — Hearings pages */
.CARD_assignSummary{ background:rgba(30,77,123,.04); border:1px solid rgba(30,77,123,.12); border-radius:8px; padding:14px 16px; margin-bottom:16px; }
.CARD_assignSummaryRow{ display:flex; justify-content:space-between; padding:3px 0; font-family:var(--FontSans); font-size:var(--text-md); }
.CARD_hLogDetail{ display:flex; flex-direction:column; }
.CARD_sessionPickId{ font-family:var(--FontMono); font-size:var(--text-sm); font-weight:700; color:var(--NavyBlue); }
.CARD_hLogItemSub, .CARD_sessionPickMeta{ font-family:var(--FontSans); font-size:var(--text-xs); color:var(--SlateGrey); }
.FTR_schedule{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-top:1px solid rgba(0,0,0,.06); background:rgba(0,0,0,.015); }
.LIST_sessionPick{ padding:16px 20px; display:flex; flex-direction:column; gap:8px; }
.MODAL_h{ display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.4); align-items:center; justify-content:center; }
.MODAL_hBody{ padding:20px; }
.MODAL_hFoot{ display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 20px; border-top:1px solid rgba(0,0,0,.06); }
.MODAL_hHead{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid rgba(0,0,0,.08); }
.MODAL_hIcon{ text-align:center; padding:20px 0 8px; }
.MODAL_hTitle{ font-family:var(--FontDisplay); font-size:var(--text-lg); font-weight:700; }
.PANEL_hLogBody{ padding:20px 24px; font-family:var(--FontSans); font-size:var(--text-md); line-height:1.8; color:var(--InkBlack); }
.PANEL_hLogMeta{ display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.PANEL_hLogTitle{ font-family:var(--FontDisplay); font-size:var(--title-md); font-weight:700; color:var(--InkBlack); }


/* Consolidated 2026-08-06 — Sessions pages */
.CARD_histCount{ font-family: var(--FontSans); font-size: var(--text-md); color: var(--WarmGrey); }
.PAG_hist{ display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 16px; }


/* Consolidated 2026-08-06 — Advanced search / cases */
.PANEL_adv, .UTIL_dNone, .UTIL_hidden{ display:none }
.SEARCH_advActions{ display:flex;justify-content:flex-end;gap:8px;margin-top:14px }
.SEARCH_wrap{ position:relative;flex:1 }
.TBL_pD{ background:rgba(185,28,28,.08);color:#b91c1c }
.TBL_pG, .TBL_pO{ background:rgba(21,128,61,.08);color:#15803d }
.TBL_pP{ background:rgba(217,119,6,.08);color:#b45309 }
.TBL_pR{ background:rgba(30,77,123,.08);color:var(--NavyBlue) }