/* Copied from mockup/src/part1-style.html (the approved design record); only the section at the end is new to the live page. */
/* MX1 Flight Deck mockup v3. Light-first glass dashboard in the MOSTAVIO four-colour palette (black, white, dark grey, award gold)
plus greys derived from them. State is always glyph shape + words; gold is the only accent. The shell is the scroll container
(rail, header and assistant stay put, only the canvas scrolls), the replay tick updates chart bodies in place, and the phone
layout comes from a container query so the in-page phone preview and a real phone share one layout. */
:root{
--bg:#FFFFFF; --ground-a:#F7F6F3; --ground-b:#ECEAE4; --sheet:rgba(255,255,255,.55); --panel:rgba(255,255,255,.78); --panel-solid:#FFFFFF; --panel-2:#F1EFEA;
--fg:#0A0A0A; --muted:rgba(10,10,10,.6); --faint:rgba(10,10,10,.4); --line:rgba(10,10,10,.08); --line-2:rgba(10,10,10,.16); --edge:rgba(255,255,255,.7);
--gold:#DABA6F; --gold-2:#C9A85C; --gold-dim:rgba(218,186,111,.22); --gold-glow:rgba(218,186,111,.45); --ink:#1C1C1C; --ink-fg:#FFFFFF;
--shadow:0 1px 2px rgba(10,10,10,.04), 0 18px 40px -22px rgba(10,10,10,.22); --shadow-lift:0 2px 4px rgba(10,10,10,.05), 0 28px 50px -24px rgba(10,10,10,.3);
--font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
--r:18px; --r-s:10px; --ease:cubic-bezier(.2,.7,.2,1); color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
--bg:#0A0A0A; --ground-a:#0E0E0E; --ground-b:#060606; --sheet:rgba(28,28,28,.45); --panel:rgba(28,28,28,.74); --panel-solid:#1C1C1C; --panel-2:#262626;
--fg:#FFFFFF; --muted:rgba(255,255,255,.64); --faint:rgba(255,255,255,.42); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18); --edge:rgba(255,255,255,.09);
--gold:#DABA6F; --gold-2:#E6CC8A; --gold-dim:rgba(218,186,111,.18); --gold-glow:rgba(218,186,111,.35); --ink:#F2F2F2; --ink-fg:#0A0A0A;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.8); --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 28px 50px -24px rgba(0,0,0,.9); color-scheme:dark; } }
:root[data-theme="dark"]{
--bg:#0A0A0A; --ground-a:#0E0E0E; --ground-b:#060606; --sheet:rgba(28,28,28,.45); --panel:rgba(28,28,28,.74); --panel-solid:#1C1C1C; --panel-2:#262626;
--fg:#FFFFFF; --muted:rgba(255,255,255,.64); --faint:rgba(255,255,255,.42); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18); --edge:rgba(255,255,255,.09);
--gold:#DABA6F; --gold-2:#E6CC8A; --gold-dim:rgba(218,186,111,.18); --gold-glow:rgba(218,186,111,.35); --ink:#F2F2F2; --ink-fg:#0A0A0A;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.8); --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 28px 50px -24px rgba(0,0,0,.9); color-scheme:dark; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--fg);font-family:var(--font);font-weight:400;font-size:13.5px;line-height:1.45;overflow:hidden;
background:radial-gradient(1100px 560px at 8% -12%, var(--gold-dim), transparent 62%), radial-gradient(900px 520px at 100% 0%, rgba(28,28,28,.07), transparent 60%), linear-gradient(180deg,var(--ground-a),var(--ground-b));}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button:disabled{cursor:default;opacity:.55}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
h2{font-size:14px;letter-spacing:-.005em}
h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:12px}
.faint{color:var(--faint)} .gold{color:var(--gold)}
.logo-b,.logo-w{height:16px;width:auto;display:none}
:root .logo-b{display:block}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo-b{display:none} :root:not([data-theme="light"]) .logo-w{display:block} }
:root[data-theme="dark"] .logo-b{display:none} :root[data-theme="dark"] .logo-w{display:block}
/* ---------- shell: rail | canvas | assistant, header across ---------- */
#root{height:100%;position:relative}
.frame{height:100%;padding:14px;container-type:inline-size;container-name:shell}
.shell{position:relative;height:100%;display:grid;grid-template-columns:76px minmax(0,1fr) 392px;grid-template-rows:auto auto minmax(0,1fr);
background:var(--sheet);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);border:1px solid var(--edge);border-radius:28px;box-shadow:0 40px 90px -40px rgba(10,10,10,.35), inset 0 1px 0 var(--edge);overflow:hidden}
.shell.nodock{grid-template-columns:76px minmax(0,1fr) 0}
.shell>*{min-width:0}
.top{grid-column:1/4;display:flex;align-items:center;gap:14px;padding:12px 20px;min-height:58px;border-bottom:1px solid var(--line)}
.top .brand{display:flex;align-items:center;gap:12px;white-space:nowrap}
.top .title{font-weight:600;letter-spacing:.01em}
.top .sub{color:var(--faint);font-size:12px;white-space:nowrap}
.top .grow{flex:1;min-width:0}
.strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.strip::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px 0 8px;background:var(--panel);border:1px solid var(--edge);box-shadow:0 1px 2px rgba(10,10,10,.04);border-radius:999px;font-size:12px;white-space:nowrap}
.pill b{font-weight:600}
.pill .pv{min-width:0;color:var(--muted)}
.chipbtn{height:36px;padding:0 13px;border:1px solid var(--line-2);border-radius:999px;font-size:12px;display:inline-flex;align-items:center;gap:8px;background:var(--panel);transition:border-color .2s,background .2s,transform .2s var(--ease)}
.chipbtn:hover{border-color:var(--fg)}
.chipbtn:active{transform:scale(.98)}
.chipbtn[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-dim)}
.chipbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--gold-glow)}100%{box-shadow:0 0 0 9px rgba(218,186,111,0)}}
/* the lost-link banner: a full-width band directly under the header on every view, filled while the watchdog says the link is lost */
.lost{grid-row:2;grid-column:1/4;display:flex;align-items:center;gap:12px;padding:9px 20px;background:#1C1C1C;color:#FFFFFF;border-bottom:2px solid var(--gold);font-size:12.5px;letter-spacing:.03em}
.lost:empty{padding:0;border:0;min-height:0} /* empty between losses: still in the tree (a live region has to exist before it fills to be announced reliably), no height */
.lost b{font-weight:700;letter-spacing:.08em}
.lost>span{color:rgba(255,255,255,.72)} /* the note beside the label only: the count inside keeps the label's colour */
.lost .st.fail{color:var(--gold);--gp:#1C1C1C}
.rail{grid-row:3;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0;border-right:1px solid var(--line)}
.rail button{position:relative;width:58px;height:58px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.04em;transition:background .2s,color .2s,transform .2s var(--ease)}
.rail button:hover{background:var(--panel);color:var(--fg)}
.rail button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail button[aria-selected="true"]{background:var(--ink);color:var(--ink-fg);box-shadow:0 10px 24px -10px rgba(10,10,10,.5)}
.rail .cnt{position:absolute;top:6px;right:6px;background:var(--gold);color:#0A0A0A;border-radius:999px;font-size:9.5px;padding:1px 6px;font-weight:700}
.rail .spacer{flex:1}
.main{grid-row:3;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 28px}
.view{display:grid;gap:16px;align-content:start}
.row{display:grid;gap:16px;grid-template-columns:repeat(6,minmax(0,1fr))}
.span-6{grid-column:span 6} .span-3{grid-column:span 3} .span-2{grid-column:span 2} .span-4{grid-column:span 4}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:2px 4px 0}
.hero h1{font-size:26px;font-weight:300;letter-spacing:-.01em;line-height:1.1}
.hero h1 b{font-weight:600}
.hero .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:var(--panel);border:1px solid var(--edge);font-size:11.5px;color:var(--muted);box-shadow:0 1px 2px rgba(10,10,10,.04)}
.tag.gold{background:var(--gold-dim);border-color:transparent;color:var(--fg)}
/* ---------- panels ---------- */
.panel{position:relative;min-width:0;background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--edge);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.panel:hover{box-shadow:var(--shadow-lift)}
.panel .ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.panel .ph .src{font-size:10.5px;color:var(--faint);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.panel .body{min-width:0}
.panel.ai{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-dim), var(--shadow)}
.panel.ai::before{content:"added by the assistant";position:absolute;top:-10px;left:16px;background:var(--gold);color:#0A0A0A;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.panel .close{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;color:var(--faint);display:none;align-items:center;justify-content:center;font-size:14px}
.panel.ai .close{display:flex}
.panel .close:hover{background:var(--panel-2);color:var(--fg)}
.panel.rise{animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
.panel.flash{animation:flash 1.6s var(--ease) 1}
@keyframes flash{0%{box-shadow:0 0 0 0 var(--gold-glow), var(--shadow)}40%{box-shadow:0 0 0 10px rgba(218,186,111,0), var(--shadow)}100%{box-shadow:0 0 0 4px var(--gold-dim), var(--shadow)}}
.view.enter .panel{animation:rise .45s var(--ease) both}
.view.enter .panel:nth-child(2){animation-delay:.04s}.view.enter .panel:nth-child(3){animation-delay:.08s}.view.enter .panel:nth-child(4){animation-delay:.12s}.view.enter .panel:nth-child(5){animation-delay:.16s}.view.enter .panel:nth-child(n+6){animation-delay:.2s}
/* KPI tiles */
.kpi{padding:14px 16px 12px}
.kpi .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:20px}
.kpi .v{font-size:28px;font-weight:300;line-height:1.05;margin-top:8px;display:flex;align-items:baseline;gap:6px;letter-spacing:-.01em;min-height:30px}
.kpi .v small{font-size:12px;color:var(--faint);font-weight:400}
.kpi .s{font-size:11px;color:var(--faint);margin-top:6px;min-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi svg{width:100%;height:38px;display:block;margin-top:8px}
.kpi svg path.l{fill:none;stroke:var(--fg);stroke-width:1.4}
.kpi svg path.a{fill:url(#gk);stroke:none}
.kpi svg circle{fill:var(--gold);filter:drop-shadow(0 0 4px var(--gold-glow))}
/* glyphs (custom properties travel into