/* The browser page (backend-split DESIGN §2.9): the terminal's Catppuccin Mocha, after the approved
   prototype. No state is told by colour alone: every coloured cell carries its glyph and word. */
:root { --bg:#1e1e2e; --mantle:#181825; --surface:#313244; --overlay:#45475a; --text:#cdd6f4; --dim:#7f849c;
        --green:#a6e3a1; --amber:#f9e2af; --red:#f38ba8; --blue:#89b4fa; --teal:#94e2d5; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
       font:15px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap:anywhere; }
a { color:inherit; text-decoration:none; }
header { position:sticky; top:0; background:var(--mantle); padding:10px 14px; display:flex; gap:10px;
         align-items:center; border-bottom:1px solid var(--surface); }
/* A 44px tall tap target on a phone (the text alone is 22px); the negative margin keeps the header's height. */
header .back { color:var(--blue); white-space:nowrap; padding:12px 8px 12px 0; margin:-12px 0; }
header h1 { font-size:15px; margin:0; flex:1; min-width:0; }
.conn { font-size:12px; white-space:nowrap; }
[hidden] { display:none !important; }
.banner { background:var(--red); color:var(--mantle); padding:8px 14px; font-size:13px; }
main { max-width:900px; margin:0 auto; padding:10px; }
ul { list-style:none; margin:0; padding:0; }
.row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:10px 12px;
       border-radius:6px; margin-bottom:4px; background:var(--mantle); }
.row:hover, .row:focus-visible { background:var(--surface); }
.row.asking { box-shadow:inset 3px 0 0 var(--amber); }
.row .state { white-space:nowrap; }
.row .sub { grid-column:1/3; color:var(--dim); font-size:12px; }
.bar { grid-column:1/3; height:4px; background:var(--surface); border-radius:2px; margin-top:4px; }
.bar i { display:block; height:100%; background:var(--blue); border-radius:2px; }
.counts { color:var(--dim); font-size:12px; margin:4px 2px 10px; }
.note { color:var(--dim); font-size:12px; margin:8px 2px; }
.task { display:grid; grid-template-columns:1.6em minmax(0,1fr) auto; gap:6px; padding:9px 10px;
        border-bottom:1px solid var(--surface); }
a.task:hover, a.task:focus-visible { background:var(--surface); }
.task.asking { background:#2a2a35; }
.task .clock { color:var(--dim); font-variant-numeric:tabular-nums; }
.toolbar { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px; }
.confirm { border:1px solid var(--red); border-radius:8px; padding:10px; margin:6px 0 10px; }
.confirm p { margin:0 0 6px; }
button { font:inherit; background:var(--surface); color:var(--text); border:1px solid var(--overlay);
         border-radius:6px; padding:8px 12px; cursor:pointer; margin:4px 4px 0 0; }
button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--blue); color:var(--mantle); border-color:var(--blue); }
button.danger { border-color:var(--red); color:var(--red); }
.tone-running { color:var(--green); }
.tone-active { color:var(--teal); }
.tone-ask { color:var(--amber); font-weight:bold; }
.tone-done { color:var(--green); }
.tone-dim { color:var(--dim); }
.tone-crash { color:var(--red); }
/* A session's conversation (T18): the terminal's line styles (core/conversation.mjs) as colours, each line
   keeping its words (`you ▸`, `⎿`, `→ allowed`), so no meaning rides on colour alone. */
:root { --mauve:#cba6f7; --peach:#fab387; }
.lines { margin:4px 0 8px; }
.line { white-space:pre-wrap; padding:2px 4px; }
.line .who { color:var(--dim); }
.s-worker { background:var(--mantle); border-radius:6px; padding:6px 8px; margin:6px 0; }
.s-person { background:#2a2b3d; border-left:3px solid var(--mauve); border-radius:4px; padding:6px 8px; margin:6px 0; }
.s-person .who { color:var(--mauve); }
.s-pir, .s-pir .who { color:var(--teal); }
.s-step, .s-dim { color:var(--dim); font-size:13px; }
.s-step-error, .s-bad { color:var(--red); }
.s-prompt { color:var(--amber); }
.s-ok { color:var(--green); }
.s-shell { color:var(--peach); }
.ask { border:1px solid var(--amber); border-radius:8px; padding:10px; margin:12px 0; }
.ask h3 { margin:0 0 6px; font-size:13px; color:var(--amber); }
.ask p { margin:4px 0; }
pre.cmd { white-space:pre-wrap; margin:6px 0; padding:6px 8px; background:var(--mantle); border-radius:6px; font:inherit; font-size:13px; }
fieldset.question { border:none; padding:0; margin:8px 0; min-width:0; }
fieldset.question legend { padding:0; margin-bottom:4px; }
label.opt { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px; padding:8px; border-radius:6px; background:var(--mantle); margin:4px 0; }
label.opt input[type=radio], label.opt input[type=checkbox] { flex:none; }
textarea.other { flex:1 1 10em; min-width:0; font:inherit; background:var(--bg); color:var(--text);
                 border:1px solid var(--surface); border-radius:6px; padding:6px; box-sizing:border-box;
                 resize:none; max-height:12em; overflow-y:auto; }
.composer textarea { display:block; width:100%; min-height:64px; font:inherit; background:var(--mantle); color:var(--text);
                     border:1px solid var(--surface); border-radius:6px; padding:8px; resize:vertical; }
.composer { margin:8px 0 20px; }
/* The alerts switch (sunset-ntfy-remote-control §2.3): beside the online corner, its negative margin keeping
   the header's height. A state told in a sentence, and the test-failed line, sit right under the header at
   the right, outside it, so the header is the same height on every view and nothing jumps. */
.alerts { font-size:12px; white-space:nowrap; }
.alerts button { font-size:12px; padding:6px 10px; margin:-6px 0; }
.alerts-note { width:fit-content; max-width:40em; margin:0 0 0 auto; padding:8px 14px 0; font-size:12px; color:var(--dim); }
.alerts-note.tone-ask { color:var(--amber); font-weight:normal; }
/* On the site the switch shares the header with the account (pir-cloud T11): the title keeps its width and the
   email is what gives way, or a phone squeezes `pir` to one letter a line. */
header h1 { flex:1 0 auto; }
/* Off the list there is no switch and the title is a run's name: it gives way, as the email does (T10). */
header h1.deep { flex:1; }
/* The site's front door (pir-cloud T09): signed out, pairing, and each Mac's heading and waiting text. No
   inline style anywhere: the site's CSP allows only this file (DESIGN §3.3). */
header .who { display:flex; align-items:center; gap:8px; min-width:0; font-size:12px; color:var(--dim); }
header .who .email { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:22em; }
header .who button { font-size:12px; padding:6px 10px; margin:-6px 0; flex:none; }
@media (max-width: 480px) { header .who .email { max-width:9em; } }
main.door { text-align:center; padding:40px 22px; }
a.button { display:inline-block; font:inherit; background:var(--surface); color:var(--text); border:1px solid var(--overlay);
           border-radius:6px; padding:10px 14px; }
a.button.primary { background:var(--blue); color:var(--mantle); border-color:var(--blue); }
form.pair { max-width:34rem; margin:24px auto; }
.pair-row { display:flex; gap:8px; }
/* 17px at least: below 16px iOS zooms into a focused box and leaves the page zoomed. */
.pair-row input { flex:1 1 auto; min-width:0; font:inherit; font-size:20px; letter-spacing:.12em; text-transform:uppercase;
                  padding:8px 10px; background:var(--mantle); color:var(--text); border:1px solid var(--overlay); border-radius:6px; }
.pair-row button { margin:0; flex:none; }
.pair-note { min-height:1.45em; }
section.mac { margin:6px 0 14px; }
.mac-head { font-size:13px; font-weight:normal; color:var(--dim); margin:14px 2px 6px; }
.mac-head .name { color:var(--text); font-weight:bold; }
.mac-head .mark, .fingerprints .fp { white-space:nowrap; }
section.mac p { margin:6px 2px; }
/* Each Mac's runs and devices (pir-cloud T10). A Mac that stopped answering keeps its last known runs, greyed;
   the words `this Mac is not answering` say so, the grey only echoes them. */
.mac-tools { margin:0 0 6px; }
.mac-tools button { font-size:12px; padding:6px 10px; }
ul.gone { opacity:.55; }
.devices { border:1px solid var(--surface); border-radius:8px; padding:6px 10px; margin:6px 0 10px; }
.device { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:6px 0; border-bottom:1px solid var(--surface); }
.device:last-child { border-bottom:none; }
.device .what { flex:1 1 14em; min-width:0; }
.device .fp, .device .mine { white-space:nowrap; }
.device .note { margin:0; }
.device .confirm { flex-basis:100%; }
.mac-line .mark { white-space:nowrap; }
.device .seen { display:block; }
@media (max-width: 480px) { header .who.deep .email { display:none; } }