/* mechane console: phone first (Pixel, Chrome); works in a desktop browser too. */
:root {
  --bg: #0f1216; --panel: #171b21; --line: #2a313b; --fg: #e9edf2; --muted: #8e9aab;
  --accent: #4c8dff; --ok: #3fb950; --warn: #d29922; --bad: #f85149; --stop: #e5322d;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); min-height: 100%; }
body { padding-bottom: env(safe-area-inset-bottom); }
h1 { font-size: 1.4rem; margin: 0 0 .5rem; }
h2 { font-size: .85rem; margin: 1rem 0 .4rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
p { margin: .4rem 0; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
button { font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .9rem; min-height: 44px; cursor: pointer; }
button:active { filter: brightness(1.25); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { background: #3a1d1d; border-color: var(--bad); }
button.small { min-height: 36px; padding: .3rem .7rem; font-size: .9rem; }
button.link { background: none; border: none; color: var(--muted); text-decoration: underline; padding: 0; min-height: 0; font-size: inherit; }
input[type=text], input[type=password] { font: inherit; color: var(--fg); background: #0b0e12; border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; min-height: 44px; width: 100%; }
label { display: block; margin: .6rem 0; }
label.chk { display: inline-flex; align-items: center; gap: .3rem; margin: 0 .4rem 0 0; white-space: nowrap; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0; }
.row input[type=text], .row input[type=password] { flex: 1 1 10rem; width: auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .8rem; margin: .6rem 0; }
.msg { min-height: 1.4em; color: var(--warn); }

/* login */
.screen { max-width: 32rem; margin: 2rem auto; padding: 0 1rem; }

/* header */
header { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; padding-top: calc(.5rem + env(safe-area-inset-top)); background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.hdr-left { flex: 1 1 auto; min-width: 0; }
.hdr-title { font-weight: 700; }
.hdr-sub { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-sub.bad { color: var(--bad); white-space: normal; }
.goal { font-size: .8rem; background: #1d2a1f; border: 1px solid var(--ok); border-radius: 8px; padding: .25rem .5rem; max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.stop { background: var(--stop); border-color: var(--stop); color: #fff; font-weight: 800; letter-spacing: .05em; min-width: 5rem; min-height: 48px; }
button.stop.done { background: #4a1512; border-color: #4a1512; color: #f3b9b6; }

nav#tabs { display: flex; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: calc(3.6rem + env(safe-area-inset-top)); z-index: 4; }
nav#tabs button { flex: 1; border: none; border-radius: 0; border-bottom: 3px solid transparent; background: none; padding: .5rem .2rem; font-size: .9rem; }
nav#tabs button.on { border-bottom-color: var(--accent); color: #fff; }
nav#tabs button.flash { color: var(--warn); }
.badge { background: var(--bad); color: #fff; border-radius: 999px; padding: 0 .4em; font-size: .75rem; margin-left: .2em; }
.conn { background: #3a2a10; color: #ffd27a; padding: .3rem .8rem; font-size: .85rem; }

main { padding: .6rem .8rem 1rem; max-width: 60rem; margin: 0 auto; }

/* live */
.live-box { position: relative; background: #000; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.live-box img { display: block; width: 100%; height: auto; min-height: 8rem; touch-action: manipulation; }
.live-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); background: rgba(0,0,0,.5); pointer-events: none; }
.live-bar { display: flex; gap: .5rem; align-items: center; padding: .3rem .5rem; background: var(--panel); font-size: .85rem; }
.live-bar span { flex: 1; }
.live-box.armed img { cursor: crosshair; outline: 2px solid var(--accent); outline-offset: -2px; }
.tap { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid var(--accent); border-radius: 50%; pointer-events: none; animation: tap .6s ease-out forwards; }
@keyframes tap { to { transform: scale(2.2); opacity: 0; } }

.agent { display: flex; gap: .6rem; align-items: flex-start; }
.agent img { width: 40%; max-width: 16rem; border-radius: 6px; border: 1px solid var(--line); }
.agent-text { flex: 1; font-size: .9rem; }
.agent-text .k { color: var(--muted); display: inline-block; min-width: 7.5rem; }

/* take over */
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .4rem; margin: .6rem 0; }
button.key { padding: .4rem .3rem; font-size: .9rem; }
details { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .4rem .8rem; margin: .6rem 0; }
summary { cursor: pointer; color: var(--muted); }
.log { font-size: .85rem; font-family: ui-monospace, Consolas, monospace; white-space: pre-wrap; color: var(--muted); max-height: 12rem; overflow: auto; }
.log .ok { color: var(--ok); } .log .bad { color: var(--bad); } .log .warn { color: var(--warn); }

/* approvals */
.approval.pending { border-color: var(--warn); }
.approval.approved { border-color: var(--ok); }
.approval.denied, .approval.expired { opacity: .6; }
.ap-kind { font-weight: 700; text-transform: uppercase; font-size: .8rem; color: var(--warn); }
.ap-question { font-size: 1.05rem; }
.ap-shot { width: 100%; border-radius: 6px; border: 1px solid var(--line); }
.ap-buttons button { flex: 1; min-height: 52px; font-size: 1.05rem; }
.approval.hot { box-shadow: 0 0 0 3px var(--accent); }

/* the ask sheet: a pending approval over every tab (app.js, renderAsk) */
.ask { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #241d0c; border-top: 4px solid var(--warn); padding: .6rem .9rem calc(.8rem + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .7); max-height: 72vh; overflow: auto; animation: ask-in .25s ease-out, ask-glow 1.2s ease-in-out 3; }
.ask-head { display: flex; gap: .6rem; align-items: baseline; }
.ask-head #ask-left { margin-left: auto; font-variant-numeric: tabular-nums; }
.ask .ap-question { font-size: 1.15rem; margin: .3rem 0 .5rem; }
.ask-shot { display: block; width: 100%; max-height: 26vh; object-fit: contain; background: #000; border-radius: 6px; border: 1px solid var(--line); }
.ask .msg:empty { display: none; }
.ask .ap-buttons { margin-bottom: 0; }
@keyframes ask-in { from { transform: translateY(100%); } }
@keyframes ask-glow { 50% { border-top-color: #fff; background: #3a2e10; } }
@media (min-width: 700px) { .ask { left: auto; right: 1rem; bottom: 1rem; width: 26rem; border: 2px solid var(--warn); border-top-width: 4px; border-radius: 12px; } }

/* the conversation (Stage 7 part 4): the agent bar, the plan, the stream */
.agentbar { display: flex; gap: .6rem; align-items: flex-start; margin: .3rem 0; }
.conv-shot { width: 30%; max-width: 11rem; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; }
.agentbar-text { flex: 1; font-size: .85rem; min-width: 0; }
.agentbar-text div { margin: .1rem 0; }
#agent-state.running { color: var(--ok); } #agent-state.waiting { color: var(--warn); } #agent-state.paused { color: var(--bad); }
.conv-links { margin: .3rem 0; }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; margin: .5rem 0; }
.plan-head { display: flex; gap: .5rem; align-items: baseline; }
.plan ol { margin: .3rem 0 .2rem; padding-left: 1.4rem; font-size: .92rem; }
.plan li { padding: .12rem 0; color: var(--muted); }
.plan li.done { text-decoration: line-through; opacity: .7; }
.plan li.now { color: var(--fg); font-weight: 600; }
.plan li.now::marker { color: var(--accent); }
.stream { display: flex; flex-direction: column; gap: .4rem; min-height: 8rem; max-height: 60vh; overflow: auto; padding: .3rem 0; }
.stream .approval { align-self: stretch; margin: .2rem 0; }
.stream .approval .ap-question { font-size: .98rem; }
.stream .approval .ap-shot { max-height: 22vh; object-fit: contain; background: #000; }
.step { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: .4rem; align-items: baseline; font-size: .85rem; padding: .15rem .3rem; border-left: 2px solid var(--line); color: var(--muted); cursor: pointer; }
.step .t { font-family: ui-monospace, Consolas, monospace; }
.step .n { color: var(--fg); }
.step .o { font-weight: 600; font-size: .72rem; text-transform: uppercase; }
.step .r { grid-column: 2 / 4; font-size: .8rem; white-space: pre-wrap; word-break: break-word; }
.step img { grid-column: 1 / 4; width: 100%; border-radius: 6px; border: 1px solid var(--line); margin-top: .2rem; }
.step.o-refused, .step.o-error { border-left-color: var(--bad); }
.step.o-risk_flagged, .step.o-look_first, .step.o-needs_confirmation { border-left-color: var(--warn); }
.step.o-ok { border-left-color: var(--ok); }
.bubble.agent { align-self: flex-start; background: #1a2620; border-color: #2c4a3a; }
.bubble.discuss { border-color: var(--warn); }
.bubble.correction, .bubble.filed, .bubble.wrong_computer, .bubble.orientation { border-left: 3px solid var(--accent); }
.bubble.finish { border-color: var(--ok); }
.bubble.refusal, .bubble.agent_error, .bubble.spend_stop { border-color: var(--bad); }
button.talk { border-color: var(--warn); color: #ffd27a; }
.talk-box { margin: .4rem 0 0; }
.ap-message { font-size: .9rem; color: #ffd27a; border-left: 3px solid var(--warn); padding: .2rem .6rem; margin-top: .4rem; white-space: pre-wrap; }
.bubble { max-width: 85%; padding: .5rem .7rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: .95rem; white-space: pre-wrap; }
.bubble.operator { align-self: flex-end; background: #1b2b45; border-color: #2d4a7a; }
.bubble.system { align-self: center; color: var(--muted); font-size: .85rem; }
.bubble .who { display: block; font-size: .7rem; color: var(--muted); }

/* audit */
#audit { font-size: .85rem; }
.au { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: .4rem; padding: .35rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.au .t { color: var(--muted); font-family: ui-monospace, Consolas, monospace; }
.au .r { color: var(--muted); grid-column: 2 / 4; font-size: .8rem; white-space: pre-wrap; word-break: break-word; }
.au .o { font-weight: 600; font-size: .75rem; text-transform: uppercase; }
.o-ok { color: var(--ok); } .o-error, .o-refused, .o-blocked_readonly { color: var(--bad); }
.o-needs_confirmation, .o-risk_flagged, .o-look_first { color: var(--warn); }

footer { text-align: center; font-size: .75rem; padding: 1rem; }
@media (min-width: 700px) { nav#tabs button { font-size: 1rem; } }

/* pairing */
.banner { background: #14301c; color: #c9f2d2; padding: .4rem .8rem; font-size: .9rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.banner span { flex: 1 1 12rem; }
.banner.warn { background: #3a2a10; color: #ffd27a; }
dialog { background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; width: min(26rem, 94vw); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog h2:first-child { margin-top: 0; }
.qr { background: #fff; border-radius: 8px; padding: .4rem; width: min(18rem, 80vw); margin: .5rem auto; }
.qr svg { display: block; width: 100%; height: auto; }
.qr.spent { opacity: .15; }
.dev { display: flex; gap: .5rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.dev .d { flex: 1; }
.dev .d small { display: block; color: var(--muted); }
.dev.revoked { opacity: .5; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .85em; }

/* home, computer (Stage 6c): screens beside the session view */
.screen-wide main { padding-top: .3rem; }
button.back { min-width: 2.6rem; padding: .3rem .5rem; font-size: 1.1rem; }
.k { color: var(--muted); display: inline-block; min-width: 7.5rem; }
.crow, .srow { display: flex; gap: .6rem; align-items: center; padding: .55rem .2rem; border-bottom: 1px solid var(--line); }
.crow { cursor: pointer; }
.crow:active { background: var(--panel); }
.c-main, .s-main { flex: 1; min-width: 0; }
.c-name, .s-problem { font-weight: 600; }
.c-sub, .s-sub { display: block; color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-live, .s-live { background: var(--ok); color: #04210a; border-radius: 6px; padding: 0 .35em; font-size: .7rem; font-weight: 800; margin-right: .3em; vertical-align: middle; }
.s-stopped { color: var(--bad); font-weight: 700; }
.s-closed { opacity: .55; }
.runbar { display: flex; gap: .5rem; align-items: center; margin: .3rem 0 .6rem; font-size: .9rem; flex-wrap: wrap; }
.runbar span { flex: 1 1 10rem; }
.runbar.stopped span { color: #f3b9b6; }
select { font: inherit; color: var(--fg); background: #0b0e12; border: 1px solid var(--line); border-radius: 8px; padding: .45rem .5rem; min-height: 40px; max-width: 100%; }
label.chk select { min-height: 34px; padding: .2rem .4rem; }
.tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tbl th { text-align: left; color: var(--muted); font-weight: 600; padding: .25rem .3rem; border-bottom: 1px solid var(--line); }
.tbl td { padding: .35rem .3rem; border-bottom: 1px solid var(--line); vertical-align: top; word-break: break-word; }
.tbl td.v { font-weight: 600; }
.tbl td.nowrap { white-space: nowrap; }
.tbl tr.hist td { color: var(--muted); font-size: .8rem; }
.tbl .granted { color: var(--ok); font-weight: 600; } .tbl .blocked { color: var(--bad); font-weight: 600; }
.bubble.note { align-self: center; color: var(--muted); font-size: .85rem; border-style: dashed; }
.bubble.run_stopped, .bubble.run_replaced { border-color: var(--bad); }
.bubble.run_start, .bubble.run_resume { border-color: var(--ok); }
.run-row { display: flex; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.run-row .r-n { color: var(--muted); min-width: 1.5rem; }

/* Stage 7 part 2a: the standing allows under the session, and on the home screen */
.allows { margin-top: 8px; }
.allows .k { margin-bottom: 4px; }
.allow-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0; }
#acct-allows label.chk { display: block; margin: 4px 0; }

/* ==== wide (Stage 12): 1280 px and wider. Everything above this line is the phone's layout
   and is not touched (pwa/tests/layout_test.mjs holds its hash); every wide rule is in the one
   block below. The live picture on the left, always, with Take over under it; the tabs and
   the conversation on the right. layout.js has the same width; app.js moves what a style
   sheet cannot (which tabs exist, the Take over switch, the picture starting by itself). */
@media (min-width: 1280px) {
  /* a session: header and banners across, then two columns */
  #app { display: grid; grid-template-columns: minmax(0, 3fr) minmax(24rem, 2fr); grid-template-rows: repeat(6, auto) 1fr; column-gap: 1.2rem; align-items: start; }
  #app > header { grid-column: 1 / -1; grid-row: 1; }
  #app > #conn { grid-column: 1 / -1; grid-row: 2; }
  #app > #key-banner { grid-column: 1 / -1; grid-row: 3; }
  #app > #pair-banner { grid-column: 1 / -1; grid-row: 4; }
  #app > main { display: contents; }
  #run-bar { grid-column: 1 / -1; grid-row: 5; margin: .5rem 1.2rem .4rem; }
  /* left: the picture stays in view while the right column scrolls; taller than the window
     (Take over open on a short screen), it scrolls by itself. Its width is capped so that a
     16:9 picture never needs more height than the window has. */
  #col-live { grid-column: 1; grid-row: 6 / span 2; margin-left: 1.2rem; position: sticky; top: 4.4rem; max-height: calc(100vh - 5rem); overflow-y: auto; min-width: 0; max-width: calc((100vh - 9rem) * 16 / 9); }
  #col-live #tab-control { padding: .2rem .1rem 0; }
  /* right: the tabs sit on top of their column, not across the page */
  nav#tabs { grid-column: 2; grid-row: 6; position: static; margin-right: 1.2rem; border: 1px solid var(--line); border-bottom: none; border-radius: 10px 10px 0 0; overflow: hidden; }
  #col-side { grid-column: 2; grid-row: 7; margin-right: 1.2rem; min-width: 0; border: 1px solid var(--line); border-radius: 0 0 10px 10px; padding: .5rem .8rem .8rem; }
  #col-side .stream { max-height: calc(100vh - 24rem); min-height: 12rem; }
  #col-side .conv-shot { display: none; }  /* the live picture is beside it */
  /* a question, over the right column; its screenshot stays on the card in the conversation
     and on Approvals, and the picture is beside it, so the sheet itself is kept small */
  .ask { right: 1.2rem; width: min(30rem, calc(40vw - 2rem)); }
  .ask .ask-shot { display: none; }

  /* a computer: its sessions on the left, the two tables on the right */
  #computer main { max-width: none; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 2rem; align-items: start; padding-left: 1.2rem; padding-right: 1.2rem; }
  #comp-left, #comp-right { min-width: 0; }
}