/* ── My Desk (Secretary General) ──────────────────────────────────────
   The SG's personal command page. First feature: Policy Doc Review.
   More SG surfaces will be moved here over time. Tokens mirror the
   portal design system so every theme renders correctly. */
:root {
  --gold:#f0c832;--gold2:#f7d94e;--gdim:rgba(212,175,55,.12);--gglow:rgba(212,175,55,.3);
  --green:#4cd657;--red:#ff4848;--blue:#5588ff;--amber:#f59e0b;
  --text:#f2f7ee;--t2:rgba(242,247,238,.88);--t3:rgba(242,247,238,.62);
  --panel:rgba(255,255,255,.10);--panel2:rgba(255,255,255,.23);--border:rgba(255,255,255,.21);
  --void:#0c1109;--deep:#111a0e;--base:#172213;--lift:#1e2e1b;--hdh:70px;
  --disp:'Cinzel',serif;--mono:'IBM Plex Mono',monospace;--body:'DM Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--base);color:var(--text);font-family:var(--body);font-size:14px;}
#auth-redirect{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--void);color:var(--t3);font-family:var(--mono);letter-spacing:2px;font-size:13px;}
#shell{display:none;}

/* Header (mirrors the portal standard) */
#hdr{position:fixed;top:0;left:0;right:0;height:var(--hdh);background:rgba(15,23,12,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:200;animation:hdrDrop .6s cubic-bezier(.16,1,.3,1) both;}
.hdr-left,.hdr-right{display:flex;align-items:center;gap:12px;}
.hdr-back-btn{display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--t3);font-size:13px;font-weight:600;padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--panel);transition:.25s cubic-bezier(.16,1,.3,1);}
.hdr-back-btn:hover{color:var(--text);background:var(--panel2);}
.brand-logo-img{height:38px;width:auto;object-fit:contain;cursor:pointer;}
.brand-logo{font-family:var(--disp);font-weight:900;color:var(--gold);letter-spacing:2px;}
.page-pill{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--t3);background:var(--panel);border:1px solid var(--border);padding:5px 12px;border-radius:20px;}
.hdr-user-chip{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--border);border-radius:30px;padding:5px 14px 5px 6px;}
.hdr-user-av{width:32px;height:32px;border-radius:50%;background:var(--gdim);border:1px solid var(--gglow);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--gold);overflow:hidden;flex-shrink:0;}
.hdr-icon-btn{background:var(--panel);border:1px solid var(--border);border-radius:8px;color:var(--t3);width:36px;height:36px;cursor:pointer;font-size:14px;transition:.25s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;justify-content:center;}
.hdr-icon-btn:hover{color:var(--text);border-color:var(--gglow);}

/* Layout */
/* #hdr is STICKY (in flow) portal-wide, so no top reservation is needed. */
.md-wrap{max-width:1080px;margin:0 auto;padding:26px 22px 60px;}
.md-hero{margin-bottom:24px;animation:wgIn .5s cubic-bezier(.16,1,.3,1) both;}
.md-hero-label{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);opacity:.8;}
.md-hero-title{font-family:var(--disp);font-size:clamp(26px,4vw,40px);font-weight:900;color:var(--text);letter-spacing:1px;margin-top:4px;}
.md-hero-sub{font-size:13.5px;color:var(--t3);margin-top:6px;max-width:680px;line-height:1.6;}

/* Desk module nav (room for more SG tools later) */
.md-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;}
.md-nav-item{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--t2);background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:9px 15px;cursor:pointer;transition:.25s cubic-bezier(.16,1,.3,1);}
.md-nav-item.active,.md-nav-item:hover{color:var(--gold);background:var(--gdim);border-color:var(--gglow);}
.md-nav-item .md-badge{font-size:10px;font-weight:800;background:var(--gold);color:#1a1a1a;border-radius:999px;padding:1px 7px;}

.md-view{display:none;animation:cvIn .45s cubic-bezier(.16,1,.3,1) both;}
.md-view.active{display:block;}

/* Cards / glass */
.glass{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px 22px;}
.glass-gold{border-left:3px solid var(--gold);}
.sec-lbl{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.md-empty{text-align:center;padding:34px 18px;color:var(--t3);}
.md-empty i{font-size:26px;color:var(--gold);margin-bottom:10px;display:block;}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:12.5px;font-weight:700;border:none;border-radius:9px;padding:10px 16px;cursor:pointer;transition:.25s cubic-bezier(.16,1,.3,1);background:var(--panel2);color:var(--text);}
.btn:hover{transform:translateY(-1px);}
.btn-sm{font-size:11.5px;padding:7px 12px;}
.btn-gold{background:var(--gold);color:#1a1a1a;}
.btn-green{background:var(--green);color:#06210a;}
.btn-red{background:var(--red);color:#fff;}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--t2);}
.btn-outline:hover{border-color:var(--gglow);color:var(--gold);}

/* Form fields */
.gi{background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:9px;color:var(--text);font-family:var(--body);font-size:14px;padding:10px 12px;width:100%;}
.gi:focus{outline:none;border-color:var(--gglow);}
.gi-ta{resize:vertical;line-height:1.6;}
select.gi option{background:var(--deep);color:var(--text);}

/* Toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--lift);border:1px solid var(--border);border-left:3px solid var(--green);border-radius:10px;padding:13px 18px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text);z-index:600;opacity:0;transition:.35s cubic-bezier(.16,1,.3,1);box-shadow:0 10px 40px rgba(0,0,0,.5);}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
#toast.error{border-left-color:var(--red);}
#toast i{color:var(--green);}
#toast.error i{color:var(--red);}

@keyframes hdrDrop{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes wgIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes cvIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

@media(max-width:640px){
  .md-wrap{padding:18px 14px 48px;}
  .page-pill{display:none;}
  .hdr-back-btn span{display:none;}
}

/* DDCP preview mirror modal */
#ddcp-preview-modal{position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .25s ease both;}
.ddcp-pv-box{width:min(980px,100%);height:min(86vh,900px);background:var(--deep);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 70px rgba(0,0,0,.6);}
.ddcp-pv-head{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--lift);border-bottom:1px solid var(--border);}
.ddcp-pv-title{font-size:13px;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:8px;}
.ddcp-pv-box iframe{flex:1;width:100%;border:0;background:#172213;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@media(max-width:640px){#ddcp-preview-modal{padding:0;}.ddcp-pv-box{width:100%;height:100%;border-radius:0;}}

/* ── Enterprise upgrade (VP 2026-06-11): world clock, hero crest, KPIs, audit ── */
.hdr-clock{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--t2);background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:6px 13px;letter-spacing:.5px;}
.hdr-clock i{color:var(--gold);font-size:13px;}
.hdr-clock-tz{color:var(--gold);font-size:10px;font-weight:700;letter-spacing:1px;}

.md-hero{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,rgba(240,200,50,.10),rgba(255,255,255,.04));border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:18px;padding:22px 24px;}
.md-hero-crest{width:58px;height:58px;flex-shrink:0;border-radius:16px;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;color:var(--void);font-size:24px;box-shadow:0 8px 24px var(--gglow);}

.md-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
.md-kpi{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 18px;animation:scIn .5s cubic-bezier(.16,1,.3,1) both;}
.md-kpi:nth-child(2){animation-delay:.06s;}.md-kpi:nth-child(3){animation-delay:.12s;}.md-kpi:nth-child(4){animation-delay:.18s;}
.md-kpi-val{font-family:var(--disp);font-size:30px;font-weight:900;color:var(--gold);line-height:1;}
.md-kpi-lbl{font-size:11.5px;color:var(--t3);margin-top:7px;font-weight:600;letter-spacing:.3px;}
@keyframes scIn{from{opacity:0;transform:translateY(12px) scale(.96);}to{opacity:1;transform:none;}}

/* Amendment cards stagger in */
#policy-review-list > .glass{animation:cvIn .5s cubic-bezier(.16,1,.3,1) both;}
#policy-review-list > .glass:nth-child(2){animation-delay:.05s;}
#policy-review-list > .glass:nth-child(3){animation-delay:.1s;}
#policy-review-list > .glass:nth-child(4){animation-delay:.15s;}

/* Audit trail table */
.md-audit{margin-top:26px;}
.md-audit-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:14px;background:var(--panel);}
.md-audit-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:620px;}
.md-audit-table thead th{text-align:left;padding:11px 14px;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--border);background:rgba(255,255,255,.03);white-space:nowrap;}
.md-audit-table tbody td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.07);color:var(--t2);vertical-align:top;}
.md-audit-table tbody tr:last-child td{border-bottom:none;}
.md-audit-table tbody tr:hover td{background:rgba(255,255,255,.03);}
.md-audit-empty{text-align:center;color:var(--t3);padding:22px;}
.md-audit-when{font-family:var(--mono);font-size:11.5px;color:var(--t3);white-space:nowrap;}
.aud-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.aud-amber{background:rgba(240,200,50,.14);color:var(--gold);border:1px solid rgba(240,200,50,.3);}
.aud-blue{background:rgba(85,136,255,.14);color:#7da2ff;border:1px solid rgba(85,136,255,.3);}
.aud-red{background:rgba(255,72,72,.14);color:#ff7a7a;border:1px solid rgba(255,72,72,.3);}
.aud-gold{background:rgba(240,200,50,.14);color:var(--gold);border:1px solid rgba(240,200,50,.3);}
.aud-green{background:rgba(76,214,87,.14);color:var(--green);border:1px solid rgba(76,214,87,.3);}
.aud-grey{background:rgba(255,255,255,.08);color:var(--t2);border:1px solid var(--border);}

@media(max-width:760px){
  .md-kpis{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .md-hero{flex-direction:row;padding:18px;}
  .md-hero-crest{width:46px;height:46px;font-size:19px;border-radius:13px;}
  .md-hero-title{font-size:24px;}
  .hdr-clock{display:none;}
  .md-kpi-val{font-size:24px;}
}

/* ════════════════════════════════════════════════════════════════════
   MY DESK — EXECUTIVE SUITE (VP-selected 2026-06-14)
   Three-pane founding-executive command desk: module rail · work surface ·
   secretariat. Full-bleed, enterprise, built to host future modules.
   Appended last so it wins. Markup/IDs/workflow unchanged.
   ════════════════════════════════════════════════════════════════════ */
.md-suite{ max-width:none !important; margin:0 !important; padding:0 !important;
  display:grid !important; grid-template-columns:248px minmax(0,1fr) 320px !important; gap:0 !important;
  min-height:calc(100vh - var(--hdh,64px)); align-items:start; }

/* ── Module rail ─────────────────────────────────────────────────── */
.md-rail{ border-right:1px solid var(--border); background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);
  padding:18px 14px; display:flex; flex-direction:column; gap:2px; position:sticky; top:0; align-self:start; }
.md-rail-crest{ display:flex; align-items:center; gap:11px; padding:4px 8px 16px; border-bottom:1px solid var(--border); margin-bottom:8px; }
.md-rail-seal{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:18px; color:var(--gold);
  background:radial-gradient(circle at 50% 38%,rgba(240,200,50,.22),rgba(240,200,50,.04)); border:1.5px solid var(--gglow);
  box-shadow:0 0 0 5px rgba(240,200,50,.05),0 0 26px -6px var(--gglow); flex-shrink:0; }
.md-rail-of{ font-family:var(--mono); font-size:8.5px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); }
.md-rail-who{ font-family:var(--disp); font-size:15px; font-weight:700; color:var(--text); line-height:1.15; }
.md-rail-sec{ font-family:var(--mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--t3); padding:14px 8px 6px; }
/* vertical nav items (override the old horizontal md-nav) */
.md-suite .md-nav{ display:flex !important; flex-direction:column !important; gap:2px !important; border:0 !important; padding:0 !important; margin:0 !important; }
.md-suite .md-nav-item{ display:flex !important; align-items:center; gap:11px; padding:10px 11px !important; border-radius:10px !important;
  color:var(--t2); font-size:13px; font-weight:500; border:0 !important; border-left:3px solid transparent !important; cursor:pointer; transition:background .16s,border-color .16s; }
.md-suite .md-nav-item i{ width:16px; text-align:center; color:var(--t3); }
.md-suite .md-nav-item span{ flex:1; }
.md-suite .md-nav-item:hover{ background:rgba(240,200,50,.05) !important; }
.md-suite .md-nav-item.active{ background:linear-gradient(90deg,rgba(240,200,50,.12),transparent 75%) !important; border-left-color:var(--gold) !important; color:var(--text) !important; }
.md-suite .md-nav-item.active i{ color:var(--gold); }
.md-suite .md-nav-item .md-badge{ margin-left:auto; background:var(--gold); color:#1a1305; font-family:var(--mono); font-size:9px; font-weight:800; padding:1px 7px; border-radius:9px; }
.md-suite .md-nav-item.soon{ opacity:.5; cursor:default; }
.md-suite .md-nav-item.soon:hover{ background:transparent !important; }
.md-soon{ margin-left:auto; font-family:var(--mono); font-size:8.5px; letter-spacing:1px; text-transform:uppercase; color:var(--t3); background:rgba(255,255,255,.06); padding:2px 7px; border-radius:9px; }

/* ── Main work surface ───────────────────────────────────────────── */
.md-main{ padding:22px clamp(20px,2.2vw,30px) 44px; min-width:0; }
.md-suite .md-hero{ display:flex !important; align-items:flex-end; justify-content:space-between; gap:18px;
  background:none !important; border:0 !important; border-bottom:2px solid var(--gold) !important; border-radius:0 !important;
  padding:4px 0 14px !important; position:relative; }
.md-suite .md-hero::after{ content:""; position:absolute; left:0; bottom:-2px; width:120px; height:2px; background:var(--gold); box-shadow:0 0 12px var(--gglow); }
.md-suite .md-hero-label{ font-family:var(--mono); font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); }
.md-suite .md-hero-title{ font-family:var(--disp); font-size:clamp(28px,3vw,36px); font-weight:900; margin:5px 0 4px; }
.md-suite .md-hero-sub{ font-size:12.5px; color:var(--t3); max-width:560px; }
.md-hero-stamp{ font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--t3); text-align:right; line-height:1.7; white-space:nowrap; }
.md-hero-stamp b{ color:var(--gold); }
/* KPI deck */
.md-suite .md-kpis{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:13px !important; margin:18px 0 22px !important; }
.md-suite .md-kpi{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)) !important;
  border:1px solid var(--border) !important; border-top:2px solid var(--gglow) !important; border-radius:13px !important; padding:14px 16px !important; }
.md-suite .md-kpi-amber{ border-top-color:rgba(245,158,11,.5) !important; }
.md-suite .md-kpi-blue{ border-top-color:rgba(74,158,255,.5) !important; }
.md-suite .md-kpi-green{ border-top-color:rgba(76,214,87,.5) !important; }
.md-suite .md-kpi-val{ font-family:var(--mono) !important; font-size:26px !important; font-weight:700 !important; color:var(--gold) !important; }
.md-suite .md-kpi-amber .md-kpi-val{ color:var(--amber) !important; }
.md-suite .md-kpi-blue .md-kpi-val{ color:var(--blue,#4a9eff) !important; }
.md-suite .md-kpi-green .md-kpi-val{ color:var(--green) !important; }
.md-suite .md-kpi-lbl{ font-size:9.5px !important; letter-spacing:1px; text-transform:uppercase; color:var(--t3) !important; margin-top:4px; }

/* ── Secretariat rail ────────────────────────────────────────────── */
.md-sec{ border-left:1px solid var(--border); background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
  padding:20px 18px; display:flex; flex-direction:column; gap:20px; position:sticky; top:0; align-self:start; }
.md-sec-h{ font-family:var(--mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.md-qa{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.md-qa a{ display:flex; flex-direction:column; gap:7px; padding:12px; border:1px solid var(--border); border-radius:11px; background:rgba(255,255,255,.03); font-size:11px; color:var(--t2); text-decoration:none; transition:border-color .18s,background .18s; }
.md-qa a i{ color:var(--gold); font-size:15px; }
.md-qa a:hover{ border-color:var(--gglow); background:rgba(240,200,50,.06); }
.md-sec .md-audit{ background:none; border:0; padding:0; margin:0; }
.md-sec .md-audit-table{ font-size:11px; }
.md-sec .md-audit-table th{ font-size:8.5px; }

/* ── Responsive: collapse the rails ──────────────────────────────── */
@media(max-width:1100px){
  .md-suite{ grid-template-columns:210px minmax(0,1fr) !important; }
  .md-sec{ grid-column:1/-1; border-left:0; border-top:1px solid var(--border); flex-direction:row; flex-wrap:wrap; }
  .md-sec-block{ flex:1; min-width:240px; }
}
@media(max-width:760px){
  .md-suite{ grid-template-columns:1fr !important; }
  .md-rail{ position:static; border-right:0; border-bottom:1px solid var(--border); }
  .md-suite .md-hero{ flex-direction:column; align-items:flex-start; }
  .md-hero-stamp{ text-align:left; }
  .md-suite .md-kpis{ grid-template-columns:repeat(2,1fr) !important; }
  /* Fit-to-screen on mobile — match index.html, which clips horizontal overflow
     (#main{overflow-x:hidden}). My Desk is a document-flow layout, so without this
     a single stray-wide child makes the whole page wider than the phone and the
     browser renders it zoomed out. The rails are already static at <=760, so
     clipping the x-overflow here does not break any sticky positioning. */
  html, body{ max-width:100vw; overflow-x:hidden; }
  .md-wrap.md-suite{ width:100%; max-width:100%; min-width:0; }
  .md-main{ min-width:0; }
}

/* ════════════════════════════════════════════════════════════════════
   MY DESK — PREMIUM PASS (VP 2026-06-14)
   The portal's premium signature applied to the Executive Suite: ambient
   gold aura, animated gold scan-lines, glow-lift, gold scrollbars, and
   staggered cubic-bezier(.16,1,.3,1) reveals. CSS-only.
   ════════════════════════════════════════════════════════════════════ */
/* Ambient gold aura behind the whole desk */
body{ background:
  radial-gradient(130% 60% at 50% -8%, rgba(240,200,50,.07), transparent 55%),
  radial-gradient(80% 50% at 100% 0, rgba(240,200,50,.04), transparent 60%),
  var(--void,#0c1109) !important; }

/* Animated gold scan-line — masthead, rail crest, secretariat headers */
@keyframes mdScan{0%{background-position:200% 0}100%{background-position:-200% 0}}
.md-suite .md-hero::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1.5px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(240,200,50,.85),transparent); background-size:200% 100%;
  animation:mdScan 5.5s cubic-bezier(.16,1,.3,1) infinite; }
.md-rail-crest{ position:relative; }
.md-rail-crest::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(240,200,50,.7),transparent); background-size:200% 100%;
  animation:mdScan 6s cubic-bezier(.16,1,.3,1) infinite; }
.md-rail-seal{ animation:mdSeal 3.4s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes mdSeal{0%,100%{box-shadow:0 0 0 5px rgba(240,200,50,.05),0 0 22px -8px var(--gglow)}50%{box-shadow:0 0 0 5px rgba(240,200,50,.09),0 0 38px -4px var(--gglow)}}

/* Glassmorphism + glow-lift on the cards */
.md-suite .md-kpi,.md-suite #policy-review-list > .glass,.md-suite .md-qa a,.md-sec .md-sec-block{
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .35s cubic-bezier(.16,1,.3,1) !important; }
.md-suite .md-kpi:hover,.md-suite #policy-review-list > .glass:hover{
  transform:translateY(-3px) !important; border-color:var(--gglow) !important;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.55),0 0 30px -16px var(--gglow) !important; }
.md-suite .md-nav-item:not(.soon):hover{ box-shadow:inset 0 0 22px -14px var(--gglow); }

/* Gold scrollbars on every pane (matches the portal) */
.md-rail::-webkit-scrollbar,.md-main::-webkit-scrollbar,.md-sec::-webkit-scrollbar,.md-audit-scroll::-webkit-scrollbar{ width:6px; height:6px; }
.md-rail::-webkit-scrollbar-thumb,.md-main::-webkit-scrollbar-thumb,.md-sec::-webkit-scrollbar-thumb,.md-audit-scroll::-webkit-scrollbar-thumb{ background:rgba(240,200,50,.22); border-radius:10px; }
.md-rail::-webkit-scrollbar-thumb:hover,.md-main::-webkit-scrollbar-thumb:hover,.md-sec::-webkit-scrollbar-thumb:hover{ background:rgba(240,200,50,.4); }

/* Staggered premium reveals (cubic-bezier .16,1,.3,1) */
.md-rail{ animation:sbIn .55s cubic-bezier(.16,1,.3,1) both; }
.md-sec{ animation:wgIn .6s cubic-bezier(.16,1,.3,1) both; animation-delay:.12s; }
@keyframes sbIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.md-suite .md-nav-item{ animation:wgIn .5s cubic-bezier(.16,1,.3,1) both; }
.md-rail .md-nav-item:nth-child(1){animation-delay:.06s}.md-rail .md-nav-item:nth-child(2){animation-delay:.10s}.md-rail .md-nav-item:nth-child(3){animation-delay:.14s}
.md-suite .md-kpi:nth-child(1){animation-delay:.06s}.md-suite .md-kpi:nth-child(2){animation-delay:.10s}.md-suite .md-kpi:nth-child(3){animation-delay:.14s}.md-suite .md-kpi:nth-child(4){animation-delay:.18s}
.md-sec .md-sec-block{ animation:wgIn .5s cubic-bezier(.16,1,.3,1) both; }
.md-sec .md-sec-block:nth-child(1){animation-delay:.16s}.md-sec .md-sec-block:nth-child(2){animation-delay:.22s}

/* Quick-action glow-lift */
.md-qa a:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -14px var(--gglow); }

/* ════════════════════════════════════════════════════════════════════
   MY DESK — PREMIUM GLASS (match HR Ops Monitor exactly, VP 2026-06-14)
   The portal's canonical glass recipe: dual-gradient (white sheen + gold
   tint), inset top highlight, top hairline ::before, backdrop blur+saturate,
   gold-edge hover lift. Applied to every panel/card + the two rails.
   ════════════════════════════════════════════════════════════════════ */
.md-suite .glass,
.md-suite .md-kpi,
.md-sec .md-sec-block,
.md-suite .md-qa a{
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 42%,var(--panel,rgba(255,255,255,.10))),linear-gradient(320deg,var(--gdim,rgba(212,175,55,.12)),transparent 60%) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  position:relative; overflow:hidden;
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07) !important;
}
/* top hairline sheen on each glass panel */
.md-suite .glass::before,
.md-suite .md-kpi::before,
.md-sec .md-sec-block::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none; z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
}
/* keep the priority colour top-accent on KPI cards visible above the sheen */
.md-suite .md-kpi{ border-top:2px solid var(--gglow) !important; border-radius:14px !important; }
.md-suite .md-kpi-amber{ border-top-color:rgba(245,158,11,.55) !important; }
.md-suite .md-kpi-blue{ border-top-color:rgba(74,158,255,.55) !important; }
.md-suite .md-kpi-green{ border-top-color:rgba(76,214,87,.55) !important; }

/* gold glass for the governance panel + any glass-gold */
.md-suite .glass-gold{
  border-color:rgba(212,175,55,.32) !important;
  background:linear-gradient(135deg,var(--gdim,rgba(212,175,55,.14)) 0%,var(--panel,rgba(255,255,255,.10)) 60%),linear-gradient(160deg,rgba(255,255,255,.10),transparent 50%) !important;
}
/* hover lift to the canonical feel */
.md-suite .glass:hover,
.md-suite .md-kpi:hover,
.md-suite .md-qa a:hover{
  border-color:var(--gglow) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.5),0 0 30px -16px var(--gglow) !important;
}
/* frosted rails (glass panes, not flat) */
.md-rail,.md-sec{
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)) !important;
}

/* Probation oversight — VMEM/Head tags */
.md-prob-tag{ font-family:var(--mono); font-size:8.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:2px 7px; border-radius:9px; vertical-align:middle; margin-left:6px; }
.md-prob-tag.vmem{ background:linear-gradient(135deg,var(--gold),var(--gold2,#f7d94e)); color:#1a1305; }
.md-prob-tag.head{ background:rgba(74,158,255,.16); color:var(--blue,#4a9eff); border:1px solid rgba(74,158,255,.35); }

/* ── Enterprise label colour (VP 2026-06-14) ─────────────────────────
   The desk's section + KPI labels carry the gold enterprise accent. */
.md-rail-sec{ color:var(--gold,#f0c832) !important; display:flex; align-items:center; gap:8px; }
.md-rail-sec::before{ content:""; width:14px; height:1px; background:linear-gradient(90deg,var(--gold,#f0c832),transparent); flex-shrink:0; }
.md-rail-of{ color:var(--gold,#f0c832) !important; }
.md-suite .md-kpi-lbl{ color:rgba(240,200,50,.62) !important; }
.md-suite .md-hero-label{ color:var(--gold,#f0c832) !important; }
.md-suite .sec-lbl,.md-sec .md-sec-h{ color:var(--gold,#f0c832) !important; }

/* ── Rota Assignment Access panel (view-rota-access) ─────────── */
.ra-h2{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold,#f0c832);margin:0 0 12px}
.ra-list{display:flex;flex-direction:column;gap:9px}
.ra-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border,rgba(255,255,255,.09));border-radius:10px;background:rgba(255,255,255,.02)}
.ra-row-main{display:flex;flex-direction:column;min-width:0;flex:1}
.ra-name{font-weight:600;font-size:13.5px;color:var(--text,#eef1f4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ra-dept{font-size:11px;color:var(--t3,#8a93a0)}
.ra-src{font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:3px 9px;border-radius:11px;white-space:nowrap}
.ra-src-vmem{color:var(--gold,#f0c832);background:rgba(240,200,50,.12);border:1px solid rgba(240,200,50,.32)}
.ra-src-grant{color:var(--green,#4cd657);background:rgba(76,214,87,.12);border:1px solid rgba(76,214,87,.3)}
.ra-lock{color:var(--t3,#8a93a0);font-size:12px;width:74px;text-align:center}
.ra-grant{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ra-picker{flex:1;min-width:220px;background:rgba(0,0,0,.25);color:var(--text,#eef1f4);border:1px solid var(--border,rgba(255,255,255,.14));border-radius:9px;padding:9px 12px;font-size:13px}
@media(max-width:560px){.ra-row{flex-wrap:wrap}.ra-src{order:3}}

/* ── SG probation card — richer info (parity with HR monitor) ─────────── */
.md-prob-badge{font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:4px 9px;border-radius:11px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;flex-shrink:0;}
.md-pb-active{color:var(--green);background:rgba(76,214,87,.12);border:1px solid rgba(76,214,87,.32);}
.md-pb-due{color:var(--amber,#f5a623);background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.34);}
.md-pb-esc{color:#ff9a3d;background:rgba(255,154,61,.12);border:1px solid rgba(255,154,61,.34);}
.md-pb-over{color:var(--red);background:rgba(255,72,72,.12);border:1px solid rgba(255,72,72,.34);}
.md-prob-tl{margin-top:14px;height:7px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;}
.md-prob-tl-fill{height:100%;border-radius:6px;transition:width .5s cubic-bezier(.16,1,.3,1);}
.md-tl-green{background:var(--green);color:var(--green);}
.md-tl-amber{background:var(--amber,#f5a623);color:var(--amber,#f5a623);}
.md-tl-red{background:var(--red);color:var(--red);}
.md-prob-tl-lbls{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:var(--t3);margin-top:5px;}
.md-prob-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;}
.md-prob-stat{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.02);min-width:0;}
.md-prob-num{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.md-prob-lbl{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--t3);}
.md-prob-warn{margin-top:11px;padding:9px 12px;border-radius:9px;font-size:11.5px;line-height:1.5;color:#ffb055;background:rgba(255,154,61,.1);border:1px solid rgba(255,154,61,.3);}
.md-prob-vmem{margin-top:12px;padding:11px 13px;border-radius:10px;background:rgba(240,200,50,.07);border:1px solid var(--gglow);}
.md-prob-vmem-hd{font-size:12.5px;color:var(--text);}
.md-prob-vmem-meta{font-size:10.5px;color:var(--t3);margin-top:3px;}
.md-prob-vmem-notes{font-size:12px;color:var(--t2);font-style:italic;margin-top:6px;line-height:1.5;}
@media(max-width:560px){.md-prob-stats{grid-template-columns:repeat(2,1fr);}}

/* ── Performance report: card toolbar + live-progress overlay ─────────── */
.md-report-bar{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px;padding-top:13px;border-top:1px dashed var(--border)}
#md-perf-overlay{position:fixed;inset:0;z-index:800;background:rgba(6,12,7,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:22px}
#md-perf-overlay.open{display:flex;animation:cvIn .28s cubic-bezier(.16,1,.3,1) both}
.mpo-box{width:min(520px,100%);background:var(--deep,#111a0e);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.mpo-head{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.mpo-title{font-family:var(--disp);font-size:18px;font-weight:700;color:var(--text)}
.mpo-sub{font-size:12px;color:var(--t3);margin-top:2px}
.mpo-spin{width:30px;height:30px;border-radius:50%;border:3px solid rgba(240,200,50,.25);border-top-color:var(--gold);flex-shrink:0;animation:mpoSpin .8s linear infinite}
.mpo-spin.done{border:3px solid var(--green);border-top-color:var(--green);animation:none;position:relative}
.mpo-spin.done::after{content:"\2713";position:absolute;inset:0;display:grid;place-items:center;color:var(--green);font-size:15px;font-weight:800}
@keyframes mpoSpin{to{transform:rotate(360deg)}}
.mpo-stages{display:flex;flex-direction:column;gap:9px}
.mpo-stage{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t3);transition:color .3s}
.mpo-stage .mpo-dot{width:9px;height:9px;border-radius:50%;background:var(--border);flex-shrink:0;transition:background .3s}
.mpo-stage.now{color:var(--text)}.mpo-stage.now .mpo-dot{background:var(--gold);box-shadow:0 0 0 4px rgba(240,200,50,.14)}
.mpo-stage.ok{color:var(--t2)}.mpo-stage.ok .mpo-dot{background:var(--green)}
.mpo-result{margin-top:16px;border-top:1px solid var(--border);padding-top:16px}
.mpo-ok{font-size:14px;color:var(--text)}.mpo-ok i{color:var(--green);margin-right:6px}
.mpo-sent{font-size:13px;color:var(--t2);margin-top:6px}
.mpo-err{font-size:13.5px;color:#ff9a9a}.mpo-err i{color:var(--red);margin-right:6px}
.mpo-actions{display:flex;justify-content:flex-end;margin-top:16px}

/* ── Performance Records list ─────────────────────────────────────────── */
.pr-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.02);margin-bottom:9px}
.pr-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pr-name{font-weight:600;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-meta{font-size:11.5px;color:var(--t3)}
.pr-more{font-size:12px;color:var(--t3);text-align:center;padding:10px}

/* ════════════════════════════════════════════════════════════════════
   INTERNAL JOB ROLES (VP 2026-07-27)
   The Secretary General opens any post in the organisation onto the
   internal board, and grants or revokes that power per department.
   ════════════════════════════════════════════════════════════════════ */
.md-suite .modal-overlay{position:fixed;inset:0;z-index:760;background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:20px;}
#md-role-picker,#md-role-form{position:fixed;inset:0;z-index:760;background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .25s cubic-bezier(.16,1,.3,1) both;}
#md-role-picker.show,#md-role-form.show{display:flex;}
#md-role-picker>.modal-card,#md-role-form>.modal-card{width:100%;max-height:calc(100vh - 40px);
  overflow-y:auto;overscroll-behavior:contain;padding:26px 24px;border-radius:16px;
  border:1px solid rgba(255,255,255,.20);background:linear-gradient(165deg,var(--base),var(--deep));
  position:relative;animation:mIn .32s cubic-bezier(.16,1,.3,1) both;}
.mdrp-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border:1px solid var(--border);
  border-radius:10px;background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;}
.mdrp-x:hover{border-color:var(--gglow);color:var(--gold);}
.mdrp-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);}
.mdrp-t{font-family:var(--disp);margin:9px 0 0;font-size:21px;font-weight:700;line-height:1.26;padding-right:46px;}
.mdrp-sub{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--t2);}
.mdrp-acts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;justify-content:flex-end;}

/* Role picker results, grouped by department */
.mdrp-results{margin-top:14px;max-height:52vh;overflow-y:auto;overscroll-behavior:contain;}
.mdrp-grp{margin-bottom:16px;}
.mdrp-grp-h{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.mdrp-grp-n{color:var(--t3);letter-spacing:1px;}
.mdrp-grp-note{font-size:11.5px;line-height:1.5;color:var(--t3);margin-bottom:9px;max-width:70ch;}
.mdrp-r{display:flex;align-items:center;gap:11px;width:100%;min-height:44px;padding:10px 12px;
  border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.03);color:var(--text);
  font-family:var(--body);font-size:13.5px;text-align:left;cursor:pointer;margin-bottom:7px;
  transition:.2s cubic-bezier(.16,1,.3,1);}
.mdrp-r:hover{border-color:var(--gglow);background:var(--gdim);}
.mdrp-r-main{flex:1 1 auto;min-width:0;}
.mdrp-r-t{font-weight:600;word-break:break-word;}
.mdrp-r-m{margin-top:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.8px;color:var(--t3);}
.mdrp-tag{font-family:var(--mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid var(--border);color:var(--t3);flex:0 0 auto;}
.mdrp-tag.is-senior{border-color:var(--gglow);background:var(--gdim);color:var(--gold);}
.mdrp-tag.is-open{border-color:rgba(76,214,87,.4);background:rgba(76,214,87,.10);color:var(--green);}

/* Vacancy form */
.mdrf-f{margin-top:16px;}
.mdrf-l{display:block;font-size:13px;font-weight:600;color:var(--text);}
.mdrf-h{margin:4px 0 8px;font-size:12px;line-height:1.5;color:var(--t3);}
.mdrf-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.mdrf-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.mdrf-rep{display:flex;gap:8px;margin-bottom:8px;}
.mdrf-rep .gi{flex:1 1 auto;}
.mdrf-rep-x{width:44px;height:44px;flex:0 0 auto;border:1px solid var(--border);border-radius:10px;
  background:rgba(255,255,255,.05);color:var(--t2);cursor:pointer;}
.mdrf-rep-x:hover{border-color:rgba(255,72,72,.5);color:#ff8f8f;}
.mdrf-add{margin-top:4px;}
.mdrf-note{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px 13px;border-radius:11px;
  border:1px solid rgba(240,200,50,.4);background:var(--gdim);font-size:12.5px;line-height:1.55;color:var(--t2);}
.mdrf-note i{color:var(--gold);flex:0 0 auto;margin-top:2px;}

/* Vacancy rows */
.mdr-row{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--border);
  border-radius:13px;background:rgba(255,255,255,.03);margin-bottom:9px;}
.mdr-ic{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:#0b0f0c;font-size:13px;background:linear-gradient(135deg,var(--gold),var(--gold2));}
.mdr-ic.is-draft{background:rgba(255,255,255,.10);color:var(--t2);}
.mdr-ic.is-closed{background:rgba(255,255,255,.06);color:var(--t3);}
.mdr-main{flex:1 1 auto;min-width:0;}
.mdr-t{font-size:13.5px;font-weight:600;word-break:break-word;}
.mdr-m{margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.8px;color:var(--t3);}
.mdr-st{font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;flex:0 0 auto;white-space:nowrap;}
.mdr-st.is-published{border:1px solid rgba(76,214,87,.4);background:rgba(76,214,87,.10);color:var(--green);}
.mdr-st.is-draft{border:1px solid var(--border);color:var(--t2);}
.mdr-st.is-closed{border:1px solid var(--border);color:var(--t3);}
.mdr-acts{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap;}

/* Department access grants */
.mda-row{display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid var(--border);
  border-radius:12px;background:rgba(255,255,255,.03);margin-bottom:8px;}
.mda-main{flex:1 1 auto;min-width:0;}
.mda-n{font-size:13.5px;font-weight:600;}
.mda-s{margin-top:3px;font-size:12px;color:var(--t3);}
.mda-badge{font-family:var(--mono);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid var(--border);color:var(--t3);}
.mda-badge.is-on{border-color:rgba(76,214,87,.4);background:rgba(76,214,87,.10);color:var(--green);}
.mda-btn{min-width:104px;}

@media(max-width:640px){
  .mdrf-g2,.mdrf-g3{grid-template-columns:1fr;}
  .mdrp-t{padding-right:0;}
  .mdrp-x{position:static;margin:0 0 12px auto;}
  #md-role-picker,#md-role-form{padding:0;align-items:flex-end;}
  #md-role-picker>.modal-card,#md-role-form>.modal-card{max-width:100% !important;
    border-radius:18px 18px 0 0;max-height:90vh;padding-bottom:calc(24px + env(safe-area-inset-bottom));}
  .mdrp-acts{flex-direction:column-reverse;}
  .mdrp-acts>*{width:100%;}
  .mdr-row,.mda-row{flex-wrap:wrap;}
  .mdr-acts>*,.mda-btn{flex:1 1 auto;}
}

/* Instruction the SG attaches to a grant, so the department is told what to
   open rather than just silently gaining a permission. */
.md-grant-lede{margin:0 0 10px;font-size:12.5px;line-height:1.6;color:var(--t3);max-width:78ch;}
.md-grant-note{width:100%;margin:0 0 14px;resize:vertical;min-height:52px;font-size:13px;line-height:1.55;}

/* ════════════════════════════════════════════════════════════════════
   MOBILE (VP 2026-07-27). My Desk was not usable on a phone.
   ----------------------------------------------------------------
   MEASURED, not guessed. At a 390px viewport the whole desk was being laid
   out at 660px and CLIPPED, not scrolled, because css sets
   `html,body{overflow-x:hidden}` at this breakpoint. So a third of every
   screen was simply unreachable: no scrollbar, no zoom, nothing.

   THE CAUSE was one keyword. The 760px rule collapsed the three column grid
   with `grid-template-columns:1fr`, and in CSS Grid `1fr` is shorthand for
   `minmax(auto, 1fr)`. That `auto` minimum is the item's MIN-CONTENT width,
   and a grid item defaults to `min-width:auto`, so the widest unbreakable
   thing anywhere in the rail or the main column silently inflated the single
   track to 660px. The media query was matching perfectly the whole time,
   which is why it looked like the breakpoint was being ignored.
   `minmax(0,1fr)` is the fix, and every grid child is pinned to min-width:0
   so no future child can inflate it again. The two wider breakpoints already
   used minmax(0,1fr) for their flexible track, which is why only the phone
   layout broke.
   ════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  .md-suite{ grid-template-columns:minmax(0,1fr) !important; }
  /* Belt and braces: a grid item's min-width:auto is what allowed this. */
  .md-suite > *{ min-width:0 !important; }
  .md-rail, .md-main, .md-sec{ min-width:0 !important; max-width:100%; }

  /* The rail is twelve modules. Stacked, it buries the actual work surface
     under a screen and a half of navigation, so on a phone it becomes a
     horizontally scrolling strip, the pattern the other boards already use. */
  .md-rail{ flex-direction:row !important; flex-wrap:nowrap; gap:8px;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain; scroll-snap-type:x proximity;
    padding:12px 14px; align-items:center; }
  .md-rail::-webkit-scrollbar{ height:0; }
  .md-rail-crest{ display:none; }          /* the header already names the desk */
  .md-rail-sec{ display:none; }            /* section headings make no sense in a strip */
  .md-rail #md-nav, .md-rail .md-nav{ display:flex; flex-direction:row; flex-wrap:nowrap;
    gap:8px; margin:0; }
  .md-rail .md-nav-item{ flex:0 0 auto; white-space:nowrap; scroll-snap-align:start;
    min-height:44px; }                     /* 44px: a real touch target */

  .md-main{ padding:18px 14px 40px; }
  .md-suite .md-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .md-hero-stamp{ white-space:normal; }    /* nowrap here was one of the wide items */
}

@media(max-width:480px){
  .md-suite .md-kpis{ grid-template-columns:minmax(0,1fr) !important; }
  .md-suite .md-hero-title{ font-size:24px; }
}

/* ── Overlays on a phone (VP 2026-07-27: "Overlays too") ─────────────
   All four of My Desk's overlays become bottom sheets: full width, capped
   height, their own scroll, and padding that clears the home indicator.
   The close control moves into the flow because a floating one sits over
   the content once the card is scrollable. */
@media(max-width:640px){
  #md-role-picker, #md-role-form, #md-perf-overlay, #ddcp-preview-modal{
    padding:0 !important; align-items:flex-end !important; }
  #md-role-picker > .modal-card, #md-role-form > .modal-card,
  #md-perf-overlay > *, #ddcp-preview-modal > *{
    width:100% !important; max-width:100% !important;
    max-height:92vh; overflow-y:auto; overscroll-behavior:contain;
    border-radius:18px 18px 0 0 !important;
    padding-bottom:calc(22px + env(safe-area-inset-bottom)) !important; }

  /* The picker's result list must not scroll INSIDE an already scrolling
     sheet: two nested scrollers on a touch screen fight each other. */
  .mdrp-results{ max-height:none; overflow:visible; }

  .mdrp-r{ min-height:48px; }
  .mdrp-acts{ flex-direction:column-reverse; gap:8px; }
  .mdrp-acts > *{ width:100%; }
  /* 44px is the minimum comfortable touch target. The overlay's own buttons
     measured 32px and 38px, including btn-sm, which is fine with a mouse and
     a miss with a thumb. Applied to every control in the sheet rather than
     just the action row, so the repeater add and remove buttons count too. */
  #md-role-picker .btn, #md-role-form .btn,
  #md-role-picker button, #md-role-form button{ min-height:44px; }
  #md-role-form .gi{ min-height:44px; }
  #md-role-form textarea.gi{ min-height:96px; }
  .mdrf-rep-x{ min-height:44px; }

  .mdrf-g2, .mdrf-g3{ grid-template-columns:1fr !important; }
  .mdrf-rep{ gap:6px; }
  .mdrf-rep-x{ width:46px; }

  .mdr-row, .mda-row{ flex-wrap:wrap; gap:10px; }
  .mdr-acts, .mda-row > .btn{ width:100%; }
  .mda-btn{ min-width:0; width:100%; }
  .md-grant-note{ min-height:64px; }

  /* The preview frame has no natural height on a phone. */
  #ddcp-preview-modal .ddcp-pv-box{ width:100%; height:92vh; border-radius:18px 18px 0 0; }
}

/* ── Internal Applications inbox (VP 2026-07-28) ──────────────────────
   A reading and triage surface. The 13-stage pipeline stays on
   internal-recruitment.html; this shows every application in one place with
   unread state so nothing sits unnoticed. */
.mdi-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px;}
.mdi-stat{padding:14px;border-radius:12px;border:1px solid var(--border);background:var(--deep);}
.mdi-stat-v{font-family:var(--disp);font-size:24px;font-weight:700;line-height:1;}
.mdi-stat-k{margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--t3);}

.mdi-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.mdi-filters{display:flex;gap:7px;flex-wrap:wrap;}
.mdi-filter{font-family:inherit;font-size:12px;font-weight:700;padding:8px 13px;border-radius:9px;
  border:1px solid var(--border);background:transparent;color:var(--t2);cursor:pointer;min-height:38px;}
.mdi-filter:hover{border-color:var(--gglow);color:var(--gold);}
.mdi-filter.is-on{border-color:var(--gglow);background:var(--gdim);color:var(--gold);}
.mdi-search{flex:1 1 220px;min-width:0;}

.mdi-row{display:flex;align-items:center;gap:13px;padding:13px 15px;margin-bottom:8px;
  border-radius:12px;border:1px solid var(--border);background:var(--deep);cursor:pointer;
  transition:.2s cubic-bezier(.16,1,.3,1);}
.mdi-row:hover{border-color:var(--gglow);background:var(--gdim);}
/* An unread row carries a gold edge, so a full inbox is scannable at a glance
   rather than needing every row read. */
.mdi-row.is-unread{border-left:3px solid var(--gold);}
.mdi-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--base);}
.mdi-av img,.mdi-av .av,.mdi-av span{width:100%;height:100%;object-fit:cover;display:flex;
  align-items:center;justify-content:center;font-size:13px;}
.mdi-main{flex:1 1 auto;min-width:0;}
.mdi-who{font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;}
.mdi-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:0 0 auto;}
.mdi-what{margin-top:3px;font-size:12.5px;color:var(--t2);}
.mdi-meta{margin-top:4px;font-family:var(--mono);font-size:10px;letter-spacing:.7px;color:var(--t3);}
.mdi-right{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end;}
.mdi-stage{font-family:var(--mono);font-size:9px;letter-spacing:1.1px;text-transform:uppercase;
  padding:4px 8px;border-radius:6px;border:1px solid var(--border);color:var(--t3);white-space:nowrap;}
.mdi-stage.is-waiting{border-color:var(--gglow);background:var(--gdim);color:var(--gold);}
.mdi-stage.is-closed{opacity:.6;}
.mdi-owner{font-family:var(--mono);font-size:9px;letter-spacing:.8px;color:var(--t3);}
.mdi-empty{display:flex;align-items:center;gap:13px;padding:28px;border-radius:12px;
  border:1px dashed var(--border);color:var(--t3);font-size:13px;line-height:1.65;}
.mdi-empty i{font-size:22px;color:var(--gold);}

/* The reader overlay itself. THIS WAS MISSING and the bug is worth recording:
   .modal-overlay is NOT defined in any stylesheet my-desk.html loads, so with
   only the mobile rules present the reader had no positioning and no hidden
   state on desktop. Its content rendered inline in the page, permanently
   visible, and a browser check reported display:block where flex was expected.
   Added to the SAME rule as the other two overlays so all three behave
   identically and cannot drift. */
#md-app-reader{position:fixed;inset:0;z-index:760;background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .25s cubic-bezier(.16,1,.3,1) both;}
#md-app-reader.show{display:flex;}
#md-app-reader>.modal-card{width:100%;max-height:calc(100vh - 40px);
  overflow-y:auto;overscroll-behavior:contain;padding:26px 24px;border-radius:16px;position:relative;
  border:1px solid rgba(255,255,255,.20);background:linear-gradient(165deg,var(--base),var(--deep));}

/* Reading one application */
.mdar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px;}
.mdar-cell{padding:11px 13px;border-radius:10px;border:1px solid var(--border);background:var(--deep);}
.mdar-ck{font-family:var(--mono);font-size:9px;letter-spacing:1.3px;text-transform:uppercase;color:var(--t3);}
.mdar-cv{margin-top:4px;font-size:13px;font-weight:600;word-break:break-word;}
.mdar-sec{margin-bottom:18px;}
.mdar-k{font-family:var(--mono);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px;}
.mdar-v{font-size:13.5px;line-height:1.75;color:var(--t2);white-space:pre-wrap;
  padding:13px 15px;border-radius:11px;border:1px solid var(--border);background:var(--deep);}
.mdar-note{display:flex;gap:10px;padding:12px 14px;border-radius:11px;border:1px solid var(--border);
  background:var(--deep);font-size:12.5px;line-height:1.65;color:var(--t2);}
.mdar-note i{color:var(--gold);margin-top:2px;}

@media(max-width:900px){.mdi-stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){
  #md-app-reader{padding:0 !important;align-items:flex-end !important;}
  #md-app-reader>.modal-card{width:100% !important;max-width:100% !important;max-height:92vh;
    overflow-y:auto;overscroll-behavior:contain;border-radius:18px 18px 0 0 !important;
    padding-bottom:calc(22px + env(safe-area-inset-bottom)) !important;}
  #md-app-reader .btn,#md-app-reader button,#md-app-reader a.btn{min-height:44px;}
  .mdar-grid{grid-template-columns:1fr;}
  .mdi-row{align-items:flex-start;flex-wrap:wrap;}
  .mdi-right{width:100%;flex-direction:row;justify-content:flex-start;align-items:center;}
  .mdi-filter{flex:1 1 auto;}
}

/* ════════════════════════════════════════════════════════════════════
   INTERNAL APPLICATIONS, as the Claude Design draws them  (2026-07-29)
   ────────────────────────────────────────────────────────────────────
   Source: "Internal Recruitment Console.dc.html", the admissions queue card.
   Banked at design-source/Internal Recruitment Console.dc.html.

   The VP: "this is the design but it looks nothing like the claude design".
   They were right. This surface rendered a dense 13px inbox ROW per application
   (.mdi-row below, now unused by the applications list). The design draws a
   CARD, and the difference is not decoration: the card quotes what the colleague
   actually wrote, so the reason for the application is readable without opening
   anything. On the row version you had to click into each one to learn why
   somebody had applied.

   Every value here is the design's. They are written as this page's TOKENS
   rather than as literals because the tokens resolve to exactly the design's
   values: --gold #f0c832, --gold2 #f7d94e, --blue #5588ff, --red #ff4848,
   --text #f2f7ee, --t2 rgba(242,247,238,.88), --t3 rgba(242,247,238,.62),
   --border rgba(255,255,255,.21). The rendered result is identical; the
   stylesheet stays maintainable.
   ════════════════════════════════════════════════════════════════════ */
.mda-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 12px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .09));
  transition: border-color .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1),
              box-shadow .25s cubic-bezier(.16, 1, .3, 1);
}
.mda-card:last-child { margin-bottom: 0; }
.mda-card:hover {
  border-color: var(--gglow);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .5);
}
/* Not yet opened. The gold edge is this page's own idea and is kept: a full
   inbox has to be scannable without reading every card. */
.mda-card.is-unread { border-left: 3px solid var(--gold); }

.mda-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.mda-av {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  /* The design draws a gold initials disc because its sample data has no
     photographs. The portal has real ones, so the photo shows and this gradient
     is only what sits behind an initial when there is none. */
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: var(--void);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mda-av img, .mda-av .av, .mda-av span {
  width: 100%; height: 100%; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
}
.mda-main { flex: 1 1 240px; min-width: 0; }
.mda-who {
  display: flex; align-items: center; gap: 9px;
  font-size: 15.5px; font-weight: 600; line-height: 1.3; word-break: break-word;
}
.mda-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--gold); }
.mda-sub { margin-top: 4px; font-size: 13px; color: var(--t2); overflow-wrap: anywhere; }
/* The reference line is BLUE in the design, which is how an internal application
   is told apart from an external one at a glance. */
.mda-ref {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--blue);
  overflow-wrap: anywhere;
}
.mda-side { flex: 0 0 auto; text-align: right; }
.mda-age {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--t3); white-space: nowrap;
}
.mda-age.is-late { color: var(--red); }
.mda-applied {
  margin-top: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--t2); white-space: nowrap;
}

/* ── What the colleague actually wrote ───────────────────────────────
   The point of the card. A gold rule down the left, and their own words. */
.mda-quote {
  margin-top: 14px;
  padding: 14px 15px;
  border-left: 2px solid rgba(240, 200, 50, .5);
  border-radius: 0 12px 12px 0;
  background: rgba(212, 175, 55, .08);
}
.mda-quote-k {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--gold);
}
.mda-quote-v {
  margin: 8px 0 0;
  max-width: 74ch;
  font-size: 14px;
  line-height: 1.66;
  color: var(--text);
  /* Their paragraphing is preserved, and the text stays selectable so it can be
     quoted back into a note. */
  white-space: pre-wrap;
  text-wrap: pretty;
  user-select: text;
  overflow-wrap: anywhere;
}
/* A long statement is clamped so one applicant cannot push the rest of the queue
   off the screen. The full text is in the reading panel. */
.mda-quote-v.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mda-late {
  display: flex; align-items: center; gap: 10px;
  margin-top: 13px; padding: 11px 13px;
  border: 1px solid rgba(255, 72, 72, .45);
  border-radius: 12px;
  background: rgba(255, 72, 72, .1);
}
.mda-late > i { color: var(--red); font-size: 12px; flex: 0 0 auto; }
.mda-late-t {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--red);
}

.mda-acts { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.mda-acts > * { min-height: 48px; }
.mda-stage {
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 1.1px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
  border: 1px solid var(--border); color: var(--t3); white-space: nowrap;
}
.mda-stage.is-waiting { border-color: var(--gglow); background: var(--gdim); color: var(--gold); }
.mda-stage.is-closed { opacity: .6; }

@media (max-width: 640px) {
  .mda-head { flex-direction: column; }
  .mda-side { text-align: left; }
  .mda-acts > * { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════
   THE SUB-PAGE FIT  (2026-07-29)
   ────────────────────────────────────────────────────────────────────
   The VP: "When any card board is clicked to navigate, the opened page is never
   compatiable, all overflows end to end screen instead of full screen with
   fitting, even back button in it seems odd."

   THE CAUSE. .md-main carried padding but no max-width. When the rail was
   removed and .md-wrap became a single column, nothing bounded the content any
   more, so every sub-page ran the full width of the monitor. On a wide screen a
   line of body text crossed the entire display.

   "Internal Recruitment Console.dc.html" bounds its own content at
   max-width:1560px with margin:0 auto, so that is what is used here. The
   overview keeps its own full-bleed tiles; this bounds the TEXT surfaces, which
   is where edge-to-edge actually hurts.
   ════════════════════════════════════════════════════════════════════ */
.md-main { max-width: 1560px; margin-left: auto; margin-right: auto; width: 100%; }

/* ── The way back ────────────────────────────────────────────────────
   Was a bare sticky button floating above the content, which read as though it
   had been dropped on the page. It is now a bar that names where you are going
   back to and what you are currently looking at, so a reader who has been
   navigating for a while is not guessing. */
.mdc-backbar {
  position: sticky;
  top: calc(var(--hdh, 70px) + 8px);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .09));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.mdc-backbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--gglow);
  border-radius: 11px;
  background: var(--gdim);
  color: var(--gold);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s cubic-bezier(.16, 1, .3, 1), background .2s cubic-bezier(.16, 1, .3, 1);
}
.mdc-backbar-btn:hover { border-color: var(--gold); background: rgba(212, 175, 55, .2); }
.mdc-backbar-where {
  min-width: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--t3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 560px) {
  /* The button alone on a phone: the label is the header pill's job there. */
  .mdc-backbar-where { display: none; }
}