/* ---------------------------------------------------------------------------
   Your portal: the specimen instrument.

   Loaded only by /portal, so the other pages stay as light as the weight
   instrument on /work says they are. Everything here sits inside the site's
   token system; the only new material is the portal chrome itself, which is
   drawn the way the real one is: a rail of rooms, a pane, a status bar. Same
   panel grammar as the wire diagram and the register, because on this site a
   box is something you can operate, and every control in here works.
   --------------------------------------------------------------------------- */

/* clip, not hidden: a hidden box can still be scrolled sideways by the
   browser when something inside it takes focus, and a panel of rooms that
   can be nudged off its own edge is not a panel. Clip cannot scroll. */
.portal{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:clip;margin-top:34px;
}
.portal-head{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 18px;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  background:rgba(255,255,255,.02);position:relative;
}
/* the gradient hairline the real portal wears under its header */
.portal-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--green),var(--lime) 40%,var(--line) 75%,transparent);
}
.portal-head .ph-r{color:var(--lime);display:inline-flex;align-items:center;gap:8px}
.ph-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:phBreath 2.6s ease-in-out infinite}
@keyframes phBreath{50%{opacity:.35}}

.portal-body{display:grid;grid-template-columns:208px minmax(0,1fr);min-height:540px}
/* every grid item may shrink below its content: the tab strip on a phone
   is wider than the phone and scrolls, and must not size the column */
.portal-rail,.portal-panes,.pane,.portal-tabs{min-width:0}

/* ---- the rail ---- */
.portal-rail{
  background:var(--ink-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 12px 14px;
}
.portal-co{display:flex;align-items:center;gap:11px;padding:2px 8px 18px;border-bottom:1px solid var(--line-soft)}
.portal-logo{
  width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.02em;color:var(--text);
  background:linear-gradient(150deg,var(--panel-2),var(--panel));border:1px solid var(--line);
}
.portal-coname{font-size:.9rem;font-weight:600;line-height:1.2;color:var(--text)}
.portal-coname small{
  display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:400;
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px;
}
.portal-tabs{display:flex;flex-direction:column;gap:2px;padding-top:14px}
.portal-tabs [role=tab]{
  position:relative;display:flex;align-items:center;gap:8px;
  background:none;border:0;border-radius:8px;cursor:pointer;text-align:left;
  font-family:'Archivo',sans-serif;font-size:.9rem;font-weight:500;color:var(--text-2);
  padding:9px 12px 9px 16px;transition:color .18s,background .18s;
}
.portal-tabs [role=tab]::before{
  content:"";position:absolute;left:4px;top:9px;bottom:9px;width:2px;border-radius:2px;
  background:var(--lime);opacity:0;transform:scaleY(.4);transition:opacity .2s,transform .25s cubic-bezier(.2,.7,.3,1);
}
.portal-tabs [role=tab]:hover{color:var(--text);background:rgba(255,255,255,.03)}
.portal-tabs [role=tab][aria-selected=true]{color:var(--text);background:var(--lime-dim)}
.portal-tabs [role=tab][aria-selected=true]::before{opacity:1;transform:none}
.portal-tabs [role=tab]:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.tab-n{
  margin-left:auto;font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.62rem;
  min-width:18px;height:18px;padding:0 5px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(232,163,61,.16);color:#E8A33D;border:1px solid rgba(232,163,61,.4);
}
.tab-n:empty{display:none}
.portal-pow{margin-top:auto;padding:16px 8px 0;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---- the panes ---- */
.portal-panes{
  position:relative;
  background:
    radial-gradient(120% 80% at 70% 0%,rgba(74,157,51,.07),transparent 60%),
    linear-gradient(to right, rgba(140,198,63,.02) 1px, transparent 1px) 0 0/44px 44px,
    var(--ink);
}
.pane{padding:26px 28px 24px;display:none}
.pane.on{display:block;animation:paneIn .38s cubic-bezier(.2,.7,.3,1) both}
@keyframes paneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pane-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.pane-head h3{font-size:1.16rem;letter-spacing:-.015em;max-width:30ch}
.pane-stamp{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pane-stamp b{font-weight:400;color:var(--lime)}
.pane-toggle{
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:99px;cursor:pointer;
  padding:6px 12px 6px 30px;position:relative;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  transition:color .2s,border-color .2s;
}
.pane-toggle::before{
  content:"";position:absolute;left:10px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;
  border:1px solid var(--muted);transition:background .2s,border-color .2s;
}
.pane-toggle[aria-pressed=true]{color:var(--lime);border-color:rgba(140,198,63,.4)}
.pane-toggle[aria-pressed=true]::before{background:var(--lime);border-color:var(--lime)}
.pane-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.pane-note{font-size:.64rem;letter-spacing:.06em;color:var(--muted);line-height:1.6;flex:1;min-width:220px;transition:color .3s}
.pane-note.on{color:var(--lime)}

/* status chips: brand green for live, muted for done, amber for waiting on you */
.pchip{
  display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:99px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--text-2);background:var(--panel-2);white-space:nowrap;transition:color .3s,border-color .3s;
}
.pchip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted)}
.pchip[data-s=active]{color:var(--lime);border-color:rgba(140,198,63,.35)}
.pchip[data-s=active]::before{background:var(--lime)}
.pchip[data-s=done]{color:var(--text-2)}
.pchip[data-s=done]::before{background:var(--green)}
.pchip[data-s=proposal]{color:#E8A33D;border-color:rgba(232,163,61,.4)}
.pchip[data-s=proposal]::before{background:#E8A33D}
.pchip[data-s=new]{color:var(--text);border-color:rgba(140,198,63,.5)}
.pchip[data-s=new]::before{background:var(--lime);animation:phBreath 1.2s ease-in-out infinite}

/* ---- home ---- */
.pp-list{display:grid;gap:12px}
.pp{border:1px solid var(--line-soft);border-radius:10px;padding:14px 16px 13px;background:rgba(255,255,255,.015);transition:border-color .3s}
.pp:hover{border-color:var(--line)}
.pp-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pp-name{font-weight:600;font-size:.96rem;color:var(--text)}
.pp-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft);margin-top:12px;overflow:hidden}
.pp-bar i{
  display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--emerald),var(--lime));
  transition:width 1.1s cubic-bezier(.2,.7,.3,1);
}
.pane.on .pp-bar i{width:var(--w)}
.pp-meta{font-size:.62rem;letter-spacing:.08em;color:var(--muted);margin-top:9px;text-transform:uppercase}
.pp-link{
  background:none;border:0;padding:0;cursor:pointer;color:var(--lime);
  font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:underline;text-underline-offset:3px;
}
.pp-feed{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft)}
.pp-feed h4,.fin h4,.bm-lane h4{
  font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
.pp-feed ul{list-style:none;display:grid;gap:7px}
.pp-feed li{display:flex;gap:14px;font-size:.88rem;color:var(--text-2);line-height:1.5}
.pp-feed li .mono{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);padding-top:5px;flex:0 0 32px}

/* ---- your stack ---- */
.stk{border-top:1px solid var(--line)}
.stk-cat{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:14px 0 6px}
.stk-row{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:11px 10px;margin:0 -10px;border-radius:8px;border-bottom:1px solid var(--line-soft);
  cursor:default;transition:background .2s,opacity .3s;outline:none;
}
.stk-row:hover,.stk-row:focus-visible{background:rgba(255,255,255,.03)}
.stk-row:focus-visible{box-shadow:inset 0 0 0 1px var(--green)}
.stk-name{font-size:.92rem;font-weight:500;color:var(--text)}
.stk-name small{
  display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:400;
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px;
}
.stk-url{font-size:.74rem;color:var(--muted)}
.stk-tag{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;
}
.stk-tag[data-o=built]{color:var(--lime);border-color:rgba(140,198,63,.35);background:var(--lime-dim)}
/* built-by-Leapfrog keyline, the way the real map wears it */
.stk-row[data-origin=built]{box-shadow:inset 2px 0 0 rgba(140,198,63,.55)}
.stk.only .stk-row[data-origin=kept]{opacity:.28}
.stk-with{margin-top:18px;font-size:.62rem;letter-spacing:.1em;color:var(--text-2)}
.stk-with span{color:var(--muted);text-transform:uppercase;margin-right:10px}

/* ---- build map ---- */
.bm-ctl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;margin-bottom:20px}
.bm-ctl label{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bm-ctl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0}
.bm-ctl input[type=range]:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:6px}
.bm-ctl input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line);border-radius:2px}
.bm-ctl input[type=range]::-moz-range-track{height:2px;background:var(--line);border-radius:2px}
.bm-ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;margin-top:-7px;
  background:var(--ink);border:2px solid var(--lime);box-shadow:0 0 0 4px rgba(140,198,63,.14);
}
.bm-ctl input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid var(--lime);box-shadow:0 0 0 4px rgba(140,198,63,.14)}
.bm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bm-lane{border-top:1px solid var(--line);padding-top:12px;min-height:240px}
.bm-lane[data-lane=built] h4{color:var(--lime)}
.bm-lane[data-lane=flight] h4{color:var(--text-2)}
.bm-cards{display:grid;gap:8px;align-content:start}
.bm-card{
  border:1px solid var(--line-soft);border-radius:8px;padding:10px 12px;
  font-size:.84rem;font-weight:500;color:var(--text);background:rgba(255,255,255,.015);
  position:relative;
}
.bm-card small{display:block;font-weight:400;font-size:.74rem;color:var(--muted);margin-top:3px;line-height:1.4}
.bm-lane[data-lane=built] .bm-card{box-shadow:inset 2px 0 0 var(--lime)}
.bm-lane[data-lane=flight] .bm-card{box-shadow:inset 2px 0 0 var(--green)}
.bm-lane[data-lane=flight] .bm-card::after{
  content:"";position:absolute;right:10px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--lime);
  animation:phBreath 1.6s ease-in-out infinite;
}
.bm-lane[data-lane=confirmed] .bm-card{box-shadow:inset 2px 0 0 var(--line)}
.bm-lane[data-lane=talk] .bm-card{opacity:.62;border-style:dashed}
.bm-card.moved{animation:bmLand .5s cubic-bezier(.2,.7,.3,1)}
@keyframes bmLand{from{background:var(--lime-dim)}to{background:rgba(255,255,255,.015)}}

/* ---- the build map in three dimensions (js/buildmap-gl.js) ----
   The floor extends past the box and fades, so the scene sits in the pane
   rather than in a frame. Labels are HTML, projected onto the block tops. */
.bm3{position:relative;aspect-ratio:16/7;margin:0 -8px 18px;overflow:hidden;border-radius:10px;
  background:radial-gradient(70% 90% at 50% 100%,rgba(74,157,51,.10),transparent 70%)}
.bm3-cv{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.bm3-cv:active{cursor:grabbing}
.bm3-labels{position:absolute;inset:0;pointer-events:none}
.bm3-label{
  position:absolute;left:0;top:0;white-space:nowrap;
  font-family:'Archivo',sans-serif;font-size:.72rem;font-weight:600;color:var(--text);
  padding:2px 7px;border-radius:5px;background:rgba(10,14,19,.55);border:1px solid rgba(255,255,255,.06);
  opacity:0;transition:opacity .3s;
}
.bm3-label[data-lane=built]{color:var(--lime);border-color:rgba(140,198,63,.25)}
.bm3-label[data-lane=flight]{color:var(--text)}
.bm3-label[data-lane=confirmed]{color:var(--text-2)}
.bm3-label[data-lane=talk]{color:var(--muted);font-weight:500}
.bm3-note{position:absolute;right:12px;bottom:10px;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.bm3[hidden]{display:none}
@media(max-width:760px){.bm3{display:none}}

/* ---- health ---- */
.hc-list{border-top:1px solid var(--line)}
.hc{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
}
.hc-name{font-size:.9rem;font-weight:500;color:var(--text);display:flex;align-items:center;gap:12px}
.hc-name::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--lime);transition:background .3s,opacity .3s;
}
.hc-name small{
  display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:400;
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:2px;
}
.hc-name small{display:block}
.hc-name > small{margin-left:0}
.hc .hc-val{font-size:.72rem;color:var(--text-2);text-align:right;white-space:nowrap;transition:color .3s}
.hc.probe .hc-name::before{background:var(--muted);animation:phBreath .6s ease-in-out infinite}
.hc.probe .hc-val{color:var(--muted)}
.hc.fresh .hc-val{color:var(--lime)}
.hc.blank .hc-name::before{background:var(--line);opacity:.8}
.hc.blank .hc-val{color:var(--line)}
@media(max-width:560px){
  .hc{flex-direction:column;align-items:flex-start;gap:6px}
  .hc .hc-val{text-align:left;padding-left:20px}
}

/* ---- finance ---- */
.fin{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0 36px}
.fin-col + .fin-col{border-left:1px solid var(--line-soft);padding-left:36px}
.qv{display:grid;grid-template-columns:minmax(90px,.4fr) 1fr auto;gap:14px;align-items:center;padding:9px 0;border-top:1px solid var(--line-soft)}
.qv-name{font-size:.88rem;color:var(--text);font-weight:500}
.qv-bars{position:relative;height:14px}
.qv-bars i{position:absolute;left:0;top:0;height:100%;border-radius:3px;width:0;transition:width .9s cubic-bezier(.2,.7,.3,1)}
.qv-q{background:rgba(255,255,255,.06);border:1px solid var(--line)}
.qv-d{background:linear-gradient(90deg,var(--emerald),var(--green));top:3px !important;height:8px !important;left:1px !important}
.qv-d.over{background:linear-gradient(90deg,var(--green),#E8A33D)}
.pane.on .qv-q{width:var(--q)}
.pane.on .qv-d{width:var(--d)}
.qv-val{font-size:.72rem;color:var(--text-2);text-align:right;white-space:nowrap}
.qv-val small{display:block;font-size:.58rem;letter-spacing:.06em;color:#E8A33D;margin-top:2px;white-space:nowrap}
.fin-note{font-size:.82rem;color:var(--muted);margin-top:14px;line-height:1.55;max-width:44ch}
.sub{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line-soft)}
.sub-name{font-size:.88rem;color:var(--text);font-weight:500}
.sub-name small{
  display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:400;
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:2px;
}
.sub-when{font-size:.7rem;color:var(--text-2);white-space:nowrap;padding-top:3px}
.tick{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:16px;align-items:baseline}
.tick-n{font-size:2.3rem;color:var(--lime);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.tick-l{font-size:.88rem;color:var(--text);font-weight:500;line-height:1.35}
.tick-l small{display:block;font-weight:400;font-size:.76rem;color:var(--muted);margin-top:4px;max-width:30ch}
@media(max-width:820px){
  .fin{grid-template-columns:1fr;gap:26px 0}
  .fin-col + .fin-col{border-left:0;padding-left:0;border-top:1px solid var(--line-soft);padding-top:22px}
}

/* ---- leapsign ---- */
.ls-docs{border-top:1px solid var(--line)}
.ls-doc{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:12px 10px;margin:0 -10px;border-bottom:1px solid var(--line-soft);border-radius:8px;transition:background .3s;
}
.ls-doc.hot{background:rgba(232,163,61,.05)}
.ls-doc.hot.signed{background:var(--lime-dim)}
.ls-name{font-size:.92rem;font-weight:500;color:var(--text)}
.ls-name small{
  display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:400;
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px;
}
.ls-state{font-size:.68rem;letter-spacing:.06em;color:#E8A33D;white-space:nowrap;transition:color .3s}
.ls-state.done{color:var(--lime)}
.ls-steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:24px;position:relative}
.ls-steps::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line)}
.ls-steps li{
  position:relative;padding-top:18px;font-size:.74rem;color:var(--muted);transition:color .3s;
}
.ls-steps li::before{
  content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;
  background:var(--ink);border:2px solid var(--line);transition:border-color .3s,background .3s;
}
.ls-steps li.on{color:var(--text)}
.ls-steps li.on::before{border-color:var(--lime);background:var(--lime)}
.ls-steps li.now::before{animation:phBreath .8s ease-in-out infinite}
.ls-log{
  margin-top:18px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:8px;background:rgba(0,0,0,.25);
  font-size:.66rem;line-height:1.85;letter-spacing:.04em;color:var(--muted);white-space:pre-wrap;min-height:64px;
}
.ls-log .ok{color:var(--lime)}
.ls-log .em{color:var(--text-2)}
@media(max-width:560px){
  .ls-steps{grid-template-columns:repeat(5,1fr)}
  .ls-steps li{font-size:.6rem;padding-right:4px}
}

/* ---- ask leapfrog ---- */
.ask-thread{display:grid;gap:12px}
.ask-req{border:1px solid var(--line-soft);border-radius:10px;padding:14px 16px;background:rgba(255,255,255,.015)}
.ask-req.fresh{animation:bmLand .9s cubic-bezier(.2,.7,.3,1)}
.ask-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.ask-who{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.ask-rep .ask-who{color:var(--text-2)}
.ask-req p{font-size:.9rem;color:var(--text);line-height:1.55}
.ask-sys{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:10px 0;padding-left:12px;border-left:1px solid var(--line)}
.ask-rep{padding:10px 12px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line-soft)}
.ask-rep p{color:var(--text-2);margin-top:4px}
.ask-rep .typing{color:var(--muted)}
.ask-form{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft)}
.ask-form > label{display:block;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ask-quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ask-q{
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:99px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-size:.78rem;color:var(--text-2);padding:6px 12px;transition:border-color .2s,color .2s;
}
.ask-q:hover{border-color:var(--green);color:var(--text)}
.ask-form textarea{
  width:100%;font-family:'Archivo',sans-serif;font-size:.92rem;color:var(--text);line-height:1.55;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 13px;resize:vertical;min-height:64px;
  transition:border-color .2s;
}
.ask-form textarea:focus{outline:none;border-color:var(--green)}
.ask-form .pane-act{margin-top:12px;padding-top:0;border-top:0}

/* ---- the status bar ---- */
.portal-bar{display:flex;align-items:center;gap:16px;padding:16px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.portal-msg{margin:0;flex:1;min-width:240px;font-size:.86rem;line-height:1.55;color:var(--muted);transition:color .3s}
.portal-msg.on{color:var(--lime)}

/* ---- the rooms index links back into the instrument ---- */
a.ix{text-decoration:none;color:inherit;display:grid}
a.ix:hover h3{color:var(--lime)}
a.ix:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:6px}
a.ix h3{transition:color .2s}

/* ---- phone ----
   The rail becomes a strip of rooms across the top, scrolling sideways, and
   the panes take the full width. */
@media(max-width:760px){
  .portal-body{grid-template-columns:minmax(0,1fr);min-height:0}
  .portal-rail{border-right:0;border-bottom:1px solid var(--line);padding:14px 12px 0}
  .portal-co{padding-bottom:12px;border-bottom:0}
  .portal-tabs{
    flex-direction:row;gap:4px;padding:4px 0 0;overflow-x:auto;scrollbar-width:none;
    margin:0 -12px;padding-left:12px;padding-right:12px;
  }
  .portal-tabs::-webkit-scrollbar{display:none}
  .portal-tabs [role=tab]{white-space:nowrap;padding:9px 12px;border-radius:8px 8px 0 0;flex:0 0 auto}
  .portal-tabs [role=tab]::before{left:10px;right:10px;top:auto;bottom:0;width:auto;height:2px;transform:scaleX(.4)}
  .portal-tabs [role=tab][aria-selected=true]{background:transparent}
  .portal-pow{display:none}
  .pane{padding:20px 18px 18px}
  .bm{grid-template-columns:1fr 1fr}
  .bm-lane{min-height:0}
  .bm-ctl{grid-template-columns:1fr;gap:10px}
  .bm-ctl input{width:100%}
  .bm-ctl .btn{justify-self:start}
  .qv{grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:6px 12px}
  .qv-bars{grid-column:1 / -1;grid-row:2}
  .qv-val{text-align:left}
  .sub{flex-direction:column;gap:4px}
  .tick{flex-direction:column;gap:6px}
  .ls-doc{flex-direction:column;align-items:flex-start;gap:6px}
  .ls-state{white-space:normal}
  .pane-head h3{font-size:1.06rem}
  .stk-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .stk-url{grid-column:1 / -1;order:3}
}
@media(max-width:420px){.bm{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .ph-dot,.pchip[data-s=new]::before,.bm-lane[data-lane=flight] .bm-card::after,.hc.probe .hc-name::before,.ls-steps li.now::before{animation:none}
  .pane.on{animation:none}
  .pp-bar i,.qv-bars i{transition:none}
  .bm-card.moved,.ask-req.fresh{animation:none}
}