/* Sticky layout primitives — navbar / toolbar / thead offset chain.
   MUST stay the first rule in this file: @import is only honoured before any
   other at-rule or style rule. Kept in shared/ rather than written inline here
   so the three views outside the design system (live/index.html,
   po/factory.html, po/index.html) can <link> the same primitives without
   pulling in the token and typography layers below — po/factory.html avoids
   muslin.css on purpose to dodge --bg/--surface/--faint collisions.
   Contract + per-view status: docs/sticky-layout-registry.md */
@import url('../shared/sticky-layout.css');

/* ============================================================
   MUSLIN SUITE — shared dashboard system
   Editorial header + ops-grade data tables
   Two directions: [data-theme="editorial"] · [data-theme="deepsky"]
   ============================================================ */

/* ── Brand fonts ── */
@font-face{
  font-family:'Arizona Flare';
  src:url('fonts/ABCArizonaFlare-Thin-Trial.woff') format('woff');
  font-weight:100;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Delighted Sunrise';
  src:url('fonts/Delighted_Sunrise.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@200;300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================
   TOKENS — shared
   ============================================================ */
:root{
  --font-display:'Arizona Flare','Cormorant Garamond',Georgia,serif;
  --font-script:'Delighted Sunrise','Dancing Script',cursive;
  --font-body:'Sarabun',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* brand constants */
  --muslin-blue:#8FACD7;
  --deep-sky:#21373C;
  --cotton:#EAE5D8;
  --crimson:#540E16;
  --lace:#A05E44;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  --radius-card:14px;
  --radius-btn:8px;
  --radius-inp:9px;
  --radius-pill:999px;

  --ls-wide:.16em;
  --ls-label:.08em;
}

/* ============================================================
   DIRECTION A — EDITORIAL LIGHT (default)
   Cotton / white, MUSLIN Blue accents, airy
   ============================================================ */
:root,
[data-theme="editorial"]{
  --bg:#F4F1E8;
  --surface:#FFFFFF;
  --surface-2:#F0ECE1;
  --surface-3:#E7E1D2;
  --header-bg:#FFFFFF;
  --header-ink:#21373C;

  --ink:#21373C;            /* headings / strong */
  --body:#2B2B28;           /* body text */
  --muted:#626259;          /* AA on bg/surface-2 */
  --faint:#7D7C73;          /* AA on bg/surface */

  --border:rgba(33,55,60,.12);
  --border-strong:rgba(33,55,60,.22);
  --rule:rgba(33,55,60,.16);

  --accent:#3E5F73;         /* legible slate-blue for links/active */
  --accent-soft:#8FACD7;    /* muslin blue fills */
  --accent-wash:#E4ECF4;

  --pos:#1F6B4A;  --pos-wash:#E6F0EA;
  --neg:#8C2A33;  --neg-wash:#F6E9E6;
  --warn:#7A5A1E; --warn-wash:#F6EFE0;   /* AA on warn-wash */
  --earth:#7E4830;--earth-wash:#F1E7DF;  /* AA on earth-wash */
  --info:#3E5F73; --info-wash:#E4ECF4;

  --tab-active-ink:#21373C;
  --tab-rule:#21373C;
  --shadow-card:0 1px 2px rgba(33,55,60,.05);
  --shadow-raise:0 6px 22px rgba(33,55,60,.10);
  --shadow-header:0 1px 0 var(--border);
}

/* ============================================================
   DIRECTION B — DEEP SKY (dramatic dark)
   Deep Sky surfaces, Cotton ink, MUSLIN Blue pops
   ============================================================ */
[data-theme="deepsky"]{
  --bg:#16252A;
  --surface:#1E333A;
  --surface-2:#264049;
  --surface-3:#2F4D57;
  --header-bg:#21373C;
  --header-ink:#F3EFE4;

  --ink:#F3EFE4;
  --body:#DDE5E4;
  --muted:#9BB0B0;          /* AA on surface-2 */
  --faint:#8DA8A9;          /* AA on bg/surface */

  --border:rgba(234,229,216,.12);
  --border-strong:rgba(234,229,216,.22);
  --rule:rgba(234,229,216,.16);

  --accent:#A9C3E4;
  --accent-soft:#8FACD7;
  --accent-wash:rgba(143,172,215,.16);

  --pos:#6FC79B;  --pos-wash:rgba(111,199,155,.14);
  --neg:#EDA0A0;  --neg-wash:rgba(228,138,138,.14);   /* AA on neg-wash */
  --warn:#E4B970; --warn-wash:rgba(228,185,112,.14);
  --earth:#DBA98F;--earth-wash:rgba(212,154,126,.14); /* AA on earth-wash */
  --info:#A9C3E4; --info-wash:rgba(143,172,215,.16);

  --tab-active-ink:#F3EFE4;
  --tab-rule:#8FACD7;
  --shadow-card:0 1px 2px rgba(0,0,0,.25);
  --shadow-raise:0 10px 30px rgba(0,0,0,.35);
  --shadow-header:0 1px 0 rgba(0,0,0,.3);
}

/* ============================================================
   BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--bg);}
body{
  background:var(--bg);
  color:var(--body);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  transition:background .35s ease,color .35s ease;
}
::selection{background:var(--accent-soft);color:#16252A;}

/* Defensive: paint the themed page background at higher specificity than any
   host/reset `html,body{background:…}` so the surface follows the active theme
   in every embedding context (the attribute is always present on <html>). */
html[data-theme]{background:var(--bg);}
[data-theme] body{background:var(--bg);}

/* ── Keyboard focus (WCAG 2.4.7 / 2.4.11) ── */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* tabs: inset so the bottom rule / overflow does not clip the ring */
.m-tab:focus-visible{outline-offset:-2px;border-radius:4px;}
.m-btn:focus-visible,.m-btn-ghost:focus-visible,.m-pill:focus-visible,
.m-theme-switch button:focus-visible,.m-stat.clickable:focus-visible{outline-offset:3px;}
/* only suppress the native ring for pointer focus; keep it for keyboard */
.m-field:focus:not(:focus-visible),
.m-field-group input:focus:not(:focus-visible){outline:none;}

/* ============================================================
   EDITORIAL PAGE HEADER (per page)
   Arizona Flare wordmark · page title · eyebrow · controls
   ============================================================ */
.m-head{
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-header);
  position:sticky;top:0;z-index:120;
}
.m-head-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s5);padding:18px 28px 14px;flex-wrap:wrap;
}
.m-head-id{display:flex;align-items:baseline;gap:14px;min-width:0;}
.m-wordmark{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:var(--ls-wide);color:var(--header-ink);white-space:nowrap;
  text-transform:uppercase;
}
.m-wordmark em{color:var(--muted);font-style:normal;font-weight:400;letter-spacing:.1em;}
.m-title{
  font-family:var(--font-display);font-weight:100;
  font-size:clamp(26px,3.4vw,40px);line-height:1;letter-spacing:.01em;
  color:var(--header-ink);
}
.m-eyebrow{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);
  margin-bottom:5px;display:block;
}
.m-head-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* ── Tab bar (suite navigation lives in hub; pages have sub-tabs) ── */
.m-tabs{
  display:flex;gap:2px;padding:0 28px;background:var(--header-bg);
  border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;
}
.m-tabs::-webkit-scrollbar{display:none;}
.m-tab{
  appearance:none;background:none;border:none;cursor:pointer;
  font-family:var(--font-body);font-size:13px;font-weight:600;
  color:var(--muted);padding:13px 18px;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
  display:flex;align-items:center;gap:8px;letter-spacing:.01em;
  text-decoration:none;
}
.m-tab:hover{color:var(--ink);}
.m-tab.active{color:var(--tab-active-ink);border-bottom-color:var(--tab-rule);}
.m-tab .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

/* ============================================================
   CONTROLS
   ============================================================ */
.m-field{
  background:var(--surface);border:1px solid var(--border-strong);
  color:var(--body);font-family:var(--font-body);font-size:13px;
  padding:7px 12px;border-radius:var(--radius-inp);outline:none;
  transition:border-color .15s;
}
.m-field:focus{border-color:var(--accent);}
select.m-field{cursor:pointer;padding-right:26px;}
.m-field-group{
  display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--radius-inp);padding:3px 10px;
}
.m-field-group input{border:none;background:transparent;outline:none;color:var(--body);font-family:var(--font-mono);font-size:12.5px;cursor:pointer;}
.m-field-group .sep{color:var(--muted);font-size:12px;}

.m-btn{
  background:var(--ink);color:var(--surface);border:none;border-radius:var(--radius-btn);
  padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-body);
  transition:opacity .15s,transform .15s;display:inline-flex;align-items:center;gap:7px;
}
.m-btn:hover{opacity:.86;}
.m-btn:active{transform:translateY(1px);}
.m-btn-ghost{
  background:var(--surface);border:1px solid var(--border-strong);color:var(--muted);
  border-radius:var(--radius-btn);padding:6px 12px;font-size:12.5px;cursor:pointer;
  font-family:var(--font-body);font-weight:500;transition:all .15s;display:inline-flex;align-items:center;gap:6px;
}
.m-btn-ghost:hover{background:var(--surface-2);color:var(--ink);}

/* status dot */
.m-status{font-family:var(--font-mono);font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:5px;}
.m-status .led{width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 3px var(--pos-wash);}

/* ============================================================
   THEME SWITCH (the 2-direction toggle)
   ============================================================ */
.m-theme-switch{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px;gap:2px;}
.m-theme-switch button{
  appearance:none;border:none;background:none;cursor:pointer;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding:5px 12px;border-radius:var(--radius-pill);
  transition:all .2s;white-space:nowrap;
}
.m-theme-switch button.active{background:var(--ink);color:var(--surface);}

/* ============================================================
   LAYOUT
   ============================================================ */
.m-content{padding:24px 28px 56px;max-width:1320px;margin:0 auto;}
.m-content.wide{max-width:1600px;}
.m-content.full{max-width:none;}   /* full-bleed for table-heavy pages (uses viewport minus padding) */

.m-section-label{
  font-family:var(--font-mono);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--ls-label);color:var(--muted);margin:28px 0 12px;
  display:flex;align-items:center;gap:10px;
}
.m-section-label:first-child{margin-top:4px;}
.m-section-label .ix{color:var(--accent);font-weight:600;}
.m-section-label .rule{flex:1;height:1px;background:var(--rule);}

/* ============================================================
   CARDS
   ============================================================ */
.m-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);margin-bottom:var(--s4);overflow:hidden;
}
.m-card-pad{padding:20px;}
.m-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:15px 20px;border-bottom:1px solid var(--border);
}
.m-card-title{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:.01em;}
.m-card-note{font-size:11.5px;color:var(--muted);font-family:var(--font-mono);}

/* ── stat cards ── */
.m-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:var(--s5);}
.m-stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);
  padding:16px 18px;box-shadow:var(--shadow-card);position:relative;transition:border-color .2s,transform .2s;
}
.m-stat.clickable{cursor:pointer;}
.m-stat.clickable:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.m-stat.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.m-stat .label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:var(--ls-label);margin-bottom:8px;font-weight:600;}
.m-stat .val{font-size:23px;font-weight:700;font-family:var(--font-mono);color:var(--ink);line-height:1.1;letter-spacing:-.01em;}
.m-stat .val.pos{color:var(--pos);} .m-stat .val.neg{color:var(--neg);} .m-stat .val.warn{color:var(--warn);}
.m-stat .sub{font-size:11px;color:var(--faint);margin-top:5px;font-family:var(--font-mono);}

/* ============================================================
   TABLES (ops grade)
   ============================================================ */
.m-tbl-wrap{overflow:auto;}
.m-tbl-wrap.freeze{max-height:74vh;}
table.m-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.m-tbl thead th{
  background:var(--surface-2);color:var(--muted);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;text-align:left;
  white-space:nowrap;border-bottom:1px solid var(--border-strong);
}
.m-tbl thead th.num{text-align:right;}
.m-tbl.freeze thead th{position:sticky;top:0;z-index:6;box-shadow:inset 0 -1px 0 var(--border-strong);}
.m-tbl td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--body);}
.m-tbl tbody tr:last-child td{border-bottom:none;}
.m-tbl tbody tr:hover td{background:var(--surface-2);}
.m-tbl td.num,.m-tbl th.num{text-align:right;font-family:var(--font-mono);}
.m-tbl .mono{font-family:var(--font-mono);}
.m-tbl .strong{font-weight:700;color:var(--ink);}
.m-tbl .pos{color:var(--pos);font-weight:600;}
.m-tbl .neg{color:var(--neg);font-weight:600;}
.m-tbl .dim{color:var(--muted);}
.m-tbl .faint{color:var(--faint);font-size:11px;}

/* group / spu header rows */
.m-tbl tr.grp td{background:var(--surface-2);font-weight:700;cursor:pointer;border-top:1px solid var(--border-strong);}
.m-tbl tr.grp:hover td{background:var(--surface-3);}
.m-tbl tr.total td{background:var(--surface-2);font-weight:700;border-top:2px solid var(--border-strong);font-family:var(--font-mono);color:var(--ink);}
.m-tbl tr.grand td{background:var(--surface-3);font-weight:700;border-top:2px solid var(--border-strong);color:var(--ink);}

/* risk row washes */
.m-tbl tr.r-neg td{background:var(--neg-wash);}
.m-tbl tr.r-warn td{background:var(--warn-wash);}
.m-tbl tr.r-info td{background:var(--info-wash);}

.chev{display:inline-block;width:12px;transition:transform .18s;font-style:normal;font-size:11px;color:var(--muted);}
.chev.open{transform:rotate(90deg);}

/* ============================================================
   BADGES
   ============================================================ */
.m-badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:600;font-family:var(--font-mono);white-space:nowrap;letter-spacing:.01em;
}
.m-badge.ok{background:var(--pos-wash);color:var(--pos);}
.m-badge.info{background:var(--info-wash);color:var(--info);}
.m-badge.watch{background:var(--warn-wash);color:var(--warn);}
.m-badge.risk{background:var(--neg-wash);color:var(--neg);}
.m-badge.earth{background:var(--earth-wash);color:var(--earth);}
.m-badge.na{background:var(--surface-2);color:var(--muted);}

/* rank chips */
.m-rank{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;font-size:10px;font-weight:700;color:#fff;font-family:var(--font-mono);}
.m-rank.g1{background:var(--lace);} .m-rank.g2{background:#5E5E58;} .m-rank.g3{background:#7A5A3A;}
.m-rank.gn{background:var(--faint);color:#21373C;}

/* ── bars ── */
.m-bar{background:var(--surface-2);border-radius:4px;height:6px;width:100%;margin-top:4px;overflow:hidden;}
.m-bar > i{display:block;height:100%;border-radius:4px;background:var(--accent-soft);}
.m-bar > i.pos{background:var(--pos);} .m-bar > i.neg{background:var(--neg);} .m-bar > i.warn{background:var(--warn);}

/* ── thumbnails ── */
.m-thumb{width:42px;height:42px;border-radius:8px;border:1px solid var(--border);object-fit:contain;background:var(--surface-2);flex-shrink:0;}
.m-thumb.lg{width:56px;height:56px;}
.m-thumb-ph{
  width:42px;height:42px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);
  display:inline-flex;align-items:center;justify-content:center;color:var(--faint);font-size:18px;flex-shrink:0;
}
.m-thumb-ph.lg{width:56px;height:56px;}

/* ── legends ── */
.m-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;}
.m-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.m-legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.m-legend-val{font-family:var(--font-mono);font-weight:600;font-size:12px;color:var(--ink);}

/* ── notes ── */
.m-note{
  font-size:12px;color:var(--muted);padding:11px 16px;background:var(--surface-2);
  border-left:3px solid var(--accent-soft);border-radius:0 8px 8px 0;margin-bottom:14px;line-height:1.6;
}
.m-note strong{color:var(--ink);}

/* charts */
.m-chart-wrap{position:relative;height:218px;}

/* pills (step navigation, project page) */
.m-pills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;margin-bottom:var(--s5);}
.m-pills::-webkit-scrollbar{display:none;}
.m-pill{
  appearance:none;border:1px solid var(--border-strong);background:var(--surface);color:var(--muted);
  padding:8px 18px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:600;cursor:pointer;
  white-space:nowrap;font-family:var(--font-body);transition:all .18s;display:flex;align-items:center;gap:7px;
}
.m-pill:hover{color:var(--ink);border-color:var(--border-strong);background:var(--surface-2);}
.m-pill.active{background:var(--ink);color:var(--surface);border-color:var(--ink);}
.m-pill .pn{font-family:var(--font-mono);font-size:10px;opacity:.7;}

/* grids */
.m-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.m-grid-3{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px;}
@media(max-width:960px){.m-grid-3{grid-template-columns:1fr 1fr;}}
@media(max-width:720px){.m-grid-2,.m-grid-3{grid-template-columns:1fr;}}

/* waterfall (P&L) */
.m-wf-row{display:flex;align-items:center;gap:14px;margin-bottom:11px;}
.m-wf-label{width:150px;font-size:12px;font-weight:600;color:var(--muted);flex-shrink:0;}
.m-wf-track{flex:1;height:26px;background:var(--surface-2);border-radius:6px;overflow:hidden;}
.m-wf-fill{height:100%;border-radius:6px;min-width:2px;transition:width .5s;}
.m-wf-amt{font-family:var(--font-mono);font-size:12.5px;font-weight:600;width:118px;text-align:right;flex-shrink:0;color:var(--ink);}
.m-wf-pct{font-family:var(--font-mono);font-size:11px;color:var(--muted);width:46px;text-align:right;flex-shrink:0;}

/* summary box */
.m-summary{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-card);padding:18px 20px;}
.m-summary-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13.5px;}
.m-summary-row .l{color:var(--muted);}
.m-summary-row .v{font-family:var(--font-mono);font-weight:600;color:var(--ink);}
.m-summary-row.div{border-top:1px solid var(--border-strong);margin-top:6px;padding-top:11px;}
.m-summary-row.big{font-size:16px;font-weight:700;}
.m-summary-row.big .v{font-size:17px;}

/* zoom modal */
.m-zoom{display:none;position:fixed;inset:0;z-index:2000;background:rgba(11,18,20,.86);align-items:center;justify-content:center;cursor:zoom-out;}
.m-zoom.open{display:flex;}
.m-zoom img{max-width:90vw;max-height:90vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);}

/* utility */
.flex{display:flex;} .ai-c{align-items:center;} .jc-sb{justify-content:space-between;}
.gap-2{gap:8px;} .gap-3{gap:12px;} .wrap{flex-wrap:wrap;}
.muted{color:var(--muted);} .ink{color:var(--ink);} .mono{font-family:var(--font-mono);}
.tnum{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

@media(max-width:768px){
  .m-head-top{padding:12px 16px 10px;}
  .m-tabs{padding:0 12px;}
  .m-content{padding:16px 14px 48px;}
  .m-section-label{margin:20px 0 10px;}
}

/* ============================================================
   ════════════════════════════════════════════════════════════
   SUITE SHELL  —  login · portal hub · launcher · forms
   Extends the system to the off-brand entry pages so the whole
   suite reads as one editorial product. Both themes supported.
   ════════════════════════════════════════════════════════════
   ============================================================ */

/* ── Brand wordmark lockup (shared by suite bar + auth) ── */
.m-brand{display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap;}
.m-brand .mk{
  font-family:var(--font-display);font-weight:100;font-size:1.55em;line-height:1;
  letter-spacing:.06em;color:currentColor;
}
.m-brand .tag{
  font-family:var(--font-mono);font-size:.62em;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);align-self:center;
}

/* ============================================================
   SUITE TOP BAR  (portal / launcher header)
   ============================================================ */
.m-suitebar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:16px 28px;background:var(--header-bg);color:var(--header-ink);
  border-bottom:1px solid var(--border);box-shadow:var(--shadow-header);
  position:sticky;top:0;z-index:120;flex-wrap:wrap;
}
.m-suitebar .m-brand{color:var(--header-ink);}
.m-suite-who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.85rem;}
.m-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);
  border:1px solid var(--border);color:var(--ink);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;
  padding:6px 12px;border-radius:var(--radius-pill);white-space:nowrap;
}
.m-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--pos);flex:none;}

/* ── compact ghost link/button used in the bar ── */
.m-linkbtn{
  display:inline-flex;align-items:center;gap:6px;background:var(--surface);
  border:1px solid var(--border-strong);color:var(--muted);text-decoration:none;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;
  padding:7px 13px;border-radius:var(--radius-btn);cursor:pointer;transition:all .15s;
}
.m-linkbtn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--border-strong);}

/* ============================================================
   PORTAL  —  hero · health bar · page cards
   ============================================================ */
.m-hero{max-width:1180px;margin:0 auto;padding:34px 28px 6px;}
.m-hero h1{
  font-family:var(--font-display);font-weight:100;letter-spacing:.01em;
  font-size:clamp(30px,4vw,46px);line-height:1.04;color:var(--ink);margin:0;
}
.m-hero h1 .nm{font-style:normal;}
.m-hero p{margin:8px 0 0;color:var(--muted);font-size:14.5px;}

.m-denied{max-width:1180px;margin:14px auto 0;padding:0 28px;}
.m-denied .box{
  background:var(--neg-wash);color:var(--neg);border:1px solid var(--border);
  padding:11px 15px;border-radius:var(--radius-inp);font-size:13px;
}

/* health strip */
.m-healthbar{
  max-width:1180px;margin:18px auto 0;padding:0 28px;
}
.m-healthbar a{
  display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--body);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);padding:13px 18px;font-size:13.5px;transition:border-color .15s,transform .12s;
}
.m-healthbar a:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.m-healthbar .hb-dot{width:11px;height:11px;border-radius:50%;background:var(--faint);flex:none;box-shadow:0 0 0 3px var(--surface-2);}
.m-healthbar b{color:var(--ink);font-weight:700;letter-spacing:.01em;white-space:nowrap;}
.m-healthbar .hb-txt{color:var(--muted);font-family:var(--font-mono);font-size:12px;}
.m-healthbar .hb-more{margin-left:auto;color:var(--accent);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;}

/* suite tab bar wrapper (constrained, centered) */
.m-suite-tabs{max-width:1180px;margin:24px auto 0;padding:0 28px;display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border);}
.m-suite-tabs .m-tab{padding:11px 16px;border-radius:6px 6px 0 0;margin-bottom:-1px;}
.m-suite-tabs .m-tab .pn{font-family:var(--font-mono);font-size:10px;color:var(--faint);font-weight:600;}

.m-portal-main{max-width:1180px;margin:0 auto;padding:22px 28px 64px;}
.m-portal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px;}
.m-portal-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  text-decoration:none;color:var(--ink);cursor:pointer;
  transition:transform .12s,box-shadow .12s,border-color .12s;position:relative;overflow:hidden;
}
.m-portal-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent-soft);opacity:0;transition:opacity .12s;
}
.m-portal-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-raise);border-color:var(--border-strong);}
.m-portal-card:hover::before{opacity:1;}
.m-portal-card .pc-id{display:flex;flex-direction:column;gap:3px;min-width:0;}
.m-portal-card .pc-ix{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.m-portal-card .pc-t{font-weight:700;font-size:14.5px;letter-spacing:.01em;color:var(--ink);}
.m-portal-card .pc-arrow{color:var(--accent);font-size:1.05rem;flex:none;transition:transform .15s;}
.m-portal-card:hover .pc-arrow{transform:translateX(3px);}
.m-portal-empty{color:var(--muted);padding:30px 2px;font-size:13.5px;}

/* ============================================================
   AUTH  —  login card
   ============================================================ */
.m-auth{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--accent-wash) 0%, transparent 60%),
    var(--bg);
}
.m-auth-card{
  width:min(94vw,392px);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-card);
  padding:38px 32px 34px;box-shadow:var(--shadow-raise);
}
.m-auth-head{margin-bottom:26px;}
.m-auth-head .m-brand{color:var(--ink);margin-bottom:8px;}
.m-auth-head .m-brand .mk{font-size:2.1em;}
.m-auth-sub{color:var(--muted);font-size:13px;margin:0;line-height:1.5;}
.m-auth-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--muted);margin:18px 0 7px;}
.m-field--block{display:block;width:100%;font-size:14px;padding:11px 13px;background:var(--surface-2);}
.m-field--block::placeholder{color:var(--faint);}
.m-btn--block{width:100%;justify-content:center;margin-top:24px;padding:12px;font-size:14px;}
.m-auth-err{color:var(--neg);font-size:12.5px;margin-top:14px;min-height:1.1em;line-height:1.4;}
.m-divider{display:flex;align-items:center;gap:12px;margin:22px 0 4px;color:var(--faint);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
.m-divider::before,.m-divider::after{content:"";flex:1;height:1px;background:var(--border);}
.m-oauth{
  width:100%;margin-top:14px;padding:11px;display:flex;gap:10px;align-items:center;justify-content:center;
  text-decoration:none;border:1px solid var(--border-strong);border-radius:var(--radius-btn);
  background:var(--surface);color:var(--ink);font-weight:600;font-size:13.5px;cursor:pointer;transition:background .15s;
}
.m-oauth:hover{background:var(--surface-2);}
.m-oauth svg{width:18px;height:18px;flex:none;}
.m-oauth.hidden{display:none;}
.m-auth-foot{margin-top:24px;text-align:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}

@media(max-width:768px){
  .m-suitebar{padding:12px 16px;}
  .m-hero,.m-healthbar,.m-suite-tabs,.m-portal-main,.m-denied{padding-left:16px;padding-right:16px;}
}