/* Shell styles harvested from the source portal's dashboard shell (three style blocks), then the PM Box token pass. */
        .narrative-text {
            white-space: pre-wrap;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            margin: 0;
        }
        .narrative-wrapper.expanded .narrative-text {
            -webkit-line-clamp: unset;
            display: block;
        }
        .loading { animation: pulse 1.5s infinite; }
        [contenteditable][data-placeholder]:empty:before { content: attr(data-placeholder); color: #9ca3af; pointer-events: none; }
        [contenteditable] ul { list-style: disc; padding-left: 1.5em; }
        [contenteditable] ol { list-style: decimal; padding-left: 1.5em; }
        .to-description-content ul { list-style: disc; padding-left: 1.5em; }
        .to-description-content ol { list-style: decimal; padding-left: 1.5em; }
        .fiche-note ul { list-style: disc; padding-left: 1.5em; }
        .fiche-note ol { list-style: decimal; padding-left: 1.5em; }
        .fiche-note p, .fiche-note div { margin: 0; }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
        .landing-page { display: none; min-height: calc(100vh - 64px); background: #F5F5F5; padding: 2rem; }
        /* Proposals board fills the whole content area; only the board scrolls */
        .landing-page.bizdev-fullbleed { padding: 0; min-height: 0; height: calc(100vh - 64px); overflow: hidden; }
        .landing-page.active { display: block; }
        .project-card {
            background: white; border-radius: 16px; border: 1px solid #E4E6E7;
            padding: 1.25rem; transition: box-shadow 0.15s ease, border-color 0.15s ease; cursor: pointer;
        }
        .project-card:hover { box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); border-color: #E4E6E7; }
        .project-card.project-card-locked { opacity: 0.7; cursor: not-allowed; background: #fafafa; }
        .project-card.project-card-locked:hover { transform: none; box-shadow: none; border-color: #E4E6E7; }
        .toast {
            position: fixed; bottom: 24px; right: 24px; padding: 12px 24px;
            border-radius: 8px; color: white; font-weight: 500; z-index: 9999;
            animation: slideIn 0.3s ease-out;
        }
        @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        .toast-success { background: #15944A; }
        .toast-error { background: #EB1414; }
        .toast-info { background: #EB1414; }
        .modal-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200;
            display: flex; align-items: flex-start; justify-content: center;
            overflow-y: auto; padding: 40px 16px;
        }
        .modal-content {
            background: white; border-radius: 28px; padding: 24px; width: 90%;
            max-width: 900px; flex-shrink: 0;
            box-shadow: 0 8px 12px rgba(0,0,0,.15), 0 4px 4px rgba(0,0,0,.1);
        }
        /* ---------- Pennylane-style invoice editor (Add invoice) ---------- */
        .pl-editor { position: fixed; inset: 0; z-index: 300; background: #f7f6f4;
            display: flex; flex-direction: column; font-family: var(--sans); }
        .pl-topbar { display: flex; align-items: center; justify-content: space-between;
            padding: 14px 24px; background: #fff; border-bottom: 1px solid #e8e6e1; flex-shrink: 0; }
        .pl-topbar h2 { font-size: 18px; font-weight: 700; color: #1d1c1a; margin: 0; }
        .pl-close { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent;
            color: #55524c; font-size: 20px; line-height: 1; cursor: pointer; }
        .pl-close:hover { background: #f0efec; }
        .pl-main { flex: 1; display: flex; min-height: 0; }
        .pl-doc-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
        .pl-doc-scroll { flex: 1; overflow-y: auto; padding: 36px 32px 24px; }
        .pl-doc { background: #fff; max-width: 860px; margin: 0 auto; border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.07);
            padding: 48px 52px 40px; }
        .pl-doc-head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
        .pl-logo { height: 40px; width: auto; align-self: flex-start; }
        .pl-fromto { text-align: left; width: 300px; font-size: 13px; }
        .pl-fromto .lbl { color: #8a867e; margin-bottom: 2px; }
        .pl-from-name { color: #e2574c; font-weight: 700; letter-spacing: .02em; }
        .pl-from-addr { color: #3c3a36; margin-bottom: 14px; line-height: 1.45; }
        .pl-to-wrap { position: relative; }
        .pl-to-wrap .fa-chevron-down { position: absolute; right: 10px; top: 50%;
            transform: translateY(-50%); font-size: 11px; color: #8a867e; pointer-events: none; }
        .pl-doc-title { color: #e2574c; font-size: 26px; font-weight: 700; margin-bottom: 18px; }
        .pl-meta { display: grid; grid-template-columns: 150px 220px; gap: 8px 12px;
            align-items: center; margin-bottom: 22px; font-size: 13.5px; }
        .pl-meta .k { font-weight: 700; color: #1d1c1a; }
        .pl-input, .pl-select { width: 100%; border: 1px solid #d8d5cf; border-radius: 8px;
            background: #fff; padding: 7px 10px; font-size: 13.5px; color: #1d1c1a; outline: none; }
        .pl-input:focus, .pl-select:focus { border-color: #145a54; box-shadow: 0 0 0 2px rgba(20,90,84,.12); }
        .pl-input::placeholder { color: #a5a19a; }
        .pl-addlink { display: inline-block; background: none; border: none; padding: 2px 0;
            color: #145a54; font-size: 13.5px; font-weight: 600; cursor: pointer; }
        .pl-addlink:hover { text-decoration: underline; }
        .pl-titleblock { margin: 4px 0 18px; }
        .pl-doc-desc { width: 100%; border: 1px dashed transparent; border-radius: 8px; padding: 6px 8px;
            font-size: 14px; color: #1d1c1a; outline: none; }
        .pl-doc-desc:hover { border-color: #d8d5cf; }
        .pl-doc-desc:focus { border: 1px solid #145a54; }
        .pl-lines { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
        .pl-lines thead th { background: #fbe7e4; color: #1d1c1a; font-weight: 700; text-align: left;
            padding: 8px 8px; white-space: nowrap; }
        .pl-lines thead th.num, .pl-lines td.num { text-align: right; }
        .pl-lines tbody td { padding: 6px 4px; border-bottom: 1px solid #f0efec; vertical-align: middle; }
        .pl-lines .pl-input { padding: 6px 8px; }
        .pl-line-total { color: #1d1c1a; padding-right: 6px; white-space: nowrap; }
        .pl-line-del { border: none; background: none; color: #c9c5be; cursor: pointer; padding: 4px 6px; }
        .pl-line-del:hover { color: #EB1414; }
        .pl-lines-foot { display: flex; justify-content: flex-end; padding: 8px 0 2px; }
        .pl-totals { display: flex; justify-content: space-between; gap: 40px; margin-top: 26px;
            padding-top: 18px; border-top: 1px solid #f0efec; }
        .pl-totals h4 { color: #e2574c; font-size: 14px; font-weight: 700; margin: 0 0 8px; }
        .pl-vat-table { font-size: 12.5px; color: #3c3a36; border-collapse: collapse; }
        .pl-vat-table th { font-weight: 700; text-align: left; padding: 2px 18px 4px 0; color: #1d1c1a; }
        .pl-vat-table td { padding: 2px 18px 2px 0; }
        .pl-recap { min-width: 260px; font-size: 13.5px; }
        .pl-recap .row { display: flex; justify-content: space-between; padding: 3px 0; color: #3c3a36; }
        .pl-recap .row.grand { font-weight: 700; color: #1d1c1a; border-top: 1px solid #e8e6e1;
            margin-top: 6px; padding-top: 8px; font-size: 15px; }
        .pl-actions { flex-shrink: 0; display: flex; justify-content: center; gap: 14px;
            padding: 14px 24px; background: linear-gradient(180deg, rgba(247,246,244,0), #f7f6f4 40%); }
        .pl-btn { padding: 10px 26px; border-radius: 10px; font-size: 14px; font-weight: 600;
            cursor: pointer; border: 1px solid #145a54; }
        .pl-btn-outline { background: #fff; color: #145a54; }
        .pl-btn-outline:hover { background: #eef4f3; }
        .pl-btn-solid { background: #145a54; color: #fff; }
        .pl-btn-solid:hover { background: #0f4a45; }
        .pl-btn:disabled { opacity: .6; cursor: default; }
        .pl-params { width: 380px; flex-shrink: 0; background: #fff; border-left: 1px solid #e8e6e1;
            overflow-y: auto; padding: 22px 26px; }
        .pl-params-head { display: flex; align-items: center; justify-content: space-between;
            font-size: 17px; font-weight: 700; color: #1d1c1a; margin-bottom: 18px; }
        .pl-section { padding: 16px 0; border-top: 1px solid #f0efec; }
        .pl-section:first-of-type { border-top: none; padding-top: 0; }
        .pl-section-title { display: flex; align-items: center; gap: 10px; font-size: 14.5px;
            font-weight: 700; color: #1d1c1a; margin-bottom: 8px; }
        .pl-section-title .ic { width: 28px; height: 28px; border-radius: 7px; background: #f0efec;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 12px; color: #55524c; }
        .pl-help { font-size: 12.5px; color: #8a867e; line-height: 1.5; margin-bottom: 10px; }
        .pl-field { margin-bottom: 12px; }
        .pl-field label { display: block; font-size: 12.5px; color: #55524c; margin-bottom: 4px; }
        .pl-to-details { font-size: 12.5px; color: #3c3a36; margin-top: 8px; line-height: 1.5; }
        .pl-art-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
            padding: 5px 0; border-bottom: 1px solid #f0efec; }
        .pl-art-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; color: #1d1c1a; }
        .pl-art-price { color: #55524c; white-space: nowrap; }
        .pl-pdf-overlay { position: absolute; inset: 0; background: rgba(30,29,26,.55);
            z-index: 10; display: flex; align-items: center; justify-content: center; }
        .pl-pdf-frame { background: #fff; border-radius: 12px; width: min(880px, 92%);
            height: 92%; display: flex; flex-direction: column; overflow: hidden;
            box-shadow: 0 12px 40px rgba(0,0,0,.35); }
        .pl-pdf-bar { display: flex; justify-content: space-between; align-items: center;
            padding: 10px 16px; border-bottom: 1px solid #e8e6e1; font-weight: 700;
            font-size: 14.5px; color: #1d1c1a; flex-shrink: 0; }
        .pl-pdf-frame iframe { flex: 1; border: none; width: 100%; }
        @media (max-width: 1150px) { .pl-params { display: none; } }
        .status-badge {
            display: inline-flex; align-items: center; padding: 2px 10px;
            border-radius: 9999px; font-size: 0.75rem; font-weight: 600;
        }
        .status-active { background: #E8F6ED; color: #15944A; }
        .status-completed { background: #F1F1F2; color: #4F5158; }
        .status-on-hold { background: #FFF3E2; color: #B45309; }
        .status-cancelled { background: #FFF0F0; color: #CF1212; }
        .status-pending { background: #FFF3E2; color: #B45309; }
        .status-paid { background: #E8F6ED; color: #15944A; }
        .status-partial_payment { background: #FFF3E2; color: #B45309; }
        .status-emitted { background: #FFF3E2; color: #B45309; }
        .status-planned { background: #F0F5FD; color: #EB1414; }
        .status-requested { background: #ede9fe; color: #6d28d9; }
        .status-in_progress { background: #F1F1F2; color: #4F5158; }
        .status-credit_note { background: #ede9fe; color: #5b21b6; }
        .status-overdue { background: #FFF0F0; color: #CF1212; }
        .upload-zone {
            border: 2px dashed #d1d5db; border-radius: 12px; padding: 2rem;
            text-align: center; transition: all 0.2s; cursor: pointer;
        }
        .upload-zone:hover, .upload-zone.dragover { border-color: #EB1414; background: #F0F5FD; }
        .tab-btn { padding: 8px 16px; border-radius: 9999px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
        .tab-btn.active { background: #EB1414; color: white; }
        .tab-btn:not(.active) { background: #F1F1F2; color: #4F5158; }
        .tab-btn:not(.active):hover { background: #F1F1F2; }
        .nav-link { padding: 8px 16px; border-radius: 9999px; font-weight: 500; cursor: pointer; transition: all 0.2s; color: #E4E6E7; }
        .nav-link:hover { background: rgba(255,255,255,0.1); }
        .nav-link.active { background: rgba(255,255,255,0.2); color: white; }
        .deliverable-card {
            background: white; border: 1px solid #E4E6E7; border-radius: 0.75rem;
            padding: 1rem; transition: all 0.2s;
        }
        .deliverable-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

        /* Left Sidebar */
        /* Full-height rail: the sidebar runs from the very top of the viewport
           and the header sits to the right of it (padding-left when open). */
        #sidebar {
            position: fixed; top: 0; left: 0; bottom: 0; z-index: 45;
            width: 240px; background: #F5F5F5; color: #4F5158;
            transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex; flex-direction: column;
            border-right: none;
        }
        #sidebar.open { transform: translateX(0); }
        #appContent { transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
        #appContent.sidebar-open { margin-left: 240px; }
        #appHeader { transition: padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
        #appHeader.sidebar-open { padding-left: 240px; }
        #sidebar { overflow-y: auto; }
        .sidebar-nav { flex: 0 0 auto; padding: 12px 12px; display: flex; flex-direction: column; gap: 2px; }
        .sidebar-item {
            display: flex; align-items: center; gap: 12px; padding: 10px 14px;
            cursor: pointer; transition: all 0.15s; color: #4F5158; font-size: 0.875rem; font-weight: 500;
            border-radius: 9999px; border: none; background: transparent;
        }
        .sidebar-item:hover { background: #F1F1F2; color: #070916; }
        .sidebar-item.active { background: #F0F5FD; color: #161718; }
        .sidebar-item i { width: 20px; text-align: center; flex-shrink: 0; font-size: 1rem; }
        .sidebar-item .sidebar-label { white-space: nowrap; }
        /* Module tiles (the coloured squares beside every top-level entry,
           Page Studio's included) are defined once, at the foot of this
           stylesheet — see "Module tiles". */
        .sidebar-group-header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; cursor: pointer; color: #4F5158; transition: all 0.15s; }
        .sidebar-group-header:hover { background: #F1F1F2; color: #070916; }
        .sidebar-group-header .chevron { margin-left: auto; font-size: 0.7rem; transition: transform 0.2s; }
        .sidebar-group-header.open .chevron { transform: rotate(90deg); }
        .sidebar-sub-items { display: none; flex-direction: column; gap: 1px; padding-left: 16px; }
        .sidebar-sub-items.open { display: flex; }
        .sidebar-sub-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 9999px; font-size: 0.82rem; font-weight: 500; cursor: pointer; color: #4F5158; transition: all 0.15s; }
        .sidebar-sub-item:hover { background: #F1F1F2; color: #070916; }
        .sidebar-sub-item.active { background: #F0F5FD; color: #161718; }
        .sidebar-sub-item i { width: 18px; text-align: center; flex-shrink: 0; font-size: 0.85rem; }
        #hdrEyebrow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
        #hdrEyebrow i { font-size:8px; opacity:.5; }
        /* Group seams are spacing-only: no drawn divider line. Kept small —
           at 15px+ the seam read as a rendering hole on the blue rail. */
        .sidebar-sub-item.after-rule { position:relative; margin-top:6px; }

/* ====================================================================== *
 *  The shell, on the same system as the modules. The sidebar was still on
 *  an old blue palette that belonged to nothing else on the screen.
 * ====================================================================== */
:root{
  --u-navy:#161718; --u-navy-700:#CF1212; --u-navy-100:#F0F5FD;
  --u-teal:#EB1414; --u-teal-100:#F0F5FD; --u-teal-50:#F0F5FD;
  --u-0:#FFFFFF; --u-50:#F5F5F5; --u-100:#F1F1F2; --u-200:#F1F1F2; --u-300:#E4E6E7;
  --u-400:#94969E; --u-500:#4F5158; --u-600:#4F5158; --u-900:#070916;
  --u-font:'Roboto',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --u-r:10px; --u-r-sm:6px;
  --u-e1:0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --u-ease:cubic-bezier(.2,.7,.3,1);
}

body, #sidebar, #appHeader, .sidebar-item, .sidebar-sub-item, .sidebar-group-header,
.page-title, .page-eyebrow { font-family:var(--u-font); }
body{ background:var(--u-50); color:var(--u-900); }

/* ---- sidebar: sits ON the ground, Workspace-style — no dividing edge ---- */
#sidebar{ width:260px; background:var(--u-50); border-right:none;
  color:var(--u-600); }
#appContent.sidebar-open{ margin-left:260px; }
#appHeader.sidebar-open{ padding-left:260px; }
.sidebar-brand{ padding:20px 18px 16px; border-bottom:none; }
.sidebar-brand-name{ color:var(--u-navy); letter-spacing:-.02em; }
.sidebar-brand-sub{ background:var(--u-teal-50); border-color:var(--u-teal-100);
  color:var(--u-navy); }
.sidebar-nav{ padding:12px 10px 8px; gap:1px; }

.sidebar-item, .sidebar-group-header{
  display:flex; align-items:center; gap:11px; min-height:38px; padding:0 16px;
  border-radius:9999px; font-size:13.5px; font-weight:500; color:var(--u-600);
  cursor:pointer; border:none; background:transparent;
  transition:background 150ms var(--u-ease), color 150ms var(--u-ease); }
.sidebar-item:hover, .sidebar-group-header:hover{ background:var(--u-200); color:var(--u-900); }
.sidebar-item.active{ background:var(--u-navy-100); color:var(--u-navy); font-weight:500; }
.sidebar-item i, .sidebar-group-header i:first-child{ color:inherit; opacity:.75; font-size:14px; }
.sidebar-item.active i{ opacity:1; }
.sidebar-group-header .chevron{ margin-left:auto; font-size:10px; opacity:.55; }

.sidebar-sub-items{ padding-left:11px; margin:2px 0 4px; gap:1px;
  border-left:1px solid transparent; }
.sidebar-sub-item{
  display:flex; align-items:center; gap:9px; min-height:34px; padding:0 14px;
  border-radius:9999px; font-size:12.5px; font-weight:500; color:var(--u-600);
  cursor:pointer; transition:background 150ms var(--u-ease), color 150ms var(--u-ease); }
.sidebar-sub-item:hover{ background:var(--u-200); color:var(--u-900); }
.sidebar-sub-item.active{ background:var(--u-teal-50); color:var(--u-navy); font-weight:500; }
.sidebar-sub-item i{ width:16px; text-align:center; font-size:12px; opacity:.7; }
.sidebar-sub-item.after-rule{ margin-top:6px; }
/* a cluster's name, quietly, above its pages — never clickable, never deep */
.sidebar-caption{ padding:9px 10px 3px; font-size:10.5px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--u-400);
  user-select:none; pointer-events:none; }
/* the module's own name wears the active state when its overview is open */
.sidebar-group-header.current{ background:var(--u-teal-50); color:var(--u-navy);
  font-weight:500; }
/* how much is waiting on the person, on the one entry that is a queue */
.today-badge{ margin-left:auto; min-width:19px; height:19px; padding:0 6px;
  border-radius:10px; background:#EB1414; color:#fff; font-size:11px;
  font-weight:500; display:inline-flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums; }
/* the author display rule above would defeat the hidden attribute without this */
.today-badge[hidden]{ display:none; }
.today-badge.is-late{ background:#EB1414; }
.sidebar-item.active .today-badge{ background:#EB1414; }
.sidebar-sub-item:hover{ background:var(--u-200); }
.sidebar-item:hover, .sidebar-group-header:hover{ background:var(--u-200); }
#sidebar .nav-dimmed{ opacity:.55; filter:none; }
#sidebar .nav-dimmed:hover, #sidebar .nav-dimmed:focus-within,
#sidebar .nav-dimmed:has(.active){ opacity:1; }
.sidebar-footer{ padding:14px 18px 22px; color:var(--u-400); font-size:11.5px; }

/* ---- compact rail: the same menu folded down to its icons -------------- */
/* Third sidebar state (the hamburger cycles full menu → rail → hidden).
   Google-style (Material navigation rail, as in Gmail/Chat): sits on the
   same #F5F5F5 ground, one icon per top-level entry, the active area wears
   the tonal blue pill. Hovering a group floats its pages out beside the
   rail; the flyout is fixed-positioned (placed by placeCompactFlyout) so
   the scrolling rail cannot clip it. */
#sidebar.compact{ width:68px; transform:none;
  background:var(--bg);
  color:var(--u-600); }
#appContent.sidebar-compact{ margin-left:68px; }
#appHeader.sidebar-compact{ padding-left:68px; }
#sidebar.compact .sidebar-brand{ padding:14px 0 8px; display:flex;
  justify-content:center; }
#sidebar.compact .sidebar-brand > *{ display:none; }
#sidebar.compact .sidebar-brand::before{ content:''; width:40px; height:40px;
  flex:0 0 auto; border-radius:50%;
  background:#fff url('/static/logo.png') center/76% no-repeat;
  box-shadow:0 0 0 1px var(--stroke); }
#sidebar.compact .sidebar-nav{ flex:1 0 auto; padding:6px 0 16px; gap:5px;
  align-items:center; }
#sidebar.compact .sidebar-nav > div{ display:flex; flex-direction:column;
  align-items:center; }
/* Doc + Admin sit at the foot of the rail, like a settings cluster */
#sidebar.compact #docSidebarGroup{ margin-top:auto; padding-top:14px; }
#sidebar.compact .sidebar-item,
#sidebar.compact .sidebar-group-header{
  width:44px; min-height:44px; padding:0; justify-content:center; gap:0;
  border-radius:12px; color:inherit; }
/* the !importants counter the inline width/font-size on the icon tags */
#sidebar.compact .sidebar-item i,
#sidebar.compact .sidebar-group-header i:first-child{
  width:auto !important; font-size:16px !important; opacity:.92; }
#sidebar.compact .sidebar-label,
#sidebar.compact .chevron,
#sidebar.compact .today-badge,
#sidebar.compact .sidebar-footer{ display:none; }
#sidebar.compact .sidebar-item:hover,
#sidebar.compact .sidebar-group-header:hover{
  background:rgba(68,71,70,.08); color:var(--u-900); }
#sidebar.compact .sidebar-item.active,
#sidebar.compact .sidebar-group-header.current,
#sidebar.compact .sidebar-nav > div:has(.sidebar-sub-item.active) > .sidebar-group-header{
  background:#F0F5FD; color:#161718; }
#sidebar.compact .sidebar-item.active i{ opacity:1 !important; }
#sidebar.compact .nav-dimmed{ opacity:.6; }
/* a group's pages float out beside its icon, on a light card */
#sidebar.compact .sidebar-sub-items{ display:none; }
#sidebar.compact .sidebar-nav > div:hover > .sidebar-sub-items{
  display:flex; position:fixed; z-index:70; min-width:212px; max-width:280px;
  margin:0; padding:8px; border-left:none; background:#fff;
  border-radius:0 14px 14px 14px;
  box-shadow:0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px 0 rgba(60,64,67,.3);
  overflow-y:auto; }
#sidebar.compact .sidebar-nav > div:hover > .sidebar-sub-items[data-label]::before{
  content:attr(data-label); display:block; padding:5px 12px 6px;
  font-size:11.5px; font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--u-500); }
/* Tech Doc's nested list still unfolds inline, inside the flyout */
#sidebar.compact .sidebar-sub-items .sidebar-sub-items.open{
  display:flex; position:static; box-shadow:none; }
/* a group with no pages yet shows no card (marked by placeCompactFlyout) */
#sidebar.compact .sidebar-sub-items.is-empty{ display:none !important; }

/* ---- top bar: flat on the ground, no edge, no shadow ------------------- */
#appHeader{ height:56px; background:var(--u-50);
  border-bottom:none; color:var(--u-900); }
#appContent{ padding-top:56px; }
/* Views that are only an embedded module frame fill the content area edge to
   edge — no shell padding, no outer scrollbar (the frame scrolls internally). */
#appContent > .landing-page:has(> div > iframe[data-erp]){
  padding:0; min-height:0; overflow:hidden; background:#F5F5F5; }
/* ---- HR & Membership: one column down the whole menu -------------------
   Per Diems and the module's other HR screens sit in the column the ERP frame
   gives an embedded app: 1800px centred (erp_module.html `.wrap.app-width`),
   24px of frame padding, then the app's own 22px. The HR pages the portal
   draws itself were still in Tailwind's 1280px column, so walking down the HR
   menu moved the page 250px sideways and shrank it by a third. They take the
   module's box instead, and land on the same left edge Per Diems does.
   Organisation Chart and Recruitment are deliberately not in here: a chart
   and a candidate board keep the whole window (the chart claims it in
   _orgClaimViewport(), which measures this column rather than assuming it). */
#view-hr > .max-w-screen-xl,
#bizdevInnerWrap.hr-column,
#view-settings > .max-w-screen-xl.hr-column{
  max-width:1800px; padding-left:46px; padding-right:46px; }
/* the page-title strip: every screen names itself on the page, top-left,
   reading like the ERP frames' own breadcrumb row */
.page-head{ padding:16px 24px 0; }
.page-head #hdrTitleWrap{ display:flex; align-items:baseline; gap:9px;
  min-width:0; flex-wrap:wrap; }
.page-eyebrow, #hdrEyebrow{ font-size:13px; font-weight:600; color:var(--u-500);
  letter-spacing:.02em; text-transform:none; white-space:nowrap; }
#hdrEyebrow i{ font-size:10px; color:var(--u-400); margin:0 3px; }
#hdrEyebrow:not(:empty)::after{ content:'›'; color:var(--u-400); margin-left:9px;
  font-weight:600; }
.page-title, #hdrTitle{ font-size:22px !important; font-weight:500; color:var(--u-navy);
  letter-spacing:0; line-height:1.2; }
.hamburger-btn{ width:40px; height:40px; border-radius:50%;
  background:transparent; color:var(--u-600); border:1px solid transparent; }
.hamburger-btn:hover{ background:var(--u-200); color:var(--u-900); border-color:transparent; }

:where(button,a,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--u-teal); outline-offset:2px; }

/* ---- command palette --------------------------------------------------- */
#palette{ position:fixed; inset:0; z-index:300; display:none;
  background:rgba(31,31,31,.4); padding:12vh 16px 16px;
  justify-content:center; align-items:flex-start; }
#palette.on{ display:flex; }
.pal-box{ width:min(640px,100%); background:var(--u-0); border-radius:28px;
  box-shadow:0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px 0 rgba(60,64,67,.3);
  overflow:hidden; display:flex; flex-direction:column; max-height:64vh; }
.pal-in{ display:flex; align-items:center; gap:11px; padding:14px 18px;
  border-bottom:1px solid var(--u-200); }
.pal-in i{ color:var(--u-400); font-size:15px; }
.pal-in input{ flex:1; border:none; outline:none; font-family:var(--u-font);
  font-size:15px; color:var(--u-900); background:none; }
.pal-in input::placeholder{ color:var(--u-400); }
.pal-in kbd{ font-family:var(--u-font); font-size:10.5px; font-weight:700;
  color:var(--u-500); background:var(--u-100); border:1px solid var(--u-200);
  border-radius:5px; padding:2px 6px; }
.pal-list{ overflow-y:auto; padding:6px; }
.pal-g{ padding:9px 12px 4px; font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--u-400); }
.pal-i{ display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:9px 12px; border:none; background:none; border-radius:8px;
  font-family:var(--u-font); font-size:13.5px; cursor:pointer; color:var(--u-900); }
.pal-i:hover, .pal-i.on{ background:var(--u-teal-50); }
.pal-i i{ width:18px; text-align:center; color:var(--u-500); font-size:13px; }
.pal-i.on i{ color:var(--u-navy); }
.pal-l{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-weight:600; }
.pal-s{ margin-left:auto; flex:0 0 auto; font-size:11.5px; color:var(--u-400);
  padding-left:14px; }
.pal-none{ padding:22px 16px; color:var(--u-500); font-size:13.5px; }

/* ---- the floating action bar, portal-wide ------------------------------ */
.shell-fab-wrap{ position:fixed; left:0; right:0; bottom:16px; display:flex;
  justify-content:center; pointer-events:none; padding:0 16px; z-index:35; }
.shell-fab{ display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  justify-content:center; pointer-events:auto; background:var(--u-0);
  border:1px solid var(--u-200); border-radius:999px; padding:8px 10px;
  max-width:100%;
  box-shadow:0 12px 34px -10px rgba(60,64,67,.28), 0 3px 10px -4px rgba(60,64,67,.14); }
.sf-btn{ display:inline-flex; align-items:center; gap:7px; min-height:36px;
  padding:0 16px; border-radius:999px; border:1px solid var(--u-300);
  background:var(--u-0); color:var(--u-600); font-family:var(--u-font);
  font-size:13px; font-weight:600; cursor:pointer;
  transition:background 120ms var(--u-ease), color 120ms var(--u-ease); }
.sf-btn:hover{ background:var(--u-100); color:var(--u-900); }
.sf-btn.primary{ background:var(--u-navy); border-color:var(--u-navy); color:#fff; }
.sf-btn.primary:hover{ background:var(--u-navy-700); }
.sf-btn i{ font-size:12px; opacity:.9; }
/* pages scroll clear of the bar; full-bleed frames keep their own geometry */
#appContent > .landing-page:not(:has(iframe[data-erp])){ padding-bottom:84px; }

/* the topbar's handle on the palette — the Google pill search */
.pal-btn{ display:inline-flex; align-items:center; gap:11px; min-height:40px;
  padding:0 16px; border-radius:9999px; border:none;
  background:var(--u-200); color:var(--u-500); font-family:var(--u-font);
  font-size:13.5px; font-weight:500; cursor:pointer;
  transition:background 150ms var(--u-ease), box-shadow 150ms var(--u-ease); }
.pal-btn:hover{ background:var(--u-0); color:var(--u-900);
  box-shadow:0 1px 1px rgba(0,0,0,.1), 0 1px 6px rgba(0,0,0,.15); }
/* in the top bar it reads as the search field it opens */
.pal-btn-main{ min-width:320px; justify-content:flex-start; }
.pal-btn-main kbd{ margin-left:auto; }
@media(max-width:1100px){ .pal-btn-main{ min-width:0; } }
.pal-btn kbd{ font-family:var(--u-font); font-size:10px; font-weight:700;
  background:var(--u-0); border:1px solid var(--u-200); border-radius:4px;
  padding:1px 5px; color:var(--u-500); }
@media(max-width:900px){ .pal-btn span{ display:none; } }


        /* the nav's own colour: a tonal pill for where you are — no accent
           stripes, no filled navy block (Workspace-style) */
        #sidebar .sidebar-item.active,
        #sidebar .sidebar-item.active:hover{ background:var(--u-navy-100) !important;
            color:var(--u-navy) !important; }
        #sidebar .sidebar-item.active i{ color:var(--u-navy) !important; }
        #sidebar .sidebar-sub-item.active{ background:var(--u-teal-50) !important;
            color:var(--u-navy) !important; }
        #sidebar .sidebar-item:hover, #sidebar .sidebar-group-header:hover,
        #sidebar .sidebar-sub-item:hover{ background:var(--u-200) !important;
            color:var(--u-900) !important; }
        .sidebar-brand-sub{ background:transparent !important; border:none !important;
            padding:0 !important; color:var(--u-500) !important; font-weight:600; }


        /* ---- the palettes the portal inherited -------------------------
           Indigo, purple and Tailwind blue belong to the product this was
           duplicated from. They are mapped onto PM Box's own ramp so a badge
           on a legacy page does not read as a different application. Green,
           amber and red survive, because those carry meaning. */
        .bg-blue-50,.bg-indigo-50,.bg-purple-50,.bg-sky-50,.bg-cyan-50{
            background-color:var(--u-100) !important; }
        .bg-blue-100,.bg-indigo-100,.bg-purple-100,.bg-sky-100,.bg-cyan-100,
        .bg-violet-100,.bg-teal-100{ background-color:var(--u-100) !important; }
        .text-blue-800,.text-indigo-800,.text-purple-800,.text-blue-700,
        .text-indigo-700,.text-purple-700,.text-blue-600,.text-indigo-600{
            color:var(--u-navy) !important; }
        .bg-blue-500,.bg-blue-600,.bg-indigo-600,.bg-purple-600,.bg-violet-600{
            background-color:var(--u-navy) !important; }
        .border-blue-200,.border-indigo-200,.border-purple-200,.border-blue-300{
            border-color:var(--u-200) !important; }
        .text-blue-500,.text-blue-400,.text-indigo-400{ color:var(--u-500) !important; }
        .hover\:bg-blue-50:hover,.hover\:bg-blue-100:hover,
        .hover\:bg-indigo-50:hover{ background-color:var(--u-100) !important; }
        .code-tag,.resp-av-i{ background:var(--u-100) !important; color:var(--u-navy) !important;
            border-color:var(--u-200) !important; }


        /* ---- the planning year calendar ------------------------------- */
        .plan-cal{ background:var(--u-0); border:1px solid var(--u-200);
            border-radius:var(--u-r); padding:18px 20px 20px; margin-bottom:16px; }
        .pc-head{ display:flex; align-items:flex-start; justify-content:space-between;
            gap:20px; flex-wrap:wrap; margin-bottom:16px; }
        .pc-title{ font-size:15px; font-weight:700; color:var(--u-900);
            letter-spacing:-.015em; }
        .pc-sub{ font-size:12px; color:var(--u-500); margin-top:3px; }
        .pc-tot{ display:flex; gap:22px; flex-wrap:wrap; }
        .pc-tot span{ display:flex; flex-direction:column; gap:2px; }
        .pc-tot em{ font-style:normal; font-size:11px; font-weight:600; color:var(--u-500); }
        .pc-tot b{ font-size:15px; font-weight:700; color:var(--u-900);
            font-variant-numeric:tabular-nums; }
        .pc-tot .pc-year b{ color:var(--u-navy); }

        .pc-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; }
        .pc-m{ position:relative; display:flex; flex-direction:column; align-items:center;
            gap:7px; padding:10px 4px 9px; min-height:96px; border-radius:8px;
            border:1px solid var(--u-200); background:var(--u-0); cursor:pointer;
            font-family:var(--u-font);
            transition:border-color 120ms var(--u-ease), background 120ms var(--u-ease),
                transform 120ms var(--u-ease), box-shadow 120ms var(--u-ease); }
        .pc-m:hover{ border-color:var(--u-400); transform:translateY(-1px);
            box-shadow:var(--u-e1); }
        .pc-name{ font-size:11.5px; font-weight:700; color:var(--u-500);
            text-transform:uppercase; letter-spacing:.05em; }
        .pc-bar{ display:flex; align-items:flex-end; height:36px; }
        .pc-bar i{ display:block; width:22px; border-radius:3px; background:var(--u-300); }
        .pc-v{ font-size:11.5px; font-weight:600; color:var(--u-600);
            font-variant-numeric:tabular-nums; }

        /* a closed month is settled, the current one is live, the rest are a guess */
        .pc-closed .pc-bar i{ background:var(--u-navy); }
        .pc-closed .pc-v{ color:var(--u-900); font-weight:700; }
        .pc-now{ border-color:var(--u-teal); background:var(--u-teal-50);
            box-shadow:inset 0 0 0 1px var(--u-teal); }
        .pc-now .pc-bar i{ background:var(--u-teal); }
        .pc-now .pc-name, .pc-now .pc-v{ color:var(--u-navy); }
        .pc-ahead{ border-style:dashed; }
        .pc-ahead .pc-bar i{ background:var(--u-300); }
        .pc-ahead .pc-v{ color:var(--u-500); }
        .pc-tag{ position:absolute; top:-8px; left:50%; transform:translateX(-50%);
            font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
            color:#fff; background:var(--u-teal); padding:2px 7px; border-radius:999px; }
        .pc-m.is-focus{ border-color:var(--u-navy); box-shadow:0 0 0 2px var(--u-navy); }

        .pc-note{ margin-top:14px; padding-top:12px; border-top:1px solid var(--u-200);
            font-size:12.5px; color:var(--u-600); display:flex; align-items:center; gap:10px; }
        .pc-note b{ color:var(--u-900); }
        .pc-note button{ font-size:12px; font-weight:600; color:var(--u-navy);
            background:none; border:none; cursor:pointer; text-decoration:underline;
            padding:4px 2px; }

        /* the table follows the month you picked */
        #planningTable .pc-dim{ opacity:.32; }
        #planningTable .pc-lit{ background:var(--u-teal-50) !important;
            box-shadow:inset 0 0 0 1px var(--u-teal-100); }

        @media(max-width:1100px){ .pc-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
        @media(max-width:640px){ .pc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
            .pc-tot{ gap:16px; } }

        .sidebar-footer {
            padding: 14px 20px 20px; color: #94969E; font-size: 0.75rem;
        }
        /* Hamburger button in header */
        .hamburger-btn {
            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
            border-radius: 8px; cursor: pointer; color: white; transition: all 0.15s;
            background: rgba(255,255,255,0.1); border: none; font-size: 1.1rem;
        }
        .hamburger-btn:hover { background: rgba(255,255,255,0.2); }

        /* Mobile sidebar backdrop */
        #sidebarBackdrop { display: none; position: fixed; inset: 64px 0 0 0; background: rgba(0,0,0,0.4); z-index: 34; }
        #sidebarBackdrop.show { display: block; }

        /* ---- Mobile / phone responsiveness ---- */
        /* Financial overview subtabs: the segmented rail the ERP frame and
           Recruitment use — grey track, faded labels, white active card. */
        #dashTabs{display:inline-flex;gap:3px;background:#F5F5F5;border:1px solid #E4E6E7;
            border-radius:14px;padding:4px;margin-bottom:16px;max-width:100%}
        /* the !importants counter the dpo-redesign .tab-btn.active navy fill */
        #dashTabs .tab-btn,#dashTabs .tab-btn:not(.active){background:transparent!important;
            border:none;border-radius:10px;font-weight:800;font-size:13.5px;
            color:#94969E!important;padding:8px 16px;letter-spacing:-.01em;
            transition:color .15s,background .15s,box-shadow .15s}
        #dashTabs .tab-btn:hover,#dashTabs .tab-btn:not(.active):hover{
            color:#070916!important;background:rgba(255,255,255,.65)!important}
        #dashTabs .tab-btn.active{background:#fff!important;color:#070916!important;
            box-shadow:0 1px 1px rgba(7,9,22,.05),0 3px 10px rgba(7,9,22,.07)}
        #dashTabs .tab-btn i{color:inherit;opacity:.7}
        #dashTabs .tab-btn.active i{color:#EB1414;opacity:1}

        @media (max-width: 768px) {
            /* Sidebar overlays the content instead of pushing it aside */
            #sidebar { width: 82%; max-width: 300px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); }
            #appContent.sidebar-open { margin-left: 0; }
            #appHeader.sidebar-open { padding-left: 0; }

            /* No icon rail on phones — a stray compact state stays hidden */
            #sidebar.compact { transform: translateX(-100%); }
            #appContent.sidebar-compact { margin-left: 0; }
            #appHeader.sidebar-compact { padding-left: 0; }

            /* Tighter page gutters on small screens */
            .landing-page { padding: 1rem; }
            /* ...and the HR column's own gutter folds into that one */
            #view-hr > .max-w-screen-xl,
            #bizdevInnerWrap.hr-column,
            #view-settings > .max-w-screen-xl.hr-column {
                padding-left: 0; padding-right: 0; }

            /* Project detail: stack the info panel above the tab content */
            #view-project-detail .flex.gap-6 { flex-direction: column; gap: 1rem; }
            #view-project-detail .w-72 { width: 100%; }
            #projectDetailCard { position: static; }

            /* Collapsible project-details panel (mobile only) */
            #projectDetailCard.details-collapsed > *:nth-child(n+3) { display: none; }
            #detailPanelToggle { display: flex; }
            #projectDetailCard.details-collapsed #detailPanelToggle i { transform: rotate(-90deg); }

            /* Any tab bar scrolls horizontally instead of overflowing the screen */
            #projectTabBar,
            #dashTabs,
            .flex:has(> .tab-btn) {
                overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
                padding-bottom: 4px; flex-wrap: nowrap;
            }
            #projectTabBar::-webkit-scrollbar,
            #dashTabs::-webkit-scrollbar,
            .flex:has(> .tab-btn)::-webkit-scrollbar { display: none; }
            .tab-btn { white-space: nowrap; flex-shrink: 0; }

            /* Keep wide content (tables, charts) from forcing the whole page sideways */
            #appContent { overflow-x: hidden; }
            .landing-page > .max-w-screen-xl,
            .landing-page > div { max-width: 100%; }

            /* Tables stay readable by scrolling inside their own box, not the page */
            .landing-page table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; white-space: nowrap; }

            /* Full-width search/filter inputs instead of fixed pixel widths */
            .landing-page input.w-64, .landing-page input.w-72,
            .landing-page input.w-80, .landing-page input.w-96 { width: 100%; }

            /* De-clutter the top header on phones */
            #appHeader .font-bold.text-lg { display: none; }
            #roleViewLabel { display: none; }
        }
        @media (min-width: 769px) {
            #detailPanelToggle { display: none; }
        }

        .month-btn { transition: background 0.1s, color 0.1s; }
        .month-btn:hover { background: #f3f4f6; }
        .month-btn.active { background: #111827; color: white; }

        /* Staff Allocation — heat-map (Slice 1) */
        .sa-legend { display:flex; align-items:center; gap:14px; margin-bottom:14px; font-size:11px; color:#6b7280; flex-wrap:wrap; }
        .sa-legend .leg { display:flex; align-items:center; gap:5px; }
        .sa-legend .dot { width:10px; height:10px; border-radius:2px; border:0.5px solid rgba(0,0,0,0.08); }
        .sa-filter-bar { display:flex; gap:10px; margin-bottom:14px; background:#fff; padding:9px 12px; border-radius:8px; border:1px solid #E4E6E7; align-items:center; }
        .sa-filter-bar select { border:1px solid #d1d5db; border-radius:6px; padding:5px 8px; font-size:12px; color:#1f2937; outline:none; cursor:pointer; background:#fff; }
        .sa-filter-bar select:disabled { opacity:0.55; cursor:not-allowed; }
        .sa-filter-bar .lbl { font-size:11px; font-weight:500; color:#6b7280; }
        .sa-section-hd { font-size:11px; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:0.07em; margin: 6px 0 10px; }
        .heat-wrap { overflow-x:auto; background:#fff; border-radius:12px; border:1px solid #E4E6E7; padding:14px 16px; }
        .heat-tbl { width:100%; border-collapse:collapse; font-size:11px; }
        .heat-tbl th { padding:6px 8px; text-align:center; font-size:10px; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid #f3f4f6; white-space:nowrap; }
        .heat-tbl th.mc { text-align:left; min-width:200px; }
        .heat-tbl th.cw { background:#E6F1FB; color:#185FA5; border-radius:4px 4px 0 0; }
        .heat-tbl td { padding:5px 4px; border-bottom:1px solid #f9fafb; }
        .heat-tbl td.mn { padding:6px 8px; }
        /* Pin the leftmost column so member/project labels stay visible during horizontal scroll on ≤1280px screens. */
        .heat-tbl th:first-child,
        .heat-tbl td:first-child { position:sticky; left:0; background:#fff; z-index:2; }
        .heat-tbl td.cw-cell { background:#F4F9FE; }
        .heat-tbl td.past-cell { background:#fafafa; }
        .heat-tbl tr.member-row td { padding-top:10px; padding-bottom:10px; }
        .mname { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:#1f2937; }
        .cap-lbl { font-size:10px; color:#9ca3af; font-weight:400; margin-left:4px; }
        .hcell { display:block; border-radius:8px; padding:5px 6px; text-align:center; font-weight:500; font-size:10px; line-height:1.4; min-width:50px; }
        .hcell.green { background:#EAF3DE; color:#3B6D11; }
        .hcell.orange { background:#FAEEDA; color:#854F0B; }
        .hcell.red { background:#FCEBEB; color:#A32D2D; }
        .hcell.empty { background:#f5f4f0; color:#bbb; }
        .cap-edit { width:42px; border:1px solid #E4E6E7; border-radius:4px; padding:3px 5px; font-size:11px; background:#fff; color:#1f2937; text-align:center; font-family:inherit; }
        .cap-edit:focus { outline:none; border-color:#185FA5; }
        .expand-btn { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:4px; background:#f3f4f6; color:#4b5563; cursor:pointer; font-size:12px; font-weight:bold; user-select:none; transition:background 0.1s; }
        .expand-btn:hover { background:#E4E6E7; }
        .av-circle { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; color:white; font-size:9px; flex-shrink:0; }
        .pm-badge { background:#185FA5; color:white; padding:2px 5px; border-radius:4px; font-size:8px; font-weight:600; margin-left:4px; letter-spacing:0.05em; text-transform:uppercase; }
        /* Consultants render with magenta name text — mirrors the xlsx (font color FF00FF). */
        .is-consultant-name { color:#C026D3; }
        .sa-subrow td { padding-top:3px !important; padding-bottom:3px !important; border-bottom:none; }
        .sa-subrow .sub-label { padding-left:46px; font-size:11px; font-weight:500; color:#6b7280; display:flex; align-items:center; gap:6px; }
        .sa-subrow .sub-cell { text-align:center; font-size:11px; color:#6b7280; }
        .alloc-cell-input { width:48px; border:1px solid transparent; border-radius:4px; padding:2px 4px; font-size:11px; background:transparent; color:#1f2937; text-align:center; font-family:inherit; -moz-appearance:textfield; appearance:textfield; }
        .alloc-cell-input::-webkit-inner-spin-button,
        .alloc-cell-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
        .inv-num-input { -moz-appearance:textfield; appearance:textfield; }
        .inv-num-input::-webkit-inner-spin-button,
        .inv-num-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
        #globalInvoicesContainer table th,
        #globalInvoicesContainer table td,
        #globalInvoicesContainer table input,
        #globalInvoicesContainer table select { font-size:0.75rem; }
        .inv-type-select { -webkit-appearance:none; appearance:none; padding:2px 8px; border-radius:9999px;
            font-weight:500; cursor:pointer; outline:none; border:1px solid transparent; max-width:130px; }
        .inv-type-select:hover { border-color:#d1d5db; }
        .inv-type-select:focus { border-color:#4F5158; }
        #globalInvoicesContainer thead th { position:sticky; top:0; z-index:2; background:#f9fafb; }
        .alloc-cell-input:hover { border-color:#9CC0E5; background:#E6F0FA; }
        .alloc-cell-input:focus { outline:none; border-color:#185FA5; background:#fff; }
        .alloc-cell-input.saving, input.saving, select.saving { border-color:#FAC775 !important; background:#FFFBE6 !important; }
        .alloc-cell-input.saved, input.saved, select.saved { border-color:#3B6D11 !important; background:#EAF3DE !important; }
        /* Soft-flagged historical allocations in Staff View sub-rows (spec §9). */
        .alloc-cell-flagged { display:inline-block; min-width:48px; padding:2px 4px; font-size:11px; color:#9ca3af; font-style:italic; }
        .alloc-cell-readonly { display:inline-block; min-width:48px; padding:2px 4px; font-size:11px; color:#1f2937; text-align:center; }
        .alloc-cell-readonly.empty { color:#d1d5db; }
        /* Multi-phase aggregate cell — clickable, navigates to the project's tab. */
        .alloc-cell-multiphase { cursor:pointer; border:1px dashed #d1d5db; border-radius:4px; transition:background 0.15s, border-color 0.15s; }
        .alloc-cell-multiphase:hover { background:#F4F9FE; border-color:#185FA5; color:#185FA5; }
        .sa-proj-link { cursor:pointer; transition: color 0.15s ease; }
        .sa-proj-link:hover { color:#185FA5; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
        .sa-subrow-flagged .sub-label { color:#9ca3af; font-style:italic; }
        .sa-flag-badge { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:8px; font-size:9px; font-weight:600; background:#f3f4f6; color:#6b7280; letter-spacing:0.04em; text-transform:uppercase; }
        .sa-project-hdr td { padding-top:14px !important; padding-bottom:6px !important; font-size:12px; font-weight:600; color:#1f2937; border-bottom:1px solid #E4E6E7; }
        /* Phase row in the panorama Project View — sits between project header and members. */
        .sa-phase-row td { padding-top:4px !important; padding-bottom:4px !important; background:#fafbfc; font-size:11px; }
        .sa-phase-row .phase-label { padding-left:24px; display:flex; align-items:center; gap:6px; color:#4b5563; font-weight:500; }
        .sa-phase-row .phase-name { color:#1f2937; font-weight:600; }
        .sa-phase-row .phase-meta { color:#9ca3af; font-size:10px; }
        .sa-phase-row .sub-cell { text-align:center; font-size:11px; color:#185FA5; font-weight:600; }
        .sa-toggle { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; cursor:pointer; user-select:none; color:#9ca3af; font-size:9px; }
        .sa-toggle:hover { color:#185FA5; }
        /* Project-header budget vs planned: progress bar replaces the old pills.
           Sized to keep the SA project-header row under 1280px viewport width. */
        .sa-project-hdr .sa-budget-progress { position:relative; display:inline-block; margin-left:8px; vertical-align:middle; width:120px; height:14px; border-radius:7px; background:#f3f4f6; overflow:hidden; font-size:9px; font-weight:600; color:#1f2937; letter-spacing:0.02em; }
        .sa-project-hdr .sa-budget-progress-fill { position:absolute; left:0; top:0; bottom:0; background:#C7DFF6; transition:width 0.25s ease; }
        .sa-project-hdr .sa-budget-progress.over .sa-budget-progress-fill { background:#FCEBEB; }
        .sa-project-hdr .sa-budget-progress-label { position:relative; display:block; padding:0 6px; line-height:14px; white-space:nowrap; text-align:center; }
        .sa-project-hdr .sa-budget-progress.over .sa-budget-progress-label { color:#A32D2D; }
        .sa-project-hdr .sa-budget-over-flag { margin-left:3px; padding:0 3px; border-radius:6px; background:#A32D2D; color:#fff; font-size:8px; }
        .sa-project-hdr .sa-budget-empty { display:inline-block; margin-left:8px; padding:1px 6px; border-radius:8px; font-size:9px; font-weight:600; background:#f3f4f6; color:#9ca3af; letter-spacing:0.04em; text-transform:uppercase; }
        /* Budget-code member management — admin/HR-only buttons on the panorama. */
        .sa-bc-add-btn { display:inline-flex; align-items:center; gap:4px; margin-left:10px; padding:2px 8px; border:1px solid #d1d5db; border-radius:9999px; background:#fff; font-size:10px; font-weight:600; color:#374151; cursor:pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
        .sa-bc-add-btn:hover { background:#F0F5FD; border-color:#94969E; color:#EB1414; }
        .sa-bc-add-btn i { font-size:9px; }
        .sa-bc-remove-btn { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:6px; padding:0; border:none; border-radius:9999px; background:transparent; color:#9ca3af; cursor:pointer; transition: background-color .15s ease, color .15s ease; }
        .sa-bc-remove-btn:hover { background:#fee2e2; color:#b91c1c; }
        .sa-bc-remove-btn i { font-size:9px; }
        .sa-project-hdr.sa-bc-inactive td { background:#fafafa; opacity:0.7; }
        .sa-project-hdr.sa-bc-inactive .sa-proj-link { color:#9ca3af; }
        /* Resource Allocation: 3-segment budget bar (Invoiced / Assigned / Left). */
        .tb-budget-bar { position:relative; height:14px; border-radius:7px; background:#f3f4f6; overflow:hidden; display:flex; }
        .tb-budget-bar-seg { height:100%; transition:width 0.25s ease; }
        .tb-budget-bar-invoiced { background:#15944A; }   /* green — done & billed */
        .tb-budget-bar-assigned { background:#0E7490; }   /* blue — committed/planned */
        .tb-budget-bar-overflow { background:#EB1414; }   /* red — over budget */
        .tb-budget-stats { display:flex; flex-wrap:wrap; gap:14px 18px; font-size:11px; color:#4b5563; margin-top:8px; }
        .tb-budget-stats .tb-stat { display:inline-flex; align-items:center; gap:6px; }
        .tb-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; vertical-align:middle; }
        .tb-dot.invoiced { background:#15944A; }
        .tb-dot.assigned { background:#0E7490; }
        .tb-dot.left     { background:#d1d5db; }
        .tb-dot.overflow { background:#DC2626; }
        .tb-budget-stats .tb-stat-label { color:#6b7280; }
        .tb-budget-stats .tb-stat-num   { font-weight:600; color:#1f2937; }
        .tb-budget-stats .tb-stat-pct   { color:#9ca3af; font-size:10px; margin-left:1px; }
        .tb-budget-empty { font-size:11px; color:#9ca3af; padding:6px 0; font-style:italic; }
        .tb-budget-explain { cursor:pointer; padding:4px 8px; margin:-4px -8px; border-radius:8px; transition:background 0.15s; }
        .tb-budget-explain:hover { background:#f9fafb; }
        .tb-budget-explain:hover .tb-budget-bar { box-shadow:0 0 0 2px #E4E6E7; }
        /* Projects Overview (Gantt-style) */
        .overview-grid { --label-w: 220px; padding: 8px 0; }
        .overview-axis,
        .overview-row { display: grid; grid-template-columns: var(--label-w) 1fr; align-items: center; gap: 12px; }
        .overview-axis { border-bottom: 1px solid #E4E6E7; padding: 4px 12px 24px; background: #fff; }
        .overview-axis-label { font-size: 11px; color: #9ca3af; }
        .overview-axis-track { position: relative; height: 20px; }
        .overview-axis-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; color: #6b7280; white-space: nowrap; padding-top: 4px; font-weight: 500; }
        .overview-axis-tick::before { content: ''; position: absolute; top: -6px; left: 50%; width: 1px; height: 6px; background: #d1d5db; }
        .overview-axis-tick span { display: block; }
        .overview-axis-week { position: absolute; top: -3px; width: 1px; height: 3px; background: #E4E6E7; pointer-events: none; }
        .overview-today-label { position: absolute; top: -16px; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: #dc2626; white-space: nowrap; }
        .overview-row { padding: 4px 12px; transition: background 0.15s; position: relative; }
        .overview-row:hover { background: #f9fafb; }
        .overview-row-project { padding-top: 10px; padding-bottom: 2px; }
        .overview-row-phase { padding-top: 1px; padding-bottom: 1px; }
        .overview-row-phase + .overview-row-project { border-top: 1px solid #f3f4f6; margin-top: 4px; }
        .overview-row-label { font-size: 13px; color: #1f2937; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 6px; }
        .overview-row-label-text { min-width: 0; overflow: hidden; flex: 1; }
        .overview-row-label a { display: inline; }
        .overview-row-sub { font-size: 10px; color: #9ca3af; font-weight: 400; }
        .overview-row-phase .overview-row-label { padding-left: 24px; }
        .overview-phase-name { font-size: 11px; color: #6b7280; }
        .overview-row-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
        .overview-code-badge { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 600; color: #EB1414; background: #F0F5FD; padding: 1px 6px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
        .overview-chevron { width: 12px; font-size: 10px; color: #9ca3af; transition: transform 0.15s; flex-shrink: 0; }
        .overview-chevron-open { transform: rotate(90deg); }
        .overview-chevron-empty { display: inline-block; width: 12px; flex-shrink: 0; }
        .overview-row-clickable { cursor: pointer; }
        .overview-row-clickable:hover .overview-chevron { color: #EB1414; }
        .overview-row-track { position: relative; height: 18px; }
        .overview-row-project .overview-row-track { height: 14px; }
        .overview-row-phase .overview-row-track { height: 10px; }
        .overview-bar { position: absolute; top: 0; bottom: 0; border-radius: 3px; transition: filter 0.15s; }
        .overview-bar:hover { filter: brightness(1.1); cursor: help; }
        .overview-bar-project { opacity: 0.85; }
        .overview-bar-phase { top: 1px; bottom: 1px; }
        .overview-bar-overflow { background: #dc2626; opacity: 0.55; border-radius: 3px; top: 1px; bottom: 1px; }
        .overview-bar-clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; mask-image: linear-gradient(to right, transparent 0, transparent 4px, #000 12px); -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 4px, #000 12px); }
        .overview-bar-clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; mask-image: linear-gradient(to left, transparent 0, transparent 4px, #000 12px); -webkit-mask-image: linear-gradient(to left, transparent 0, transparent 4px, #000 12px); }
        .overview-bar-clip-l.overview-bar-clip-r { mask-image: linear-gradient(to right, transparent 0, transparent 4px, #000 12px, #000 calc(100% - 12px), transparent calc(100% - 4px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 4px, #000 12px, #000 calc(100% - 12px), transparent calc(100% - 4px), transparent 100%); }
        .overview-today-line-cell { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 1.5px dashed #dc2626; pointer-events: none; z-index: 0; }
        .overview-axis-track .overview-today-line-cell { top: 0; bottom: -24px; }
        .overview-grid { position: relative; }

        /* HR per-person Time Tracking calendar (FullCalendar). Mirrors the
           consultant-portal styling with the admin SPA's blue brand. */
        #httCalendar { --htt-brand: #EB1414; --htt-budget: #D97706; font-size: 13px; }
        #httCalendar .fc-toolbar-title { font-size: 1.05rem; font-weight: 600; color: #1f2937; letter-spacing: -0.01em; }
        #httCalendar .fc .fc-button { font-weight: 500; border-radius: 8px; padding: 6px 12px; box-shadow: none !important; text-transform: capitalize; background: #EB1414; border-color: #EB1414; }
        #httCalendar .fc .fc-button:hover { background: #CF1212; border-color: #CF1212; }
        #httCalendar .fc .fc-button-primary:disabled { opacity: 0.4; }
        #httCalendar .fc-col-header-cell-cushion { padding: 10px 4px; font-weight: 600; font-size: 12px; color: #6b7280; text-decoration: none; text-transform: uppercase; letter-spacing: 0.03em; }
        #httCalendar .fc .fc-day-today .fc-col-header-cell-cushion { color: #EB1414; }
        #httCalendar .fc-timegrid-slot-label-cushion, #httCalendar .fc-timegrid-axis-cushion { color: #6b7280; font-size: 11px; }
        #httCalendar .fc-timegrid-slot { height: 2.4em; }
        #httCalendar .fc-timegrid-event { border: none; border-radius: 7px; box-shadow: 0 1px 3px rgba(0,0,0,0.16); overflow: visible; }
        #httCalendar .fc-timegrid-event .fc-event-main { padding: 3px 7px; overflow: hidden; border-radius: 7px; }
        #httCalendar .fc-timegrid-event .fc-event-main::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgba(255,255,255,0.55); }
        #httCalendar .fc-event-title { font-weight: 500; }
        #httCalendar .htt-ev { line-height: 1.25; overflow: hidden; }
        #httCalendar .htt-ev-code { font-weight: 700; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #httCalendar .htt-ev-time { font-weight: 500; font-size: 10.5px; opacity: 0.9; margin-top: 1px; }
        #httCalendar .htt-ev-desc { font-weight: 400; font-size: 10.5px; opacity: 0.92; margin-top: 1px; }
        #httCalendar .htt-ev-locked { opacity: 0.78; }
        /* Unallocated import (no project/budget code yet): grayed with a hatched
           overlay + inset border so it reads as "needs a code". */
        #httCalendar .fc-event.htt-ev-unallocated .fc-event-main {
            background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.30) 0 6px, transparent 6px 12px);
            box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.22);
        }
        /* ⚠ marker on a day-header that holds an unallocated event. */
        #httCalendar .fc-col-header-cell.htt-col-unalloc .fc-col-header-cell-cushion::after {
            content: "\26A0"; margin-left: 5px; color: #d97706;
        }
        /* Frozen (locked) months: greyed and non-interactive for non-privileged viewers. */
        #httCalendar .htt-day-locked { background: repeating-linear-gradient(45deg, rgba(0,0,0,0.035), rgba(0,0,0,0.035) 7px, transparent 7px, transparent 14px); }
        #httCalendar .fc-timegrid-now-indicator-line { border-width: 0 0 2px 0; }
        #httCalendar .fc-highlight { background: color-mix(in srgb, #EB1414 16%, transparent); }
        #httCalendar .fc-event:hover { filter: brightness(1.04); cursor: pointer; }
        /* Leave shown as all-day banners (Google-style "day off" rows). */
        #httCalendar .htt-leave { background: #9ca3af !important; border-color: #9ca3af !important; color: #fff; font-weight: 500; }
        #httCalendar .htt-leave .htt-leave-label { padding: 1px 6px; font-size: 11px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        #httCalendar .htt-leave-pending { background: repeating-linear-gradient(45deg, #9ca3af, #9ca3af 6px, #b6bcc4 6px, #b6bcc4 12px) !important; }
        /* Spanish registro de jornada: read-only work-day span behind the chips. */
        #httCalendar .fc-bg-event.wh-band { background: rgba(71,85,105,0.14); opacity: 1; }
        #httCalendar .fc-bg-event.wh-band .wh-band-label { font-size: 10px; font-weight: 700; color: #475569; padding: 3px 5px; white-space: nowrap; }
        /* ===== Birthday bash overlay (shown on login on the person's birthday
           and the first business day after it) ===== */
        #bdayOverlay { position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.85);
            display: flex; align-items: center; justify-content: center; overflow: hidden;
            cursor: pointer; opacity: 0; transition: opacity .4s; }
        #bdayOverlay.bday-in { opacity: 1; }
        .bday-card { text-align: center; z-index: 2; padding: 0 20px;
            animation: bdayPop .6s cubic-bezier(.18,1.6,.4,1) both; }
        .bday-cake { font-size: 110px; line-height: 1; display: inline-block;
            animation: bdayBounce 1.1s ease-in-out infinite;
            filter: drop-shadow(0 12px 24px rgba(0,0,0,.45)); }
        .bday-title { font-size: clamp(34px, 7vw, 64px); font-weight: 800; margin-top: 8px;
            background: linear-gradient(90deg,#f472b6,#fbbf24,#4ade80,#38bdf8,#a78bfa,#f472b6);
            background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
            color: transparent; animation: bdayRainbow 3s linear infinite; }
        .bday-sub { color: #f1f5f9; font-size: clamp(16px,3vw,22px); margin-top: 10px; font-weight: 600; }
        .bday-dancers { font-size: 40px; margin-top: 18px; }
        .bday-dancers span { display: inline-block; animation: bdayDance .7s ease-in-out infinite alternate; }
        .bday-dancers span:nth-child(2n) { animation-delay: .15s; }
        .bday-dancers span:nth-child(3n) { animation-delay: .3s; }
        .bday-hint { color: rgba(241,245,249,.6); font-size: 13px; margin-top: 26px; }
        .bday-confetti { position: absolute; top: -8vh; animation: bdayFall linear infinite; z-index: 1; }
        .bday-balloon { position: absolute; bottom: -14vh; font-size: 42px; animation: bdayRise linear infinite; z-index: 1; }
        @keyframes bdayPop { from { transform: scale(.3) rotate(-8deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
        @keyframes bdayBounce { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-22px) rotate(4deg); } }
        @keyframes bdayRainbow { to { background-position: 300% 0; } }
        @keyframes bdayDance { from { transform: rotate(-14deg) translateY(0); } to { transform: rotate(14deg) translateY(-10px); } }
        @keyframes bdayFall { to { transform: translateY(115vh) rotate(720deg); } }
        @keyframes bdayRise { to { transform: translateY(-125vh) rotate(20deg); } }
        /* ============================================================
           PM Box — design system (foundation + shell)
           Scope: admin dashboard SPA shell only (tokens, base, sidebar,
           topbar). No backend/route/data changes. Component classes
           (buttons, cards, KPI, tables) land per-screen in follow-ups.
           ============================================================ */
        :root{
            /* base neutrals */
            --black:#070916; --bg:#F5F5F5; --white:#FFFFFF; /* --bg matches erp_module.html so shell and iframe are seamless */
            --light-purple:#F0F5FD; --light-red:#F0F5FD; --stroke:#E4E6E7;
            --ink:#070916; --grey:#4F5158; --grey-2:#94969E;

            /* Google Workspace / Material 3 — blue carries interaction,
               near-black carries text. --navy is used as TEXT color in many
               call sites, so it maps to the dark on-tonal ink; --teal (the
               old interactive accent) maps to Google blue. */
            --navy:#161718; --navy-deep:#CF1212; --navy-soft:#F0F5FD;
            --teal:#EB1414; --teal-deep:#EB1414; --teal-soft:#F0F5FD;
            --pink:#7C3AED; --brand-bd:#F0F5FD;

            /* legacy accent aliases, remapped onto the Google family so the
               existing --red-* call sites keep working */
            --red:#EB1414; --red-pure:#EB1414; --red-acc:#EB1414;
            --red-grad:#EB1414;
            --red-soft-grad:linear-gradient(180deg,#F0F5FD 0%,#FFFFFF 70%);

            /* status families — real semantics */
            --green:#15944A;   --green-bg:#E8F6ED; --green-bd:#CDEBD8;
            --amber:#D97706;   --amber-bg:#FFF3E2; --amber-bd:#FADFB8;
            --blue:#EB1414;    --blue-bg:#F0F5FD;  --blue-bd:#F0F5FD;
            --slate:#94969E;   --slate-bg:#F1F1F2; --slate-bd:#E4E6E7;
            --danger:#EB1414;  --danger-bg:#FFF0F0; --danger-bd:#F6D6D6;

            /* elevation — Google levels */
            --shadow-sm:0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
            --shadow-md:0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
            --shadow-lg:0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px 0 rgba(60,64,67,.3);

            /* shape */
            --radius:16px; --radius-sm:11px;

            /* type — Roboto body and display (500-weight headings) */
            --sans:'Roboto',ui-sans-serif,system-ui,-apple-system,sans-serif;
            --display:'Roboto',system-ui,sans-serif;
        }

        /* ---------- page header: eyebrow / title, matching the modules ---------- */
        .page-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.15em;
            text-transform:uppercase;color:var(--teal-deep);margin-bottom:4px}
        .page-title{margin:0;font-size:22px;font-weight:500;letter-spacing:0;
            line-height:1.15;color:var(--navy)}
        /* ---------- expenditure chart ---------- */
        .exp-h{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:2px}
        .exp-cap{font-size:11.5px;color:var(--grey-2);margin-bottom:14px}
        .exp-legend{display:flex;flex-wrap:wrap;gap:7px 15px;margin-top:12px;
            font-size:11.5px;color:var(--grey)}
        .exp-legend i{width:9px;height:9px;border-radius:2.5px;display:inline-block;margin-right:6px}
        .exp-row{display:flex;align-items:center;gap:10px;padding:8px 0;
            border-bottom:1px solid #F2F3F4}
        .exp-row:last-child{border-bottom:none}
        .exp-row .k{flex:1;min-width:0;font-size:12.5px;font-weight:500;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .exp-row .t{width:92px;height:6px;border-radius:3px;background:#EEF0F1;
            overflow:hidden;flex:0 0 auto}
        .exp-row .t i{display:block;height:100%;border-radius:3px}
        .exp-row .v{width:74px;text-align:right;font-size:12.5px;font-weight:700;
            font-variant-numeric:tabular-nums}
        .exp-row .p{width:34px;text-align:right;font-size:11px;color:var(--grey-2);
            font-variant-numeric:tabular-nums}
        @media(max-width:1100px){ #expenseChartWrap{grid-template-columns:1fr!important}
            #incomeChartWrap{grid-template-columns:1fr!important}
            #planChartWrap{grid-template-columns:1fr!important} }
        /* ---------- budget / GL code tag ---------- */
        .code-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;
            border-radius:7px;background:var(--teal-soft);border:1px solid var(--brand-bd);
            color:var(--navy);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
            font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
            line-height:1.5}
        .code-tag::before{content:"";width:5px;height:5px;border-radius:50%;
            background:var(--teal-deep);flex:0 0 auto}
        .code-tag.muted{background:#F4F5F6;border-color:#E4E6E7;color:var(--grey)}
        .code-tag.muted::before{background:#94969E}
        /* ---------- leave calendar ---------- */
        .lc-card{background:#fff;border:1px solid var(--stroke);border-radius:14px;
            padding:16px 18px;margin-bottom:16px}
        .lc-h{display:flex;justify-content:space-between;align-items:flex-start;
            gap:16px;flex-wrap:wrap;margin-bottom:12px}
        .lc-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--grey)}
        .lc-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px}
        .lc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
        .lc-dow{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
            color:var(--grey-2);text-align:center;padding-bottom:2px}
        .lc-cell{min-height:74px;border:1px solid var(--stroke);border-radius:9px;
            padding:5px 6px;background:#fff;display:flex;flex-direction:column;gap:3px}
        .lc-cell.lc-we{background:#FAFBFB}
        .lc-cell.lc-out{background:transparent;border-color:transparent}
        .lc-cell.lc-today{border-color:var(--teal);box-shadow:0 0 0 2px rgba(0,204,209,.18)}
        .lc-n{font-size:11px;font-weight:700;color:var(--grey-2);line-height:1.2}
        .lc-cell.lc-today .lc-n{color:var(--teal-deep)}
        .lc-chip{display:block;cursor:pointer;font-size:10px;font-weight:600;padding:1.5px 5px;transition:filter .12s;
            border-radius:5px;border:1px solid transparent;white-space:nowrap;
            overflow:hidden;text-overflow:ellipsis}
        .lc-more{font-size:10px;cursor:pointer;color:var(--grey-2);font-weight:600;padding-left:3px}
        .lc-chip:hover{filter:brightness(.95)}
        .lc-more:hover{color:var(--navy)}
        @media(max-width:820px){.lc-cell{min-height:58px}.lc-chip{font-size:9px}}
        .resp-q{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;
            border-radius:999px;font-size:10.5px;font-weight:700;white-space:nowrap;
            border:1px solid transparent;font-variant-numeric:tabular-nums}
        .resp-q i{font-size:9px}
        .resp-q-ok{background:#E8F6ED;color:#15944A;border-color:#CDEBD8}
        .resp-q-warn{background:#FFF3E2;color:#B45309;border-color:#FADFB8}
        .resp-q-bad{background:#FFF0F0;color:#CF1212;border-color:#F6D6D6}
        /* ---------- response cards ---------- */
        .resp-card{position:relative;background:#fff;border:1px solid var(--stroke);
            border-radius:16px;padding:16px 17px 14px;cursor:pointer;display:flex;
            flex-direction:column;gap:11px;transition:box-shadow .16s,border-color .16s,transform .16s;
            box-shadow:0 1px 2px rgba(60,64,67,.05)}
        .resp-card:hover{box-shadow:0 10px 30px -12px rgba(60,64,67,.22);
            border-color:#F0F5FD;transform:translateY(-2px)}
        .resp-card.resp-locked{opacity:.62;cursor:default}
        .resp-card.resp-locked:hover{transform:none;box-shadow:0 1px 2px rgba(60,64,67,.05)}
        .resp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
        .resp-codes{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
        .resp-geo{display:inline-flex;align-items:center;gap:4px;font-size:11px;
            font-weight:600;color:var(--grey-2)}
        .resp-name{margin:0;font-size:15px;font-weight:700;line-height:1.3;color:var(--navy);
            display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
        .resp-donor{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--grey);
            margin-top:-4px}
        .resp-donor i{color:var(--teal-deep);font-size:11px}
        .resp-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
            padding:11px 0;border-top:1px solid #F2F3F4;border-bottom:1px solid #F2F3F4}
        .resp-fl{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
            color:var(--grey-2);margin-bottom:3px}
        .resp-fv{font-size:16px;font-weight:700;color:var(--navy);
            font-variant-numeric:tabular-nums;line-height:1.1}
        .resp-of{font-size:11.5px;font-weight:600;color:var(--grey-2)}
        .resp-burn{display:flex;flex-direction:column;gap:5px}
        .resp-bl{display:flex;justify-content:space-between;font-size:11px;color:var(--grey-2)}
        .resp-bl b{font-weight:600;color:var(--grey);font-variant-numeric:tabular-nums}
        .resp-track{height:6px;border-radius:3px;background:#EEF0F1;overflow:hidden}
        .resp-track i{display:block;height:100%;border-radius:3px;background:var(--teal-deep)}
        .resp-track i.warn{background:var(--amber)} .resp-track i.bad{background:var(--danger)}
        .resp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
        .resp-team{display:flex;align-items:center}
        .resp-av{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:0 0 auto;
            border:2px solid #fff;margin-left:-7px;box-shadow:0 1px 3px rgba(60,64,67,.16)}
        .resp-av:first-child{margin-left:0}
        .resp-av-i{display:inline-flex;align-items:center;justify-content:center;
            background:var(--navy-soft);color:var(--navy);font-size:9.5px;font-weight:700}
        .resp-av-more{background:var(--u-100);color:var(--u-navy)}
        .resp-dates{font-size:11.5px;color:var(--grey-2);white-space:nowrap;
            font-variant-numeric:tabular-nums}
        .resp-lock{position:absolute;top:14px;right:14px;color:var(--grey-2);font-size:11px}
        /* ---------- Base ---------- */
        body{font-family:var(--sans);background:var(--bg);color:var(--ink);
            -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
            font-feature-settings:"ss01","tnum" 0}
        /* the signature 4px red bar pinned to the very top of the viewport */
        /* (the fixed gradient stripe is gone: the header's own hairline
           separates the chrome from the page) */

        /* ---------- Sidebar (on the ground, tonal navy pills) ---------- */
        #sidebar{background:var(--bg);border-right:none;color:var(--grey)}
        .sidebar-brand{display:flex;align-items:center;gap:10px;padding:20px 16px 15px;
            border-bottom:none}
        .sidebar-brand-wordmark{height:21px;width:auto;flex:0 0 auto;object-fit:contain}
        .sidebar-brand-name{font-family:var(--display);font-weight:700;font-size:16px;
            color:var(--navy);letter-spacing:-.01em}
        .sidebar-brand-sub{font-size:9px;font-weight:700;letter-spacing:.13em;
            text-transform:uppercase;color:var(--navy);padding:2px 7px;
            border-radius:999px;background:var(--teal-soft);border:1px solid var(--brand-bd)}

        #sidebar .sidebar-item,
        #sidebar .sidebar-group-header,
        #sidebar .sidebar-sub-item{color:var(--grey);position:relative}
        #sidebar .sidebar-item:hover,
        #sidebar .sidebar-group-header:hover,
        #sidebar .sidebar-sub-item:hover{background:var(--u-200);color:var(--ink)}
        #sidebar .sidebar-item.active,
        #sidebar .sidebar-sub-item.active{background:var(--navy-soft);color:var(--navy);font-weight:600}
        /* (the old left-edge accent tab is gone: the tonal pill itself
           carries the active state, Workspace-style) */
        /* Section captions inside the long sidebar groups, so Procurement and
           HR & Membership read as a few short lists rather than one long one. */

        /* Demo focus: Finance / Procurement / HR lead the nav; the remaining
           modules are muted but stay fully clickable. */
        #sidebar .nav-dimmed{opacity:.42;filter:grayscale(1);
            transition:opacity .15s ease,filter .15s ease}
        #sidebar .nav-dimmed:hover,
        #sidebar .nav-dimmed:focus-within,
        #sidebar .nav-dimmed:has(.active){opacity:1;filter:none}
        .sidebar-footer{color:var(--grey-2)}

        /* ---------- Topbar (flat on the ground — no border, no shadow) ---------- */
        #appHeader{background:var(--bg);
            color:var(--ink);border-bottom:none}
        #appHeader .font-bold.text-lg{font-family:var(--display);font-weight:700;
            letter-spacing:-.02em;color:var(--ink)}
        /* hamburger -> transparent 40px circle, gray wash on hover */
        #appHeader .hamburger-btn{background:transparent;border:none;color:var(--ink)}
        #appHeader .hamburger-btn:hover{background:var(--u-200);color:var(--navy)}
        /* notification / todo / today icon buttons -> Google-style transparent circles */
        #appHeader #todayQuickWrapper>button,
        #appHeader #todoBellWrapper>button,
        #appHeader #alertsBellWrapper>button{background:transparent;
            border:none;border-radius:50%;width:40px;height:40px}
        #appHeader #todayQuickWrapper>button:hover,
        #appHeader #todoBellWrapper>button:hover,
        #appHeader #alertsBellWrapper>button:hover{background:var(--u-200)!important;
            border:none}
        #appHeader .fa-bell,#appHeader .fa-clipboard-check,
        #appHeader #todayQuickWrapper .fa-list-check{color:var(--grey)!important}
        #appHeader #todayQuickWrapper>button:hover .fa-list-check,
        #appHeader #todoBellWrapper>button:hover .fa-clipboard-check,
        #appHeader #alertsBellWrapper>button:hover .fa-bell{color:var(--red-acc)!important}
        /* role-view pill -> ghost button */
        #appHeader #roleViewBtn{background:var(--white);border-color:var(--stroke)!important;color:var(--ink)!important}
        #appHeader #roleViewBtn:hover{background:#FCFCFC!important;border-color:#D4D6DA!important}
        #appHeader #roleViewBtn .fa-eye,
        #appHeader #roleViewBtn .fa-chevron-down{color:var(--grey-2)!important}
        /* nudge stray blue accents in header chrome toward the single navy accent */
        #appHeader .text-blue-600{color:var(--red-acc)!important}
        /* avatar -> charcoal gradient, soft square */
        #appHeader #userAvatarFallback{background:linear-gradient(135deg,#2A2C31,#070916)!important;
            border:none!important;border-radius:11px!important;font-family:var(--display);color:#fff}
        #appHeader #userAvatar{border-radius:11px!important;border:1px solid var(--stroke)!important}

        /* ---------- App launcher (Google-style 9-dot module grid) ---------- */
        #appHeader #appLauncherBtn{background:transparent;border:none;
            border-radius:50%;width:40px;height:40px;color:var(--grey)}
        #appHeader #appLauncherBtn:hover{background:var(--u-200);
            color:var(--navy)}
        #appLauncherDropdown{background:var(--white);border:none;
            border-radius:28px;box-shadow:0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px 0 rgba(60,64,67,.3);
            padding:16px;width:344px;max-height:min(70vh,500px);overflow-y:auto;
            transform-origin:top right;animation:alPop .16s cubic-bezier(.2,.9,.3,1.2)}
        @keyframes alPop{from{opacity:0;transform:scale(.92) translateY(-6px)}
            to{opacity:1;transform:scale(1) translateY(0)}}
        .app-launcher-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
        .app-launcher-tile{display:flex;flex-direction:column;align-items:center;gap:9px;
            padding:15px 6px 13px;border-radius:18px;cursor:pointer;text-align:center;
            transition:background .12s}
        .app-launcher-tile:hover{background:#F1F1F2}
        .app-launcher-tile:active{background:#F1F1F2}
        /* Module icon: the same app tile the sidebar wears, scaled up —
           .mod-ic--lg, see "Module tiles" at the foot of the stylesheet. */
        .app-launcher-tile span{font-size:.73rem;font-weight:500;color:var(--ink);
            line-height:1.15;max-width:100px;overflow:hidden;display:-webkit-box;
            -webkit-line-clamp:2;-webkit-box-orient:vertical}
        .app-launcher-footer{position:sticky;bottom:-16px;margin:12px -16px -16px;
            padding:10px 16px 14px;background:var(--white);
            border-top:1px solid #F1F1F2}
        .app-launcher-footer button{width:100%;padding:9px 0;border-radius:9999px;
            border:1px solid var(--stroke);background:var(--white);cursor:pointer;
            font-size:.8rem;font-weight:500;color:var(--teal-deep);
            display:flex;align-items:center;justify-content:center;gap:8px}
        .app-launcher-footer button:hover{background:#F0F5FD}

        /* ---------- All modules (Google-style apps screen) ---------- */
        .allmods-wrap{padding:22px 28px 40px;max-width:1180px}
        .allmods-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:18px}
        .allmods-toolbar input{flex:0 1 320px;padding:9px 16px;border-radius:9999px;
            border:none;background:#e9eef6;font-size:.85rem;outline:none;
            transition:background .12s, box-shadow .12s}
        .allmods-toolbar input:focus{background:var(--white);
            box-shadow:0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15)}
        .allmods-count{font-size:.8rem;color:var(--grey)}
        .allmods-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
        .allmods-card{display:flex;gap:14px;align-items:flex-start;background:var(--white);
            border:1px solid var(--stroke);border-radius:16px;padding:16px;
            transition:box-shadow .12s, border-color .12s}
        .allmods-card:hover{box-shadow:0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
            border-color:transparent}
        .allmods-card.is-off .mod-ic{filter:grayscale(1);opacity:.45}
        .allmods-card.is-off .allmods-name{color:var(--grey)}
        .allmods-card .mod-ic{width:56px;height:56px;border-radius:17px}
        .allmods-card .mod-ic i{font-size:1.4rem !important}
        .allmods-body{flex:1;min-width:0}
        .allmods-name{font-family:var(--display);font-weight:500;color:var(--ink);font-size:.95rem;
            display:flex;align-items:center;gap:8px}
        .allmods-badge{font-size:.68rem;font-weight:500;
            color:#15944A;background:#E8F6ED;
            border-radius:9999px;padding:2px 10px}
        .allmods-card.is-off .allmods-badge{color:var(--grey);background:#F1F1F2}
        .allmods-sub{font-size:.78rem;color:var(--grey);line-height:1.4;margin-top:3px;
            overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
        .allmods-actions{margin-top:10px}
        .allmods-btn{padding:7px 18px;border-radius:9999px;font-size:.78rem;font-weight:500;
            font-family:var(--display);cursor:pointer;border:1px solid transparent;
            transition:background .12s, box-shadow .12s}
        .allmods-btn.activate{background:var(--teal-deep);color:#fff}
        .allmods-btn.activate:hover{background:#CF1212;
            box-shadow:0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15)}
        .allmods-btn.deactivate{background:var(--white);color:var(--teal-deep);border-color:#94969E}
        .allmods-btn.deactivate:hover{background:#F0F5FD}
        .allmods-btn[disabled]{opacity:.5;cursor:wait}

        /* ---------- Page head (title row) — Google scale: large, medium weight ---------- */
        .landing-page h2.text-2xl,.landing-page h1.text-2xl{
            font-family:var(--display);font-weight:500;letter-spacing:0;color:var(--ink)}
        /* Google style: big numbers and titles are never heavy-bold */
        .landing-page .text-2xl.font-bold,.landing-page .text-3xl.font-bold,
        .modal-content .text-2xl.font-bold{
            font-family:var(--display);font-weight:500;letter-spacing:0}
        #loginOverlay h1{font-family:var(--display);font-weight:400;letter-spacing:0}

        /* ---------- Tabs / segmented toggles (pill, navy active) ---------- */
        .tab-btn{font-weight:500;border-radius:9999px}
        .tab-btn.active{background:var(--teal)!important;color:#fff!important;box-shadow:var(--shadow-sm)}
        .tab-btn:not(.active){background:var(--white)!important;color:var(--grey)!important;
            border:1px solid var(--stroke)}
        .tab-btn:not(.active):hover{background:var(--bg)!important;color:var(--ink)!important}

        /* ---------- Accent remap: legacy blue -> single PM Box navy accent ----------
           The SPA used Tailwind blue as its primary accent across ~300 sites.
           Remapping the utilities keeps the rebrand DRY (no per-element churn)
           while honouring the "one accent only" principle. Charcoal avatar /
           header overrides above still win via id-specificity. */
        .bg-blue-600,.bg-blue-700{background-color:var(--red-acc)!important}
        .hover\:bg-blue-700:hover,.hover\:bg-blue-600:hover{background-color:#CF1212!important}
        .bg-blue-500{background-color:var(--red)!important}
        .bg-blue-50,.hover\:bg-blue-50:hover{background-color:var(--light-red)!important}
        .hover\:bg-blue-100:hover{background-color:#F0F5FD!important}
        .text-blue-500,.text-blue-600,.text-blue-700,.text-blue-800{color:var(--red-acc)!important}
        .hover\:text-blue-700:hover,.hover\:text-blue-800:hover{color:#CF1212!important}
        .text-blue-200{color:#F0F5FD!important}
        .text-blue-300{color:#C9DCF7!important}
        .border-blue-200,.border-blue-300,.border-blue-400{border-color:var(--blue-bd)!important}
        .hover\:border-blue-300:hover,.hover\:border-blue-400:hover{border-color:#C9DCF7!important}
        .focus\:ring-blue-400:focus,.focus\:ring-blue-500:focus,
        .ring-blue-400,.ring-blue-500{--tw-ring-color:rgba(11,87,208,.3)!important}
        .focus\:border-blue-500:focus{border-color:var(--red)!important}

        /* Outline/secondary buttons -> DPO ghost (were blue-outline).
           Neutral stroke + ink text, flipping to light-red on hover. */
        .border-blue-500,.border-blue-600{border-color:var(--stroke)!important}
        button.border-blue-500,button.border-blue-600,
        a.border-blue-500,a.border-blue-600{color:var(--ink)!important;
            border-radius:9999px!important}
        button.border-blue-500:hover,button.border-blue-600:hover,
        a.border-blue-500:hover,a.border-blue-600:hover{
            background:var(--light-red)!important;border-color:var(--brand-bd)!important;color:var(--red-acc)!important}

        /* Tables: keep links neutral (ink), red only on hover, so dense
           lists don't read as a wall of red. Accent links elsewhere stay red. */
        table .text-blue-600,table .text-blue-700,
        td .text-blue-600,td .text-blue-700,th .text-blue-600{
            color:var(--ink)!important;font-weight:500}
        table .text-blue-600:hover,table .text-blue-700:hover,
        td .text-blue-600:hover,td .text-blue-700:hover{color:var(--red-acc)!important}

        /* ---------- Buttons: one compact size across the platform ----------
           Page-head actions were a mix of px-4 py-2 (16px body font) and the
           tighter px-3 py-1.5 text-sm used on /project/servers. Standardise on
           the smaller servers sizing for every solid accent action button so
           top-of-page buttons don't tower over the dense screens. Same DRY
           remap approach as the accent rules above — no per-button churn.
           Ghost/tab/icon buttons (no solid bg class) keep their own sizing. */
        button.bg-blue-600,button.bg-blue-700,button.bg-blue-500,
        button.bg-green-600,button.bg-green-700,
        button.bg-amber-500,button.bg-orange-600,button.bg-red-600,
        button.bg-gray-900,button.bg-gray-800{
            padding:.375rem .875rem!important;   /* py-1.5 px-3.5 */
            font-size:.875rem!important;          /* text-sm */
            line-height:1.25rem!important;
            border-radius:9999px!important;       /* Google filled-pill buttons */
        }

        /* ============================================================
           Polish pass — sidebar, topbar, login, shell/iframe seams.
           Style only: no ids, handlers or DOM wiring are touched.
           ============================================================ */
        /* Body always sits on the same ground as the module iframes
           (Tailwind's .bg-gray-100 on <body> otherwise wins on specificity). */
        body{ background:var(--bg) !important; }

        /* ---- sidebar: active states, hierarchy, disabled entries ---- */
        /* Sub-page active: soft navy fill + the 2px teal bar from upstream. */
        #sidebar .sidebar-sub-item.active{ background:var(--navy-soft) !important; }
        /* When a sub-item is active, its parent group header lights up too,
           so deep-linked ERP tabs read in both levels of the nav. */
        #sidebar div:has(> .sidebar-sub-items .sidebar-sub-item.active) > .sidebar-group-header{
            color:var(--navy); font-weight:500; }
        #sidebar div:has(> .sidebar-sub-items .sidebar-sub-item.active) > .sidebar-group-header i:first-child{
            opacity:1; }
        /* Roadmap-only entries (Doc) read as parked, not broken. */
        #sidebar .nav-dimmed > .sidebar-group-header{ font-weight:500; }
        /* Section rhythm: a touch of air between top-level groups. */
        .sidebar-nav > div + div{ margin-top:2px; }

        /* ---- topbar: breadcrumb hierarchy, badges, chip, avatar ---- */
        #appHeader{ background:var(--bg); }
        /* Header dropdown menus -> Google popover: 12px radius, floating shadow,
           no visible border. (Launcher dropdown keeps its own 28px chrome.) */
        #roleViewDropdown, #alertsDropdown, #userDropdown{
            border-radius:12px; border-color:transparent;
            box-shadow:0 8px 12px rgba(7,9,22,.15), 0 4px 4px rgba(7,9,22,.1); }
        #appHeader #hdrEyebrow{ font-size:12px; font-weight:600; color:var(--grey-2);
            letter-spacing:.01em; }
        #appHeader #hdrTitle{ font-size:15px !important; font-weight:600 !important;
            color:var(--navy) !important; letter-spacing:-.01em; }
        /* Badge bubbles sit crisply on the corner of their buttons. */
        #appHeader #todoBadge, #appHeader #hrAlertBadge, #appHeader #todayQuickBadge{
            top:-5px; right:-5px; border:2px solid #fff;
            box-shadow:0 1px 2px rgba(60,64,67,.18); }
        /* Role chip: quiet outline, never louder than the page title. */
        #appHeader #roleViewBtn{ background:transparent !important;
            border:1px solid var(--stroke) !important; color:var(--grey) !important;
            font-weight:600; }
        #appHeader #roleViewBtn:hover{ background:var(--white) !important;
            color:var(--ink) !important; border-color:#CBD5DB !important; }
        /* Avatar: circle with a 2px white ring and a soft shadow. */
        #appHeader #userAvatar, #appHeader #userAvatarFallback{
            border:2px solid #fff !important; border-radius:50% !important;
            box-shadow:0 1px 4px rgba(60,64,67,.28) !important; }

        /* ---- landing-page cards: hairline at rest, never a resting shadow ---- */
        .landing-page div.bg-white.shadow-sm,
        .landing-page div.bg-white.shadow,
        .landing-page div.bg-white.shadow-md{
            box-shadow:none; border:1px solid var(--stroke); }
        .landing-page div.bg-white.rounded-lg{ border-radius:12px; }

        /* ---- login overlay ---- */
        #loginOverlay input:focus{ --tw-ring-color:rgba(0,137,141,.6) !important;
            box-shadow:0 0 0 3px rgba(0,137,141,.6) !important; }
        /* Action buttons on the login card read as Google filled pills. */
        #loginOverlay .login-primary, #loginOverlay #googleSignInBtn,
        #loginOverlay #devSignInBtn{ border-radius:9999px !important; }
        #loginOverlay input{ border-radius:8px !important; }
        .login-primary{ background:var(--teal); color:#fff;
            transition:background .15s ease, transform .15s ease, box-shadow .2s ease; }
        .login-primary:hover{ background:var(--teal-deep); transform:translateY(-1px);
            box-shadow:0 12px 26px -10px rgba(0,0,0,.5); }
        .login-primary:active{ transform:translateY(0); }

        /* ---- reduced motion: kill the decorative movement, keep function ---- */
        @media (prefers-reduced-motion: reduce){
            .login-primary, .login-primary:hover{ transform:none; transition:none; }
            #sidebar *, #appHeader *{ transition-duration:.01ms !important; }
        }

        /* ============================================================
           Pennylane pass — the sidebar goes dark like Pennylane's,
           but on the portal's own Google blue (#0E7490, the chart
           primary): a darker head fading to full #0E7490. The topbar
           and content ground stay on the light Workspace palette.
           Last pass in the file: its !importants must beat the
           earlier passes' own !importants.
           ============================================================ */
        #sidebar{ background:linear-gradient(180deg,#12508f 0%,#0E7490 100%) !important;
            color:#e3edfc !important; color-scheme:dark; }
        #sidebar .sidebar-item, #sidebar .sidebar-group-header,
        #sidebar .sidebar-sub-item{ color:#d7e5fb; }
        #sidebar .sidebar-item:hover, #sidebar .sidebar-group-header:hover,
        #sidebar .sidebar-sub-item:hover{ background:rgba(255,255,255,.1) !important;
            color:#fff !important; }
        #sidebar .sidebar-item.active,
        #sidebar .sidebar-item.active:hover{ background:rgba(255,255,255,.18) !important;
            color:#fff !important; }
        #sidebar .sidebar-item.active i{ color:#fff !important; }
        #sidebar .sidebar-sub-item.active{ background:rgba(255,255,255,.18) !important;
            color:#fff !important; }
        #sidebar .sidebar-group-header.current{ background:rgba(255,255,255,.18) !important;
            color:#fff !important; }
        #sidebar div:has(> .sidebar-sub-items .sidebar-sub-item.active) > .sidebar-group-header{
            color:#fff; }
        #sidebar .sidebar-caption{ color:#C9DCF7; }
        #sidebar .sidebar-footer{ color:#C9DCF7; }
        /* dimmed entries keep their hush by opacity alone — grayscale turns
           the light-on-blue text muddy */
        #sidebar .nav-dimmed{ opacity:.55; filter:none; }
        /* wordmark flips to its white cut on the dark ground */

        #sidebar .sidebar-brand-name{ color:#fff; }
        #sidebar .sidebar-brand-sub{ color:#C9DCF7 !important; }
        /* the Today counter: a paper chip so it reads on blue; late stays red */
        #sidebar .today-badge{ background:#fff; color:#0d47a1; }
        #sidebar .sidebar-item.active .today-badge{ background:#fff; color:#0d47a1; }
        #sidebar .today-badge.is-late{ background:#EB1414; color:#fff; }
        /* the compact rail joins the same blue ramp,
           and its flyout follows the sidebar into the dark */
        #sidebar.compact{ background:linear-gradient(180deg,#12508f 0%,#0E7490 100%) !important; }
        #sidebar.compact .sidebar-item.active,
        #sidebar.compact .sidebar-group-header.current,
        #sidebar.compact .sidebar-nav > div:has(.sidebar-sub-item.active) > .sidebar-group-header{
            background:rgba(255,255,255,.18) !important; color:#fff !important; }
        #sidebar.compact .sidebar-brand::before{
            box-shadow:0 0 0 2px rgba(255,255,255,.28); }
        #sidebar.compact .sidebar-nav > div:hover > .sidebar-sub-items{
            background:#1257b8; }
        #sidebar.compact .sidebar-nav > div:hover > .sidebar-sub-items[data-label]::before{
            color:#C9DCF7; }
        /* ============================================================
           Module tiles — one icon system for the menu, the launcher and
           the All modules page. Page Studio's gradient tile was the one
           entry that looked like an app; now every module is one. Each
           module owns a two-stop ramp (--ic-a → --ic-b) declared against
           the entry that carries data-mod="<key>", so the tile inside it
           inherits its colour and a launcher tile can carry the key
           itself. The tile: a rounded square, a top sheen, a hairline
           ring, a soft drop, the glyph white on it. Ramps are the 400 →
           600 steps of one hue each, so twelve colours still read as one
           family — and none sits on the rail's own blue (#12508f →
           #0E7490), which is what drowned the Studio's first ramp.
           ============================================================ */
        [data-mod="today"]      { --ic-a:#fbbf24; --ic-b:#d97706; }
        [data-mod="phase1"]     { --ic-a:#34d399; --ic-b:#059669; }
        [data-mod="studio"]     { --ic-a:#c084fc; --ic-b:#7c4dff; }
        [data-mod="finance"]    { --ic-a:#38bdf8; --ic-b:#0284c7; }
        [data-mod="procurement"]{ --ic-a:#2dd4bf; --ic-b:#0d9488; }
        [data-mod="membership"] { --ic-a:#a78bfa; --ic-b:#7c3aed; }
        [data-mod="payroll"]    { --ic-a:#4ade80; --ic-b:#16a34a; }
        [data-mod="responses"]  { --ic-a:#fb923c; --ic-b:#ea580c; }
        [data-mod="fundraising"]{ --ic-a:#f472b6; --ic-b:#db2777; }
        [data-mod="logistics"]  { --ic-a:#a3e635; --ic-b:#65a30d; }
        [data-mod="travel"]     { --ic-a:#818cf8; --ic-b:#4f46e5; }
        [data-mod="grants"]     { --ic-a:#f87171; --ic-b:#dc2626; }
        [data-mod="learning"]   { --ic-a:#e879f9; --ic-b:#c026d3; }
        [data-mod="meal"]       { --ic-a:#22d3ee; --ic-b:#0891b2; }
        [data-mod="access"]     { --ic-a:#94a3b8; --ic-b:#475569; }
        [data-mod="doc"]        { --ic-a:#a8a29e; --ic-b:#57534e; }
        [data-mod="admin"]      { --ic-a:#9ca3af; --ic-b:#4b5563; }
        .mod-ic{
            width:22px; height:22px; border-radius:7px; flex:0 0 auto;
            display:grid; place-items:center; color:#fff; line-height:1;
            /* a module the stylesheet does not know yet wears slate */
            background:linear-gradient(135deg,var(--ic-a,#94a3b8) 0%,var(--ic-b,#475569) 100%);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.08),
                0 1px 3px rgba(9,30,66,.35), 0 0 0 1px rgba(255,255,255,.28);
            transition:transform .15s var(--u-ease), box-shadow .15s var(--u-ease); }
        .mod-ic > i:first-child{
            width:auto !important; font-size:.72rem !important; line-height:1;
            color:#fff !important; opacity:1 !important;
            text-shadow:0 1px 1px rgba(0,0,0,.25); }
        /* the Studio keeps its three-stop ramp: it is the one entry that
           makes screens rather than being one, and the ramp says so */
        [data-mod="studio"] .mod-ic, .mod-ic[data-mod="studio"]{
            background:linear-gradient(135deg,#c084fc 0%,#7c4dff 48%,#38bdf8 120%); }
        /* on the rail: hover lifts the tile and glows it in its own colour;
           the active entry keeps the rail's white-glass pill — twelve
           colours must never compete with the one selection cue — and its
           tile answers with a brighter ring */
        #sidebar .sidebar-item:hover .mod-ic,
        #sidebar .sidebar-group-header:hover .mod-ic{
            transform:scale(1.08);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.08),
                0 2px 6px rgba(9,30,66,.4), 0 0 0 1px rgba(255,255,255,.42),
                0 0 10px rgba(255,255,255,.35);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.08),
                0 2px 6px rgba(9,30,66,.4), 0 0 0 1px rgba(255,255,255,.42),
                0 0 10px color-mix(in srgb, var(--ic-a,#94a3b8) 60%, transparent); }
        #sidebar .sidebar-item.active .mod-ic,
        #sidebar .sidebar-group-header.current .mod-ic,
        #sidebar .sidebar-nav > div:has(.sidebar-sub-item.active) > .sidebar-group-header .mod-ic{
            box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.08),
                0 1px 3px rgba(9,30,66,.35), 0 0 0 1.5px rgba(255,255,255,.72); }
        /* the compact rail: the same tile, a size up, on its own */
        #sidebar.compact .mod-ic{ width:28px; height:28px; border-radius:9px; }
        #sidebar.compact .sidebar-item .mod-ic > i:first-child,
        #sidebar.compact .sidebar-group-header .mod-ic > i:first-child{ font-size:.85rem !important; }
        /* the launcher and the All modules page: the same tile, scaled up,
           on white — so the ring goes dark and the drop goes soft */
        .mod-ic--lg{ width:46px; height:46px; border-radius:14px;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.06),
                0 2px 5px -1px rgba(9,30,66,.28), 0 0 0 1px rgba(9,30,66,.04); }
        .mod-ic--lg > i:first-child{ font-size:1.15rem !important;
            text-shadow:0 1px 2px rgba(0,0,0,.22); }
        .app-launcher-tile:hover .mod-ic--lg{ transform:translateY(-1px) scale(1.04);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.06),
                0 6px 12px -4px rgba(9,30,66,.35), 0 0 0 1px rgba(9,30,66,.04); }
    /* ============================================================
       Sign-in: backdrop, glass card, the staged sign-in ceremony and
       the welcome. Demo build — front-end theatre over the fake login.
       ============================================================ */
    #loginOverlay, #authCeremony{ position:fixed; inset:0; overflow:hidden; color:#fff;
        font-family:var(--sans); background:#03102a; }
    #authCeremony{ z-index:10000; transition:opacity .35s ease; }
    #authCeremony.is-leaving{ opacity:0; transform:scale(1.015);
        transition:opacity .9s ease, transform .9s ease; }
    #authCeremony.hidden, #loginOverlay.hidden{ display:none; }

    /* ---------- backdrop: aurora, dot field, a slow ECG trace, grain ---------- */
    .auth-bg{ position:absolute; inset:0; overflow:hidden;
        background:linear-gradient(160deg,#03102a 0%,#062455 42%,#0a3d7a 100%); }
    /* The field photograph. It is a small square, so it is given a tall band on
       the right rather than the whole screen: the crop then holds the whole
       subject and the upscale halves. Its left edge dissolves into the gradient,
       which keeps the headline on clean colour. Absent, the layer is simply
       transparent and the gradient carries the screen on its own. */
    .auth-photo{ position:absolute; top:0; bottom:0; left:24%; right:20%;
        background:url('/static/img/login-bg.jpg') 50% 50% / auto 100% no-repeat;
        animation:auth-photo-in 1.6s cubic-bezier(.2,.7,.2,1) both;
        -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
                mask-image:linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%); }
    @keyframes auth-photo-in{ from{ opacity:0; transform:scale(1.09) } to{ opacity:1; transform:scale(1.02) } }
    /* Over a photograph the aurora is a tint, not a subject: the blobs and the
       dot field drop back so the picture stays the thing you look at. */
    .auth-bg:has(.auth-photo) .auth-blob{ opacity:.28; }
    .auth-bg:has(.auth-photo) .auth-grid{ opacity:.07; }
    .auth-shade{ position:absolute; inset:0;
        background:linear-gradient(100deg, rgba(3,16,42,.9) 0%, rgba(3,16,42,.62) 28%, rgba(3,16,42,.18) 50%, rgba(3,16,42,.5) 74%, rgba(3,16,42,.8) 100%),
                   linear-gradient(180deg, rgba(3,16,42,.3) 0%, rgba(3,16,42,0) 30%, rgba(3,16,42,.5) 100%); }
    #authCeremony .auth-photo{ inset:0; background-size:cover; filter:blur(16px) brightness(.4) saturate(1.05); transform:scale(1.08);
        -webkit-mask-image:none; mask-image:none; }
    #authCeremony .auth-shade{ background:linear-gradient(180deg, rgba(3,16,42,.62) 0%, rgba(3,16,42,.5) 45%, rgba(3,16,42,.72) 100%); }
    .auth-blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;
        will-change:transform; mix-blend-mode:screen; }
    .auth-blob-1{ width:58vw; height:58vw; left:-14vw; top:-24vw;
        background:radial-gradient(circle at 40% 40%, #1a6dff 0%, rgba(26,109,255,0) 62%);
        animation:auth-drift-1 22s ease-in-out infinite alternate; }
    .auth-blob-2{ width:52vw; height:52vw; right:-16vw; bottom:-22vw;
        background:radial-gradient(circle at 50% 50%, #00b3b0 0%, rgba(0,179,176,0) 62%);
        animation:auth-drift-2 26s ease-in-out infinite alternate; }
    .auth-blob-3{ width:36vw; height:36vw; left:38vw; top:30vh; opacity:.5;
        background:radial-gradient(circle at 50% 50%, #8fd0ff 0%, rgba(143,208,255,0) 60%);
        animation:auth-drift-3 18s ease-in-out infinite alternate; }
    @keyframes auth-drift-1{ from{transform:translate(0,0) scale(1)} to{transform:translate(9vw,7vh) scale(1.12)} }
    @keyframes auth-drift-2{ from{transform:translate(0,0) scale(1.05)} to{transform:translate(-8vw,-9vh) scale(.95)} }
    @keyframes auth-drift-3{ from{transform:translate(0,0)} to{transform:translate(-12vw,10vh)} }
    .auth-grid{ position:absolute; inset:0; opacity:.16;
        background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.4px);
        background-size:30px 30px;
        -webkit-mask-image:radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%);
                mask-image:radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%); }
    .auth-ecg{ position:absolute; left:0; right:0; top:54%; width:100%; height:20vh; }
    .auth-ecg path{ fill:none; stroke:rgba(178,224,255,.3); stroke-width:1.6; stroke-linejoin:round;
        stroke-linecap:round; stroke-dasharray:1000 1000; stroke-dashoffset:1000;
        filter:drop-shadow(0 0 6px rgba(120,200,255,.55));
        animation:auth-ecg 11s cubic-bezier(.4,0,.6,1) infinite; }
    @keyframes auth-ecg{ from{ stroke-dashoffset:1000 } to{ stroke-dashoffset:-1000 } }
    .auth-vignette{ position:absolute; inset:0;
        background:radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 35%, rgba(2,10,30,.55) 100%); }
    .auth-grain{ position:absolute; inset:0; opacity:.07; pointer-events:none; mix-blend-mode:overlay;
        background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

    /* ---------- login stage: statement left, glass card right ---------- */
    .auth-stage{ position:relative; z-index:1; height:100%; overflow-y:auto; display:grid;
        grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:48px;
        padding:48px clamp(24px,7vw,120px); }
    .auth-hero{ max-width:620px; animation:auth-rise .9s cubic-bezier(.2,.7,.2,1) both; }
    .auth-wordmark{ height:40px; width:auto; margin-bottom:34px; display:block; }
    .auth-eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
        color:#9fd3ff; margin:0 0 14px; }
    #loginOverlay h1.auth-headline{ font-family:var(--display); font-weight:400; font-size:clamp(38px,4.6vw,64px);
        line-height:1.04; letter-spacing:-.02em; margin:0 0 18px;
        background:linear-gradient(180deg,#fff 0%,#cfe6ff 100%); -webkit-background-clip:text;
        background-clip:text; color:transparent; }
    .auth-sub{ font-size:16.5px; line-height:1.55; color:rgba(255,255,255,.72); max-width:520px; margin:0 0 26px; }
    .auth-chips{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
    .auth-chips li{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500;
        color:rgba(255,255,255,.82); padding:7px 13px; border-radius:9999px;
        background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); }
    .auth-chips i{ color:#9fd3ff; font-size:11px; }
    .auth-glass{ background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.14);
        box-shadow:0 30px 80px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
        -webkit-backdrop-filter:blur(26px) saturate(150%); backdrop-filter:blur(26px) saturate(150%); }
    .auth-card{ position:relative; width:min(440px,100%); margin-left:auto; padding:36px 36px 26px;
        border-radius:26px; animation:auth-rise .9s .12s cubic-bezier(.2,.7,.2,1) both;
        transition:opacity .45s ease, transform .45s ease, filter .45s ease; }
    .auth-card.is-leaving{ opacity:0; transform:scale(.96) translateY(8px); filter:blur(6px); }
    .auth-card-mark{ display:none; }
    .auth-card-title{ font-family:var(--display); font-weight:500; font-size:26px; letter-spacing:-.01em; margin:0 0 4px; }
    .auth-card-sub{ font-size:13.5px; color:rgba(255,255,255,.62); margin:0 0 24px; }
    .auth-btn{ display:flex; align-items:center; justify-content:center; gap:11px; width:100%;
        padding:13px 18px; border-radius:9999px; font-family:var(--display); font-weight:500; font-size:15.5px;
        border:1px solid transparent; cursor:pointer; line-height:1.2;
        transition:transform .15s ease, background .15s ease, box-shadow .15s ease; }
    .auth-btn:active{ transform:scale(.985) }
    .auth-btn.hidden{ display:none }
    .auth-btn-primary{ background:#fff; color:#0f1b2d; box-shadow:0 8px 24px -10px rgba(0,0,0,.6); }
    .auth-btn-primary:hover{ background:#f3f7ff; transform:translateY(-1px); }
    .auth-btn-secondary{ background:rgba(255,255,255,.09); color:#fff; border-color:rgba(255,255,255,.16); margin-top:10px; }
    .auth-btn-secondary:hover{ background:rgba(255,255,255,.14); }
    .auth-ms, .auth-g{ width:18px; height:18px; flex:0 0 18px; }
    .auth-divider{ display:flex; align-items:center; gap:12px; margin:18px 0 6px; color:rgba(255,255,255,.4); font-size:12px; }
    .auth-divider::before, .auth-divider::after{ content:""; flex:1; border-top:1px solid rgba(255,255,255,.14); }
    .auth-link{ background:none; border:none; color:rgba(255,255,255,.78); font-size:13.5px; font-weight:500;
        cursor:pointer; padding:8px 4px; width:100%; display:inline-flex; justify-content:center; align-items:center; gap:8px; }
    .auth-link:hover{ color:#fff; }
    .auth-link-muted{ color:rgba(255,255,255,.5); font-weight:400; font-size:12.5px; }
    .auth-email{ margin-top:8px; }
    .auth-email.hidden{ display:none; }
    #loginOverlay .auth-input{ width:100%; padding:12px 16px; margin-bottom:10px; border-radius:12px !important;
        background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#fff; font-size:14.5px; outline:none; }
    #loginOverlay .auth-input::placeholder{ color:rgba(255,255,255,.45) }
    #loginOverlay .auth-input:focus{ border-color:#9fd3ff; box-shadow:0 0 0 3px rgba(159,211,255,.25); }
    .auth-foot{ margin:22px 0 0; font-size:12px; color:rgba(255,255,255,.5); text-align:center; }
    .auth-foot i{ margin-right:6px; color:#9fd3ff }
    .auth-version{ margin-top:8px; font-size:11px; color:rgba(255,255,255,.3); text-align:center; }
    @keyframes auth-rise{ from{ opacity:0; transform:translateY(18px); filter:blur(6px) } to{ opacity:1; transform:none; filter:none } }
    @media(max-width:1023px){
        .auth-stage{ grid-template-columns:1fr; gap:24px; padding:32px 20px; align-content:center; }
        .auth-hero{ display:none; }
        .auth-card{ margin:0 auto; }
        .auth-card-mark{ display:block; height:30px; width:auto; margin:0 auto 18px; }
        /* No hero column to hold the picture and no room to compose around the
           card, which covers the middle of the screen. The photograph stops
           being a composition and becomes atmosphere: blurred, dimmed, edge to
           edge, with the card reading over it. */
        .auth-photo{ inset:0; background-size:cover; background-position:50% 38%;
            filter:blur(18px) brightness(.6) saturate(1.1); transform:scale(1.12);
            -webkit-mask-image:none; mask-image:none; }
        .auth-shade{ background:linear-gradient(180deg, rgba(3,16,42,.68) 0%, rgba(3,16,42,.8) 55%, rgba(3,16,42,.92) 100%); }
    }

    /* ---------- the ceremony: checks, second factor, "you're in" ---------- */
    .auth-cer-stage{ position:relative; z-index:1; height:100%; display:grid; place-items:center; padding:24px; }
    .auth-cer-panel{ width:min(460px,100%); padding:30px 32px 26px; border-radius:26px;
        animation:auth-rise .7s cubic-bezier(.2,.7,.2,1) both;
        transition:opacity .5s ease, transform .5s ease, filter .5s ease; }
    .auth-cer-panel.is-leaving{ opacity:0; transform:scale(.94); filter:blur(8px); }
    .auth-cer-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
    .auth-cer-logo{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex:0 0 46px;
        background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); }
    .auth-cer-logo svg{ width:22px; height:22px } .auth-cer-logo i{ font-size:20px; color:#9fd3ff }
    .auth-cer-title{ font-family:var(--display); font-weight:500; font-size:18px; }
    .auth-cer-sub{ font-size:12.5px; color:rgba(255,255,255,.6); margin-top:2px; }
    .auth-steps{ list-style:none; margin:0; padding:0; }
    .auth-step{ display:flex; align-items:flex-start; gap:14px; padding:9px 0; opacity:.35; transition:opacity .4s ease; }
    .auth-step.is-active, .auth-step.is-done{ opacity:1 }
    .auth-step-ic{ flex:0 0 26px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
        border:1.5px solid rgba(255,255,255,.25); position:relative; margin-top:1px;
        transition:background .25s ease, border-color .25s ease; }
    .auth-step.is-active .auth-step-ic{ border-color:transparent }
    .auth-step.is-active .auth-step-ic::before{ content:""; position:absolute; inset:-1.5px; border-radius:50%;
        border:2px solid rgba(159,211,255,.25); border-top-color:#9fd3ff; animation:auth-spin .8s linear infinite }
    .auth-step.is-done .auth-step-ic{ background:#22c55e; border-color:#22c55e; }
    .auth-step-ic svg{ width:13px; height:13px; }
    .auth-step-ic svg path{ fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
        stroke-dasharray:24; stroke-dashoffset:24; animation:auth-draw .35s ease-out forwards }
    @keyframes auth-spin{ to{ transform:rotate(360deg) } }
    @keyframes auth-draw{ to{ stroke-dashoffset:0 } }
    .auth-step-t{ font-size:14.5px; font-weight:500; }
    .auth-step-d{ font-size:12.5px; color:rgba(255,255,255,.6); margin-top:2px; min-height:16px; }
    .auth-2fa{ margin-top:10px; }
    .auth-2fa:empty{ display:none }
    .auth-2fa-card{ border-radius:18px; padding:16px 18px 14px; background:rgba(0,0,0,.22);
        border:1px solid rgba(255,255,255,.12); animation:auth-rise .5s cubic-bezier(.2,.7,.2,1) both; }
    .auth-2fa-label{ font-size:12px; color:rgba(255,255,255,.62); display:flex; align-items:center; gap:8px; }
    .auth-2fa-label i{ color:#9fd3ff }
    .auth-2fa-num{ font-family:var(--display); font-weight:500; font-size:54px; letter-spacing:.02em; line-height:1.1;
        margin:8px 0 4px; font-variant-numeric:tabular-nums; }
    .auth-2fa-hint{ font-size:12.5px; color:rgba(255,255,255,.55); line-height:1.45 }
    .auth-2fa-phone{ display:flex; align-items:center; gap:10px; margin-top:12px; font-size:13px; color:rgba(255,255,255,.8) }
    .auth-2fa-phone .dot{ width:8px; height:8px; border-radius:50%; background:#D97706; animation:auth-pulse 1s ease-in-out infinite }
    .auth-2fa-phone.is-ok .dot{ background:#22c55e; animation:none }
    @keyframes auth-pulse{ 50%{ opacity:.35 } }
    .auth-otp{ display:flex; gap:8px; margin:12px 0 4px; }
    .auth-otp span{ flex:1; height:50px; border-radius:12px; display:grid; place-items:center; font-size:22px; font-weight:500;
        background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); font-variant-numeric:tabular-nums;
        transition:background .2s ease, border-color .2s ease }
    .auth-otp span.is-set{ background:rgba(255,255,255,.16); border-color:#9fd3ff }
    .auth-done{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; opacity:0;
        pointer-events:none; transition:opacity .5s ease; }
    .auth-done.is-on{ opacity:1 }
    .auth-done svg{ width:112px; height:112px; margin:0 auto 14px; display:block }
    .auth-done circle{ fill:none; stroke:rgba(255,255,255,.25); stroke-width:3 }
    .auth-done path{ fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
        stroke-dasharray:80; stroke-dashoffset:80 }
    .auth-done.is-on circle{ stroke:#22c55e; stroke-dasharray:280; stroke-dashoffset:280; animation:auth-ring .7s ease-out forwards }
    .auth-done.is-on path{ animation:auth-draw .45s .45s ease-out forwards }
    @keyframes auth-ring{ to{ stroke-dashoffset:0 } }
    .auth-done p{ font-family:var(--display); font-weight:400; font-size:24px; letter-spacing:-.01em; margin:0 }

    /* ---------- the welcome ---------- */
    .auth-welcome{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
        text-align:center; padding:40px 24px; opacity:0; pointer-events:none; transition:opacity .6s ease; overflow-y:auto; }
    .auth-welcome.is-on{ opacity:1; pointer-events:auto }
    .auth-welcome > *{ opacity:0 }
    .auth-welcome.is-on .auth-wel-h1{ animation:auth-rise 1s .1s cubic-bezier(.2,.7,.2,1) both }
    .auth-welcome.is-on .auth-wel-h2{ animation:auth-rise 1s .55s cubic-bezier(.2,.7,.2,1) both }
    .auth-welcome.is-on .auth-ai{ animation:auth-rise 1s 1s cubic-bezier(.2,.7,.2,1) both }
    .auth-welcome.is-on .auth-wel-cta{ animation:auth-rise 1s 1.5s cubic-bezier(.2,.7,.2,1) both }
    #authCeremony h1.auth-wel-h1{ font-family:var(--display); font-weight:400; font-size:clamp(40px,5.2vw,68px); letter-spacing:-.025em;
        line-height:1.05; margin:0 0 12px;
        background:linear-gradient(180deg,#fff 0%,#cfe6ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .auth-wel-h2{ font-size:clamp(19px,2vw,26px); color:rgba(255,255,255,.72); margin:0 0 34px; font-weight:400 }
    .auth-ai{ width:min(680px,100%); text-align:left; border-radius:22px; padding:18px 22px 20px; position:relative; overflow:hidden; }
    .auth-ai::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; z-index:0;
        background:linear-gradient(120deg, rgba(159,211,255,0) 20%, rgba(159,211,255,.75) 50%, rgba(0,179,176,0) 80%);
        background-size:200% 100%; opacity:.8;
        -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
        animation:auth-sheen 3.2s linear infinite; }
    @keyframes auth-sheen{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }
    .auth-ai-head, .auth-ai-body{ position:relative; z-index:1 }
    .auth-ai-head{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#9fd3ff;
        display:flex; align-items:center; gap:8px; margin-bottom:10px; }
    .auth-ai-head i{ font-size:12px; color:#7ee8d8 }
    .auth-ai-body{ font-size:16.5px; line-height:1.55; color:rgba(255,255,255,.92); min-height:52px; }
    .auth-ai-body .w{ display:inline-block; opacity:0; animation:auth-word .5s ease-out forwards; }
    .auth-ai-body .auth-ai-next{ display:block; margin-top:10px; font-size:14px; color:rgba(255,255,255,.62); }
    .auth-ai-body .auth-ai-next i{ margin-right:8px; opacity:.7 }
    @keyframes auth-word{ from{ opacity:0; filter:blur(4px); transform:translateY(4px) } to{ opacity:1; filter:none; transform:none } }
    .auth-ai-skel{ display:block; height:12px; border-radius:6px; margin:9px 0; width:92%;
        background:linear-gradient(90deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.08) 100%);
        background-size:200% 100%; animation:auth-shimmer 1.4s linear infinite; }
    .auth-ai-skel.short{ width:58% }
    @keyframes auth-shimmer{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }
    .auth-wel-cta{ margin-top:30px; width:min(320px,100%); }
    .auth-wel-auto{ height:2px; border-radius:2px; background:rgba(255,255,255,.14); margin-top:14px; overflow:hidden }
    .auth-wel-auto span{ display:block; height:100%; width:0; background:#9fd3ff; }
    .auth-welcome.is-armed .auth-wel-auto span{ animation:auth-auto 5.5s linear forwards }
    @keyframes auth-auto{ to{ width:100% } }
    .auth-wel-hint{ font-size:12px; color:rgba(255,255,255,.45); margin-top:8px }
    @media (prefers-reduced-motion: reduce){
        .auth-blob, .auth-ecg path, .auth-ai::before, .auth-ai-skel, .auth-photo{ animation:none !important }
        .auth-welcome.is-on > *{ animation-duration:.01s !important; animation-delay:0s !important }
    }
/* ====================================================================== *
 *  PM Box token pass — placeholder theme with an HI-blue accent, no logo.
 *  Last in the file so its values win.
 * ====================================================================== */
:root{
  --u-navy:#0b2e6b; --u-navy-700:#0f4fb8; --u-navy-100:#d6e4fb;
  --u-teal:#1160d0; --u-teal-100:#cfe0fa; --u-teal-50:#dbe8fb;
  --accent:#1160d0; --accent-dark:#0b2e6b;
}
#sidebar, #sidebar.compact{ background:linear-gradient(180deg,#0b2e6b 0%,#1160d0 100%) !important; }
#sidebar.compact .sidebar-nav > div:hover > .sidebar-sub-items{ background:#0f4fb8; }
#sidebar .sidebar-brand-word{ color:#fff; font-weight:700; font-size:19px; letter-spacing:-.02em; display:block; }
#sidebar .sidebar-brand-word small{ display:block; font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#bcd2f7; margin-top:2px; }
#sidebar.compact .sidebar-brand::before{ background:#fff; content:'PM'; color:#0b2e6b; font-weight:800; font-size:13px; display:grid; place-items:center; }
.auth-wordmark-text{ color:#fff; font-size:34px; font-weight:800; letter-spacing:-.03em; margin:0 0 18px; }
.auth-card-mark-text{ color:#fff; font-weight:800; font-size:18px; margin-bottom:6px; }
.auth-sso-note{ margin-top:14px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#dbe8fb; font-size:12px; line-height:1.45; }
.auth-sso-note b{ color:#fff; }
.persona-btn{ display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 12px 0 6px; border-radius:999px; border:1px solid var(--u-300); background:#fff; color:var(--u-900); font-size:13px; font-weight:600; cursor:pointer; }
.persona-btn:hover{ background:var(--u-100); }
.persona-av{ width:26px; height:26px; border-radius:50%; background:var(--u-navy); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700; }
.persona-menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:300px; background:#fff; border-radius:14px; box-shadow:0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px 0 rgba(60,64,67,.3); padding:8px; z-index:60; }
.persona-menu .pm-h{ padding:6px 10px 8px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--u-400); }
.persona-menu button{ display:flex; width:100%; align-items:center; gap:10px; padding:8px 10px; border:none; background:none; border-radius:9px; cursor:pointer; text-align:left; font-family:var(--u-font); }
.persona-menu button:hover, .persona-menu button.on{ background:var(--u-teal-50); }
.persona-menu .pm-n{ font-size:13.5px; font-weight:600; color:var(--u-900); }
.persona-menu .pm-t{ font-size:11.5px; color:var(--u-500); }
#frames{ position:relative; height:calc(100vh - 64px); }
#frames iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#F5F5F5; display:none; }
#frames iframe.on{ display:block; }
#appContent{ padding:0 !important; }
.hamburger-btn{ color:var(--u-600) !important; background:transparent !important; }
.hamburger-btn:hover{ background:var(--u-200) !important; }
#appHeader .icon-btn{ width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--u-600); border:none; background:transparent; cursor:pointer; position:relative; }
#appHeader .icon-btn:hover{ background:var(--u-200); color:var(--u-900); }
#appHeader .badge{ position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#EB1414; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.offline-btn{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:#E8F6ED; color:#15944A; font-size:11.5px; font-weight:700; border:1px solid #b7e1c1; cursor:pointer; }
.offline-btn.on{ background:#fde7e9; color:#CF1212; border-color:#f5b5bb; }
.badge.sync{ left:auto; right:-6px; top:14px; background:#7a4b00; }
.demo-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:#fff3cd; color:#7a4b00; font-size:11.5px; font-weight:700; border:1px solid #f5d98a; }
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#070916; color:#fff; padding:10px 16px; border-radius:10px; font-size:13.5px; z-index:400; box-shadow:0 6px 24px rgba(0,0,0,.25); }
.toast-error{ background:#CF1212; }
.toast-success{ background:#15944A; }
.dropdown{ position:absolute; right:0; top:calc(100% + 8px); background:#fff; border-radius:14px; box-shadow:0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px 0 rgba(60,64,67,.3); z-index:60; overflow:hidden; }
.notif-row{ display:flex; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; align-items:flex-start; }
.notif-ic{ width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:none; font-size:12px; margin-top:2px }
.notif-main{ flex:1; min-width:0 } .notif-top{ display:flex; align-items:center; gap:8px } .notif-top b{ font-size:13px; font-weight:700; color:#070916; line-height:1.3; min-width:0 }
.notif-tag{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:2px 7px; border-radius:5px; background:#F1F1F2; color:#4F5158; flex:none } .notif-tag.act{ background:#FFF3E2; color:#8f4c00 }
.notif-main p{ margin:3px 0 0; font-size:12px; color:#4F5158; line-height:1.45 } .notif-main small{ display:block; margin-top:4px; font-size:11px; color:#65696c }
.notif-row:hover{ background:var(--u-100); }
.notif-row.seen{ opacity:.6; }
.skip-link{ position:absolute; left:-999px; top:8px; background:#fff; color:var(--u-navy); padding:8px 12px; border-radius:8px; z-index:1000; font-weight:700; }
.skip-link:focus{ left:8px; }

/* ---- Ask AI panel (from the source portal's assistant panel, HI-blue accent) ---- */
.askai-btn{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px; background:linear-gradient(135deg,#0b2e6b,#1160d0); color:#fff; font-size:12.5px; font-weight:600; border:none; cursor:pointer }
.askai-btn:hover{ filter:brightness(1.07) }
#askAiPanel{ position:fixed; top:64px; right:0; bottom:0; width:min(420px,100vw); background:#fff; border-left:1px solid #F1F1F2; box-shadow:-8px 0 24px rgba(60,64,67,.14); transform:translateX(105%); transition:transform .28s ease; z-index:45; display:flex; flex-direction:column }
#askAiPanel.open{ transform:translateX(0) }
.askai-head{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid #F1F1F2; flex:0 0 auto }
.askai-head .askai-spark, .askai-hero .askai-spark{ color:#1160d0 }
.askai-head h2{ font-size:15px; font-weight:600; color:#070916; flex:1; margin:0 }
.askai-head button{ width:30px; height:30px; border-radius:50%; color:#4F5158; display:flex; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer }
.askai-head button:hover{ background:#F1F1F2; color:#070916 }
#askAiScroll{ flex:1 1 auto; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:#F5F5F5 }
.askai-msg{ max-width:88%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.5; color:#070916; overflow-wrap:break-word }
.askai-msg a{ color:#1160d0; text-decoration:underline; text-underline-offset:2px; font-weight:600 }
.askai-msg.user{ align-self:flex-end; background:#0b2e6b; color:#fff; border-bottom-right-radius:4px; white-space:pre-wrap }
.askai-msg.assistant{ align-self:flex-start; background:#fff; border:1px solid #F1F1F2; border-bottom-left-radius:4px }
.askai-msg.assistant.error{ border-color:#f4c7c3; background:#fdefee }
.askai-msg.assistant p{ margin:0 0 6px } .askai-msg.assistant p:last-child{ margin-bottom:0 }
.askai-msg.assistant ul{ margin:4px 0 6px; padding-left:18px; list-style:disc } .askai-msg.assistant li{ margin:2px 0 }
.askai-msg.assistant code{ background:#F1F1F2; border-radius:4px; padding:1px 4px; font-size:12px }
.askai-msg.assistant pre{ background:#F1F1F2; border-radius:8px; padding:8px 10px; font-size:12px; overflow-x:auto; margin:6px 0 }
.askai-tools{ align-self:flex-start; font-size:11px; color:#94969E; margin:-4px 0 2px 6px } .askai-tools i{ margin-right:4px }
.askai-hero{ margin:auto 0; text-align:center; padding:12px } .askai-hero h3{ font-size:15px; font-weight:600; color:#070916; margin:8px 0 4px } .askai-hero p{ font-size:12.5px; color:#4F5158; margin-bottom:14px }
.askai-chips{ display:flex; flex-direction:column; gap:8px } .askai-chips button{ border:1px solid #E4E6E7; background:#fff; border-radius:10px; padding:8px 12px; font-size:12.5px; color:#4F5158; text-align:left; cursor:pointer }
.askai-chips button:hover{ background:#F0F5FD; border-color:#F0F5FD; color:#0b2e6b }
.askai-typing{ align-self:flex-start; display:flex; gap:4px; padding:12px 14px; background:#fff; border:1px solid #F1F1F2; border-radius:14px; border-bottom-left-radius:4px }
.askai-typing span{ width:6px; height:6px; border-radius:50%; background:#94969E; animation:askaiBlink 1.2s infinite } .askai-typing span:nth-child(2){ animation-delay:.2s } .askai-typing span:nth-child(3){ animation-delay:.4s }
@keyframes askaiBlink{ 0%,80%,100%{ opacity:.25 } 40%{ opacity:1 } }
.askai-foot{ flex:0 0 auto; border-top:1px solid #F1F1F2; padding:10px 12px 8px; background:#fff }
.askai-guide{ display:flex; align-items:center; gap:8px; width:100%; margin:0 0 8px; padding:8px 12px; border:1px solid var(--stroke,#E4E6E7); background:var(--white,#fff); border-radius:10px; font-size:12.5px; font-weight:700; color:var(--ink,#070916); text-align:left; cursor:pointer }
.askai-guide:hover{ background:#F0F5FD; border-color:#DCE8F8 } .askai-guide i{ color:var(--red-pure,#FD0024) }
.askai-inputrow{ display:flex; align-items:flex-end; gap:8px; border:1px solid #E4E6E7; border-radius:22px; padding:6px 6px 6px 14px }
.askai-inputrow:focus-within{ border-color:#1160d0; box-shadow:0 0 0 1px #1160d0 }
#askAiInput{ flex:1; resize:none; border:none; outline:none; font-size:13.5px; line-height:1.4; max-height:120px; background:transparent; font-family:inherit }
#askAiSendBtn{ width:32px; height:32px; border-radius:50%; background:#1160d0; color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto; border:none; cursor:pointer } #askAiSendBtn:disabled{ opacity:.35; cursor:default }
.askai-note{ font-size:10.5px; color:#94969E; text-align:center; margin-top:6px }
.askai-chart{ position:relative; height:190px; margin:8px 0 2px; background:#fff; border:1px solid #F1F1F2; border-radius:10px; padding:8px }

/* ---- QA pass: the frame sits under the fixed header; header chips never wrap; hidden means hidden ---- */
#appContent{ padding-top:64px !important; }
.hidden{ display:none !important; }
.demo-chip, .askai-btn, .persona-btn, .offline-btn, #personaName, .pal-btn{ white-space:nowrap; }
#appHeader .persona-btn{ max-width:220px; } #personaName{ overflow:hidden; text-overflow:ellipsis; }
@media (max-width:1280px){ .demo-chip{ display:none !important; } }