/* =============================================================================
   web/look.css: the premium look (web/look.mjs).

   Every rule but the menu's is under html[data-look='premium'], so the classic
   look is the room exactly as styles.css draws it. What changes is how the
   same controls and numbers are presented, in five moves the desktop apps
   share:

     1. Words in the interface face, not a terminal's. Labels are Geist Sans at
        reading weight; mono is kept for what IS code: ids, paths, commands,
        counts that line up.
     2. One ink for words and one colour for action. Text is a near-black (or
        near-white) and the teal is spent only on what can be pressed, what is
        selected and what is live.
     3. Fewer edges. A control has a border only when it is a field or the
        main action; the rest are ghost buttons that show a plate on hover.
     4. One bar. What a person reads at a glance stays in it; what they set
        once a week is behind the menu (look.mjs moves it there).
     5. Calm motion. 140ms colour and opacity, nothing that moves layout.

   Values come from the token block in styles.css, re-stated here only where
   the premium look takes a different decision for the same name.
   ============================================================================= */

/* ---- tokens ------------------------------------------------------------------ */

html[data-look='premium'] {
  --mark-claude: #d97757;
  --mark-codex: var(--ink);
  --look-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Daylight: the ink was the brand teal, which made every word and every
   control the same colour. Words are a green-black now, at three steps that
   each clear 4.5:1 on white; the teal is still the accent. */
html[data-look='premium'][data-theme='light'] {
  --void: #f3f2ee;
  --rack: #f7f6f3;
  --rack-2: #fcfbf9;
  --rack-3: #ffffff;
  --ink: #14201d;
  --ink-dim: #46534f;
  --ink-faint: #5f6d69;
  --rule: rgba(20, 32, 29, 0.08);
  --edge: rgba(20, 32, 29, 0.12);
  --edge-control: rgba(20, 32, 29, 0.2);
  --edge-hot: rgba(20, 32, 29, 0.38);
  --wash-1: rgba(20, 32, 29, 0.025);
  --wash-2: rgba(20, 32, 29, 0.05);
  --well-bg: rgba(20, 32, 29, 0.03);
  --field-bg: #ffffff;
  --surface-panel: #ffffff;
  --surface-bar: rgba(252, 251, 249, 0.92);
  --surface-inset: #fcfbf9;
  --surface-chip: rgba(255, 255, 255, 0.9);
  --surface-float: #ffffff;
  --shadow-1: 0 1px 2px rgba(20, 32, 29, 0.06), 0 1px 1px rgba(20, 32, 29, 0.03);
  --shadow-3: 0 24px 60px -24px rgba(20, 32, 29, 0.28), 0 8px 20px -12px rgba(20, 32, 29, 0.16);
  --wordmark-ink: #14201d;
  --mark-codex: #14201d;
}

html[data-look='premium'][data-theme='dark'] {
  --rule: rgba(255, 255, 255, 0.07);
  --edge: rgba(255, 255, 255, 0.12);
  --surface-panel: #0a231f;
  --surface-inset: #0b2622;
  --mark-codex: #e8f3ef;
}

/* ---- the face ------------------------------------------------------------------ */

html[data-look='premium'] .textured::after { opacity: 0; }

html[data-look='premium'] :is(
  .btn, .mini, .project-add, .operator-brief-button, .mailbox-button, .update-button,
  .production-safety, .coordinator-settings-submit, .seg button, .gauge-label,
  .rail-head h2, .col-rule > h2, .col-rule span, .pane-warn, .pill, .attention-text,
  .bay-label, .lane-name, .security-name, .field > span, .link-label, .project-focus-label,
  .empty-title, .coordinator-setting span, .pane-acts button, .check span, .screens-badge,
  .coordinator-pause, .project-paused-act, .coordinator-setting small, .toast-act, #btn-send, #btn-broadcast,
  .usage-card-open, .gauge-value, .tally-item, .project-focus-select
) {
  font-family: var(--ui);
  letter-spacing: 0;
  text-transform: none;
}

html[data-look='premium'] .usage-card-open {
  height: var(--ctl-h);
  padding: 0 var(--sp-3);
  border-color: var(--edge);
  font-size: var(--fs-md);
  font-weight: 500;
  text-transform: capitalize;
}

/* Buttons and headings are names, so they take a capital; data never does. */
html[data-look='premium'] :is(
  .btn, .mini, .project-add, .operator-brief-button, .mailbox-button, .update-button,
  .production-safety, .coordinator-settings-submit, .seg button, .rail-head h2,
  .col-rule > h2, .pill, .attention-text, .bay-label, .link-label, .empty-title,
  .pane-acts button, .project-focus-label, .lane-name, .security-name
)::first-letter {
  text-transform: uppercase;
}

html[data-look='premium'] :is(.btn, .operator-brief-button, .mailbox-button, .update-button, .production-safety, .seg button) {
  text-transform: capitalize;
}

/* ---- controls ---------------------------------------------------------------- */

html[data-look='premium'] .btn {
  height: var(--ctl-h);
  padding: 0 var(--sp-3);
  border-color: transparent;
  color: var(--ink-dim);
  font-size: var(--fs-md);
  font-weight: 500;
  transition: color 140ms var(--look-ease), background 140ms var(--look-ease), border-color 140ms var(--look-ease), transform 140ms var(--look-ease);
}

html[data-look='premium'] .btn:not(:disabled):hover { color: var(--ink); background: var(--wash-2); border-color: transparent; }
html[data-look='premium'] .btn-quiet[aria-pressed='true'] { color: var(--ink); background: var(--wash-2); border-color: var(--edge); }

html[data-look='premium'] :is(.btn-cta, .btn-go) {
  border-color: transparent;
  background: var(--teal);
  color: var(--on-accent);
  box-shadow: var(--shadow-1);
}

html[data-look='premium'] :is(.btn-cta, .btn-go):not(:disabled):hover { background: var(--teal-hot); color: var(--on-accent); }
html[data-look='premium'] .btn-cta::before { content: '+' / ''; margin-right: var(--sp-1h); font-size: var(--fs-lg); font-weight: 400; }

html[data-look='premium'] .btn-warn { color: var(--amber); }
html[data-look='premium'] .btn-warn:not(:disabled):hover { color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent); }

/* A segmented control is a track with one raised thumb, not a row of teal. */
html[data-look='premium'] .seg {
  border-color: transparent;
  background: var(--wash-2);
}

html[data-look='premium'] .seg button {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink-dim);
  transition: color 140ms var(--look-ease), background 140ms var(--look-ease), box-shadow 140ms var(--look-ease);
}

html[data-look='premium'] .seg button:hover { background: transparent; color: var(--ink); }

html[data-look='premium'] .seg button.is-on,
html[data-look='premium'] .seg button[aria-pressed='true'] {
  background: var(--rack-3);
  color: var(--ink);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--edge);
}

html[data-look='premium'][data-theme='dark'] .seg button.is-on,
html[data-look='premium'][data-theme='dark'] .seg button[aria-pressed='true'] { background: var(--rack-3); }

html[data-look='premium'] :is(.cmd-input, .target, .field input, .field textarea, .field select, .coordinator-setting input) {
  border-color: var(--edge);
}

html[data-look='premium'] :is(.cmd-input, .field input, .field textarea):focus {
  border-color: var(--accent-line-hot);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ---- the bar ------------------------------------------------------------------- */

html[data-look='premium'] .topbar {
  column-gap: var(--sp-2);
  row-gap: var(--sp-1h);
  min-height: calc(var(--head-h) + var(--sp-1));
  padding: var(--sp-1h) var(--sp-3);
  border-color: var(--rule);
  box-shadow: var(--shadow-1);
}

html[data-look='premium'] .topbar-gap { display: none; }
html[data-look='premium'] .brand { order: 0; margin-right: var(--sp-2); }
html[data-look='premium'] .brand-room { display: none; }
html[data-look='premium'] .brand-name { font-size: var(--fs-xl); }

/* The open projects sit beside the name, as tabs do in a browser. */
html[data-look='premium'] .project-tabs { order: 1; flex: 0 1 auto; }
html[data-look='premium'] .project-tab { border-color: transparent; border-bottom-width: 1px; background: transparent; }
html[data-look='premium'] .project-tab:hover { background: var(--wash-2); }
html[data-look='premium'] .project-tab[data-active='1'] { border-color: var(--edge); background: var(--rack-3); box-shadow: var(--shadow-1); }
html[data-look='premium'] .project-tab-main { height: var(--ctl-h); font-size: var(--fs-md); font-weight: 500; }
html[data-look='premium'] .project-tab-workers { font-variant-numeric: tabular-nums; }

html[data-look='premium'] .screens { order: 2; margin-inline: auto; }
html[data-look='premium'] .screens button { padding: 0 var(--sp-3); }

html[data-look='premium'] :is(.link, .access-warning, .production-safety, .attention, .operator-brief-button, .mailbox-button, .update-button) { order: 3; }
html[data-look='premium'] :is(.usage-strip, #gauge-slots, .tally) { order: 4; }
html[data-look='premium'] #btn-new { order: 5; }
html[data-look='premium'] .look-more-wrap { order: 6; }

/* Live is a dot; the word is only worth its room when something is wrong. */
html[data-look='premium'] .link { gap: var(--sp-1h); padding: 0 var(--sp-1); }
html[data-look='premium'] .link[data-link='live'] .link-label { color: var(--ink-faint); font-size: var(--fs-sm); }

html[data-look='premium'] .production-safety {
  height: var(--ctl-h);
  padding: 0 var(--sp-2h);
  font-size: var(--fs-md);
  font-weight: 500;
}

html[data-look='premium'] :is(.operator-brief-button, .mailbox-button) {
  height: var(--ctl-h);
  gap: var(--sp-1h);
  padding: 0 var(--sp-2h);
  border-color: transparent;
  background: transparent;
  color: var(--ink-dim);
  font-size: var(--fs-md);
  font-weight: 500;
}

html[data-look='premium'] :is(.operator-brief-button, .mailbox-button):hover { background: var(--wash-2); color: var(--ink); }
html[data-look='premium'] :is(.operator-brief-button, .mailbox-button) .attention-count {
  min-width: 18px;
  padding: 0 var(--sp-1);
  border-radius: var(--radius-sm);
  background: var(--wash-2);
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 18px;
  text-align: center;
}

html[data-look='premium'] :is(.operator-brief-button, .mailbox-button)[data-alert='true'] .attention-count { background: var(--amber); color: var(--on-warn); }
html[data-look='premium'] :is(.operator-brief-button, .mailbox-button) .attention-text { font-size: var(--fs-md); font-weight: 500; }

/* An icon for each, and at zero the icon alone: the name is on its hover and
   its count comes back with the first thing to count (look.mjs data-count). */
html[data-look='premium'] :is(.operator-brief-button, .mailbox-button)::before {
  content: '';
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--look-icon) center / contain no-repeat;
  mask: var(--look-icon) center / contain no-repeat;
}

html[data-look='premium'] .operator-brief-button {
  --look-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E");
}

html[data-look='premium'] .mailbox-button {
  --look-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z'/%3E%3C/svg%3E");
}

html[data-look='premium'] :is(.operator-brief-button, .mailbox-button)[data-count='0'] { width: var(--ctl-h); padding: 0; color: var(--ink-faint); }
html[data-look='premium'] :is(.operator-brief-button, .mailbox-button)[data-count='0'] :is(.attention-count, .attention-text) { display: none; }

/* Usage: each pool is its name and what is left. The pools are a group of
   their own in the bar: a wider gap on either side than between the icons,
   and a wider one between pools than inside one, so "Claude Code · Max 5h
   64% left" and "Codex · ChatGPT 1w 21% left" read as two readings, not one
   run of words. */
html[data-look='premium'] .usage-strip { gap: var(--sp-4); margin: 0 var(--sp-2); border: 0; background: transparent; padding: 0; }
html[data-look='premium'] .usage-pool { width: auto; gap: 0 var(--sp-1h); font-size: var(--fs-sm); }
html[data-look='premium'] .usage-pool b { font-family: var(--ui); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
html[data-look='premium'] .usage-pool em { font-family: var(--ui); font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-look='premium'] .usage-cost { font-family: var(--ui); font-size: var(--fs-sm); color: var(--ink-faint); }
/* The bar shows what is known (Kevin, 7 November 2026): a pool or a spend the
   daemon cannot read yet says "unknown", which is nothing to read at a glance.
   It is still on its hover in classic and in the usage card. */
html[data-look='premium'] :is(.usage-pool[data-state='unavailable'], .usage-pool[data-headroom='unknown'], .usage-cost[data-state='unavailable']) { display: none; }

/* The percentage says what the meter drew; the meter is the one that goes. */
html[data-look='premium'] .usage-pool i { display: none; }
/* Centred on the bar's row like every control beside it. A pool keeps the
   room's 28px box, and on a baseline its words sat at the top of it, higher
   than "Live" and the Safety button next door. */
html[data-look='premium'] .usage-pool { display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; }

html[data-look='premium'] #gauge-slots { gap: var(--sp-1h); }
html[data-look='premium'] #gauge-slots .gauge-bar { inline-size: 32px; }
html[data-look='premium'] .tally { font-family: var(--ui); font-size: var(--fs-sm); }
html[data-look='premium'] #gauge-slots .gauge-label { color: var(--ink-faint); font-size: var(--fs-sm); font-weight: 500; }
html[data-look='premium'] #gauge-slots .gauge-value { font-variant-numeric: tabular-nums; }

/* ---- the stage ------------------------------------------------------------------ */

html[data-look='premium'] .shell { gap: var(--sp-2); padding: var(--sp-2); }

html[data-look='premium'] :is(.col, .rail-block, .pane, .kcol, .dock-panel, .commandbar, .deck-bar) {
  border-color: var(--rule);
  border-radius: var(--radius-lg);
}

html[data-look='premium'] .col-rule {
  min-height: var(--bar-h);
  font-size: var(--fs-md);
  background: transparent;
}

html[data-look='premium'] .col-rule::after { display: none; }
html[data-look='premium'] .col-rule > h2 { color: var(--ink); font-size: var(--fs-md); font-weight: 600; }
html[data-look='premium'] .coordinator-setting :is(span, small) { color: var(--ink-faint); font-size: var(--fs-sm); font-weight: 500; }

html[data-look='premium'] .rail-head { background: transparent; border-bottom-color: var(--rule); }
html[data-look='premium'] .rail-head h2 { color: var(--ink); font-size: var(--fs-md); font-weight: 600; }
html[data-look='premium'] .rail-note { font-family: var(--ui); font-size: var(--fs-sm); }
html[data-look='premium'] :is(.lane-name, .security-name) { color: var(--ink); font-size: var(--fs-md); font-weight: 500; }

html[data-look='premium'] .empty-coordinator { border-style: solid; border-color: var(--rule); background: var(--surface-inset); }
html[data-look='premium'] .empty-title { color: var(--ink); font-size: var(--fs-lg); font-weight: 600; }
html[data-look='premium'] :is(.bay, .bay.is-empty) { border-style: dashed; border-color: var(--edge); }
html[data-look='premium'] .bay:hover { border-color: var(--accent-line); background: var(--accent-wash); }
html[data-look='premium'] .bay-label { color: var(--ink-dim); font-size: var(--fs-md); font-weight: 500; }

/* ---- a pane ------------------------------------------------------------------- */

html[data-look='premium'] .pane { background: var(--surface-panel); transition: border-color 140ms var(--look-ease), box-shadow 140ms var(--look-ease); }
html[data-look='premium'] .pane.is-focused { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-wash); }
html[data-look='premium'] .pane-edge { display: none; }

html[data-look='premium'] .pane-head {
  gap: var(--sp-2);
  padding: var(--sp-1h) var(--sp-2) var(--sp-1h) var(--sp-3);
  background: transparent;
  border-bottom-color: var(--rule);
}

html[data-look='premium'] .pane.is-focused .pane-head { background: transparent; }
html[data-look='premium'] .pane.is-focused .pane-id::before { content: none; }

/* Which CLI, as a mark; the word is still there for a screen reader. */
html[data-look='premium'] .pane-mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: var(--ink-faint);
  -webkit-mask: var(--pane-mark) center / contain no-repeat;
  mask: var(--pane-mark) center / contain no-repeat;
  --pane-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M7 10l3 2-3 2M12 15h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

html[data-look='premium'] .pane[data-kind='claude'] .pane-mark {
  background: var(--mark-claude);
  --pane-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4'/%3E%3C/g%3E%3C/svg%3E");
}

html[data-look='premium'] .pane[data-kind='codex'] .pane-mark {
  background: var(--mark-codex);
  --pane-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l8 4.6v9.2l-8 4.6-8-4.6V7.4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8.5 10l2.5 2-2.5 2M12.5 14.5h3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

html[data-look='premium'] .pane-kind {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html[data-look='premium'] .pane-id { color: var(--ink); font-family: var(--mono); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Shared folder and the run's safety mode, as marks; their words are on hover
   and still read out (font-size 0 hides glyphs, not text). */
html[data-look='premium'] :is(.pane-warn, .pane-safety) {
  flex: 0 0 auto;
  width: var(--dot);
  height: var(--dot);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

html[data-look='premium'] .pane-warn { color: var(--amber); }
html[data-look='premium'] .pane-warn[hidden] { display: none; }

@container (max-width: 560px) {
  html[data-look='premium'] .pane-cwd { display: none; }
}

/* Chat or Terminal, as two icons in one track. */
html[data-look='premium'] .pane-views button {
  width: var(--ctl-h-sm);
  padding: 0;
  font-size: 0;
}

html[data-look='premium'] .pane-views button::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  margin: auto;
  background: currentColor;
  -webkit-mask: var(--view-icon) center / contain no-repeat;
  mask: var(--view-icon) center / contain no-repeat;
}

html[data-look='premium'] .pane-views [data-view='chat'] {
  --view-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.9A8 8 0 1 1 21 12z'/%3E%3C/svg%3E");
}

html[data-look='premium'] .pane-views [data-view='terminal'] {
  --view-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cpath d='M7 10l3 2.5L7 15M12.5 15.5H17'/%3E%3C/svg%3E");
}

html[data-look='premium'] .pane-headline {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-dim);
  font-size: var(--fs-md);
}

html[data-look='classic'] .pane-headline,
html:not([data-look]) .pane-headline,
html[data-look='classic'] .pane-mark { display: none; }

html[data-look='premium'] .pane-cwd {
  max-width: 14ch;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}

html[data-look='premium'] .pane-gap { flex: 0 0 0; }

/* The run's safety mode, as a dot with its words beside it on hover. */
html[data-look='premium'] .pane-safety {
  padding: 0 var(--sp-1h);
  border-color: transparent;
  font-family: var(--ui);
  font-size: var(--fs-xs);
  opacity: 0.85;
}

html[data-look='premium'] .pill {
  height: var(--pill-h);
  padding: 0 var(--sp-2);
  border-color: transparent;
  background: var(--wash-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}

html[data-look='premium'] .pane[data-state='working'] .pill { background: var(--accent-tint); color: var(--teal); }
html[data-look='premium'] .pane[data-state='awaiting-input'] .pill { background: var(--amber); color: var(--on-warn); }
html[data-look='premium'] .pane[data-state='idle'] .pill { color: var(--ink-dim); }

/* The actions are there when the pointer or the keyboard is. */
html[data-look='premium'] .pane-acts { gap: var(--sp-h); }

html[data-look='premium'] .pane-acts button {
  height: var(--pill-h);
  padding: 0 var(--sp-2);
  border-color: transparent;
  background: transparent;
  color: var(--ink-faint);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color 140ms var(--look-ease), background 140ms var(--look-ease), opacity 140ms var(--look-ease);
}

html[data-look='premium'] .pane-acts button:hover { color: var(--ink); background: var(--wash-2); border-color: transparent; }
html[data-look='premium'] .pane-acts button[data-act='kill']:hover { color: var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); border-color: transparent; }

html[data-look='premium'] .pane:not(:hover):not(:focus-within) .pane-acts button:not([data-armed='1']) { opacity: 0; }

/* The terminal's own bar under it, quieter; in the Chat view the composer is
   the foot, and the session's numbers are on the state chip's hover. */
html[data-look='premium'] .pane-foot { font-family: var(--ui); font-size: var(--fs-sm); background: transparent; }
html[data-look='premium'] .pane[data-view='chat'] .pane-foot { display: none; }
html[data-look='premium'] .pane-term { background: var(--rack-2); }

/* ---- the command bar ------------------------------------------------------------- */

html[data-look='premium'] .commandbar { padding: var(--sp-2) var(--sp-3); }
html[data-look='premium'] .target { border-color: transparent; background: var(--wash-2); }
html[data-look='premium'] .cmd-input { font-family: var(--ui); font-size: var(--fs-base); }
html[data-look='premium'] .hint { font-family: var(--ui); color: var(--ink-faint); }

/* ---- the board, files and dialogs: the same face ------------------------------------ */

html[data-look='premium'] :is(.dlg, .ticket) { border-color: var(--rule); box-shadow: var(--shadow-3); }
html[data-look='premium'] .kcol-head { background: transparent; }

/* The board's counts: a quiet chip with its number first. */
html[data-look='premium'] .chip {
  border-color: transparent;
  background: var(--wash-2);
  font-family: var(--ui);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

html[data-look='premium'] .chip b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
html[data-look='premium'] .chip:hover { background: var(--wash-2); border-color: var(--edge); }
html[data-look='premium'] .chip.is-on { border-color: var(--accent-line); background: var(--accent-tint); color: var(--ink); }
html[data-look='premium'] .scope { border-color: var(--edge); }
html[data-look='premium'] .scope-input { font-family: var(--ui); }

/* ---- Secrets, the app (web/vault-ui.mjs, vault.css) -------------------------------------
   The app Fractal's Secrets window shows. In a window or a phone it is one
   column, list then item; given the room (760px of its own width) it is a
   manager, the list beside the item, so choosing one never hides the rest.
   The list is grouped by what each item is, and each kind has its own mark. */

html[data-look='premium'] .vault-app { container-type: inline-size; }
html[data-look='premium'] .vault-toolbar { padding: var(--sp-2) var(--sp-5); }
html[data-look='premium'] .vault-project select { font-weight: 500; color: var(--ink); }
html[data-look='premium'] .vault-list-heading { margin-bottom: var(--sp-3); }
html[data-look='premium'] .vault-list-heading h1 { font-size: var(--fs-xl); letter-spacing: -0.01em; }
html[data-look='premium'] .vault-count { border: 0; background: var(--wash-2); }

html[data-look='premium'] .vault-search { height: 36px; border-color: transparent; background: var(--wash-2); }
html[data-look='premium'] .vault-search-wrap > svg { top: 10px; }
html[data-look='premium'] .vault-search:focus-visible { outline: none; border-color: var(--teal); background: var(--field-bg); box-shadow: 0 0 0 3px var(--accent-glow); }

html[data-look='premium'] .vault-group {
  display: flex;
  align-items: center;
  gap: var(--sp-1h);
  margin: var(--sp-3) var(--sp-2h) var(--sp-1);
  color: var(--ink-faint);
  font-size: var(--fs-sm);
  font-weight: 500;
}

html[data-look='premium'] .vault-group:first-child { margin-top: var(--sp-1); }
html[data-look='premium'] .vault-group-count { font-variant-numeric: tabular-nums; }

html[data-look='premium'] .vault-item { gap: var(--sp-2h); padding: var(--sp-2) var(--sp-2h); margin-bottom: var(--sp-h); border-radius: var(--radius); }
html[data-look='premium'] .vault-item:hover { border-color: transparent; background: var(--wash-2); }
html[data-look='premium'] .vault-item[aria-pressed='true'] { background: var(--accent-tint); }
html[data-look='premium'] .vault-item-caption strong { font-size: var(--fs-base); font-weight: 600; }
html[data-look='premium'] .vault-item-caption small { color: var(--ink-faint); font-size: var(--fs-md); }

/* A kind's colour, set on the row or the heading and read by its mark. Stated
   on .vault-item .vault-monogram so it outranks vault.css's rotation of three
   colours by position, which painted the same kind three ways. */
html[data-look='premium'] :is(.vault-item, .vault-record-heading)[data-kind='http'] { --kind: var(--teal); }
html[data-look='premium'] :is(.vault-item, .vault-record-heading)[data-kind='aws'] { --kind: var(--amber); }
html[data-look='premium'] :is(.vault-item, .vault-record-heading)[data-kind='git'] { --kind: var(--blue); }
html[data-look='premium'] :is(.vault-item, .vault-record-heading)[data-kind='login'] { --kind: var(--plum); }

html[data-look='premium'] .vault-item .vault-monogram,
html[data-look='premium'] .vault-record-heading .vault-record-icon {
  background: color-mix(in srgb, var(--kind, var(--slate)) 14%, transparent);
  color: var(--kind, var(--slate));
}

html[data-look='premium'] .vault-item .vault-monogram { width: 32px; height: 32px; border-radius: var(--radius); font-size: var(--fs-lg); }

html[data-look='premium'] .vault-fields { background: var(--surface-inset); }
html[data-look='premium'] .vault-field-display dt,
html[data-look='premium'] .vault-field-label { color: var(--ink-faint); font-weight: 500; }
html[data-look='premium'] :is(.vault-agent-use, .vault-preview) { background: var(--surface-inset); }
html[data-look='premium'] .vault-button { border-color: var(--edge); background: transparent; }
html[data-look='premium'] .vault-button:hover { background: var(--wash-2); border-color: var(--edge); }
html[data-look='premium'] .vault-primary { border-color: transparent; background: var(--teal); box-shadow: var(--shadow-1); }
html[data-look='premium'] .vault-primary:hover { background: var(--teal-hot); }
html[data-look='premium'] :is(.vault-quiet, .vault-danger) { border-color: transparent; }
html[data-look='premium'] .vault-security { color: var(--ink-faint); }

@container (min-width: 760px) {
  html[data-look='premium'] .vault-body { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
  html[data-look='premium'] .vault-app .vault-sidebar { display: flex; padding: var(--sp-4) var(--sp-3) 0 var(--sp-4); border-inline-end: 1px solid var(--rule); }
  html[data-look='premium'] .vault-app .vault-detail { display: block; padding: var(--sp-4) var(--sp-5) 0; }
  html[data-look='premium'] .vault-app .vault-detail > * { max-width: 44rem; }
  html[data-look='premium'] .vault-back { display: none; }
  html[data-look='premium'] .vault-record-heading { margin-top: var(--sp-2); }
  /* Nothing chosen: the room says what it is for. */
  html[data-look='premium'] .vault-detail:empty {
    display: grid;
    place-items: center;
    color: var(--ink-faint);
    font-size: var(--fs-base);
  }
  html[data-look='premium'] .vault-detail:empty::before { content: 'Choose an item to see it here, or add a new one.'; }
}

/* ---- Secrets, the control room's dialog ------------------------------------------------------- */

html[data-look='premium'] :is(.secret-add-head, .secret-add-cap, .secret-field > span) {
  color: var(--ink-faint);
  font-family: var(--ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

html[data-look='premium'] :is(.secret-add-cap, .secret-field > span) { display: block; }
html[data-look='premium'] :is(.secret-add-head, .secret-add-cap, .secret-field > span, .secret-add-scope)::first-letter { text-transform: uppercase; }
html[data-look='premium'] .secret-add-scope { flex-basis: auto; font-family: var(--ui); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; text-transform: none; }
html[data-look='premium'] .secret-add-state { font-family: var(--ui); font-size: var(--fs-md); }
/* The kinds are names of protocols and services, so they keep their capitals. */
html[data-look='premium'] .secret-add .seg-wrap button { font-size: var(--fs-sm); letter-spacing: 0.02em; text-transform: uppercase; }
html[data-look='premium'] .secret-add-head { color: var(--ink); font-size: var(--fs-md); font-weight: 600; }
html[data-look='premium'] .secret-add { border-top-color: var(--rule); background: var(--surface-inset); }
html[data-look='premium'] :is(.secret-add input, .secret-add-foot select, .secrets-search .scope-input, .secrets-search) { font-family: var(--ui); border-color: var(--edge); }
html[data-look='premium'] .seg-wrap { border-color: transparent; background: var(--wash-2); }
html[data-look='premium'] .seg-wrap button { border-color: transparent; }
html[data-look='premium'] .seg-wrap button.is-on { background: var(--rack-3); color: var(--ink); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--edge); }
html[data-look='premium'] .mini { font-family: var(--ui); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ---- the menu (both looks: classic keeps it for the look switch) ------------------------- */

.look-more-wrap { position: relative; display: inline-flex; order: 6; }

.look-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ctl-h);
  height: var(--ctl-h);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.look-more:hover,
.look-more[aria-expanded='true'] { background: var(--wash-2); color: var(--ink); }

.look-more svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

.look-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--sp-1h));
  inset-inline-end: 0;
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: max-content;
  min-width: 300px;
  max-width: min(440px, 92vw);
  max-height: min(78vh, 640px);
  overflow: auto;
  padding: var(--sp-2);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--surface-float);
  box-shadow: var(--shadow-3);
}

.look-menu[hidden] { display: none; }
.look-menu[data-align='start'] { inset-inline-start: 0; inset-inline-end: auto; }

/* In the classic bar it sits with the other settings, at the end of the second tier. */
html[data-look='classic'] .look-more-wrap { order: 3; }

.look-menu-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1h);
  padding: var(--sp-2) var(--sp-2);
}

.look-menu-section + .look-menu-section { border-top: 1px solid var(--rule); }
.look-menu-section[hidden] { display: none; }

.look-menu-title {
  color: var(--ink-faint);
  font-family: var(--ui);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.look-menu-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1h) var(--sp-2);
}

/* What moved in keeps working as it did in the bar; it is laid out as a list here. */
.look-menu .fractal-runtime,
.look-menu .project-focus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1h);
  order: initial;
  margin: 0;
}

.look-menu :is(#density-seg, #btn-mute, #theme-seg, #btn-rail, #btn-usage-card) { order: initial; }
.look-seg { align-self: flex-start; }

/* Subscriptions (web/accounts.mjs): its button beside the usage strip it
   opens, and its headings in the interface face. */
html[data-look='premium'] #btn-accounts { order: 4; }
html[data-look='premium'] .accounts-kind h3 { font-family: inherit; font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; color: var(--ink); }