/* App layout on top of the Pitcrew design system (ds/theme.css). Tokens only; no raw colours. */
*{margin:0;box-sizing:border-box}
html,body{height:100%}
body{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{opacity:.45;cursor:default}
input,textarea,select{font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;width:100%;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--ink-3)}
textarea{resize:vertical;min-height:44px}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--ink)}
input[type=range]{padding:0;border:0;background:none;accent-color:var(--ink)}
::selection{background:var(--surface-3)}
.hidden{display:none!important}

.app{display:grid;grid-template-rows:38px 1fr;height:100vh}
.pc-bar .l,.pc-bar .r{display:flex;align-items:center;gap:20px}
.pc-bar .r{color:var(--bar-3);gap:22px}
.pc-bar .hi{color:var(--on-bar)}
.pc-bar i.up{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--in);margin-right:7px;vertical-align:1px}
.pc-bar i.off{background:var(--bar-3)}
.pc-bar .stop{color:var(--signal)}
.shell{display:grid;grid-template-columns:236px 1fr;min-height:0}
.side{display:flex;flex-direction:column;gap:18px;padding:16px;background:var(--ground-deep);border-right:1px solid var(--line);overflow:auto}
.side nav{display:flex;flex-direction:column;gap:4px}
.pc-nav em{margin-left:auto;font:500 11px/1 var(--font-data);font-style:normal;color:var(--ink-3)}
.pc-nav em.hot{min-width:20px;height:18px;padding:0 6px;display:grid;place-items:center;border-radius:99px;background:var(--signal);color:var(--on-signal)}
.pc-nav:hover:not(.on){background:var(--surface)}
.crewlist{display:flex;flex-direction:column;gap:6px}
.crewlist .pc-tile{display:flex;align-items:center;gap:12px;height:46px;padding:0 10px}
.crewlist .pc-tile b{flex:1;font:700 14.5px/1 var(--font-display);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crewlist .pc-tile small{font:500 10px/1 var(--font-data);letter-spacing:.04em;color:var(--ink-3)}
.crewlist .pc-tile small.sig{color:var(--signal)}
.crewlist .pc-tile small.bad{color:var(--bad)}
.crewlist .pc-tile.on{box-shadow:inset 0 0 0 1.5px var(--hue)}
.side .foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
main{overflow:auto;min-width:0}
.page{max-width:1180px;margin:0 auto;padding:28px 32px 64px;display:flex;flex-direction:column;gap:24px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pc-card{padding:18px}
.pc-card.tight{padding:0;overflow:hidden}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.small{font-size:12.5px}
.big{font:800 34px/1 var(--font-display);letter-spacing:-.03em}
.sig{color:var(--signal)}
.okc{color:var(--in)}
.badc{color:var(--bad)}
.pc-lab+*{margin-top:8px}
.empty{padding:28px;text-align:center;color:var(--ink-3)}
.divider{height:1px;background:var(--line)}

/* Crew cards on the pit wall */
.crewcard{display:flex;flex-direction:column;gap:12px;padding:16px;cursor:pointer}
.crewcard:hover{border-color:var(--line-2)}
.crewcard .who{display:flex;align-items:center;gap:12px}
.crewcard .who b{font:700 17px/1.1 var(--font-display)}
.crewcard .now{font-size:13px;color:var(--ink-2);min-height:40px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crewcard .now.flex{display:flex;align-items:center;gap:8px}
.crewcard .who .pc-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.budget{display:flex;flex-direction:column;gap:2px}
.budget .spread{font:500 11px/1 var(--font-data);color:var(--ink-3)}

/* Pit stop cards */
.pit{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);box-shadow:inset 3px 0 0 var(--signal)}
.pit.done{box-shadow:none;opacity:.75}
.pit .t{font:700 15.5px/1.3 var(--font-display)}
.pit pre,.tool pre,.md pre{font:12px/1.5 var(--font-data);background:var(--surface-2);border-radius:var(--radius-sm);padding:10px 12px;white-space:pre-wrap;word-break:break-word;max-height:260px;overflow:auto;color:var(--ink-2)}
.pit .why{font:12px/1.45 var(--font-data);color:var(--ink-3)}
.pit .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Thread */
.threadpage{display:grid;grid-template-columns:minmax(0,1fr) 300px;height:100%;min-height:0}
.convo{display:grid;grid-template-rows:auto 1fr auto;min-height:0;border-right:1px solid var(--line)}
.convo header{padding:16px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.convo header .pc-h2{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stream{overflow:auto;padding:20px 24px 28px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:760px}
.msg.me{align-self:flex-end;background:var(--surface-3);border-radius:16px 16px 4px 16px;padding:10px 14px;white-space:pre-wrap;word-break:break-word}
.msg.me .att{font:11px var(--font-data);color:var(--ink-3);margin-top:6px}
.msg.bot{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.md{line-height:1.6;word-break:break-word}
.md p+p,.md ul,.md ol,.md pre,.md h3{margin-top:8px}
.md ul,.md ol{padding-left:20px}
.md code{font:12.5px var(--font-data);background:var(--surface-2);padding:1px 5px;border-radius:5px}
.md pre code{background:none;padding:0}
.md a{color:var(--data);text-decoration:underline}
.md h3{font:700 15px/1.3 var(--font-display)}
.tool{margin-left:40px;font:12px/1.4 var(--font-data);color:var(--ink-3)}
.tool summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool summary::-webkit-details-marker{display:none}
.tool summary .st{flex:none;width:7px;height:7px;border-radius:2px;background:var(--ink-3)}
.tool summary .st.ok{background:var(--in)}
.tool summary .st.bad{background:var(--bad)}
.tool pre{margin-top:6px}
.sys{align-self:center;font:500 11px/1.4 var(--font-data);letter-spacing:.03em;color:var(--ink-3);text-align:center;max-width:680px}
.sys.bad,.err{color:var(--bad)}
.err{margin-left:40px;font-size:13px}
.live{margin-left:40px;display:flex;align-items:center;gap:10px;font:12px var(--font-data);color:var(--ink-3)}
.composer{border-top:1px solid var(--line);padding:14px 24px 18px;display:flex;flex-direction:column;gap:8px}
.composer .box{display:flex;gap:10px;align-items:flex-end}
.composer textarea{min-height:48px;max-height:220px;border-radius:14px;background:var(--surface)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.panel{overflow:auto;padding:20px;display:flex;flex-direction:column;gap:18px;background:var(--ground-deep)}
.meter{height:6px;border-radius:9px;background:var(--surface-3);overflow:hidden}
.meter b{display:block;height:100%;background:var(--data);border-radius:9px}
.meter.hot b{background:var(--warn)}
.seg{display:inline-flex;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line-2);padding:3px;gap:2px}
.seg button{height:26px;padding:0 12px;border-radius:99px;font:500 12px/1 var(--font-body);color:var(--ink-2)}
.seg button.on{background:var(--btn);color:var(--on-btn)}

/* Tables */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font:500 10.5px/1 var(--font-data);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.tbl tr:first-child td{border-top:0}
.tbl .num{text-align:right;white-space:nowrap}
.scrollx{overflow-x:auto}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:500 12px/1 var(--font-body);color:var(--ink-2)}
.field .help{font-size:12px;color:var(--ink-3)}
.dial{display:grid;grid-template-columns:110px 1fr 24px;align-items:center;gap:12px;font-size:13px}
.swatches{display:flex;gap:8px}
.swatch{width:34px;height:34px;border-radius:10px;background:var(--hue);box-shadow:inset 0 0 0 1px var(--line-2)}
.swatch.on{box-shadow:0 0 0 2px var(--ground),0 0 0 4px var(--hue)}
.shapes{display:flex;gap:8px}
.shapes button{padding:6px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2)}
.shapes button.on{box-shadow:inset 0 0 0 2px var(--ink)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tabs a{padding:10px 14px;font:500 13.5px/1 var(--font-body);color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--ink);border-color:var(--ink)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--btn);color:var(--on-btn);padding:10px 16px;border-radius:99px;font-size:13px;z-index:20;max-width:90vw}
.toast.bad{background:var(--bad);color:var(--on-signal)}

/* Auth screens */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;overflow:auto}
.auth .pc-card{width:min(420px,100%);padding:28px;display:flex;flex-direction:column;gap:16px}

/* Live view */
.liveview{display:grid;grid-template-rows:auto 1fr;height:100%}
.liveview header{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.screen{display:grid;place-items:center;background:var(--ground-deep);min-height:0;overflow:hidden;padding:12px}
.screen .vnc{width:100%;height:100%}
.mini{border-radius:var(--radius-sm);overflow:hidden;background:var(--ground-deep);aspect-ratio:16/10;display:grid;place-items:center;border:1px solid var(--line)}

/* Surfaces (generative UI) */
.surface{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);margin-left:40px;max-width:900px}
.surface .head{display:flex;align-items:center;gap:10px}
.surface .head .pc-h3{flex:1}
.sf-stack{display:flex;flex-direction:column;gap:12px}
.sf-stack.row{flex-direction:row;flex-wrap:wrap}
.sf-stack.row>*{flex:1 1 180px}
.sf-grid{display:grid;gap:12px}
.sf-card{background:var(--surface-2);border-radius:var(--radius-sm);padding:14px;display:flex;flex-direction:column;gap:10px}
.sf-card.hue{background:color-mix(in srgb,var(--hue) 12%,var(--surface-2))}
.sf-stat .v{font:800 26px/1.05 var(--font-display);letter-spacing:-.02em}
.sf-stat .d{font:500 12px var(--font-data)}
.sf-bars{display:flex;flex-direction:column;gap:7px}
.sf-bar{display:grid;grid-template-columns:minmax(80px,30%) 1fr 90px;gap:10px;align-items:center;font-size:12.5px}
.sf-bar .track{height:10px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.sf-bar .track b{display:block;height:100%;background:var(--hue,var(--c1));border-radius:4px}
.sf-bar .n{font:500 12px var(--font-data);text-align:right;color:var(--ink-2)}
.sf-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.sf-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;background:var(--hue)}
.sf-choice{display:flex;flex-direction:column;gap:8px}
.sf-choice button{text-align:left;padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.sf-choice button:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.sf-form{display:flex;flex-direction:column;gap:12px}
.sf-win{color:var(--in);font-weight:600}
svg text{fill:var(--ink-3);font:10px var(--font-data)}

@media (max-width:900px){
  body{overflow:auto}
  .app{height:auto;min-height:100vh}
  .shell{grid-template-columns:1fr}
  .side{flex-direction:row;overflow-x:auto;padding:10px 16px;gap:10px;border-right:0;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
  .side nav{flex-direction:row}
  .side .pc-nav{white-space:nowrap}
  .side .crewlist,.side .pc-lab,.side .foot,.side .logo{display:none}
  .pc-bar .r .opt{display:none}
  .page{padding:20px 16px 48px}
  .grid2,.grid3{grid-template-columns:1fr}
  .threadpage{grid-template-columns:1fr;height:auto}
  .convo{border-right:0}
  .stream{max-height:none}
  .panel{border-top:1px solid var(--line)}
  .surface,.tool,.err,.live{margin-left:0}
  .sf-bar{grid-template-columns:90px 1fr 70px}
}