/* /software/command/ page layout. Shared system in pylon.css, mockup kit in pylon-mockups.css. */
/* The prototype's dead .seat .shot rules (a prior screenshot-based seats design) are not ported. */
body{--acc:var(--indigo);--acc-txt:var(--indigo-txt)}
/* statement band */
/* the loop */
.loop-h{grid-column:1/6}
.loop-b{grid-column:7/13;align-self:end}
@media(max-width:1024px){.loop-h,.loop-b{grid-column:1/-1}.loop-b{margin-top:2rem}}
.loop{margin-top:clamp(3rem,5vw,4.5rem);align-items:start}
.loop-l{grid-column:1/5;border-top:1px solid var(--rule)}
.loop-v{grid-column:5/13;position:relative;border-top:1px solid var(--rule);border-left:1px solid var(--rule-2);margin-right:calc(-1 * (var(--px) + max(0px,(var(--vw,100vw) - var(--max)) / 2)))}
@media(max-width:1024px){.loop-l{grid-column:1/-1}.loop-v{grid-column:1/-1;border-left:0;margin-right:calc(var(--px) * -1);margin-left:calc(var(--px) * -1);margin-top:2rem}}
.step{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:baseline;gap:var(--gut);width:100%;padding:1.0625rem 0 1.0625rem .9375rem;border-bottom:1px solid var(--rule-2);text-align:left;position:relative;transition:background .35s var(--e)}
.step::before{content:'';position:absolute;left:-.875rem;top:-1px;bottom:-1px;width:2px;background:var(--acc);transform:scaleY(0);transition:transform .4s var(--e)}
.step:hover{background:linear-gradient(90deg,rgba(255,255,255,.03),transparent 60%)}
.step .no{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;color:var(--t4);transition:color .3s}
.step .nm{font-size:1.0625rem;font-weight:500;letter-spacing:-.025em;color:var(--t3);transition:color .3s}
.step .de{display:block;margin-top:.4375rem;font-size:.875rem;line-height:1.55;color:var(--t4);max-width:38ch;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--e),opacity .3s,margin .45s var(--e)}
.step[aria-selected="true"]::before{transform:scaleY(1)}
.step[aria-selected="true"] .no{color:var(--acc-txt)}
.step[aria-selected="true"] .nm{color:var(--t1)}
.step[aria-selected="true"] .de{max-height:7rem;opacity:1}
.loop-v{container-type:inline-size;background:#0c0c0f}
.loop-v .pane{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--e);pointer-events:none}
.loop-v .pane[data-on]{opacity:1}
.loop-v .ar{position:relative;padding-top:62%}

.loop-f{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap;margin-top:1.5rem;color:var(--t4)}
.loop-f .rule{flex:1;min-width:2rem;height:1px;background:var(--rule-2)}
/* seats */
.seats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--rule)}
@media(max-width:900px){.seats{grid-template-columns:1fr}}
.seat{display:flex;flex-direction:column;padding-top:1.5rem;border-top:1px solid transparent;margin-top:-1px;transition:border-color .4s var(--e)}
.seat:hover{border-top-color:var(--acc)}
.seat:hover .shot img{transform:scale(1.02);filter:none}
.seat .lbl{color:var(--t4);margin-bottom:.875rem}
.seat h3{font-size:1.25rem;font-weight:500;letter-spacing:-.03em;color:var(--t1);margin-bottom:.625rem}
.seat p{font-size:.875rem;line-height:1.6;color:var(--t3);margin-bottom:1.5rem}
.seat .lnk{align-self:flex-start;margin-top:auto}
.seat .none-note{align-self:flex-start;margin-top:auto;font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t4);padding-bottom:.375rem;border-bottom:1px solid var(--rule-2)}

/* ---- loop screen: audit readiness ---------------------------------------
   Sizes are em so the screen scales with its container, like the rest of the
   kit. Status colours do not follow --acc: the grade is the meaning. The
   category bar and the donut are measurements, so the bar stays square. */
.ard{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);border:1px solid var(--rule-2);border-radius:var(--rad-s,8px);background:linear-gradient(180deg,#17171e,#101014);box-shadow:inset 0 1px 0 rgba(255,255,255,.055);flex:none;overflow:hidden}
.ard-s{padding:.85em 1em;border-right:1px solid var(--rule-2);min-width:0;display:flex;flex-direction:column}
.ard-g{display:flex;align-items:center;gap:1em;margin:.3em 0 .65em}
.dn{width:4.8em;height:4.8em;flex:none}
.dn circle{fill:none;stroke-width:4.4}
.dn .t{stroke:rgba(255,255,255,.06)}
.dn .p{stroke:#3ec98a}.dn .a{stroke:#d99a2b}.dn .f{stroke:#e2564a}
.dn text{fill:var(--t1);font-family:var(--sans);font-size:7.6px;font-weight:600;letter-spacing:-.03em;text-anchor:middle;dominant-baseline:central}
.dn-k{display:flex;flex-direction:column;gap:.4em;flex:1;min-width:0}
.dn-k span{display:grid;grid-template-columns:1em minmax(0,1fr) auto;align-items:center;font-size:.9em;color:var(--t3)}
.dn-k i{width:.5em;height:.5em;border-radius:50%}
.dn-k i.p{background:#3ec98a}.dn-k i.a{background:#d99a2b}.dn-k i.f{background:#e2564a}
.dn-k b{font-family:var(--mono);font-weight:500;color:var(--t1)}
.ard-n{display:block;margin-top:auto;padding-top:.55em;border-top:1px solid var(--rule-3);font-style:normal;font-size:.8em;color:var(--t4)}
.ard-n b{color:var(--t2);font-weight:500}
.ard-b{padding:.85em 1em;min-width:0;display:flex;flex-direction:column}
/* a row in a list: square, divided by a bottom rule */
.blk{display:grid;grid-template-columns:2.3em minmax(0,1fr);align-items:center;gap:.8em;padding:.5em 0;border-bottom:1px solid var(--rule-3)}
.blk:last-child{border-bottom:0;padding-bottom:0}
.blk .n{height:2em;display:grid;place-items:center;font-family:var(--mono);font-size:.95em;font-weight:500;border-radius:var(--rad-xs,4px)}
.blk .n.f{color:#ff7a6b;background:rgba(226,86,74,.16)}
.blk .n.a{color:#e2a84f;background:rgba(217,154,43,.16)}
.blk .n.p{color:#4fc98a;background:rgba(62,201,138,.14)}
.blk .n svg{width:.95em;height:.95em}
.blk b{display:block;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blk i{display:block;margin-top:.15em;font-style:normal;font-size:.82em;color:var(--t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arc{flex:1;min-height:0;display:flex;flex-direction:column}
.arc-h,.arc-r{grid-template-columns:10.5em minmax(0,1fr) 7.5em}
.arc-h span:first-child{grid-column:span 2}
.arc-r{display:grid;align-items:center;gap:1em;padding:.35em 0;border-bottom:1px solid var(--rule-3);flex:1;min-height:0}
.arc-r>b{font-weight:400;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arc-r em{font-style:normal;font-family:var(--mono);font-size:.8em;color:var(--t4);text-align:right;white-space:nowrap}
.arc-r em b{color:var(--t1);font-weight:500}
.seg{display:flex;height:.34em;max-width:20em;background:rgba(255,255,255,.07)}
.seg i{display:block;height:100%}
.seg .p{background:#3ec98a}.seg .a{background:#d99a2b}.seg .f{background:#e2564a}

/* ---- loop screen: metrics ---------------------------------------------- */
.mtg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7em;flex:none}
.mt-c{border:1px solid var(--rule-2);border-radius:var(--rad-s,8px);background:linear-gradient(180deg,#17171e,#101014);box-shadow:inset 0 1px 0 rgba(255,255,255,.055);padding:.7em .8em .55em;display:flex;flex-direction:column;gap:.2em;min-width:0;overflow:hidden}
.mt-c u{text-decoration:none;font-family:var(--mono);font-size:.66em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-c b{font-size:1.7em;font-weight:500;letter-spacing:-.04em;color:var(--t1);line-height:1.05}
.mt-c b em{font-style:normal;font-size:.42em;letter-spacing:0;color:var(--t4);margin-left:.25em}
.mt-c .d{font-family:var(--mono);font-size:.7em;color:#6fdcaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spk{display:block;width:100%;height:2.2em;margin-top:.35em;overflow:visible}
.spk polyline{fill:none;stroke:var(--acc-txt,var(--indigo-txt));stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mtl{flex:1;min-height:0;display:flex;flex-direction:column}
.mtl-r{display:grid;grid-template-columns:minmax(0,1fr) 9em 4.6em 3.6em 6.4em;align-items:center;gap:1em;padding:.35em 0;border-bottom:1px solid var(--rule-3);flex:1;min-height:0}
.mtl .mk-hd.mtl-r{flex:none;padding:.5em 0;border-bottom-color:var(--rule-2)}
.mtl-r>b{font-weight:400;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtl-r>.nm{min-width:0}
.mtl-r>.nm b{display:block;font-weight:400;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a metric computed from a connector names its source, like the Connections screen */
.mtl-r .src{display:flex;align-items:center;gap:.4em;margin-top:.15em;font-style:normal;font-family:var(--mono);font-size:.7em;letter-spacing:.06em;color:var(--t4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtl-r .src img{width:1.3em;height:1.3em;object-fit:contain;flex:none}
.mtl-r .v{font-family:var(--mono);font-size:.88em;color:var(--t1);text-align:right;white-space:nowrap}
.mtl-r .tg{font-family:var(--mono);font-size:.8em;color:var(--t4);text-align:right;white-space:nowrap}

@container (max-width:540px){
/* a phone-width frame cannot hold the status panel; the header already says 62% met */
.ard{grid-template-columns:1fr}
.ard-t,.ard-s,.blk.ok,.arc-r:nth-of-type(n+4){display:none}
.blk{padding:.3em 0}
.arc-h,.arc-r{grid-template-columns:7.5em minmax(0,1fr) 5.8em}
.mtg{grid-template-columns:repeat(2,minmax(0,1fr))}
.mtg .mt-c:nth-child(n+3){display:none}
.mtl-r{grid-template-columns:minmax(0,1fr) 4.6em 6.4em}
.mtl-r>.mtr,.mtl-r>.tg,.mtl .mk-hd span:nth-child(2),.mtl .mk-hd span:nth-child(4){display:none}
}