/* MasterMind shell — tokens and rules copied from the live app (mastermind.masterpeacebyhcs.com, 24 Oct 2026).
   Do not restyle these: MasterTrace must look like a native MasterMind page.
   Module-specific styles live in trace.css and only use these tokens. */
:root{
  --accent:#3EA7C2;--accent-deep:#22758E;--accent-deeper:#1B6076;--accent-edge:#9ECFDD;--accent-ink:#22758E;
  --accent-rgb:46,143,169;--accent-soft:#E3F2F7;
  --bad:#B3543F;--bad-soft:rgba(179,84,63,.07);
  --bg:#ECEEF1;--bg-2:#ECEEF1;
  --body:'Nunito Sans','Segoe UI',system-ui,sans-serif;
  --display:'Poppins','Bahnschrift','Arial Narrow',sans-serif;
  --mono:'JetBrains Mono',Consolas,'SF Mono',monospace;
  --edge:#C4CBD2;--edge-soft:#DDE2E7;--edge-strong:#AEB7BF;
  --faint:#66757D;--muted:#54646B;--ink:#1C2428;--on-dark:#fff;
  --gold-edge:#DCBE83;--gold-soft:#FBF4E6;
  --good:#2E8A57;--good-deep:#1F6B45;
  --panel:#ffffff;--panel-2:#F4F6F8;
  --purple:#6D4FB8;--r:14px;
  --rail:#14211f;--rail-edge:rgba(255,255,255,.13);--rail-ink:#b7c4c3;
  --sales:#B8632F;--shade:23,88,110;--surface-3:#E9F4F8;--surface-4:#F6FAFC;
  --warn:#B27B24;--warn-deep:#7C651F;
}
*{box-sizing:border-box}
html,body{background:var(--bg);margin:0}
body{font-family:var(--body);color:var(--ink);min-height:100vh;padding:0 0 48px;display:flex;align-items:stretch}
.wrap{position:relative;z-index:1;flex:1 1 0%;min-width:0;max-width:none;margin:0 auto;padding:0 36px}
@media (max-width:900px){.wrap{padding:0 14px}}
@media (max-width:700px){.wrap{padding:0 18px}}

header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:26px 0 18px;border-bottom:1px solid var(--edge);flex-wrap:wrap}
header .brand{display:flex;align-items:center;gap:12px}
header .brand img{width:52px;height:52px;border-radius:50%}
.wordmark{font-family:var(--display);font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:.16em;line-height:1}
.wordmark .gem{color:var(--accent)}
.tagline{font-family:var(--display);font-size:12px;letter-spacing:.34em;color:var(--muted);margin-top:7px;text-transform:uppercase}
.hud{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bell{position:relative;font-size:20px;cursor:pointer;user-select:none;padding:6px 10px;border:1px solid var(--edge);border-radius:var(--r);background:var(--panel);display:inline-flex;align-items:center}
.bell svg{width:18px;height:18px}
.bell.ringing{border-color:rgba(192,90,75,.5)}
.bell .badge{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;border-radius:999px;background:var(--bad);color:var(--on-dark);font:700 11px/20px var(--body);text-align:center;padding:0 5px}
.acctbtn{display:flex;align-items:center;gap:10px;background:var(--panel);color:var(--ink);border:1px solid var(--edge);border-radius:10px;padding:5px 12px 5px 6px;cursor:pointer;text-transform:none;letter-spacing:0;font-family:var(--body)}
.acctbtn:hover{background:var(--panel-2);border-color:var(--edge)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);border:1px solid rgba(var(--accent-rgb),.4);font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.05em;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;flex:0 0 auto}
.acctxt{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.2}
.acctxt b{font:600 12.5px var(--body);color:var(--ink)}
.acctxt span{font:10.5px var(--body);color:var(--faint)}
.acctbtn .caret{font-size:9px;color:var(--faint)}

.eyebrow{font-family:var(--display);font-size:13px;letter-spacing:.3em;color:var(--faint);text-transform:uppercase;margin:26px 0 12px;display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";height:1px;flex:1 1 0%;background:var(--edge-soft)}

/* The shelf (left rail) */
.side{position:sticky;top:0;z-index:5;align-self:flex-start;height:100vh;min-height:100vh;width:252px;flex:0 0 auto;display:flex;flex-direction:column;padding:20px 12px calc(48px + env(safe-area-inset-bottom,0px));background:var(--rail);box-shadow:0 -100vh 0 0 var(--rail),0 100vh 0 0 var(--rail);border-right:1px solid var(--rail);transition:width .18s;overflow:hidden auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.side.min{width:64px;padding:20px 8px}
.sideToggle{align-self:flex-end;width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:14px;color:var(--rail-ink);background:transparent;border:1px solid var(--rail-edge);border-radius:8px;cursor:pointer;margin-bottom:10px}
.sideToggle:hover{border-color:rgba(255,255,255,.34);color:var(--on-dark);background:rgba(255,255,255,.07)}
.side.min .sideToggle{align-self:center}
.tabs{display:flex;flex-direction:column;gap:3px;min-height:0;flex:1 1 0%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;padding-right:2px}
.navgrp{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.34);margin:14px 0 6px 12px}
.navgrp:first-child{margin-top:4px}
.side.min .navgrp{visibility:hidden;height:6px;margin:6px 0}
.tab{position:relative;font-family:var(--display);letter-spacing:.01em;font-size:12.5px;font-weight:600;text-transform:none;display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 12px;border:1px solid transparent;border-radius:9px;color:var(--rail-ink);cursor:pointer;background:transparent;transition:.15s;white-space:nowrap}
.tab .ic{width:20px;flex:0 0 auto;text-align:center;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.tab .ic svg{width:17px;height:17px;stroke-width:2}
.tab .lb{overflow:hidden;text-overflow:ellipsis}
.tab:hover{border-color:transparent;color:var(--on-dark);background:rgba(255,255,255,.09)}
.tab.on{color:var(--on-dark);border-color:transparent;background:rgba(255,255,255,.16)}
.side.min .tab{justify-content:center;padding:11px 0;gap:0}
.side.min .tab .lb{display:none}
.bdndot{position:absolute;top:6px;right:8px;min-width:16px;height:16px;border-radius:999px;background:var(--bad);color:var(--on-dark);font:700 9.5px/1 var(--display);display:flex;align-items:center;justify-content:center;padding:1px 4px 0;text-align:center;box-sizing:border-box}
@media (max-width:900px){
  .side{width:64px;padding:20px 8px}
  .side .tab{justify-content:center;padding:11px 0;gap:0}
  .side .tab .lb{display:none}
  .side .navgrp{visibility:hidden;height:6px;margin:6px 0}
  .sideToggle{display:none}
}
@media (max-width:900px) and (pointer:coarse){.side .tab{min-height:46px}}

/* Buttons, pills, chips (MasterMind) */
button{font-family:var(--display);letter-spacing:.02em;font-size:13px;font-weight:600;text-transform:none;background:var(--accent);color:var(--on-dark);border:1px solid var(--accent);border-radius:999px;padding:11px 18px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
button:where(:hover){background:var(--accent-deep);border-color:var(--accent-deep)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.ghost{background:var(--panel);color:var(--ink);border-color:var(--edge)}
button.ghost:hover{background:var(--panel-2);border-color:var(--edge-strong)}
button.danger{background:var(--bad);border-color:var(--bad)}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:11px;letter-spacing:.18em;padding:7px 13px;border:1px solid var(--edge);border-radius:999px;color:var(--muted);background:var(--panel)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good)}
.pill.sim{color:var(--warn);border-color:rgba(168,118,31,.35)}
.pill.sim .dot{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.chip{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.06em;padding:3px 9px;border-radius:999px;border:1px solid}
.chip.ok{color:var(--good);border-color:rgba(47,143,91,.4)}
.chip.fx{color:var(--accent);border-color:rgba(var(--accent-rgb),.4)}
.chip.fl{color:var(--bad);border-color:rgba(192,90,75,.45)}
.chip.st{color:var(--warn);border-color:rgba(168,118,31,.45)}

/* Dashboard cards (MasterMind .md-*) */
.md-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:22px 0 14px;flex-wrap:wrap}
.md-greet{font:700 24px/1.2 var(--display);letter-spacing:-.01em;margin:0}
.md-date{font:600 13px var(--body);color:var(--muted);margin-top:3px}
@media (max-width:900px){.md-greet{font-size:20px}}
.md-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:18px}
.md-card{display:flex;align-items:center;gap:13px;text-align:left;background:var(--panel);border:1px solid var(--edge-soft);border-radius:14px;padding:15px 17px;cursor:pointer;color:var(--ink);text-transform:none;letter-spacing:0;font-family:var(--body);box-shadow:0 1px 2px rgba(var(--shade),.06),0 8px 20px rgba(var(--shade),.07);transition:transform .15s,box-shadow .15s,border-color .15s}
.md-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 2px 4px rgba(var(--shade),.08),0 14px 30px rgba(var(--shade),.12);background:var(--panel)}
.md-card .md-n{font:800 22px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--accent-deep);flex:0 0 auto;min-width:34px}
.md-card.hot .md-n{color:var(--bad)}
.md-card .md-l{font:700 13.5px var(--body);line-height:1.35;flex:1 1 0%;min-width:0}
.md-card .md-l small{display:block;font:600 11.5px var(--body);color:var(--faint);margin-top:2px}
.md-card>svg{width:19px;height:19px;color:var(--faint);flex:0 0 auto}
.md-card.hot>svg{color:var(--bad)}
@media (max-width:900px) and (pointer:coarse){.md-card{min-height:74px;padding:13px 14px}}

/* Window panes (MasterMind .fwin) */
.fwin{background:var(--panel);border:1px solid var(--edge-soft);border-radius:12px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(var(--shade),.06),0 12px 28px rgba(var(--shade),.09);min-width:0}
.fwin-bar{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--edge-soft);background:var(--panel-2);border-radius:12px 12px 0 0}
.fwin-title{font-family:var(--display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fwin-sp{margin-left:auto}
.fwin-x{cursor:pointer;font-family:var(--display);letter-spacing:.1em;font-size:10.5px;text-transform:uppercase;color:var(--ink);background:var(--panel);border:1px solid var(--edge);border-radius:8px;padding:8px 13px;white-space:nowrap}
.fwin-x:hover{background:var(--panel-2);border-color:var(--edge)}
.fwin-alert{color:var(--warn-deep)!important;background:rgba(168,118,31,.09)!important;border-color:rgba(168,118,31,.45)!important}
.fwin-body{flex:1 1 0%;display:flex;flex-direction:column;min-height:0;padding:12px 16px 14px;min-width:0}

/* Tables (MasterMind) */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
th{background:var(--panel-2);color:var(--muted);font:700 12.5px var(--body);letter-spacing:.5px;padding:10px 12px;text-align:left;white-space:nowrap}
th:first-child{border-radius:8px 0 0 0}th:last-child{border-radius:0 8px 0 0}
td{padding:10px 12px;border-bottom:1px solid var(--edge-soft);vertical-align:top}
.rk{font-family:var(--display);font-weight:800;color:var(--faint);width:34px}
input,select,textarea{font:600 13px var(--body);color:var(--ink);background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:9px 12px}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(var(--accent-rgb),.35);border-color:var(--accent)}
.foot{text-align:center;font:600 11px var(--body);color:var(--faint);margin-top:28px;padding-top:14px;border-top:1px solid var(--edge-soft)}