/* Toolcmd's own pages, and the defaults under every app. Everything here sits in the toolcmd-base layer, under the
   app layer that each app's stylesheet is served in, so an app's rules win over these. What every app must look like
   is in look.css, outside any layer, where it wins over the app's rules instead. */
@layer toolcmd-base, app;
@layer toolcmd-base {
:root {
  --canvas: #f6f7f4; --surface: #fff; --ink: #202b28; --muted: #69736d;
  --border: #e2e6df; --green: #254f3b; --green-light: #eaf0e8; --danger: #a24338;
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px; color: var(--ink); background: var(--canvas); font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, input[type=submit] { cursor: pointer; }
button:disabled, input:disabled { cursor: not-allowed; opacity: .55; }
a, button, input, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #7b9e80; outline-offset: 4px; }
.icon { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
.console { display: grid; grid-template-columns: var(--sidebar-width, 238px) minmax(0, 1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; overflow: visible; background: #fcfdfb; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 22px 14px 22px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 23px; letter-spacing: -.8px; }
.brand-mark { display: grid; place-items: center; background: var(--green); color: #f5f8ed; border-radius: 10px; width: 36px; height: 36px; }
.brand-mark .icon { width: 21px; height: 21px; }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 2px 10px; }
.sidebar-icon-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.sidebar-icon-button:hover { background: #eef1ea; color: var(--ink); }
.sidebar-icon-button .icon { width: 20px; height: 20px; }
.sidebar-search { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 0 10px; height: 38px; border: 1px solid var(--border); border-radius: 10px; background: #f4f6f1; color: var(--muted); }
.sidebar-search .icon { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-search input[type=search] { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; font-size: 14px; color: var(--ink); -webkit-appearance: none; }
.sidebar-search input[type=search]:focus { outline: none; }
.sidebar-search:focus-within { border-color: #839b7a; background: var(--surface); }
.sidebar-reopen { position: fixed; top: 6px; left: 10px; z-index: 30; display: none; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); box-shadow: none; }
.sidebar-reopen:hover { color: var(--ink); background: #f0f3ed; }
.sidebar-reopen .icon { width: 20px; height: 20px; }
.console[data-sidebar="collapsed"] { grid-template-columns: minmax(0, 1fr); }
/* The sidebar's right edge is a handle (sidebar_controller.js): a line shows on hover, and dragging sets its width. */
.sidebar-resizer { position: absolute; top: 0; bottom: 0; right: -5px; z-index: 20; width: 9px; cursor: col-resize; touch-action: none; outline: none; }
.sidebar-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: transparent; transition: background-color .12s; }
.sidebar-resizer:is(:hover, :focus-visible)::after, .console.is-resizing-sidebar .sidebar-resizer::after { left: 3px; width: 3px; background: #d0cec8; }
.console.is-resizing-sidebar { cursor: col-resize; user-select: none; }
.console.is-resizing-sidebar iframe { pointer-events: none; }
@media (min-width: 701px) { .console .sidebar { z-index: 20; } }
@media (max-width: 700px) { .sidebar-resizer { display: none; } }
.console[data-sidebar="collapsed"] .sidebar { display: none; }
.console[data-sidebar="collapsed"] .sidebar-reopen { display: grid; }
.console[data-sidebar="collapsed"] .main-content { padding-left: 64px; }
.console[data-sidebar="collapsed"] .build-page .main-content, .build-page .console[data-sidebar="collapsed"] .main-content { padding-left: 0; }
.sidebar-backdrop { display: none; }
.business-navigation { margin-left: 0; padding-left: 0; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: #7b847d; }
.sidebar nav { display: flex; flex-direction: column; gap: 5px; }
.sidebar > nav { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.sidebar > .brand { flex-shrink: 0; }
.app-subnavigation { list-style: none; margin: 0 0 6px; padding: 0; }
.app-subnavigation:empty { display: none; }
.app-subnavigation li + li { margin-top: 2px; }
/* An app's options: dots at the right of its row on hover (always on touch screens), over its state mark, opening a
   small menu of its Settings tabs beside them. */
.app-nav-item { position: relative; }
.app-nav-menu-button { position: absolute; z-index: 2; top: 50%; right: 6px; transform: translateY(-50%); display: none; place-items: center; width: 26px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.app-nav-menu-button .icon { width: 16px; height: 16px; }
.app-nav-menu-button:hover, .app-nav-menu-button[aria-expanded="true"] { color: var(--ink); background: #e4e8e1; }
.app-nav-item:is(:hover, :focus-within) > .app-nav-menu-button, .app-nav-menu-button[aria-expanded="true"] { display: grid; }
.app-nav-item:is(:hover, :focus-within):has(> .app-nav-menu-button) > .app-nav-link .app-nav-state { visibility: hidden; }
@media (hover: none) {
  .app-nav-menu-button { display: grid; }
  .app-nav-item:has(> .app-nav-menu-button) > .app-nav-link { padding-right: 38px; }
  .app-nav-item:has(> .app-nav-menu-button) > .app-nav-link .app-nav-state { margin-right: 4px; }
}
/* A row being dragged to a new place lifts; the others make room as it passes. */
.app-subnavigation.reordering { user-select: none; cursor: grabbing; }
.app-subnavigation .app-nav-item.dragging { z-index: 3; opacity: .85; box-shadow: 0 6px 18px #0000002a; border-radius: 10px; background: var(--surface); }
.app-subnavigation.reordering .app-nav-menu-button { display: none; }
/* The person's own separators, labels, and folders. A folder's header looks like a node's row, with a small chevron
   after its name; its nodes sit indented under it. A node dragged over a folder's header outlines it. */
.app-nav-separator { height: 13px; cursor: grab; outline: none; }
.app-nav-separator-line { position: absolute; left: 10px; right: 10px; top: 6px; height: 1px; background: var(--border); }
.app-nav-separator:focus-visible .app-nav-separator-line { background: var(--ink); }
.app-nav-label { padding: 12px 36px 2px 11px; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .02em; outline: none; cursor: grab; }
.app-nav-label:focus-visible { color: var(--ink); }
.app-nav-folder-header { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 400; line-height: 1.4; text-align: left; cursor: pointer; }
.app-nav-folder-header:hover { background: #ebeae7; }
.app-nav-folder-chevron { display: grid; place-items: center; width: 14px; height: 14px; color: var(--muted); transition: transform .12s; }
.app-nav-folder-chevron .icon { width: 12px; height: 12px; }
.app-nav-folder-header[aria-expanded="false"] .app-nav-folder-chevron { transform: rotate(-90deg); }
.app-nav-folder-items { list-style: none; margin: 1px 0 0; padding: 0 0 0 14px; }
.app-nav-folder-items:empty { display: none; }
.app-nav-folder > .app-nav-menu-button { top: 18px; }
.app-nav-folder:has(> .app-nav-folder-items:hover) > .app-nav-menu-button:not([aria-expanded="true"]) { display: none; }
.app-nav-folder.drop-target > .app-nav-folder-header { background: #ebeae7; box-shadow: inset 0 0 0 1px var(--ink); }
.app-nav-label .app-nav-rename, .app-nav-separator .app-nav-rename { font-size: 13px; }
.app-nav-menu { position: fixed; z-index: 1001; min-width: 180px; max-width: calc(100vw - 16px); padding: 5px; border: 1px solid var(--tc-line-strong, var(--border)); border-radius: 10px; background: var(--tc-module, #fff); box-shadow: 0 10px 30px #0000001f; }
.app-nav-menu[hidden] { display: none; }
.app-nav-menu-item { display: block; padding: 8px 12px; border-radius: 7px; color: var(--ink); font-size: 14px; white-space: nowrap; }
.app-nav-menu-item:hover, .app-nav-menu-item:focus-visible { background: #f0f3ed; outline: none; }
.app-nav-menu-separator { height: 1px; margin: 4px 6px; background: var(--border); }
/* New node's apps: each with its icon small and in one color, like the sidebar's, so rows stay one line tall. */
.app-nav-menu-app { display: flex; align-items: center; gap: 8px; width: 100%; }
.app-nav-menu-icon { flex: none; display: grid; place-items: center; width: 16px; height: 16px; color: var(--muted); }
.app-nav-menu-icon svg { display: block; width: 16px; height: 16px; }
.app-nav-menu-app:is(:hover, :focus-visible) .app-nav-menu-icon { color: var(--ink); }
.app-nav-menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
button.app-nav-menu-item { width: 100%; border: 0; background: none; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.app-nav-menu .button_to { margin: 0; }
.app-nav-menu-item.app-nav-menu-danger { color: var(--danger); }
.app-nav-rename { width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--tc-line-strong, var(--border)); border-radius: 9px; background: var(--tc-field, #fff); color: var(--ink); font: inherit; font-size: 14px; }
.app-nav-rename.invalid { border-color: var(--danger); }
/* An app's instances, under its row and indented to its name: plain names, the open one marked like an app. */
/* The chevron on an app with instances: down while they show, right while they're hidden. */
.app-nav-link { display: flex; align-items: center; gap: 8px; padding: 12px 12px; border-radius: 9px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }

.app-nav-link:hover { background: #f0f3ed; }
.app-nav-link.active { color: var(--green); background: var(--green-light); font-weight: 650; }
.app-nav-icon { --tint: var(--green); flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-size: 10px; font-weight: 700; letter-spacing: -.2px; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 70%, white) 0%, var(--tint) 55%, color-mix(in srgb, var(--tint) 75%, black) 100%); box-shadow: inset 0 1px 0 #ffffff40; }
.app-nav-icon svg { width: 15px; height: 15px; }
.app-nav-link.active .app-nav-icon { box-shadow: inset 0 1px 0 #ffffff40, 0 0 0 2px #ffffff; }
/* In the sidebar an app's icon is its plain line icon, as in the app's own title bar: no tile around it, in the
   text's gray, and in the app's own color for the app that's open. */
.app-subnavigation .app-nav-icon { width: 20px; height: 20px; border-radius: 0; background: none; box-shadow: none; color: var(--muted); }
.app-subnavigation .app-nav-icon svg { width: 20px; height: 20px; }
.app-subnavigation .app-nav-link:hover .app-nav-icon { color: var(--ink); }
.console .app-subnavigation .app-nav-link.active .app-nav-icon { box-shadow: none; color: color-mix(in srgb, var(--tint) 85%, black); }
/* The right of an app's card: how long the app has been building or answering, in small text (later, a red count
   of notifications). */
/* A developers-only app's row, which only its developers see: a small lock after its name. */
.app-nav-private { display: grid; flex: none; place-items: center; color: var(--muted); }
.app-nav-private .icon { width: 13px; height: 13px; }
.app-nav-state { display: none; flex: none; margin-left: auto; align-items: center; color: var(--muted); font-family: var(--tc-mono, monospace); font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-nav-link.building .app-nav-state, .app-nav-link.working .app-nav-state { display: inline-flex; }
/* Orange while the app is being changed (a build), blue while it answers the prompt. */
.app-nav-link.building .app-nav-state, .app-nav-link[data-working="build"] .app-nav-state { color: #c43e00; }
.app-nav-link[data-working="ask"]:not(.building) .app-nav-state { color: #2f6bff; }
/* Waiting on the person (a plan to build, a question, a failure to retry): a dot where the clock would be, in Dev's
   color, since the answer goes through the Dev prompt. A clock, when there is one, wins. */
.app-nav-link.waiting:not(.building):not(.working) .app-nav-state { display: inline-flex; }
.app-nav-link.waiting:not(.building):not(.working) .app-nav-state::before { content: "" / "Waiting for you"; width: 8px; height: 8px; border-radius: 50%; background: var(--tc-accent, #ff4f00); }
/* One loader for work in progress: on an app's card in the sidebar and in the prompt's output. */
.toolcmd-loader, .command-card[data-state="working"] .command-card-text::before { box-sizing: border-box; display: inline-block; flex: none; width: 14px; height: 14px; border: 2px solid #ff4f0040; border-top-color: #ff4f00; border-radius: 50%; animation: toolcmd-spin .8s linear infinite; }
@keyframes toolcmd-spin { to { transform: rotate(360deg); } }
/* An app's Settings has the app's own header bar (AppDevelopment::Presentation): its icon and name on the left, the tabs
   on the right like the app's menu, and last, where the app's dots sit, the way back to the app. The bar spans the page. */
.tool-settings-page .main-content, .tool-settings-page .console[data-sidebar="collapsed"] .main-content { padding: 0; }
.tool-settings-header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 20px; border-bottom: 0; background: var(--surface, #fff); }
.tool-settings-brand { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: 10px; font-size: 15px; line-height: 1.4; }
.tool-settings-brand > span { display: grid; flex: 0 0 20px; }
.tool-settings-brand svg { width: 20px; height: 20px; }
.console .tool-settings-header h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; overflow-wrap: anywhere; }
.tool-settings-tabs { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.tool-settings-current { margin-left: auto; padding: 0 6px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.console .tool-settings-header :is(.app-panel-tab, .tool-settings-back) { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; font-size: 14px; white-space: nowrap; }
/* The way back is a lone › in a square the size of a tab. */
.console .tool-settings-header .tool-settings-back { justify-content: center; width: 32px; padding: 0; font-size: 20px; line-height: 1; }
.tool-settings-back { border: 0; border-radius: 8px; background: transparent; color: var(--muted); text-decoration: none; }
.tool-settings-back:hover, .tool-settings-back:focus-visible { background: var(--tc-hover, #f2f1ee); color: var(--ink); }
.tool-settings-body { padding: 16px 24px 48px; }
/* With the sidebar hidden, its reopen button sits at the top left: the bar and the page start after it. */
.tool-settings-page .console[data-sidebar="collapsed"] :is(.tool-settings-header, .tool-settings-body) { padding-left: 64px; }
.settings-frame { display: block; max-width: 760px; min-width: 0; padding: 4px 0 24px; }
/* An app's own settings page fills the rest of the Settings page, flat, in the same color. */
.settings-app-frame { display: block; width: 100%; height: calc(100dvh - 109px); min-height: 360px; border: 0; background: transparent; }
@media (max-width: 700px) {
  /* On a phone: the icon and name with the way back on the first row, the tabs scrolling sideways below. */
  .tool-settings-header { flex-wrap: wrap; row-gap: 10px; }
  .tool-settings-back { margin-left: auto; }
  .tool-settings-tabs { order: 1; flex: 1 0 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .tool-settings-tabs::-webkit-scrollbar { display: none; }
  .tool-settings-body, .tool-settings-page .console[data-sidebar="collapsed"] :is(.tool-settings-header, .tool-settings-body) { padding-left: 20px; padding-right: 20px; }
}
.settings-app-page .generated-app .app-header { display: none !important; }
.settings-frame .workspace-placeholder { padding: 0; }
.settings-frame .page-actions { justify-content: flex-start; }
.settings-frame .flash { margin: 0 0 12px; }
.new-node-dialog { width: min(640px, calc(100vw - 32px)); max-height: min(720px, 86dvh); padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--tc-module, #fff); color: var(--ink); box-shadow: 0 20px 50px #1c1b1926, 0 2px 8px #1c1b190f; }
.new-node-dialog::backdrop { background: #1c1b1940; }
.new-node-dialog[open] { display: flex; flex-direction: column; }
/* The chooser: search, Organise, the person's apps as tiles, then Custom app; its body scrolls under the header. */
.new-node-panel { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 18px 20px 0; }
.new-node-panel[hidden], .new-node-dialog .new-app-panel[hidden] { display: none; }
.new-node-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; margin: 0 -20px; padding: 0 20px 20px; overflow-y: auto; }
.new-node-search { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--tc-field, #fff); color: var(--ink); font: inherit; font-size: 15px; }
.new-node-search:focus { outline: none; border-color: var(--ink); }
.new-node-section { margin: 6px 0 0; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
/* Organise: ways to arrange the sidebar, quieter than the apps: small outlined buttons. */
.new-node-organise { display: flex; flex-wrap: wrap; gap: 8px; }
.new-node-organise form, .new-node-apps form { display: contents; }
.new-node-organise-button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.new-node-organise-button .icon { width: 16px; height: 16px; }
.new-node-organise-button:is(:hover, :focus-visible) { border-color: var(--ink); outline: none; }
/* Your apps: a tile each, its icon, name, and the first line of what it's for. */
.new-node-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.new-node-apps form[hidden] { display: none; }
.new-node-app, .new-node-custom { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--tc-module, #fff); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.new-node-app:is(:hover, :focus-visible), .new-node-custom:is(:hover, :focus-visible) { border-color: var(--ink); outline: none; }
.new-node-app-icon { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 4px; }
.new-node-app-icon svg { width: 28px; height: 28px; }
.new-node-app-name { max-width: 100%; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.new-node-app-line { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
/* Custom app: making something new looks different: a dashed card with the accent's icon. */
.new-node-custom { border-style: dashed; margin-top: 4px; }
.new-node-custom-icon { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 4px; color: var(--accent, #ff4f00); }
.new-node-custom-icon .icon { width: 24px; height: 24px; }
/* Nothing matched: start a custom app with the words typed. */
.new-node-create { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px; border: 1px dashed var(--accent, #ff4f00); border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.new-node-create[hidden] { display: none; }
.new-node-create .icon { flex: none; width: 20px; height: 20px; color: var(--accent, #ff4f00); }
.new-node-create:is(:hover, :focus-visible) { background: #ff4f000d; outline: none; }
.new-app-title { display: flex; align-items: center; gap: 4px; min-width: 0; }
.new-app-back .icon { width: 20px; height: 20px; }
.new-app-panel { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 18px 20px 20px; }
.new-app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.new-app-header-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.new-app-header h2 { margin: 0; font-size: 16px; }
.new-app-header .sidebar-icon-button { font-size: 22px; line-height: 1; }
/* New app: Custom (one big box to describe the app, then Create) and Library (ready-made apps, later). */
.new-app-body { display: flex; flex: 1; flex-direction: column; gap: 14px; min-height: 0; }
.new-app-form { display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 0; }
.new-app-form textarea { flex: 1; min-height: 220px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--tc-field, #fff); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; }
.new-app-form textarea:focus { outline: none; border-color: var(--ink); }
/* Create: small, plain, and black, like a panel's Save. */
.new-app-create { flex-shrink: 0; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font-family: var(--tc-sans); font-size: 14px; font-weight: 600; line-height: 30px; cursor: pointer; }
.new-app-create:is(:hover, :focus-visible):not(:disabled) { background: #3a3935; }
.new-app-create:disabled { opacity: 0.4; cursor: default; }
.new-app-error { margin: 0; color: var(--danger); font-size: 13px; }
/* Another of your apps: one button each, its icon and name; picking one asks for the new one's name. */
.new-app-page { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.new-app-page h1 { margin: 0; }
.app-nav-name { min-width: 0; overflow-wrap: anywhere; }
.nav-link { padding: 12px 13px; display: flex; align-items: center; gap: 12px; color: #627066; font-size: 13px; border-radius: 7px; }
.nav-link:hover { background: #f0f3ed; }
.nav-link.active { color: var(--green); font-weight: 650; background: var(--green-light); }
.member-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sidebar-header-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
/* The product's name, small and quiet between the sidebar button and the header's actions. */
.sidebar-user { flex: 0 1 auto; min-width: 0; overflow: hidden; padding: 8px; border-radius: 8px; color: var(--ink); font-family: var(--tc-sans); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user:hover { background: #ebeae7; }
.avatar { background: #e6eadd; color: #55664b; display: grid; place-items: center; flex-shrink: 0; width: 37px; height: 37px; border-radius: 50%; font-size: 12px; font-weight: 650; }
.notifications-state { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.notifications-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-actions { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.account-tabs { margin-bottom: 22px; }
/* An app's instances (Healthcard › Ivko, Ruth): each opens on its own records; the field adds another. */
.account-apps { max-width: 760px; }
.account-app-list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--border); }
.account-app { border-bottom: 1px solid var(--border); }
.account-app-row { display: flex; align-items: center; gap: 12px; padding: 12px 8px; color: inherit; text-decoration: none; }
a.account-app-row { border-radius: 8px; }
a.account-app-row:hover, a.account-app-row:focus-visible { background: var(--tc-hover, #f2f1ee); }
.account-app-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.account-app-name { font-weight: 700; overflow-wrap: anywhere; }
.account-app-description { margin: 2px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.account-app-go { flex: none; display: grid; color: var(--muted); }
.account-app-go .icon { width: 16px; height: 16px; }
.account-app-note { flex: none; color: var(--muted); font-size: 12px; }
.main-content { padding: 16px 24px 48px; min-width: 0; width: 100%; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.page-actions { display: flex; justify-content: flex-end; gap: 16px; align-items: center; margin-bottom: 24px; }
h1 { font-size: clamp(30px, 3vw, 39px); font-weight: 550; line-height: 1.2; letter-spacing: -1.3px; margin: 10px 0 12px; overflow-wrap: anywhere; }
h2 { font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0 0 9px; letter-spacing: -.3px; overflow-wrap: anywhere; }
p { line-height: 1.65; }
.button { border: 1px solid transparent; border-radius: 7px; min-height: 41px; padding: 11px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 550; font-size: 12px; line-height: 1.5; white-space: nowrap; }
.button .icon { height: 16px; width: 16px; }
.primary { background: var(--green); color: white; box-shadow: 0 2px 3px #254f3b0c; }
.primary:hover { background: #193d2b; }
.secondary { background: #fff; border-color: #dce2d8; }
.secondary:hover { background: #f4f6f0; }
.quiet { background: transparent; color: var(--muted); }
.quiet:hover { background: #e9ede5; }
/* A way forward that isn't the main action (Retry): the main button's shape, outlined instead of filled. */
.outline { background: transparent; border-color: var(--green); color: var(--green); }
.outline:hover { background: #e9ede5; }
.tabs { display: flex; align-items: center; gap: 5px; }
.tab { color: var(--muted); padding: 9px 13px; display: flex; align-items: center; gap: 9px; border-radius: 6px; font-size: 12px; }
.tab.active { background: #e7ece3; color: #364b37; font-weight: 600; }
.tab span { padding: 1px 5px; min-width: 20px; text-align: center; background: #ffffff8c; border-radius: 4px; font-size: 10px; }
.main-content { position: relative; }
.preview-update-note { position: absolute; top: 36px; right: 8px; z-index: 1; padding: 6px 12px; border: 1px solid var(--green); border-radius: 16px; background: var(--green-light); color: var(--green); font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px #202b2814; }
.preview-update-note[hidden] { display: none; }
.build-page .console { height: 100dvh; }
.build-page .main-content { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.app-panel-tab { flex-shrink: 0; padding: 8px 11px; border-radius: 7px; font-size: 13px; color: var(--muted); }
.app-panel-tab:hover { background: #eef1ea; color: var(--ink); }
.app-panel-tab.active { background: var(--green-light); color: var(--green); font-weight: 600; }
.app-build-settings { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 20px 0 0; padding: 0; color: var(--muted); font-size: 13px; }
.app-build-settings div { display: flex; gap: 6px; }
.app-build-settings dt { font-weight: 600; }
.app-build-settings dd { margin: 0; }
/* About: the app's scheduled work, its last run, and Run now. */
.app-schedules { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
.app-schedules h3 { margin: 0 0 10px; font-size: 14px; }
.app-schedules ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.app-schedule { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border); }
.app-schedule:first-child { border-top: 0; padding-top: 0; }
.app-schedule-text { min-width: 0; color: var(--muted); font-size: 13px; }
.app-schedule-text p { margin: 0 0 2px; overflow-wrap: anywhere; }
.app-schedule-name { color: var(--ink); }
.app-schedule-name span { margin-left: 6px; color: var(--muted); font-size: 12px; }
.app-schedule-error { color: var(--danger); }
.app-schedule form { flex-shrink: 0; margin: 0; }
.build-workspace { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0; flex: 1; min-height: 0; width: 100%; }
.build-preview-pane { grid-column: 1; grid-row: 1; }
.build-workspace.is-resizing { cursor: col-resize; user-select: none; }
.build-workspace.is-resizing iframe { pointer-events: none; }
#development-conversation { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
#development-conversation > .build-conversation { flex: 1; min-height: 0; }
/* The chat's top row: a slim strip across the whole sheet, on the sidebar's darker color so it reads as the chat's own
   bar. The request navigation from the left; the copy icon and the arrow that hides the chat at the right. */
.development-topline { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; min-height: 30px; margin: 0 -14px 10px; padding: 0 8px 0 6px; border-bottom: 1px solid var(--border); background: #dddcd7; }
.development-history-nav { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.development-history-label { min-width: 80px; text-align: center; }
/* The same plain chevron buttons as the arrow that hides the chat (.command-sheet-collapse). */
.development-history-step { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #5e5d58; text-decoration: none; }
a.development-history-step:hover { background: #1c1b1912; color: #1c1b19; }
.development-history-step[aria-disabled="true"] { color: #bdbcb6; }
.development-queue { flex: 0 1 auto; max-height: 30%; overflow-y: auto; border-top: 1px solid var(--border); padding-top: 8px; }
.development-queue ol { list-style: none; padding: 0; margin: 0; }
.development-queue .development-queued { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.development-queued-copy { position: relative; flex: 1; min-width: 0; padding-left: 16px; }
.development-queued-copy::before { content: "›"; position: absolute; left: 0; top: 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.development-queued-copy .development-page-reference { display: block; color: var(--muted); font-family: var(--tc-mono); font-size: 10px; margin-top: 3px; }
/* A queued request held behind one that waits on the person. */
.development-queue-waiting { display: block; color: #a33600; font-family: var(--tc-mono); font-size: 10px; margin-top: 3px; }
.development-queued .development-prompt-text { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; }
.development-queue-remove { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 20px; }
.development-queue-remove:hover { background: var(--green-light); color: var(--ink); }
.development-current-live .development-request-heading { padding-bottom: 8px; }
.build-preview-pane { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 0; background: var(--surface); overflow: hidden; }
/* The one way into an app's configuration from the app itself: a small button in the top-right corner. */
/* It is a standard header button, only narrow, at the right end of the app's own header row (header padding 10px 20px,
   36px buttons); inside the frame the app's header ends before it, so the app's buttons continue to its left. */
/* While the app has a dialog open (a panel, the photo viewer), ⚡'s actions would act on the page behind it: it steps
   aside. */
.build-workspace:has(iframe[data-dialog-open]) :is(.command-fab, .command-stack) { visibility: hidden; }
.build-preview-pane iframe { width: 100%; flex: 1; min-height: 0; border: 0; background: var(--surface); }
/* A tool page sits on the panel color, the console content area's own color, so both read as one flat surface. */
.embedded-app-page { min-height: 100dvh; background: #fff; }
/* Phones: app content must never widen the page. Wide tables scroll inside themselves, media shrinks, long words wrap, and the page itself cannot scroll sideways. */
@media (max-width: 700px) {
  html:has(> .standalone-app-page), html:has(> .embedded-app-page), .standalone-app-page, .embedded-app-page { overflow-x: clip; }
  .generated-app { position: relative; max-width: 100vw; overflow-x: clip; overflow-wrap: anywhere; }
  .generated-app * { min-width: 0; }
  .generated-app img, .generated-app svg, .generated-app video, .generated-app canvas, .generated-app iframe { max-width: 100%; height: auto; }
  .generated-app pre { max-width: 100%; overflow-x: auto; }
}
/* Tables fill the available width; a table wider than its space is wrapped by the platform in a scrolling container. */
.generated-app table { width: 100%; border-collapse: collapse; }
.app-table-scroll { max-width: 100%; overflow-x: auto; }
/* Defaults an app may change (look.css paints these; here is only where things sit): cells have room and a line under
   them, buttons and tabs center their words, add lines have room to tap, and a plain button looks like the standard one. */
.generated-app :is(th, td) { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--toolcmd-line); text-align: left; vertical-align: middle; }
.generated-app :is(a, button, input, label):is(.button, .primary, .button-main, .main-action, .danger, .button-danger, .danger-button), .generated-app .tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.generated-app :is(.add-line, .add-card, .add-row) { display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px; }
/* Icons (ctx.icon): the text's color, a little larger than the text, on its line; app.css may size them. */
.generated-app svg.icon { flex: none; width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
/* A button without a class looks like every other button in an app (look.css, Buttons): small, plain, and dark. */
.generated-app :is(button, input[type=submit], input[type=button]):not([aria-label]) { height: 30px; padding: 0 12px; border: 0; border-radius: var(--toolcmd-radius); background: var(--toolcmd-ink); color: #fff; font-size: 14px; font-weight: 600; line-height: 30px; white-space: nowrap; cursor: pointer; }
.generated-app :is(button, input[type=submit], input[type=button]):not([aria-label]):hover { background: #3a3935; }
/* Phone text sizes: an app's own pixel sizes take precedence, so generated CSS should stay at 13px or larger. */
@media (max-width: 700px) { .standalone-app-page { font-size: 16px; } .standalone-app-page input, .standalone-app-page select, .standalone-app-page textarea, .standalone-app-page button { font-size: 16px; } }
.embedded-app-page #main { padding: 0; }
.embedded-app-page .workspace-placeholder { padding: 16px; }
.workspace-placeholder.workspace-placeholder-empty { display: grid; place-items: center; min-height: 60vh; max-width: none; text-align: center; }
.embedded-app-page .workspace-placeholder-empty { min-height: calc(100dvh - 32px); }
.workspace-empty { margin: 0; max-width: 32ch; color: var(--muted); opacity: 0.55; font-size: 14px; line-height: 1.6; }
.desktop-corner-link { position: fixed; top: env(safe-area-inset-top); left: env(safe-area-inset-left); z-index: 1000; width: 40px; height: 40px; display: flex; align-items: flex-start; justify-content: flex-start; padding: 5px; clip-path: polygon(0 0, 100% 0, 0 100%); color: #e6ede4; background: #202b28b3; }
.desktop-corner-link:hover { background: #202b28e6; }
.dev-corner-link { left: auto; right: env(safe-area-inset-right); justify-content: flex-end; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.desktop-corner-link .icon { width: 13px; height: 13px; }
.build-conversation { min-height: 0; overflow-y: auto; }
.workspace-placeholder { max-width: 790px; overflow-wrap: anywhere; }
.app-symbol { display: inline-grid; place-items: center; background: #ecf0e5; color: #627946; border: 1px solid #e6ebdf; border-radius: 11px; width: 46px; height: 46px; }
.app-symbol .icon { width: 24px; height: 24px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 5px; font-size: 10px; font-weight: 550; color: #6a7469; background: #f1f3ed; white-space: nowrap; }
.badge.planned { color: #7b7254; background: #f6f2e8; }
.badge.ready, .badge.succeeded { color: #285c43; background: #e8f1e8; }
.badge.failed { color: #913d36; background: #faeae8; }
.development-connection { font-size: 12px; color: var(--muted); }
.development-connection:not([hidden]) { display: block; padding: 8px 14px 0; }
.development-request { padding: 0 0 16px; overflow-wrap: anywhere; }
.development-progress { color: var(--muted); font-size: 12px; flex: 1; min-width: 0; }
.development-prompt-text, .development-response p { white-space: pre-wrap; line-height: 1.6; font-size: 13px; }
/* What the person typed, echoed like the command bar: a field-coloured line with the orange prompt mark. */
.development-prompt { margin: 0 0 14px; padding: 10px 12px 8px 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--tc-field, #f7f6f3); }
.development-prompt-text { position: relative; }
.development-prompt > .development-prompt-text::before { content: "›"; position: absolute; left: -18px; top: 0; color: var(--tc-accent, #ff4f00); font-family: var(--tc-mono, monospace); font-size: 16px; line-height: 21px; }
.development-prompt-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; color: var(--muted); font-family: var(--tc-mono, monospace); font-size: 10px; }
.development-prompt time { margin-left: auto; white-space: nowrap; }
.development-page-reference { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* A change's undo, quietly at the end of its meta row after the time; and the mark on changes a revert undid. */
.development-prompt-meta > time { margin-left: auto; }
.development-prompt-meta > form { flex: none; margin: 0; }
.development-revert { padding: 2px 8px; border: 1px solid var(--border); border-radius: 5px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.development-revert:hover { background: var(--tc-field, #f7f6f3); }
/* The copy icon at the right of the chat's top row, just left of the arrow that hides the chat. */
.development-copy { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #5e5d58; cursor: pointer; }
.development-copy:hover { background: #1c1b1912; color: #1c1b19; }
.development-copy .icon { width: 16px; height: 16px; }
.development-copy .icon + .icon, .development-copy.copied .icon:first-child { display: none; }
.development-copy.copied .icon + .icon { display: block; }
.development-reverted { flex: none; padding: 0 5px; border: 1px solid var(--border); border-radius: 4px; }
.development-activity { display: flex; align-items: flex-start; gap: 12px; }
.development-activity-heading { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 28px; }
.development-progress > summary { cursor: pointer; list-style: none; }
.development-progress > summary::-webkit-details-marker { display: none; }
.development-progress > summary::after { content: "›"; color: #8a948e; font-size: 16px; }
.development-progress[open] > summary::after { transform: rotate(90deg); }
.development-progress ol { list-style: none; padding: 0 0 0 12px; margin: 10px 0 4px 3px; border-left: 1px solid var(--border); line-height: 1.6; }
.development-progress li + li { margin-top: 10px; }
.development-current-live .development-activity-heading { width: 100%; color: var(--ink); font-size: 13px; font-weight: 550; }
.development-progress-live li:last-child { color: var(--ink); font-size: 13px; font-weight: 550; }
.development-working-spinner { width: 15px; height: 15px; flex-shrink: 0; border: 2px solid var(--border); border-top-color: var(--green); border-right-color: var(--green); border-radius: 50%; animation: development-spin .9s linear infinite; }
.development-request[data-status="succeeded"] .development-activity-heading { color: var(--green); font-weight: 550; }
.development-done-check { display: inline-grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: 4px; background: #e1efd9; font-size: 12px; line-height: 1; }
.development-request[data-status="succeeded"] .development-reply-needed { padding: 4px 10px; border: 1px solid var(--tc-accent, #ff4f00); border-radius: 6px; background: var(--surface); color: var(--tc-accent-text, #a33600); font-weight: 700; }
/* A reply's questions stand apart from its text: an orange-edged box, each question numbered in bold. */
.development-asks { margin: 0 0 12px; padding: 10px 14px 12px; border: 1px solid var(--tc-accent, #ff4f00); border-radius: 10px; background: var(--tc-field, #f7f6f3); }
.development-asks-heading { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--tc-accent-text, #a33600); font-family: var(--tc-sans); font-size: 13px; font-weight: 700; }
.development-asks ol { margin: 0; padding-left: 22px; }
.development-asks li { color: var(--ink); font-family: var(--tc-sans, sans-serif); font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.development-asks li + li { margin-top: 6px; }
.development-question-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--tc-accent, #ff4f00); color: var(--ink); font-weight: 700; }
@keyframes development-spin { to { transform: rotate(360deg); } }
.development-stop { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--ink); }
.development-stop span { width: 8px; height: 8px; border-radius: 1px; background: currentColor; }
.development-stop:hover { background: var(--surface); }
.development-request[data-status="failed"] .development-progress > summary { color: var(--danger); }
.development-response { margin-top: 12px; font-size: 13px; }
.development-response p { margin: 8px 0; }
.development-response ul, .development-response ol { margin: 6px 0 8px; padding-left: 20px; line-height: 1.6; font-size: 13px; }
.development-response li + li { margin-top: 3px; }
.development-response code { font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--green-light); }
.development-request-actions { display: flex; gap: 8px; margin-top: 10px; font-size: 12px; }
.development-request-actions:empty { display: none; }
/* A plan's Build this stays on the chat's bottom edge while the plan above it scrolls. */
.development-request-actions:has(> [data-label="Build this"]) { position: sticky; z-index: 1; bottom: 0; margin-top: 0; padding: 14px 0 10px; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--prompt-accent) 5%, #fff) 14px); }
.app-runtime-shell { --app-background: #fff; background: var(--app-background); min-width: 0; }
/* Printing an app page (data-print, or the browser's own Print): its content in black on white paper, without the
   app's menu, controls, forms, or anything around the app. data-print-only shows only on paper (a letterhead),
   data-no-print only on screen. A panel's page prints from a frame out of sight. */
.generated-app [data-print-only] { display: none !important; }
.app-print-frame { position: fixed; top: 0; left: -10000px; width: 800px; height: 600px; border: 0; visibility: hidden; }
@media print {
  @page { margin: 16mm 14mm; }
  html, body, .embedded-app-page, .app-runtime-shell, .generated-app { min-height: 0 !important; background: #fff !important; color: #000 !important; }
  .desktop-corner-link, .standalone-command-dock, .app-error-report, .app-print-frame,
  .generated-app :is(.app-menu, .app-brand-icon, nav, button, form, input, select, textarea, dialog, [data-no-print]) { display: none !important; }
  .generated-app [data-print-only] { display: revert !important; }
  .generated-app .app-header { position: static !important; min-height: 0 !important; padding: 0 0 10px !important; border: 0 !important; background: none !important; }
  .generated-app .app-content { padding: 0 !important; }
  .generated-app a { color: inherit !important; text-decoration: none !important; }
  .generated-app .app-table-scroll { overflow: visible !important; }
  .generated-app :is(tr, img, li, blockquote, pre) { break-inside: avoid; }
  .generated-app :is(h1, h2, h3, h4) { break-after: avoid; }
}
/* A board that scrolls sideways (data-fill, directly inside .app-content) reaches the bottom of the app, so its
   scrollbar sits there, just above the prompt, instead of right under the cards. */
.generated-app:has(> .app-content > [data-fill]) { display: flex; flex-direction: column; }
.generated-app:has(> .app-content > [data-fill]) > .app-content { display: flex; flex: 1 0 auto; flex-direction: column; }
.generated-app > .app-content > [data-fill] { flex: 1 0 auto; }
.app-photo-viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0f0d; display: none; place-items: center; }
.app-photo-viewer[open] { display: grid; }
.app-photo-viewer::backdrop { background: #0b0f0de6; }
.app-photo-viewer img { max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.app-photo-viewer-close { position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ffffff22; color: #fff; font-size: 26px; line-height: 1; }
.app-photo-viewer-close:hover { background: #ffffff44; }
/* After the app, so it leaves its own room at the end for the ⚡ button and what's beside it. */
.app-error-report { margin: 20px 20px 96px; padding: 16px 0; border-top: 1px solid var(--border); }
.app-error-report > p { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.app-error-report [role="status"]:empty { display: none; }
.data-browser { display: flex; gap: 28px; align-items: flex-start; }
.data-tables { flex: 0 0 180px; }
.data-tables ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.data-table-link { display: block; padding: 8px 10px; border-radius: 6px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.data-table-link:hover { background: var(--green-light); color: var(--ink); }
.data-table-link.active { color: var(--green); background: var(--green-light); font-weight: 650; }
.data-table-view { flex: 1; min-width: 0; }
.data-table-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.data-table-header h2 { font-size: 15px; font-family: var(--tc-sans, "Space Grotesk", sans-serif); }
.data-table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.data-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.data-table th, .data-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.data-table th { color: var(--muted); font-weight: 550; background: var(--canvas); position: sticky; top: 0; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--green-light); }
.data-null { color: #a7afa2; font-style: italic; }
.data-binary { color: var(--muted); font-style: italic; }
.data-truncated { cursor: help; }
.data-pagination { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
@media (max-width: 720px) {
  .data-browser { flex-direction: column; }
  .data-tables { flex: none; width: 100%; }
  .data-tables ul { flex-direction: row; flex-wrap: wrap; }
}
.badge.archived { color: #767a74; background: #f0f1ee; }
.section-note { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 12px 0 24px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; margin-bottom: 25px; }
.back-link .icon { width: 14px; height: 14px; }
.form-section { max-width: 640px; }
.stack-form { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.model-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; width: 100%; }
.field { width: 100%; }
label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 9px; }
input:not([type=submit]), textarea, .field select { width: 100%; min-width: 0; border: 1px solid #d9e0d4; border-radius: 6px; padding: 11px 12px; font-size: 14px; color: var(--ink); background: white; }
textarea { resize: vertical; line-height: 1.7; }
input:focus, textarea:focus { border-color: #839b7a; }
input::placeholder, textarea::placeholder { color: #97a08f; font-size: 12px; }
.field-hint { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 8px 0 0; }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inline-note { padding: 12px 15px; border-radius: 6px; background: #f4f6f0; font-size: 12px; color: var(--muted); margin: 0; width: 100%; }
.flash { background: #e9f0e5; color: #365039; padding: 15px 18px; border: 1px solid #d9e4d2; border-radius: 7px; font-size: 12px; line-height: 1.7; margin: 0 0 24px; overflow-wrap: anywhere; }
.form-errors, .flash-error { background: #fcf0eb; color: #99483b; border: 1px solid #f0d8cf; padding: 15px 18px; border-radius: 7px; font-size: 12px; line-height: 1.6; width: 100%; margin: 0; }
.form-errors ul { padding-left: 18px; margin-bottom: 0; }
.main-content > .form-errors, .form-section > .form-errors { margin-bottom: 22px; }
.app-details { max-width: 790px; }
.app-identity { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.app-identity .app-symbol { flex-shrink: 0; }
.app-identity h2 { min-width: 0; margin: 0; font-size: clamp(24px, 3vw, 30px); }
.app-edit-link { margin-left: auto; flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; color: var(--muted); }
.app-edit-link:hover { background: #e9ede5; color: var(--green); }
.app-open { margin: 20px 0 0; }
.prose { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.metadata { display: flex; flex-wrap: wrap; gap: 26px 50px; border-top: 1px solid var(--border); padding-top: 24px; margin-top: 30px; }
.metadata dt { font-size: 10px; color: var(--muted); margin-bottom: 7px; }
.metadata dd { font-size: 12px; margin: 0; overflow-wrap: anywhere; }
.detail-bottom { display: flex; gap: 15px; justify-content: space-between; align-items: center; margin-top: 20px; max-width: 790px; }
.detail-bottom p { font-size: 12px; color: var(--muted); }
.member-list { background: white; border: 1px solid var(--border); border-radius: 11px; }
.member-row { display: flex; align-items: center; gap: 18px; padding: 10px 16px; min-height: 52px; }
.member-row + .member-row { border-top: 1px solid var(--border); }
.member-person { flex: 1; gap: 10px; }
.member-person .avatar { width: 30px; height: 30px; font-size: 11px; }
.member-person > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.member-person h2 { font-size: 13px; margin: 0; }
.member-person p { font-size: 11px; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.you-label { margin-left: 7px; font-size: 10px; color: var(--muted); font-weight: 400; }
.member-role { display: flex; align-items: center; gap: 10px; }
.member-role .field-hint { margin: 0; white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.member-role-select { min-width: 120px; border: 1px solid #d9e0d4; border-radius: 6px; padding: 5px 8px; font-size: 12px; color: var(--ink); background: white; }
.member-actions { display: flex; gap: 16px; align-items: center; }
.text-link, .danger-link { background: none; border: none; font-size: 11px; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }
.text-link { color: var(--green); }
.danger-link { color: var(--danger); }
.account-grid { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(280px, 1.15fr); gap: 48px; align-items: start; max-width: 1000px; }
.account-grid .form-section { width: 100%; max-width: none; }
.auth-page { max-width: 450px; width: 100%; margin: 0 auto; padding: 10vh 20px 25px; }
.login-panel .brand { font-size: 22px; }
.login-intro { margin: 37px 0 29px; }
.login-intro h1 { font-size: 31px; letter-spacing: -.9px; text-wrap: balance; }
.full-width { width: 100%; }
.setup-notice { padding: 15px; background: #f5f4ed; color: #786f54; border-radius: 6px; font-size: 12px; margin-bottom: 25px; }
.setup-notice p { margin-bottom: 0; }
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 10; padding: 12px; background: white; }
.skip-link:focus { top: 10px; }
@media (min-width: 1500px) { .app-grid { grid-template-columns: repeat(3, minmax(255px, 1fr)); } }
@media (max-width: 1000px) {
  .build-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0; }
  .console { grid-template-columns: var(--sidebar-width, 200px) minmax(0, 1fr); }
  .sidebar { padding-left: 13px; padding-right: 13px; }
  .account-grid { grid-template-columns: 1fr; }
  .member-row { flex-wrap: wrap; gap: 8px 14px; }
  .member-person { flex-basis: 100%; }
  .member-role, .member-actions { padding-left: 40px; }

}
@media (max-width: 700px) {
  .model-settings { grid-template-columns: minmax(0, 1fr); }
  .console { display: block; }
  .build-page .console { display: flex; flex-direction: column; }
  .build-page .main-content { flex: 1; }
  /* A phone looks like a wide screen with the sidebar hidden (sidebar_controller.js hides it there): the page fills
     the screen, the button that shows the sidebar sits at the top left, and pages start below it; in an app it covers
     the spot of the app's icon, as when wide. Shown, the sidebar is a drawer from the left over a dimmed page, and a
     tap beside it closes it. */
  .console[data-sidebar="collapsed"] .main-content { padding-top: 60px; padding-left: 20px; }
  .build-page .console[data-sidebar="collapsed"] .main-content { padding: 0; }
  .tool-settings-page .console[data-sidebar="collapsed"] .tool-settings-brand { margin-left: 44px; }
  .console[data-sidebar="open"] .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000; width: min(300px, 85vw); height: 100dvh; border-right: 1px solid var(--border); box-shadow: 0 20px 50px #1c1b1926, 0 2px 8px #1c1b190f; }
  .console[data-sidebar="open"] .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 999; background: #1c1b1940; }
  .new-node-dialog { width: calc(100vw - 16px); max-width: none; height: calc(100dvh - 16px); max-height: none; margin: auto; }
  .new-node-panel { padding: 18px 16px 0; }
  .new-node-body { margin: 0 -16px; padding: 0 16px 16px; }
  .new-node-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .new-app-panel { padding: 18px 16px; }
  .new-app-form textarea { font-size: 16px; }
  .nav-link { font-size: 11px; padding: 10px; gap: 6px; white-space: nowrap; }
  .nav-link .icon { display: none; }
  .main-content { padding: 16px 20px 35px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.25px; }
  h1 { font-size: 31px; }
  .member-row { padding: 10px 12px; }
  .detail-bottom { flex-wrap: wrap; gap: 5px; }
  .auth-page { padding-top: 35px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .development-working-spinner { animation: none; } }


.development-check-details { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; margin: 12px 0; }
.development-check-details summary { cursor: pointer; }

.development-guidance, .development-starter { flex: 0 1 auto; max-height: 42%; overflow: auto; margin-bottom: 12px; padding-bottom: 10px; font-size: 12px; }
.development-guidance > summary { cursor: pointer; color: var(--green); font-weight: 600; padding: 4px 0; }
.development-guidance-needed { border: 1px solid var(--tc-accent, #ff4f00); border-radius: 10px; background: var(--surface); padding: 12px 14px; }
.development-guidance-needed > summary { position: sticky; top: -12px; z-index: 1; background: var(--surface); color: var(--tc-accent-text, #a33600); font-family: var(--tc-sans); font-size: 13px; font-weight: 700; }
.development-guidance-needed .development-question > p { font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.development-guidance-needed .development-question-suggestions button { font-weight: 550; }
.development-guidance-needed .development-question-actions { margin-top: 10px; }
.development-question p { margin: 8px 0; overflow-wrap: anywhere; }
.development-question small, .development-starter small { color: var(--muted); }
.development-question + .development-question { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 4px; }
.development-question-suggestions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.development-question-suggestions button { min-height: 36px; border: 1px solid var(--border); border-radius: 6px; background: var(--tc-field, var(--surface)); padding: 5px 10px; font: inherit; text-align: left; overflow-wrap: anywhere; max-width: 100%; }
.development-question-actions { display: flex; gap: 16px; }
.development-other-questions > summary { cursor: pointer; color: var(--muted); margin: 6px 0; }
.development-starter p { margin: 4px 0 8px; }
.development-reply-reference, .development-insert-suggestion { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.4; padding: 10px 14px 8px; }
.development-reply-reference span, .development-insert-suggestion span { flex: 1; overflow-wrap: anywhere; max-height: 64px; overflow: auto; }
.development-reply-reference button, .development-insert-suggestion button { background: none; border: 0; color: var(--green); padding: 5px; font: inherit; }
.development-reply-reference button { font-size: 20px; }
.build-composer [hidden] { display: none !important; }
.development-question-notice { padding: 10px 14px 0; margin: 0; font-size: 11px; color: var(--danger); }
.development-question-reference { display: block; font-family: var(--tc-mono, monospace); font-size: 10px; color: var(--muted); margin-bottom: 5px; overflow-wrap: anywhere; }

.existing-member-section { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); }
.existing-member-section h2 { margin-bottom: 4px; }
.existing-member-section .section-note { margin-top: 0; }
.development-check-blocker { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Command bar: always under the live app. The developer's chat opens in a sheet above it. */
.command-dock { grid-column: 1; grid-row: 2; position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
/* Plain text across the full width, like the prompt's answer: while a request runs, the request and then its state and latest step. */
.command-status { display: flex; flex-direction: column; align-items: stretch; gap: 2px; align-self: stretch; width: 100%; min-width: 0; padding: 2px 14px; border: 0; border-radius: 0; background: none; color: #1a1a1a; font-size: 13px; text-align: left; cursor: pointer; }
.command-status[hidden], .command-status-request[hidden] { display: none; }
/* The request line of an answer or a build: "› words (completed in 3m 16s)"; long words are cut, the time stays. */
.command-output-prompt { display: flex; min-width: 0; white-space: nowrap; color: #6b6963; font-size: 12px; }
.command-output-prompt::before { content: "› "; flex: none; white-space: pre; color: var(--prompt-accent); }
/* A build's line is Dev work, so its mark stays orange. */
.command-status .command-output-prompt::before { color: #ff4f00; }
/* The output and, on its right, the Dev switch. */
.command-output { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.command-output-lines { flex: 1; min-width: 0; }
.command-output-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.command-queued { margin-right: 6px; color: #5e5d58; font-family: var(--tc-mono, monospace); font-size: 10px; line-height: 1.3; white-space: nowrap; }
.command-queued[hidden] { display: none; }
/* "Create request": a popup (full screen on phones) to describe the change and submit it to the Dev queue. */
.request-dialog { width: min(640px, calc(100vw - 48px)); max-width: none; padding: 0; border: 1px solid #e6e4de; border-radius: 14px; background: #fff; color: #1c1b19; box-shadow: 0 20px 50px #1c1b1926, 0 2px 8px #1c1b190f; }
.request-dialog::backdrop { background: #1c1b1940; }
.request-dialog-panel { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 20px; }
.request-dialog-head { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0 -20px; padding: 8px 8px 8px 20px; border-bottom: 1px solid #e6e4de; font-family: var(--tc-sans); }
.request-dialog-head strong { flex: 1; font-size: 16px; }
.request-dialog-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #1a1a1a; font-size: 24px; line-height: 1; cursor: pointer; }
.request-dialog-close:hover { background: #f1efea; }
.request-dialog-label { margin-top: 6px; color: #6b6963; font-family: var(--tc-sans); font-size: 13px; }
.request-dialog textarea { min-height: 150px; padding: 10px 12px; border: 1px solid #d6d3cc; border-radius: 8px; background: #fff; color: #1a1a1a; font: inherit; font-size: 15px; line-height: 1.45; resize: vertical; }
.request-dialog textarea:focus { outline: none; border-color: #1a1a1a; }
.request-dialog-actions { display: flex; justify-content: flex-end; }
.request-dialog-submit { padding: 10px 18px; border: 0; border-radius: 8px; background: #ff4f00; color: #1a1a1a; font-family: var(--tc-sans); font-size: 13px; font-weight: 700; cursor: pointer; }
@media (max-width: 700px) {
  .request-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: none; margin: auto; }
  .request-dialog-panel { height: 100%; }
  .request-dialog textarea { flex: 1; font-size: 16px; }
}
/* Change this app, for someone who doesn't develop it: make it their own (a fork). A short note, not a full sheet. */
.fork-dialog { width: min(480px, calc(100vw - 32px)); }
.fork-dialog .request-dialog-actions { gap: 8px; align-items: center; }
.fork-dialog-text { margin: 6px 0 4px; color: #1a1a1a; font-size: 15px; line-height: 1.5; }
.fork-dialog-cancel { padding: 10px 14px; border: 0; border-radius: 8px; background: transparent; color: #1a1a1a; font-family: var(--tc-sans); font-size: 13px; font-weight: 600; cursor: pointer; }
.fork-dialog-cancel:hover { background: #f1efea; }
@media (max-width: 700px) {
  .fork-dialog { width: calc(100vw - 32px); height: auto; }
  .fork-dialog .request-dialog-panel { height: auto; }
}
/* "Which one?": the records that fit, numbered; nothing happens until one is picked. */
.command-card-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.command-card-choice { padding: 5px 10px; border: 1px solid var(--prompt-accent); border-radius: 6px; background: transparent; color: #1a1a1a; font-family: var(--tc-sans); font-size: 12px; text-align: left; cursor: pointer; }
.command-card-choice:hover, .command-card-choice:focus-visible { background: color-mix(in srgb, var(--prompt-accent) 12%, transparent); }
.command-card-action { align-self: flex-start; margin-top: 4px; padding: 5px 12px; border: 0; border-radius: 6px; background: #ff4f00; color: #1a1a1a; font-family: var(--tc-sans); font-size: 12px; font-weight: 700; cursor: pointer; }
.command-output-words { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.command-output-took { flex: none; white-space: pre; }
.command-status-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.command-status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Under the line, what to do next without opening the chat: the request's buttons (Build this, Retry, Skip) or the
   question with its suggested answers. */
.command-status-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 14px 2px; }
.command-status-actions[hidden] { display: none; }
.command-status-actions form { margin: 0; }
.command-status-actions .development-question { flex: 1 1 100%; min-width: 0; font-size: 13px; }
.command-status-actions .development-question > p { margin: 0 0 6px; font-weight: 600; line-height: 1.4; }
.command-status-actions .development-question-suggestions { margin-top: 0; }
/* There the line itself says "Question for you", and the box keeps to what is asked. */
.command-status-actions .development-asks { flex: 1 1 100%; margin: 0; max-height: 40dvh; overflow-y: auto; }
.command-status-actions .development-asks-heading { display: none; }
/* The closed chat's line isn't a link: no underlines or text links on it, and a click anywhere opens the chat. */
.command-output:has(.command-status:not([hidden])) { cursor: pointer; }
.command-status-actions .development-question-actions { display: none; }
/* Only a running request has the loader; a finished one reads like an answer. */
.command-status:not([data-tone="live"]) .command-status-loader { display: none; }
.command-status[data-tone="live"] .command-status-text { color: #a33600; font-weight: 600; }
.command-status[data-tone="attention"] .command-status-text { color: #a33600; }
.command-status[data-tone="failed"] .command-status-text { color: var(--danger); }
@keyframes command-pulse { 50% { opacity: .3; } }
/* The prompt has one accent: blue while it works with the app's data, orange in Dev, where it changes the app.
   People who can't change the app only ever see the blue one. A running build glows orange in either mode. */
.command-dock { --prompt-accent: #2f6bff; --prompt-accent-light: #a9c1ff; --prompt-on-accent: #fff; --prompt-busy: var(--prompt-accent); --prompt-busy-light: var(--prompt-accent-light); }
[data-dev="true"] .command-dock { --prompt-accent: #ff4f00; --prompt-accent-light: #ffb38a; --prompt-on-accent: #1a1a1a; }
[data-toolcmd-busy="build"] .command-dock { --prompt-busy: #ff4f00; --prompt-busy-light: #ffb38a; }
.command-bar { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 12px; background: #1a1a1a; color: #edece8; overflow: hidden; }
.command-bar:focus-within { box-shadow: 0 0 0 2px var(--prompt-accent); }
/* While something runs (an answer, a save, this app's build), the prompt can't be missed: its outline glows and an
   orange line sweeps along its top edge. The app's card in the sidebar pulses a dot, and the tab title starts with ●. */
[data-toolcmd-busy] .command-bar { box-shadow: 0 0 0 2px var(--prompt-busy); animation: command-glow 1.6s ease-in-out infinite; }
[data-toolcmd-busy] .command-bar::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 45%; height: 3px; background: linear-gradient(90deg, transparent, var(--prompt-busy) 30%, var(--prompt-busy-light) 50%, var(--prompt-busy) 70%, transparent); animation: command-sweep 1.3s ease-in-out infinite; pointer-events: none; }
@keyframes command-sweep { from { transform: translateX(-100%); } to { transform: translateX(225%); } }
@keyframes command-glow { 50% { box-shadow: 0 0 0 2px var(--prompt-busy), 0 0 18px 2px color-mix(in srgb, var(--prompt-busy) 40%, transparent); } }
.command-bar-row { display: flex; align-items: flex-end; gap: 6px; padding: 6px; }
/* The prompt's left end: ⌄ puts it away, back behind the ⚡ button. */
.command-close { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 36px; padding: 0; border: 0; background: transparent; color: #9c9b96; cursor: pointer; }
.command-close:hover { color: #f2f1ed; }
.command-close .icon { width: 20px; height: 20px; }
/* Dev's paperclip: a screenshot for the request (pasting or dropping one works too). */
.command-attach { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 36px; padding: 0; border: 0; background: transparent; color: #9c9b96; cursor: pointer; }
.command-attach:hover { color: #f2f1ed; }
.command-attach .icon { width: 18px; height: 18px; }
[data-dev="false"] .command-attach { display: none; }
/* The ⚡ button, bottom right: the only thing at the bottom while the prompt is put away. A tap opens the stack above
   it (it shows × then), holding it talks. In the prompt's accent: blue, or orange in Dev; a running build rings it. */
.command-fab { position: relative; align-self: flex-end; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 8px 8px 0; padding: 0; border: 0; border-radius: 50%; background: var(--prompt-accent); color: var(--prompt-on-accent); box-shadow: 0 6px 18px #1c1b192e, 0 1px 3px #1c1b191f; cursor: pointer; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.command-fab .icon { width: 26px; height: 26px; stroke-width: 2; pointer-events: none; }
.command-fab .icon + .icon, [data-stack-open] .command-fab .icon:first-child { display: none; }
[data-stack-open] .command-fab .icon + .icon { display: block; }
.command-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--prompt-accent) 45%, transparent); outline-offset: 3px; }
[data-toolcmd-busy] .command-fab { animation: command-fab-ring 1.6s ease-in-out infinite; }
@keyframes command-fab-ring { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--prompt-busy) 35%, transparent), 0 6px 18px #1c1b192e; } }
[data-prompt="open"] :is(.command-fab, .command-stack) { display: none; }
[data-prompt="closed"] .command-bar { display: none; }
/* The stack: labelled round buttons rising from ⚡, Type nearest to it, the page dimmed behind. */
.command-stack { position: absolute; right: 16px; bottom: 84px; z-index: 3; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; pointer-events: auto; }
.command-stack[hidden] { display: none; }
.command-stack-item { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.command-stack-label { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px #1c1b191a; }
.command-stack-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-right: 6px; border: 1px solid var(--border); border-radius: 50%; background: #fff; box-shadow: 0 2px 8px #1c1b191a; }
.command-stack-icon svg { width: 22px; height: 22px; }
.command-stack-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.command-stack-dev .command-stack-icon { color: #c2410c; }
.command-stack-item:is(:hover, :focus-visible) { outline: none; }
.command-stack-item:is(:hover, :focus-visible) :is(.command-stack-label, .command-stack-icon) { border-color: var(--ink); }
.build-workspace[data-stack-open] .build-preview-pane::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #1c1b1938; }
.standalone-command-dock[data-stack-open]::before { content: ""; position: fixed; inset: 0; z-index: -1; background: #1c1b1938; pointer-events: auto; }
[data-stack-open] :is(.command-output, .command-card) { visibility: hidden; }
/* Put away, the console's dock floats over the app: just ⚡, and above it whatever there is to say (a build's line,
   an answer), as a card on the right; the app gets the whole height, with room at its end for the button. */
.build-workspace[data-prompt="closed"] .command-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; }
.build-workspace[data-prompt="closed"] .command-dock > :not(.command-fab) { pointer-events: auto; }
/* Folded, the dock is one row along the bottom: what's going on (a build's line, an answer) to the left of the ⚡
   button, in the space beside it, their bottoms in line. */
.build-workspace[data-prompt="closed"] .command-dock, .standalone-command-dock[data-prompt="closed"] { flex-direction: row; align-items: flex-end; justify-content: flex-end; }
[data-prompt="closed"] :is(.command-output, .command-dock > .command-card) { align-self: flex-end; flex: 0 1 auto; width: auto; min-width: 0; max-width: min(520px, calc(100% - 88px)); margin: 0 0 8px 8px; padding: 8px 6px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: 0 6px 18px #1c1b1924; }
.command-output:not(:has(:is(.command-status, .command-status-actions, .command-card, .command-queued):not([hidden]))) { display: none; }
.generated-app:not(:has(> .app-content > [data-fill]))::after { content: ""; display: block; height: 88px; }
.command-bar :is(#build-request, #command-input) { flex: 1; min-width: 0; height: 36px; max-height: 160px; margin: 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: #f2f1ed; font-size: 14px; line-height: 20px; resize: none; }
.command-bar :is(#build-request, #command-input):focus { outline: none; border: 0; }
.command-bar :is(#build-request, #command-input)::placeholder { color: #9c9b96; font-size: 14px; }
.command-clear { flex-shrink: 0; width: 32px; height: 36px; padding: 0; border: 0; background: transparent; color: #9c9b96; font-size: 20px; line-height: 1; }
.command-clear:hover { color: #f2f1ed; }
.command-clear[hidden] { display: none; }
/* Images that go with a request to change the app: a strip of thumbnails above the prompt, and the paperclip that
   adds them (only in Dev). */
.command-attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 0; }
.command-attachments[hidden] { display: none; }
.command-attachment { position: relative; display: block; height: 56px; }
.command-attachment img { display: block; height: 56px; max-width: 120px; border: 1px solid #ffffff2e; border-radius: 6px; object-fit: cover; }
.command-attachment-remove { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: #edece8; color: #1a1a1a; font-size: 13px; line-height: 1; cursor: pointer; }
/* The camera reading a label's code: the whole screen, a square to aim with, and × in the corner. */
.qr-scanner { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; overflow: hidden; }
.qr-scanner::backdrop { background: #000; }
.qr-scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qr-scanner-frame { position: absolute; top: 50%; left: 50%; width: min(64vw, 64dvh, 320px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 16px; box-shadow: 0 0 0 100vmax #0000006b; }
.qr-scanner-hint { position: absolute; left: 0; right: 0; bottom: max(32px, env(safe-area-inset-bottom)); margin: 0; text-align: center; color: #fff; font-size: 15px; }
.qr-scanner-close { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ffffff22; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.qr-scanner-close:hover { background: #ffffff44; }
/* In the chat, a request shows the images that came with it. */
.development-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.development-attachment img { display: block; height: 64px; max-width: 160px; border: 1px solid var(--border); border-radius: 6px; object-fit: cover; }
.build-send { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--prompt-accent); color: var(--prompt-on-accent); }
.build-send:hover { background: #ff6a26; }
.build-send .icon { width: 18px; height: 18px; stroke-width: 2.2; }
/* Hold to talk: while the prompt is empty and the browser can listen, the round button is a mic (EN/ES at its corner);
   typed or spoken words bring the arrow back. Holding it pulses a ring; sliding off fades it (letting go cancels). */
.command-bar-row[data-voice][data-empty] .build-send,
.command-bar-row:not([data-voice]) .command-voice, .command-bar-row:not([data-empty]):not([data-listening]) .command-voice { display: none; }
/* Only the blue prompt talks: in Dev the prompt is for typing, so it keeps the arrow. */
.build-workspace[data-dev="true"] .command-voice { display: none; }
.build-workspace[data-dev="true"] .command-bar-row[data-voice][data-empty] .build-send { display: grid; }
/* While held, the words fill the prompt but the mic stays under the finger until it lets go. */
.command-bar-row[data-listening] .build-send { display: none; }
.command-voice { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--prompt-accent); color: var(--prompt-on-accent); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.command-voice .icon { width: 18px; height: 18px; stroke-width: 2.2; pointer-events: none; }
.command-voice-lang { position: absolute; right: -3px; bottom: -3px; padding: 0 3px; border-radius: 6px; background: #1a1a1a; color: #f2f1ed; font-size: 9px; font-weight: 700; line-height: 13px; letter-spacing: .02em; pointer-events: none; }
.command-voice.listening { animation: command-voice-pulse 1.2s ease-out infinite; }
.command-voice.cancelling { opacity: .45; animation: none; }
@keyframes command-voice-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--prompt-accent) 60%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { .command-voice.listening { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--prompt-accent) 45%, transparent); } }
/* What the mic has to say (the language it switched to, a blocked microphone), over the empty prompt's placeholder. */
.command-bar-row[data-voice] { position: relative; }
.command-voice-hint { position: absolute; top: 6px; left: 14px; right: 52px; overflow: hidden; background: #1a1a1a; color: #f2f1ed; font-size: 14px; line-height: 36px; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.command-voice-hint[hidden] { display: none; }
.command-bar .development-reply-reference, .command-bar .development-insert-suggestion { padding: 8px 14px 0; color: #edece8; }
.command-bar .development-reply-reference button, .command-bar .development-insert-suggestion button { color: #ff8a5c; }
.command-bar .development-question-notice { padding: 8px 14px 0; color: #ff8a5c; }
.command-bar .development-connection { color: #9c9b96; }
/* The sheet sits in the dock above the bar and pushes the app up, so the app stays usable while chatting. */
.command-sheet { position: relative; display: flex; flex-direction: column; height: var(--sheet-height, min(66dvh, 720px)); min-height: 0; border-top: 1px solid #e8e6e1; background: transparent; }
/* The line between the tool and the chat: drag it (or use the arrow keys) to share the height. */
.command-sheet-divider { position: absolute; top: -9px; left: 12px; right: 12px; z-index: 2; height: 16px; cursor: row-resize; touch-action: none; outline: none; }
.command-sheet-divider::after { content: ""; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #bdbcb6; }
.command-sheet-divider:hover::after, .command-sheet-divider:focus-visible::after, .build-workspace.is-resizing-sheet .command-sheet-divider::after { left: 0; width: 100%; margin-left: 0; background: var(--ink); }
.build-workspace.is-resizing-sheet { cursor: row-resize; user-select: none; }
.build-workspace.is-resizing-sheet iframe { pointer-events: none; }
.command-sheet[data-state="collapsed"] { display: none; }
/* The arrow that hides the chat ends the chat's top row (.development-topline), after the copy icon. */
.command-sheet-collapse { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #5e5d58; }
.development-topline .command-sheet-collapse { margin-left: auto; }
.development-topline .development-copy + .command-sheet-collapse { margin-left: 0; }
.command-sheet-collapse:hover { background: #1c1b1912; color: #1c1b19; }
.command-sheet-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 14px 12px; }
.command-sheet-body > #development-conversation { flex: 1 1 auto; }
.command-sheet .development-guidance, .command-sheet .development-starter { max-height: 34%; }
.command-sheet .development-queue { max-height: 24%; }
/* A running request keeps its prompt in view: its step list scrolls on its own, showing the latest steps. */
.command-sheet .development-progress-live ol { max-height: 8.5em; overflow-y: auto; scrollbar-width: thin; }
.command-card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 2px 40px 2px 14px; color: #1a1a1a; font-size: 13px; }
.command-card[hidden], .build-workspace[data-sheet="open"][data-dev="true"] .command-card { display: none; }
.command-card[data-state="failed"] .command-card-text { color: var(--danger); }
.command-card p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.command-card .command-card-prompt { overflow-wrap: normal; }
.command-card-text { white-space: pre-wrap; }
.command-card[data-state="working"] .command-card-text::before { content: ""; margin-right: 8px; vertical-align: -2px; border-color: color-mix(in srgb, var(--prompt-accent) 25%, transparent); border-top-color: var(--prompt-accent); }
.command-card-close { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #5e5d58; font-size: 18px; line-height: 1; }
.command-card-close:hover { color: #1a1a1a; }
/* In the live app: where a filled-in form is saved. */
.generated-app .toolcmd-command-target { outline: 3px solid #ff4f00; outline-offset: 3px; }
/* Searching is the prompt's job: wherever the prompt is (the console and the standalone page), the page's own search
   form stays hidden and the prompt drives it. Without a prompt (a settings tab, an archived app on its own page), it shows.
   Important, because apps style their search with their own #app-N rules. */
.embedded-app-page:not(.standalone-app-page):not(.settings-app-page) .generated-app form[role="search"],
.standalone-with-prompt .generated-app form[role="search"] { display: none !important; }
/* The standalone page carries the same prompt, fixed at the bottom on the app's own color; the page leaves room for it. */
.standalone-with-prompt #main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* There the app fills the screen above the docked prompt (apps set 100dvh in their own stylesheet). */
.standalone-with-prompt .generated-app { min-height: calc(100dvh - 96px - env(safe-area-inset-bottom)) !important; }
.standalone-command-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-top: 1px solid #e8e6e1; background: #fff; }
.standalone-command-dock[data-prompt="closed"] { left: auto; display: flex; flex-direction: column; align-items: flex-end; padding: 0 max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 0; border-top: 0; background: transparent; pointer-events: none; }
.standalone-command-dock[data-prompt="closed"] > * { pointer-events: auto; }
@media (max-width: 1000px) {
  .command-dock { padding-right: 8px; }
}
@media (max-width: 700px) {
  .command-dock { padding: 6px 6px max(6px, env(safe-area-inset-bottom)); }
  .command-sheet { height: var(--sheet-height, min(64dvh, 600px)); }
  .command-bar :is(#build-request, #command-input), .command-bar :is(#build-request, #command-input)::placeholder { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { [data-toolcmd-busy] .command-bar, [data-toolcmd-busy] .command-bar::before { animation: none; } [data-toolcmd-busy] .command-bar::before { width: 100%; background: var(--prompt-busy); } }
@media (prefers-reduced-motion: reduce) { .toolcmd-loader, .command-card[data-state="working"] .command-card-text::before { animation-duration: 2.4s; } }

/* Toolcmd's own pages share the apps' look (look.css): a white page with soft lines, and a light gray sidebar. */
:root {
  --canvas: #f5f5f4; --surface: #ffffff; --ink: #1c1b19; --muted: #6b6963; --border: #e8e6e1;
  --green: #1c1b19; --green-light: #ecebe6; --danger: #a3321e;
  --tc-field: #ffffff; --tc-module: #ffffff; --tc-hover: #f2f1ee; --tc-line-strong: #d9d6cf; --tc-shadow: none;
  --tc-accent: #ff4f00; --tc-accent-text: #a33600;
  --tc-mono: "Space Mono", monospace;
  --tc-sans: "Space Grotesk", sans-serif;
}
.console, .auth-page { font-family: var(--tc-sans); font-size: 14px; }
.console h1, .auth-page h1 { font-weight: 700; letter-spacing: -1px; }
.console h2 { font-weight: 700; letter-spacing: 0; }
.console :focus-visible, .auth-page :focus-visible { outline: 2px solid var(--tc-accent); outline-offset: 2px; }
.console .sidebar { background: var(--canvas); border-right-color: #e6e5e2; }
.console .sidebar-icon-button:hover, .console .sidebar-reopen:hover { background: var(--green-light); color: var(--ink); }
.console .sidebar-search { border-color: var(--tc-line-strong); border-radius: 8px; background: var(--tc-field); }
.console .sidebar-search:focus-within { border-color: var(--ink); background: var(--tc-field); }
.console .app-subnavigation li + li { margin-top: 1px; }
/* Apps in the sidebar are plain icon and name, like the app's own title bar: no frame. The open app sits on a gray
   pill, bold, with its icon in its own color; hovering shades the row a little less. */
.console .app-nav-link { padding: 7px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 400; }
.console .app-nav-link:hover { background: var(--green-light); }
.console .sidebar :is(.sidebar-icon-button:not([aria-current="page"]), .app-nav-link:not(.active), .app-nav-menu-button):is(:hover, [aria-expanded="true"]) { background: #ebeae7; color: var(--ink); }
/* On a phone the sidebar reads like a messaging app's list: rows 56px tall with 17px names and 24px icons, folders the
   same, its header's buttons and name 48px, the dots a 48px square, and a row's menu items 48px at 16px. */
@media (max-width: 700px) {
  .console :is(.app-nav-link, .app-nav-folder-header) { min-height: 56px; gap: 14px; padding: 0 12px; font-size: 17px; }
  .console .app-subnavigation li + li { margin-top: 2px; }
  .console .app-subnavigation .app-nav-icon, .console .app-subnavigation .app-nav-icon svg { width: 24px; height: 24px; }
  .console .app-nav-state { font-size: 12px; }
  .console .app-nav-label { padding-top: 16px; font-size: 13px; }
  .console .sidebar-icon-button { width: 48px; height: 48px; }
  .console .sidebar-icon-button .icon { width: 24px; height: 24px; }
  .console .sidebar-user { display: flex; align-items: center; min-height: 48px; padding: 0 10px; font-size: 17px; }
  .console .app-nav-menu-button { right: 0; width: 48px; height: 48px; }
  .console .app-nav-menu-button .icon { width: 20px; height: 20px; }
  .console .app-nav-item:has(> .app-nav-menu-button) > .app-nav-link { padding-right: 50px; }
  .console .app-nav-folder > .app-nav-menu-button { top: 28px; }
  .console .app-nav-menu-item { display: flex; align-items: center; min-height: 48px; padding-top: 0; padding-bottom: 0; font-size: 16px; }
  .console[data-sidebar="open"] .sidebar { width: min(340px, 88vw); }
}
.console .app-nav-link.active { border-color: transparent; background: #e6e5e1; color: var(--ink); font-weight: 600; }
@media (min-width: 701px) {
  /* The app list scrolls by itself; it reaches the sidebar's edge so the open app's row isn't cut off there. */
  .console .business-navigation { margin-right: -15px; padding-right: 15px; overflow-x: hidden; }
  /* It still scrolls with a wheel or trackpad when there are many apps, but draws no scrollbar over the open app's row. */
  .console .sidebar > nav { scrollbar-width: none; }
  .console .sidebar > nav::-webkit-scrollbar { display: none; }
}
.console .app-nav-link.active .app-nav-icon { box-shadow: inset 0 1px 0 #ffffff40; }
.console .avatar { background: var(--ink); color: var(--surface); font-weight: 700; }
.console .sidebar-settings[aria-current="page"] { background: #e6e5e1; color: var(--ink); }
.console .button, .auth-page .button, .app-error-report .button { min-height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; font-weight: 500; box-shadow: var(--tc-shadow); }
/* The one main button (Build this, Create, Save): white text on an orange that deepens a little toward the bottom, a
   light edge on top, and a soft orange shadow; it brightens under the pointer and sinks when pressed. */
.console .primary, .auth-page .primary, .app-error-report .primary { border-color: #e04400; background: #f24a00 linear-gradient(180deg, #ff5f1a, #ec4700); box-shadow: inset 0 1px 0 #ffffff40, 0 1px 2px #a336002e, 0 2px 8px #ff4f0026; color: #fff; font-weight: 600; text-shadow: 0 1px 0 #a3360030; }
.console .primary:hover, .auth-page .primary:hover, .app-error-report .primary:hover { background: #ff5410 linear-gradient(180deg, #ff6b2b, #f24d05); }
.console .primary:active, .auth-page .primary:active, .app-error-report .primary:active { background: #e04400; box-shadow: inset 0 1px 2px #a3360059; }
.console .outline { border-color: #f24a00; background: transparent; color: var(--tc-accent-text); font-weight: 600; }
.console .outline:hover { background: #fff4ee; }
.console .secondary { border-color: var(--tc-line-strong); background: var(--tc-module); }
.console .secondary:hover, .console .quiet:hover { background: var(--tc-hover); }
.console :is(input:not([type=submit]):not([type=checkbox]):not([type=radio]), textarea, .field select, .member-role-select),
.auth-page :is(input:not([type=submit]):not([type=checkbox]), textarea) { min-height: 40px; padding: 8px 12px; border-color: var(--tc-line-strong); border-radius: 8px; background: var(--tc-field); font-size: 15px; }
.console :is(input, textarea, select):focus, .auth-page :is(input, textarea):focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px #1c1b1914; }
.auth-page .flash { display: flex; align-items: flex-start; gap: 8px; border-color: var(--border); background: var(--surface); color: var(--ink); }
.auth-page .flash .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--tc-accent-text); }
.auth-page .flash.flash-error .icon { color: var(--danger); }
/* Notes sit at the bottom of the sidebar (or at the top of a panel), as a line with a symbol, not a box. */
.sidebar-flash { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 4px 0; }
.sidebar-flash:empty { display: none; }
.sidebar-flash .flash { margin: 0; }
.flash-undo-form { display: inline; margin: 0 0 0 auto; }
.flash-undo { padding: 0 2px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: underline; cursor: pointer; }
.console .flash, .console .flash.flash-error { display: flex; align-items: flex-start; gap: 8px; width: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: 12px; line-height: 1.5; }
.console .flash > span { min-width: 0; overflow-wrap: anywhere; }
.console .flash .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--tc-accent-text); }
.console .flash.flash-error, .console .flash.flash-error .icon { color: var(--danger); }
/* One flat content side: the tool, the prompt, the chat, and the side panel share the canvas; lines separate them. */
.console .main-content, .console .build-preview-pane, .console .build-preview-pane iframe { background: var(--surface); }
.console .preview-update-note { border-color: var(--tc-accent); background: var(--tc-accent); color: var(--ink); font-weight: 700; }
.console .app-panel-tab { padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; }
.console .app-panel-tab:hover { background: var(--tc-hover); color: var(--ink); }
.console .app-panel-tab.active { background: var(--tc-hover); color: var(--ink); font-weight: 600; }
.console .member-list { background: var(--tc-module); box-shadow: var(--tc-shadow); }
.console .data-table-scroll { background: var(--tc-module); }
.console .data-table th { background: var(--tc-module); }
.console .development-done-check { background: var(--ink); color: var(--surface); }
.console .development-working-spinner { border-color: var(--border); border-top-color: var(--tc-accent); border-right-color: var(--tc-accent); }
.console .development-request[data-status="succeeded"] .development-activity-heading { color: var(--ink); }

/* The chat is the prompt's output: a lighter print of the same console. The request echoes as "› words" on a faint
   wash of the prompt's own black with its accent rail, Claude's steps print as a mono log down a gutter, its answer
   lines up on that gutter, and the sheet warms toward the prompt at its foot. The prompt stays the loudest thing. */
.console .command-sheet { background: linear-gradient(to bottom, transparent calc(100% - 140px), color-mix(in srgb, var(--prompt-accent) 6%, transparent)); }
.console .command-sheet .development-topline { background: color-mix(in srgb, #1a1a1a 5%, var(--surface)); }
.console .command-sheet .development-history-label { font-size: 13px; color: #6b6963; }
.console .command-sheet .development-prompt { position: relative; margin: 4px 0 16px; padding: 10px 14px 8px 30px; border: 0; border-left: 3px solid var(--prompt-accent); border-radius: 2px 10px 10px 2px; background: color-mix(in srgb, #1a1a1a 7%, transparent); }
.console .command-sheet .development-prompt > .development-prompt-text::before { color: var(--prompt-accent); font-weight: 700; }
.console .command-sheet .development-prompt-meta { color: #75746e; }
.console .command-sheet .development-activity-heading { font-size: 12px; }
.console .command-sheet .development-current-live .development-activity-heading { color: var(--tc-accent-text); font-weight: 700; }
.console .command-sheet .development-progress ol { margin: 6px 0 4px 7px; padding-left: 16px; border-left: 1px dashed #d6d3cc; color: #75746e; font-family: var(--tc-mono); font-size: 11px; line-height: 1.55; }
.console .command-sheet .development-progress li { position: relative; }
.console .command-sheet .development-progress li + li { margin-top: 4px; }
.console .command-sheet .development-progress li::before { content: ""; position: absolute; left: -19.5px; top: .6em; width: 5px; height: 5px; border-radius: 1px; background: #bdbcb6; }
.console .command-sheet .development-progress-live li:last-child { color: #1a1a1a; font-size: 11px; font-weight: 700; }
.console .command-sheet .development-progress-live li:last-child::before { background: var(--prompt-accent); animation: command-pulse 1.2s ease-in-out infinite; }
.console .command-sheet .development-response { position: relative; margin: 14px 0 0; padding-left: 30px; }
.console .command-sheet .development-response::before { content: ""; position: absolute; left: 8px; top: .55em; width: 7px; height: 7px; border-radius: 2px; background: #1a1a1a; }
.console .command-sheet .development-response code { background: color-mix(in srgb, #1a1a1a 8%, transparent); }
@media (prefers-reduced-motion: reduce) { .console .command-sheet .development-progress-live li:last-child::before { animation: none; } }
/* Closed, that output is a readout tab on the prompt's top edge in the same wash, tucked under the prompt so the two
   read as one instrument. With nothing to show (only the Dev switch), there is no tab. */
.console .command-bar { z-index: 1; }
.console .command-output:has(> .command-output-lines > :not([hidden])), .console .command-dock > .command-card:not([hidden]) { margin: 0 12px -16px; padding-top: 7px; padding-bottom: 22px; border-radius: 10px 10px 0 0; background: color-mix(in srgb, #1a1a1a 5%, var(--surface)); }
.console .command-output:has(> .command-output-lines > :not([hidden])) { padding-right: 6px; }
/* Put away, there is no prompt to tuck under: the output is a card of its own above the ⚡ button. */
.console [data-prompt="closed"] :is(.command-output, .command-dock > .command-card):not([hidden]) { margin: 0 0 8px 8px; padding: 8px 6px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
}

/* An app's console (Profile → Apps → the app): General, History, Instances. */
.app-console { max-width: 790px; }
.app-console-section { display: flex; align-items: center; gap: 16px; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--border); }
.app-console-section p { margin: 0; color: var(--muted); font-size: 13px; }
.app-console-section form { flex: none; margin: 0; }
.app-console-delete .button { background: #fff; border-color: #dce2d8; color: var(--danger); }
.app-console-link { margin: 20px 0 0; font-size: 13px; color: var(--muted); }
.app-console-link a { font-weight: 600; color: var(--ink); }
.app-console-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.app-console-table th { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 400; text-align: left; }
.app-console-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.app-console-node a { font-weight: 600; }
.app-console-actions { white-space: nowrap; text-align: right; }
.app-console-actions form { display: inline-block; margin: 0 0 0 6px; }
.console .app-console-actions .button { min-height: 30px; padding: 0 12px; font-size: 13px; }
.app-console-actions .account-app-node-delete .button { background: #fff; border-color: #dce2d8; color: var(--danger); }
.app-console-first { margin-left: 8px; padding: 1px 6px; border-radius: 4px; background: var(--green-light); color: var(--muted); font-size: 11px; }
@media (max-width: 700px) { .app-console-section { flex-direction: column; align-items: flex-start; } }
.development-changes ol { list-style: none; margin: 0; padding: 0; }
.development-changes li { padding: 0; }
.development-change-entry { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; width: 100%; padding: 6px 6px; margin: 0 -6px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 13px; line-height: 1.4; text-align: left; cursor: pointer; }
.development-change-entry:hover { background: var(--green-light); }
.development-change-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--tc-module, #fff); color: var(--ink); box-shadow: 0 16px 40px #00000033; }
.development-change-dialog::backdrop { background: #1c1b1940; }
.development-change-dialog-body { position: relative; padding: 20px 22px 22px; overflow-y: auto; max-height: calc(100dvh - 34px); }
.development-change-dialog h2 { font-size: 15px; margin: 0 36px 4px 0; }
.development-change-dialog h3 { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px; }
.development-change-when { color: var(--muted); font-size: 12px; margin: 0; }
.development-change-prompt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.6; }
.development-change-dialog .development-page-reference { color: var(--muted); font-size: 11px; margin: 6px 0 0; }
.development-change-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; }
.development-change-close:hover { background: var(--green-light); color: var(--ink); }
.development-change-meta { display: flex; flex-direction: column; color: var(--muted); font-size: 11px; line-height: 1.3; padding-top: 2px; }
.development-change-meta small { font-size: 11px; overflow-wrap: anywhere; }
.development-change-text { overflow-wrap: anywhere; }
.development-change-response { overflow-wrap: anywhere; font-size: 13px; line-height: 1.6; }
.development-change-response p { margin: 6px 0; }
.development-change-response ul, .development-change-response ol { margin: 6px 0 8px; padding-left: 20px; }
.development-change-response li + li { margin-top: 3px; }
.development-change-response code { font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--green-light); }
/* A node's About: what the app is and where it stands. */
/* Developers only: the switch that takes the app out of use while its developers work on it. */
.app-about-availability { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
.app-about-availability h3 { margin: 0 0 4px; font-size: 14px; }
.app-about-availability p { max-width: 60ch; margin: 0; color: var(--muted); font-size: 13px; }
.app-about-availability form { flex: none; margin: 0; }
.app-about-switch { display: inline-flex; align-items: center; gap: 8px; padding: 4px 2px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.app-about-switch-track { position: relative; width: 34px; height: 20px; border-radius: 10px; background: #bdbcb6; transition: background .15s ease; }
.app-about-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.app-about-switch[aria-checked="true"] .app-about-switch-track { background: var(--ink); }
.app-about-switch[aria-checked="true"] .app-about-switch-knob { transform: translateX(14px); }
.app-about-switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.app-about-removed { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.app-about-removed p { max-width: 60ch; margin: 0 0 12px; }
.app-about { max-width: 790px; }
.app-about-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); font-size: 14px; }
.app-about-facts div { display: contents; }
.app-about-facts dt { color: var(--muted); }
.app-about-facts dd { margin: 0; overflow-wrap: anywhere; }
.app-about-console { margin: 22px 0 0; font-size: 13px; color: var(--muted); }
.app-about-console a { font-weight: 600; color: var(--ink); }