[hidden] { display: none !important; }

/* ---------- fonts (bundled, OFL: see fonts/) ---------- */
@font-face { font-family: "Gabarito"; font-weight: 400 900; font-display: swap; src: url("fonts/gabarito-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Gabarito"; font-weight: 400 900; font-display: swap; src: url("fonts/gabarito-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 300 900; font-display: swap; src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 300 900; font-display: swap; src: url("fonts/figtree-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokens ----------
   Four soft colours (coral, mint, cobalt, sun) on a light green-grey ground.
   Coral means "live" and "needs you", mint means done, cobalt is you and what
   you made, sun is files and money. Black pill buttons mark the one thing to
   do next. The Thirdhand character's face shows what the agent is doing. */
:root {
  color-scheme: light dark;
  --font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Gabarito", "Figtree", -apple-system, sans-serif;
  --serif: var(--display); /* older rules used a serif for titles */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --coral: #ef6447;
  --mint: #1f9a7b;
  --cobalt: #4354e6;
  --sun: #f2b929;
  --coral-soft: #fde5df;
  --mint-soft: #dcf2ea;
  --cobalt-soft: #e5e8fd;
  --sun-soft: #fcf0cf;
  --btn: #16181a;
  --btn-ink: #ffffff;
  --eye: #ffffff;
  --pupil: #16181a;

  --grad: linear-gradient(135deg, #f58a6c 0%, #ef6447 100%);
  --accent: var(--coral);
  --accent-ink: #c2452b;
  --accent-soft: color-mix(in srgb, var(--coral) 14%, transparent);
  --human: var(--cobalt);
  --ok: var(--mint);
  --warn: #c98a07;
  --err: #d64232;
  --on-err: #ffffff; /* text on --err and --accent fills */
  --on-accent: #ffffff;

  --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --bg: #edf0ea;
  --surface: #ffffff;
  --surface-2: #f5f7f2;
  --surface-3: #e7ebe3;
  --line: rgba(22, 24, 26, 0.08);
  --line-2: rgba(22, 24, 26, 0.15);
  --text: #16181a;
  --text-2: #4b524c;
  --text-3: #636b63; /* 4.5:1 on --surface-3 */
  --shadow-sm: 0 1px 2px rgba(22, 24, 26, .05);
  --shadow-md: 0 1px 2px rgba(22, 24, 26, .05), 0 8px 24px rgba(22, 24, 26, .06);
  --shadow-lg: 0 24px 60px rgba(22, 24, 26, .14), 0 2px 6px rgba(22, 24, 26, .06);
  --device-bg: #dfe5dc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --coral: #ff8b70;
    --mint: #45c9a3;
    --cobalt: #8c97ff;
    --sun: #f6c955;
    --coral-soft: #47261f;
    --mint-soft: #163b31;
    --cobalt-soft: #262b54;
    --sun-soft: #3d3318;
    --btn: #f0f3ee;
    --btn-ink: #16181a;
    --accent-ink: #ffa48f;
    --warn: #f2b23d;
    --err: #ff6b5b;
    --on-err: #16181a; /* the fills are light in the dark: dark text reads */
    --on-accent: #16181a;
    --bg: #111312;
    --surface: #1a1d1b;
    --surface-2: #212522;
    --surface-3: #2a2f2b;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.15);
    --text: #f0f3ee;
    --text-2: #b9c0b8;
    --text-3: #8f978f;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
    --device-bg: #0c0e0d;
  }
}

/* the Thirdhand character: <svg class="buddy"><use href="#th-ready"/></svg>.
   Its body takes currentColor (coral unless set). */
.buddy { display: block; color: var(--coral); overflow: visible; flex: none; }
.logo { display: block; overflow: visible; color: var(--coral); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text); font: 13.5px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; overflow: hidden; user-select: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
.defs { position: absolute; }

/* line icons */
.icon-btn svg, .seg svg, .menu svg, .chip svg, .round-btn svg, .suggestions svg,
.step-icon svg, .toast svg, .input-action svg {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.seg svg, .chip svg { fill: currentColor; stroke: none; }

.app { display: flex; flex-direction: column; height: 100vh; }

/* ---------- title bar ---------- */
.titlebar {
  height: 54px; flex: none; display: flex; align-items: center; gap: 14px;
  padding: 0 12px 0 88px; /* room for traffic lights */
  -webkit-app-region: drag;
}
body.fullscreen .titlebar, body.not-mac .titlebar { padding-left: 16px; }
.titlebar button, .titlebar .segmented, .titlebar .menu, .titlebar .media-controls { -webkit-app-region: no-drag; }
.brand { display: flex; align-items: center; gap: 8px; }
.mark { width: 26px; height: 26px; margin-top: -2px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px;
  border-radius: 999px; background: var(--surface-3); border: 0;
  color: var(--text-2); font-size: 12.5px; font-weight: 500;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.status-dot.ready { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.status-dot.busy { background: var(--warn); animation: pulse 1.4s ease-in-out infinite; }
.status-dot.working { background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
.status-dot.error { background: var(--err); }
@keyframes pulse { 50% { opacity: .35; } }

.titlebar-spacer { flex: 1; }
.titlebar-actions { display: flex; align-items: center; gap: 4px; }

.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm);
  border: 0; background: transparent; color: var(--text-2); transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.small { width: 28px; height: 28px; }
.icon-btn.small svg { width: 16px; height: 16px; }
.icon-btn.on { color: var(--accent); }

/* segmented Agent / You */
.segmented {
  display: flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: var(--surface-3);
}
.seg {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-2); font-size: 12.5px; font-weight: 550; transition: all .2s var(--ease);
}
.seg svg { width: 13px; height: 13px; }
.seg.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
#seg-agent.active svg { fill: var(--accent); }
#seg-you.active { color: var(--human); }

/* menu */
.menu-anchor { position: relative; }
.menu {
  position: absolute; right: 0; top: 40px; z-index: 50; min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); animation: pop .14s var(--ease);
}
.menu-label { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 7px;
  background: none; text-align: left; font-size: 13px;
}
.menu button svg { width: 16px; height: 16px; color: var(--text-2); }
.menu button:hover { background: var(--surface-3); }
.menu .danger, .menu .danger svg { color: var(--err); }
.menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ---------- workspace ---------- */
.workspace { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 0 12px 12px; }

.stage { position: relative; flex: 1; min-width: 0; display: flex; }
.device {
  position: relative; flex: 1; overflow: hidden; border-radius: var(--r-lg);
  background: var(--device-bg); box-shadow: var(--shadow-md);
  transition: box-shadow .25s var(--ease);
}
.screen { position: absolute; inset: 0; }
.device.agent-working { box-shadow: var(--shadow-md), 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.device.agent-working .screen { cursor: not-allowed; }
.device.human-control { box-shadow: var(--shadow-md), 0 0 0 2px var(--human); }
.device.human-control .agent-cursor { opacity: .35; }

.control-hint {
  position: absolute; left: 50%; top: 46px; transform: translateX(-50%); z-index: 6; pointer-events: none;
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 550; color: #fff;
  background: rgba(20, 20, 28, .86); border: 1px solid rgba(255,255,255,.12);
  animation: rise .25s var(--ease);
}
.control-hint.human { background: color-mix(in srgb, var(--human) 88%, black); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, -6px); } }

/* agent cursor */
.agent-cursor {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  transition: transform .4s var(--ease), opacity .2s; will-change: transform; /* CURSOR_LEAD_MS in agent.js */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.agent-cursor svg { width: 24px; height: 24px; margin: -2px 0 0 -3px; }
.agent-cursor svg path { fill: url(#brand-grad); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.cursor-caption {
  position: absolute; left: 18px; top: 20px; white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis;
  padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 550; color: #fff; background: var(--grad);
}
.cursor-caption:empty { display: none; }
.agent-cursor.click::before {
  content: ""; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%;
  border: 2.5px solid #a78bfa; animation: ripple .55s ease-out forwards;
}
@keyframes ripple { from { transform: scale(.25); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* boot / status overlay */
.overlay {
  position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(60% 60% at 50% 35%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--surface-2);
}
.boot-card { width: min(440px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; }
.boot-card h1 { margin: 22px 0 6px; font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.boot-card p { margin: 0; color: var(--text-2); white-space: pre-line; line-height: 1.55; }
.orb { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--grad); box-shadow: 0 10px 40px color-mix(in srgb, var(--accent) 45%, transparent); }
.orb span { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); animation: spin 1.1s linear infinite; }
.orb.still span { animation: none; border-color: transparent; }
.orb.error { background: var(--err); box-shadow: 0 10px 40px color-mix(in srgb, var(--err) 35%, transparent); }
.orb.error span { display: none; }
.orb.error::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 28px; }
@keyframes spin { to { transform: rotate(360deg); } }

.steps { list-style: none; margin: 22px 0 0; padding: 6px; width: 100%; text-align: left; background: var(--surface); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.steps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--text-3); }
.steps li + li { border-top: 1px solid var(--line); }
.steps .label { flex: 1; }
.steps .meta { font-size: 12px; font-variant-numeric: tabular-nums; }
.tick { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; position: relative; }
.steps li.active { color: var(--text); font-weight: 550; }
.steps li.active .tick { border-color: var(--accent); border-top-color: transparent; animation: spin .9s linear infinite; }
.steps li.done { color: var(--text-2); }
.steps li.done .tick { background: var(--ok); border-color: var(--ok); }
.steps li.done .tick::after { content: ""; position: absolute; left: 5.5px; top: 2.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.progress { width: 100%; height: 6px; margin-top: 16px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress div { height: 100%; width: 0; border-radius: 99px; background: var(--grad); transition: width .3s var(--ease); }
.boot-actions { display: flex; gap: 8px; margin-top: 20px; }

/* toasts */
.toasts { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 80; /* over the floating chat (69/70) */ display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); animation: pop .2s var(--ease);
  pointer-events: auto; user-select: text;
}
.toast svg { width: 18px; height: 18px; flex: none; }
.toast.error svg { color: var(--err); }
.toast.info svg { color: var(--accent); }
.toast.leaving { opacity: 0; transform: translateY(-6px); transition: all .2s; }

/* ---------- sidebar ---------- */
.sidebar {
  width: 400px; flex: none; display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  transition: width .25s var(--ease), opacity .2s, margin .25s var(--ease);
}
.app.layout-computer .sidebar { width: 0; opacity: 0; margin-left: -12px; border-width: 0; overflow: hidden; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 6px 18px; }

.log { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 18px 16px; display: flex; flex-direction: column; gap: 14px; user-select: text; scroll-behavior: smooth; }
.log::-webkit-scrollbar { width: 10px; }
.log::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid var(--surface); }

.welcome { margin: auto 0; padding: 8px 0 12px; display: flex; flex-direction: column; align-items: center; text-align: center; user-select: none; }
.welcome-mark .logo { width: 64px; height: 64px; transform-origin: 45% 85%; animation: wave 1.6s var(--ease) .3s 1; }
@keyframes wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
.welcome h2 { margin: 14px 0 2px; font-family: var(--serif); font-size: 27px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.welcome-lead { margin: 0; font-family: var(--serif); font-size: 19px; color: var(--text-2); letter-spacing: -.01em; }
.welcome-sub { margin: 12px 0 20px; color: var(--text-3); max-width: 300px; font-size: 12.5px; }
.welcome-sub b { color: var(--text-2); font-weight: 600; }
.suggestions { display: grid; gap: 8px; width: 100%; }
.suggestions button {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; text-align: left;
  background: var(--surface-2); border: 0; border-radius: var(--r-md); font-weight: 500;
  transition: background .15s, transform .15s var(--ease), box-shadow .15s;
}
.suggestions button:hover { background: var(--surface); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.sug-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.suggestions svg { width: 17px; height: 17px; color: inherit; }

/* messages */
.msg { max-width: 100%; animation: fadein .25s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } }
.msg.user { align-self: flex-end; max-width: 88%; padding: 10px 15px; border-radius: 20px 20px 6px 20px; background: var(--surface-3); white-space: pre-wrap; word-wrap: break-word; }
.msg.assistant { display: flex; gap: 10px; align-items: flex-start; }
.avatar { width: 26px; height: 26px; flex: none; margin-top: -1px; }
.avatar .logo { width: 26px; height: 26px; }
.bubble { min-width: 0; line-height: 1.6; word-wrap: break-word; }
.bubble p { margin: 0 0 8px; } .bubble p:last-child { margin-bottom: 0; }
.bubble ul { margin: 4px 0 8px; padding-left: 20px; }
.bubble code { font-family: var(--mono); font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--surface-3); }
.msg.notice { align-self: center; font-size: 12.5px; color: var(--text-3); }
.msg.error { display: flex; gap: 10px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; padding: 10px 12px; border-radius: var(--r-md); color: var(--text); background: color-mix(in srgb, var(--err) 9%, transparent); border: 1px solid color-mix(in srgb, var(--err) 30%, transparent); }
.msg.error::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--err); color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; margin-top: 1px; }

/* activity card: the agent's steps for one task */
.activity { border: 0; border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; animation: fadein .25s var(--ease); }
.activity summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; user-select: none; }
.activity summary::-webkit-details-marker { display: none; }
.activity-title { flex: 1; font-weight: 550; font-size: 12.5px; color: var(--text-2); }
.activity-time { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.activity-cost { font-size: 11.5px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); }
.chev { width: 14px; height: 14px; color: var(--text-3); transition: transform .2s; fill: none; stroke: currentColor; stroke-width: 2; }
.activity[open] .chev { transform: rotate(90deg); }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
.done-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ok); flex: none; position: relative; }
.done-dot::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 3px; height: 7px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.done-dot.stopped { background: var(--text-3); }
.done-dot.stopped::after { left: 4px; top: 4px; width: 6px; height: 6px; border: 0; background: #fff; border-radius: 1px; transform: none; }
.steps-list { list-style: none; margin: 0; padding: 2px 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.step { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; color: var(--text-2); position: relative; }
.step-icon { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--surface); color: var(--text-2); box-shadow: var(--shadow-sm); }
.step-icon svg { width: 13px; height: 13px; }
.step.current { color: var(--text); }
.step.current .step-icon { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.step.failed { color: var(--err); }
.step.failed .step-icon { color: var(--err); }
.step.skipped { color: var(--human); }
.step.skipped .step-icon { color: var(--human); }
.step-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step[title] { cursor: default; }

.thinking { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12.5px; padding-left: 34px; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: bounce 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* composer */
.composer { padding: 10px 12px 12px; }
.composer-box {
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface-2); padding: 12px 10px 8px 16px;
  transition: border-color .15s, box-shadow .15s;
}
.composer-box:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 4px var(--accent-soft); }
.composer textarea { width: 100%; resize: none; border: 0; outline: 0; background: transparent; line-height: 1.5; max-height: 180px; padding: 2px 0 6px; user-select: text; }
.composer textarea::placeholder { color: var(--text-3); }
.composer-row { display: flex; align-items: center; gap: 8px; }
.composer-spacer { flex: 1; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px;
  border: 0; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 550;
}
.chip:hover { color: var(--text); }
.chip svg { width: 12px; height: 12px; color: var(--accent); }
.round-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; transition: transform .15s var(--ease), opacity .15s; }
.round-btn svg { width: 17px; height: 17px; stroke-width: 2.2; }
.round-btn.send { background: var(--grad); color: #fff; }
.round-btn.send:disabled { background: var(--surface-3); color: var(--text-3); cursor: default; }
.round-btn.send:not(:disabled):hover { transform: scale(1.06); }
.round-btn.stop { background: var(--text); color: var(--surface); }
.round-btn.stop svg { fill: currentColor; stroke: none; }
.composer-foot { text-align: center; font-size: 11px; color: var(--text-3); margin-top: 7px; }

/* buttons */
.btn {
  height: 34px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); font-weight: 550; transition: background .15s, border-color .15s, filter .15s;
}
.btn:hover { background: var(--surface-3); }
.btn.primary { border: 0; background: var(--grad); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { border: 0; background: var(--err); color: var(--on-err); }

/* ---------- sheets ---------- */
dialog.sheet {
  width: 480px; max-width: calc(100vw - 40px); padding: 0; border: 0; border-radius: 24px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
dialog.sheet[open] { animation: sheet .22s var(--ease); }
dialog.sheet.small { width: 400px; }
dialog.sheet.wide { width: 860px; }
.logs-meta.error { color: var(--err); }
.logs-meta { padding: 0 22px; color: var(--text-3); font-size: 12px; user-select: text; word-break: break-all; }
.tabs { display: flex; gap: 4px; padding: 12px 22px 0; border-bottom: 1px solid var(--line); }
.tab { border: 0; background: none; padding: 8px 12px; border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 550; font-size: 12.5px; margin-bottom: -1px; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.logs-body {
  margin: 0; height: min(52vh, 460px); overflow: auto; padding: 14px 22px; font: 11.5px/1.55 var(--mono);
  color: var(--text-2); background: var(--surface-2); white-space: pre-wrap; word-break: break-all; user-select: text; outline: none;
}
dialog.sheet.small form { padding: 22px 22px 0; }
dialog.sheet.small h2 { margin: 0 0 6px; font-size: 16px; }
dialog.sheet.small p { margin: 0; color: var(--text-2); }
/* No backdrop blur anywhere over the live screen: Chromium re-blurs the
   constantly repainting computer screen under it, and scrolling a sheet then
   makes the whole window blink (seen on Macs with GPU compositing). */
dialog::backdrop { background: rgba(24, 18, 12, .46); }
@keyframes sheet { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 4px 22px; }
.sheet-head h2 { margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.field-group { padding: 12px 22px 6px; }
.field-group h3 { margin: 0 0 10px; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-weight: 550; }
.field small { font-weight: 400; color: var(--text-3); }
.field input, .field select {
  height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2);
  outline: none; font-weight: 400; user-select: text;
}
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-wrap { position: relative; display: flex; }
.input-wrap input { flex: 1; padding-right: 64px; font-family: var(--mono); font-size: 12.5px; }
.input-action { position: absolute; right: 6px; top: 6px; height: 26px; padding: 0 10px; border-radius: 7px; border: 0; background: var(--surface-3); font-size: 12px; font-weight: 550; color: var(--text-2); }
.theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.theme-picker label { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px; border-radius: 12px; border: 1px solid var(--line-2); cursor: pointer; font-weight: 550; font-size: 12.5px; }
.theme-picker label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-picker input { position: absolute; opacity: 0; pointer-events: none; }
.swatch { width: 100%; height: 44px; border-radius: 8px; border: 1px solid var(--line); }
.swatch.light { background: linear-gradient(90deg, #f4efe7 0 62%, #fffcf7 62%); }
.swatch.dark { background: linear-gradient(90deg, #161412 0 62%, #221f1c 62%); }
.swatch.system { background: linear-gradient(90deg, #f4efe7 0 50%, #161412 50%); }
/* Home and Schedule's background (Settings › Appearance). Drawn once behind
   everything; no blur or backdrop filters (they made the window blink). */
.backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 80px; z-index: -1; pointer-events: none; display: none;
  border-top-left-radius: 18px; background-repeat: no-repeat; background-size: cover; }
body:is(.bg-thirdhand, .bg-photo):is([data-view="home"], [data-view="schedule"], [data-view="apps"]) .backdrop { display: block; }
body.bg-thirdhand .backdrop { background-image: url(backdrops/dunes-light.svg); background-position: center bottom; opacity: 0.6;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, rgba(0, 0, 0, 0.45) 62%, transparent 86%);
  mask-image: linear-gradient(to top, #000 0%, #000 40%, rgba(0, 0, 0, 0.45) 62%, transparent 86%); }
body.bg-photo .backdrop { background-image: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 30%, color-mix(in srgb, var(--bg) 30%, transparent) 100%), var(--photo); background-position: center; }
@media (prefers-color-scheme: dark) {
  body.bg-thirdhand .backdrop { background-image: url(backdrops/dunes-dark.svg); opacity: 0.85; }
  body.bg-photo .backdrop { background-image: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 30%, color-mix(in srgb, var(--bg) 50%, transparent) 100%), var(--photo); }
}
.set-label { margin: 14px 0 8px; font-weight: 600; font-size: 12.5px; color: var(--text-2); }
.swatch.bg-thirdhand { background: url(backdrops/dunes-light.svg) center 80% / cover; }
.swatch.bg-plain { background: var(--bg); }
.swatch.bg-photo { display: grid; place-items: center; background: var(--surface-2) center / cover; color: var(--text-3); font-size: 20px; }
.swatch.bg-photo.has-photo b { display: none; }
@media (prefers-color-scheme: dark) { .swatch.bg-thirdhand { background-image: url(backdrops/dunes-dark.svg); } }
#bg-photo-change { margin: 0 0 4px; }
.sheet-foot { display: flex; align-items: center; gap: 8px; padding: 14px 18px 18px 22px; }
.grow { flex: 1; }
.version { font-size: 12px; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- sound, microphone, camera ---------- */
.media-controls { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-3); }
.media-btn {
  position: relative; width: 30px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-2); transition: background .2s var(--ease), color .2s var(--ease);
}
.media-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.media-btn:hover:not(:disabled) { background: var(--surface); color: var(--text); }
.media-btn .off-only { display: none; }
.media-btn.off .off-only { display: inline; }
.media-btn.off .on-only { display: none; }
.media-btn.off { color: var(--text-3); }
/* mic and camera "live": clearly on, so it's never a surprise */
.media-btn.live { background: var(--accent); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); }
.media-btn.live:hover:not(:disabled) { background: var(--accent-ink); color: #fff; }
.media-btn.pending::after {
  content: ""; position: absolute; right: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--warn); animation: pulse 1.2s ease-in-out infinite;
}
.media-btn:disabled { opacity: .45; cursor: default; }

.cam-bubble {
  position: absolute; right: 16px; bottom: 16px; width: 188px; aspect-ratio: 16 / 10; z-index: 6;
  border-radius: 16px; overflow: hidden; background: #000;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent);
}
.cam-bubble video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.cam-label {
  position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 550;
}
.cam-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- files: + menu, attachments, drop, shared folders ---------- */
.add-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2); transition: background .15s, color .15s, transform .15s var(--ease);
}
.add-btn:hover, .add-btn[aria-expanded="true"] { color: var(--text); background: color-mix(in srgb, var(--accent) 14%, var(--surface-3)); }
.add-btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.add-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .2s var(--ease); }
.menu.up { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; min-width: 230px; }
.menu .folder-item { display: flex; align-items: center; gap: 9px; padding: 6px 10px; font-size: 12.5px; color: var(--text-2); }
.menu .folder-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.menu .folder-item .dot.connected { background: var(--ok); }
.menu .folder-item .dot.restart, .menu .folder-item .dot.waiting { background: var(--warn); }
.menu .folder-item .dot.error, .menu .folder-item .dot.missing { background: var(--err); }
.menu .folder-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .folder-item small { color: var(--text-3); }

.attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px; }
.att {
  position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0;
  padding: 6px 8px 6px 6px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); overflow: hidden;
}
.att .att-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.att .att-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.att .att-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.att .att-name { font-size: 12.5px; font-weight: 550; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att .att-meta { font-size: 11px; color: var(--text-3); }
.att.error .att-meta { color: var(--err); }
.att .att-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--grad); transition: width .15s linear; }
.att .att-x { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); display: grid; place-items: center; }
.att .att-x:hover { background: var(--surface-3); color: var(--text); }
.att .att-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.msg-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-self: flex-end; max-width: 88%; margin-bottom: -4px; }
.msg-files .att { background: var(--surface); }

.drop-overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}
.drop-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 48px; border-radius: 26px;
  background: var(--surface); border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: var(--shadow-md);
}
.drop-card svg { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.drop-card strong { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.drop-card span { color: var(--text-2); font-size: 12.5px; }
.share-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.share-list:empty { display: none; }
.share-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); }
.share-row .sr-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.share-row .sr-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.share-row .sr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.share-row .sr-name { font-weight: 600; font-size: 13px; }
.share-row .sr-path { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-row .sr-state { font-size: 11.5px; color: var(--text-2); }
.share-row .sr-state.warn { color: var(--warn); }
.share-row .sr-state.err { color: var(--err); }
.share-row .sr-state.ok { color: var(--ok); }
.share-row label.ro { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); font-weight: 500; cursor: pointer; white-space: nowrap; }
.share-row label.ro input { accent-color: var(--accent); margin: 0; }
.btn.small { height: 30px; padding: 0 12px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.btn.small svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- settings window ---------- */
dialog.sheet.settings { width: 820px; height: min(780px, calc(100vh - 72px)); overflow: hidden; }
.settings-wrap { display: flex; height: 100%; }
.settings-nav {
  width: 200px; flex: none; padding: 18px 10px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-2); border-right: 1px solid var(--line);
}
.settings-nav h2 { margin: 2px 10px 14px; font-family: var(--serif); font-size: 21px; font-weight: 500; }
.settings-nav button {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text-2); font-size: 13px; font-weight: 550; text-align: left;
}
.settings-nav button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-nav button:hover { background: var(--surface-3); color: var(--text); }
.settings-nav button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.settings-nav button.active svg { color: var(--accent); }
.settings-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.settings-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 8px 28px; }
.settings-head h3 { margin: 0; font-size: 17px; font-weight: 650; }
.settings-scroll { flex: 1; overflow-y: auto; padding: 0 28px 24px; }
.settings-scroll section { animation: fadein .18s var(--ease); }
.settings-nav .nav-sep { height: 1px; margin: 6px 10px; background: var(--line); }
.settings-scroll::-webkit-scrollbar { width: 10px; }
.settings-scroll::-webkit-scrollbar-track { background: transparent; }
.settings-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid var(--surface); }
.settings-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.set-group { padding: 10px 0 14px; }
/* A line between groups that show (hidden ones leave no stray line). */
.set-group:not([hidden]) ~ .set-group:not([hidden]) { border-top: 1px solid var(--line); }
.set-group h4 { margin: 6px 0 12px; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.set-note { margin: 0 0 12px; color: var(--text-2); font-size: 12.5px; }
.field textarea {
  width: 100%; resize: vertical; min-height: 110px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--text); font: inherit; font-weight: 400; line-height: 1.5; outline: 0;
}
.field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.switch-row, .action-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 0; }
.switch-row > span, .action-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.switch-row b, .action-row b { font-weight: 600; }
.switch-row small, .action-row small { color: var(--text-3); font-size: 12px; line-height: 1.45; }
.switch-row small b { font-weight: 600; color: var(--text-2); }
.switch-row { cursor: pointer; }
input.switch {
  appearance: none; flex: none; width: 38px; height: 22px; border-radius: 999px; margin: 0; cursor: pointer; position: relative;
  background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s var(--ease);
}
input.switch::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease);
}
input.switch:checked { background: var(--accent); box-shadow: none; }
input.switch:checked::after { transform: translateX(16px); }
input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.layout-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.layout-picker label { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px; border-radius: 12px; border: 1px solid var(--line-2); cursor: pointer; font-weight: 550; font-size: 12.5px; }
.layout-picker label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.layout-picker input { position: absolute; opacity: 0; pointer-events: none; }
.lp { width: 100%; height: 44px; border-radius: 8px; background: var(--surface-3); display: flex; gap: 4px; padding: 5px; }
.lp i { display: block; border-radius: 4px; }
.lp-chat i { flex: 1; background: var(--surface); margin: 0 22%; }
.lp-split i:first-child { flex: 2.2; background: #1e1b18; }
.lp-split i:last-child { flex: 1; background: var(--surface); }
.lp-computer i { flex: 1; background: #1e1b18; }

.provider-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); }
.provider-logo { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #d97757; color: #fff; font-family: var(--serif); font-weight: 600; }
.provider-text { display: flex; flex-direction: column; line-height: 1.3; }
.provider-text small { color: var(--text-3); font-size: 12px; }
.provider-text small.ok { color: var(--ok); }
.key-row { display: flex; gap: 8px; align-items: center; }
.key-row .input-wrap { flex: 1; }
.link-btn { border: 0; background: none; padding: 0; margin: -6px 0 14px; font-size: 12.5px; font-weight: 550; color: var(--accent-ink); }
.link-btn.danger { color: var(--err); }
.link-btn:hover { text-decoration: underline; }

.about { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 20px 6px; }
.about-logo { width: 72px; height: 72px; }
.about h3 { margin: 12px 0 2px; font-family: var(--serif); font-size: 24px; font-weight: 500; }
.about .version { margin: 0 0 14px; color: var(--text-3); }
.about .set-note { max-width: 380px; }

/* ---------- layouts: chat only / split / computer only ---------- */
.view-switch { display: flex; gap: 2px; padding: 3px; margin-right: 4px; border-radius: 999px; background: var(--surface-3); }
.view-switch button {
  width: 30px; height: 28px; border: 0; border-radius: 999px; display: grid; place-items: center;
  background: transparent; color: var(--text-3); transition: background .2s var(--ease), color .2s var(--ease);
}
.view-switch button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.view-switch button:hover { color: var(--text); }
.view-switch button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.titlebar .view-switch { -webkit-app-region: no-drag; }
#menu-btn svg circle { fill: currentColor; stroke: none; }

/* Chat only: the chat becomes a centered column; the computer hides, or
   floats as a small live preview while Thirdhand works. */
.app.layout-chat .stage { display: none; }
.app.layout-chat .sidebar { flex: 1; width: auto; min-width: 0; } /* never wider than its room (a narrow or zoomed window) */
.app.layout-chat .log { padding-inline: max(18px, calc((100% - 760px) / 2)); }
/* Make room for the live preview: center the column in the space beside it. */
.app.layout-chat.pip-on .log { padding-left: max(18px, calc((100% - 760px - 420px) / 2)); padding-right: 420px; }
.app.layout-chat.pip-on .sidebar-head { padding-left: max(18px, calc((100% - 760px - 420px) / 2)); padding-right: 420px; }
.app.layout-chat .sidebar-head { transition: padding .25s var(--ease); }
.app.layout-chat .log { transition: padding .25s var(--ease); }
.app.layout-chat .composer { padding-inline: max(12px, calc((100% - 784px) / 2)); }
.app.layout-chat .composer > .slash-menu { left: max(12px, calc((100% - 784px) / 2)); right: max(12px, calc((100% - 784px) / 2)); }
.app.layout-chat .sidebar-head { padding-inline: max(18px, calc((100% - 760px) / 2)); }
.app.layout-chat .suggestions { grid-template-columns: 1fr 1fr; max-width: 640px; }
.app.layout-chat .welcome-sub { max-width: 420px; }

.pip-bar { display: none; }
.app.layout-chat.pip-on .stage {
  display: flex; position: fixed; z-index: 30; right: 22px; top: 70px; width: 384px; height: 240px;
  animation: pipin .28s var(--ease);
}
@keyframes pipin { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.app.layout-chat.pip-on .device { border-radius: 16px; box-shadow: var(--shadow-lg), 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.app.layout-chat.pip-on .device.human-control { box-shadow: var(--shadow-lg), 0 0 0 2px var(--human); }
.app.layout-chat .pip-bar {
  display: flex; align-items: center; gap: 4px; position: absolute; left: 0; right: 0; top: 0; z-index: 8; padding: 6px 6px 14px 10px;
  background: linear-gradient(rgba(0,0,0,.55), transparent); color: #fff; opacity: 0; transition: opacity .2s;
}
.app.layout-chat .device:hover .pip-bar { opacity: 1; }
.pip-label { flex: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.pip-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
.pip-btn { width: 24px; height: 24px; border: 0; border-radius: 7px; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; }
.pip-btn:hover { background: rgba(255,255,255,.28); }
.pip-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app.layout-chat .control-hint, .app.layout-chat .cursor-caption, .app.layout-chat .cam-bubble, .app.layout-chat .overlay { display: none !important; }
.app.layout-chat .takeover-catcher { cursor: zoom-in; }

/* Click to take over */
.takeover-catcher { position: absolute; inset: 0; z-index: 4; cursor: pointer; }
.control-hint.countdown { background: color-mix(in srgb, var(--human) 88%, black); }
.control-hint.countdown b { font-variant-numeric: tabular-nums; }

.btn:disabled, .btn.primary:disabled { opacity: .45; cursor: default; filter: none; }

/* ---------- conversations ---------- */
.chat-switch { position: relative; min-width: 0; flex: 1; display: flex; }
.chat-title-btn {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; height: 30px; padding: 0 8px 0 10px; margin-left: -10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--text); font-weight: 600; font-size: 13.5px;
}
.chat-title-btn:hover, .chat-title-btn[aria-expanded="true"] { background: var(--surface-3); }
.chat-title-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title-btn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-title-input {
  flex: 1; min-width: 0; height: 30px; margin-left: -10px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; outline: 0;
}
.chats-menu {
  position: absolute; left: -10px; top: 38px; z-index: 55; width: 340px; max-width: calc(100vw - 40px); max-height: min(560px, 70vh);
  display: flex; flex-direction: column; padding: 8px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); animation: pop .14s var(--ease);
}
.chats-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.chats-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chats-search svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; }
.chats-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
.chats-new {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font-weight: 550; text-align: left;
}
.chats-new:hover { background: var(--surface-3); }
.chats-new svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chats-new kbd { margin-left: auto; font: 11px var(--font); color: var(--text-3); }
.chats-list { overflow-y: auto; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.chats-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.chat-row {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 6px 6px 10px; border-radius: 10px;
  border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer;
}
.chat-row:hover { background: var(--surface-3); }
.chat-row.current { background: var(--accent-soft); }
.chat-row .cr-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.chat-row .cr-time { flex: none; font-size: 11.5px; color: var(--text-3); }
.chat-row .cr-actions { display: none; gap: 2px; flex: none; }
.chat-row:hover .cr-actions, .chat-row:focus-within .cr-actions { display: flex; }
.chat-row:hover .cr-time, .chat-row:focus-within .cr-time { display: none; }
.cr-actions button { width: 26px; height: 26px; border: 0; border-radius: 7px; display: grid; place-items: center; background: transparent; color: var(--text-2); }
.cr-actions button:hover { background: var(--surface); color: var(--text); }
.cr-actions button.danger:hover { color: var(--err); }
.cr-actions svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-row input { flex: 1; min-width: 0; height: 26px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--accent); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; outline: 0; }
.chats-empty { padding: 18px 10px; color: var(--text-3); font-size: 12.5px; text-align: center; }

/* ---------------------------------------------------------------- notices with an action */
.toast.blocked svg { color: var(--warn); }
.toast.has-action { padding-right: 8px; }
.toast-action {
  flex: none; height: 28px; padding: 0 12px; margin-left: 4px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--text); font-size: 12.5px; font-weight: 600;
}
.toast-action:hover { background: var(--surface-3); }

/* blocked site inside a task's steps */
.step.blocked { color: var(--text-2); }
.step.blocked .step-icon { color: var(--warn); }
.step-action {
  flex: none; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text); font-size: 11.5px; font-weight: 600;
}
.step-action:hover:not(:disabled) { background: var(--surface-3); }
.step-action:disabled { color: var(--ok); border-color: transparent; background: transparent; }

/* ---------------------------------------------------------------- Settings › Computer › Size */
.set-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; margin: 0 0 10px;
  border-radius: 12px; background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
.set-banner > span { display: flex; flex-direction: column; gap: 2px; }
.set-banner b { font-weight: 600; }
.set-banner small { color: var(--text-2); font-size: 12px; }
.res-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px 64px; align-items: center; gap: 14px; padding: 9px 0; }
.res-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.res-label b { font-weight: 600; }
.res-label small { color: var(--text-3); font-size: 12px; }
.res-val { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; font-size: 13px; }
.res-row select {
  grid-column: 2 / span 2; height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text); font: inherit;
}
.res-row select + .res-val { display: none; }
.res-row input[type="range"] {
  appearance: none; width: 100%; height: 4px; border-radius: 999px; margin: 0; cursor: pointer;
  background: linear-gradient(to right, var(--accent) var(--fill, 50%), var(--surface-3) var(--fill, 50%));
}
.res-row input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--surface);
  border: 1px solid var(--line-2); box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.res-row input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------------------------------------------------------------- Settings › Network */
.net-status {
  display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line-2); background: var(--surface-2);
}
.ns-icon { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.ns-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ns-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ns-text b { font-weight: 650; }
.ns-text small { color: var(--text-2); font-size: 12px; line-height: 1.45; }
.net-status .ns-check { display: none; }
.net-status.ok .ns-icon { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.net-status.ok .ns-check { display: inline; }
.net-status.warn .ns-icon { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.net-status.busy .ns-icon { color: var(--accent); background: var(--accent-soft); animation: pulse 1.4s ease-in-out infinite; }

.mode-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; }
.mode-picker label { display: flex; cursor: pointer; }
.mode-picker input { position: absolute; opacity: 0; pointer-events: none; }
.mode-card {
  flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; border: 1px solid var(--line-2);
  transition: border-color .15s, box-shadow .15s;
}
.mode-card b { font-weight: 650; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mode-card b em { font-style: normal; font-size: 10.5px; font-weight: 650; color: var(--accent-ink); background: var(--accent-soft); padding: 1px 6px; border-radius: 999px; }
.mode-card small { color: var(--text-3); font-size: 11.5px; line-height: 1.45; }
.mc-icon { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); margin-bottom: 4px; }
.mc-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mode-picker label:hover .mode-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-2)); }
.mode-picker input:checked + .mode-card { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mode-picker input:checked + .mode-card .mc-icon { background: var(--accent-soft); color: var(--accent); }
.mode-picker input:focus-visible + .mode-card { outline: 2px solid var(--accent); outline-offset: 2px; }

.rule-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rule-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 11px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface-2); font-size: 12.5px; font-weight: 550;
}
.rule-chip.block { background: color-mix(in srgb, var(--err) 8%, var(--surface-2)); }
.rule-chip button {
  width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: var(--text-3);
  font-size: 15px; line-height: 1; display: grid; place-items: center; padding: 0;
}
.rule-chip button:hover { background: var(--surface-3); color: var(--text); }
.rule-empty { color: var(--text-3); font-size: 12.5px; padding: 4px 0; }
.rule-add { display: flex; gap: 8px; }
.rule-add input {
  flex: 1; min-width: 0; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text); font: inherit; outline: none;
}
.rule-add input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rule-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.rs-label { color: var(--text-3); font-size: 12px; margin-right: 2px; }
.rs-chip {
  height: 26px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--line-2); background: transparent;
  color: var(--text-2); font-size: 12px; font-weight: 550;
}
.rs-chip:hover { border-style: solid; color: var(--text); }
.rs-chip.on { border-style: solid; border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }

.group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.group-head h4 { margin: 6px 0; flex: 1; }
.group-head .link-btn { margin: 0; }
.segmented.small { padding: 2px; }
.segmented.small .seg { height: 24px; padding: 0 10px; font-size: 12px; }
.net-activity { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.na-empty { padding: 18px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.na-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; border-bottom: 1px solid var(--line); }
.na-row:last-child { border-bottom: 0; }
.na-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ok); }
.na-row.blocked .na-dot { background: var(--err); }
.na-row.failed .na-dot { background: var(--text-3); }
.na-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.na-host { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-detail { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-row.blocked .na-detail { color: var(--err); }
.na-time { font-size: 11.5px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.na-row .btn.small { height: 26px; padding: 0 10px; font-size: 12px; opacity: 0; transition: opacity .12s; }
.na-row:hover .btn.small, .na-row .btn.small:focus-visible { opacity: 1; }
.net-foot { margin-top: 12px; font-size: 12px; color: var(--text-3); }
.net-foot b { font-weight: 600; color: var(--text-2); }
.na-row.blocked .btn.small { opacity: 1; }

/* ---------------------------------------------------------------- copy & retry under messages */
.msg-actions { display: flex; gap: 2px; margin-top: -10px; opacity: 0; transition: opacity .15s; min-height: 26px; }
.msg-actions.user { align-self: flex-end; margin-bottom: -8px; }
.msg-actions.assistant, .msg-actions.error { align-self: flex-start; padding-left: 34px; }
.msg:hover + .msg-actions, .msg-actions:hover, .msg-actions:focus-within, .msg-actions.latest { opacity: 1; }
.msg-actions .act {
  width: 26px; height: 26px; border: 0; border-radius: 8px; display: grid; place-items: center;
  background: transparent; color: var(--text-3); padding: 0;
}
.msg-actions .act:hover { background: var(--surface-3); color: var(--text); }
.msg-actions .act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.msg-actions .act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.msg-actions .act.done { color: var(--ok); }
.agent-running .msg-actions .act-retry { display: none; }

/* When you quit Thirdhand */
.quit-choice { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 12px; }
.quit-choice .qc-label { margin: 4px 0 2px; }
.quit-choice .qc-label b { font-weight: 600; }
.quit-choice label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); cursor: pointer; }
.quit-choice label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.quit-choice input { accent-color: var(--accent); margin: 3px 0 0; }
.quit-choice span { display: flex; flex-direction: column; gap: 2px; }
.quit-choice b { font-weight: 600; }
.quit-choice small { color: var(--text-3); font-size: 12px; line-height: 1.45; }

/* ---------------------------------------------------------------- Settings › Model */
#model-inuse { margin: 10px 0 0; }
#model-inuse.warn { color: var(--warn); font-weight: 550; }
.lm-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.lm-row {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.lm-row.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lm-row.disabled { opacity: .55; }
.lm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lm-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lm-title b { font-weight: 650; font-size: 13.5px; }
.badge { font-style: normal; font-size: 10.5px; font-weight: 650; color: var(--accent-ink); background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; }
.badge.on { color: var(--on-accent); background: var(--accent); }
.lm-meta { color: var(--text-3); font-size: 11.5px; }
.lm-blurb { color: var(--text-2); font-size: 12px; line-height: 1.45; }
.lm-note { color: var(--warn); font-size: 11.5px; }
.lm-progress { height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.lm-progress i { display: block; height: 100%; background: var(--grad); border-radius: inherit; transition: width .4s var(--ease); }
.lm-dl { color: var(--text-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lm-dl.err { color: var(--err); }
.lm-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.lm-actions .link-btn { margin: 0; font-size: 12px; }
.cp-presets { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; vertical-align: middle; }
.cp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-result { font-size: 12.5px; color: var(--text-2); }
.cp-result.ok { color: var(--ok); }
.cp-result.err { color: var(--err); }

/* the model button under the chat */
.chip.needs-setup { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2)); }
.model-menu { min-width: 250px; max-height: 60vh; overflow: auto; }
.model-menu .mm-item { justify-content: space-between; }
.mm-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.mm-text small { color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-check { color: var(--accent); font-weight: 700; }
.model-menu .mm-item.on { background: var(--accent-soft); }

/* ---------------------------------------------------------------- test suite */
.ev-body { padding: 4px 22px 8px; max-height: min(68vh, 640px); overflow: auto; }
.ev-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 4px 0 12px; }
.ev-pick h4 { margin: 0 0 8px; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.ev-checks { display: flex; flex-direction: column; gap: 6px; }
.ev-checks label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ev-checks small { color: var(--text-3); }
.ev-pick h4.ev-sub { margin-top: 14px; }
.ev-results .lvl { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 10.5px; font-weight: 650; background: var(--surface-2); color: var(--text-2); }
.ev-empty { color: var(--text-3); font-size: 12.5px; }
.ev-progress { margin: 6px 0 12px; font-size: 13px; color: var(--text-2); }
.ev-progress b { color: var(--text); }
.ev-results table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ev-results th, .ev-results td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ev-results th { font-weight: 650; color: var(--text-2); }
.ev-results td.num, .ev-results th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ev-results tr.group td { font-weight: 650; background: var(--surface-2); }
.ev-results .pass { color: var(--ok); font-weight: 650; }
.ev-results .fail { color: var(--err); font-weight: 650; }
.ev-results .run { color: var(--text-3); }
.ev-results .sum td { font-weight: 650; }
.ev-results h4 { margin: 16px 0 8px; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }

/* ================================================================ 1.5: new look
   Rail on the left, Home as the first screen, softer task view. */

/* ---------- frame ---------- */
.app { display: flex; flex-direction: column; height: 100vh; }
.titlebar { height: 50px; gap: 12px; }
#settings-btn { display: none; } /* Settings lives in the rail */
.body-row { flex: 1; min-height: 0; display: flex; }
.workspace { padding: 0 14px 14px 4px; }
.app.view-home .titlebar #control,
.app.view-home .titlebar #media-controls,
.app.view-home .titlebar .view-switch { display: none !important; }
.app.view-schedule .titlebar #control,
.app.view-schedule .titlebar #media-controls,
.app.view-schedule .titlebar .view-switch { display: none !important; }
.app.view-apps .titlebar #control,
.app.view-apps .titlebar #media-controls,
.app.view-apps .titlebar .view-switch { display: none !important; }

h1, h2, h3, .sheet-head h2, .settings-nav h2, .welcome h2, .boot-card h1, .about h3, .drop-card strong {
  font-family: var(--display); letter-spacing: -.015em;
}
.sheet-head h2, .settings-nav h2, .welcome h2, .boot-card h1, .about h3 { font-weight: 700; }

/* status pill: the character's face says what's happening */
.status-pill { height: 30px; padding: 0 12px 0 4px; gap: 6px; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); font-weight: 600; }
.status-pill .status-dot { display: none; }
.status-face { width: 24px; height: 24px; color: var(--coral); }
.status-pill.s-ready .status-face { color: var(--mint); }
.status-pill.s-working { background: var(--coral-soft); box-shadow: none; }
.status-pill.s-busy .status-face { color: var(--sun); }
.status-pill.s-error { background: var(--coral-soft); }
.status-pill.s-off .status-face { color: var(--text-3); }

/* ---------- rail ---------- */
.rail {
  width: 80px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 2px 0 14px;
}
.rail-btn {
  width: 64px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 7px;
  border: 0; border-radius: 16px; background: transparent; color: var(--text-3); font-size: 11.5px; font-weight: 600;
  transition: background .15s, color .15s;
}
.rail-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.rail-btn[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.rail-spacer { flex: 1; }
.rail-pc { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; color: var(--text-3); font-size: 10.5px; font-weight: 600; padding: 6px 0; margin-bottom: 4px; }
.rail-pc i { width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); }
.rail-pc i.ok { background: var(--mint); box-shadow: 0 0 0 4px var(--mint-soft); }
.rail-pc i.busy { background: var(--sun); box-shadow: 0 0 0 4px var(--sun-soft); animation: pulse 1.4s ease-in-out infinite; }
.rail-pc i.err { background: var(--err); box-shadow: 0 0 0 4px var(--coral-soft); }
.rail-pc:hover { color: var(--text); }
.rail-me {
  width: 38px; height: 38px; margin-top: 6px; border-radius: 50%; border: 0; background: var(--sun-soft); color: var(--text);
  font-family: var(--display); font-weight: 700; font-size: 15px;
}
.rail-me:hover { box-shadow: 0 0 0 3px var(--surface); }

/* ---------- buttons, chips, composer ---------- */
.btn { border: 0; background: var(--surface-3); color: var(--text); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn:hover { background: color-mix(in srgb, var(--surface-3) 70%, var(--text) 8%); }
.btn.primary { background: var(--btn); color: var(--btn-ink); }
.btn.primary:hover { filter: none; background: color-mix(in srgb, var(--btn) 86%, var(--coral)); }
.btn.ghost { background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); }
.btn.big { height: 46px; font-size: 15px; padding: 0 22px; }
.btn.small svg { width: 15px; height: 15px; }
.round-btn.send { background: var(--btn); color: var(--btn-ink); width: 36px; height: 36px; }
.round-btn.stop { background: var(--coral-soft); color: var(--text); width: 36px; height: 36px; }
.chip { height: 30px; padding: 0 12px; background: var(--surface-2); color: var(--text); font-weight: 600; }
.chip svg { color: var(--coral); }
.add-btn { width: 34px; height: 34px; background: var(--surface-2); }
.composer-box { border-radius: 24px; background: var(--surface-2); border: 1px solid transparent; }
.composer-box:focus-within { border-color: color-mix(in srgb, var(--coral) 45%, transparent); box-shadow: 0 0 0 4px var(--coral-soft); }
input.switch:checked { background: var(--mint); }

/* ---------- chat (task view) ---------- */
.sidebar { width: 420px; border-radius: var(--r-lg); }
.device { border-radius: var(--r-lg); }
.msg.user { background: var(--btn); color: var(--btn-ink); border-radius: 22px 22px 6px 22px; padding: 11px 16px; }
.avatar { width: 30px; height: 30px; margin-top: -3px; }
.avatar .buddy { width: 30px; height: 30px; }
.activity { background: transparent; border-left: 2px solid var(--surface-3); border-radius: 0; margin-left: 13px; }
.activity summary { padding: 6px 12px; }
.activity-title { font-size: 13px; }
.steps-list { padding: 2px 12px 8px; }
.step-icon { background: var(--surface-2); box-shadow: none; border-radius: 9px; }
.step.current { font-weight: 600; }
.step.current .step-icon { background: var(--coral-soft); color: var(--coral); }
.spinner { border-color: var(--coral-soft); border-top-color: var(--coral); }
.done-dot { background: var(--mint); }
.dots i { background: var(--coral); }
.made-files { display: flex; flex-direction: column; gap: 6px; margin: -6px 0 0 34px; animation: fadein .25s var(--ease); }
.made-file { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 10px; border-radius: 16px; background: var(--surface-2); }
.mf-ext, .hw-ext { width: 34px; height: 40px; flex: none; border-radius: 8px; display: grid; place-items: end center; padding-bottom: 5px; font: 600 8.5px/1 var(--mono); color: var(--text); }
.mf-what { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mf-what b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-what small { color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-mint { background: var(--mint-soft); } .c-cobalt { background: var(--cobalt-soft); } .c-coral { background: var(--coral-soft); }
.c-sun { background: var(--sun-soft); } .c-ink { background: var(--surface-3); }
.welcome-mark .logo { width: 72px; height: 72px; }
.welcome h2 { font-size: 30px; }
.welcome-lead { font-family: var(--font); font-weight: 500; font-size: 17px; }
.sug-icon { background: var(--coral-soft); color: var(--coral); }
.agent-cursor svg path { fill: var(--coral); }
.cursor-caption { background: var(--coral); border-radius: 999px; padding: 4px 11px; font-weight: 700; }
.seg.active { background: var(--surface); }
#seg-agent.active { background: var(--coral-soft); color: var(--text); box-shadow: none; }
#seg-agent.active svg { fill: var(--coral); }
#seg-you.active { background: var(--cobalt-soft); color: var(--text); box-shadow: none; }

/* setup card */
.orb { width: 84px; height: 84px; background: none; box-shadow: none; }
.orb .buddy { width: 84px; height: 84px; color: var(--coral); animation: bob 1.6s ease-in-out infinite; }
.orb span { display: none; }
.orb.still .buddy, .orb.error .buddy { animation: none; }
.orb.error { background: none; box-shadow: none; }
.orb.error::after { display: none; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.overlay { background: var(--surface-2); }
.progress div { background: var(--coral); }
.steps li.active .tick { border-color: var(--coral); border-top-color: transparent; }
.steps li.done .tick { background: var(--mint); border-color: var(--mint); }

/* ---------- Home ---------- */
.home { flex: 1; min-width: 0; overflow-y: auto; padding: 0 14px 0 4px; user-select: none; }
.home::-webkit-scrollbar { width: 10px; }
.home::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid var(--bg); }
.home-inner { max-width: 1120px; min-height: 100%; margin: 0 auto; padding: 26px 24px 44px; display: flex; flex-direction: column; justify-content: center; gap: 0; }
/* Centred when it fits; a little above the middle looks centred to the eye. */
.home-inner::after { content: ""; flex: 0 1 8vh; }
.home-ask .menu.up { top: calc(100% + 8px); bottom: auto; }
.home-q { margin: 6px 0 18px; text-align: center; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }

.home-ask { position: relative; width: min(760px, 100%); margin: 0 auto; }
.home-peek { position: absolute; top: -40px; right: 46px; width: 58px; height: 58px; z-index: 0; color: var(--coral); }

/* ---------- the character, alive (mascot.js) ---------- */
.mascot { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.mascot:focus-visible .m-svg { filter: drop-shadow(0 0 0 2px var(--coral)); }
.m-svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; }
.m-all { transform-origin: 32px 59px; transition: transform .25s var(--ease); }
.m-eyes { transform-origin: 32px 30px; transition: transform .07s ease-in; }
.mascot.blink .m-eyes { transform: scaleY(.08); }
.m-pupils { transition: transform .14s var(--ease); }
.m-mouth { transition: d .2s var(--ease); }
.m-happy, .m-arm-up, .m-arm-work, .m-waves { display: none; }
.mascot.happy .m-eyes { display: none; }
.mascot.happy .m-happy { display: inline; }
/* hand up when pointed at, or when a task needs you */
.mascot.hover .m-arm-down, .mascot[data-mood="ask"] .m-arm-down,
.mascot.hover .m-arm-work, .mascot[data-mood="ask"] .m-arm-work { display: none; }
.mascot.hover .m-arm-up, .mascot[data-mood="ask"] .m-arm-up { display: inline; }
.m-arm-up { transform-origin: 15px 28px; }
.mascot.hover .m-arm-up { animation: m-wave .9s ease-in-out infinite; }
.mascot.hover .m-waves { display: inline; }
.mascot.hover .m-all { transform: translateY(-3px) rotate(-3deg); }
.mascot[data-mood="ask"]:not(.hover) .m-arm-up { animation: m-wave 1.6s ease-in-out infinite; }
.mascot[data-mood="ask"]:not(.hover) .m-all { animation: m-bob 1.6s ease-in-out infinite; }
/* working: arm on the desk, eyes reading left to right, a gentle bob */
.mascot[data-mood="work"]:not(.hover) .m-arm-down { display: none; }
.mascot[data-mood="work"]:not(.hover) .m-arm-work { display: inline; }
.mascot[data-mood="work"] .m-pupils { animation: m-read 1.8s ease-in-out infinite; }
.mascot[data-mood="work"]:not(.hover) .m-all { animation: m-bob 1.2s ease-in-out infinite; }
.mascot.hop .m-svg { animation: m-hop .6s cubic-bezier(.3, 1.4, .5, 1); }
.mascot.spin .m-svg { animation: m-spin .8s var(--ease); }
.m-bubble { position: absolute; right: calc(100% + 6px); top: -6px; z-index: 3; padding: 7px 12px; border-radius: 14px 14px 4px 14px; background: var(--surface); box-shadow: var(--shadow-md); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.m-bubble.pop { animation: m-pop .25s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes m-wave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-16deg); } 70% { transform: rotate(10deg); } }
@keyframes m-bob { 50% { transform: translateY(-2.5px); } }
@keyframes m-read { 0%, 100% { transform: translate(-2.2px, 1.8px); } 45% { transform: translate(2.2px, 1.8px); } 55% { transform: translate(2.2px, 2.4px); } }
@keyframes m-hop { 0% { transform: none; } 20% { transform: scale(1.12, .86); } 50% { transform: translateY(-14px) scale(.94, 1.08); } 80% { transform: scale(1.06, .94); } 100% { transform: none; } }
@keyframes m-spin { 0% { transform: none; } 40% { transform: translateY(-16px) rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes m-pop { from { opacity: 0; transform: translateY(6px) scale(.9); } }
@media (prefers-reduced-motion: reduce) {
  .mascot *, .mascot .m-svg { animation: none !important; transition: none !important; }
}
.home-ask .composer { position: relative; z-index: 1; padding: 0; }
.home-ask .composer-box { background: var(--surface); box-shadow: var(--shadow-md); border-radius: 26px; padding: 18px 12px 10px 22px; }
.home-ask .composer textarea { font-size: 16.5px; min-height: 50px; }
.home-ask .composer.has-card textarea { min-height: 0; }
.home-ask .composer-foot { display: none; }

/* what's live: a task waiting for you, the task running */
.home-live { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.home-live[hidden] { display: none; }
.home-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 34px; padding: 0 5px 0 13px; border: 0; border-radius: 999px; background: var(--coral-soft); color: var(--text); font-size: 13px; font-weight: 600; animation: fadein .2s var(--ease); }
.home-pill-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 460px; }
.home-pill b { flex: none; background: var(--btn); color: var(--btn-ink); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 650; }
.home-pill:hover b { filter: brightness(1.15); }
.home-pill.k-hand { background: var(--cobalt-soft); }
.home-pill.k-setup { background: var(--sun-soft); }
.home-pill.run { background: var(--surface); box-shadow: var(--shadow-sm); }
.home-pill.run b { background: var(--surface-3); color: var(--text); }
.home-pill-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--coral); animation: pulse 1.2s ease-in-out infinite; }
.home-pill-more { align-self: center; border: 0; background: none; padding: 4px 6px; border-radius: 999px; font: 500 12.5px var(--font); color: var(--text-3); cursor: pointer; }
.home-pill-more:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }

/* new install: three plain starter tasks */
.home-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.home-starters[hidden] { display: none; }
.home-try { height: 34px; padding: 0 13px; border-radius: 11px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font-size: 13px; font-weight: 600; }
.home-try:hover { background: var(--surface); color: var(--text); }

/* your space */
.home-wh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 40px 0 12px; }
.home-wh h2 { margin: 0; font-size: 20px; font-weight: 700; }
.home-wh-acts { display: flex; align-items: center; gap: 6px; }
.home-lnk { height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-size: 13px; font-weight: 600; }
.home-lnk:hover { color: var(--text); background: var(--surface-2); }
.home-lnk.solid { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.home-lnk[hidden] { display: none; }
#home-add-menu { min-width: 280px; width: 340px; max-width: calc(100vw - 140px); max-height: min(60vh, 520px); overflow-y: auto; right: 0; left: auto; }
/* A widget you made can have a long description: two lines, never a menu wider than the window. */
#home-add-menu .mm-text { flex: 1; }
#home-add-menu .mm-text small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hw-menu-item { display: flex !important; align-items: flex-start !important; }
.hw-menu-item .mm-text b { font-weight: 600; }

.home-empty p { margin: 0 0 12px; color: var(--text-2); font-size: 14px; max-width: 620px; }

.home-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 150px; grid-auto-flow: row dense; gap: 14px; }
.home-grid[hidden] { display: none; }
@media (max-width: 900px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hw { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface); border-radius: 22px; padding: 14px 16px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 8px; animation: fadein .2s var(--ease); }
.hw-s { grid-column: span 1; }
.hw-w { grid-column: span 2; }
.hw-t { grid-column: span 1; grid-row: span 2; }
.hw-l { grid-column: span 2; grid-row: span 2; }
.hw-title { display: flex; align-items: center; gap: 6px; min-height: 18px; font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.hw-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-ts { margin-left: auto; flex: none; font: 500 10.5px var(--mono); color: var(--text-3); white-space: nowrap; }
button.hw-ts.link { border: 0; background: none; padding: 0; font: 600 11.5px var(--body); color: var(--text-2); }
button.hw-ts.link:hover { color: var(--text); text-decoration: underline; }
.hw-empty { margin: 0; color: var(--text-3); font-size: 12.5px; line-height: 1.45; }
.hw-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* compact rows: recent tasks, schedule, files */
.hw-rows { display: flex; flex-direction: column; min-height: 0; }
.hw-rowbtn { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 5px 4px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); text-align: left; font-size: 13px; }
.hw-rowbtn:first-child { border-top: 0; }
.hw-rowbtn:hover .hw-rt { text-decoration: underline; }
.hw-rt { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.hw-rs { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 12px; }
.hw-rowbtn time { margin-left: auto; flex: none; font: 500 10.5px var(--mono); color: var(--text-3); }
.hw-st { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--mint); }
.hw-st.off { background: var(--text-3); opacity: .6; } .hw-st.plan { background: var(--cobalt); }
.hw-st.need { background: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); } .hw-st.run { background: var(--sun); animation: pulse 1.2s ease-in-out infinite; } .hw-st.rem { background: var(--sun); }
.hw-file .hw-ext { width: 22px; height: 26px; border-radius: 6px; padding-bottom: 3px; font-size: 6.5px; }

.hw-pc { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.hw-row { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.hw-row b { margin-left: auto; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.hw-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.hw-dot.s-ok { background: var(--mint); } .hw-dot.s-busy { background: var(--sun); } .hw-dot.s-err { background: var(--err); }
.hw-meter { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; flex: none; }
.hw-meter i { display: block; height: 100%; border-radius: inherit; background: var(--mint); }

/* edit layout */
.home-grid.editing .hw { outline: 2px dashed var(--line-2); outline-offset: 3px; cursor: grab; }
.home-grid.editing .hw * { pointer-events: none; }
.home-grid.editing .hw .hw-tools, .home-grid.editing .hw .hw-tools * { pointer-events: auto; }
.home-grid .hw.dragging { opacity: .4; }
.home-grid .hw.drop { outline-color: var(--coral); }
.hw-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; z-index: 2; }
.hw-tool { width: 28px; height: 28px; border: 0; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--text); }
.hw-tool.txt { font: 700 12px var(--body); }
.hw-tool:disabled { opacity: .35; cursor: default; }
.hw-tool .hw-ico { width: 15px; height: 15px; }

/* ---------- first run ---------- */
.home-welcome { min-height: 100%; display: grid; place-items: center; padding: 20px 20px 40px; }
.hw-onb { width: min(440px, 100%); background: var(--surface); border-radius: 32px; box-shadow: var(--shadow-lg); padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 14px; animation: sheet .25s var(--ease); }
.hw-onb-dots { display: flex; gap: 5px; }
.hw-onb-dots i { width: 14px; height: 5px; border-radius: 9px; background: var(--surface-3); transition: width .2s var(--ease); }
.hw-onb-dots i.on { width: 28px; background: var(--btn); }
.hw-onb h2 { margin: 4px 0 0; font-size: 32px; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; }
.hw-onb > p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.hw-onb-art { position: relative; height: 230px; display: grid; place-items: center; }
.hw-onb-face { width: 160px; height: 160px; animation: bob 2.2s ease-in-out infinite; }
.hw-onb-bubble { position: absolute; padding: 6px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-md); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.hw-onb-bubble.b1 { top: 8%; left: 0; } .hw-onb-bubble.b2 { top: 50%; right: 0; } .hw-onb-bubble.b3 { bottom: 4%; left: 8%; }
.hw-onb-pick { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 6px; }
.hw-onb-opt { display: flex; align-items: center; gap: 12px; text-align: left; border: 2px solid transparent; background: var(--surface-2); border-radius: 18px; padding: 9px 10px 9px 16px; }
.hw-onb-opt > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hw-onb-opt b { font-weight: 650; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.hw-onb-opt small { color: var(--text-3); font-size: 12.5px; line-height: 1.4; }
.hw-onb-opt .buddy { width: 40px; height: 40px; }
.hw-onb-opt.brain { padding: 14px 16px; }
.hw-onb-opt[aria-pressed="true"] { border-color: var(--text); background: var(--surface); }
.hw-tag { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--mint-soft); color: var(--text); }
.hw-onb-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: center; margin-top: 4px; }
.hw-onb-foot small { color: var(--text-3); font-size: 12.5px; }

/* light-only fixes for things drawn with fixed colours */
.swatch.light { background: linear-gradient(90deg, #edf0ea 0 62%, #ffffff 62%); }
.swatch.dark { background: linear-gradient(90deg, #111312 0 62%, #1a1d1b 62%); }
.swatch.system { background: linear-gradient(90deg, #edf0ea 0 50%, #111312 50%); }
.provider-logo { font-family: var(--display); }

/* ---------- scheduled tasks ---------- */
.schedule { flex: 1; min-width: 0; overflow-y: auto; padding: 0 14px 0 4px; user-select: none; }
.sched-inner { max-width: 1120px; margin: 0 auto; padding: 30px 24px 40px; display: flex; flex-direction: column; gap: 18px; }
.sched-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 6px; }
.sched-head h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.025em; }
.sched-head p { margin: 4px 0 0; color: var(--text-2); font-size: 14.5px; }
.sched-head .btn { height: 42px; flex: none; }
.sched-head .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sched-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.sched-grid[hidden] { display: none; }
.sc-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 16px 12px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-md); text-align: left; color: var(--text); animation: fadein .2s var(--ease); }
.sc-card.off { box-shadow: none; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.sc-card.off .sc-name b, .sc-card.off .sc-prompt { color: var(--text-3); }
.sc-card.needs { box-shadow: var(--shadow-md), inset 0 0 0 2px var(--coral-soft); }
.sc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sc-tile { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; }
.sc-tile .buddy { width: 32px; height: 32px; }
.sc-tile.c-cobalt { background: var(--cobalt-soft); } .sc-tile.c-mint { background: var(--mint-soft); }
.sc-tile.c-coral { background: var(--coral-soft); } .sc-tile.c-sun { background: var(--sun-soft); } .sc-tile.c-ink { background: var(--surface-3); }
.sc-card.running .sc-tile .buddy { animation: bob 1.4s ease-in-out infinite; }
.sc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-name b { font-family: var(--display); font-size: 16.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-when { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 12.5px; font-weight: 550; }
.sc-when svg, .sc-ibtn svg, .sc-run svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sc-run svg { fill: currentColor; stroke-width: 1.4; width: 11px; height: 11px; margin-right: 2px; }
.sc-prompt { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sc-ask { margin: 0; padding: 7px 10px; border-radius: 12px; background: var(--coral-soft); font-size: 12.5px; color: var(--text); }
.sc-runs { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 12px; color: var(--text-3); }
.sc-runs-l { font-weight: 600; }
.sc-dots { display: flex; align-items: center; gap: 4px; }
.sc-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--mint); flex: none; }
button.sc-dot:hover { transform: scale(1.3); }
.sc-dot.o-needs, .sc-dot.o-error { background: var(--coral); }
.sc-dot.o-stopped { background: var(--text-3); opacity: .55; }
.sc-dot.o-running { background: var(--coral); animation: pulse 1.2s ease-in-out infinite; }
.sc-last { margin-left: auto; height: 24px; padding: 0 9px; border: 0; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: var(--text); white-space: nowrap; }
.sc-last.c-mint { background: var(--mint-soft); } .sc-last.c-coral { background: var(--coral-soft); } .sc-last.c-ink { background: var(--surface-3); }
button.sc-last:hover { filter: brightness(.96); }
.sc-foot { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.sc-foot .grow { flex: 1; }
.sc-next { display: block; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; font-weight: 600; color: var(--text); }
.sc-next small { margin-right: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.sc-card.off .sc-next { color: var(--text-3); }
.sc-run { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: none; }
.sc-ibtn { width: 30px; height: 30px; border: 0; border-radius: 10px; display: grid; place-items: center; background: transparent; color: var(--text-2); }
.sc-ibtn:hover { background: var(--surface-2); color: var(--text); }
.sc-ibtn.danger:hover { color: var(--accent-ink); background: var(--coral-soft); }
.sched-empty { text-align: left; }
.sched-empty[hidden] { display: none; }
.sched-empty h2 { margin: 6px 0 4px; font-size: 21px; font-weight: 700; }
.sched-empty p { margin: 0; color: var(--text-2); font-size: 14px; }
.sched-ideas { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.sched-ideas[hidden] { display: none; }
.sched-ideas h3 { margin: 10px 0 0; font-size: 15px; font-weight: 700; color: var(--text-2); }
.sc-idea { border: 0; cursor: pointer; box-shadow: none; background: color-mix(in srgb, var(--surface) 60%, transparent); outline: 1px dashed var(--line-2); outline-offset: -1px; transition: background .15s, transform .15s var(--ease); }
.sc-idea:hover { background: var(--surface); transform: translateY(-1px); outline-color: transparent; box-shadow: var(--shadow-md); }
.sc-idea .sc-tile .buddy { color: var(--text); }
.sc-idea .sc-tile.c-cobalt .buddy { color: var(--cobalt); } .sc-idea .sc-tile.c-mint .buddy { color: var(--mint); } .sc-idea .sc-tile.c-coral .buddy { color: var(--coral); } .sc-idea .sc-tile.c-sun .buddy { color: var(--sun); }
.sc-use { flex: none; height: 28px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--btn); color: var(--btn-ink); font-size: 12px; font-weight: 650; opacity: 0; transition: opacity .15s; }
.sc-idea:hover .sc-use, .sc-idea:focus-visible .sc-use { opacity: 1; }
.sched-foot { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; color: var(--text-3); font-size: 12.5px; line-height: 1.5; max-width: 80ch; }
.sched-foot svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sched-form .field-group { padding-top: 8px; }
.sf-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sf-row .field { flex: 1; min-width: 130px; }
.field input[type="time"], .field input[type="date"] { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .sched-head { flex-direction: column; align-items: flex-start; } }

/* ---------- your own widgets ---------- */
.hw-mine.c-cobalt { background: var(--cobalt-soft); } .hw-mine.c-mint { background: var(--mint-soft); }
.hw-mine.c-coral { background: var(--coral-soft); } .hw-mine.c-sun { background: var(--sun-soft); }
.hw-mine { box-shadow: none; }
.hw-mine.rich { background: var(--surface); box-shadow: var(--shadow-md); }
.hw-mine .hw-title { color: var(--text); }
.hw-mine:not(.rich) .hw-ts { color: var(--text-2); }
.hw-blocks { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hw-mine.hw-s:not(.rich) .hw-blocks, .hw-mine.hw-w:not(.rich) .hw-blocks { justify-content: flex-end; }
.hw-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.hw-big-v { font-family: var(--display); font-weight: 800; font-size: 38px; line-height: .95; letter-spacing: -.03em; overflow-wrap: anywhere; }
.hw-t .hw-big-v, .hw-l .hw-big-v { font-size: 46px; }
.hw-big-u { font-weight: 600; font-size: 13px; color: var(--text-2); }
.hw-change { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.hw-change.up { color: var(--mint); } .hw-change.down { color: var(--accent-ink); }
.hw-big-l { color: var(--text-2); font-size: 12px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.hw-text { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.hw-t .hw-text, .hw-l .hw-text { -webkit-line-clamp: 10; }
.hw-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; overflow: hidden; }
.hw-lines li { position: relative; padding-left: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.hw-lines li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; }
.hw-prog { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.hw-prog b { color: var(--text); font-variant-numeric: tabular-nums; }
.hw-mine:not(.rich) .hw-meter { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.hw-mine:not(.rich) .hw-meter i { background: var(--text); }
.hw-chart { flex: 1 1 40px; min-height: 34px; display: flex; flex-direction: column; gap: 3px; }
.hw-plot { position: relative; flex: 1; min-height: 0; }
.hw-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.hw-plot-dot { position: absolute; right: -3px; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.hw-axis { display: flex; justify-content: space-between; gap: 4px; }
.hw-axis.even { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); text-align: center; }
.hw-axis { font-size: 10.5px; color: var(--text-3); flex: none; }
.hw-axis span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-tablewrap { min-height: 0; overflow: hidden; }
.hw-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 12.5px; }
.hw-table th { text-align: left; font-weight: 600; color: var(--text-3); font-size: 11px; padding: 0 14px 3px 0; white-space: nowrap; }
.hw-table th:last-child, .hw-table td:last-child { padding-right: 0; }
.hw-table td { padding: 4px 14px 4px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-table .r { text-align: right; }
.hw-building { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: var(--text-2); font-size: 12px; }
.hw-building-face { width: 40px; height: 40px; animation: bob 1.6s ease-in-out infinite; }
.hw-problem { margin: 0; font-size: 11.5px; color: var(--accent-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.hw-hover { position: absolute; top: 6px; right: 7px; padding: 3px; border-radius: 12px; background: inherit; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; z-index: 2; }
.hw:hover .hw-hover, .hw:focus-within .hw-hover { opacity: 1; }
.hw-hover .hw-tool { width: 26px; height: 26px; background: var(--surface); box-shadow: var(--shadow-sm); }
.hw-mine.updating .hw-hover { opacity: 1; }
.hw-mine.updating .hw-hover .hw-tool:first-child .hw-ico { animation: spin 1s linear infinite; }
.hw-menu-item.mine b { color: var(--accent-ink); }
.wf-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.wf-colors { display: flex; gap: 10px; }
.wf-color { position: relative; cursor: pointer; }
.wf-color input { position: absolute; opacity: 0; pointer-events: none; }
.wf-color i { display: block; width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.wf-color.c-cobalt i { background: var(--cobalt-soft); } .wf-color.c-mint i { background: var(--mint-soft); }
.wf-color.c-coral i { background: var(--coral-soft); } .wf-color.c-sun i { background: var(--sun-soft); }
.wf-color input:checked + i { border-color: var(--text); }
.wf-color input:focus-visible + i { outline: 2px solid var(--coral); outline-offset: 2px; }
.wf-color { background: none !important; }
.home-grid.editing .hw-ts { visibility: hidden; }
.home-grid.editing .hw-tools { padding: 3px; border-radius: 12px; background: inherit; }

/* ---------- settings: about you, sign-ins ---------- */
.uses-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.uses-pick button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font-size: 13px; font-weight: 600; }
.uses-pick button[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.set-intro { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; margin-bottom: 6px; border-radius: 18px; background: var(--cobalt-soft); }
.set-intro p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.si-hero { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--surface); color: var(--cobalt); }
.si-hero svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.si-list { display: flex; flex-direction: column; }
.si-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.si-row:first-child { border-top: 0; }
.si-tile { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--text); }
.si-tile.c-cobalt { background: var(--cobalt-soft); } .si-tile.c-mint { background: var(--mint-soft); } .si-tile.c-coral { background: var(--coral-soft); } .si-tile.c-sun { background: var(--sun-soft); }
.si-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.si-what b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-what small { color: var(--text-3); font-size: 12px; line-height: 1.4; }
.si-what small.si-warn { color: var(--accent-ink); }
.si-use { height: 30px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; }
.si-add { margin-top: 8px; }
.si-rules { margin: 0 0 10px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.si-rules b { color: var(--text); font-weight: 600; }

/* ---------- a task asks to use a sign-in ---------- */
.consent-card { align-self: stretch; padding: 14px 16px; border-radius: 18px; background: var(--coral-soft); animation: fadein .25s var(--ease); }
.cc-head { display: flex; align-items: center; gap: 10px; }
.cc-head b { font-family: var(--display); font-size: 16px; font-weight: 700; }
.cc-face { width: 30px; height: 30px; color: var(--coral); flex: none; }
.consent-card p { margin: 6px 0 12px; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.cc-acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- signing in: a bar over the computer ---------- */
.signin-bar { position: absolute; z-index: 20; top: 12px; left: 50%; transform: translateX(-50%); width: min(720px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg); animation: fadein .25s var(--ease); }
.sb-face { width: 36px; height: 36px; flex: none; color: var(--coral); }
.sb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-text b { font-size: 13.5px; font-weight: 650; }
.sb-text small { font-size: 12px; color: var(--text-3); }

/* ---------- paying: your turn, over the computer ---------- */
.pay-bar { width: min(780px, calc(100% - 24px)); align-items: center; padding: 12px 12px 12px 14px; gap: 14px; border: 1px solid color-mix(in srgb, var(--coral) 22%, transparent); }
.pb-tile { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--coral-soft); color: var(--coral); }
.pb-tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pay-bar .sb-text { gap: 2px; }
.pay-bar #pb-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font-weight: 600; }
.pb-lead { font-size: 12px; font-weight: 600; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .04em; flex-basis: 100%; }
.pb-amount { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.pb-amount:empty { display: none; }
.pb-site { font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.pb-amount:not(:empty) + .pb-site::before { content: "to "; font-weight: 500; color: var(--text-3); }
.pay-bar #pb-what { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-bar #pb-what:empty { display: none; }
.pb-safe { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.pb-safe svg { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--mint); stroke-width: 2.2; stroke-linecap: round; }
.pb-acts { flex: none; display: flex; align-items: center; gap: 6px; }
.pb-apps { display: contents; }
.pb-apps .btn .pa-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); display: inline-block; margin-right: 6px; vertical-align: 1px; }
@media (max-width: 760px) { .pay-bar { flex-wrap: wrap; } .pb-acts { flex-basis: 100%; justify-content: flex-end; } }

/* ---------- spending: the meter in Settings, "keep going?" in the chat ---------- */
.spend-meter { padding: 14px 16px; border-radius: 16px; background: var(--surface-2); margin-bottom: 12px; }
.sm-top { display: flex; align-items: baseline; gap: 8px; }
.sm-label { flex: 1; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.sm-top b { font-family: var(--display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sm-of { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sm-bar { height: 6px; border-radius: 999px; background: var(--surface-3); margin: 10px 0 0; overflow: hidden; }
.sm-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--mint); transition: width .5s var(--ease); }
.sm-bar.near span { background: var(--sun); }
.sm-bar.over span { background: var(--coral); }
.sm-bar.none { display: none; }
.sm-days { display: flex; align-items: flex-end; gap: 2px; height: 28px; margin-top: 12px; }
.sm-days i { flex: 1; min-height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.sm-days i.on { background: color-mix(in srgb, var(--mint) 70%, transparent); }
.sm-days i.today { background: var(--mint); }
.sm-days i.later { background: color-mix(in srgb, var(--text) 5%, transparent); }
.sm-detail { display: block; margin-top: 8px; font-size: 12px; color: var(--text-3); }

.cost-ask { background: var(--sun-soft); }
.cost-ask .cc-head { gap: 12px; }
.ca-tile { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--sun) 30%, var(--surface)); color: color-mix(in srgb, var(--sun) 45%, var(--text)); }
.ca-tile svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cost-ask .cc-head small { display: block; font-size: 12px; color: var(--text-3); font-weight: 500; margin-top: 1px; }
.cost-ask p { margin: 8px 0 12px; }
.cost-ask .cc-acts { align-items: center; }
.cost-ask .ca-limits { margin-left: auto; font-size: 12.5px; color: var(--text-2); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.cost-ask .ca-limits:hover { color: var(--text); }

/* ---------- replay: a task's steps, screen by screen ---------- */
dialog.replay-sheet { width: min(1040px, calc(100vw - 48px)); padding: 0; overflow: hidden; }
.rp-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 20px; }
.rp-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rp-title-wrap b { font-family: var(--display); font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-title-wrap small { font-size: 12px; color: var(--text-3); }
.rp-stage { position: relative; margin: 0 16px; border-radius: 14px; overflow: hidden; background: var(--device-bg); aspect-ratio: 16 / 10; display: grid; place-items: center; }
.rp-stage img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .12s linear; }
.rp-stage img.loading { opacity: .55; }
.rp-mark { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2.5px solid var(--coral); background: color-mix(in srgb, var(--coral) 22%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, #fff 55%, transparent); pointer-events: none; animation: rp-ping .5s var(--ease); }
@keyframes rp-ping { from { transform: scale(1.8); opacity: 0; } }
.rp-missing { position: absolute; margin: 0; color: var(--text-3); font-size: 13px; }
.rp-caption { display: flex; align-items: center; gap: 10px; min-height: 26px; margin: 12px 20px 2px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.rp-caption #rp-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-icon { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--coral-soft); color: var(--coral); }
.rp-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rp-icon.failed { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.rp-controls { display: flex; align-items: center; gap: 6px; padding: 8px 16px 16px; }
.rp-btn { width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text); cursor: pointer; }
.rp-btn:hover { background: var(--surface-3); }
.rp-btn:disabled { opacity: .35; cursor: default; }
.rp-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rp-btn.play { width: 40px; height: 40px; background: var(--btn); color: var(--btn-ink); }
.rp-btn.play:hover { background: var(--btn); filter: brightness(1.15); }
.rp-btn.play .i-play { fill: currentColor; stroke: none; margin-left: 2px; }
.rp-btn.play .i-pause { display: none; }
.rp-btn.play.on .i-play { display: none; }
.rp-btn.play.on .i-pause { display: block; stroke-width: 2.8; }
.rp-track { position: relative; flex: 1; height: 34px; margin: 0 10px; }
.rp-ticks { position: absolute; left: 8px; right: 8px; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px; background: var(--surface-3); }
.rp-ticks i { position: absolute; top: -3px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: color-mix(in srgb, var(--text) 18%, transparent); }
.rp-ticks i.failed { background: var(--err); }
.rp-ticks .rp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--coral); }
.rp-track input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.rp-track input[type=range]::-webkit-slider-runnable-track { height: 34px; background: transparent; }
.rp-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: 9px; border-radius: 50%; background: var(--surface); border: 3px solid var(--coral); box-shadow: var(--shadow-md); }
.rp-track input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--coral); outline-offset: 2px; }
.rp-count { flex: none; min-width: 56px; text-align: right; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.activity-replay { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.activity-replay:hover { background: var(--surface-3); color: var(--text); }
.activity-replay svg { width: 12px; height: 12px; fill: currentColor; }
.step.has-frame { cursor: pointer; border-radius: 8px; }
.step.has-frame:hover .step-text { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

/* ---------- start afresh ---------- */
.reset-sheet { width: min(520px, calc(100vw - 32px)); }
.reset-sheet .sheet-body { padding: 4px 22px 4px; display: flex; flex-direction: column; gap: 4px; }
.rs-lead { margin: 0 0 8px; color: var(--text-2); font-size: 13.5px; }
.rs-opt { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; cursor: pointer; }
.rs-opt:hover { background: var(--surface-2); }
.rs-opt input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--coral); flex: none; }
.rs-opt > span { display: flex; flex-direction: column; gap: 2px; }
.rs-opt b { font-weight: 650; font-size: 14px; }
.rs-opt small { color: var(--text-3); font-size: 12.5px; line-height: 1.45; }
.rs-opt.rs-sub { margin-left: 28px; padding-top: 4px; }
.rs-opt.rs-sub.off { opacity: .45; cursor: default; }
.rs-warn { margin: 6px 0 0; padding: 9px 12px; border-radius: 12px; background: var(--sun-soft); font-size: 12.5px; color: var(--text); }
.action-row .btn { flex: none; white-space: nowrap; }

/* Redrawn but not new: no entrance animation (home.js patch) */
.hw.stay, .home-pill.stay, .hw-onb.stay { animation: none; }

.home-pill.k-along .home-pill-dot { background: var(--cobalt); }
.set-select { flex: none; height: 32px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }

/* Computers: yours and second ones, each with its own task. */
.computers { display: flex; align-items: center; gap: 6px; padding: 0 2px 10px; flex-wrap: wrap; }
.pc-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.pc-chip:hover { color: var(--text); }
.pc-chip[aria-selected="true"] { color: var(--text); border-color: var(--text); box-shadow: var(--shadow-sm); }
.pc-chip.second[aria-selected="true"] { border-color: var(--cobalt); color: var(--cobalt); }
.pc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.pc-dot.working { background: var(--coral); animation: pulse 1.2s ease-in-out infinite; }
.pc-dot.ready { background: var(--mint); }
.pc-dot.busy { background: var(--sun); }
.pc-dot.paused { background: var(--sun); }
.pc-chip small { font-weight: 500; color: var(--text-3); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-off { margin-left: auto; }
.device-label {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6; pointer-events: none;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 650; letter-spacing: .01em;
  background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text-2); box-shadow: var(--shadow-sm);
}
.device.on-second { box-shadow: 0 0 0 3px var(--ring, var(--cobalt)), var(--shadow-sm); }
.device.on-second .device-label { background: var(--ring, var(--cobalt)); color: #fff; text-shadow: 0 1px 1px rgb(0 0 0 / .25); }
.second-note {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--surface-2); color: var(--text-2); text-align: center; padding: 24px;
}
.second-note .buddy { width: 56px; height: 56px; color: var(--cobalt); }
.second-note p { margin: 0; max-width: 360px; line-height: 1.5; }
.cr-live { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.cr-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.cr-live.working i { background: var(--coral); animation: pulse 1.2s ease-in-out infinite; }
.cr-live.interrupted i { background: var(--sun); }
.stage { flex-direction: column; }
.app.layout-chat.pip-on .computers { display: none; }
.chat-title-btn.live::before { content: ''; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--coral); animation: pulse 1.2s ease-in-out infinite; margin-right: 2px; }
.home-pill.k-stop { background: var(--sun-soft); }
.log > * { flex-shrink: 0; } /* a long chat scrolls; nothing in it gets squashed */
.media-controls.off-second { display: none !important; }

/* ---------- floating chat (full-screen computer) ---------- */
.chat-fab {
  position: fixed; right: 26px; bottom: 26px; z-index: 70; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; border: 0; padding: 0; cursor: pointer;
  background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
  transition: transform .18s var(--ease), box-shadow .18s;
}
.chat-fab:hover { transform: translateY(-2px) scale(1.04); }
.chat-fab .fab-face { display: block; width: 38px; height: 38px; margin-top: 2px; color: var(--coral); }
.chat-fab .fab-face .m-bubble { display: none; }
.chat-fab .fab-close { display: none; width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; }
.chat-fab[aria-expanded="true"] .fab-face { display: none; }
.chat-fab[aria-expanded="true"] .fab-close { display: block; }
/* Working: a ring turns around it. */
.chat-fab.working::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  border: 2.5px solid transparent; border-top-color: var(--coral); border-right-color: var(--coral);
  animation: fab-spin 1.1s linear infinite;
}
@keyframes fab-spin { to { transform: rotate(360deg); } }
.fab-dot {
  position: absolute; top: 2px; right: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 0 3px var(--surface); animation: fab-pulse 1.6s ease-in-out infinite;
}
.fab-dot.done { background: var(--mint); animation: none; }
@keyframes fab-pulse { 50% { transform: scale(1.25); } }
.chat-peek {
  position: fixed; right: 96px; bottom: 34px; z-index: 70; max-width: 320px; cursor: pointer;
  padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); font-size: 13px; line-height: 1.4;
  animation: peek-in .25s var(--ease);
}
/* Clamped on the text itself, so no half line shows in the padding. */
.chat-peek > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
@keyframes peek-in { from { opacity: 0; transform: translateY(6px); } }
.chat-peek.ask { box-shadow: var(--shadow-lg), 0 0 0 2px var(--coral); }
/* The chat itself, floating over the computer. */
.app.layout-computer.chat-float .sidebar {
  position: fixed; right: 26px; bottom: 98px; z-index: 69; width: 400px; height: min(640px, calc(100vh - 150px));
  opacity: 1; margin: 0; overflow: hidden; border-radius: 22px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28), 0 0 0 1px var(--line);
  transform-origin: bottom right; animation: float-in .2s var(--ease);
  transition: none;
}
@keyframes float-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }

/* Until the window has picked its view (Home, or the task) nothing shows, so
   Home and the task view never flash up side by side at launch. */
body.booting .app { visibility: hidden; }

/* Closing the floating chat: it fades where it is, instead of dropping back
   into the page and squeezing the computer on its way out. */
.app.layout-computer.chat-closing .sidebar {
  position: fixed; right: 26px; bottom: 98px; z-index: 69; width: 400px; height: min(640px, calc(100vh - 150px));
  margin: 0; overflow: hidden; border-radius: 22px; box-shadow: 0 24px 64px rgba(0,0,0,.28), 0 0 0 1px var(--line);
  opacity: 0; transform: translateY(10px) scale(.97); transform-origin: bottom right;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}

/* Long words (links, codes, raw replies) wrap instead of widening the chat. */
.log { overflow-x: hidden; }
.log .msg { min-width: 0; overflow-wrap: anywhere; }

/* What memory saved from this chat */
.msg.memory { display: flex; align-items: flex-start; gap: 8px; align-self: flex-start; max-width: 100%; padding: 6px 8px 6px 10px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); background: var(--surface-2); }
.msg.memory .mem-ic { flex: none; padding-top: 1px; }
.msg.memory .mem-ic svg { width: 15px; height: 15px; fill: none; stroke: var(--coral); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.msg.memory .mem-text { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; padding-top: 0; }
.msg.memory .mem-text.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.msg.memory .mem-btn { margin-top: -2px; }
.msg.memory .mem-text b { font-weight: 600; color: var(--text); }
.msg.memory .mem-btn { border: 0; background: none; padding: 2px 6px; border-radius: 6px; font: inherit; font-weight: 600; color: var(--coral); cursor: pointer; flex: none; }
.msg.memory .mem-btn:hover { background: var(--coral-soft); }
.msg.memory.undone { opacity: .6; }

/* Settings › Memory */
.mem-tools { display: flex; gap: 8px; margin-bottom: 10px; }
.mem-tools input { flex: 1; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.mem-add { display: flex; gap: 8px; margin-bottom: 10px; }
.mem-add input, .mem-item.editing input { flex: 1; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.mem-list { display: flex; flex-direction: column; }
.mem-layer { margin: 12px 0 4px; font-size: 11.5px; font-weight: 650; color: var(--text-3); }
.mem-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.mem-site { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 6px 0 4px; }
.mem-site b { font-size: 13px; font-weight: 650; }
.mem-site small { flex: 1; font-size: 11.5px; color: var(--text-3); }
.mem-site .mem-mini { opacity: .7; }
.mem-site:hover .mem-mini { opacity: 1; }
.mem-site-tile { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--cobalt-soft); color: var(--cobalt); font-size: 11.5px; font-weight: 700; }
.mem-item.in-site { padding-left: 30px; }
.mem-item:last-child { border-bottom: 0; }
.mem-body { flex: 1; min-width: 0; }
.mem-text { font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.mem-meta { margin-top: 2px; font-size: 11.5px; color: var(--text-3); }
.mem-link { border: 0; background: none; padding: 0; font: inherit; color: var(--text-2); text-decoration: underline; cursor: pointer; }
.mem-more { display: block; margin: 6px auto 2px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); padding: 6px 14px; font: 600 12px var(--font); color: var(--text-2); cursor: pointer; }
.mem-more:hover { color: var(--text); }
.mem-acts { display: flex; gap: 4px; flex: none; }
.mem-mini { border: 0; background: none; padding: 4px 8px; border-radius: 6px; font: inherit; font-size: 12px; color: var(--text-2); cursor: pointer; opacity: 0; transition: opacity .12s; }
.mem-item:hover .mem-mini, .mem-mini:focus-visible { opacity: 1; }
.mem-mini:hover { background: var(--surface-2); color: var(--text); }
.mem-mini.danger:hover { color: var(--err); }
.mem-actions { display: flex; gap: 8px; justify-content: space-between; }
.btn.danger-ghost { color: var(--err); }
.field.inline { flex-direction: row; align-items: center; justify-content: space-between; }
.field.inline select { width: 140px; }

/* Home: memory's suggestion */
.home-pill.k-suggest { cursor: default; gap: 6px; padding-right: 6px; background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 550; }
.home-pill.k-suggest .hp-act { border: 0; background: var(--btn); color: var(--btn-ink); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.home-pill.k-suggest .hp-act.quiet { background: transparent; color: var(--text-2); }
.home-pill.k-suggest .hp-act.quiet:hover { color: var(--text); }
.home-pill.k-suggest .hp-x { border: 0; background: none; color: var(--text-3); font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer; }
.home-pill.k-suggest .hp-x:hover { color: var(--text); background: var(--surface-2); }

/* ---------- set up from the chat (abilities.js) ---------- */
.msg.made .made-detail { color: var(--text-3); font-weight: 500; }

/* ---------- said while it worked (steer) ---------- */
.msg.user.during { opacity: .92; border-bottom-right-radius: 22px; }
.msg.user.during::before { content: "While it worked"; display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; opacity: .65; }
.msg.user[data-spoken]::before { content: "Said on the call"; }

/* ---------- voice: dictation and calls ---------- */
.round-btn.ghost { background: transparent; color: var(--text-2); }
.round-btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.round-btn.ghost svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.round-btn.mic { position: relative; }
.round-btn.mic[data-state="listening"] { background: var(--coral); color: #fff; }
.round-btn.mic[data-state="listening"]::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 calc(2px + var(--level, 0) * 7px) color-mix(in srgb, var(--coral) 35%, transparent);
  transition: box-shadow .08s linear;
}
.round-btn.mic[data-state="working"] { color: var(--coral); }
.round-btn.mic[data-state="working"] svg { animation: pulse 1s ease-in-out infinite; }
.mic-time { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--coral); font-weight: 600; margin-right: -2px; }
body.dictating #input::placeholder { color: var(--coral); }
.round-btn.call.on { background: var(--mint); color: #fff; }

.call-bar {
  display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 10px 10px 10px 12px;
  border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
  animation: fadein .2s var(--ease);
}
.call-face { width: 42px; height: 42px; flex: none; color: var(--coral); position: relative; }
.call-face::after { /* how loud you are */
  content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 calc(var(--level, 0) * 6px) color-mix(in srgb, var(--mint) 30%, transparent);
  transition: box-shadow .08s linear;
}
.call-bar { --level: 0; }
.call-bar[data-state="work"] .call-face::after, .call-bar.talking .call-face::after { box-shadow: none; }
.call-bar.talking .m-mouth { animation: m-talk .22s ease-in-out infinite alternate; transform-origin: 32.5px 43px; }
@keyframes m-talk { from { transform: scaleY(.6); } to { transform: scaleY(1.6) translateY(-.5px); } }
.call-main { flex: 1; min-width: 0; }
.call-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.call-head b { color: var(--text); font-weight: 650; }
.call-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: pulse 1.6s ease-in-out infinite; }
.call-bar[data-state="work"] .call-dot { background: var(--sun); }
.call-bar.talking .call-dot { background: var(--coral); }
.call-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-3); }
.call-captions { margin-top: 3px; font-size: 13px; line-height: 1.35; }
/* The latest exchange only: what you said (one line) and its answer (up to two). */
.call-captions .cc-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.call-captions .cc-line.thirdhand:last-child { color: var(--text); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.call-captions .cc-line b { font-weight: 650; color: var(--text); }
.call-captions .cc-line.thirdhand b { color: var(--coral); }
.call-ctl { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text); cursor: pointer; }
.call-ctl:hover { background: var(--surface-3); }
.call-ctl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.call-ctl .slash { display: none; }
.call-ctl[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.call-ctl[aria-pressed="true"] .slash { display: inline; }
.call-ctl.end { background: #e5484d; color: #fff; }
.call-ctl.end:hover { background: #d13b40; }
.call-ctl.end svg { fill: currentColor; stroke: none; width: 20px; height: 20px; }

/* Settings › Voice */
.set-lead { margin: 0 0 18px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.voice-try { margin: 4px 0 6px; }
[data-panel="voice"] .field.inline select { min-width: 210px; }

.voice-status { display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--surface-2); }
.voice-status .vs-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--text-3); }
.voice-status[data-kind="ok"] .vs-dot { background: var(--mint); }
.voice-status[data-kind="wait"] .vs-dot { background: var(--sun); }
.voice-status[data-kind="bad"] { background: var(--coral-soft); }
.voice-status[data-kind="bad"] .vs-dot { background: var(--coral); }
.voice-status .vs-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.voice-status .vs-body b { font-size: 13.5px; }
.voice-status .vs-body small { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }

.hw-onb-key { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.hw-onb-key input { height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); font: inherit; font-size: 13.5px; color: var(--text); outline: none; }
.hw-onb-key input:focus { border-color: var(--coral); background: var(--surface); }
.hw-onb-key input.bad { border-color: #c4382c; }
.hw-onb-key small { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.hw-onb-key a { color: var(--coral); }

.home-pill-x { margin-left: -2px; padding: 0 6px; border-radius: 999px; color: var(--text-3); font-size: 15px; font-weight: 500; line-height: 22px; }
.home-pill-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }

/* ---------------------------------------------------------------- skills */
.msg.memory.skill .mem-ic svg { stroke: var(--cobalt); }
 .mcp-list { display: flex; flex-direction: column; }
.skill-item, .mcp-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.skill-item:last-child, .mcp-item:last-child { border-bottom: 0; }
 .mcp-item.off .mcp-name { color: var(--text-3); }
 .mcp-top { display: flex; align-items: flex-start; gap: 10px; }
 .mcp-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.skill-acts { display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 0 -8px; }
.skill-acts .mem-mini { opacity: 1; color: var(--text-3); padding: 2px 6px; font-size: 11.5px; }
.skill-acts .mem-mini:hover { color: var(--text); }
.skill-input { display: inline-block; padding: 0 7px; margin: 0 1px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--cobalt); background: var(--cobalt-soft); }
.mcp-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.skill-item:hover .mem-mini, .mcp-item:hover .mem-mini { opacity: 1; }
.mcp-acts .mem-mini.show { opacity: 1; }
.skill-steps { margin: 8px 0 2px 38px; padding: 8px 12px 8px 30px; border-radius: 12px; background: var(--surface-2); font-size: 12.5px; color: var(--text-2); }
.skill-steps li { padding: 2px 0; overflow-wrap: anywhere; }
.skill-steps li.you { color: var(--cobalt); }
.skill-pill { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--accent-ink); background: var(--coral-soft); vertical-align: 1px; }
.skill-pill.soft { color: var(--text-2); background: var(--surface-3); }

/* ---------------------------------------------------------------- connections */
.mcp-form textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 12.5px/1.45 var(--mono); }
.mcp-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mcp-more { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); }
.mcp-more summary { cursor: pointer; width: max-content; padding: 2px 0; }
.mcp-more[open] summary { margin-bottom: 10px; }
.mcp-more .field textarea { font: 12px/1.4 var(--mono); }
.mcp-dot { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--text-3); }
.mcp-dot.ok { background: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft); }
.mcp-dot.wait { background: var(--sun); animation: pulse 1.2s ease-in-out infinite; }
.mcp-dot.ask { background: var(--coral); }
.mcp-dot.bad { background: var(--err); }
.mcp-dot.off { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.mcp-top .switch { margin-top: 2px; flex: none; }
.mcp-tools { margin: 8px 0 2px 19px; border-radius: 12px; background: var(--surface-2); padding: 4px 12px; }
.mcp-tool { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.mcp-tool:last-child { border-bottom: 0; }
.mcp-tool-body { flex: 1; min-width: 0; }
.mcp-tool-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.mcp-tool-desc { margin-top: 1px; font-size: 11.5px; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcp-mode { flex: none; height: 26px; padding: 0 6px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 12px; }
.mcp-ask .cc-head { display: flex; align-items: center; gap: 9px; }
.mcp-ask .mcp-dot { margin-top: 0; }
.mcp-args { margin: 0 0 12px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 70%, transparent); font: 11.5px/1.5 var(--mono); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 140px; overflow: auto; }

/* ---------------------------------------------------------------- showing it how */
.teach-bar { top: auto; bottom: 14px; }
.teach-bar .sb-face { color: var(--cobalt); }
.device.teaching .control-hint { display: none; }
.teach-bar .tb-count { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--cobalt); background: var(--cobalt-soft); white-space: nowrap; }
.device.teaching { box-shadow: 0 0 0 3px var(--cobalt), var(--shadow-md); }

/* ---------------------------------------------------------------- skills: teach, write, add */
.skill-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.skill-action { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.skill-action:hover { border-color: var(--line-2); background: var(--surface-2); }
.skill-action b { font-size: 13px; font-weight: 650; }
.skill-action small { font-size: 11.5px; color: var(--text-3); line-height: 1.35; }
.skill-panel { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.skill-panel.drop { box-shadow: inset 0 0 0 2px var(--cobalt); }
.skill-panel .field { margin-bottom: 10px; }
.skill-panel textarea, .skill-panel input[type="text"] { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.skill-panel textarea { resize: vertical; line-height: 1.45; }
.skill-panel-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 6px; }
.skill-import-row { display: flex; gap: 8px; margin-bottom: 8px; }
.skill-import-row input { flex: 1; }
.skill-found { margin-top: 10px; }
.skill-found-head { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.skill-found-wait { font-size: 12.5px; color: var(--text-2); }
.skill-found-wait.bad { color: var(--err); }
.skill-found-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; margin-bottom: 10px; border-radius: 10px; background: var(--surface); padding: 4px; }
.skill-found-item { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.skill-found-item:hover { background: var(--surface-2); }
.skill-found-item input { margin-top: 3px; }
.skill-found-item > span { display: flex; flex-direction: column; min-width: 0; }
.skill-found-tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.skill-found-tools .link-btn { margin: 0; font-size: 12px; }
.skill-found-item b { font-size: 13px; font-weight: 600; }
.skill-found-item small { font-size: 11.5px; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.skill-found-item.bad small { color: var(--err); }
.skill-id { margin-left: 7px; font: 500 10.5px var(--mono); color: var(--text-3); }
.skill-md { margin: 8px 0 2px 38px; padding: 10px 12px; max-height: 280px; overflow: auto; border-radius: 12px; background: var(--surface-2); font: 12px/1.5 var(--mono); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.skill-files { margin: 4px 0 0 38px; font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; }
.skill-edit { margin: 8px 0 2px 38px; }
.skill-edit textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 12px/1.5 var(--mono); resize: vertical; }
.skill-edit-note { flex: 1; font-size: 11.5px; color: var(--text-3); }
.set-note.warn { color: var(--warn); }
.mcp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mcp-client { margin: 8px 0 2px 19px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.mcp-redirect { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.mcp-redirect code { font: 11.5px var(--mono); padding: 2px 6px; border-radius: 6px; background: var(--surface); color: var(--text); }
.mcp-client-row { display: flex; gap: 6px; }
.mcp-client-row input { flex: 1; min-width: 0; height: 30px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; }

.set-note a { color: var(--accent-ink); }

/* ---------------------------------------------------------------- "/" for a skill */
.composer { position: relative; }
.slash-menu { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); z-index: 30; max-height: 340px; overflow: auto; padding: 6px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lg); animation: fadein .15s var(--ease); }
.slash-head { padding: 4px 8px 6px; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.slash-item { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 7px 9px; border: 0; border-radius: 10px; background: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.slash-item.on, .slash-item:hover { background: var(--surface-2); }
.slash-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.slash-top b { font: 600 12.5px var(--mono); color: var(--cobalt); }
.slash-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slash-desc { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- voice / send / stop, one place */
.act-slot { display: grid; width: 36px; height: 36px; flex: none; }
.act-slot > .round-btn { grid-area: 1 / 1; width: 36px; height: 36px; transition: opacity .16s var(--ease), transform .24s var(--ease), background .2s; }
.act-slot > .round-btn:not(.slot-on) { opacity: 0; transform: scale(.55) rotate(-25deg); pointer-events: none; }
.act-slot > .round-btn.slot-on { opacity: 1; transform: none; }
.round-btn.call { background: var(--btn); color: var(--btn-ink); }
.round-btn.call svg, .round-btn.wave svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.round-btn.call:hover { transform: scale(1.06); }
.round-btn.call.on { background: var(--mint); color: #fff; }
.round-btn.call.on svg path { animation: wave-bars 1.1s ease-in-out infinite; transform-origin: center; }
@keyframes wave-bars { 50% { transform: scaleY(.6); } }
.act-slot[data-mode="send"] .round-btn.send:disabled { opacity: .55; }

/* ---------------------------------------------------------------- Settings lists (shared) */
dialog.sheet.settings { width: min(900px, calc(100vw - 48px)); }
.panel-lead { margin: 4px 0 6px; font-size: 13px; line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.set-note.small { font-size: 12px; color: var(--text-3); }
.h4-note { margin-left: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.glist { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: visible; }
.glist:empty { display: none; }
.glist-item { position: relative; }
.glist-item + .glist-item { border-top: 1px solid var(--line); }
.glist-item.off .row-name, .glist-item.off .row-desc { color: var(--text-3); }
.glist-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 60px; box-sizing: border-box; }
.glist-row.clickable { cursor: pointer; }
.glist-row.clickable:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.glist-item:first-child .glist-row { border-top-left-radius: 15px; border-top-right-radius: 15px; }
.glist-item:last-child:not(.open) .glist-row { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.row-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.row-sub { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub.mono { font-family: var(--mono); font-size: 11px; }
.row-desc { font-size: 12.5px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-warn { margin-top: 4px; padding: 6px 9px; border-radius: 9px; font-size: 12px; line-height: 1.4; color: var(--accent-ink); background: var(--coral-soft); overflow-wrap: anywhere; }
.row-warn.block { margin: 0 0 12px; }
.row-note { margin-top: 4px; font-size: 12px; color: var(--text-2); }
.row-trail { display: flex; align-items: center; gap: 8px; flex: none; }
.row-trail .switch { margin: 0; }
.row-rename input { width: min(320px, 100%); height: 28px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; outline: 0; }
.row-panel { margin: 0 14px 14px 62px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.row-panel-lead { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.row-panel-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border: 0; border-radius: 999px; font: inherit; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--text-2); background: var(--surface-3); }
button.pill { cursor: pointer; }
button.pill:hover { filter: brightness(.96); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.pill.ok { color: #13795f; background: var(--mint-soft); }
.pill.wait { color: #8a6100; background: var(--sun-soft); }
.pill.wait::before { animation: pulse 1.2s ease-in-out infinite; }
.pill.ask { color: var(--accent-ink); background: var(--coral-soft); }
.pill.bad { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.pill.off { color: var(--text-3); }

/* avatars */
.avatar { position: relative; flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; font-size: 15px; color: #fff; }
.avatar img { width: 24px; height: 24px; border-radius: 5px; object-fit: contain; }
.avatar.letter { box-shadow: none; background: hsl(var(--hue, 220) 62% 52%); }
.avatar.tiny { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
.avatar-dot { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); background: var(--text-3); }
.avatar-dot.ok { background: var(--mint); }
.avatar-dot.wait { background: var(--sun); }
.avatar-dot.ask { background: var(--coral); }
.avatar-dot.bad { background: var(--err); }
.avatar-dot.off { background: var(--surface-3); }

/* ⋯ menus */
.more-wrap { position: relative; display: inline-flex; }
.more-btn { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--text-3); display: grid; place-items: center; cursor: pointer; }
.more-btn:hover, .more-wrap:has(.more-menu) .more-btn { background: var(--surface-2); color: var(--text); }
.more-btn svg { width: 16px; height: 16px; fill: currentColor; }
.more-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 200px; padding: 5px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); animation: fadein .12s var(--ease); }
.more-menu.up { top: auto; bottom: calc(100% + 4px); }
.more-item { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; text-align: left; color: var(--text); cursor: pointer; }
.more-item:hover { background: var(--surface-2); }
.more-item.danger { color: var(--err); }
.more-sep { height: 1px; margin: 4px 6px; background: var(--line); }

/* empty and add cards */
.empty-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px; border: 1px dashed var(--line-2); border-radius: 16px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); margin-bottom: 4px; }
.empty-card b { font-size: 13.5px; color: var(--text); }
.add-card { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 10px; }
.add-card:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 0 4px var(--accent-soft); }
.add-card textarea#mcp-input { border: 0; box-shadow: none !important; padding: 4px 6px; min-height: 44px; background: transparent; }
.add-card-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 4px 4px 0; }
.add-card-foot .mcp-more { margin: 4px 0 0; flex: 1; }
.mcp-more-body { padding: 10px 2px 2px; }

/* connections */
.mcp-redirect { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mcp-redirect code { flex: 1; min-width: 0; padding: 6px 9px; border-radius: 8px; background: var(--surface); font: 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcp-client-row { display: flex; gap: 8px; }
.mcp-client-row input { flex: 1; min-width: 0; height: 30px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; }
.mcp-tools { padding-top: 10px; }
.mcp-tools .mcp-tool { border-bottom-color: var(--line); }

/* skills */
.skill-glyph { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--cobalt); background: var(--cobalt-soft); }
.skill-glyph svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skill-glyph.taught { color: #13795f; background: var(--mint-soft); }
.skill-glyph.made { color: #8a6100; background: var(--sun-soft); }
.skill-glyph.imported { color: var(--accent-ink); background: var(--coral-soft); }
.skill-glyph.mac { color: var(--text-2); background: var(--surface-3); }
.glist-item.off .skill-glyph { filter: grayscale(1); opacity: .55; }
.skill-id { font: 500 11px var(--mono); color: var(--text-3); }
.skill-steps.row-panel { padding-left: 34px; margin-top: 0; }
.skill-item .skill-md { margin: 0; max-height: 300px; overflow: auto; white-space: pre-wrap; font: 12px/1.55 var(--mono); color: var(--text-2); }
.skill-item .skill-edit { margin: 0 14px 14px 62px; }
.avatar.tiny img { width: 14px; height: 14px; border-radius: 3px; }

/* Sign-ins and Memory: the same cards as Skills and Connections. */
.si-list:not(:empty), #mem-list:not(:empty), #mem-review:not(:empty) { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 0 14px; margin-bottom: 10px; }
.si-list:not(:empty) .si-row { padding-top: 12px; padding-bottom: 12px; }
.si-list .si-row + .si-row { border-top: 1px solid var(--line); }
#mem-list .mem-layer { margin: 14px 0 2px; }
#mem-list .mem-item:last-child, #mem-review .mem-item:last-child { border-bottom: 0; }
.mem-item { padding: 10px 0; }
@media (prefers-color-scheme: dark) {
  .pill.ok, .skill-glyph.taught { color: var(--mint); }
  .pill.wait, .skill-glyph.made { color: var(--sun); }
  .pill.ask, .skill-glyph.imported, .row-warn { color: var(--coral); }
  .row-warn { background: color-mix(in srgb, var(--coral) 14%, transparent); }
  .pill.bad { color: #ff8a7a; }
}

/* ------------------------------------------------------------------
   Cards in the message box (shape/). The box takes the shape of what you
   type: the card is the same surface, under your words, with its fields
   editable in place; its button joins the box's own row beside Send.
   ------------------------------------------------------------------ */
.composer-box { --fill: color-mix(in srgb, var(--text) 5.5%, transparent); --fill-2: color-mix(in srgb, var(--text) 9%, transparent); }
.shape { height: 0; overflow: hidden; transition: height .3s var(--ease); }
.shape.open { overflow: visible; }
.shape-inner { padding: 0 8px 2px 0; }
.shape-card, .shape-ghost, .shape-choose { --c: var(--cobalt); --c-soft: var(--cobalt-soft); }
.shape-card[data-intent="reminder"], .shape-card[data-intent="timer"] { --c: var(--coral); --c-soft: var(--coral-soft); }
.shape-card[data-intent="checklist"], .shape-card[data-intent="convert"] { --c: var(--mint); --c-soft: var(--mint-soft); }
.shape-card[data-intent="note"], .shape-card[data-intent="random"] { --c: #a87500; --c-soft: var(--sun-soft); }
.shape-card[data-intent="calc"] { --c: var(--text-2); --c-soft: var(--surface-3); }
.shape-card[data-intent="color"] { --c: #8a3fd1; --c-soft: color-mix(in srgb, #8a3fd1 14%, transparent); }

.shape-card { position: relative; margin-top: 8px; padding: 12px 0 6px; border-top: 1px solid var(--line); }
.shape-card.enter, .shape-ghost.enter, .shape-choose.enter { animation: shape-in .36s var(--ease) both; }
@keyframes shape-in { from { opacity: 0; filter: blur(3px); transform: translateY(5px); } to { opacity: 1; filter: none; transform: none; } }
.shape-card.nudge { animation: shape-nudge .3s var(--ease); }
@keyframes shape-nudge { 25% { transform: translateX(-3px); } 60% { transform: translateX(2px); } }

.sh-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sh-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--c-soft); color: var(--c); flex: none; }
.sh-svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-i { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sh-kind { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.sh-close { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--text-3); cursor: pointer; transition: background .15s, color .15s; }
.sh-close:hover { background: var(--fill); color: var(--text); }
.sh-close .sh-svg { width: 14px; height: 14px; }
.sh-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sh-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sh-col.grow { flex: 1; }
.sh-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sh-sub { font-size: 12.5px; color: var(--text-3); }
.sh-label { font-size: 11.5px; color: var(--text-3); font-weight: 550; }
.sh-big { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--text); }
.num { font-variant-numeric: tabular-nums; }

/* Fields that read like text until you touch them. */
.sh-in { font: inherit; font-size: 14.5px; color: var(--text); background: transparent; border: 0; outline: 0; border-radius: 8px; padding: 4px 8px; margin-left: -8px; width: calc(100% + 8px); min-width: 0; transition: background .15s, box-shadow .15s; }
.sh-in::placeholder { color: var(--text-3); }
.sh-in:hover { background: var(--fill); }
.sh-in:focus { background: var(--fill); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 22%, transparent); }
.sh-title-in { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
/* The box's own text area rules (size, padding) are for your words, not the card's fields. */
.composer .shape textarea.sh-in { padding: 4px 8px; font-size: 14.5px; line-height: 1.55; min-height: 44px; max-height: 220px; user-select: text; }

/* Pills: a day, a time, a place, people. */
.sh-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sh-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--fill); border: 1px solid transparent; color: var(--text); font: 500 13px var(--font); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s; }
.sh-pill .sh-i { color: var(--text-3); }
.sh-pill:hover { background: var(--fill-2); }
.sh-pill:focus-within, .sh-pill:focus-visible { outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 22%, transparent); }
.sh-pill.empty { background: transparent; border: 1px dashed var(--line-2); color: var(--text-3); }
.sh-pill.toggle.on { background: var(--coral-soft); color: var(--accent-ink); }
.sh-pill.toggle.on .sh-i { color: var(--coral); }
button.sh-pill { outline: 0; }
.sh-pill:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); }
.sh-pill.open { background: var(--c-soft); color: var(--c); border-color: transparent; }
.sh-pill.open .sh-i { color: var(--c); }
.sh-pill.empty.open { border-style: solid; }
.sh-chev { width: 12px; height: 12px; margin: 0 -3px 0 -1px; stroke-width: 2.2; transition: transform .22s var(--ease); }
.sh-pill.open .sh-chev { transform: rotate(180deg); }
.sh-pill-t { white-space: nowrap; }
.sh-pill-in { font: inherit; color: inherit; background: transparent; border: 0; outline: 0; padding: 0; min-width: 0; cursor: text; }
.sh-pill-in::placeholder { color: var(--text-3); }

.sh-stepper { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 3px; border-radius: 999px; background: var(--fill); }
.sh-step:active:not(:disabled) { transform: scale(.9); }
.sh-step:focus-visible { outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); }
.sh-step { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; }
.sh-step:hover:not(:disabled) { background: var(--fill-2); }
.sh-step:disabled { opacity: .35; cursor: default; }
.sh-step .sh-i { width: 12px; height: 12px; stroke-width: 2.3; }
.sh-step-n { min-width: 22px; text-align: center; font-weight: 650; font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* One button: while a card that does something is open, Send says its
   action ("Add to calendar") and the mic steps aside. */
.act-slot:not(.as-card) .send-label { position: absolute; pointer-events: none; }
.send-label { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font: 600 13.5px var(--font); transition: max-width .3s var(--ease), opacity .2s var(--ease), margin .3s var(--ease); }
.act-slot { transition: width .3s var(--ease); }
.act-slot.as-card { width: auto; }
.act-slot.as-card > .round-btn.send { width: auto; padding: 0 6px 0 16px; gap: 10px; border-radius: 999px; display: inline-flex; align-items: center; transform: none; }
.act-slot.as-card > .round-btn.send:not(:disabled):hover { transform: translateY(-1px); }
.act-slot.as-card .send-label { max-width: 220px; opacity: 1; }
.act-slot.as-card > .round-btn.send svg { width: 24px; height: 24px; padding: 5px; border-radius: 999px; background: color-mix(in srgb, var(--btn-ink) 18%, transparent); box-sizing: border-box; flex: none; }
.act-slot.as-card > .round-btn.send.not-ready { opacity: .45; }
.composer.card-mode #mic-btn, .composer.card-mode #mic-time { display: none; }

/* Answers: click to copy. */
.sh-copyable { cursor: copy; border-radius: 10px; padding: 0 6px; margin: 0 -6px; transition: background .15s, box-shadow .15s; outline: 0; }
.sh-copyable:hover, .sh-copyable:focus-visible { background: var(--fill); }
.sh-copy.sh-copyable { margin: 0; padding: 5px 9px; border-radius: 8px; }
.sh-swatch.sh-copyable { margin: 0; padding: 10px 12px; border-radius: 16px; }
.sh-swatch.sh-copyable:hover { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 3px var(--fill-2); background: inherit; }
.sh-copied { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--mint-soft); color: var(--mint); font: 600 12px var(--font); animation: pop .18s var(--ease); white-space: nowrap; align-self: center; }
.sh-copied .sh-i { width: 12px; height: 12px; stroke-width: 2.6; }
.sh-row.end { justify-content: flex-end; }
.sh-rollable { cursor: pointer; border-radius: 12px; outline: 0; }
.sh-rollable:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); }

/* A faint suggestion, and a choice between two. */
.shape-ghost { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 2px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px dashed var(--line-2); background: transparent; color: var(--text-2); font: 500 12.5px var(--font); cursor: pointer; transition: border-color .15s, color .15s; }
.shape-ghost .sh-ico { border-radius: 999px; }
.shape-ghost:hover { border-color: var(--text-3); color: var(--text); }
.shape-ghost kbd, .shape kbd { font: 600 10.5px var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--fill); color: var(--text-2); }
.shape-choose { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.sh-q { font-size: 12.5px; color: var(--text-3); margin-right: 2px; }
.shape-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: 500 12.5px var(--font); cursor: pointer; }
.shape-chip:hover { border-color: var(--text-3); color: var(--text); }

/* Checklist */
.sh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sh-list li { display: flex; align-items: center; gap: 8px; }
.sh-list input[type="checkbox"] { appearance: none; width: 18px; height: 18px; margin: 0 2px 0 0; flex: none; cursor: pointer; display: grid; place-content: center; border-radius: 6px; border: 1.5px solid var(--line-2); background: transparent; outline: 0; transition: background .15s var(--ease), border-color .15s var(--ease); }
.sh-list input[type="checkbox"]::after { content: ''; width: 4.5px; height: 9px; border: solid var(--surface); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg) scale(0); transition: transform .18s var(--ease); }
.sh-list input[type="checkbox"]:hover { border-color: var(--mint); }
.sh-list input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 25%, transparent); }
.sh-list input[type="checkbox"]:checked { background: var(--mint); border-color: var(--mint); }
.sh-list input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
.sh-item { margin-left: 0; width: auto; flex: 1; }
.sh-list li.done .sh-item { text-decoration: line-through; color: var(--text-3); }
.sh-x { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--text-3); cursor: pointer; opacity: 0; transition: opacity .15s; }
.sh-list li:hover .sh-x, .sh-x:focus-visible { opacity: 1; }
.sh-x:hover { background: var(--fill); color: var(--text); }
.sh-add-row { display: flex; align-items: center; gap: 8px; color: var(--text-3); padding-left: 2px; }
.sh-add { margin-left: 0; width: auto; flex: 1; }

/* Timer */
.sh-timer { display: flex; align-items: center; gap: 18px; }
.sh-ring { position: relative; width: 78px; height: 78px; flex: none; }
.sh-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sh-ring circle { fill: none; stroke-width: 6; }
.sh-ring-track { stroke: var(--fill-2); }
.sh-ring-fill { stroke: var(--c); stroke-linecap: round; }

/* Countdown */
.sh-count { display: flex; align-items: center; gap: 20px; }
.sh-count-num { display: flex; flex-direction: column; align-items: flex-start; min-width: 76px; }
.sh-count-n { font-size: 46px; color: var(--c); line-height: 1; }

/* Calculate and split */
.sh-calc { display: flex; flex-direction: column; gap: 2px; }
.sh-expr { font: 13px var(--mono); color: var(--text-3); overflow-wrap: anywhere; }
.sh-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sh-fields { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.sh-field { display: flex; flex-direction: column; gap: 5px; }
.sh-each { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

/* Convert and time zones */
.sh-convert, .sh-tzs { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sh-side { display: flex; align-items: center; gap: 8px; }
.sh-big-in { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-left: -8px; }
.sh-arrow { width: 18px; height: 18px; fill: none; stroke: var(--text-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sh-pill.sh-unit { height: 34px; padding: 0 10px 0 12px; border-radius: 11px; font: 650 14px var(--font); color: var(--text-2); }
.sh-pill.sh-zone { font-weight: 600; color: var(--text-2); align-self: flex-start; }
.sh-tz { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.sh-tz { gap: 8px; }
.sh-tz-time { display: flex; align-items: center; gap: 8px; min-height: 38px; }

/* Colour */
.sh-color { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.sh-swatch { width: 112px; min-height: 104px; border-radius: 16px; padding: 10px 12px; display: flex; align-items: flex-end; font: 700 13px var(--mono); box-shadow: inset 0 0 0 1px var(--line); }
.sh-hex-in { font: 700 15px var(--mono); width: 130px; }
.sh-shades { display: flex; gap: 6px; }
.sh-shade { width: 30px; height: 30px; border-radius: 9px; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: transform .12s var(--ease); }
.sh-shade:hover { transform: translateY(-2px); }
.sh-range { display: flex; align-items: center; gap: 10px; }
.sh-range input { flex: 1; appearance: none; height: 8px; border-radius: 999px; background: var(--track, var(--fill-2)); outline: 0; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.sh-range input::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .22); cursor: grab; transition: transform .12s var(--ease); }
.sh-range input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.12); }
.sh-range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); }
.sh-formats { display: flex; gap: 6px; flex-wrap: wrap; }
.sh-copy { font: 12px var(--mono); padding: 5px 9px; border-radius: 8px; border: 0; background: var(--fill); color: var(--text-2); cursor: pointer; }
.sh-copy:hover { background: var(--fill-2); color: var(--text); }

/* Random */
.sh-random { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sh-dice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 48px; }
.sh-die, .sh-coin { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); font: 700 22px var(--display); color: var(--text); box-shadow: var(--shadow-sm); }
.sh-coin { border-radius: 999px; background: var(--sun-soft); color: #8a6200; border-color: transparent; }
.sh-total { font: 650 18px var(--display); color: var(--text-2); }
.spin0 { animation: sh-roll0 .42s var(--ease); }
.spin1 { animation: sh-roll1 .42s var(--ease); }
@keyframes sh-roll0 { from { transform: rotate(-24deg) scale(.86); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes sh-roll1 { from { transform: rotate(24deg) scale(.86); opacity: .3; } to { transform: none; opacity: 1; } }

/* Email */
.sh-mail { display: flex; flex-direction: column; }
.sh-mail-row { display: grid; grid-template-columns: 62px 1fr; align-items: center; border-bottom: 1px solid var(--line); padding: 2px 0; }
.sh-mail-row .sh-in { margin-left: 0; width: 100%; }

/* Running timers, just above the box. */
.shape-tray { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.shape-timer { --p: 0; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 4px 0 12px; border-radius: 999px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 13px; color: var(--text-2);
  background: linear-gradient(90deg, var(--coral-soft) calc(var(--p) * 100%), var(--surface) 0); animation: pop .2s var(--ease); }
.shape-timer .st-time { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; min-width: 42px; }
.shape-timer.paused .st-time { color: var(--text-3); }
.shape-timer.done { background: var(--mint-soft); }
.shape-timer.done .st-time { color: var(--mint); }
.st-btn { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; }
.st-btn:hover { background: var(--surface-3); }
.st-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Cards in the / list (slash.js), above your skills. */
.slash-item.card { display: grid; grid-template-columns: 26px auto 1fr; align-items: center; column-gap: 10px; }
.slash-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-3); color: var(--text-2); }
.slash-item.card b { font-size: 13.5px; font-weight: 600; color: var(--text); }
.slash-item.card .slash-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .shape { transition: none; }
  .shape-card.enter, .shape-ghost.enter, .shape-choose.enter, .spin0, .spin1, .shape-timer, .sh-copied { animation: none; }
  .send-label, .act-slot { transition: none; }
}
/* On Home the box sits near the top: the / list drops down from it. */
.home-ask .slash-menu { top: calc(100% + 8px); bottom: auto; left: 0; right: 0; max-height: min(52vh, 420px); }
/* Reminders on the Schedule page (set from a card in the message box). */
.sched-rem { margin: 22px 0 6px; }
.sched-rem h3 { font-size: 13px; font-weight: 650; color: var(--text-2); margin: 0 0 10px; }
.sched-rem-list { display: flex; flex-direction: column; gap: 8px; }
.sched-rem-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.sched-rem-row.urgent { box-shadow: inset 3px 0 0 var(--coral), var(--shadow-sm); }
.sched-rem-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--coral-soft); color: var(--coral); flex: none; }
.sched-rem-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sched-rem-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.sched-rem-text b { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-rem-text span { font-size: 12.5px; color: var(--text-3); }

/* ------------------------------------------------------------------
   Thirdhand's pickers (shape/pickers.mjs): a calendar, a list of times
   and a dropdown, floating under the field in the card's colour. Each
   takes words too: "next fri", "7:30pm", "2h 15".
   ------------------------------------------------------------------ */
.pk { position: fixed; z-index: 1000; --c: var(--accent); --c-soft: var(--accent-soft);
  --fill: color-mix(in srgb, var(--text) 5.5%, transparent); --fill-2: color-mix(in srgb, var(--text) 9%, transparent);
  display: flex; flex-direction: column; gap: 8px; padding: 8px; overflow: hidden;
  background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow-lg);
  font: 13px/1.4 var(--font); user-select: none; animation: pk-in .18s var(--ease) both; }
.pk.up { animation-name: pk-in-up; }
.pk.leaving { animation: pk-out .12s var(--ease) forwards; pointer-events: none; }
@keyframes pk-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes pk-in-up { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes pk-out { to { opacity: 0; transform: scale(.98); } }
.pk button { font: inherit; color: inherit; cursor: pointer; }

/* Type it in words */
.pk-type-row { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 11px; background: var(--fill); flex: none; transition: box-shadow .15s var(--ease), background .15s; }
.pk-type-row:focus-within { background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 0 0 3px color-mix(in srgb, var(--c) 14%, transparent); }
.pk-type-i { width: 14px; height: 14px; color: var(--text-3); }
.pk-type { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: var(--text); font: 500 13px var(--font); user-select: text; }
.pk-type::placeholder { color: var(--text-3); font-weight: 400; }
.pk-seen { font: 650 12px var(--font); color: var(--text-3); white-space: nowrap; }
.pk-seen.ok { color: var(--c); }

/* The calendar */
.pk-date { width: 300px; }
.pk-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 0 8px; }
.pk-title { font: 650 14.5px var(--display); letter-spacing: -.01em; }
.pk-navs { display: flex; gap: 2px; }
.pk-nav { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--text-2) !important; transition: background .12s; }
.pk-nav:hover { background: var(--fill); }
.pk-nav .sh-i { width: 15px; height: 15px; stroke-width: 2.2; }
.pk-week, .pk-grid { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; }
.pk-week span { font: 650 11px var(--font); color: var(--text-3); padding: 2px 0; }
.pk-grid { row-gap: 2px; }
.pk-day { position: relative; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; font: 500 13px var(--font) !important; font-variant-numeric: tabular-nums; outline: 0; transition: background .12s, color .12s, transform .12s var(--ease); }
.pk-day:hover:not(:disabled) { background: var(--fill); }
.pk-day:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 50%, transparent); }
.pk-day:active:not(:disabled) { transform: scale(.9); }
.pk-day.out { color: var(--text-3) !important; opacity: .55; }
.pk-day.out.on, .pk-day.out.typed { opacity: 1; }
.pk-day.today { color: var(--c) !important; font-weight: 750 !important; }
.pk-day.today::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 999px; background: currentColor; }
.pk-day.typed { background: var(--c-soft); color: var(--c) !important; }
.pk-day.on { background: var(--c); color: var(--surface) !important; font-weight: 700 !important; }
.pk-day.on:hover { background: var(--c); }
.pk-day:disabled { color: var(--text-3) !important; opacity: .38; cursor: default; }

/* Quick choices */
.pk-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 2px 2px; border-top: 1px solid var(--line); }
.pk-quick[hidden] { display: none; }
.pk-dayparts { border-top: 0; padding: 0 2px; }
.pk-date .pk-quick, .pk-time .pk-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 0 0; }
.pk-date .pk-chip, .pk-time .pk-chip { flex-direction: column; align-items: center; justify-content: center; gap: 0; height: auto; padding: 6px 2px; border-radius: 12px; border-color: transparent; background: var(--fill); line-height: 1.25; }
.pk-date .pk-chip:hover, .pk-time .pk-chip:hover { background: var(--fill-2); }
.pk-date .pk-chip.on, .pk-time .pk-chip.on { background: var(--c-soft); }
.pk-time .pk-quick { padding: 0; border-top: 0; }
.pk-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font: 550 12.5px var(--font) !important; transition: background .12s, border-color .12s, color .12s; }
.pk-chip small { font-size: 11.5px; font-weight: 500; color: var(--text-3); }
.pk-chip:hover { background: var(--fill); border-color: transparent; }
.pk-chip.on { background: var(--c-soft); color: var(--c) !important; border-color: transparent; }
.pk-chip.on small { color: inherit; opacity: .75; }

/* Lists: times, lengths, units, places */
.pk-time { width: 300px; }
.pk-menu { min-width: 220px; max-width: 320px; }
.pk-list { display: flex; flex-direction: column; gap: 1px; min-height: 0; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; scroll-padding: 4px; outline: 0; margin: 0 -2px; padding: 0 2px; }
.pk-list::-webkit-scrollbar { width: 6px; }
.pk-list::-webkit-scrollbar-thumb { background: var(--fill-2); border-radius: 999px; }
.pk-row { flex: none; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; font: 500 13px var(--font) !important; text-align: left; transition: background .08s; }
.pk-row.active { background: var(--fill); }
.pk-row.on { color: var(--c) !important; font-weight: 650 !important; }
.pk-row.on.active { background: var(--c-soft); }
.pk-row.past { color: var(--text-3) !important; }
.pk-row-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-row-h { font-size: 12px; font-weight: 500; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-row.made .pk-row-t::before { content: 'Use '; color: var(--text-3); font-weight: 500; }
.pk-tick { width: 14px; height: 14px; stroke-width: 2.6; color: var(--c); }
.pk-tick-gap { width: 14px; flex: none; }
.pk-empty { padding: 16px 10px; color: var(--text-3); font-size: 12.5px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .pk, .pk.up, .pk.leaving { animation: none; }
  .sh-chev, .pk-day { transition: none; }
}

/* ------------------------------------------------------------------
   Cards that look things up or open a site (shape/live.mjs).
   ------------------------------------------------------------------ */
.shape-card[data-intent="weather"], .shape-card[data-intent="flights"] { --c: var(--cobalt); --c-soft: var(--cobalt-soft); }
.shape-card[data-intent="currency"], .shape-card[data-intent="stock"] { --c: var(--mint); --c-soft: var(--mint-soft); }
.shape-card[data-intent="define"] { --c: #a87500; --c-soft: var(--sun-soft); }
.shape-card[data-intent="stays"], .shape-card[data-intent="video"] { --c: var(--coral); --c-soft: var(--coral-soft); }
.shape-card[data-intent="bookmark"] { --c: #8a3fd1; --c-soft: color-mix(in srgb, #8a3fd1 14%, transparent); }
@media (prefers-color-scheme: dark) {
  .shape-card[data-intent="define"] { --c: var(--sun); }
  .shape-card[data-intent="bookmark"] { --c: #c49bff; }
}
.sh-row.between { justify-content: space-between; }
.sh-col.tight { gap: 2px; }
.sh-note { font-size: 13px; color: var(--text-3); padding: 6px 0; }
.sh-note.err { color: var(--err); }
.stale { opacity: .55; transition: opacity .2s; }

/* Waiting for the answer */
.sh-shimmer { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--fill) 0%, var(--fill-2) 40%, var(--fill) 80%); background-size: 200% 100%; animation: sh-shimmer 1.2s linear infinite; }
@keyframes sh-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sh-sh-big { width: 120px; height: 34px; }
.sh-sh-line { width: 100%; height: 12px; margin: 6px 0; }
.sh-sh-line.short { width: 55%; }
.sh-sh-ico { width: 56px; height: 56px; border-radius: 16px; flex: none; }
.sh-sh-hour { width: 100%; height: 64px; border-radius: 12px; }
.sh-sh-chart { width: 100%; height: 110px; border-radius: 12px; }

/* Segmented: °C/°F, chart ranges */
.sh-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--fill); }
.sh-seg button { height: 26px; min-width: 34px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: 600 12px var(--font); cursor: pointer; transition: background .15s, color .15s; }
.sh-seg button:hover { color: var(--text); }
.sh-seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* The weather */
.sh-wx { display: flex; flex-direction: column; gap: 12px; }
.sh-wx-now { display: flex; align-items: center; gap: 16px; }
.sh-wx-temp { font-size: 44px; line-height: 1; }
.sh-wx-what { display: flex; flex-direction: column; line-height: 1.3; }
.sh-wx-what b { font-size: 14.5px; font-weight: 650; }
.sh-wx-what span { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: pre; }
svg.sh-wx { width: 28px; height: 28px; flex: none; overflow: visible; }
svg.sh-wx.big { width: 60px; height: 60px; }
svg.sh-wx.sm { width: 24px; height: 24px; }
.wx-sun circle { fill: #f6b42b; }
.wx-sun line { stroke: #f6b42b; stroke-width: 2; stroke-linecap: round; }
.wx-moon { fill: #c7cde8; }
.wx-cloud { fill: #dfe4ea; stroke: #b9c2cc; stroke-width: 1; }
.wx-cloud.dark { fill: #9ea8b4; stroke: #7f8a97; }
.wx-rain { stroke: #4a8ff0; stroke-width: 2; stroke-linecap: round; }
.wx-snow { fill: #9cc6f5; }
.wx-bolt { fill: #f6b42b; }
.wx-fog { stroke: #b9c2cc; stroke-width: 2; stroke-linecap: round; }
@media (prefers-color-scheme: dark) {
  .wx-cloud { fill: #5d6672; stroke: #7a8490; }
  .wx-cloud.dark { fill: #434b55; stroke: #5d6672; }
  .wx-moon { fill: #e2e6f7; }
}
.sh-wx-hours { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.sh-wx-hours[hidden] { display: none; }
.sh-wx-hour { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 6px; border-radius: 12px; background: var(--fill); }
.sh-wx-h { font-size: 11px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.sh-wx-hour b { font-size: 13px; font-weight: 650; }
.sh-wx-rain { font-size: 10.5px; font-weight: 650; color: var(--cobalt); line-height: 1; }
.sh-wx-rain.none { color: transparent; }
.sh-wx-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sh-wx-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; font: inherit; transition: background .15s, border-color .15s; }
.sh-wx-day:hover { background: var(--fill); }
.sh-wx-day.on { background: var(--c-soft); border-color: color-mix(in srgb, var(--c) 25%, transparent); }
.sh-wx-dn { font-size: 11.5px; font-weight: 650; color: var(--text-2); }
.sh-wx-range { display: flex; gap: 5px; font-size: 12px; }
.sh-wx-range span { color: var(--text-3); }
.sh-wx-bar { position: absolute; left: 18%; right: 18%; bottom: 5px; height: 3px; border-radius: 999px; background: var(--fill-2); }
.sh-wx-bar::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); right: calc((1 - var(--b)) * 100%); border-radius: 999px; background: linear-gradient(90deg, #6aaef5, #f6b42b); }
.sh-wx-foot { font-size: 11.5px; color: var(--text-3); }
.sh-pill.sh-place { font-weight: 600; }

/* Money */
.sh-swap { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--fill); color: var(--text-2); cursor: pointer; flex: none; transition: background .15s, transform .25s var(--ease); }
.sh-swap:hover { background: var(--fill-2); color: var(--text); transform: rotate(180deg); }
.sh-swap.sm { width: 28px; height: 28px; }
.sh-swap .sh-i { width: 14px; height: 14px; }
.sh-cur-sym { font: 700 22px var(--display); color: var(--text-3); margin-right: -4px; }

/* Words */
.sh-word-row { gap: 8px; align-items: baseline; flex-wrap: nowrap; }
.sh-word-in { flex: 0 1 auto; width: auto; field-sizing: content; min-width: 4ch; max-width: 60%; }
.sh-phon { font: 13px var(--mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-say { width: 28px; height: 28px; display: grid; place-items: center; align-self: center; border: 0; border-radius: 999px; background: var(--c-soft); color: var(--c); cursor: pointer; flex: none; }
.sh-say:hover { filter: brightness(.97); }
.sh-defs { display: flex; flex-direction: column; gap: 10px; }
.sh-meaning { display: flex; flex-direction: column; gap: 4px; }
.sh-pos { align-self: flex-start; font: 600 11px var(--font); letter-spacing: .03em; text-transform: lowercase; font-style: italic; color: var(--c); background: var(--c-soft); padding: 1px 8px; border-radius: 999px; }
.sh-meaning ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.sh-meaning li { font-size: 13.5px; line-height: 1.5; color: var(--text); padding-left: 2px; }
.sh-meaning li::marker { color: var(--text-3); font-size: 12px; }
.sh-def { display: inline; }
.sh-def.sh-copyable { margin: 0 -4px; padding: 1px 4px; border-radius: 6px; }
.sh-ex { display: block; font-size: 12.5px; color: var(--text-3); font-style: italic; margin-top: 1px; }
.sh-nyms { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.sh-nyms .sh-label { margin-right: 4px; }
.sh-nym { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); font: 500 12.5px var(--font); cursor: pointer; }
.sh-nym:hover { background: var(--fill); color: var(--text); border-color: transparent; }

/* Markets */
.sh-stock { display: flex; flex-direction: column; gap: 6px; }
.sh-stock-name { font-size: 13px; color: var(--text-2); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.sh-stock-price { align-items: baseline; gap: 12px; }
.sh-move { font: 650 13.5px var(--font); font-variant-numeric: tabular-nums; }
.sh-move.up { color: var(--mint); }
.sh-move.down { color: var(--err); }
.sh-chart { height: 110px; margin-top: 2px; }
.sh-chart .sh-note { padding-top: 30px; text-align: center; }
svg.sh-spark { width: 100%; height: 110px; display: block; overflow: visible; }
.sh-spark-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sh-spark.up .sh-spark-line { stroke: var(--mint); }
.sh-spark.down .sh-spark-line { stroke: var(--err); }
.sh-spark.up .sh-spark-top { stop-color: var(--mint); stop-opacity: .22; }
.sh-spark.down .sh-spark-top { stop-color: var(--err); stop-opacity: .2; }
.sh-spark-bottom { stop-color: var(--surface); stop-opacity: 0; }
.sh-pill.sh-sym { font-family: var(--mono); letter-spacing: .02em; }

/* Trips */
.sh-trip { display: flex; flex-direction: column; gap: 8px; }
.sh-arrow.sm { width: 14px; height: 14px; }
.sh-field-inline { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); }
.sh-field-inline > .sh-i { margin-left: 4px; }

/* Bookmarks */
.sh-pill.sh-url { max-width: 100%; }
.sh-pill.sh-url .sh-pill-in:not(:placeholder-shown) { font-family: var(--mono); font-size: 12px; }
.sh-site { font-size: 12px; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .sh-shimmer { animation: none; }
  .sh-swap:hover { transform: none; }
}

/* Settings › General › Sites cards open */
#set-sites .site-field { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; margin: 6px 0; }
#set-sites .site-field span { margin: 0; font-weight: 600; }
#set-sites .site-field input { font: 12px var(--mono); }
#set-sites .site-field input.bad { border-color: var(--err); }

/* A card the model helped fill in. */
.sh-ai { font-size: 11px; color: var(--c); opacity: .8; animation: pop .3s var(--ease); }

/* Writing: notes and email (shape/richtext.mjs). */
.sh-rich { display: flex; flex-direction: column; gap: 6px; }
.sh-rich-area { position: relative; min-height: 64px; max-height: 260px; overflow-y: auto; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; outline: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); user-select: text; cursor: text; transition: background .15s, box-shadow .15s; overflow-wrap: anywhere; }
.sh-rich-area:hover { background: var(--fill); }
.sh-rich-area:focus { background: var(--fill); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 22%, transparent); }
.sh-rich-area.is-empty::before { content: attr(data-placeholder); color: var(--text-3); pointer-events: none; position: absolute; }
.sh-rich-area div, .sh-rich-area p { margin: 0; }
.sh-rich-area ul, .sh-rich-area ol { margin: 2px 0; padding-left: 24px; }
.sh-rich-area blockquote { margin: 0 0 0 24px; padding: 0; border: 0; }
.sh-rich-area table { border-collapse: collapse; margin: 6px 0; min-width: 50%; }
.sh-rich-area td, .sh-rich-area th { border: 1px solid var(--line-2); padding: 4px 8px; min-width: 60px; vertical-align: top; }
.sh-rich-area tr:first-child td { font-weight: 650; background: var(--fill); }
.sh-rich-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 1px; opacity: .55; transition: opacity .2s; }
.sh-rich:focus-within .sh-rich-bar, .sh-rich-bar:hover { opacity: 1; }
.sh-rich-bar button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); cursor: pointer; transition: background .12s, color .12s; }
.sh-rich-bar button:hover { background: var(--fill); color: var(--text); }
.sh-rich-bar button.on { background: var(--c-soft); color: var(--c); }
.sh-rich-bar .sh-i { width: 15px; height: 15px; }
.sh-rich-sep { width: 1px; height: 16px; background: var(--line-2); margin: 0 5px; }
.sh-rich-table { display: inline-flex; gap: 1px; margin-left: 4px; padding-left: 6px; border-left: 1px solid var(--line-2); }
.sh-rich-table[hidden] { display: none; }

/* People to write to, as chips. */
.sh-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 34px; padding: 3px 0; cursor: text; }
.sh-chip { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 3px 0 10px; border-radius: 999px; background: var(--c-soft); color: var(--text); font-size: 13px; font-weight: 550; max-width: 260px; }
.sh-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-chip.addr { font-weight: 500; }
.sh-chip button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--text-3); cursor: pointer; }
.sh-chip button:hover { background: var(--fill-2); color: var(--text); }
.sh-chip button .sh-i { width: 11px; height: 11px; }
.sh-chip-in { flex: 1; min-width: 120px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14.5px; padding: 4px 2px; }
.sh-chip-in::placeholder { color: var(--text-3); }
.sh-mail-row { grid-template-columns: 62px 1fr auto; }
.sh-mail-row[hidden] { display: none; }
.sh-mail-more { border: 0; background: transparent; color: var(--text-3); font: 600 12px var(--font); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.sh-mail-more:hover { color: var(--text); background: var(--fill); }
.sh-mail-more[hidden] { display: none; }
.sh-mail .sh-rich { margin-top: 6px; }

/* Fields with a way out: a place to the map, a link to its page. */
.sh-with { display: inline-flex; align-items: center; gap: 2px; }
.sh-open { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--text-3); cursor: pointer; transition: background .15s, color .15s; }
.sh-open:hover { background: var(--c-soft); color: var(--c); }
.sh-open[hidden] { display: none; }
.sh-open .sh-i { width: 14px; height: 14px; }

/* Timer: type the time in the circle, or take one of these. */
.sh-ring-in { position: absolute; inset: 14px; width: auto; border: 0; border-radius: 999px; background: transparent; outline: 0; text-align: center; font: 700 18px var(--display); color: var(--text); padding: 0; cursor: text; transition: background .15s; }
.sh-ring-in:hover:not(:disabled) { background: var(--fill); }
.sh-ring-in:focus { background: var(--fill); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent); }
.sh-ring-in::placeholder { color: var(--text-3); }
.sh-ring-in:disabled { cursor: default; }
.sh-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.sh-preset { height: 28px; min-width: 40px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--text-2); font: 600 12.5px var(--font); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.sh-preset:hover { background: var(--fill); color: var(--text); border-color: transparent; }
.sh-preset.on { background: var(--c-soft); color: var(--c); border-color: transparent; }

/* "Copied", floating just above what was copied. */
.sh-copied.float { position: fixed; z-index: 1100; transform: translateX(-50%); pointer-events: none; box-shadow: var(--shadow-md); }
.sh-copied.float { animation: sh-float-in .18s var(--ease); }
@keyframes sh-float-in { from { opacity: 0; transform: translate(-50%, 4px); } }

/* Stock chart: prices on the right, times below, a line that follows the pointer. */
.sh-chart { height: auto; }
.sh-chart-wrap { display: flex; flex-direction: column; gap: 4px; }
.sh-chart-row { display: flex; gap: 8px; }
.sh-plot-area { position: relative; flex: 1; min-width: 0; height: 120px; cursor: crosshair; }
.sh-plot-area svg.sh-spark { height: 120px; }
.sh-grid i { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); }
.sh-yaxis { position: relative; width: 58px; flex: none; height: 120px; }
.sh-yaxis span { position: absolute; left: 0; transform: translateY(-50%); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-xaxis { position: relative; height: 16px; margin-right: 66px; }
.sh-xaxis span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--text-3); white-space: nowrap; }
.sh-xaxis span:first-child { transform: none; }
.sh-xaxis span:last-child { transform: translateX(-100%); }
.sh-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text-3); opacity: .5; pointer-events: none; }
.sh-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 999px; background: var(--surface); border: 2px solid var(--mint); pointer-events: none; }
.sh-plot.down ~ .sh-dot, .sh-plot-area:has(.sh-plot.down) .sh-dot { border-color: var(--err); }
.sh-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; padding: 5px 9px; border-radius: 9px; background: var(--btn); color: var(--btn-ink); font-size: 11.5px; line-height: 1.3; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-md); z-index: 2; }
.sh-tip b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sh-tip span { opacity: .75; }
.sh-cross[hidden], .sh-dot[hidden], .sh-tip[hidden] { display: none; }
.sh-news { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.sh-news:empty { display: none; }
.sh-news .sh-label { margin-bottom: 2px; }
.sh-headline { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; margin: 0 -8px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.sh-headline:hover { background: var(--fill); }
.sh-hl-t { font-size: 13px; font-weight: 550; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sh-hl-m { font-size: 11.5px; color: var(--text-3); }

.pk-menu.wide { min-width: 340px; max-width: 420px; }

/* ------------------------------------------------------------------
   Apps (apps.js): the gallery, and an app's own view in the workspace.
   ------------------------------------------------------------------ */
.apps { flex: 1; min-width: 0; overflow-y: auto; padding: 0 14px 0 4px; }
.apps-inner { max-width: 1120px; margin: 0 auto; padding: 38px 24px 48px; display: flex; flex-direction: column; gap: 26px; }
.apps.empty .apps-inner { min-height: 100%; justify-content: center; padding-bottom: 12vh; box-sizing: border-box; }
.apps-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.apps-hero h1 { margin: 0; font: 800 40px/1.05 var(--display); letter-spacing: -.03em; }
.apps-hero > p { margin: 0 0 8px; max-width: 520px; color: var(--text-2); font-size: 15px; }
.apps-ask { width: min(760px, 100%); padding: 14px 14px 12px 18px; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid transparent; transition: border-color .15s, box-shadow .2s; text-align: left; }
.apps-ask:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-soft); }
.apps-ask textarea { display: block; width: 100%; min-height: 52px; resize: none; border: 0; outline: 0; background: none; color: var(--text); font: 400 16px/1.5 var(--font); padding: 4px 0; }
.apps-ask textarea::placeholder { color: var(--text-3); }
.apps-ask-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.apps-ask-hint { flex: 1; font-size: 12.5px; color: var(--text-3); }
.apps-ask .btn { height: 40px; padding: 0 18px; gap: 8px; flex: none; }
.apps-ask .btn svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.apps-ask .btn.busy svg { animation: spin 1.2s linear infinite; }
.apps-ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; }
.apps-idea { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--surface) 78%, transparent); box-shadow: var(--shadow-sm); color: var(--text-2); font: 550 13px var(--font); cursor: pointer; transition: transform .15s var(--ease), background .15s, color .15s; }
.apps-idea:hover { background: var(--surface); color: var(--text); transform: translateY(-1px); }
.apps-idea-i { font-size: 15px; line-height: 1; }
.apps-note { align-self: center; padding: 8px 14px; border-radius: 999px; background: var(--sun-soft); color: var(--text); font-size: 13px; }
.apps-mine h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--text-2); }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.app-card { position: relative; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; transition: transform .18s var(--ease), box-shadow .18s var(--ease); animation: fadein .25s var(--ease) both; }
.app-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.app-card.off { opacity: .72; }
.app-card-open { display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: var(--text); cursor: pointer; }
.app-card-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 22px; }
.app-cover { display: grid; place-items: center; height: 118px; background:
  radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--app-c) 34%, transparent), transparent 70%),
  linear-gradient(160deg, color-mix(in srgb, var(--app-c) 22%, var(--surface)), color-mix(in srgb, var(--app-c) 8%, var(--surface))); }
.app-cover .app-emoji { font-size: 46px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .14)); transition: transform .25s var(--ease); }
.app-card:hover .app-emoji { transform: scale(1.08) rotate(-4deg); }
.app-card-body { display: flex; flex-direction: column; gap: 4px; padding: 13px 16px 14px; min-width: 0; }
.app-card-body b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-card-desc { font-size: 12.5px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.app-card-foot { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--text-3); }
.app-spin { width: 10px; height: 10px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.app-card-more { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text-2); cursor: pointer; opacity: 0; transition: opacity .15s; backdrop-filter: blur(6px); }
.app-card:hover .app-card-more, .app-card-more:focus-visible { opacity: 1; }
.app-card-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.app-rename { font: 700 15px var(--font); padding: 2px 6px; margin: -3px -7px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); color: var(--text); width: calc(100% + 14px); }
.app-rename.bar { width: 220px; margin: 0; font-size: 14px; }
.app-menu { position: fixed; z-index: 120; max-width: 340px; }
.app-menu button:disabled { opacity: 1; cursor: default; color: var(--text-2); }
.app-menu button:disabled:hover { background: none; }
.app-menu svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app-menu-t { display: flex; flex-direction: column; min-width: 0; }
.app-menu-t small { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 270px; }

/* An app's own view: the app instead of the computer (the chat stays). */
.appstage { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md); overflow: hidden; }
.appstage[hidden] { display: none; }
.app.app-mode .stage > :not(.appstage) { display: none !important; }
.app.app-mode .titlebar #control, .app.app-mode .titlebar #media-controls { display: none !important; }
.appstage.working { box-shadow: var(--shadow-md), 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.appbar { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 10px 0 8px; border-bottom: 1px solid var(--line); flex: none; }
.appbar-back, .appbar-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: none; color: var(--text-2); cursor: pointer; flex: none; }
.appbar-back:hover, .appbar-btn:hover { background: var(--surface-3); color: var(--text); }
.appbar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-tile { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none; background: linear-gradient(160deg, color-mix(in srgb, var(--app-c) 30%, var(--surface)), color-mix(in srgb, var(--app-c) 12%, var(--surface))); }
.app-tile .app-emoji { font-size: 17px; line-height: 1; }
.app-tile.big { width: 72px; height: 72px; border-radius: 22px; }
.app-tile.big .app-emoji { font-size: 38px; }
.appbar-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.appbar-t b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.appbar-t small { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-3); }
.appbar-t small::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--text-3); }
.appbar-t small.ok::before { background: var(--mint); }
.appbar-t small.busy::before { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.appbar-t small.bad::before { background: var(--err); }
.appbar-gap { flex: 1; }
.app-problems { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); font: 650 12px var(--font); cursor: pointer; animation: pop .2s var(--ease); }
.app-problems[hidden] { display: none; }
.app-problems svg { width: 14px; height: 14px; }
.app-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--surface-3); }
.app-seg button { display: grid; place-items: center; width: 32px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--text-3); cursor: pointer; }
.app-seg button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.app-seg svg { width: 17px; height: 17px; }
.app-canvas { position: relative; flex: 1; min-height: 0; display: flex; background: var(--surface-2); }
.app-frame { position: relative; flex: 1; min-width: 0; }
.app-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--surface); opacity: 1; transition: opacity .25s var(--ease); }
.app-iframe.loading { opacity: 0; }
.app-canvas.phone { align-items: center; justify-content: center; padding: 18px; background:
  radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--text) 4%, transparent), transparent 60%), var(--surface-2); }
.app-canvas.phone .app-frame { flex: none; width: 390px; height: min(844px, 100%); max-height: 100%; border-radius: 42px; overflow: hidden; box-shadow: 0 0 0 10px #16181a, 0 0 0 11px #2c2f31, var(--shadow-lg); }
.app-building { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; animation: fadein .25s var(--ease);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--app-c, var(--accent)) 16%, transparent), transparent 46%), var(--surface); }
.app-building.waiting .ab-bar { display: none; }
.app-building.waiting .ab-tile { animation: none; }
.app-building[hidden] { display: none; }
.ab-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; width: min(380px, 86%); }
.ab-tile { margin-bottom: 8px; animation: ab-float 2.6s ease-in-out infinite; box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--app-c) 60%, transparent); }
@keyframes ab-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-3deg); } }
.ab-card h2 { margin: 0; font: 750 21px var(--display); letter-spacing: -.015em; }
.ab-card p { margin: 0; min-height: 20px; color: var(--text-2); font-size: 13.5px; transition: opacity .2s; }
.ab-bar { position: relative; width: 180px; height: 4px; margin-top: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ab-bar i { position: absolute; inset: 0; width: 40%; border-radius: 999px; background: var(--accent); animation: ab-slide 1.4s ease-in-out infinite; }
@keyframes ab-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.app-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-2); font-size: 14px; }
.app-off[hidden] { display: none; }
.app-off .buddy { width: 56px; height: 56px; color: var(--coral); }
@media (prefers-reduced-motion: reduce) { .ab-tile, .ab-bar i, .app-spin { animation: none; } }

/* Home: Your apps */
.hw-appgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin-top: 6px; }
.hw-rowbtn.hw-app { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 8px 4px; border-top: 0; border-radius: 12px; text-align: center; cursor: pointer; }
.hw-rowbtn.hw-app:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.hw-app-i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; font-size: 22px; line-height: 1;
  background: linear-gradient(160deg, color-mix(in srgb, var(--app-c) 32%, var(--surface)), color-mix(in srgb, var(--app-c) 12%, var(--surface)));
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--app-c) 70%, transparent); transition: transform .2s var(--ease); }
.hw-app:hover .hw-app-i { transform: translateY(-2px) scale(1.04); }
.hw-app-n { max-width: 100%; font-size: 12px; font-weight: 550; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* An app's icon (apps.js openLook) */
#app-tile { cursor: pointer; transition: transform .15s var(--ease); }
#app-tile:hover { transform: scale(1.08); }
dialog.app-look { width: 440px; }
.al-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.al-head h2 { margin: 0 0 2px; }
.al-head .app-tile { transition: background .2s var(--ease); }
.al-sub { font-size: 12.5px; }
.al-row { display: flex; flex-direction: column; gap: 10px; }
.al-custom { width: 100%; box-sizing: border-box; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); color: var(--text); font: 16px var(--font); }
.al-emojis { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.al-e { aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; transition: background .12s, transform .12s var(--ease); }
.al-e:hover { background: var(--surface-3); transform: scale(1.1); }
.al-e.on { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.al-h { margin: 16px 0 8px; font: 650 11px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.al-colors { display: flex; gap: 10px; flex-wrap: wrap; }
.al-c { width: 28px; height: 28px; border-radius: 999px; border: 0; background: var(--c); cursor: pointer; box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px transparent; transition: box-shadow .15s, transform .12s var(--ease); }
.al-c:hover { transform: scale(1.1); }
.al-c.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }

/* An app's secrets (apps.js openSecrets) */
dialog.app-secrets { width: 520px; }
dialog.app-secrets form { padding: 22px 22px 0; }
dialog.app-secrets h2 { margin: 0 0 6px; font-size: 16px; }
.as-lead { margin: 0 0 14px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.as-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.as-empty { margin: 0; padding: 12px 14px; color: var(--text-3); font-size: 13px; }
.as-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.as-item + .as-item { border-top: 1px solid var(--line); }
.as-key { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); flex: none; }
.as-key svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.as-what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.as-what b { font: 650 13px var(--mono); letter-spacing: .01em; }
.as-what small { color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-del { border: 0; background: none; color: var(--text-3); font: 600 12.5px var(--font); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.as-del:hover { color: var(--danger, #d14343); background: var(--surface-3); }
.as-add { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; border-radius: 12px; background: var(--surface-2); }
.as-f { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.as-f small { font-weight: 500; color: var(--text-3); }
.as-f:nth-child(3) { grid-column: 1 / -1; }
.as-f input { height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--text); font: 13px var(--font); }
.as-f input#as-name { font-family: var(--mono); font-size: 12.5px; }
.as-f input:focus, .al-custom:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.as-note { grid-column: 1 / -1; margin: -2px 0 0 !important; font-size: 12px; color: var(--text-3) !important; }

/* App view: Point, Preview/Code, full window (apps.js) */
.appbar-btn.app-point { width: auto; gap: 6px; padding: 0 10px 0 8px; font: 600 12.5px var(--font); display: inline-flex; align-items: center; }
.appbar-btn.app-point[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink, var(--accent)); }
.appstage.pointing .app-canvas { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
.app-seg.app-view button { width: auto; padding: 0 10px; font: 600 12px var(--font); }
.appstage.coding .app-device, .appstage.coding #app-reload { display: none; }
/* Code view (appcode.js): files, search, the editor */
.app-code { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: 236px minmax(0, 1fr); background: var(--surface); animation: fadein .18s var(--ease); }
.app-code[hidden] { display: none; }
.app-code svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ac-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--surface-2); }
.ac-sidehead { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px; flex: none; border-bottom: 1px solid var(--line); }
.ac-tabs { display: flex; padding: 2px; border-radius: 9px; background: var(--surface-3); }
.ac-tabs button { height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font: 600 12px var(--font); }
.ac-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.ac-tools { display: flex; margin-left: auto; }
.ac-tools[hidden] { display: none; }
.ac-ibtn { display: grid; place-items: center; width: 28px; height: 28px; flex: none; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--text-2); }
.ac-ibtn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.ac-ibtn:disabled { opacity: .35; cursor: default; }
.ac-ibtn svg { width: 16px; height: 16px; }

.ac-files { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 6px 24px; outline: 0; }
.ac-files[hidden] { display: none; }
.ac-files.drop-root { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 10px; }
.ac-row { position: relative; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 calc(6px + var(--d, 0) * 14px); border-radius: 7px; color: var(--text-2); font: 500 12.5px var(--font); cursor: pointer; outline: 0; }
.ac-row:hover { background: var(--surface-3); color: var(--text); }
.ac-row:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.ac-row.on { background: var(--surface); color: var(--text); font-weight: 650; box-shadow: var(--shadow-sm); }
.ac-row.bin .ac-fn { color: var(--text-3); }
.ac-row.err .ac-fn { color: var(--err); }
.ac-row.drop { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent); }
.ac-row.dragging { opacity: .45; }
.ac-row.new { animation: ac-new 1.6s var(--ease); }
@keyframes ac-new { 0%, 30% { background: color-mix(in srgb, var(--ok) 20%, transparent); } }
.ac-chev { width: 14px !important; height: 14px !important; flex: none; color: var(--text-3); transition: transform .15s var(--ease); }
.ac-row[aria-expanded="true"] > .ac-chev, .ac-rhead[aria-expanded="true"] > .ac-chev { transform: rotate(90deg); }
.ac-chev-sp { width: 14px; flex: none; }
.ac-ficon { width: 16px !important; height: 16px !important; flex: none; color: var(--text-3); }
.ac-row.folder .ac-ficon { color: color-mix(in srgb, var(--sun) 80%, var(--text-3)); fill: color-mix(in srgb, var(--sun) 22%, transparent); }
.ac-ficon.img { color: var(--mint); }
.ac-fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-dot { width: 7px; height: 7px; flex: none; margin-right: 4px; border-radius: 50%; background: var(--accent); }
.ac-more { display: grid; place-items: center; width: 22px; height: 22px; flex: none; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-3); opacity: 0; }
.ac-row:hover .ac-more, .ac-row:focus-within .ac-more { opacity: 1; }
.ac-more:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.ac-more svg { width: 16px; height: 16px; stroke-width: 2.6; }
.ac-row.editing { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent); cursor: default; }
.ac-name { flex: 1; min-width: 0; height: 22px; padding: 0 4px; border: 0; outline: 0; background: none; color: var(--text); font: 500 12.5px var(--font); }
.ac-name.bad { color: var(--err); }
.ac-empty { margin: 16px 10px; color: var(--text-3); font-size: 12.5px; }
.ac-ext { flex: none; min-width: 26px; padding: 1px 0; border-radius: 4px; background: var(--surface-3); color: var(--text-3); font: 700 8.5px/1.5 var(--mono); text-transform: uppercase; text-align: center; letter-spacing: .02em; }
.ac-ext.e-html, .ac-ext.e-htm, .ac-ext.e-svg { background: #fde3d9; color: #b4431f; } .ac-ext.e-css { background: #dbe8fb; color: #1f5fae; }
.ac-ext.e-js, .ac-ext.e-mjs, .ac-ext.e-cjs, .ac-ext.e-jsx { background: #fcf0c5; color: #8a6200; } .ac-ext.e-ts, .ac-ext.e-tsx { background: #dde7fb; color: #2453a6; }
.ac-ext.e-json { background: #e3f3e6; color: #24763b; } .ac-ext.e-py { background: #e2e5fb; color: #3b47a8; } .ac-ext.e-md { background: #ece8f7; color: #5b4a95; }
@media (prefers-color-scheme: dark) {
  .ac-ext[class*="e-"] { background: var(--surface-3); }
  .ac-ext.e-html, .ac-ext.e-htm, .ac-ext.e-svg { color: #ff9a84; } .ac-ext.e-css, .ac-ext.e-ts, .ac-ext.e-tsx { color: #8fb4ff; } .ac-ext.e-js, .ac-ext.e-mjs, .ac-ext.e-cjs, .ac-ext.e-jsx { color: #f2c46d; }
  .ac-ext.e-json { color: #8fd6a6; } .ac-ext.e-py { color: #aab2ff; } .ac-ext.e-md { color: #c6b6f2; }
}

/* search across files */
.ac-search { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px 0; }
.ac-search[hidden] { display: none; }
.ac-search > .ac-field { flex: none; }
.ac-search > .ac-field .ac-ibtn { width: 24px; height: 24px; }
.ac-field { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; height: 30px; padding: 0 3px 0 9px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); }
.ac-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.ac-field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--text); font: 12.5px var(--font); }
.ac-field input.bad { color: var(--err); }
.ac-flags { display: flex; gap: 1px; flex: none; }
.ac-flags button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--text-3); font: 650 10.5px var(--mono); }
.ac-flags button:hover { background: var(--surface-3); color: var(--text); }
.ac-flags button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.ac-sinfo { min-height: 18px; padding: 2px 4px; color: var(--text-3); font-size: 11.5px; }
.ac-sinfo.bad { color: var(--err); }
.ac-results { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -8px; padding: 0 6px 20px; }
.ac-rhead { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; height: 26px; padding: 0 4px; border: 0; border-radius: 6px; background: none; color: var(--text); text-align: left; font: 600 12px var(--font); }
.ac-rhead:hover { background: var(--surface-3); }
.ac-rpath { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-rdir { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-weight: 500; font-size: 11px; }
.ac-rcount { flex: none; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font: 600 10.5px/16px var(--font); text-align: center; }
.ac-rrepl { display: none; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: var(--surface); color: var(--text-2); box-shadow: var(--shadow-sm); }
.ac-rrepl svg { width: 14px; height: 14px; }
.ac-search:has(#ac-r:not(:placeholder-shown)) .ac-rhead:hover .ac-rrepl { display: grid; }
.ac-search:has(#ac-r:not(:placeholder-shown)) .ac-rhead:hover .ac-rcount { display: none; }
.ac-rlist[hidden] { display: none; }
.ac-rline { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 3px 6px 3px 26px; border: 0; border-radius: 6px; background: none; color: var(--text-2); text-align: left; }
.ac-rline:hover { background: var(--surface-3); color: var(--text); }
.ac-rline.on { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.ac-rno { flex: none; min-width: 20px; color: var(--text-3); font: 500 10.5px var(--mono); text-align: right; }
.ac-rtext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; font: 11.5px/1.5 var(--mono); }
.ac-rtext mark, .ac-marks mark { border-radius: 3px; background: color-mix(in srgb, var(--sun) 45%, transparent); color: inherit; }
.ac-search:has(#ac-r:not(:placeholder-shown)) .ac-rtext mark { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--err) 70%, transparent); }

/* the editor */
.ac-editor { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ac-edbar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--line); flex: none; }
.ac-crumbs { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; font: 500 12.5px var(--font); color: var(--text-3); }
.ac-crumb.last { color: var(--text); font-weight: 650; font-family: var(--mono); font-size: 12.5px; }
.ac-sep { color: var(--line-2); }
.ac-dirty { flex: none; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); font: 650 11px var(--font); }
.ac-edbar kbd { margin-left: 4px; font: 500 10.5px var(--font); opacity: .7; }
.ac-find { display: flex; align-items: flex-start; gap: 4px; padding: 7px 10px 7px 6px; flex: none; border-bottom: 1px solid var(--line); background: var(--surface-2); animation: fadein .12s var(--ease); }
.ac-find[hidden] { display: none; }
.af-toggle { width: 22px; height: 30px; }
.af-toggle svg { transition: transform .15s var(--ease); }
.ac-find.replacing .af-toggle svg { transform: rotate(90deg); }
.af-rows { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; max-width: 560px; }
.af-row { display: flex; align-items: center; gap: 4px; }
.af-repl { display: none; }
.ac-find.replacing .af-repl { display: flex; }
.af-repl .btn.small { height: 28px; padding: 0 10px; }
.af-count { min-width: 74px; padding: 0 6px; color: var(--text-3); font-size: 11.5px; text-align: center; white-space: nowrap; }
.af-count.none { color: var(--err); }

.ac-area { position: relative; flex: 1; min-height: 0; display: flex; background: var(--surface); }
.ac-area[hidden] { display: none; }
.ac-gutter { position: relative; flex: none; overflow: hidden; border-right: 1px solid var(--line); background: var(--surface); user-select: none; }
.ac-gnums { margin: 0; padding: 14px 12px 400px 18px; min-width: 46px; text-align: right; color: var(--text-3); opacity: .7; font: 12px/20px var(--mono); will-change: transform; }
.ac-gmarks { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.ac-gm { position: absolute; left: 5px; width: 7px; height: 7px; margin-top: 6.5px; border-radius: 50%; background: var(--err); box-shadow: 0 0 0 2px var(--surface); pointer-events: auto; cursor: help; }
.ac-gm.warn { background: var(--warn); }
.ac-paper { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.ac-layers { position: absolute; left: 0; top: 0; min-width: 100%; pointer-events: none; will-change: transform; }
.ac-hl, .ac-marks, .ac-text { margin: 0; padding: 14px 18px 40vh; font: 12.5px/20px var(--mono); font-variant-ligatures: none; letter-spacing: 0; tab-size: 2; white-space: pre; word-wrap: normal; overflow-wrap: normal; }
.ac-hl { position: relative; color: var(--text); }
.ac-marks { position: absolute; left: 0; top: 0; color: transparent; }
.ac-marks mark { color: transparent; }
.ac-marks mark.on { background: color-mix(in srgb, var(--accent) 38%, transparent); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent); }
.ac-curline, .ac-flash { position: absolute; left: 0; top: 0; width: 100000px; height: 20px; background: color-mix(in srgb, var(--text) 3.5%, transparent); }
.ac-curline[hidden] { display: none; }
.ac-flash { background: color-mix(in srgb, var(--sun) 30%, transparent); opacity: 0; }
.ac-flash.on { animation: ac-flash 1.2s var(--ease); }
@keyframes ac-flash { 0%, 35% { opacity: 1; } 100% { opacity: 0; } }
.ac-text { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; outline: 0; resize: none; overflow: auto; background: transparent; color: transparent; caret-color: var(--text); -webkit-text-fill-color: transparent; user-select: text; }
.ac-text.plain { color: var(--text); -webkit-text-fill-color: var(--text); }
.ac-text.plain + .ac-layers .ac-hl, .ac-paper:has(.ac-text.plain) .ac-hl { visibility: hidden; }
.ac-text::selection { background: color-mix(in srgb, var(--cobalt) 26%, transparent); }
.ac-view { flex: 1; min-height: 0; display: grid; place-items: center; padding: 24px; overflow: auto; background: var(--surface); }
.ac-view[hidden] { display: none; }
.ac-view-card { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 420px; text-align: center; color: var(--text-2); }
.ac-view-card b { color: var(--text); font: 650 13.5px var(--font); }
.ac-view-card small { color: var(--text-3); font-size: 12px; overflow-wrap: anywhere; }
.ac-view-i { width: 36px; height: 36px; margin-bottom: 4px; color: var(--text-3); stroke-width: 1.5 !important; }
.ac-view-card.pic { max-width: 100%; }
.ac-pic { display: grid; place-items: center; min-width: 120px; min-height: 90px; max-width: 100%; margin-bottom: 8px; padding: 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line);
  background: repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; }
.ac-pic img { display: block; max-width: min(100%, 720px); max-height: 52vh; object-fit: contain; image-rendering: auto; }
.ac-view-err { color: var(--err); font-size: 12.5px; }
.ac-note { display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); background: var(--surface-2); }
.ac-note span { flex: 1; min-width: 0; }
.ac-note .btn.small { height: 26px; }
.ac-note[hidden] { display: none; }
.ac-status { display: flex; align-items: center; justify-content: flex-end; gap: 16px; height: 26px; flex: none; padding: 0 14px; border-top: 1px solid var(--line); color: var(--text-3); font: 500 11px var(--font); white-space: nowrap; overflow: hidden; }
.ac-status span:first-child { margin-right: auto; font-variant-numeric: tabular-nums; }
.ac-drop { position: absolute; inset: 8px; z-index: 5; display: grid; place-items: center; border: 2px dashed color-mix(in srgb, var(--accent) 65%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(3px); pointer-events: none; animation: fadein .12s var(--ease); }
.ac-drop[hidden] { display: none; }
.ac-drop > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 26px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lg); }
.ac-drop svg { width: 26px; height: 26px; margin-bottom: 4px; color: var(--accent); }
.ac-drop b { font: 650 14px var(--font); }
.ac-drop small { color: var(--text-3); font-size: 12px; }
.app-view button.unsaved { position: relative; }
.app-view button.unsaved::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* code colours (codehl.js) */
.ac-hl { --k: #9b3fb5; --s: #1f7a4d; --n: #b5531c; --c: #8a918a; --f: #2459c7; --p: #17708f; --t: #c2452b; --a: #9a6400; --ty: #9a6400; }
@media (prefers-color-scheme: dark) { .ac-hl { --k: #d49cf2; --s: #8fd6a6; --n: #f5a46b; --c: #737b73; --f: #8fb4ff; --p: #7fcbe6; --t: #ff9a84; --a: #f2c46d; --ty: #f2c46d; } }
.t-k { color: var(--k); } .t-s { color: var(--s); } .t-n, .t-l, .t-re { color: var(--n); } .t-c { color: var(--c); font-style: italic; }
.t-f { color: var(--f); } .t-p, .t-v { color: var(--p); } .t-t, .t-sel { color: var(--t); } .t-a, .t-ty { color: var(--a); } .t-d { color: var(--k); }
.t-h { color: var(--t); font-weight: 700; } .t-o { color: var(--text-2); }

/* Console (appconsole.js) */
.app-console { position: relative; display: flex; flex-direction: column; flex: none; height: var(--acn-h, 220px); min-height: 110px; border-top: 1px solid var(--line-2); background: var(--surface); animation: acn-in .18s var(--ease); }
.app-console[hidden] { display: none; }
@keyframes acn-in { from { transform: translateY(12px); opacity: 0; } }
.app.app-full .app-console { display: none; }
.app-console svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.acn-resize { position: absolute; left: 0; right: 0; top: -5px; height: 10px; z-index: 4; cursor: ns-resize; }
.acn-resize::after { content: ""; position: absolute; left: 50%; top: 3px; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--line-2); opacity: 0; transition: opacity .15s; }
.acn-resize:hover::after, body.resizing-v .acn-resize::after { opacity: 1; }
body.resizing-v { cursor: ns-resize; }
body.resizing-v iframe, body.resizing-v .acn-list { pointer-events: none; }
.acn-bar { display: flex; align-items: center; gap: 8px; height: 40px; flex: none; padding: 0 6px 0 14px; border-bottom: 1px solid var(--line); }
.acn-title { font: 650 12.5px var(--font); margin-right: 4px; }
.acn-levels, .acn-sources { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--surface-2); }
.acn-sources[hidden] { display: none; }
.acn-levels button, .acn-sources button { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 0; border-radius: 6px; background: none; color: var(--text-2); font: 600 11.5px var(--font); }
.acn-levels button[aria-checked="true"], .acn-sources button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.acn-c { min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--surface-3); font: 650 10px/15px var(--font); text-align: center; }
.acn-c[hidden] { display: none; }
.acn-levels button[data-level="error"] .acn-c { background: color-mix(in srgb, var(--err) 18%, transparent); color: var(--err); }
.acn-levels button[data-level="warn"] .acn-c { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.acn-filter { width: 150px; height: 26px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 7px; outline: 0; background: var(--surface); color: var(--text); font: 12px var(--font); }
.acn-filter:focus { border-color: var(--accent); }
.acn-fix { height: 26px !important; padding: 0 10px !important; }
.acn-fix svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.acn-list { flex: 1; min-height: 0; overflow: auto; font: 12px/18px var(--mono); user-select: text; }
.acn-line { display: flex; align-items: flex-start; gap: 8px; padding: 4px 8px 4px 12px; border-bottom: 1px solid var(--line); color: var(--text); }
.acn-line:hover { background: var(--surface-2); }
.acn-line.lv-error { background: color-mix(in srgb, var(--err) 7%, transparent); color: var(--err); border-bottom-color: color-mix(in srgb, var(--err) 14%, transparent); }
.acn-line.lv-warn { background: color-mix(in srgb, var(--warn) 8%, transparent); color: color-mix(in srgb, var(--warn) 75%, var(--text)); border-bottom-color: color-mix(in srgb, var(--warn) 16%, transparent); }
.acn-line.lv-debug, .acn-line.lv-info { color: var(--text-2); }
.acn-line.src-server:not(.lv-error):not(.lv-warn) { color: var(--text-2); }
.acn-i { width: 14px !important; height: 14px !important; flex: none; margin-top: 2px; }
.acn-line.src-server .acn-i { color: var(--text-3); }
.acn-i-sp { width: 14px; flex: none; }
.acn-n { flex: none; min-width: 18px; margin-top: 1px; padding: 0 5px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font: 650 10px/16px var(--font); text-align: center; }
.acn-text { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.acn-more { margin-left: 8px; padding: 0 6px; border: 0; border-radius: 5px; background: var(--surface-3); color: var(--text-2); font: 600 10.5px/16px var(--font); vertical-align: 1px; }
.acn-rest { padding-left: 2px; opacity: .85; }
.acn-rest[hidden] { display: none; }
.acn-side { display: flex; align-items: center; gap: 2px; flex: none; }
.acn-where { padding: 0 4px; border: 0; border-radius: 4px; background: none; color: var(--text-3); font: 11px/18px var(--mono); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; }
.acn-where:hover:not(:disabled) { color: var(--accent-ink); text-decoration-color: currentColor; }
.acn-where:disabled { cursor: default; text-decoration: none; }
.acn-copy { display: grid; place-items: center; width: 22px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-3); opacity: 0; }
.acn-line:hover .acn-copy { opacity: 1; }
.acn-copy:hover { background: var(--surface-3); color: var(--text); }
.acn-copy svg { width: 13px; height: 13px; }
.acn-div { display: flex; align-items: center; gap: 10px; padding: 6px 12px; color: var(--text-3); font: 500 11px var(--font); }
.acn-div::before, .acn-div::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.acn-div time { order: 3; font-variant-numeric: tabular-nums; }
.acn-div::after { order: 2; }
.acn-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; padding: 16px; color: var(--text-3); font: 12.5px var(--font); text-align: center; }
.acn-empty b { color: var(--text-2); font-weight: 650; }
.app-console-btn { position: relative; }
.app-console-btn[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }
.acn-badge { position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--err); color: #fff; font: 700 9.5px/15px var(--font); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.acn-badge[hidden] { display: none; }

/* What the next message is about: the part of the app pointed at */
.pointed { display: flex; width: fit-content; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; margin: 0 0 6px; padding: 4px 4px 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); font-size: 12.5px; animation: fadein .2s var(--ease); }
.pointed[hidden] { display: none; }
.pointed svg { width: 13px; height: 13px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; flex: none; }
.pointed b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pointed-x { width: 20px; height: 20px; border: 0; border-radius: 999px; background: none; color: var(--text-3); font-size: 15px; line-height: 1; cursor: pointer; flex: none; }
.pointed-x:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }

/* Using an app: the whole window */
.app.app-full .sidebar, .app.app-full .rail, .app.app-full .appbar { display: none !important; }
.app.app-full .appstage { border-radius: 0; box-shadow: none; }
.app.app-full .stage { padding: 0 !important; margin: 0 !important; }
.app-unfull { display: none; position: absolute; top: 10px; right: 12px; z-index: 6; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--surface) 86%, transparent); color: var(--text-2); font: 600 12px var(--font); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); cursor: pointer; opacity: .55; transition: opacity .2s; }
.app-unfull:hover { opacity: 1; color: var(--text); }
.app-unfull svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app.app-full .app-unfull { display: inline-flex; }
.appstage { position: relative; }

/* An app's chat, before the first message: about the app (index.html .app-welcome) */
.app-welcome { display: none; }
.app.app-mode .welcome > .welcome-lead, .app.app-mode .welcome > .welcome-sub, .app.app-mode .welcome > #suggestions { display: none; }
.app.app-mode .app-welcome { display: contents; }

/* Help while typing in the Code view (codeassist.js) */
.acx-pop { position: absolute; z-index: 4; min-width: 220px; max-width: min(420px, 80%); max-height: 232px; overflow-y: auto; padding: 4px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-lg); font: 12.5px/1 var(--mono); }
.acx-pop[hidden] { display: none; }
.acx-item { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px 0 5px; border-radius: 6px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.acx-item.on { background: color-mix(in srgb, var(--cobalt) 14%, transparent); color: var(--text); }
.acx-item b { color: var(--text); font-weight: 700; }
.acx-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.acx-d { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); font: 500 11px var(--font); }
.acx-k { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 5px; background: var(--surface-3); color: var(--text-3); font: 700 9.5px var(--font); }
.acx-k.k-k { color: var(--k, #9b3fb5); } .acx-k.k-f { color: #2459c7; background: color-mix(in srgb, #2459c7 12%, transparent); } .acx-k.k-p { color: #17708f; } .acx-k.k-t { color: var(--accent-ink); } .acx-k.k-a, .acx-k.k-v { color: #9a6400; }
@media (prefers-color-scheme: dark) { .acx-k.k-f { color: #8fb4ff; } .acx-k.k-p { color: #7fcbe6; } .acx-k.k-a, .acx-k.k-v { color: #f2c46d; } .acx-k.k-k { color: #d49cf2; } }

.acx-ghost { position: absolute; z-index: 1; white-space: pre; font: 12.5px/20px var(--mono); font-variant-ligatures: none; pointer-events: none; }
.acx-ghost[hidden] { display: none; }
.acx-g1 { color: var(--text-3); background: var(--surface); opacity: .95; font-style: italic; }
.acx-rest { color: var(--text); background: var(--surface); }
.acx-gmore { display: block; width: max-content; min-width: 240px; padding: 0 12px 0 18px; color: var(--text-3); font-style: italic; background: var(--surface); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--cobalt) 45%, transparent); }

.acx-k-box { position: absolute; left: 14px; right: 14px; z-index: 5; display: flex; flex-direction: column; max-height: calc(100% - 16px); border: 1px solid color-mix(in srgb, var(--cobalt) 40%, var(--line-2)); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--cobalt) 10%, transparent); animation: fadein .14s var(--ease); font-family: var(--font); }
.acx-k-box[hidden] { display: none; }
.acx-k-head { display: flex; align-items: flex-start; gap: 6px; padding: 8px 8px 4px 12px; }
.acx-k-spark { flex: none; margin-top: 5px; color: var(--cobalt); font-size: 14px; }
.acx-k-in { flex: 1; min-width: 0; min-height: 28px; padding: 5px 2px; border: 0; outline: 0; resize: none; background: none; color: var(--text); font: 13px/1.4 var(--font); }
.acx-k-head .btn.small { height: 28px; flex: none; }
.acx-k-x { width: 28px; height: 28px; flex: none; border: 0; border-radius: 7px; background: none; color: var(--text-3); font-size: 18px; line-height: 1; }
.acx-k-x:hover { background: var(--surface-3); color: var(--text); }
.acx-k-what { padding: 0 12px 8px 34px; color: var(--text-3); font-size: 11.5px; }
.acx-k-err { margin: 0 12px 8px 34px; color: var(--err); font-size: 12.5px; }
.acx-diff { flex: 1; min-height: 0; overflow: auto; margin: 0 8px; padding: 6px 0; border-radius: 8px; background: var(--surface-2); font: 12px/19px var(--mono); white-space: pre; }
.acx-diff > div { padding: 0 12px 0 22px; position: relative; min-width: max-content; }
.acx-diff .add { background: color-mix(in srgb, var(--ok) 13%, transparent); }
.acx-diff .del { background: color-mix(in srgb, var(--err) 10%, transparent); color: var(--text-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--err) 55%, transparent); }
.acx-diff .add::before, .acx-diff .del::before { position: absolute; left: 8px; font-weight: 700; text-decoration: none; }
.acx-diff .add::before { content: "+"; color: var(--ok); }
.acx-diff .del::before { content: "−"; color: var(--err); }
.acx-diff .same { color: var(--text-2); }
.acx-k-foot { display: flex; align-items: center; gap: 6px; padding: 8px; }
.acx-k-foot small { flex: 1; min-width: 0; padding-left: 4px; color: var(--text-3); font-size: 11.5px; }
.acx-k-foot kbd { margin-left: 6px; font: 500 10.5px var(--font); opacity: .7; }
.acx-ai { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border: 0; border-radius: 6px; background: none; color: var(--text-3); font: 650 11px var(--font); }
.acx-ai:hover { background: var(--surface-3); color: var(--text); }
.acx-ai[aria-pressed="true"] { color: var(--cobalt); }
.acx-ai span { font-size: 11px; }
.ac-editor:has(.ac-paper.thinking) .acx-ai span { animation: acx-pulse 1s ease-in-out infinite; }
@keyframes acx-pulse { 50% { opacity: .25; } }

/* Code view: tabs, folding (appcode.js, codedoc.js) */
.ac-edbar { padding-left: 0; gap: 6px; }
.ac-tabs-strip { display: flex; align-items: stretch; align-self: stretch; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.ac-tabs-strip::-webkit-scrollbar { display: none; }
.ac-tab { position: relative; display: flex; align-items: center; gap: 7px; flex: none; max-width: 220px; padding: 0 6px 0 12px; border-right: 1px solid var(--line); color: var(--text-2); font: 500 12.5px var(--font); cursor: pointer; user-select: none; outline: 0; }
.ac-tab:hover { background: var(--surface-2); color: var(--text); }
.ac-tab.on { background: var(--surface); color: var(--text); font-weight: 650; }
.ac-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.ac-tab:not(.on) { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.ac-tab.preview .ac-tab-n { font-style: italic; }
.ac-tab:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.ac-tab-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-tab-d { flex: none; max-width: 80px; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); font-size: 11px; font-weight: 500; }
.ac-tab .ac-ext { min-width: 22px; font-size: 8px; }
.ac-tab-x { position: relative; display: grid; place-items: center; width: 20px; height: 20px; flex: none; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--text-3); opacity: 0; }
.ac-tab-x svg { width: 12px; height: 12px; stroke-width: 2.2; }
.ac-tab:hover .ac-tab-x, .ac-tab.on .ac-tab-x, .ac-tab.dirty .ac-tab-x { opacity: 1; }
.ac-tab-x:hover { background: var(--surface-3); color: var(--text); }
.ac-tab-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: none; }
.ac-tab.dirty .ac-tab-dot { display: block; }
.ac-tab.dirty .ac-tab-x svg { visibility: hidden; }
.ac-tab.dirty .ac-tab-x:hover .ac-tab-dot { display: none; }
.ac-tab.dirty .ac-tab-x:hover svg { visibility: visible; }
.ac-tabs-strip.empty::before { content: "No file open"; align-self: center; padding-left: 14px; color: var(--text-3); font: 500 12.5px var(--font); }
.ac-gnums { padding-right: 24px; }
.ac-gfold { position: absolute; top: 0; right: 0; width: 22px; height: 100%; will-change: transform; }
.ac-fold { position: absolute; right: 4px; display: grid; place-items: center; width: 16px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-3); opacity: 0; transition: opacity .15s; cursor: pointer; }
.ac-fold svg { width: 12px; height: 12px; stroke-width: 2.4; transform: rotate(90deg); transition: transform .15s var(--ease); }
.ac-fold.folded { opacity: 1; color: var(--accent-ink); }
.ac-fold.folded svg { transform: none; }
.ac-gutter:hover .ac-fold, .ac-fold:focus-visible { opacity: .85; }
.ac-fold:hover { opacity: 1 !important; color: var(--text); background: var(--surface-3); }
.ac-pills { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; z-index: 2; }
.ac-fpill { position: absolute; height: 16px; padding: 0 7px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--accent) 13%, var(--surface-2)); color: var(--accent-ink); font: 650 10.5px/16px var(--font); white-space: nowrap; cursor: pointer; pointer-events: auto; }
.ac-fpill:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); }

/* An app in its own window (appwin.html) */
body.aw { display: flex; flex-direction: column; height: 100vh; background: var(--surface); user-select: none; }
.aw-bar { display: flex; align-items: center; gap: 9px; height: 40px; flex: none; padding: 0 8px 0 84px; border-bottom: 1px solid var(--line); background: var(--surface-2); -webkit-app-region: drag; }
.aw-bar .app-tile { width: 22px; height: 22px; border-radius: 7px; }
.aw-bar .app-tile .app-emoji { font-size: 13px; }
.aw-name { font: 650 13px var(--font); }
.aw-gap { flex: 1; }
.aw-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; min-width: 28px; justify-content: center; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: 600 12px var(--font); -webkit-app-region: no-drag; }
.aw-btn.wide { padding: 0 10px 0 8px; }
.aw-btn:hover { background: var(--surface-3); color: var(--text); }
.aw-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.aw-btn.wide svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.aw-stage { position: relative; flex: 1; min-height: 0; }
.aw-stage .app-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--surface); transition: opacity .25s var(--ease); }
.aw-stage .app-iframe.loading { opacity: 0; }
.aw-off { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-2); font: 14px var(--font); }
.aw-off[hidden] { display: none; }

/* The gallery: pictures of apps, finding, ordering, more ideas (apps.js) */
.apps-mine-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.apps-mine-head h3 { margin: 0 !important; display: flex; align-items: center; gap: 8px; }
.apps-count { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text-3); font: 650 11.5px var(--font); }
.apps-count:empty { display: none; }
.apps-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.apps-tools[hidden] { display: none; }
.apps-search { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 85%, transparent); box-shadow: var(--shadow-sm); }
.apps-search svg { width: 15px; height: 15px; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; }
.apps-search input { width: 150px; border: 0; outline: 0; background: none; color: var(--text); font: 13px var(--font); }
.apps-search:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.apps-order { display: flex; padding: 2px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: var(--shadow-sm); }
.apps-order button { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: 600 12px var(--font); }
.apps-order button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.apps-none { margin: 18px 4px; color: var(--text-3); }
.app-cover { position: relative; }
.app-cover.shot { display: block; height: 150px; overflow: hidden; background: color-mix(in srgb, var(--app-c) 14%, var(--surface-2)); }
.app-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .45s var(--ease); }
.app-card:hover .app-shot { transform: scale(1.035); }
.app-cover.shot::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to top, color-mix(in srgb, var(--surface) 55%, transparent), transparent); pointer-events: none; }
.app-badge { position: absolute; left: 12px; bottom: 10px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--surface); box-shadow: 0 4px 14px rgba(0, 0, 0, .16), inset 0 0 0 1px color-mix(in srgb, var(--app-c) 30%, transparent); }
.app-badge .app-emoji { font-size: 19px; line-height: 1; }
.app-chip { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text-2); font: 650 11px var(--font); backdrop-filter: blur(6px); box-shadow: var(--shadow-sm); }
.app-chip.busy { color: var(--accent-ink); }
.app-chip.bad { color: var(--err); }
.app-card-win { position: absolute; top: 10px; right: 46px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text-2); cursor: pointer; opacity: 0; transition: opacity .15s; backdrop-filter: blur(6px); }
.app-card:hover .app-card-win, .app-card-win:focus-visible { opacity: 1; }
.app-card-win svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.app-card-win:hover, .app-card-more:hover { color: var(--text); background: var(--surface); }
.apps-idea.more { width: 36px; padding: 0; justify-content: center; }
.apps-idea.more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.apps-ideas.turn .apps-idea { animation: fadein .3s var(--ease) both; }
.apps-ideas.turn .apps-idea:nth-child(2) { animation-delay: .03s; } .apps-ideas.turn .apps-idea:nth-child(3) { animation-delay: .06s; } .apps-ideas.turn .apps-idea:nth-child(4) { animation-delay: .09s; } .apps-ideas.turn .apps-idea:nth-child(5) { animation-delay: .12s; } .apps-ideas.turn .apps-idea:nth-child(6) { animation-delay: .15s; }
.app-cover { height: 140px; }
.app-cover.shot { height: 140px; }

/* ---------- Hands (hands.js) ---------- */
.rail-btn { position: relative; }
.rail-btn.has-needs::after { content: ""; position: absolute; top: 7px; right: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2.5px var(--bg); }
#schedule .btn svg, .hire-sheet .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn svg path[d^="M8 5.5v13"] { fill: currentColor; stroke-width: 1.2; }

.hands-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 2px; }
.hands-face { width: 60px; height: 60px; flex: none; border-radius: 20px; background: var(--coral-soft); display: grid; place-items: center; color: var(--coral); }
.hands-face .buddy { width: 44px; height: 44px; }
.hands-hero h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.025em; }
.hands-hero p { margin: 4px 0 0; color: var(--text-2); font-size: 14.5px; }

.hire { display: flex; align-items: flex-end; gap: 10px; padding: 10px 10px 10px 20px; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-md); transition: box-shadow .2s; }
.hire:focus-within { box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-soft); }
.hire textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font: 15.5px/1.5 var(--font); padding: 9px 0; max-height: 160px; user-select: text; }
.hire textarea::placeholder { color: var(--text-3); }
.hire .btn { height: 42px; padding: 0 18px; flex: none; }
.hire-starters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -6px; }
.hs-l { font-size: 12.5px; font-weight: 600; color: var(--text-3); margin-right: 2px; }
.hire-starter { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 10px; border: 1px dashed var(--line-2); border-radius: 999px; background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--text); font-size: 13px; transition: background .15s, transform .15s var(--ease), border-color .15s; }
.hire-starter b { font-weight: 600; }
.hire-starter:hover { background: var(--surface); border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.hs-ico { font-size: 15px; line-height: 1; }

.hands-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 6px; }
.hands-grid[hidden] { display: none; }
.hc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hc-names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hc-names b { font-family: var(--display); font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-names span { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-line { margin: 0; min-height: 38px; font-size: 13px; line-height: 1.45; color: var(--text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hc-k { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--cobalt); }
.hc-k.k-done { background: var(--mint); } .hc-k.k-needs { background: var(--coral); }
.hc-foot { display: flex; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.hc-foot .grow { flex: 1; }
.hc-next { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hc-next svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 1.9; stroke-linecap: round; }
.hc-spend { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; margin-right: 4px; white-space: nowrap; }
.sc-ibtn svg path[d^="M8 5.5v13"] { fill: currentColor; }
.sc-ibtn:disabled { opacity: .35; pointer-events: none; }

.hand-tile { --hc: var(--coral); position: relative; width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--hc) 15%, var(--surface)); color: var(--hc); }
.hand-tile .buddy { width: 34px; height: 34px; }
.hand-tile.xs { width: 30px; height: 30px; border-radius: 10px; }
.hand-tile.xs .buddy { width: 22px; height: 22px; }
.hand-tile.xs .hand-emoji { display: none; }
.hand-tile.lg { width: 64px; height: 64px; border-radius: 20px; }
.hand-tile.lg .buddy { width: 48px; height: 48px; }
.hand-tile.xl { width: 84px; height: 84px; border-radius: 26px; }
.hand-tile.xl .buddy { width: 62px; height: 62px; }
.hand-emoji { position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); display: grid; place-items: center; font-size: 12px; line-height: 1; }
.hand-tile.lg .hand-emoji, .hand-tile.xl .hand-emoji { width: 28px; height: 28px; font-size: 15px; }
.hand-status { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.hand-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hand-status.s-on { background: var(--mint-soft); color: var(--mint); }
.hand-status.s-work { background: var(--sun-soft); color: var(--warn); }
.hand-status.s-work::before { animation: pulse 1.2s ease-in-out infinite; }
.hand-status.s-needs { background: var(--coral-soft); color: var(--accent-ink); }
.hand-status.s-off { color: var(--text-3); }

.routines-head { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.routines-head h2 { margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -.01em; }
.routines-head .btn { height: 36px; }

/* hiring */
dialog.hire-sheet { width: 720px; max-height: calc(100vh - 60px); display: none; flex-direction: column; overflow: hidden; }
dialog.hire-sheet[open] { display: flex; }
.hire-head { padding: 22px 24px 8px; }
.hire-head h2 { font-size: 23px !important; font-weight: 750 !important; letter-spacing: -.015em; }
.hire-head p { margin: 4px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.45; max-width: 60ch; }
.hire-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 12px; }
.hire-est { font-size: 13px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hire-wait { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 0 30px; text-align: center; color: var(--text-2); }
.hire-wait p { margin: 0; max-width: 46ch; font-size: 13.5px; }
.hire-wait-face { width: 64px; height: 64px; color: var(--coral); animation: bob 1.4s ease-in-out infinite; }
.hire-wait.err .hire-wait-face { animation: none; }
.hire-skel { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.hire-skel span { height: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.hire-skel span:nth-child(2) { width: 82%; } .hire-skel span:nth-child(3) { width: 64%; } .hire-skel span:nth-child(4) { width: 90%; } .hire-skel span:nth-child(5) { width: 48%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* the job description */
.brief { display: flex; flex-direction: column; gap: 4px; }
.brief input, .brief textarea, .brief select { font: 13.5px/1.4 var(--font); color: var(--text); background: var(--surface-2); border: 1px solid transparent; border-radius: 11px; padding: 8px 11px; outline: 0; min-width: 0; user-select: text; transition: border-color .15s, box-shadow .15s, background .15s; }
.brief input:focus, .brief textarea:focus, .brief select:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.brief textarea { resize: vertical; width: 100%; }
.bf-who { display: flex; align-items: center; gap: 16px; padding: 4px 0 8px; }
.bf-face { border: 0; padding: 0; background: none; border-radius: 22px; transition: transform .15s var(--ease); }
.bf-face:hover { transform: scale(1.04); }
.bf-names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.brief .bf-name { font-family: var(--display); font-size: 22px; font-weight: 750; padding: 4px 10px; background: transparent; }
.brief .bf-role { background: transparent; color: var(--text-2); padding: 4px 10px; }
.brief .bf-name:hover, .brief .bf-role:hover { background: var(--surface-2); }
.bf-look { display: flex; flex-direction: column; gap: 10px; padding: 12px; margin-bottom: 6px; border-radius: 16px; background: var(--surface-2); animation: pop .15s var(--ease); }
.bf-look[hidden] { display: none; }
.bf-swatches, .bf-emojis { display: flex; flex-wrap: wrap; gap: 7px; }
.bf-sw { width: 24px; height: 24px; border: 0; border-radius: 50%; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.bf-sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px currentColor; color: var(--text); }
.bf-em { width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; font-size: 17px; line-height: 1; }
.bf-em:hover { background: var(--surface-3); }
.bf-em.on { background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--text); }
.bf-sec { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 12px; border-top: 1px solid var(--line); }
.bf-sec-h h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.bf-sec-h p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.45; max-width: 70ch; }
.bf-sub { margin: 4px 0 0; font-size: 12.5px; font-weight: 650; color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.bf-sub::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.bf-sub.ok::before { background: var(--mint); } .bf-sub.ask::before { background: var(--coral); }
.bf-gap { height: 4px; }
.lf { display: flex; flex-direction: column; gap: 6px; }
.lf-rows { display: flex; flex-direction: column; gap: 6px; }
.lf-row { display: flex; align-items: center; gap: 6px; }
.lf-row input { flex: 1; }
.lf.ok .lf-row input { box-shadow: inset 3px 0 0 var(--mint); }
.lf.ask .lf-row input { box-shadow: inset 3px 0 0 var(--coral); }
.lf-x { width: 28px; height: 28px; flex: none; border: 0; border-radius: 9px; background: transparent; color: var(--text-3); display: grid; place-items: center; opacity: 0; transition: opacity .12s; }
.lf-row:hover .lf-x, .lf-row:focus-within .lf-x, .rt-row:hover .lf-x, .rt-row:focus-within .lf-x { opacity: 1; }
.lf-x:hover { background: var(--surface-3); color: var(--text); }
.lf-x svg, .lf-add svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lf-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.lf-add:hover { background: var(--surface-2); color: var(--text); }
.rt-list { display: flex; flex-direction: column; gap: 8px; }
.rt-row { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: var(--surface-2); }
.rt-row input, .rt-row select { background: var(--surface); }
.rt-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rt-top .rt-name { flex: 1 1 140px; font-weight: 600; }
.rt-top [hidden] { display: none; }
.rt-time { width: 108px; }
.bf-beat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.bf-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); gap: 2px; }
.bf-seg-b { height: 28px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.bf-seg-b.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.bf-budget-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bf-budget-l { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.bf-budget-l > span:first-child { font-weight: 700; color: var(--text); }
.brief .bf-budget { width: 84px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bf-est { font-size: 12.5px; color: var(--text-3); }
.bf-est.over { color: var(--accent-ink); font-weight: 600; }

/* a Hand's page */
.hp-bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.hp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--mint); }
.run-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; }
.run-row:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.run-row .btn svg { width: 11px; height: 11px; }
.run-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.run-t b { font-size: 13px; font-weight: 600; }
.run-t span { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-when { font-size: 12px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp-save { display: flex; align-items: center; gap: 12px; }
.hp-save .grow { flex: 1; }
.hp-save-n { font-size: 12.5px; color: var(--text-3); }
.hp-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.hp-file { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; color: var(--text); transition: transform .15s var(--ease), box-shadow .15s; }
.hp-file:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.hp-file svg { grid-row: span 2; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--cobalt-soft); color: var(--cobalt); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.hp-file.is-app svg { background: var(--mint-soft); color: var(--mint); }
.hp-file b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-file span { font-size: 12px; color: var(--text-3); }

/* reports: needs you, done, noticed */
.rep { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); animation: fadein .2s var(--ease); transition: opacity .2s, transform .2s; }
.rep.open { box-shadow: var(--shadow-md), inset 3px 0 0 var(--coral); }
.rep.answered { opacity: .5; transform: scale(.99); pointer-events: none; }
.rep.compact { padding: 10px 14px; gap: 8px; }
.rep.compact:not(.open) { cursor: pointer; }
.rep.compact .rep-acts { padding: 0 0 0 40px; }
.rep-line.flush { margin: 0; }
.rep-line { margin: -4px 0 0 40px; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep.compact:hover { box-shadow: var(--shadow-md); }
.rep-head { display: flex; align-items: flex-start; gap: 10px; }
.rep-head .sc-ibtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.rep-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rep-t b { font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.rep-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; font-size: 12px; color: var(--text-3); }
.rep-kind { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--cobalt); }
.rep-kind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rep-kind.k-done { color: var(--mint); } .rep-kind.k-needs { color: var(--accent-ink); }
.rep-state { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-weight: 600; }
.rep-state.ok { background: var(--mint-soft); color: var(--mint); }
.rep-detail { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; user-select: text; }
.rep-draft { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.rep-draft-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rep-draft-k { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.rep-draft-how { font-size: 12px; color: var(--text-3); }
.rep-f { display: flex; align-items: flex-start; gap: 8px; }
.rep-f > span { width: 56px; flex: none; padding-top: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.rep-f-body > span { display: none; }
.rep-f input, .rep-f textarea { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text); font: 13.5px/1.5 var(--font); outline: 0; resize: vertical; user-select: text; }
.rep-f-body textarea { padding: 6px 8px; background: var(--surface); border-color: var(--line); }
.rep-draft.editing input, .rep-draft.editing textarea { background: var(--surface); border-color: var(--accent); }
.rep-ev { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; height: 28px; padding: 0 11px 0 9px; border: 0; border-radius: 999px; background: var(--cobalt-soft); color: var(--text); font-size: 12.5px; font-weight: 550; }
.rep-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-chip svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rep-chip:hover { filter: brightness(.96); }
.rep-cov summary { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; list-style: none; padding: 2px 0; }
.rep-cov summary::-webkit-details-marker { display: none; }
.rep-cov summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.rep-miss { color: var(--accent-ink); }
.rep-miss::before { content: "·"; margin-right: 6px; color: var(--text-3); }
.rep-cov ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.rep-cov li { font-size: 12.5px; color: var(--text-2); padding-left: 18px; position: relative; }
.rep-cov li::before { content: "✓"; position: absolute; left: 2px; color: var(--mint); font-weight: 700; }
.rep-cov li.miss::before { content: "!"; color: var(--accent-ink); left: 4px; }
.rep-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 2px; }
.rep-acts .grow { flex: 1; }
.rep-acts .btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rep-always { max-width: 380px; min-width: 0; }
.rep-always span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-acts .btn svg { flex: none; }

/* Home: while you were away */
.home-away { width: min(760px, 100%); margin: 18px auto 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 26px; background: color-mix(in srgb, var(--surface) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line); animation: fadein .25s var(--ease); }
.home-away[hidden] { display: none; }

.hands-grid.intro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hand-intro { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border-radius: 22px; background: color-mix(in srgb, var(--surface) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.hand-intro svg { width: 34px; height: 34px; padding: 7px; margin-bottom: 4px; border-radius: 11px; background: var(--coral-soft); color: var(--coral); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hand-intro:nth-child(2) svg { background: var(--cobalt-soft); color: var(--cobalt); }
.hand-intro:nth-child(3) svg { background: var(--mint-soft); color: var(--mint); }
.hand-intro b { font-family: var(--display); font-size: 16px; font-weight: 700; }
.hand-intro p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
@media (max-width: 860px) { .hands-grid.intro { grid-template-columns: 1fr; } }

/* handing files to a Hand */

/* @ your Hands (mentions.js) */
.mention-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.mention-tile { --hc: var(--coral); width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--hc) 15%, var(--surface)); }
.mention-tile .buddy { width: 24px; height: 24px; }
.mention-names { display: flex; flex-direction: column; min-width: 0; }
.mention-names b { font-size: 13.5px; font-weight: 650; }
.mention-st { font-size: 11px; font-weight: 650; color: var(--text-3); padding: 2px 8px; border-radius: 999px; background: var(--surface-3); }
.mention-st.needs { color: var(--accent-ink); background: var(--coral-soft); }
.hands-paused { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 18px; background: var(--sun-soft); font-size: 13.5px; font-weight: 600; }
.hands-paused span { flex: 1; }
.hands-paused > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.hands-hero .sched-head-t { flex: 1; min-width: 0; }
.hands-pa { flex: none; height: 36px; }

/* moved-back note (phase 1) */
.hands-moved { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 18px; background: var(--mint-soft); font-size: 13.5px; font-weight: 550; }
.hands-moved span { flex: 1; }
.hands-moved > svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--mint); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* duties (duties.js) */
.duties { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.duties-head h2 { margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -.01em; }
.duties-head p { margin: 4px 0 4px; color: var(--text-2); font-size: 13.5px; max-width: 70ch; }
.duty { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 10px 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); animation: fadein .2s var(--ease); }
.duty.off { background: color-mix(in srgb, var(--surface) 55%, transparent); box-shadow: none; }
.duty.off .duty-h b, .duty.off .duty-what { color: var(--text-3); }
.duty-h { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.duty-h b { font-family: var(--display); font-size: 15.5px; font-weight: 700; }
.duty-ask { font-size: 12.5px; color: var(--accent-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duty-s { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; }
.duty-s > svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.duty-when { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 48%; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--cobalt-soft); color: var(--text); font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duty-when svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linecap: round; }
.duty-what { min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duty-meta { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.duty-meta .grow { flex: 1; }
.duty-dots { display: flex; gap: 4px; }
.duty-next { font-weight: 600; color: var(--text); }
.duty-tell { height: 28px; border: 0; border-radius: 9px; padding: 0 8px; background: var(--surface-2); color: var(--text-2); font: 12px var(--font); }
.duty .sc-ibtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.duty .sc-ibtn svg path[d^="M8 5.5v13"] { fill: currentColor; }

/* ---------- Today's brief (today.js) ---------- */
.rail-btn[hidden] { display: none; }
.today-brief { width: min(760px, 100%); margin: 18px auto 0; display: flex; flex-direction: column; gap: 12px; animation: fadein .25s var(--ease); }
.today-brief[hidden] { display: none; }
.tb-top { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.tb-top .grow { flex: 1; }
.tb-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tb-title b { font-family: var(--display); font-size: 19px; font-weight: 750; letter-spacing: -.01em; }
.tb-title span { font-size: 12.5px; color: var(--text-3); }
.today-brief.quiet .tb-title b { font-size: 15px; color: var(--text-2); }
.tb-play svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tb-list { display: flex; flex-direction: column; gap: 10px; }
.tb-sep { height: 4px; }
.tb-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-md); transition: opacity .25s, transform .25s; }
.tb-card.k-needs, .tb-card.k-ask { box-shadow: var(--shadow-md), inset 3px 0 0 var(--coral); }
.tb-card.k-stop { box-shadow: var(--shadow-md), inset 3px 0 0 var(--sun); }
.tb-card.k-done, .tb-card.k-noticed { box-shadow: var(--shadow-sm); padding: 12px 16px; }
.tb-card.answered { opacity: 0; transform: translateY(-4px) scale(.99); pointer-events: none; }
.tb-head { display: flex; align-items: flex-start; gap: 12px; }
.tb-face { --hc: var(--coral); width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--hc) 15%, var(--surface)); color: var(--hc); }
.tb-face .buddy { width: 27px; height: 27px; }
.tb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tb-t b { font-size: 15px; font-weight: 650; line-height: 1.35; }
.tb-meta { font-size: 12px; color: var(--text-3); }
.tb-kind { font-weight: 700; color: var(--cobalt); }
.tb-kind.k-needs, .tb-kind.k-ask { color: var(--accent-ink); }
.tb-kind.k-done { color: var(--mint); }
.tb-kind.k-stop { color: var(--warn); }
.tb-open { flex: none; height: 28px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.tb-open:hover { background: var(--surface-2); color: var(--text); }
.tb-detail { margin: 0 0 0 48px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.tb-draft { margin-left: 48px; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.tb-draft-h { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.tb-draft-s { font-size: 13.5px; font-weight: 600; }
.tb-draft-b { border: 1px solid transparent; border-radius: 9px; padding: 4px 6px; margin: 0 -6px; background: transparent; color: var(--text); font: 13.5px/1.5 var(--font); resize: vertical; outline: 0; user-select: text; }
.tb-card.editing .tb-draft-b { background: var(--surface); border-color: var(--accent); }
.tb-reply { margin-left: 48px; display: flex; }
.tb-reply input { flex: 1; min-width: 0; height: 38px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); color: var(--text); font: 14px var(--font); outline: 0; user-select: text; }
.tb-reply input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.tb-chips { margin-left: 48px; display: flex; flex-wrap: wrap; gap: 6px; }
.tb-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; height: 28px; padding: 0 11px 0 9px; border: 0; border-radius: 999px; background: var(--cobalt-soft); color: var(--text); font-size: 12.5px; font-weight: 550; }
.tb-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-chip svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-opts { margin-left: 48px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-opts .grow { flex: 1; }
.tb-opts .btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.tb-opts .btn svg path[d^="M8 5.5v13"] { fill: currentColor; }
.tb-more { align-self: center; height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text-2); font-size: 13px; font-weight: 600; }
.tb-more:hover { background: var(--surface); color: var(--text); }
.tb-up { display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 8px; border-radius: 20px; background: color-mix(in srgb, var(--surface) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.tb-h { margin: 0 4px 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.tb-up-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 6px; border: 0; border-radius: 10px; background: transparent; text-align: left; color: var(--text); font-size: 13.5px; }
button.tb-up-row:hover { background: var(--surface); }
.tb-up-row svg { width: 16px; height: 16px; fill: none; stroke: var(--text-3); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tb-up-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.tb-up-w { font-size: 12px; color: var(--text-3); }
.tb-up-row time { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- 1.50: onboarding about you */
.hw-onb-about { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 4px; text-align: left; }
.hw-onb-names { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hw-onb-field { display: flex; flex-direction: column; gap: 6px; }
.hw-onb-field > span { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.hw-onb-field input, .hw-onb-field textarea { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); font: inherit; font-size: 13.5px; color: var(--text); outline: none; resize: none; line-height: 1.45; }
.hw-onb-field input { height: 40px; padding: 0 12px; }
.hw-onb-field input:focus, .hw-onb-field textarea:focus { border-color: var(--coral); background: var(--surface); }

/* ---------------------------------------------------------- Today: for you this week */
.tb-for { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 20px; background: color-mix(in srgb, var(--surface) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.tb-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.tb-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 13px; border-radius: 14px; border: 0; background: var(--surface); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06)); text-align: left; cursor: pointer; font: inherit; color: var(--text); transition: transform .15s var(--ease); }
.tb-offer:hover { transform: translateY(-1px); }
.tb-offer b { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.tb-offer small { font-size: 11.5px; color: var(--coral); font-weight: 600; }
.tb-hire { display: flex; align-items: center; gap: 10px; padding: 8px 6px 4px; }
.tb-hire .tb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tb-hire .tb-t b { font-size: 13.5px; }
.tb-about textarea { width: 100%; resize: none; font: inherit; font-size: 13.5px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); outline: none; }
.tb-about textarea:focus { border-color: var(--coral); background: var(--surface); }

/* ---------------------------------------------------------- Team room */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 6px; }
.tm-card { --hc: var(--coral); position: relative; display: flex; flex-direction: column; gap: 9px; padding: 10px 10px 12px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-md); cursor: pointer; animation: fadein .2s var(--ease); transition: transform .15s var(--ease), box-shadow .15s; overflow: hidden; border: 0; text-align: left; font: inherit; color: var(--text); }
.tm-card:hover { transform: translateY(-2px); }
.tm-card:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.tm-card.off { opacity: .72; }
.tm-card.needs { box-shadow: var(--shadow-md), inset 0 0 0 2px color-mix(in srgb, var(--coral) 55%, transparent); }
.tm-card.dropping { box-shadow: var(--shadow-md), inset 0 0 0 2px var(--coral); }
.tm-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 15px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--hc) 11%, var(--surface-2)); }
.tm-card.me .tm-screen { background: color-mix(in srgb, var(--coral) 10%, var(--surface-2)); }
.tm-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-card:not(.running) .tm-screen img { filter: saturate(.6); opacity: .82; }
.tm-screen .tm-big { width: 72px; height: 72px; }
.tm-screen .hand-tile.tm-big { width: 84px; height: 84px; }
.tm-live { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 7px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(20, 20, 20, .62); backdrop-filter: blur(6px); }
.tm-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ff5a3c; animation: pulse 1.4s ease-in-out infinite; }
.tm-top { display: flex; align-items: center; gap: 9px; padding: 0 4px; }
.tm-names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tm-names b { font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-names span { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-line { margin: 0; padding: 0 4px; font-size: 12.5px; color: var(--text-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tm-add { align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 24px 18px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); min-height: 220px; }
.tm-add b { font-size: 14.5px; }
.tm-add > span:last-child { font-size: 12.5px; color: var(--text-3); max-width: 220px; line-height: 1.4; }
.tm-add-p { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--coral) 14%, var(--surface)); color: var(--coral); }
.tm-add-p svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.team-ideas { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; }
.team-ideas[hidden] { display: none; }
.tm-h { font-size: 13px; font-weight: 650; color: var(--text-2); margin: 0 0 4px; }
.tm-idea { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06)); }
.tm-idea-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-idea-t b { font-size: 13.5px; }
.tm-idea-t span { font-size: 12.5px; color: var(--text-3); }

/* hiring by interview */
.hire-ask { width: 100%; resize: none; font: inherit; font-size: 14px; line-height: 1.5; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); outline: none; }
.hire-ask:focus { border-color: var(--coral); background: var(--surface); }
.hire-qs { display: flex; flex-direction: column; gap: 18px; }
.hire-q { display: flex; flex-direction: column; gap: 8px; }
.hire-q > b { font-size: 14px; font-weight: 600; }
.hire-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.hire-opt { border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 99px; cursor: pointer; }
.hire-opt[aria-pressed="true"] { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, var(--surface)); color: var(--coral); font-weight: 600; }
.hire-own { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; font: inherit; font-size: 13px; color: var(--text); outline: none; }
.hire-own:focus { border-color: var(--coral); }
.hire-intro { --hc: var(--coral); display: flex; flex-direction: column; gap: 14px; }
.hi-head, .ha-head { --hc: var(--coral); display: flex; align-items: center; gap: 14px; }
.hi-names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hi-names b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.hi-names span { font-size: 13px; color: var(--text-2); }
.hi-say { margin: 0; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--hc) 8%, var(--surface-2)); font-size: 14px; line-height: 1.5; color: var(--text); }
.hi-sec h3, .ha-sec h3 { margin: 0 0 6px; font-size: 12.5px; font-weight: 650; color: var(--text-3); text-transform: none; }
.hi-sec ul, .ha-sec ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.45; }
.hi-sec.ask li::marker { color: var(--coral); }
.hi-more summary { cursor: pointer; font-size: 13px; color: var(--text-2); font-weight: 600; padding: 4px 0; }
.hi-more[open] summary { margin-bottom: 10px; }

/* a Hand's strip, on top of your conversation with it */
.hand-strip { --hc: var(--coral); display: flex; align-items: center; gap: 9px; margin: 0 12px 6px; padding: 7px 8px 7px 9px; border-radius: 16px; background: color-mix(in srgb, var(--hc) 8%, var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.hand-strip[hidden] { display: none; }
.hand-strip.dropping { box-shadow: inset 0 0 0 2px var(--coral); }
.hs-names { min-width: 0; display: flex; flex-direction: column; }
.hs-names b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-names span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.hs-shot { position: relative; width: 62px; height: 39px; flex: none; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--surface-2); }
.hs-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-shot.live::after { content: ''; position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 0 2px rgba(255,255,255,.8); animation: pulse 1.4s ease-in-out infinite; }
.hs-acts { display: flex; align-items: center; gap: 4px; }
.msg.hand-run, .msg.hand-rep { padding: 0; background: none; }
.msg.hand-rep .rep { margin: 0; }

/* about a Hand */
dialog.sheet.hand-about { width: min(620px, calc(100vw - 32px)); }
.hand-about-body { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 8px; max-height: 70vh; overflow: auto; }
.ha-sec p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.ha-notes { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ha-notes textarea { width: 100%; resize: vertical; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); outline: none; }
.ha-foot { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.btn.ghost.danger { background: transparent; color: var(--err); }
.hand-about:focus, .hand-about:focus-visible, .hand-about-body:focus, .hand-about-body:focus-visible { outline: none; }

/* ---------------------------------------------------------- 1.52: Home's brief, upgraded */
.today-brief { gap: 14px; }
.tb-title b { font-size: 21px; }
.tb-team { display: flex; gap: 6px; padding: 2px 2px 4px; overflow-x: auto; scrollbar-width: none; }
.tb-team::-webkit-scrollbar { display: none; }
.tb-mate { --hc: var(--coral); flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 68px; padding: 6px 2px; border: 0; border-radius: 16px; background: transparent; color: var(--text-2); cursor: pointer; transition: background .15s; }
.tb-mate:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.tb-mate-face { position: relative; width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--hc) 16%, var(--surface)); color: var(--hc); box-shadow: 0 0 0 2px var(--bg, transparent); }
.tb-mate-face .buddy { width: 34px; height: 34px; }
.tb-mate-face svg:not(.buddy) { width: 18px; height: 18px; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; }
.tb-mate.add .tb-mate-face { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.tb-mate.working .tb-mate-face::after { content: ''; position: absolute; inset: -4px; border-radius: 19px; border: 2px solid var(--hc); border-right-color: transparent; border-bottom-color: transparent; animation: spin 1.2s linear infinite; }
.tb-mate.off .tb-mate-face { filter: grayscale(.8); opacity: .6; }
.tb-mate-n { position: absolute; top: -4px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 750; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.tb-mate-name { max-width: 64px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes spin { to { transform: rotate(360deg); } }
.tb-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 2px; }
.tb-filter { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tb-filter em { font-style: normal; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tb-filter[aria-selected="true"] { background: var(--text); color: var(--surface); }
.tb-filter[aria-selected="true"] em { color: color-mix(in srgb, var(--surface) 70%, transparent); }
.tb-sec { margin: 8px 6px -2px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.tb-card { --hc: var(--coral); position: relative; gap: 0; padding: 0; border-radius: 22px; overflow: hidden; }
.tb-card.hand { background: linear-gradient(180deg, color-mix(in srgb, var(--hc) 7%, var(--surface)) 0, var(--surface) 64px); }
.tb-card.k-needs, .tb-card.k-ask { box-shadow: var(--shadow-md); }
.tb-card.k-needs::before, .tb-card.k-ask::before, .tb-card.k-stop::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--coral); }
.tb-card.hand.k-needs::before { background: var(--hc); }
.tb-card.k-stop::before { background: var(--sun); }
.tb-card.k-done, .tb-card.k-noticed { padding: 0; }
.tb-head { align-items: center; gap: 11px; padding: 14px 14px 0 18px; }
.tb-face { width: 40px; height: 40px; border-radius: 13px; }
.tb-face .buddy { width: 30px; height: 30px; }
.tb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tb-who b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-who span { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-who span:empty { display: none; }
.tb-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.tb-badge { display: inline-flex; align-items: center; height: 21px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--cobalt-soft); color: var(--cobalt); }
.tb-badge.k-needs, .tb-badge.k-ask { background: var(--accent-soft); color: var(--accent-ink); }
.tb-badge.k-done { background: color-mix(in srgb, var(--mint) 16%, transparent); color: var(--mint); }
.tb-badge.k-stop { background: color-mix(in srgb, var(--sun) 20%, transparent); color: var(--warn); }
.tb-badge.k-idea { background: color-mix(in srgb, var(--sun) 18%, transparent); color: var(--warn); }
.tb-time { font-size: 11.5px; color: var(--text-3); }
.tb-open { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; }
.tb-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-main { padding: 10px 18px 0; display: flex; flex-direction: column; gap: 4px; }
.tb-title-l { margin: 0; font-size: 16px; font-weight: 680; line-height: 1.35; letter-spacing: -.005em; }
.tb-detail { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tb-card > .tb-draft, .tb-card > .tb-reply, .tb-card > .tb-extras, .tb-card > .tb-about { margin: 12px 18px 0; }
.tb-card > :last-child { margin-bottom: 14px; }
.tb-draft { padding: 0; gap: 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.tb-draft-h { display: flex; align-items: center; gap: 7px; padding: 9px 12px; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 650; color: var(--text-2); background: var(--surface-2); }
.tb-draft-h svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.tb-draft-h small { margin-left: auto; font-weight: 500; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.tb-draft-s { padding: 10px 14px 0; font-size: 14px; }
.tb-draft-b { margin: 4px 8px 8px; padding: 4px 6px; font-size: 13.5px; }
.tb-extras { display: flex; flex-direction: column; gap: 8px; }
.tb-extras .tb-chips { margin: 0; }
.tb-cov { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.tb-cov svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tb-cov .miss { color: var(--accent-ink); font-weight: 600; }
.tb-cov .miss::before { content: '·'; margin-right: 6px; color: var(--text-3); font-weight: 400; }
.tb-opts { margin: 14px 0 0; padding: 10px 14px 12px 18px; border-top: 1px solid var(--line); }
.tb-card > .tb-opts:last-child { margin-bottom: 0; }
.tb-reply { margin-left: 18px; }
.tb-card.slim .tb-head { padding-top: 12px; }
.tb-card.slim .tb-main { padding-top: 6px; padding-bottom: 0; }
.tb-card.slim .tb-title-l { font-size: 14.5px; font-weight: 640; }
.tb-card.slim .tb-detail { -webkit-line-clamp: 2; font-size: 13px; }

/* review views (review.js) */
.rv-mini { --rc: var(--cobalt); display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 4px 11px; width: 100%; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.rv-mini:hover { background: color-mix(in srgb, var(--rc) 8%, var(--surface-2)); }
.rv-mini.k-spreadsheet { --rc: var(--mint); }
.rv-mini.k-document { --rc: var(--cobalt); }
.rv-mini.k-code { --rc: #8a5cf6; }
.rv-mini.k-presentation { --rc: var(--sun); }
.rv-mini.k-research { --rc: var(--coral); }
.rv-mini-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--rc, var(--cobalt)) 15%, var(--surface)); color: var(--rc, var(--cobalt)); }
.rv-mini-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rv-mini-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rv-mini-t b { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-mini-t small { font-size: 12px; color: var(--text-3); }
.rv-mini-go { grid-column: 3; grid-row: 1; height: 28px; padding: 0 12px; border-radius: 99px; display: grid; place-items: center; background: var(--surface); font-size: 12.5px; font-weight: 650; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.rv-mini-q { grid-column: 2 / 4; font-size: 12.5px; line-height: 1.4; color: var(--text-2); padding: 6px 9px; border-radius: 9px; background: var(--surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-mini-q.add, .rv-mini-q.change { box-shadow: inset 2px 0 0 var(--mint); }
.rv-mini-q.del { text-decoration: line-through; color: var(--text-3); }
.rv-mini-q.bad { color: #c4382c; font-weight: 600; }
.rv-mini-img { grid-column: 2 / 4; width: 100%; max-height: 150px; object-fit: cover; object-position: top; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.rv-checked { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 7px; padding: 8px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; background: color-mix(in srgb, var(--mint) 10%, transparent); color: var(--text-2); }
.rv-checked svg { width: 15px; height: 15px; flex: none; margin-top: 1px; fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rv-checked b { color: var(--mint); font-weight: 700; }
.rv-checked.back { background: var(--accent-soft); }
.rv-checked.back b, .rv-checked.back svg { color: var(--accent-ink); stroke: var(--accent-ink); }
dialog.sheet.review-sheet { width: min(880px, calc(100vw - 40px)); max-width: none; max-height: calc(100vh - 60px); padding: 0; flex-direction: column; }
dialog.sheet.review-sheet[open] { display: flex; }
.rv-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.rv-head-t { flex: 1; min-width: 0; }
.rv-head-t small { font-size: 12px; color: var(--text-3); font-weight: 600; }
.rv-head-t h2 { margin: 2px 0 0; font-size: 17px; line-height: 1.3; }
.rv-body { padding: 16px 20px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.rv-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
.rv-note { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; line-height: 1.5; }
.rv-error { margin: 0; color: #c4382c; font-weight: 600; }
.rv-hint { margin: 0; font-size: 12.5px; color: var(--text-3); }
.rv-doc { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-family: Georgia, 'Times New Roman', serif; }
.rv-p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.rv-p.rv-add { background: color-mix(in srgb, var(--mint) 14%, transparent); border-radius: 4px; padding: 1px 4px; margin: 0 -4px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--mint) 60%, transparent); text-underline-offset: 3px; }
.rv-p.rv-del { color: #c4382c; text-decoration: line-through; opacity: .75; }
.rv-change { display: flex; flex-direction: column; gap: 4px; }
.rv-fold { align-self: flex-start; border: 0; background: var(--surface-2); color: var(--text-3); font: 12px var(--font); padding: 3px 10px; border-radius: 99px; cursor: pointer; }
.rv-checks { display: flex; flex-direction: column; gap: 4px; }
.rv-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.rv-check svg { width: 15px; height: 15px; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.rv-check.ok svg { stroke: var(--mint); }
.rv-check.bad { color: #c4382c; font-weight: 600; }
.rv-check.bad svg { stroke: #c4382c; }
.rv-check code { font-size: 11.5px; color: var(--text-3); }
.rv-tabs { display: flex; gap: 4px; }
.rv-tab { border: 0; background: transparent; padding: 5px 11px; border-radius: 99px; font: 12.5px var(--font); color: var(--text-2); cursor: pointer; }
.rv-tab[aria-selected="true"] { background: var(--surface-2); color: var(--text); font-weight: 650; }
.rv-grid-wrap { overflow: auto; max-height: 52vh; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.rv-grid { border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rv-grid th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-3); font-weight: 600; font-size: 11px; padding: 4px 8px; border: 1px solid var(--line); }
.rv-grid tr th:first-child { position: sticky; left: 0; }
.rv-grid td { padding: 4px 9px; border: 1px solid var(--line); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.rv-grid td.num { text-align: right; }
.rv-grid td.fx { font-weight: 650; }
.rv-grid td.ch { background: color-mix(in srgb, var(--sun) 26%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sun) 70%, transparent); }
.rv-code-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-branch { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 3px 8px; border-radius: 7px; background: var(--surface-2); }
.rv-tests { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; }
.rv-tests svg { width: 15px; height: 15px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke: currentColor; }
.rv-tests.ok { color: var(--mint); }
.rv-tests.bad { color: #c4382c; }
.rv-tests.none { color: var(--text-3); }
.btn.done { opacity: .7; }
.rv-out pre, .rv-diff { margin: 0; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.rv-out pre { white-space: pre-wrap; padding: 10px; background: var(--surface-2); border-radius: 10px; max-height: 200px; overflow: auto; }
.rv-file { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.rv-file summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; background: var(--surface-2); font-size: 12.5px; }
.rv-file summary b { flex: 1; font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.rv-add-n { color: var(--mint); font-weight: 700; font-size: 12px; }
.rv-del-n { color: #c4382c; font-weight: 700; font-size: 12px; }
.rv-diff { max-height: 360px; overflow: auto; padding: 4px 0; }
.rv-l { padding: 0 12px; white-space: pre; min-height: 18px; }
.rv-l.add { background: color-mix(in srgb, var(--mint) 13%, transparent); }
.rv-l.del { background: color-mix(in srgb, #c4382c 11%, transparent); }
.rv-l.hunk { color: var(--text-3); background: var(--surface-2); }
.rv-stage { position: relative; display: grid; place-items: center; border-radius: 14px; background: #1b1b1f; padding: 12px 48px; outline: none; }
.rv-stage img { max-width: 100%; max-height: 52vh; border-radius: 6px; box-shadow: 0 6px 30px rgba(0,0,0,.35); background: #fff; }
.rv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.rv-nav:first-child { left: 8px; }
.rv-nav:nth-child(3) { right: 8px; }
.rv-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rv-count { position: absolute; right: 12px; bottom: 8px; font-size: 11.5px; color: rgba(255,255,255,.7); }
.rv-strip { display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px 2px; }
.rv-thumb { flex: none; width: 92px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; opacity: .6; box-shadow: 0 0 0 1px var(--line-2); background: #fff; }
.rv-thumb.on { opacity: 1; box-shadow: 0 0 0 2px var(--coral); }
.rv-thumb img { width: 100%; display: block; }
.rv-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.rv-src { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border: 0; border-radius: 99px; background: var(--cobalt-soft); color: var(--text); font: 600 12px var(--font); cursor: pointer; max-width: 280px; }
.rv-src span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-src svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linecap: round; }
.rv-research { display: flex; flex-direction: column; gap: 8px; }
.rv-claim { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.rv-claim.unchecked { background: color-mix(in srgb, var(--sun) 12%, var(--surface-2)); }
.rv-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.rv-claim-t { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.rv-claim-t p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.rv-unchecked { font-size: 11.5px; font-weight: 700; color: var(--warn); text-transform: uppercase; letter-spacing: .04em; }
.rv-app { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rv-app p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.app-card-hand { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; font-weight: 650; color: var(--hc); }
.app-card-hand i { width: 7px; height: 7px; border-radius: 50%; background: var(--hc); }
.hi-kit { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.hi-kit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hi-kit-l { width: 92px; font-size: 12px; font-weight: 650; color: var(--text-3); }
.hi-pill { height: 24px; padding: 0 10px; border-radius: 99px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 650; background: color-mix(in srgb, var(--hc, var(--coral)) 14%, var(--surface)); color: var(--text); }
.hi-pill.soft { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 550; }
.hi-kit-n { font-size: 11.5px; color: var(--text-3); }
.rv-body:focus { outline: none; }
.rv-thumb { height: 58px; } .rv-thumb img { height: 100%; object-fit: cover; object-position: top; }

/* ---------------------------------------------------------- 1.52: talking to a Hand */
.log.hand-chat { --hc: var(--coral); }
.hand-hello { --hc: var(--coral); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 12px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.hand-hello .hand-tile.xl { width: 72px; height: 72px; border-radius: 24px; }
.hand-hello .hand-tile.xl .buddy { width: 54px; height: 54px; }
.hh-t { display: flex; flex-direction: column; gap: 2px; }
.hh-t b { font-family: var(--display); font-size: 18px; font-weight: 750; letter-spacing: -.01em; }
.hh-t span { font-size: 12.5px; color: var(--text-3); max-width: 300px; }
.hh-say { margin: 2px 0 0; max-width: 340px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.hh-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.hh-chip { height: 28px; padding: 0 12px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--hc) 11%, var(--surface)); color: var(--text); font: 600 12px var(--font); cursor: pointer; }
.hh-chip:hover { background: color-mix(in srgb, var(--hc) 18%, var(--surface)); }
.msg.assistant.as-hand { --hc: var(--coral); }
.avatar.hand { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--hc) 16%, var(--surface)); box-shadow: none; }
.avatar.hand .buddy { width: 23px; height: 23px; }
.msg-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.msg-name { font-size: 12px; font-weight: 700; color: var(--hc); }
.log.hand-chat .msg.user { background: color-mix(in srgb, var(--hc) 82%, #000); color: #fff; }
.msg.hand-run { align-self: stretch; }
.msg.hand-run .run-row { padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--hc, var(--coral)) 6%, transparent); }
.msg.hand-rep .rep { box-shadow: inset 0 0 0 1px var(--line); }
.msg.hand-check .rv-checked { margin: 0; }

/* ---------------------------------------------------------- 1.52: projects */
.team-projects { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.pj-head { display: flex; align-items: center; gap: 8px; }
.pj-head .tm-h { margin: 0; }
.pj-head .btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pj-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.pj-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 8px 12px; padding: 13px 14px; border: 0; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06)); text-align: left; font: inherit; color: var(--text); cursor: pointer; transition: transform .15s var(--ease); }
.pj-card:hover { transform: translateY(-1px); }
.pj-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pj-t b { font-size: 14.5px; font-weight: 680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-t small { font-size: 12px; color: var(--text-3); }
.pj-card.live .pj-t small { color: var(--accent-ink); font-weight: 600; }
.pj-bar { grid-column: 1 / 3; display: flex; gap: 4px; }
.pj-bar i { flex: 1; height: 4px; border-radius: 4px; background: var(--line-2); }
.pj-bar i.s-working { background: color-mix(in srgb, var(--coral) 55%, transparent); animation: pulse 1.6s ease-in-out infinite; }
.pj-bar i.s-done { background: var(--mint); }
.pj-bar i.s-needs { background: var(--coral); }
.pj-faces { display: inline-flex; }
.pj-faces .hand-tile { box-shadow: 0 0 0 2px var(--surface); }
.pj-faces .hand-tile + .hand-tile { margin-left: -8px; }
.pj-faces .hand-tile.working { box-shadow: 0 0 0 2px var(--hc); }
.pj-empty { margin: 0; padding: 12px 14px; border-radius: 16px; font-size: 13px; line-height: 1.5; color: var(--text-3); box-shadow: inset 0 0 0 1.5px var(--line-2); }
dialog.sheet.project-sheet { width: min(560px, calc(100vw - 40px)); }
.project-sheet .sheet-head p { margin: 4px 0 0; font-size: 13px; color: var(--text-3); }
.pj-form { display: flex; flex-direction: column; gap: 8px; padding: 6px 24px 10px; }
.pj-l { font-size: 12.5px; font-weight: 650; color: var(--text-2); margin-top: 6px; }
.pj-name, .pj-msg { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); font: inherit; font-size: 13.5px; color: var(--text); outline: none; resize: none; }
.pj-name:focus, .pj-msg:focus { border-color: var(--coral); background: var(--surface); }
.pj-roster { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-pick { --hc: var(--coral); display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 5px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--surface); color: var(--text); font: 600 12.5px var(--font); cursor: pointer; }
.pj-pick[aria-pressed="true"] { border-color: var(--hc); background: color-mix(in srgb, var(--hc) 10%, var(--surface)); }
.pj-pick[aria-pressed="false"] .hand-tile { filter: grayscale(.7); opacity: .6; }
.pj-roster-strip { display: flex; gap: 6px; overflow-x: auto; width: 100%; scrollbar-width: none; }
.pj-mate { --hc: var(--coral); flex: none; display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px 0 4px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--hc) 9%, var(--surface)); color: var(--text); cursor: pointer; }
.pj-mate img { width: 46px; height: 30px; object-fit: cover; border-radius: 7px; box-shadow: 0 0 0 2px var(--hc); }
.pj-mate-t { display: flex; flex-direction: column; text-align: left; }
.pj-mate-t b { font-size: 12.5px; }
.pj-mate-t small { font-size: 11px; color: var(--text-3); }
.pj-mate.working .pj-mate-t small { color: var(--hc); font-weight: 650; }
.pj-hello .pj-faces .hand-tile.lg { width: 52px; height: 52px; border-radius: 17px; }
.pj-hello .pj-faces .hand-tile.lg .buddy { width: 38px; height: 38px; }
.pj-reply { margin: 0; font-size: 14px; line-height: 1.5; }
.pj-parts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pj-part { --hc: var(--coral); display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--hc) 7%, var(--surface-2)); }
.pj-part-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.45; }
.pj-part-t b { color: var(--hc); font-size: 12.5px; }
.msg.pj-handoff { align-self: center; max-width: 92%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 14px; background: var(--surface-2); text-align: center; }
.pj-ho-line { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.pj-arrow { color: var(--text-3); font-weight: 700; }
.msg.pj-handoff p { margin: 0; font-size: 12.5px; color: var(--text-2); }
.tb-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-part { --hc: var(--mint); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: color-mix(in srgb, var(--hc) 10%, var(--surface-2)); font-size: 12px; font-weight: 650; }
.tb-part i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.tb-part.s-needs i { background: var(--coral); }

/* ---------------------------------------------------------- 1.53: the audit */
/* Home is one calm column: the question, the brief and your space line up. */
.home-wh, .home-empty, .home-grid, .home-starters { width: min(760px, 100%); margin-left: auto; margin-right: auto; }
.home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A draft on a card shows its first lines; all of it while you edit (or tap it). */
.tb-draft-b { max-height: 7.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); cursor: pointer; }
.tb-card.editing .tb-draft-b, .tb-draft.open .tb-draft-b { max-height: none; -webkit-mask-image: none; mask-image: none; cursor: text; }
/* Dialogs open without a focus ring on their first button. */
dialog:focus, dialog:focus-visible { outline: none; }
/* Start a project: title over its line. */
.project-sheet .sheet-head { display: block; padding: 22px 24px 4px; }
.project-sheet .sheet-head h2 { margin: 0; }
/* Your chats: who each one is with. */
.chat-row-ic { width: 20px; height: 20px; flex: none; border-radius: 7px; display: grid; place-items: center; font-size: 11px; background: color-mix(in srgb, var(--hc, var(--coral)) 16%, var(--surface)); color: var(--hc, var(--coral)); }
.chat-row-ic .buddy { width: 15px; height: 15px; }
.chat-row-ic svg:not(.buddy) { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Menus: the item under the keyboard is highlighted, not ringed. */
.menu [role="menuitem"]:focus-visible, .menu button:focus-visible { outline: none; background: var(--surface-2); }
/* 1.53.1 */
.btn { white-space: nowrap; }
.duty-ask { display: flex; align-items: center; gap: 8px; width: 100%; margin: 2px 0; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--accent-soft); color: var(--text); font: inherit; font-size: 12.5px; text-align: left; white-space: normal; cursor: pointer; }
.duty-ask b { flex: none; color: var(--accent-ink); font-weight: 700; }
.duty-ask span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.duty-ask em { flex: none; font-style: normal; font-weight: 650; color: var(--accent-ink); }
.ha-foot .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ha-foot .btn.ghost.danger { padding: 0 12px; }
.hand-about .hp-save { flex-wrap: wrap; gap: 10px; }
.hand-about .hp-save .hp-save-n { flex: 1 1 260px; }
/* A Hand's or a project's conversation opens with who it is, not the new-chat welcome. */
.log.hand-chat > #welcome, .log.project-chat > #welcome { display: none !important; }
.hs-names { flex: 1; min-width: 0; } .hand-strip > .grow { display: none; }
/* 1.53.2: what needs you */
.tb-long { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.tb-pre { white-space: pre-line; }
.tb-detail.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tb-detail:not(.clamp) { display: block; -webkit-line-clamp: unset; overflow: visible; }
.tb-more-link { border: 0; background: none; padding: 2px 0; font: 600 12.5px var(--font); color: var(--accent-ink); cursor: pointer; }
.tb-card > .tb-answer { margin: 12px 18px 0; }
.tb-answer textarea, .rep-answer textarea { flex: 1; width: 100%; min-width: 0; resize: none; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); color: var(--text); font: 14px/1.45 var(--font); outline: 0; user-select: text; }
.tb-answer textarea:focus, .rep-answer textarea:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.tb-answer[hidden], .rep-answer[hidden] { display: none; }
.rep-answer { margin: 8px 0 0; }
.tb-earlier { margin: 10px 18px 0; border-radius: 12px; background: var(--surface-2); }
.tb-earlier summary { padding: 8px 12px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.tb-earlier-row { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 12px; font-size: 13px; border-top: 1px solid var(--line); }
.tb-earlier-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-earlier-row time { font-size: 11.5px; color: var(--text-3); }
.tb-who span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; }
.tb-more-link[hidden] { display: none; }
.tb-long.q .tb-detail.clamp { -webkit-line-clamp: 12; }

/* ---------- 1.54: simplified (Home calm, chats as people, desks) ---------- */

/* Chats, as people */
.people { width: 248px; flex: none; display: flex; flex-direction: column; min-height: 0; padding: 6px 2px 4px; transition: width .25s var(--ease); }
.app.layout-computer .people { display: none; }
.pp-head { display: flex; align-items: center; gap: 2px; padding: 4px 4px 10px 12px; }
.pp-head h2 { margin: 0; font: 700 22px/1 var(--display); letter-spacing: -.01em; }
.pp-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 0 2px 8px; }
.pp-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; min-height: 52px; border: 0; border-radius: 16px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: background .15s; }
.pp-row:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.pp-row.on { background: var(--surface); box-shadow: var(--shadow-sm); }
.pp-face { position: relative; width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--coral-soft); color: var(--coral); }
.pp-face .buddy { width: 28px; height: 28px; }
.pp-hand { display: contents; }
.pp-row:not(.me):not(.pp-add) .pp-face { background: color-mix(in srgb, var(--hc, var(--cobalt)) 15%, var(--surface)); color: var(--hc, var(--cobalt)); }
.pp-face svg:not(.buddy) { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-group { display: contents; }
.pp-n { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-ink); color: #fff; font: 700 11px/18px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.pp-live { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px var(--bg); animation: pp-pulse 1.6s ease-in-out infinite; }
@keyframes pp-pulse { 50% { opacity: .45; } }
.pp-t { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.pp-t b { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-t small { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-row.live .pp-t small { color: color-mix(in srgb, var(--mint) 80%, var(--text)); }
.pp-sub { display: flex; flex-direction: column; margin: -2px 0 6px 30px; padding-left: 14px; border-left: 2px solid var(--line); }
.pp-task { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font: 500 13px/1.3 var(--font); text-align: left; cursor: pointer; }
.pp-task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-task i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--line-2); }
.pp-task.live i { background: var(--mint); }
.pp-task:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.pp-task.on { color: var(--text); background: var(--surface); font-weight: 600; }
.pp-label { margin: 14px 12px 4px; font: 700 11.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.pp-add { color: var(--text-2); margin-top: 4px; }
.pp-add .pp-face { background: transparent; border: 1.5px dashed var(--line-2); color: var(--text-2); }
.pp-add:hover { color: var(--text); }
/* Next to the computer: faces only */
.app.layout-split .people { width: 64px; }
.app.layout-split .pp-head h2, .app.layout-split .pp-head .icon-btn:first-of-type, .app.layout-split .pp-t, .app.layout-split .pp-sub, .app.layout-split .pp-label { display: none; }
.app.layout-split .pp-head { justify-content: center; padding: 4px 0 10px; }
.app.layout-split .pp-row { justify-content: center; padding: 8px 0; }
.app.layout-split .pp-list { padding: 0; }

/* Home, calm */
.tb-top.calm { padding: 6px 6px 0; }
.tb-needs-h { margin: 0; font: 700 20px/1 var(--display); letter-spacing: -.01em; }
.tb-needs-h em { font-style: normal; color: var(--accent-ink); margin-left: 2px; }
.tb-doneline { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(8px); animation: fadein .25s var(--ease); }
.tb-doneline-b { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: 500 14px/1.3 var(--font); text-align: left; cursor: pointer; }
.tb-doneline-b:hover { background: var(--surface); }
.tb-doneline-b svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--mint); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tb-doneline-b span:first-of-type { flex: 1; }
.tb-doneline-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--text-3); cursor: pointer; }
.tb-doneline-x:hover { background: var(--surface); color: var(--text); }
.tb-doneline-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tb-doneline-go { color: var(--text-2); font-weight: 600; }
.tb-clear { margin: 6px 0 0; text-align: center; color: var(--text-2); font-size: 14px; }
.home .home-live:empty { display: none; }

/* Widgets, in Apps */



/* The rail's Computer, when it's showing */
.rail-pc { width: 64px; border-radius: 16px; padding: 9px 0 7px; }
.rail-pc[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* A teammate's conversation: its strip and the work cards */
.hand-strip .hs-acts .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The computer: desks on top, who's on it beside */
.desks { display: none; align-items: center; gap: 4px; padding: 0 2px 10px; flex-wrap: wrap; }
.app.layout-computer .desks { display: flex; }
.app.layout-computer .computers { display: none; }
.desk-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.desk-chip { --hc: var(--coral); display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 6px; border: 0; border-radius: 99px; background: transparent; color: var(--text-2); font: 600 13.5px/1 var(--font); cursor: pointer; }
.desk-chip:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--text); }
.desk-chip[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.desk-face { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--hc, var(--coral)) 15%, var(--surface)); color: var(--hc, var(--coral)); }
.desk-face .buddy { width: 24px; height: 24px; }
.desk-t { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.desk-t b { font-size: 13.5px; }
.desk-t small { font-size: 11px; font-weight: 600; color: var(--text-3); }
.desk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.desk-dot.on { background: var(--mint); animation: pp-pulse 1.6s ease-in-out infinite; }

/* A teammate's profile */
dialog.sheet.hand-about { width: min(680px, calc(100vw - 32px)); }
.hand-about .ha-head .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ha-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .ha-two { grid-template-columns: 1fr; } }
.ha-rows { display: flex; flex-direction: column; gap: 6px; }
.ha-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; line-height: 1.4; }
.ha-row svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: var(--hc, var(--text-2)); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ha-desk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* Where a teammate works (2.3): the server, or a paired Mac. */
.where-row { margin-top: 14px; }
.where-row .prof-sub { margin: 0 0 6px; }
.where-row .prof-note { margin: 0; max-width: 60ch; }
.where-seg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.where-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 9px 13px; border-radius: 12px; border: 1px solid var(--line, rgba(0,0,0,.1)); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.where-opt b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.where-opt span { font-size: 11.5px; color: var(--text-2); }
.where-opt.on { border-color: var(--hc, var(--accent)); box-shadow: 0 0 0 1px var(--hc, var(--accent)) inset; }
.where-opt:disabled { opacity: .6; cursor: default; }
.prof-where.away { color: var(--warn, #b4690e); }
.ha-desk-i { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ha-desk-i:hover { background: var(--surface-3); }
.ha-desk-i svg { grid-row: span 2; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ha-desk-i b { font-size: 13.5px; }
.ha-desk-i span { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-3); }
.ha-fold { border-radius: 14px; background: var(--surface-2); padding: 0 14px; }
.ha-fold summary { cursor: pointer; padding: 12px 0; font-size: 13.5px; font-weight: 650; }
.ha-fold[open] { padding-bottom: 12px; }
.ha-fold ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.hand-about .hi-kit { margin: 0; }

/* Settings › Computer: its status */
.pc-status { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--surface-2); }
.pc-st-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--mint-soft); color: var(--mint); }
.pc-status.busy .pc-st-ic { background: var(--sun-soft); color: var(--warn); }
.pc-status.off .pc-st-ic { background: var(--surface-3); color: var(--text-3); }
.pc-st-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pc-st-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pc-st-t b { font: 700 17px/1.2 var(--display); }
.pc-st-t small { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.pc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 18px; }
.pc-facts div { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border-radius: 14px; background: var(--surface-2); }
.pc-facts small { font-size: 12px; color: var(--text-3); }
.pc-facts b { font-size: 14px; }
.pc-on { font-size: 13px; font-weight: 700; color: var(--mint); }
.pc-soon { font-size: 12.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.set-note.flush { margin-top: 0; }

/* A teammate's conversation, wide: the strip lines up with the messages */
.app.layout-chat .hand-strip { margin-inline: max(12px, calc((100% - 760px) / 2)); }
.sidebar:has(.hand-strip:not([hidden])) .chat-switch { visibility: hidden; }

/* A teammate's conversation (1.55): one card per run */
.wk { --hc: var(--coral); container-type: inline-size; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); align-self: stretch; max-width: 100%; }
.wk.live { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mint) 55%, transparent); }
.wk.needs { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-ink) 35%, transparent); }
.wk-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wk-shot { position: relative; width: 40px; height: 40px; flex: none; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; display: grid; place-items: center; background: color-mix(in srgb, var(--hc) 12%, var(--surface-2)); }
.wk-shot .hand-tile { background: transparent; }
.wk-shot.has-img { width: 88px; height: 55px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.wk-shot.has-img .hand-tile { display: none; }
.wk-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-live { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); padding: 1px 6px; border-radius: 99px; background: var(--mint); color: #fff; font: 700 9px/1.4 var(--font); letter-spacing: .05em; text-transform: uppercase; }
.wk-h { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wk-title { font-size: 14.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wk-meta { font-size: 12px; color: var(--text-3); }
.wk-state { flex: none; align-self: flex-start; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--mint) 15%, transparent); color: color-mix(in srgb, var(--mint) 80%, var(--text)); }
.wk-state.s-work { background: color-mix(in srgb, var(--mint) 15%, transparent); }
.wk-state.o-needs { background: var(--accent-soft); color: var(--accent-ink); }
.wk-state.o-error, .wk-state.o-stopped, .wk-state.o-interrupted { background: color-mix(in srgb, var(--sun) 20%, transparent); color: var(--warn); }
.wk-found { display: flex; flex-direction: column; gap: 8px; }
.wk-found:empty { display: none; }
.wk-found > .rep { margin: 0; box-shadow: inset 0 0 0 1px var(--line); }
.wk-rep { border-radius: 12px; background: var(--surface-2); padding: 0 12px; }
.wk-rep summary { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-size: 13.5px; list-style: none; }
.wk-rep summary::-webkit-details-marker { display: none; }
.wk-rep summary b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-rep.bare summary { cursor: default; }
.wk-rep[open] { padding-bottom: 10px; }
.wk-rep[open] summary b { white-space: normal; }
.wk-rep .rep-detail { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--text-2); white-space: pre-line; }
.wk-last { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-line; }
.wk-last.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wk-more-link { align-self: flex-start; margin-top: -6px; padding: 0; border: 0; background: none; color: var(--accent-ink); font: 600 12.5px/1.4 var(--font); cursor: pointer; }
.wk-steps-d summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.wk-steps-d[open] summary { margin-bottom: 6px; }
.wk-steps { margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.65; color: var(--text-2); }
.wk-steps li.now { color: var(--text); font-weight: 600; }
.wk-acts { display: flex; align-items: center; gap: 6px; }
.wk-acts:empty { display: none; }
.wk-acts .btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@container (max-width: 380px) {
  .wk-shot.has-img { width: 56px; height: 40px; }
  .wk-state { padding: 3px 8px; font-size: 11px; }
}

/* The teammate's strip, when the conversation is narrow (next to the computer) */
.hand-strip { container-type: inline-size; }
@container (max-width: 460px) {
  .hand-strip .hs-names span, .hand-strip .hand-status { display: none; }
  .hand-strip .hs-acts .btn { font-size: 0; padding: 0; width: 34px; justify-content: center; }
  .hand-strip .hs-acts .btn svg { margin: 0; }
}

/* Live tiles, in Apps (1.55) */
.home-tiles { width: min(760px, 100%); margin: 28px auto 0; }
.home-tiles .home-wh { align-items: flex-end; margin: 0 0 12px; width: 100%; }
.home-tiles .home-empty, .home-tiles .home-grid { width: 100%; }
.hw-head-t { display: flex; flex-direction: column; gap: 3px; }
.hw-head-t h3 { margin: 0; font-size: 15px; font-weight: 700; }
.hw-head-t small { font-size: 13px; color: var(--text-2); }
.home-tiles .home-empty > p { display: none; }
.hw-ideas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .hw-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hw-idea { --tc: var(--cobalt); position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 150px; padding: 14px; border: 0; border-radius: 20px; background: color-mix(in srgb, var(--surface) 78%, transparent); box-shadow: var(--shadow-sm); color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: transform .15s var(--ease), box-shadow .15s, background .15s; }
.hw-idea:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--surface); }
.hw-idea.c-mint { --tc: var(--mint); } .hw-idea.c-sun { --tc: var(--sun); }
.hw-idea-t { font-size: 13.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hw-idea-add { margin-top: auto; align-self: flex-start; padding: 5px 11px; border-radius: 99px; background: color-mix(in srgb, var(--tc) 14%, transparent); color: color-mix(in srgb, var(--tc) 70%, var(--text)); font-size: 12px; font-weight: 700; }
.hw-idea.own { align-items: flex-start; justify-content: center; background: transparent; box-shadow: none; border: 1.5px dashed var(--line-2); color: var(--text-2); }
.hw-idea.own:hover { background: color-mix(in srgb, var(--surface) 50%, transparent); color: var(--text); }
.hw-idea.own small { font-size: 12.5px; color: var(--text-3); }
.hw-idea-plus { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); font-size: 20px; font-weight: 500; color: var(--text); }
.hw-ghost { height: 58px; display: flex; gap: 6px; opacity: .9; }
.hw-ghost.g-number { flex-direction: column; justify-content: center; gap: 8px; }
.hw-ghost.g-number b { font: 700 30px/1 var(--display); color: color-mix(in srgb, var(--tc) 35%, transparent); letter-spacing: .02em; }
.hw-ghost.g-number i { width: 55%; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--tc) 18%, transparent); }
.hw-ghost.g-chart { align-items: flex-end; }
.hw-ghost.g-chart i { flex: 1; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--tc) 30%, transparent); }
.hw-ghost.g-list { flex-direction: column; justify-content: center; gap: 9px; }
.hw-ghost.g-list i { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--tc) 20%, transparent); }
.hw-ghost.g-list i:nth-child(1) { width: 90%; } .hw-ghost.g-list i:nth-child(2) { width: 70%; } .hw-ghost.g-list i:nth-child(3) { width: 80%; }
.home-tiles .hw { min-height: 140px; }
.status-pill { -webkit-app-region: no-drag; cursor: pointer; }
.status-pill:hover { box-shadow: var(--shadow-md); }
.team-note { margin: -4px 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--sun-soft); color: var(--text); }

/* Needs you (1.55.3): no side bars; one calm card per person */
.tb-card::before { display: none !important; }
.tb-card, .tb-card.hand { background: var(--surface); box-shadow: var(--shadow-md); }
.tb-card .tb-face { box-shadow: none; }
.tb-card > .tb-choices { margin: 12px 18px 0; }
.tb-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .tb-choices { grid-template-columns: 1fr; } }
.tb-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 52px; padding: 10px 14px; border: 0; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: background .15s, box-shadow .15s; }
.tb-choice:hover { background: var(--surface-3); }
.tb-choice.on { box-shadow: inset 0 0 0 2px var(--text); }
.tb-choice b { font-size: 14px; font-weight: 650; }
.tb-choice small { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.tb-choice:disabled { opacity: .6; cursor: default; }
/* A teammate's conversation: no "new chat" or "keep doing this" (it is one conversation, and already a job) */
.app.layout-chat #clear-btn, .app.layout-split #clear-btn { display: none; }
@container (max-width: 460px) {
  .hand-strip .hs-acts { gap: 4px; }
  .hand-strip .hs-acts .btn { display: inline-grid; place-items: center; width: 34px; height: 34px; min-height: 34px; padding: 0; gap: 0; border-radius: 10px; }
  .hand-strip .hs-acts .btn svg { width: 16px; height: 16px; margin: 0; }
}
.sidebar:has(.hand-strip:not([hidden])) .sidebar-head { display: none; }
.sidebar:has(.hand-strip:not([hidden])) .hand-strip { margin-top: 12px; }
.wk-ask { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sun-soft); font-size: 13.5px; font-weight: 600; }
.wk-ask span { flex: 1; }
.wk-ask svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* A teammate's strip (1.55.4): who it is opens the profile; Watch only when the computer isn't shown */
.hs-who { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 3px 8px 3px 3px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.hs-who:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.hs-who .hs-names { display: flex; flex-direction: column; min-width: 0; }
.hs-chev { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app:not(.layout-chat) .hs-watch { display: none; }
.hand-strip .hs-acts:empty { display: none; }
@container (max-width: 460px) {
  .hand-strip .hs-who .hs-names span { display: none; }
}
/* Next to the computer, the people column is faces only: no header buttons */
.app.layout-split .pp-head { display: none; }

/* "New": a teammate or a group (1.55.5), from Chats and the computer tabs */
.new-menu { position: fixed; z-index: 400; width: 260px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); }
.new-menu[hidden] { display: none; }
.nm-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.nm-item:hover, .nm-item:focus-visible { background: var(--surface-2); outline: none; }
.nm-item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--text-2); }
.nm-t { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.nm-t b { font-size: 13.5px; font-weight: 600; }
.nm-t small { color: var(--text-3); font-size: 12px; }
.desk-add { flex: none; align-self: center; display: grid; place-items: center; width: 32px; height: 32px; margin-left: 4px; border: 1px dashed var(--line-2); border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer; }
.desk-add:hover, .desk-add[aria-expanded="true"] { background: var(--surface); color: var(--text); border-style: solid; }
.desk-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Finding a person or chat in Chats (1.55.5) */
.pp-find { flex: 1; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pp-find[hidden] { display: none; }
.pp-find:focus-within { border-color: var(--line-2); box-shadow: 0 0 0 3px var(--accent-soft); }
.pp-find svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; }
.pp-find input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 14px; }
.pp-find input::-webkit-search-cancel-button { display: none; }
.pp-find-x { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.pp-find-x:hover { color: var(--text); background: var(--surface-2); }
.pp-head:has(.pp-find:not([hidden])) { padding-left: 8px; }
.pp-head:has(.pp-find:not([hidden])) .grow { display: none; }
.pp-hit { align-items: flex-start; padding-top: 7px; padding-bottom: 7px; }
.pp-hit-t { display: flex; flex-direction: column; min-width: 0; }
.pp-hit-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-hit-t small { color: var(--text-3); font-size: 11.5px; }
.pp-results .pp-hit i { margin-top: 7px; }
.pp-none { margin: 14px 12px; color: var(--text-3); font-size: 13px; }

/* Your Thirdhand at the top of its chats, and its profile with routines (1.55.5) */
.me-chip { flex: none; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 8px 0 4px; margin-right: 6px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.me-chip:hover { background: var(--surface-2); }
.me-chip-face { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--coral-soft); color: var(--coral); }
.me-chip-face svg { width: 20px; height: 20px; }
.me-chip b { font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.me-chip > svg { width: 13px; height: 13px; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.me-chip + .chat-switch { padding-left: 8px; border-left: 1px solid var(--line); }
.me-face { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--coral-soft); color: var(--coral); }
.me-face svg { width: 44px; height: 44px; }
.me-sec-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.me-sec-h p { color: var(--text-2); font-size: 13px !important; }
.me-duties { display: flex; flex-direction: column; gap: 10px; }
.duties-none { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-size: 13px; line-height: 1.5; }

/* A teammate's first screen (1.55.5): the introduction is the top, so no strip repeating it */
.sidebar:has(#log > .hand-hello):not(:has(#log > :not(#welcome):not(.hand-hello))) .hand-strip { display: none; }
#log:not(:has(> :not(#welcome):not(.hand-hello))) > .hand-hello { padding-top: max(40px, 9vh); border-bottom: 0; }
.pp-head:has(.pp-find:not([hidden])) { padding-right: 8px; }
.pp-find { min-width: 0; box-sizing: border-box; }
.pp-find input { width: 0; }
.me-duties.duties { border: 0; padding: 0; margin: 0; }

/* Settings › Model › Your plan (1.56) */
.mode-picker:has(input[value="plan"]) { grid-template-columns: repeat(2, 1fr); }
.plan-list { display: flex; flex-direction: column; gap: 8px; }
.plan-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.plan-row.on { border-color: color-mix(in srgb, var(--coral) 45%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 10%, transparent); }
.plan-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--text-2); }
.plan-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plan-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-t b { font-size: 14px; }
.plan-t small { color: var(--text-2); font-size: 12.5px; line-height: 1.4; }
.plan-t .plan-warn { color: var(--warn); }
.plan-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.plan-tag { font-size: 12px; font-weight: 600; color: var(--coral); padding: 4px 10px; border-radius: 99px; background: var(--coral-soft); }
.pj-pick[aria-pressed="true"]::after { content: '✓'; margin-left: 2px; color: var(--hc); font-weight: 700; }

/* Needs you (1.56 audit): a draft shows its first lines; a click or Edit opens all of it */
.tb-draft:not(.open) .tb-draft-b { max-height: 4.7em; overflow: hidden; resize: none; cursor: pointer; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.tb-card.editing .tb-draft-b { max-height: none; -webkit-mask-image: none; mask-image: none; cursor: text; }
.wk-fold { align-self: center; margin: 2px auto 8px; padding: 5px 14px; border: 1px dashed var(--line-2); border-radius: 99px; background: transparent; color: var(--text-2); font: 500 12.5px var(--font); cursor: pointer; display: block; }
.wk-fold:hover { color: var(--text); background: var(--surface-2); }
.wk-steps-d + .wk-acts { margin-top: 0; }
.wk > .wk-acts { margin-left: -10px; }

/* "Keep doing this" lives under an answer worth repeating (1.56 audit), not in the header */
.status-pill.tinted .status-face { color: var(--pc); }
.status-pill.tinted.s-working { background: color-mix(in srgb, var(--pc) 16%, var(--surface)); }
.hw-onb-plans { display: flex; gap: 8px; margin: 2px 0 6px; }
.hw-onb-chip { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 600 13px var(--font); cursor: pointer; }
.hw-onb-chip[aria-pressed="true"] { border-color: var(--coral); background: var(--coral-soft); color: var(--coral); }
.hw-onb-note { display: block; color: var(--text-3); font-size: 12px; line-height: 1.45; margin-bottom: 4px; }

/* New steps below while you read further up: one click back down. */
.sidebar { position: relative; }
.log-new {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px 0 10px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-md); cursor: pointer;
  animation: float-in .18s var(--ease);
}
.log-new svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.log-new:hover { background: var(--surface-2); }
.log-new[hidden] { display: none; }
/* A long chat opens at its newest part. */
.log-earlier {
  align-self: center; height: 30px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px;
  background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.log-earlier:hover { background: var(--surface-2); color: var(--text); }
.chats-more { display: block; width: calc(100% - 12px); margin: 6px; height: 32px; border: 1px dashed var(--line-2); border-radius: 10px; background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.chats-more:hover { background: var(--surface-2); color: var(--text); }
/* Files on their way to a teammate (dropped on their card or header). */
.tm-card.taking, .hand-strip.taking { opacity: .6; }
/* Approved work that didn't go through, and its next try. */
.rep-problem { margin: 6px 0 0; font-size: 12.5px; color: var(--err); }
.rep-retry { margin: 4px 0 0; font-size: 12px; color: var(--text-3); }

/* The Computer menu, for whichever computer is on screen (1.57.2). */
.menu button[hidden], .menu .menu-sep[hidden] { display: none; }
.menu button:disabled { opacity: .55; cursor: default; }
.menu .menu-label { text-transform: none; letter-spacing: 0; font-size: 12px; }
/* A teammate's name beside their face (people column showing faces only). */
.face-tip { position: fixed; z-index: 90; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1px; max-width: 260px; padding: 6px 10px; border-radius: 10px; background: var(--text); color: var(--bg); box-shadow: var(--shadow-lg); pointer-events: none; animation: fadein .12s var(--ease); }
.face-tip[hidden] { display: none; }
.face-tip b { font-size: 12.5px; font-weight: 650; }
.face-tip small { font-size: 11px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Settings › Voice: Thirdhand's voice (1.58). */
.voice-engine { margin: 2px 0 12px; width: fit-content; }
.voice-natural .voice-status { margin-bottom: 10px; }
.vn-bar { height: 4px; margin-top: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.vn-bar i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--accent); transition: width .3s var(--ease); }
/* What you're saying, as you say it (1.59). */
.call-captions .cc-line.live { color: var(--text); opacity: .8; }
.call-captions .cc-line.live::after { content: "…"; opacity: .6; }
/* Teammates' voices (1.60). */
.ha-voice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ha-voice select { min-width: 240px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font: inherit; outline: none; }
.ha-voice select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hear-btn.on { color: var(--accent-ink, var(--coral)); background: var(--coral-soft); }
.rep-head .hear-btn { margin-left: 4px; flex: none; }
.call-captions .cc-line.mate b { font-weight: 650; }
/* The chat column never grows past its room (a narrow or zoomed window,
   a long word): it shrinks, and its centring stays true (1.60.1). */
.workspace, .sidebar, .log { min-width: 0; }

/* Groups you manage (1.61): the thread's top, its menu, its panel. */
.hand-strip .pj-about { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; max-width: 34%; flex: none; padding: 4px 10px 4px 4px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.hand-strip .pj-about b { font-size: 13.5px; font-weight: 650; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hand-strip .pj-about small { font-size: 11.5px; color: var(--text-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hand-strip .pj-about:hover b { text-decoration: underline; text-underline-offset: 2px; }
.hand-strip .pj-roster-strip { flex: 1; min-width: 0; width: auto; }
.hand-strip .pj-more { flex: none; }
.hand-strip .pj-archived { display: flex; flex-direction: column; gap: 1px; padding-left: 4px; }
.hand-strip .pj-archived b { font-size: 13.5px; font-weight: 650; }
.hand-strip .pj-archived small { font-size: 11.5px; color: var(--text-3); }
.pop-menu .nm-t { font-size: 13.5px; }
.pop-menu .nm-item.danger, .pop-menu .nm-item.danger svg { color: var(--err); }
.pop-menu .pm-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.group-sheet .gp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.group-sheet .gp-acts .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.group-sheet .gp-delete { color: var(--err); margin-left: auto; }
.pp-archived-toggle { display: block; width: calc(100% - 24px); border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
.pp-archived-toggle:hover { color: var(--text-2); }
.pp-row.archived { opacity: .7; }
/* A call with a group: who's on it (faces after the name). */
.call-head .call-faces { display: inline-flex; gap: 3px; margin-left: 6px; }
.call-head .call-mate { --hc: var(--text-3); width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 9px/1 var(--font); font-style: normal; color: #fff; background: var(--hc); }
.call-head .call-mate.quiet { opacity: .5; }

/* Settings › Backup (1.61) */
.bk-what { margin: 0 0 10px; color: var(--text-2); font-size: 13px; }
.bk-pw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.bk-strength { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-3); min-height: 16px; }
.bk-strength i { display: block; width: 120px; height: 4px; border-radius: 99px; background: var(--fill-2, var(--surface-3)); position: relative; overflow: hidden; }
.bk-strength i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--err); transition: width .2s var(--ease), background .2s; }
.bk-strength[data-score="1"] i::after { width: 33%; background: var(--err); }
.bk-strength[data-score="2"] i::after { width: 66%; background: #d99a1c; }
.bk-strength[data-score="3"] i::after { width: 100%; background: #1baf7a; }
.bk-strength[data-score="0"] i::after { width: 12%; background: var(--err); }
.bk-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.bk-note { font-size: 12.5px; color: var(--text-3); }
.bk-progress { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.bk-bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bk-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .2s var(--ease); }
.bk-progress.busy .bk-bar i { animation: bk-pulse 1.2s ease-in-out infinite; }
@keyframes bk-pulse { 50% { opacity: .45; } }
.bk-progress small { font-size: 12px; color: var(--text-3); }
.bk-done { margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.bk-done span { flex: 1; min-width: 0; }
.bk-restore { margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; }
.bk-card { display: flex; flex-direction: column; gap: 2px; }
.bk-card b { font-size: 14px; }
.bk-card small { font-size: 12.5px; color: var(--text-3); }
.bk-restore .bk-row { margin-top: 0; }
.bk-safety { margin-top: 16px; }
.bk-safety h5 { margin: 0 0 6px; font-size: 12px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.bk-safe-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; color: var(--text-2); border-top: 1px solid var(--line, var(--surface-3)); }
.bk-safe-row span { flex: 1; min-width: 0; }

/* What a teammate can use, and what they did (Phase A, 1.62–1.64: toolbox.js) */
.tbx-box { display: flex; flex-direction: column; gap: 14px; }
.tbx-hint { margin: 0; font-size: 12.5px; color: var(--text-3); }
.tbx-group { display: flex; flex-direction: column; gap: 2px; }
.tbx-gh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.tbx-gh h4 { margin: 0; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.tbx-count { font-size: 11.5px; color: var(--text-3); }
.tbx-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.tbx-row + .tbx-row { margin-top: 2px; }
.tbx-row > .ic { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.tbx-row.on > .ic { color: var(--accent, var(--coral)); }
.tbx-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tbx-t b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-t span { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-extra { display: flex; align-items: center; gap: 8px; flex: none; }
.tbx-badge { font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 999px; color: var(--accent-ink, var(--text)); background: var(--coral-soft, var(--surface-3)); }
.tbx-choose { font: inherit; font-size: 12.5px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line, transparent); background: var(--surface); color: var(--text); }
.tbx-empty { margin: 0; padding: 6px 2px; font-size: 12.5px; color: var(--text-3); }
.tbx-ask { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--coral-soft, var(--surface-2)); }
.tbx-ask > .ic { width: 18px; height: 18px; flex: none; color: var(--coral); }
.tbx-ask .tbx-t span { white-space: normal; }
.tbx-ask-acts { display: flex; gap: 6px; flex: none; }
.gp-tb { margin-top: 12px; }
.gp-tb > .tbx-box { padding-top: 10px; }
.rep-ask { font-weight: 500; }
/* Who can use this (Settings rows) */
.tbx-scope { flex: none; font: inherit; font-size: 12px; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line, transparent); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.tbx-scope:hover { color: var(--text); }
.tbx-scope:not(.all) { color: var(--accent-ink, var(--text)); background: var(--coral-soft, var(--surface-3)); }
.tbx-pop { position: fixed; z-index: 95; width: 240px; max-height: 60vh; overflow: auto; padding: 8px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); animation: fadein .12s var(--ease); }
.tbx-pop-h { padding: 4px 8px 6px; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.tbx-pop-sep { padding: 8px 8px 2px; font-size: 11px; color: var(--text-3); }
.tbx-pop-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.tbx-pop-row:hover { background: var(--surface-2); }
.tbx-pop-row.everyone { font-weight: 600; }
.tbx-pop-n { margin: 6px 8px 2px; font-size: 11.5px; color: var(--text-3); }
/* What they did */
.alog-box { display: flex; flex-direction: column; gap: 8px; }
.alog-head { display: flex; align-items: center; gap: 8px; }
.alog-list { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow: auto; }
.alog-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 10px; }
.alog-row:hover { background: var(--surface-2); }
.alog-row > .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--text-3); }
.alog-row.k-payment > .ic, .alog-row.k-message > .ic { color: var(--coral); }
.alog-row.undone { opacity: .55; }
.alog-row.undone .alog-text { text-decoration: line-through; }
.alog-time { flex: none; width: 46px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; margin-top: 1px; }
.alog-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.alog-text { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.alog-detail { font-size: 12px; color: var(--text-3); overflow-wrap: anywhere; }
.alog-acts { display: flex; align-items: center; gap: 4px; flex: none; }
/* Today, your team (Home) */
.tbx-team-today { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.tbx-team-h { padding: 0 4px 4px; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.tbx-team-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 10px; background: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.tbx-team-row:hover { background: var(--surface-2); }
.tbx-team-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--hc); }
.tbx-team-row b { font-size: 13px; font-weight: 650; flex: none; }
.tbx-team-row span { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbx-box svg.ic, .alog-box svg.ic, .tbx-ask svg.ic, .rep-acts svg.ic { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.alog-acts .btn svg.ic, .tbx-ask-acts .btn svg.ic, .rep-acts .btn svg.ic { width: 14px; height: 14px; }

/* Where your team lives (Settings › Computers; remoteui.js), Phase B. */
.home-where { display: flex; flex-direction: column; gap: 12px; }
.rmt-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-3); align-self: flex-start; }
.rmt-opt { border: 0; background: none; padding: 6px 14px; border-radius: 9px; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.rmt-opt.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }
.rmt-pair { display: flex; flex-direction: column; gap: 8px; }
.rmt-code, .rmt-host { width: 100%; box-sizing: border-box; font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); resize: vertical; }
.rmt-more summary { cursor: pointer; font-size: 12.5px; color: var(--text-2); }
.rmt-more .rmt-host { margin-top: 6px; }
.rmt-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Your phone (2.3): the QR code with its one-time link. */
.rmt-phone { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rmt-phone h5 { margin: 0; font-size: 13px; }
.rmt-qr { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.rmt-qr-img { width: 184px; height: 184px; flex: none; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.rmt-qr-img svg { display: block; width: 100%; height: 100%; }
.rmt-qr-t { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.rmt-qr-steps { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; }
.rmt-qr-link { font-size: 11.5px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); overflow-wrap: anywhere; user-select: all; }
.rmt-qr-t small { color: var(--text-3); font-size: 12px; }
.rmt-qr-fp { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rmt-warn { align-self: stretch; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--warn) 12%, var(--surface)); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.rmt-warn p { margin: 0; color: var(--text-2); }
.rmt-warn .rmt-cmd { display: block; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); font-size: 12px; user-select: all; overflow-wrap: anywhere; }
.rmt-card { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.rmt-head { display: flex; align-items: center; gap: 10px; }
.rmt-t { display: flex; flex-direction: column; min-width: 0; }
.rmt-t small { color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rmt-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); flex: none; }
.rmt-dot.ok { background: var(--ok, #1baf7a); }
.rmt-dot.wait { background: var(--warn, #e6a700); }
.rmt-devices { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.rmt-devices h5 { margin: 0; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.rmt-dev { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; }
.rmt-dev small { grid-column: 1; color: var(--text-3); font-size: 11.5px; }
.rmt-dev button { grid-column: 2; grid-row: 1 / span 2; }
.rmt-progress { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.rmt-bar { height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.rmt-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.danger-text { color: var(--err); }
.remote-bar { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 85; padding: 6px 14px; border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 12.5px; box-shadow: var(--shadow-md); }
.remote-bar[hidden] { display: none; }
/* A window onto a server that can't reach it (remoteui.js paintCover). */
.rmt-cover { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px 16px; background: color-mix(in srgb, var(--bg, var(--surface-2)) 82%, transparent); backdrop-filter: blur(14px); -webkit-app-region: drag; }
.rmt-cover[hidden] { display: none; }
.rmt-cover-card { -webkit-app-region: no-drag; width: min(440px, 100%); background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-md); padding: 30px 28px 24px; text-align: center; }
.rmt-cover-card h2 { margin: 14px 0 8px; font-size: 19px; line-height: 1.3; }
.rmt-cover-card p { margin: 0 0 10px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.rmt-cover-card .rmt-cover-hint { margin-top: 16px; }
.rmt-cover-card .rmt-cover-detail { font-size: 12px; opacity: .8; }
.rmt-cover-card .rmt-cmd { display: block; margin: 6px auto; width: fit-content; max-width: 100%; padding: 6px 12px; border-radius: 9px; background: var(--surface-2); font-size: 12.5px; user-select: all; overflow-wrap: anywhere; }
.rmt-cover-card .rmt-actions { justify-content: center; margin-top: 16px; }
.rmt-cover-face { width: 54px; height: 54px; margin: 0 auto; border-radius: 50%; background: var(--surface-2); position: relative; }
.rmt-cover-face::after { content: ""; position: absolute; inset: 15px; border-radius: 50%; border: 3px solid var(--accent); border-right-color: transparent; }
.rmt-cover-face.busy::after { animation: rmt-spin 1s linear infinite; }
@keyframes rmt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rmt-cover-face.busy::after { animation: none; } }

/* ================================================================ Settings refresh (2.2)
   A large sheet with grouped navigation and search, a title and one-line lead
   per section, sentence-case headings, one row pattern, folded long text.
   8px rhythm; radii: sheet 16, cards 12, rows 10, chips full. */
dialog.sheet.settings {
  width: min(1120px, calc(100vw - 48px)); max-width: none; height: calc(100vh - 48px); max-height: none;
  border-radius: 16px;
}
#settings .settings-nav { width: 232px; padding: 16px 12px; gap: 0; overflow-y: auto; }
#settings .settings-nav h2 { margin: 4px 8px 12px; }
.set-search-box { position: relative; margin: 0 0 8px; }
.set-search-box svg {
  position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%);
  fill: none; stroke: var(--text-3); stroke-width: 1.8; stroke-linecap: round; pointer-events: none;
}
#set-search {
  width: 100%; height: 32px; padding: 0 10px 0 32px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px; outline: 0;
}
#set-search::placeholder { color: var(--text-3); }
#set-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#set-search::-webkit-search-cancel-button { cursor: pointer; }
.set-results { display: flex; flex-direction: column; gap: 2px; }
.set-results[hidden] { display: none; }
#settings .settings-nav .set-result {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border-radius: 10px;
}
.set-result b { font-weight: 600; color: var(--text); font-size: 13px; line-height: 1.3; }
.set-result small { color: var(--text-3); font-size: 11.5px; font-weight: 500; }
#settings .settings-nav .set-result.on { background: var(--surface); box-shadow: var(--shadow-sm); }
.set-noresult { margin: 8px; color: var(--text-3); font-size: 12.5px; line-height: 1.45; }
.settings-nav.searching .set-navlist { display: none; }
.set-navlist { display: flex; flex-direction: column; gap: 2px; }
.set-navhead { margin: 16px 10px 4px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.set-navlist > .set-navhead:first-child { margin-top: 8px; }
#settings .settings-nav .nav-sep { display: none; }

/* Header: sticky title with its one-line lead. */
#settings .settings-head { padding: 24px 24px 16px 40px; align-items: flex-start; border-bottom: 1px solid transparent; }
.set-titles { min-width: 0; max-width: 720px; }
#settings .settings-head h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.2; }
.set-headlead { margin: 4px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; max-width: 75ch; }
.set-headlead:empty { display: none; }
#settings .settings-scroll { padding: 0 40px 40px; }
#settings .settings-scroll > section { max-width: 720px; }

/* Sentence-case subheadings, no capitals anywhere in Settings. */
#settings h4, #settings .set-label, #settings .field-group h3, #settings .h4-note, #settings .bk-safety h5, #settings .rmt-devices h5 {
  text-transform: none; letter-spacing: normal;
}
#settings .set-group { padding: 16px 0 16px; }
#settings .set-group h4 { margin: 8px 0 8px; font-size: 14.5px; font-weight: 650; color: var(--text); }
#settings .set-group:first-child { padding-top: 0; }
#settings .set-group:first-child h4 { margin-top: 0; }
#settings .set-note { line-height: 1.5; max-width: 75ch; }
#settings .panel-lead { max-width: 75ch; }

/* One row pattern: label and quiet description left, control right. */
#settings .switch-row, #settings .action-row { padding: 12px 0; gap: 24px; border-radius: 10px; }
#settings .switch-row + .switch-row, #settings .switch-row + .action-row,
#settings .action-row + .action-row, #settings .action-row + .switch-row { border-top: 1px solid var(--line); }
#settings .switch-row > span, #settings .action-row > span { max-width: 75ch; }
#settings .switch-row small, #settings .action-row small { font-size: 12.5px; line-height: 1.5; }
#settings .switch-row > :last-child, #settings .action-row > :last-child { flex: none; }

/* Long explanations: two lines, then "More". */
.set-fold:not(.open) {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.set-more {
  align-self: flex-start; margin: 2px 0 0; padding: 0; border: 0; background: none;
  color: var(--accent-ink); font-size: 12px; font-weight: 600; cursor: pointer;
}
.set-more:hover { text-decoration: underline; }
p.set-note.set-fold { margin-bottom: 0; }
p.set-note + .set-more { display: block; margin: 4px 0 12px; }
.about p.set-note + .set-more { margin-inline: auto; }

/* A search result's row, briefly lit. */
.set-hit { animation: set-hit 1.8s var(--ease); }
@keyframes set-hit {
  0%, 50% { background: var(--accent-soft); box-shadow: 0 0 0 8px var(--accent-soft); }
  100% { background: transparent; box-shadow: 0 0 0 8px transparent; }
}

/* Compact, consistent choice cards. */
#settings .mode-picker { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 8px; }
#settings .mode-card { padding: 12px; gap: 4px; }
#settings .mode-card small { font-size: 12px; }
#settings :is(.theme-picker, .layout-picker) { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; max-width: 560px; }
#settings :is(.theme-picker, .layout-picker) label { padding: 8px; gap: 8px; border-radius: 12px; }
#settings :is(.theme-picker, .layout-picker) label:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-2)); }
#settings .swatch { height: 40px; }

/* One style for status banners. */
#settings .set-banner {
  padding: 12px 16px; margin: 0 0 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
}
#settings .set-banner b { font-size: 13px; }
#settings .set-banner small { font-size: 12.5px; line-height: 1.5; }

/* Visible focus. */
#settings :is(button, select, input, a, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#settings #set-search:focus-visible { outline: 0; }

#settings .set-intro { padding: 12px 16px; margin-bottom: 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
#settings .set-intro p { font-size: 13px; color: var(--text-2); max-width: 75ch; }
#settings .si-hero { width: 32px; height: 32px; border-radius: 10px; }
#settings .settings-nav { scrollbar-width: thin; }
#settings .settings-nav::-webkit-scrollbar { width: 6px; }
#settings .settings-nav::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
@media (max-height: 820px) {
  #settings .settings-nav h2 { margin-bottom: 8px; }
  #settings .settings-nav .set-navlist > button { padding-top: 6px; padding-bottom: 6px; }
  .set-navhead { margin-top: 10px; }
  #settings .settings-head { padding-top: 20px; }
}
@media (max-width: 1180px) {
  #settings .settings-nav { width: 208px; }
  #settings .settings-head { padding-left: 32px; }
  #settings .settings-scroll { padding: 0 32px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .set-hit { animation: none; background: var(--accent-soft); }
  #settings .settings-scroll section { animation: none; }
}