/* The client's own chrome: the tab bar, the failure surface, the console lists.
 *
 * Not a chassis and not a theme. This is the shell a chassis sits inside, and it reads the
 * same tokens — a client that wrote its own colours would be a client `tycho theme check`
 * had never looked at. Everything below uses `var(--…)` for exactly that reason.
 */
.app { min-height: 100vh; background: var(--ground); color: var(--ink);
       font-family: var(--font-ui); }
.tabs { display: flex; gap: 2px; align-items: center; padding: 10px 20px 0;
        max-width: 1100px; margin: 0 auto; flex-wrap: wrap; }
.tab { font: inherit; font-size: 12.5px; font-family: var(--font-data);
       letter-spacing: .06em; padding: 6px 12px; cursor: pointer;
       background: transparent; color: var(--ink-mute);
       border: var(--border) solid transparent; border-radius: var(--radius); }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--accent); border-color: var(--line); background: var(--surface); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.live { margin-left: auto; font-family: var(--font-data); font-size: 10.5px;
        color: var(--ink-faint); letter-spacing: .08em; }

.trouble { max-width: 1100px; margin: 14px auto; padding: 12px 15px;
           border: var(--border) solid var(--crit); border-radius: var(--radius);
           background: var(--surface); }
.trouble-code { font-family: var(--font-data); font-size: 11px; letter-spacing: .1em;
                color: var(--crit); text-transform: uppercase; }
.trouble p { margin: 6px 0 0; font-size: 13.5px; white-space: pre-wrap; }

/* `.list`, `.event`, `.empty` and `.missing` moved to the theme register: they are what the
   renderer's `list`, `row` and `missing` primitives emit, so they belong to the layer that
   styles primitives rather than to the console's own shell. They were here, and the day a
   wall started using the same primitives the two stylesheets began styling one element from
   two files with no scoping between them — which `TestOneDocumentOneNamespace` reported by
   name, having been written for exactly this after `.live` collapsed every slider. */
.raw { font-family: var(--font-data); font-size: 11.5px; color: var(--ink-mute);
       background: var(--surface-2); padding: 8px 10px; border-radius: var(--radius);
       overflow-x: auto; margin: 0 0 4px; }

/* A notice, and the offer to put it back. Both values side by side, because `plan_undo`
   refuses when the value has been superseded and the difference between the two is the whole
   reason that refusal exists. */
.notice { display: grid; gap: 4px 14px; padding: 11px 2px;
          grid-template-columns: 1fr auto; align-items: center;
          border-bottom: 1px solid var(--line); }
.notice-what { grid-column: 1; display: flex; gap: 9px; align-items: baseline;
               flex-wrap: wrap; }
.notice-what .rule { font-family: var(--font-data); font-size: 12.5px; color: var(--ink); }
.notice-values { grid-column: 1; display: flex; gap: 8px; align-items: baseline;
                 font-family: var(--font-data); font-size: 13px; }
.notice-values .was { color: var(--ink-faint); text-decoration: line-through; }
.notice-values .arrow { color: var(--ink-faint); }
.notice-act { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column;
              align-items: flex-end; gap: 4px; }
.notice-act .tab { border-color: var(--line); background: var(--surface);
                   color: var(--accent); }
.notice-act .asked { font-family: var(--font-data); font-size: 11px;
                     color: var(--ink-mute); max-width: 22rem; text-align: right;
                     white-space: pre-wrap; }