/* CalmRay Node. Tokens and rules: DESIGN.md */
:root {
	--canvas: #F1F3F2; --surface: #FFFFFF; --surface-2: #F5F7F6; --hair: rgba(20, 28, 24, .10);
	--ink: #18201C; --ink-2: #58625D; --ink-3: #8C9590;
	--tint: #2557C7; --wait: #A35A00; --danger: #B42318;
	--slip: #F6F7F5; --slip-ink: #1E2621;
	--wait-wash: rgba(163, 90, 0, .08); --tint-wash: rgba(37, 87, 199, .10);
	--shadow: 0 10px 40px rgba(10, 16, 14, .18);
	--mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace;
	--sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
	--top: env(safe-area-inset-top); --bottom: env(safe-area-inset-bottom);
	color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
	:root {
		--canvas: #0F1312; --surface: #181D1B; --surface-2: #1F2522; --hair: rgba(231, 236, 233, .10);
		--ink: #E7ECE9; --ink-2: #A3ADA8; --ink-3: #6F7973;
		--tint: #8DB0FF; --wait: #F2B45C; --danger: #FF8A80;
		--slip: #141917; --slip-ink: #DCE3DF;
		--wait-wash: rgba(242, 180, 92, .10); --tint-wash: rgba(141, 176, 255, .14);
		--shadow: 0 10px 40px rgba(0, 0, 0, .5);
	}
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--canvas); color: var(--ink); font: 16px/24px var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow: hidden; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--tint); }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; border-radius: 6px; }
.i { flex: none; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* shell */
#app { height: 100dvh; display: flex; }
.side { display: none; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100dvh; }
.bar { flex: none; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: calc(var(--top) + 6px) 12px 6px; border-bottom: 1px solid var(--hair); background: var(--canvas); }
.bar h1 { flex: 1; min-width: 0; margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .big { font-size: 22px; line-height: 28px; }
.scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.tabs { flex: none; display: flex; border-top: 1px solid var(--hair); background: var(--canvas); padding-bottom: var(--bottom); }
.tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; border: 0; background: none; color: var(--ink-3); font-size: 11px; line-height: 13px; position: relative; }
.tabs button[aria-current="page"] { color: var(--tint); }
.badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--wait); color: var(--surface); font-size: 12px; line-height: 18px; font-weight: 600; text-align: center; }

@media (min-width: 900px) {
	.side { display: flex; flex-direction: column; width: 300px; flex: none; border-right: 1px solid var(--hair); height: 100dvh; }
	.tabs { display: none; }
	.main .bar .back { display: none; }
}

/* buttons */
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; color: var(--tint); }
.icon-btn:active { background: var(--tint-wash); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: 15px; }
.btn.fill { background: var(--tint); color: var(--surface); }
.btn.danger { color: var(--danger); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; }
.link { border: 0; background: none; color: var(--tint); padding: 8px 0; font-size: 15px; }

/* segmented */
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--hair); }
.seg button { position: relative; z-index: 1; border: 0; background: none; padding: 5px 12px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-2); }
.seg button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.seg .thumb { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 2px; border-radius: 7px; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); will-change: transform; }
.side .seg { margin: 10px 12px; }

/* switch */
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { appearance: none; margin: 0; width: 51px; height: 31px; border-radius: 999px; background: var(--hair); transition: background .2s; }
.switch input:checked { background: var(--tint); }
.switch input.wait:checked { background: var(--wait); }
.switch span { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 999px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); pointer-events: none; transition: transform .25s cubic-bezier(.3, 1.3, .5, 1); }
.switch input:checked + span { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) { .switch span, .switch input { transition: none; } }

/* lists */
.list { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--hair); background: none; text-align: left; }
.row:active, .row[aria-current="true"] { background: var(--surface-2); }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-size: 16px; line-height: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .s { font-size: 14px; line-height: 20px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .s.wait { color: var(--wait); }
.row .s.off { color: var(--ink-3); }
.row .chev { color: var(--ink-3); }
.empty { padding: 32px 24px; color: var(--ink-2); font-size: 15px; line-height: 22px; }
.empty p { margin: 0 0 16px; max-width: 34em; }
.group { margin: 20px 16px 6px; font-size: 13px; line-height: 18px; color: var(--ink-2); font-weight: 600; }

/* transcript */
.chat { max-width: 760px; margin: 0 auto; padding: 16px 16px 24px; }
.msg-user { display: flex; justify-content: flex-end; margin: 16px 0; }
.msg-user div { max-width: 85%; padding: 8px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--hair); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-text { margin: 12px 0; overflow-wrap: anywhere; }
.msg-text p { margin: 0 0 10px; }
.msg-text p.h { font-weight: 600; margin-top: 14px; }
.msg-text ul, .msg-text ol { margin: 0 0 10px; padding-left: 22px; }
.msg-text li { margin: 2px 0; }
.msg-text blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--hair); color: var(--ink-2); }
.msg-text code { font: 13px/19px var(--mono); background: var(--surface-2); border-radius: 5px; padding: 1px 5px; }
.msg-text pre.code { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--slip); border: 1px solid var(--hair); overflow-x: auto; }
.msg-text pre.code code { background: none; padding: 0; }
.msg-text .table { overflow-x: auto; margin: 0 0 10px; }
.msg-text table { border-collapse: collapse; font-size: 14px; line-height: 20px; }
.msg-text th, .msg-text td { padding: 4px 10px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.live::after { content: ""; display: inline-block; width: 8px; height: 16px; margin-left: 2px; vertical-align: -2px; background: var(--ink-3); border-radius: 2px; }
.tool { margin: 4px 0; }
.tool > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; margin-left: -8px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-size: 14px; line-height: 20px; text-align: left; }
.tool > button:active { background: var(--surface-2); }
.tool .name { color: var(--ink); font-weight: 500; flex: none; }
.tool .arg { min-width: 0; font: 13px/19px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool.err .name { color: var(--danger); }
.tool .open { margin: 2px 0 8px; }
.note { margin: 12px 0; font-size: 14px; color: var(--ink-2); }
.note.err { color: var(--danger); }
.working { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: var(--ink-3); font-size: 14px; }

/* slips */
.slip { margin: 10px 0; border-radius: 10px; background: var(--slip); border: 1px solid var(--hair); overflow: hidden; }
.slip.ask { border-color: var(--wait); box-shadow: inset 4px 0 0 var(--wait); }
.slip .head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 0 14px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.slip .head b { color: var(--ink); font-weight: 600; }
.slip.ask .head .why { color: var(--wait); font-weight: 600; }
.slip pre { margin: 0; padding: 8px 12px 10px 14px; font: 13px/19px var(--mono); color: var(--slip-ink); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow-y: auto; }
.slip pre.out { border-top: 1px solid var(--hair); color: var(--ink-2); }
.slip .acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px 14px; }
.slip .acts .btn { min-height: 36px; font-size: 14px; }
.slip .state { padding: 0 12px 10px 14px; font-size: 13px; color: var(--ink-3); }
.slip .state.bad { color: var(--danger); }
.slip.job { cursor: pointer; }
.slip.job:active { background: var(--surface-2); }
.rise { animation: none; }

/* composer */
.composer { flex: none; border-top: 1px solid var(--hair); background: var(--canvas); padding: 8px 12px calc(8px + var(--bottom)); }
.composer form { max-width: 760px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; }
.composer textarea { flex: 1; min-height: 40px; max-height: 40vh; resize: none; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--hair); background: var(--surface); line-height: 22px; outline: none; }
.composer textarea:focus { border-color: var(--tint); }
.send { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 999px; background: var(--tint); color: var(--surface); }
.send:disabled { opacity: .35; }
.send.stop { background: var(--ink); }

/* machine detail */
.card { margin: 16px; padding: 4px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hair); }
.line { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--hair); }
.line:last-child { border-bottom: 0; }
.line .grow { flex: 1; min-width: 0; }
.line .s { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.pad { padding: 0 16px; }
.mono { font: 13px/19px var(--mono); }

/* sheet */
.veil { position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, .32); opacity: 0; }
.sheet { position: fixed; z-index: 11; left: 0; right: 0; bottom: 0; max-height: 90dvh; overflow-y: auto; padding: 8px 20px calc(20px + var(--bottom)); border-radius: 14px 14px 0 0; background: var(--surface); box-shadow: var(--shadow); will-change: transform; }
@media (min-width: 640px) { .sheet { left: 50%; right: auto; width: 520px; margin-left: -260px; bottom: 24px; border-radius: 14px; } }
.sheet .grab { width: 36px; height: 5px; border-radius: 999px; background: var(--hair); margin: 0 auto 12px; }
.sheet h2 { margin: 0 0 8px; font-size: 22px; line-height: 28px; font-weight: 600; }
.sheet p { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; line-height: 22px; }
.sheet .field { width: 100%; min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--hair); background: var(--surface-2); margin: 4px 0 12px; }
.sheet .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.sheet pre { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--slip); border: 1px solid var(--hair); font: 13px/19px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* sign in */
.gate { margin: auto; max-width: 360px; padding: 24px; text-align: center; }
.gate .mark { width: 72px; height: 72px; margin: 0 auto 16px; }
.gate h1 { margin: 0 0 8px; font-size: 22px; line-height: 28px; }
.gate p { margin: 0 0 20px; color: var(--ink-2); font-size: 15px; line-height: 22px; }
.gate .err { color: var(--danger); }
.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(80px + var(--bottom)); transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--canvas); font-size: 14px; line-height: 20px; box-shadow: var(--shadow); }

/* layout helpers (no inline styles: the CSP forbids them) */
a.row, a.slip { text-decoration: none; color: inherit; }
a.slip { display: block; }
.row .t, .row .s, .line .s, .blk { display: block; }
.blk.off { color: var(--ink-3); }
.empty.center { margin: auto; text-align: center; padding-top: 30vh; }
.empty.center p { margin-left: auto; margin-right: auto; }
.empty.tight { padding: 8px 0; }
.pad.end { padding-bottom: 32px; }
.toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.chat.dock { padding-top: 0; }
.chat.working { padding-top: 0; padding-bottom: 0; }
.sheet .acts.start { justify-content: flex-start; margin: 0 0 12px; }
.sheet .acts.stack { flex-direction: column; align-items: stretch; }
.sheet label.s { font-size: 13px; color: var(--ink-2); }
.slip .acts .btn:not(.fill) { background: var(--surface); border: 1px solid var(--hair); }
.link { display: inline-flex; align-items: center; gap: 6px; }
.slip pre.out { white-space: pre; overflow-x: auto; overflow-wrap: normal; }