/* 6.0 - the Company Map.

   Near-black, one indigo, one gold, Inter at light weights, and the orb.
   The tokens below also retint every 4.0 and 5.0 screen mounted in a sheet,
   the same mechanism 5.0 uses: they are written against custom properties,
   so redefining those here restyles them without touching a line of them. */

:root{
  --ground:#07070d; --surface:#07070d; --raised:#0e0e18; --panel:#0b0b14; --panel-soft:#0b0b14cc;
  --chrome:#07070d; --hi:#161625;
  --ink:#e2e8f0; --ink78:#cbd5e1; --ink66:#94a3b8; --ink62:#94a3b8; --faint:#64748b;
  --hairline:rgba(165,180,252,.08); --border:rgba(165,180,252,.12); --border2:rgba(165,180,252,.18);
  --indigo:#818cf8; --indigo-soft:#a5b4fc; --indigo-pale:#c7d2fe;
  --done:#34d399; --gold:#E3B457; --broken:#f87171; --warnc:#fbbf24;
  --invited:#818cf8; --action:#6366f1; --action-tint:rgba(129,140,248,.14); --action-tint-hi:#1e1b4b;
  --link:#a5b4fc;
  --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  /* 4.0's names, for the sheets */
  --page:var(--ground); --side:var(--panel); --card:var(--raised); --raise:var(--hi); --over:#0e0e18;
  --sunk:#05050a; --chip:rgba(165,180,252,.08); --line:var(--hairline); --line2:rgba(165,180,252,.06);
  --edge:var(--border); --rule:var(--border2); --ink2:var(--ink78); --ink3:var(--ink66); --dim:var(--ink66);
  --mute:var(--ink66); --brand:var(--action); --brand2:var(--indigo-soft); --good:var(--done);
  --warn:var(--warnc); --bad:var(--broken); --bad-ink:#fca5a5; --bad-wash:rgba(248,113,113,.12); --sys:var(--indigo);
}
body.v6{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:13.5px;-webkit-font-smoothing:antialiased}
body.v6 button{font:inherit;color:inherit;cursor:pointer}
@keyframes cardin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes gemglow{0%,100%{box-shadow:0 0 6px var(--gold);filter:brightness(1)}50%{box-shadow:0 0 16px 3px var(--gold);filter:brightness(1.3)}}

/* ---------- header ---------- */
#h6{position:sticky;top:0;z-index:30;height:var(--h6,64px);display:flex;align-items:center;gap:22px;padding:0 28px;
  background:var(--ground);border-bottom:1px solid var(--hairline)}
.m6brand{display:flex;align-items:center;flex:none;background:none;border:0;padding:0}
.m6brand spren-orb{margin:-6px -2px -6px -8px}
.m6brand span{font-size:24px;font-weight:200;letter-spacing:.25em;color:var(--ink)}
/* The crumbs are what gives way when the header is short of room: the company
   name shrinks to an ellipsis, never the tabs or Search (SPRE-333). */
.m6crumbs{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.m6crumbs button{background:none;border:0;padding:0;color:var(--ink66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m6crumbs button:hover{color:var(--ink)}
.m6crumbs .sep,.m6crumbs .m6sw{flex:none}
.m6crumbs .sep{color:#334155}
.m6crumbs [aria-current]{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m6hr{margin-left:auto;flex:none;display:flex;align-items:center;gap:12px}
.m6tabs{display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--raised);border:1px solid var(--border)}
.m6tabs:empty{display:none}
.m6tabs button{display:flex;align-items:center;flex:none;gap:7px;font-size:13px;padding:7px 13px;border-radius:8px;border:0;background:transparent;color:var(--ink66);white-space:nowrap}
.m6tabs button[aria-selected="true"]{background:#1e1b4b;color:#fff}
.m6tabs .b{font-size:11px;font-weight:700;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:99px;display:grid;place-items:center;background:var(--gold);color:#231704}
.m6livechip{display:flex;align-items:center;gap:8px;font-size:13px;padding:2px 14px 2px 2px;border-radius:99px;border:1px solid rgba(129,140,248,.3);background:rgba(129,140,248,.06);white-space:nowrap}
.m6livechip .t{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.m6livechip:hover{background:rgba(129,140,248,.14)}
.m6ghost{display:flex;align-items:center;gap:6px;font-size:13px;padding:7px 12px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--ink66);white-space:nowrap}
.m6ghost:hover{color:var(--ink)}
.m6ghost svg{display:none}
/* Up to 1180px the live chip is just its speaking orb; its name is in the label. */
@media (max-width:1180px){
  .m6livechip{padding:2px}
  .m6livechip .t{display:none}
}
/* Under 1024px the tabs no longer fit beside the crumbs, so they take a row
   of their own that scrolls sideways. */
@media (max-width:1023px){
  body.v6:has(#tabs6:not(:empty)){--h6:104px}
  #h6{flex-wrap:wrap;align-content:center;row-gap:8px;padding:0 20px;gap:8px 16px}
  .m6hr{display:contents}
  .m6crumbs{flex:1 1 0}
  .m6tabs{order:1;flex:0 0 100%;box-sizing:border-box;overflow-x:auto;scrollbar-width:none}
  .m6tabs::-webkit-scrollbar{display:none}
  /* The scrollbar is hidden, so the row fades out on a side with more tabs past
     it; console.html sets the classes as it scrolls (SPRE-414). */
  .m6tabs.more-r{mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
  .m6tabs.more-l{mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
  .m6tabs.more-l.more-r{mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
  #h6 .m6swmenu{left:20px;max-width:calc(100vw - 40px)}
}
/* A phone: Search is its icon. */
@media (max-width:640px){
  #h6{padding:0 14px;column-gap:10px}
  .m6ghost{padding:7px 9px}
  .m6ghost svg{display:block}
  .m6ghost .t,.m6ghost .kbd{display:none}
  #h6 .m6swmenu{left:14px;max-width:calc(100vw - 28px)}
}

/* ---------- shared ---------- */
#v6{min-height:calc(100vh - var(--h6,64px))}
.m6kick{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--indigo-soft);display:flex;align-items:center;gap:10px}
.m6kick.gold{color:var(--gold)} .m6kick.mute{color:var(--faint);margin-bottom:12px}
.m6h1{font-size:36px;font-weight:200;margin:6px 0 0;line-height:1.15}
.m6h1.sm{font-size:32px}
.m6sub{font-size:13.5px;color:var(--ink66);margin:6px 0 0;line-height:1.5;max-width:720px}
.m6sub.hi{color:var(--ink78)}
.m6foot,.m6fine{font-size:12px;color:var(--faint);margin-top:18px;line-height:1.55}
.m6empty{max-width:420px;margin:80px auto;text-align:center}
.m6empty b{font-size:18px;font-weight:400}
.m6empty p{color:var(--ink66)}
.m6note{font-size:13.5px;color:var(--ink78);line-height:1.55;padding:14px 18px;border-radius:12px;background:#11111c;border:1px solid rgba(129,140,248,.25)}
.m6btn{flex:none;font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:11px;border:0;background:var(--indigo);color:#07070d}
.m6btn:hover{background:var(--indigo-soft)}
.m6btn.gold{background:var(--gold);color:#231704}
.m6btn.gold:hover{background:#EEC46E}
.m6btn.big{font-size:16px;padding:15px 34px;border-radius:13px;box-shadow:0 0 40px -8px var(--gold)}
.m6btn.ghost{background:transparent;border:1px solid var(--border2);color:var(--ink66);font-weight:400;padding:6px 12px;font-size:12.5px}
.m6link{background:none;border:0;padding:0;font-size:12.5px;color:var(--ink78);text-decoration:underline;text-underline-offset:3px}
.m6link:hover{color:#fff}
.m6legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink66)}
.m6legend span{display:flex;align-items:center;gap:7px}
.m6legend.col{flex-direction:column;gap:7px;margin:22px 10px 0}

/* The four states. Not started is dashed: a state with no colour to spare uses a shape. */
.m6dot{width:9px;height:9px;flex:none;box-sizing:border-box;border-radius:50%;display:inline-block}
.m6dot.k0{border:1.5px dashed var(--faint)}
.m6dot.k1{background:linear-gradient(90deg,var(--indigo) 50%,rgba(129,140,248,.2) 50%)}
.m6dot.k2{background:var(--indigo);box-shadow:0 0 8px rgba(129,140,248,.8)}
.m6dot.k3{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.m6gem{width:10px;height:10px;flex:none;transform:rotate(45deg);border-radius:2px;display:inline-block;
  background:linear-gradient(135deg,#FFF6DA,var(--gold),#8A5E12)}
.m6gem.waiting{animation:gemglow 1.8s ease-in-out infinite}
.m6gem.held{background:none;border:1.5px dashed var(--faint);box-sizing:border-box}
.m6segs{display:flex;gap:3px;padding-left:17px}
.m6segs i{width:14px;height:4px;border-radius:2px;background:rgba(165,180,252,.14)}
.m6segs i.on{background:var(--indigo-pale)}
.m6av{width:var(--z);height:var(--z);flex:none;box-sizing:border-box;border-radius:50%;display:inline-grid;place-items:center;
  font-size:calc(var(--z) * .36);font-weight:700}
.m6av.interviewed{color:#07070d;background:radial-gradient(circle at 50% 38%,#fff,var(--indigo-pale) 45%,var(--indigo));box-shadow:0 0 12px -2px rgba(129,140,248,.7)}
.m6av.booked{color:var(--indigo-pale);background:#1e1b4b;border:1.5px solid var(--indigo)}
.m6av.invited{color:var(--ink66);background:var(--raised);border:1.5px dashed var(--faint)}
.m6av.none{color:var(--faint);background:var(--ground);border:1.5px dashed #334155}

/* ---------- home: the org tree ---------- */
.m6home{position:relative;padding:34px 52px 40px;animation:fadein .35s ease both}
.m6co{position:relative;width:360px;margin:0 auto;padding:16px 20px;box-sizing:border-box;border-radius:14px;
  background:var(--raised);border:1px solid var(--border2);text-align:center}
.m6co b{display:block;font-size:18px;font-weight:500}
.m6co small{display:block;font-size:13px;color:var(--ink66);margin-top:4px}
.m6co::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:30px;background:rgba(165,180,252,.22)}
.m6tree{position:relative;margin-top:30px;padding-top:22px;display:grid;
  grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:20px}
.m6tree::before{content:"";position:absolute;top:0;left:calc((100% - (var(--n) - 1) * 20px) / var(--n) / 2 - 1px);right:calc((100% - (var(--n) - 1) * 20px) / var(--n) / 2 - 1px);height:2px;background:rgba(165,180,252,.22)}
/* No overflow:hidden: it clipped the drop line above each card, so the bus
   hung over nothing. The parts that fill on hover round their own corners. */
.m6dept{position:relative;display:flex;flex-direction:column;border-radius:14px;background:var(--raised);border:1px solid var(--border)}
.m6dept::before{content:"";position:absolute;left:calc(50% - 1px);top:-23px;width:2px;height:22px;background:rgba(165,180,252,.22)}
/* a second row of cards is below the first, not under the bus */
.m6tree .m6dept:nth-child(n+7)::before{display:none}
.m6dept:hover{border-color:rgba(129,140,248,.55)}
.m6dh{padding:14px 14px 12px;border-radius:13px 13px 0 0;border-bottom:1px solid var(--hairline);display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 8px}
.m6dh[role="button"]{cursor:pointer}
.m6dh[role="button"]:hover{background:var(--hi)}
.m6dh b{grid-column:1/-1;font-size:15px;font-weight:600}
.m6dh small{grid-column:1/-1;font-size:12px;color:var(--ink66)}
.m6bar{height:4px;border-radius:99px;background:rgba(165,180,252,.12);overflow:hidden;margin-top:7px}
.m6bar i{display:block;height:100%;background:var(--indigo);border-radius:99px}
.m6dh em{font-style:normal;font-size:11.5px;color:var(--ink66);margin-top:7px;font-variant-numeric:tabular-nums}
.m6procs{display:flex;flex-direction:column;padding:6px}
.m6prow{display:flex;flex-direction:column;gap:6px;padding:9px 8px;border-radius:9px;cursor:pointer}
.m6prow:hover{background:var(--hi)}
.m6pn{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.m6pn>span:not(.m6dot):not(.m6gem){flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* In the flow under the tree, not fixed over it: fixed, it sat on the cards in
   view whenever the tree was taller than the screen (SPRE-332). */
.m6next{margin-top:28px;display:flex;align-items:center;gap:24px;padding:18px 24px;
  border-radius:16px;background:var(--raised);border:1px solid rgba(129,140,248,.35);box-shadow:0 30px 60px -30px #000}
.m6next .t{flex:1;min-width:0}
.m6next .k{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--indigo-soft)}
.m6next .h{font-size:19px;margin-top:5px}
.m6next .w{font-size:13px;color:var(--ink66);margin-top:3px}

/* ---------- area: outline and main ---------- */
.m6area{display:flex;height:calc(100vh - var(--h6,64px));animation:cardin .35s ease both}
.m6outline{width:320px;flex:none;border-right:1px solid var(--hairline);padding:22px 14px;box-sizing:border-box;overflow:auto}
.m6oh{padding:0 10px}
.m6oh b{display:block;font-size:17px;font-weight:500}
.m6oh small{display:block;font-size:12.5px;color:var(--ink66);margin-top:3px}
.m6ols{display:flex;flex-direction:column;gap:2px;margin-top:18px}
.m6ol{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;border:0;background:transparent;text-align:left}
.m6ol:hover,.m6ol.on{background:var(--hi)}
.m6ol .c{font-size:10px;color:var(--faint);width:10px}
.m6ol .n{flex:1;font-size:14px;font-weight:500}
.m6ol .d{font-size:12px;color:var(--ink66);font-variant-numeric:tabular-nums}
.m6olp{display:flex;flex-direction:column;padding:2px 0 6px 30px}
.m6olp button{display:flex;align-items:center;gap:9px;padding:6px 10px;font-size:13px;border:0;border-left:1px solid rgba(165,180,252,.14);background:transparent;color:var(--ink78);text-align:left}
.m6olp button span:not(.m6dot):not(.m6gem){flex:1}
.m6olp button.on{border-left-color:var(--indigo);color:#fff;background:var(--hi);border-radius:0 8px 8px 0}
.m6main{flex:1;min-width:0;overflow:auto;padding:34px 44px;box-sizing:border-box}
.m6in{animation:cardin .3s ease both;max-width:1200px}
.m6lead{display:flex;justify-content:center;margin-top:28px}
.m6pill{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:13px;background:var(--raised);border:1px solid var(--border2)}
.m6pill[role="button"]{cursor:pointer}
.m6pill b{display:block;font-size:14px;font-weight:500}
.m6pill small{display:block;font-size:12px;color:var(--ink66)}
.m6others{display:flex;gap:4px;margin-left:10px;padding-left:12px;border-left:1px solid var(--border)}
.m6others span,[data-person][role="button"]{cursor:pointer}
.m6bus{position:relative;height:40px}
.m6bus::before{content:"";position:absolute;left:50%;top:0;width:2px;height:20px;background:rgba(165,180,252,.22)}
.m6bus::after{content:"";position:absolute;left:10%;right:10%;top:19px;height:2px;background:rgba(165,180,252,.22)}
.m6cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,290px));gap:28px;justify-content:center}
.m6card{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:14px;background:var(--raised);border:1px solid var(--border);cursor:pointer}
.m6card::before{content:"";position:absolute;left:50%;top:-21px;width:2px;height:20px;background:rgba(165,180,252,.22)}
.m6card:hover{border-color:rgba(129,140,248,.55)}
.m6ct{display:flex;align-items:center;gap:9px}
.m6ct b{flex:1;font-size:16px;font-weight:500}
.m6fb{display:flex;gap:4px}
.m6fb i{flex:1;height:5px;border-radius:3px;background:var(--indigo-pale)}
.m6fb i.miss{background:rgba(251,191,36,.25);outline:1px dashed rgba(251,191,36,.6);outline-offset:-1px}
.m6cov{font-size:13px;font-weight:600;color:var(--ink66)}
.m6cov.full{color:var(--done)} .m6cov.part{color:var(--warnc)}
.m6own{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink78)}
.m6act{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--hairline)}
.m6act span{font-size:12.5px;color:var(--ink78);line-height:1.45}
.m6act .m6btn{align-self:flex-start;font-size:12.5px;padding:8px 14px}

.m6ph{display:flex;align-items:flex-end;gap:20px}
.m6ph .l{flex:1;min-width:0}
.m6st{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink78)}
.m6facets{display:flex;gap:8px;margin-top:16px;max-width:620px}
.m6facets div{flex:1;display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--ink78)}
.m6facets i{height:5px;border-radius:3px;background:var(--indigo-pale)}
.m6facets .miss{color:var(--warnc);font-weight:600}
.m6facets .miss i{background:rgba(251,191,36,.25);outline:1px dashed rgba(251,191,36,.6);outline-offset:-1px}
.m6chain{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px}
.m6step{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;min-width:0;text-align:left;
  background:var(--raised);border:1px solid var(--border)}
.m6step::before{content:"";position:absolute;left:50%;top:-21px;width:2px;height:20px;background:rgba(165,180,252,.22)}
/* The step bus spans the first column's centre to the last's: (width less the gaps) / --n / 2 in from each end,
   less the 2px drop line on the right so the last corner closes.
   Steps past six wrap to a row the bus cannot reach, so they hang from nothing. */
.m6bus.chain::after{left:calc((100% - (var(--n) - 1) * 14px) / var(--n) / 2);right:calc((100% - (var(--n) - 1) * 14px) / var(--n) / 2 - 2px)}
.m6chain .m6step:nth-child(n+7)::before{display:none}
.m6step:hover{border-color:rgba(129,140,248,.6)}
.m6step.on{background:var(--hi);border-color:var(--indigo)}
.m6step .num{font-size:11px;font-weight:700;color:var(--faint)}
/* A step box is a title. A record compiled before synthesis wrote short names
   carries a whole sentence here, so the box holds two lines and the panel the rest. */
.m6step b{font-size:13.5px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.m6sel{margin-top:18px;padding:16px 20px;border-radius:14px;background:var(--raised);border:1px solid var(--border)}
.m6sel .h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.m6sel .h .num{font-size:11px;font-weight:700;color:var(--faint)}
.m6sel .h b{font-size:16px;font-weight:500}
.m6detail{font-size:13.5px;line-height:1.5;color:var(--ink78);margin:10px 0 0}
.m6desc{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:8px 0 0;font-size:12.5px;line-height:1.5}
.m6desc dt{color:var(--faint);font-weight:600}
.m6desc dd{margin:0;color:var(--ink78)}
.m6cls{font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;white-space:nowrap;border:1px solid}
.m6cls.now{color:var(--gold);background:rgba(227,180,87,.14)} .m6cls.review{color:#c4b5fd;background:rgba(196,181,253,.12)}
.m6cls.assist{color:var(--indigo-soft);background:rgba(129,140,248,.12)} .m6cls.keep{color:var(--ink66);background:rgba(148,163,184,.1)}
.m6k{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:14px}
.m6k.lo{letter-spacing:0;text-transform:none;font-weight:400;margin-top:0}
.m6grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) repeat(3,minmax(0,.6fr));gap:14px;margin-top:10px}
.m6grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.m6grid .m6k{margin-top:0}
.m6grid .v{font-size:12.5px;margin-top:3px;line-height:1.4}
.m6grid .v.bad{color:#fca5a5}
.m6grid .n{font-size:14px;font-weight:600;margin-top:2px}
.m6grid .n.ok{color:var(--done)}
.m6why{font-size:12.5px;line-height:1.5;color:var(--ink78);margin:12px 0 0}
.m6unsure{margin-top:10px;padding:8px 11px;border-radius:9px;border:1px dashed rgba(251,191,36,.5);background:rgba(251,191,36,.07);font-size:12.5px;color:#fde68a;line-height:1.45}
.m6pubox{display:flex;align-items:center;gap:16px;margin-top:18px;padding:14px 16px;border-radius:14px;
  background:linear-gradient(120deg,rgba(227,180,87,.12),var(--raised) 60%);border:1px solid rgba(227,180,87,.5)}
.m6pubox.held{background:var(--raised);border-color:var(--border)}
.m6pubox .m6gem{width:22px;height:22px}
.m6pubox .t{flex:1;min-width:0}
.m6pubox b{display:block;font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:500}
.m6pubox small{display:block;font-size:12.5px;color:var(--ink66);margin-top:2px}
/* A phone: the outline beside the page left it about 130px, so under 640px the
   outline is a dropdown over the page, the page takes the full width and
   scrolls with the window, and the steps, facets and figures stack (SPRE-414). */
.m6pick{display:none}
@media (max-width:640px){
  .m6area{display:block;height:auto}
  .m6outline{display:none}
  .m6pick{display:block;box-sizing:border-box;width:calc(100% - 32px);margin:16px 16px 0;padding:10px 12px;border-radius:10px;
    border:1px solid var(--border2);background:var(--raised);color:var(--ink);font:inherit;font-size:14px}
  .m6main{overflow:visible;padding:20px 16px 36px}
  .m6h1{font-size:28px;overflow-wrap:anywhere}
  .m6ph{flex-wrap:wrap;align-items:flex-start;gap:14px}
  .m6ph .l{flex:1 0 100%}
  .m6facets{flex-wrap:wrap;row-gap:10px}
  .m6facets div{flex:1 0 28%}
  .m6cards{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:20px}
  .m6bus,.m6card::before,.m6step::before{display:none}
  .m6chain{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:20px}
  .m6sel{padding:14px}
  .m6desc{grid-template-columns:minmax(0,1fr);gap:2px}
  .m6desc dd{margin-bottom:8px}
  .m6grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .m6grid.two{grid-template-columns:minmax(0,1fr)}
}

/* ---------- tabs ---------- */
.m6page{padding:30px 56px 48px;animation:cardin .35s ease both}
.m6wrap{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:30px}
.m6wrap.wide{max-width:1320px;gap:22px}
.m6wrap.mounted{gap:0}
.m6top{display:flex;align-items:flex-end;gap:24px}
.m6top>div{flex:1}
.m6hero{display:flex;align-items:center;gap:44px;padding:30px 40px;border-radius:20px;
  background:radial-gradient(60% 140% at 10% 50%,rgba(227,180,87,.16),var(--raised) 62%);border:1px solid rgba(227,180,87,.45);box-shadow:0 40px 80px -50px rgba(227,180,87,.6)}
.m6hero .o{width:210px;height:210px;flex:none;margin:-20px 0}
.m6hero .t{flex:1;min-width:0}
.m6hero .n{font-size:34px;font-weight:300;margin-top:6px}
.m6hero .l{font-size:14px;color:var(--ink78);margin-top:8px}
.m6hero .f,.m6pu .f,.m6dlg .f{font-size:13px;color:var(--ink66);margin-top:4px;font-family:ui-monospace,Menlo,monospace}
.m6coll{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.m6pu{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:16px;cursor:pointer;
  background:linear-gradient(160deg,rgba(227,180,87,.1),var(--raised) 50%);border:1px solid rgba(227,180,87,.32);transition:border-color .15s}
.m6pu:hover{border-color:rgba(227,180,87,.7)}
.m6pu .r{display:flex;align-items:center;gap:16px}
.m6pu .r spren-orb{margin:-8px}
.m6pu .n{flex:1;min-width:0}
.m6pu .n b{display:block;font-size:17px;font-weight:500}
.m6pu .n small{display:block;font-size:12.5px;color:var(--ink66);margin-top:2px}
.m6pu .tag,.m6dlg .tag{font-size:11.5px;font-weight:700;color:#F3D08A;padding:3px 10px;border-radius:99px;border:1px solid rgba(227,180,87,.45)}
.m6pu .m{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink66)}
.m6pu .m .sep{color:#334155}
.m6pu .m b{margin-left:auto;color:#F3D08A;font-weight:600}
.m6held{display:flex;flex-direction:column}
.m6held .r{display:flex;align-items:center;gap:16px;padding:14px 6px;border-top:1px solid var(--hairline)}
.m6held .r spren-orb{margin:-6px 0}
.m6held b{width:220px;font-size:14.5px;font-weight:500}
.m6held small{width:140px;font-size:12.5px;color:var(--ink66)}
.m6held .why{flex:1;font-size:13px;color:var(--warnc)}

.m6scrim,.m6drawer{position:fixed;inset:var(--h6,64px) 0 0;z-index:25;background:rgba(5,5,9,.7);backdrop-filter:blur(4px)}
.m6scrim{display:grid;place-items:center;padding:30px}
.m6dlg{width:min(860px,100%);max-height:calc(100vh - 124px);display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:var(--raised);border:1px solid rgba(227,180,87,.45);box-shadow:0 50px 100px -40px #000;animation:cardin .25s ease both}
.m6dlg .h{display:flex;align-items:flex-start;gap:14px;padding:20px 24px 16px;border-bottom:1px solid var(--hairline)}
.m6dlg .h .t{flex:1;min-width:0}
.m6dlg .h small{font-size:12px;color:var(--ink66)}
.m6dlg .h b{display:block;font-size:24px;font-weight:300;margin-top:4px}
.m6dlg .b{flex:1;min-height:0;overflow:auto;padding:18px 24px}
.m6dlg pre{margin:0;padding:18px 20px;border-radius:12px;background:#05050a;border:1px solid rgba(227,180,87,.22);
  font:13.5px/1.7 ui-monospace,Menlo,monospace;white-space:pre-wrap;color:var(--ink)}
.m6dlg .a{display:flex;align-items:center;gap:14px;padding:14px 24px 18px;border-top:1px solid var(--hairline);font-size:12.5px;color:var(--ink66)}
.m6dlg .a .m6link{margin-left:auto}
.m6setup{margin-top:14px;padding:14px 16px;border-radius:12px;border:1px dashed rgba(227,180,87,.4);background:rgba(227,180,87,.04)}
.m6setup .m6kick{margin-bottom:4px}
.m6setup .m6fine{margin:0 0 4px}
.m6setup .r{display:grid;grid-template-columns:110px 1fr;gap:10px;margin-top:8px;font-size:12.5px;line-height:1.45}
.m6setup .r b{color:var(--gold);font-weight:600}
.m6setup .r span,.m6setup ul{color:var(--ink78)}
.m6setup ul{margin:0;padding-left:16px}

.m6msg{display:flex;align-items:center;gap:28px;padding:20px 24px;border-radius:16px;
  background:linear-gradient(100deg,rgba(129,140,248,.12),var(--raised) 55%);border:1px solid rgba(129,140,248,.4)}
.m6msg .t{flex:1;min-width:0}
.m6msg p{font-size:16px;font-weight:300;line-height:1.55;margin:8px 0 0}
.m6cr{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:24px;align-items:start}
.m6crg{display:grid;grid-template-columns:150px repeat(var(--cols),minmax(0,1fr));gap:6px;align-items:center}
.m6crg .th{font-size:11.5px;font-weight:600;line-height:1.3;padding:6px 4px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--ink66);align-self:end}
.m6crg .th.on{color:#fff;border-color:rgba(129,140,248,.45);background:#1e1b4b}
.m6crg .dn b{display:block;font-size:13.5px;font-weight:500}
.m6crg .dn small{display:block;font-size:11.5px;color:var(--faint);margin-top:1px}
.m6crg .cell{height:40px;border-radius:9px;border:1px solid rgba(165,180,252,.08);background:rgba(165,180,252,.04);font-size:13px;font-weight:600;color:#07070d}
.m6crg .cell.questions{background:rgba(129,140,248,.7)} .m6crg .cell.concern{background:rgba(251,191,36,.75)}
.m6crg .cell.serious{background:rgba(239,68,68,.8);color:#fff}
.m6crg .cell.on{box-shadow:0 0 0 2px #fff}
.m6crg .none{height:40px;box-sizing:border-box;border-radius:9px;border:1px dashed #334155;display:flex;align-items:center;padding:0 14px;font-size:12.5px;color:var(--faint)}
.lvd{width:10px;height:10px;border-radius:3px;display:inline-block}
.lvd.welcome{background:var(--done)} .lvd.questions{background:var(--indigo)} .lvd.concern{background:var(--warnc)} .lvd.serious{background:#ef4444}
.m6side{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:16px;background:var(--raised);border:1px solid var(--border)}
.m6side small{font-size:12px;color:var(--ink66)}
.m6side .h{display:flex;align-items:center;gap:12px}
.m6side .h b{font-size:21px;font-weight:400}
.m6side .lv{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:2px 8px;border-radius:99px}
.m6side .lv.serious{color:#fca5a5;background:rgba(239,68,68,.15)} .m6side .lv.concern{color:#fde68a;background:rgba(251,191,36,.14)}
.m6side .lv.questions{color:var(--indigo-soft);background:rgba(129,140,248,.14)}
.m6side blockquote{margin:0;font-size:14px;font-weight:300;line-height:1.5;padding:12px 14px;border-radius:11px;background:var(--hi)}
.m6side .an{color:var(--faint)}
.m6side .k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.m6side .k.ok{color:var(--done)} .m6side .k.bad{color:var(--broken)}
.m6side p{font-size:13px;line-height:1.5;margin:0;color:var(--ink78)}

.m6wrap.live{display:grid;grid-template-columns:380px minmax(0,1fr);gap:48px;align-items:start}
.m6lo,.m6live{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.m6live{max-width:520px;margin:40px auto}
.m6lo .m6btn,.m6live .m6btn{margin-top:14px}
.m6cover{display:flex;flex-direction:column;gap:4px}
.m6cover div{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--raised);border:1px solid var(--border)}
.m6cover i{width:9px;height:9px;border-radius:50%;border:1.5px dashed var(--faint);box-sizing:border-box}
.m6cover .on i{border:0;background:var(--indigo);box-shadow:0 0 8px rgba(129,140,248,.8)}
.m6cover span{flex:1;font-size:14px}
.m6cover em{font-style:normal;font-size:12px;color:var(--faint)}
.m6cover .on em{color:var(--indigo-pale)}

.m6drawer .m6dr{position:absolute;right:0;top:0;bottom:0;width:460px;box-sizing:border-box;overflow:auto;display:flex;flex-direction:column;gap:14px;
  padding:26px;background:var(--panel);border-left:1px solid var(--border);box-shadow:-40px 0 80px -30px #000}
.m6dr .h{display:flex;align-items:center;gap:16px}
.m6dr .h .t{flex:1;min-width:0}
.m6dr .h b{display:block;font-size:24px;font-weight:300}
.m6dr .h small{display:block;font-size:13px;color:var(--ink66);margin-top:3px}
.m6dr>.m6btn{align-self:flex-start}
.m6dr .m6kick{margin-top:10px}
.m6prc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;background:var(--raised);border:1px solid var(--border);text-align:left}
.m6prc:hover{border-color:rgba(129,140,248,.5)}
.m6prc b{display:block;font-size:14px;font-weight:500}
.m6prc small{display:block;font-size:12px;color:var(--faint);margin-top:2px}

.m6table{display:flex;flex-direction:column}
.m6table .hd,.m6table .rw{display:grid;grid-template-columns:1.1fr 2fr .7fr;gap:16px;align-items:center;text-align:left}
.m6table .hd{padding:0 4px 10px;font-size:11.5px;font-weight:600;color:var(--faint)}
.m6table .rw{padding:14px 4px;border:0;border-top:1px solid var(--hairline);background:transparent}
.m6table .rw:hover{background:var(--hi)}
.m6table .rw b{font-size:14px;font-weight:500}
.m6table .rw span{font-size:13px;color:var(--ink66)}
.m6table .tag{justify-self:start;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap}
.tag.ok{color:var(--done);background:rgba(52,211,153,.1)} .tag.bad{color:var(--broken);background:rgba(248,113,113,.1)}
.tag.info{color:var(--indigo-soft);background:rgba(165,180,252,.1)} .tag.mute{color:var(--ink66);background:rgba(148,163,184,.08)}

/* Sheets and mounted screens: same chrome, new ground. */
body.v6 .scrim{background:rgba(5,5,9,.72)}
body.v6 .sheet{background:var(--raised);border-color:var(--border2)}

@media (max-width:1180px){
  .m6tree{grid-template-columns:repeat(3,minmax(0,1fr))}
  .m6tree::before,.m6dept::before{display:none}
  .m6cr,.m6wrap.live{grid-template-columns:1fr}
  .m6outline{width:260px}
  .m6next .m6legend{display:none}
}
@media (max-width:640px){
  .m6home{padding:24px 16px 32px}
  .m6co{width:100%}
  .m6tree{grid-template-columns:minmax(0,1fr)}
  .m6next{flex-wrap:wrap;gap:14px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* More than one row of cards: the bus cannot reach the second row, so neither draws. */
.m6bus.many::after,.m6cards.many .m6card::before{display:none}
.m6bus.many{height:24px}
.m6ol .c{font-size:11px}

/* Home department cards: what is next, what it has earned, and the way in. */
.m6dept{min-height:260px}
.m6dnext{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-bottom:1px solid var(--hairline)}
.m6dnext[role="button"]{cursor:pointer}
.m6dnext[role="button"]:hover{background:var(--hi)}
.m6dnext .k{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--indigo-soft)}
.m6dnext.m6dnone{border-bottom:0}
.m6dnext.m6dnone .k{color:var(--faint)}
.m6dnext .t{font-size:13px;line-height:1.4;color:var(--ink)}
.m6dpus{display:flex;flex-direction:column;gap:2px;padding:8px 6px;min-height:40px}
.m6dpu{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:9px;cursor:pointer}
.m6dpu:hover{background:var(--hi)}
.m6dpu span{flex:1;font-size:13px;color:#F3D08A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m6dpus .none{padding:6px 8px;font-size:12.5px;color:var(--faint)}
.m6dall{margin-top:auto;padding:10px 14px;border:0;border-radius:0 0 13px 13px;border-top:1px solid var(--hairline);background:transparent;
  text-align:left;font-size:12.5px;color:var(--ink66)}
button.m6dall:hover{color:var(--ink);background:var(--hi)}

/* The company switcher: a caret on the first crumb, and a list under it. */
#h6{position:sticky}
.m6sw{margin-left:-2px;width:22px;height:22px;display:inline-grid;place-items:center;padding:0;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--ink66);font-size:11px;line-height:1}
.m6sw:hover,.m6sw[aria-expanded="true"]{color:var(--ink);border-color:var(--border2);background:var(--raised)}
.m6swmenu{position:absolute;left:170px;top:56px;z-index:40;width:380px;max-height:70vh;display:flex;flex-direction:column;
  border-radius:14px;background:var(--raised);border:1px solid var(--border2);box-shadow:0 30px 60px -20px #000;overflow:hidden}
.m6swmenu input{margin:10px;padding:10px 12px;border-radius:10px;border:1px solid rgba(129,140,248,.4);background:var(--ground);color:var(--ink);font:inherit;font-size:14px;outline:none}
.m6swmenu .list{overflow:auto;padding:0 6px 6px}
.m6swmenu [role="option"]{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:transparent;text-align:left}
.m6swmenu [role="option"]:hover,.m6swmenu [aria-selected="true"]{background:var(--hi)}
.m6swmenu .sq{width:26px;height:26px;flex:none;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:700;background:#1e1b4b;color:var(--indigo-pale)}
.m6swmenu .t{min-width:0}
.m6swmenu b{display:block;font-size:13.5px;font-weight:500}
.m6swmenu small{display:block;font-size:12px;color:var(--ink66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m6swmenu .all{padding:11px 16px;border:0;border-top:1px solid var(--hairline);background:transparent;text-align:left;font-size:13px;color:var(--indigo-soft)}
.m6swmenu .all:hover{background:var(--hi)}

/* What testers hit */
.m6ti .m6top{gap:10px;margin-bottom:18px}
.m6tlist{display:flex;flex-direction:column;gap:9px;padding-top:10px}
.m6tiss{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:var(--raised);border:1px solid var(--border)}
.m6tiss.done{opacity:.55}
.m6tiss .t{flex:1;min-width:0}
.m6tiss .h{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.m6tiss small{font-size:12px;color:var(--ink66)}
.m6tiss p{font-size:14px;line-height:1.55;margin:6px 0}
.m6tiss blockquote{margin:0;padding:8px 12px;border-left:2px solid var(--border2);font-size:13px;color:var(--ink78)}
.m6tiss blockquote small{display:block;margin-top:4px}
/* the switcher is hidden with the attribute, and its own rule above sets display */
.m6swmenu[hidden]{display:none}

/* What testers hit: the test company against all of SPARK, one chip per process */
.m6spark{display:flex;flex-direction:column;gap:14px;margin:14px 0 6px}
.m6spark .dm{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start}
.m6spark .dm b{font-size:13px;font-weight:600}
.m6spark .dm b small{display:block;color:var(--ink66);font-size:11.5px;font-weight:400;margin-top:3px}
.m6spark .cells{display:flex;flex-wrap:wrap;gap:6px}
.m6spark .c,.m6legend .c{display:inline-block;font-size:11px;font-variant-numeric:tabular-nums;padding:4px 7px;border-radius:6px;border:1px solid var(--border2);color:var(--ink66);line-height:1.1;cursor:default}
.m6spark .c i{font-style:normal;margin-left:5px;opacity:.8}
.m6spark .c.unscripted,.m6legend .c.unscripted{border-style:dashed}
.m6spark .c.partial,.m6legend .c.partial{color:var(--gold);border-color:rgba(227,180,87,.5);background:rgba(227,180,87,.08)}
.m6spark .c.covered,.m6legend .c.covered{color:var(--done);border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.1)}
.m6legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:11.5px;color:var(--ink66);margin-top:10px}
@media (max-width:640px){.m6spark .dm{grid-template-columns:1fr;gap:8px}}

/* People and access: one card per person, their customers as ticks */
.m6access .m6acc{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-top:10px;background:var(--raised)}
.m6access .m6acc.off{opacity:.6}
.m6access .m6acc .fields{display:grid;grid-template-columns:1fr 1.4fr auto;gap:10px}
.m6access .m6acc input:not([type=checkbox]),.m6access .m6acc select{padding:8px 10px;border-radius:8px;border:1px solid var(--border2);background:var(--sunk);color:var(--ink);font:inherit;font-size:13px}
.m6access .m6acc .says{margin-top:8px}
.m6access .m6chks{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:13px;color:var(--ink78)}
.m6access .m6chks label{display:flex;align-items:center;gap:6px;cursor:pointer}
.m6access .m6acc .acts{display:flex;flex-direction:row;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.m6access .m6acc .acts .m6btn{width:auto;flex:none}
@media (max-width:640px){.m6access .m6acc .fields{grid-template-columns:1fr}}

/* One customer's account (SPRE-324): three sections and the owner's fold */
.m6account section{padding-bottom:26px;margin-bottom:22px;border-bottom:1px solid var(--hairline)}
.m6account .m6form{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.m6account .m6form .f{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--ink66)}
.m6account input,.m6account select{padding:8px 10px;border-radius:8px;border:1px solid var(--border2);background:var(--sunk);color:var(--ink);font:inherit;font-size:13px;min-width:0}
.m6account input:disabled,.m6account select:disabled{opacity:.6}
.m6account .acts{display:flex;flex-direction:row;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.m6account .m6btn:not(.ghost){color:#07070d}
.m6account .m6btn:disabled{opacity:.5;cursor:default}
.m6account .m6seg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--ink66)}
.m6account .m6set .m6seg{margin-top:0;justify-content:flex-end}
.m6account .m6status{font-size:15px;font-weight:500;color:var(--ink);margin:14px 0 0}
.m6account .m6link{width:100%;margin-top:6px}
.m6account .tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.m6account .tag{font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap}
.m6account .m6inv{margin-top:16px}
.m6account .m6inv .rw{grid-template-columns:.8fr 2fr auto}
.m6account .m6tiers{margin-top:12px}
.m6account .m6tiers .rw{grid-template-columns:1fr 2fr;padding:12px 16px}
.m6account .m6tiers .rw.mine{background:var(--hi)}
.m6account .m6fold{border:1px solid var(--border);border-radius:12px;margin-top:10px;background:var(--raised)}
.m6account .m6fold.owner{margin-top:0;border-color:rgba(227,180,87,.35)}
.m6account .m6fold summary{display:flex;align-items:baseline;gap:14px;padding:13px 16px;cursor:pointer;list-style:none}
.m6account .m6fold summary::-webkit-details-marker{display:none}
.m6account .m6fold summary::before{content:'\25b8';color:var(--ink66);flex:none}
.m6account .m6fold[open] summary::before{content:'\25be'}
.m6account .m6fold summary b{font-size:14px;font-weight:600;flex:none}
.m6account .m6fold summary span{font-size:12.5px;color:var(--ink66);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m6account .m6fold[open] summary span{white-space:normal}
.m6account .m6set{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;border-top:1px solid var(--hairline)}
.m6account .m6set b{font-size:13.5px;font-weight:500}
.m6account .m6set .m6sub{margin-top:3px;font-size:12.5px}
.m6account .sw{width:38px;height:22px;flex:none;border-radius:99px;border:1px solid rgba(242,241,250,.22);background:rgba(242,241,250,.08);position:relative;cursor:pointer}
.m6account .sw i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ink62);transition:left .18s ease,background .18s ease}
.m6account .sw.on{background:rgba(79,209,165,.28);border-color:rgba(79,209,165,.5)}
.m6account .sw.on i{left:18px;background:var(--done)}
.m6account .sw:disabled{opacity:.5;cursor:default}
@media (max-width:640px){.m6account .m6form{grid-template-columns:1fr}.m6account .m6set{flex-direction:column;align-items:flex-start}}