/*
 * The components every board is drawn with. A state is markup built from
 * these classes; a state that differs only in one part says so with a
 * modifier class instead of new styles.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 40px;
  background: #E9E9E4;
  font-family: var(--font-ui);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* ---- Brand (spec/brand.md) --------------------------------------------- */

/* 辞达 with the accent caret after it: 0.8 em tall, 1.5 wide, a little low. */
.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-brand);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-secondary);
}
.wordmark::after {
  content: "";
  width: 1.5px;
  height: 9.6px;
  background: var(--accent);
  transform: translateY(0.72px);
}

/* The app icon as the system draws it without Liquid Glass: the paper tile,
 * then the ink and caret layers of Resources/AppIcon.icon. */
.app-icon {
  position: relative;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  border-radius: 22.5%;
  background: var(--surface-paper);
  box-shadow: 0 0 0 1px var(--border);
}
.app-icon img { position: absolute; inset: 0; width: 100%; height: 100%; }

.brand-icons, .brand-menubars, .brand-wordmarks { display: flex; align-self: flex-start; align-items: center; gap: 32px; }
.brand-wordmarks .footer { padding-top: 0; }

.menubar {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 280px;
  height: 24px;
  padding: 0 12px;
  justify-content: flex-end;
  border-radius: 6px;
  background: #F2F2F0;
  font-size: 13px;
  font-weight: 500;
  color: #000000;
}
.status-mark { position: relative; width: 18px; height: 18px; }
.status-mark img { position: absolute; inset: 0; width: 18px; height: 18px; }
.status-mark.breathing img + img { opacity: var(--motion-cursor-opacity-min); }
.menubar.dark { background: #2A2A28; color: #FFFFFF; }
.menubar.dark img { filter: invert(1); }

/* ---- Boards ---------------------------------------------------------- */

.board {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: fit-content;
  padding: 28px;
  border-radius: 16px;
  background: #F1F1ED;
}

.board-title { font-size: 14px; font-weight: 600; }

.caption {
  max-width: 1200px;
  font-size: var(--font-size-label);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary);
}

.board > .divider { height: 1px; background: var(--border); }

.state-label { font-size: 12px; font-weight: 600; }

.states-grid {
  display: grid;
  grid-template-columns: repeat(2, 560px);
  gap: 40px;
  align-items: start;
}

.states-grid > figure { margin: 0; display: flex; flex-direction: column; gap: 9px; }

/* ---- Icons ------------------------------------------------------------
 * Lucide, inlined because mask images are fetched with CORS, which file://
 * pages cannot satisfy. The app bundles the same files in
 * Sources/Cida/Resources/Icons. */

.icon {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask-image: var(--icon);
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}
.icon-copy { --icon: url("data:image/svg+xml;utf8,<svg 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'><rect width='14' height='14' x='8' y='8' rx='2' ry='2'/><path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/></svg>"); }
.icon-check { --icon: url("data:image/svg+xml;utf8,<svg 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'><path d='M20 6 9 17l-5-5'/></svg>"); }
.icon-image { --icon: url("data:image/svg+xml;utf8,<svg 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'><rect width='18' height='18' x='3' y='3' rx='2' ry='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/></svg>"); }
.icon-info { --icon: url("data:image/svg+xml;utf8,<svg 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'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>"); }
.icon-circle-stop { --icon: url("data:image/svg+xml;utf8,<svg 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'><circle cx='12' cy='12' r='10'/><rect x='9' y='9' width='6' height='6' rx='1'/></svg>"); }
.icon-circle-alert { --icon: url("data:image/svg+xml;utf8,<svg 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'><circle cx='12' cy='12' r='10'/><line x1='12' x2='12' y1='8' y2='12'/><line x1='12' x2='12.01' y1='16' y2='16'/></svg>"); }
.icon-chevron-down { --icon: url("data:image/svg+xml;utf8,<svg 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'><path d='m6 9 6 6 6-6'/></svg>"); }
.icon-timer { --icon: url("data:image/svg+xml;utf8,<svg 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'><line x1='10' x2='14' y1='2' y2='2'/><line x1='12' x2='15' y1='14' y2='11'/><circle cx='12' cy='14' r='8'/></svg>"); }
.icon-sparkles { --icon: url("data:image/svg+xml;utf8,<svg 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'><path d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z'/><path d='M20 2v4'/><path d='M22 4h-4'/><circle cx='4' cy='20' r='2'/></svg>"); }
.icon-languages { --icon: url("data:image/svg+xml;utf8,<svg 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'><path d='m5 8 6 6'/><path d='m4 14 6-6 2-3'/><path d='M2 5h12'/><path d='M7 2h1'/><path d='m22 22-5-10-5 10'/><path d='M14 18h6'/></svg>"); }
.icon-keyboard { --icon: url("data:image/svg+xml;utf8,<svg 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'><path d='M10 8h.01'/><path d='M12 12h.01'/><path d='M14 8h.01'/><path d='M16 12h.01'/><path d='M18 8h.01'/><path d='M6 8h.01'/><path d='M7 16h10'/><path d='M8 12h.01'/><rect width='20' height='16' x='2' y='4' rx='2'/></svg>"); }
.icon-sliders-horizontal { --icon: url("data:image/svg+xml;utf8,<svg 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'><line x1='21' x2='14' y1='4' y2='4'/><line x1='10' x2='3' y1='4' y2='4'/><line x1='21' x2='12' y1='12' y2='12'/><line x1='8' x2='3' y1='12' y2='12'/><line x1='21' x2='16' y1='20' y2='20'/><line x1='12' x2='3' y1='20' y2='20'/><line x1='14' x2='14' y1='2' y2='6'/><line x1='8' x2='8' y1='10' y2='14'/><line x1='16' x2='16' y1='18' y2='22'/></svg>"); }

/* ---- Panel (spec/panel.md §二, §七) ----------------------------------- */

.panel {
  display: flex;
  flex-direction: column;
  width: var(--panel-width);
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--panel-edge), var(--panel-shadow);
}

.source {
  padding: var(--space-pane-y) var(--space-window-x);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 26px;
  min-height: 63px;
  color: var(--text-primary);
}
.source .placeholder { color: var(--text-tertiary); }
.source .selected { background: var(--accent-soft); }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--control-bar-height);
  padding: 0 var(--space-window-x);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.bar .action-group { display: flex; align-items: center; gap: 8px; }
.bar.processing .seg,
.bar.processing .tab-hint { opacity: 0.45; }

.seg {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-seg);
  background: var(--surface-dim);
}
.seg span {
  padding: 4px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-seg-item);
  font-size: var(--font-size-label);
  font-weight: 500;
  line-height: 14px;
  color: var(--text-secondary);
}
.seg span.on {
  border-color: var(--border);
  background: var(--surface);
  font-weight: 600;
  color: var(--accent);
}

.tab-hint { font-size: var(--font-size-caption); color: var(--text-tertiary); }

/* spec/panel.md §三: 翻译's object, the foreign language, inside the selected segment. */
.seg span.on .object {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-weight: 500;
  color: var(--text-secondary);
}
.seg span.on .object.editing { box-shadow: 0 1px 0 var(--text-tertiary); color: var(--text-primary); }
.seg span.on .object .fading,
.seg span.on .object .pending { padding: 0; border: 0; }
.seg span.on .object .fading { color: var(--text-tertiary); filter: blur(calc(var(--motion-blur-char-px) * 0.5px)); }
.seg span.on .object .pending { visibility: hidden; }
.seg span.on .object .selected { padding: 0; border: 0; border-radius: 0; background: var(--accent-soft); }
.seg span.on .object.leaving { opacity: 0.4; filter: blur(calc(var(--motion-blur-char-px) * 0.5px)); }
.seg span.on .object .caret { display: inline-block; width: 1px; height: 13px; margin-left: 1px; background: var(--text-primary); }
/* 成 is part of the verb, set like it, and leaves with the language. */
.seg span.on .joint { padding: 0; border: 0; border-radius: 0; font-weight: 600; color: var(--accent); }
.seg span.on .joint.leaving { opacity: 0.4; filter: blur(calc(var(--motion-blur-char-px) * 0.5px)); }

.bar-action {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-control);
}
.bar-action.execution { min-width: 92px; justify-content: center; }
.bar-action.disabled { opacity: 0.45; }
.language-confirmation { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.bar-action .label { font-size: var(--font-size-label); font-weight: 600; }
.bar-action .key { font-size: var(--font-size-caption); color: var(--text-tertiary); }
.bar-action .stop-icon {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--text-secondary);
}
.bar-action.copied { border-color: transparent; background: var(--accent-soft); color: var(--accent); }

/* Quiet result actions share a fixed header, including copy feedback. */
.result-header { display: flex; align-items: center; justify-content: space-between; height: 26px; position: relative; flex-shrink: 0; }
.result-status { display: flex; gap: 6px; font: 500 12px var(--font-ui); color: var(--text-secondary); }
.result-status span { font-weight: 400; color: var(--text-tertiary); }
.copy-button { display: flex; align-items: center; justify-content: flex-end; min-width: 116px; height: 26px; border-radius: var(--radius-card); color: var(--text-control); }
.copy-button .main { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 8px; }
.copy-button .icon { width: 12px; height: 12px; }
.copy-button .label { font-size: var(--font-size-label); font-weight: 500; }
.copy-button .key { font-size: var(--font-size-caption); color: var(--text-tertiary); }
.copy-button .more { display: flex; align-items: center; justify-content: center; width: 22px; height: 100%; }
.copy-button .more .icon { width: 10px; height: 10px; color: var(--text-tertiary); }
.copy-button.open, .copy-button:hover { background: var(--surface-dim); }
.copy-button.disabled { opacity: 0.45; }
.copy-button.copied { background: var(--accent-soft); color: var(--accent); }
.result:has(.copy-button.open) { min-height: 134px; }

/* The copy menu, drawn by Cida on the hint pill's surface. Radius 14 around
 * 6 of padding keeps the rows' radius 8 concentric with it. Its right edge is
 * the button's, its top 6 below the button. */
.bar { position: relative; }
.copy-menu {
  position: absolute;
  z-index: 1;
  top: 32px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 184px;
  padding: 6px;
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--panel-edge), var(--panel-shadow);
}
.copy-menu .row { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 6px 0 10px; border-radius: var(--radius-card); color: var(--text-control); }
.copy-menu .row .icon { width: 12px; height: 12px; }
.copy-menu .row b { flex: 1; font-size: 12px; font-weight: 500; color: var(--text-primary); }
.copy-menu .row kbd { display: flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-seg-item); background: var(--surface-dim); font-family: var(--font-ui); font-size: var(--font-size-caption); font-weight: 500; letter-spacing: 0.4px; color: var(--text-secondary); }
.copy-menu .row.on { background: var(--surface-dim); }
.copy-menu .row.on kbd { background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.bar-status { font-size: var(--font-size-label); color: var(--text-tertiary); }

.result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-result-y) var(--space-window-x);
  background: var(--surface-paper);
}

.result .text {
  font-family: var(--font-result);
  font-size: var(--font-size-result);
  line-height: 29px;
  color: var(--text-ink);
}
.result .text.cjk {
  /* Adjacent CJK punctuation shares one em (「。」 then 「「」), as in the app. */
  font-feature-settings: "chws";
  font-family: var(--font-result-cjk);
  font-size: var(--font-size-result-cjk);
  line-height: 31px;
}
.result .text.stale { color: var(--text-secondary); }
/* The visible window of a result taller than the pane. The edge with text
   beyond it fades the ink into the paper; an edge at the start or end of the
   result stays sharp. */
.result .viewport { overflow: hidden; --fade-floor: rgba(0, 0, 0, var(--result-fade-floor)); }
.result .viewport.more-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--result-fade)), var(--fade-floor)); }
.result .viewport.more-above { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--result-fade)), var(--fade-floor)); }
.result .viewport.more-above.more-below { -webkit-mask-image: linear-gradient(to bottom, var(--fade-floor), #000 var(--result-fade), #000 calc(100% - var(--result-fade)), var(--fade-floor)); }
.result .fading { color: var(--text-tertiary); }
.result .cursor {
  display: inline-block;
  width: calc(var(--motion-cursor-w) * 1px);
  height: calc(var(--motion-cursor-h) * 1px);
  margin-left: 2px;
  vertical-align: -4px;
  background: var(--accent);
}

.note {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  font-size: var(--font-size-secondary);
  line-height: 1.5;
  color: var(--text-secondary);
}
.note .icon { width: 13px; height: 13px; color: var(--text-tertiary); }

/* ---- Lifecycle panels (spec/lifecycle.md) ------------------------------ */

.source.statement .muted { color: var(--text-tertiary); }
/* 更新内容 belongs to the list below it. */
.result .aside:first-child { margin-bottom: -4px; }
.result .aside { font-size: var(--font-size-caption); line-height: 1.5; color: var(--text-tertiary); }
/* A wrapped item hangs under its own text, not under the bullet. */
.result .text.notes p { margin: 0; padding-left: 1em; text-indent: -1em; }
.result .text.notes p::before { content: "·"; display: inline-block; width: 1em; text-indent: 0; color: var(--text-tertiary); }

/* The DMG's Finder window (spec/lifecycle.md §二). dmg-background is the image the DMG ships;
   Finder draws the two icons over it at (150, 210) and (450, 210). */
.dmg-window {
  position: relative;
  width: 600px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--panel-edge), var(--panel-shadow);
}
.dmg-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-size-caption);
  font-weight: 600;
  color: var(--text-secondary);
}
.dmg-titlebar i { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-dim); box-shadow: inset 0 0 0 1px var(--border); }
.dmg-titlebar span { flex: 1; text-align: center; margin-right: 60px; }
.dmg-background {
  position: relative;
  width: 600px;
  height: 400px;
  background: var(--surface-paper);
}
.dmg-background .headline {
  position: absolute;
  top: 56px;
  width: 100%;
  text-align: center;
  /* Half-width 「」: the full-width brackets' blank halves pushed the line 7pt off centre. */
  font-feature-settings: "halt";
  font-family: var(--font-result-cjk);
  font-size: 22px;
  color: var(--text-ink);
}
/* Finder draws both icons at 128pt centred on (150, 210) and (450, 210), labels 6pt below. Their
   artwork is not as wide as the box (the app's ends at x 204, the Applications folder's starts at
   387.5), so the arrow is centred between the artwork, not the boxes, on their centre line. */
.dmg-background .arrow {
  position: absolute;
  top: 210px;
  left: 234px;
  width: 124px;
  height: 1px;
  background: var(--text-tertiary);
}
.dmg-background .arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3.5px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--text-tertiary);
  border-right: 1px solid var(--text-tertiary);
  transform: rotate(45deg);
}
.dmg-background .footnote {
  position: absolute;
  bottom: 48px;
  width: 100%;
  text-align: center;
  font-size: var(--font-size-caption);
  color: var(--text-tertiary);
}
.dmg-icon {
  position: absolute;
  top: calc(28px + 146px);
  width: 128px;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-primary);
}
.dmg-icon.app { left: 86px; }
.dmg-icon.folder { left: 386px; }
/* macOS draws an app icon's artwork at about 80% of its box. */
.dmg-icon .app-icon { display: block; margin: 12px 12px 18px; }
/* A stand-in for the system's Applications folder icon, inside the same 128pt icon box. */
.dmg-icon .folder-icon { position: relative; display: block; width: 128px; height: 128px; margin-bottom: 6px; }
.dmg-icon .folder-icon::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 20px;
  width: 112px;
  height: 88px;
  border-radius: 10px;
  background: linear-gradient(#8cc9f2, #5aa9e4);
  box-shadow: inset 0 14px 0 -4px #a9d8f7;
}

.motion-note {
  display: flex;
  gap: 6px;
  max-width: 800px;
  font-size: var(--font-size-label);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary);
}
.motion-note .icon { margin-top: 3px; }

/* ---- Settings window (spec/settings.md) ------------------------------- */

.window {
  width: 560px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-window);
  background: var(--bg);
  box-shadow: 0 24px 60px #00000014;
}

.titlebar {
  position: relative;
  display: flex;
  align-items: center;
  /* macOS 26's compact title bar; the traffic lights and the title share its centre. */
  height: 40px;
  padding: 0 16px;
}
.titlebar .lights { display: flex; gap: 8px; }
.titlebar .lights i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px #00000014;
}
.titlebar .lights i:nth-child(1) { background: #FF5F57; }
.titlebar .lights i:nth-child(2) { background: #FEBC2E; }
.titlebar .lights i:nth-child(3) { background: #28C840; }
.titlebar .title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-secondary);
  font-weight: 600;
}

/* Four tabs under the title (spec/settings.md §一): 76 × 46 each, the chosen one on surface-dim. */
.settings-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.settings-tabs span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 76px;
  height: 46px;
  border-radius: var(--radius-card);
  font-size: var(--font-size-label);
  font-weight: 500;
  line-height: 14px;
  color: var(--text-secondary);
}
.settings-tabs .icon { width: 18px; height: 18px; }
.settings-tabs span.on { background: var(--surface-dim); color: var(--text-primary); }
.settings-tabs span.on .icon { color: var(--accent); }
.settings-tabs span.focused,
.settings .button.focused,
.settings .bar-action.focused,
.settings .chip.focused,
.settings .seg span.focused { box-shadow: inset 0 0 0 1px var(--accent); }
.settings .toggle.focused { outline: 1px solid var(--accent); outline-offset: 2px; }
.settings .link.focused { outline: 1px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-segment-item); }

.settings { padding: 6px var(--space-window-x) 24px; }
.settings .group { padding-top: 20px; }
.settings .group:first-child { padding-top: 12px; }
.settings .group + .group { border-top: 1px solid var(--border); }
.settings .group > h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 17px;
  color: var(--text-control);
}

.row { display: flex; align-items: center; gap: 24px; padding: 9px 0; }
.row.prompt { padding: 10px 0; }
.row .labels { display: flex; flex-direction: column; gap: 3px; width: 120px; flex: none; }
.row.prompt .labels { flex: 1; width: auto; min-width: 0; }
.row .labels b { font-size: 13.5px; font-weight: 400; line-height: 20px; }
.row .labels small {
  overflow: hidden;
  font-size: var(--font-size-label);
  line-height: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.row .controls { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; }
.row .controls.end { justify-content: flex-end; }
.row .controls.spaced { gap: 12px; }
.row .controls .stack { display: flex; flex-direction: column; gap: 5px; }
.row .controls .stack small { font-size: var(--font-size-label); color: var(--text-secondary); }

.menu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-seg);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 500;
}
.menu .icon { color: var(--text-tertiary); }

.field {
  display: flex;
  align-items: center;
  flex: 1;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-seg);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.field.placeholder { color: var(--text-tertiary); }
.field.focused { border: 1px solid var(--accent); }
.field.text { font-family: var(--font-ui); font-size: 12.5px; }
.field.short { flex: 0 0 180px; }
.row .controls .swap { flex: none; font-size: 13px; color: var(--text-tertiary); }
.field .caret { display: inline-block; width: 1px; height: 14px; margin-left: 1px; background: var(--text-primary); vertical-align: -2px; }

.readiness {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.readiness i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.readiness.pending i { background: var(--text-tertiary); }

.button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-control);
  white-space: nowrap;
}

.link, .status { font-size: 12px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }

/* spec/configuration.md §四 */
.row .controls .stack.summary { gap: 3px; }
.row .controls .stack.summary b { font-size: 13.5px; font-weight: 400; line-height: 20px; }
.row .controls .stack.summary .reasoning { color: var(--text-secondary); }
.row .controls .push { margin-left: auto; }
.row .controls .button.disabled { opacity: .45; }
.dot-caption { display: inline-flex; align-items: center; gap: 6px; }
.dot-caption i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.dot-caption.pending i { background: var(--text-tertiary); }
.dot-caption i.icon { width: 11px; height: 11px; border-radius: 0; }
.row .labels small > small { display: block; margin-top: 3px; }
.row-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -2px 0 6px 144px;
  font-size: var(--font-size-label);
  line-height: 17px;
  color: var(--text-secondary);
}
.row-note .icon { flex: none; width: 13px; height: 13px; margin-top: 2px; color: var(--text-tertiary); }
.agent-card {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 10px 0 12px;
  padding: 16px 18px;
  border-radius: var(--radius-card);
  background: var(--surface-paper);
  box-shadow: inset 0 0 0 1px var(--border);
}
.agent-card .labels { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.agent-card .labels b { font-size: 13.5px; font-weight: 500; line-height: 20px; }
.agent-card .labels small { font-size: var(--font-size-label); line-height: 17px; color: var(--text-secondary); }
.button.with-icon { display: flex; align-items: center; gap: 6px; }
.button.with-icon .icon { width: 12px; height: 12px; color: var(--text-secondary); }
.button.copied { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.button.copied .icon { color: var(--accent); }

/* Command-line transcripts (spec/configuration.md §二) */
.terminal {
  width: 800px;
  overflow: hidden;
  border-radius: 10px;
  background: #1E1E1C;
  box-shadow: 0 0 0 1px var(--panel-edge), var(--panel-shadow);
}
.terminal .chrome { display: flex; gap: 8px; padding: 12px 14px 0; }
.terminal .chrome i { width: 11px; height: 11px; border-radius: 50%; background: #3A3A37; }
.terminal pre {
  margin: 0;
  padding: 14px 20px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: #B8B8B0;
  white-space: pre-wrap;
}
.terminal .cmd { color: #EDEDE8; }
.terminal .cmd::before { content: "$ "; color: #6E6E68; }
.terminal .ok { color: #7FC8A0; }
.terminal .bad { color: #E8927C; }
.terminal .dim { color: #6E6E68; }
.prompt-sheet {
  width: 800px;
  box-sizing: border-box;
  padding: 22px 28px;
  border-radius: var(--radius-card);
  background: var(--surface-paper);
  box-shadow: 0 0 0 1px var(--border);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-ink);
  white-space: pre-wrap;
}

.chip {
  padding: 4px 9px;
  border-radius: var(--radius-chip);
  background: var(--surface-dim);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
.chip.unset { color: var(--text-tertiary); }
.chip.recording {
  padding: 3px 8px;
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--text-tertiary);
}

.toggle {
  display: flex;
  align-items: center;
  width: 34px;
  height: 20px;
  padding: 2px;
  border-radius: 10px;
  background: var(--toggle-off);
}
.toggle::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; }
.toggle.on { justify-content: flex-end; background: var(--accent); }
.settings .toggle { width: 32px; height: 18px; border-radius: 9px; }
.settings .toggle::after { width: 14px; height: 14px; }

.prompt-editor { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
.prompt-editor .head { display: flex; align-items: center; justify-content: space-between; }
.prompt-editor .head b { font-size: 13.5px; font-weight: 400; line-height: 20px; }
.prompt-editor .sheet {
  padding: 12.5px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-card);
  background: var(--surface-paper);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-ink);
}
.prompt-editor small { font-size: var(--font-size-label); line-height: 17px; color: var(--text-tertiary); }

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 26px;
}
.footer small { font-size: var(--font-size-caption); color: var(--text-tertiary); }

.popover {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 236px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 8px 24px #00000022;
}
.popover span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: var(--radius-seg-item);
  font-size: 12.5px;
}
.popover span.current { background: var(--surface-dim); font-weight: 600; }
.popover span.current .icon { color: var(--accent); }

/* ---- Capture overlay (spec/panel.md §一 截图翻译) ---------------------- */

.screen {
  position: relative;
  width: 1200px;
  height: 750px;
  overflow: hidden;
  background: #FAFAF7;
}
.screen.dark { background: #101010; }

.frozen-window {
  position: absolute;
  left: 120px;
  top: 210px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 960px;
  height: 330px;
  padding: 40px 56px;
  border: 1px solid #00000014;
  border-radius: 12px;
  background: #FFFFFF;
}
.frozen-window h2 { margin: 0; font-size: 28px; font-weight: 600; line-height: 34px; color: #161614; }
.frozen-window p { margin: 0; font-size: 17px; line-height: 1.6; color: #3D3D3A; }
.screen.dark .frozen-window { border-color: #FFFFFF14; background: #1E1E1C; }
.screen.dark .frozen-window h2 { color: #EDEDE8; }
.screen.dark .frozen-window p { color: #B8B8B0; }

.veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--surface-paper) 72%, transparent); }
/* A dark screen is veiled with the dark appearance's paper, whatever Cida's own appearance is. */
.screen.dark .veil { background: color-mix(in srgb, var(--surface-paper) 45%, transparent); }

/* The lifted sheet shows the frozen screen through a window of its own. */
.lifted {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-card);
  box-shadow: var(--panel-shadow);
}
.lifted > .frozen-window { margin: -1px; }
.screen.dark .lifted { border-color: #FFFFFF24; box-shadow: none; }

.capture-hint {
  position: absolute;
  top: 138px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--panel-shadow);
  transform: translateX(-50%);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-control);
  white-space: nowrap;
}
.capture-hint.static { position: static; transform: none; }

/* ---- Menu bar menu (spec/updates.md) ------------------------------------ */

.status-menu-scene { position: relative; width: 320px; height: 210px; }
.status-menu-scene .menubar { width: 320px; }
.status-menu {
  position: absolute;
  top: 28px;
  right: 92px;
  display: flex;
  flex-direction: column;
  width: 196px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--panel-shadow);
  font-size: 13px;
}
.status-menu .item { display: flex; justify-content: space-between; padding: 3px 9px; border-radius: 5px; }
.status-menu .item b { font-weight: 400; color: var(--text-primary); }
.status-menu .item kbd { font-family: var(--font-ui); color: var(--text-secondary); }
.status-menu .item.disabled b { color: var(--text-tertiary); white-space: nowrap; }
.status-menu .separator { height: 1px; margin: 5px 9px; background: var(--border); }

/* ---- Translation layer (spec/translation-layer.md) ---------------------
 * Mock windows of the apps a layer sits on. They are drawn loosely, only
 * so the layer has something real-looking to cover; the layer's own parts
 * are the .layer-* classes. */

.screen.desk { background: linear-gradient(160deg, #D9DDD8, #C9CFCB); }
.mock-window {
  position: absolute;
  left: 60px;
  top: 64px;
  display: flex;
  flex-direction: column;
  width: 1080px;
  height: 646px;
  overflow: hidden;
  border: 1px solid #00000024;
  /* A titled window on macOS 26. */
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 20px 50px #0000002A;
  font-family: var(--font-ui);
}
.mock-lights { display: flex; gap: 8px; }
.mock-lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.mock-lights i:nth-child(2) { background: #FEBC2E; }
.mock-lights i:nth-child(3) { background: #28C840; }

/* A chat app: rail, channel list, channel with messages and a composer. */
.chat-top {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  background: #3A1E3E;
}
.chat-top .search {
  width: 420px;
  height: 24px;
  margin: 0 auto;
  border-radius: 6px;
  background: #FFFFFF2B;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  color: #FFFFFFB3;
}
.chat-body { display: flex; flex: 1; min-height: 0; }
.chat-rail { width: 64px; background: #3A1E3E; }
.chat-rail i {
  display: block;
  width: 36px;
  height: 36px;
  margin: 12px auto 0;
  border-radius: 9px;
  background: #F2EDE3;
}
.chat-sidebar {
  width: 236px;
  padding: 16px 12px;
  background: #4A2A4E;
  font-size: 14px;
  color: #FFFFFFB8;
}
.chat-sidebar b { display: block; margin: 0 8px 14px; font-size: 17px; color: #FFFFFF; }
.chat-sidebar span { display: block; padding: 4px 8px; border-radius: 6px; }
.chat-sidebar span.on { background: #FFFFFF26; font-weight: 600; color: #FFFFFF; }
.chat-sidebar small { display: block; margin: 16px 8px 6px; font-size: 13px; }
.chat-main { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; }
.chat-header {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #E8E8E8;
  font-size: 17px;
  font-weight: 700;
  color: #1D1C1D;
}
.chat-messages { position: relative; flex: 1; padding: 10px 0; overflow: hidden; }
.chat-day {
  margin: 4px 20px 6px;
  font-size: 12px;
  font-weight: 700;
  color: #616061;
}
.chat-msg { position: relative; display: flex; gap: 10px; padding: 7px 20px; }
.chat-msg .avatar { flex: none; width: 36px; height: 36px; border-radius: 7px; }
.chat-msg .who { font-size: 15px; font-weight: 700; color: #1D1C1D; }
.chat-msg .who time { margin-left: 6px; font-size: 12px; font-weight: 400; color: #616061; }
.chat-msg .text { margin-top: 2px; font-size: 15px; line-height: 22px; color: #1D1C1D; }
.chat-composer {
  height: 84px;
  margin: 0 20px 18px;
  padding: 12px 14px;
  border: 1px solid #BBBBBB;
  border-radius: 8px;
  font-size: 15px;
  color: #8A8A8A;
}

/* A browser: tab strip, toolbar, a page with navigation, article and outline. */
.browser-tabs {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  height: 40px;
  padding: 0 14px;
  background: #DDE1E6;
}
.browser-tabs .mock-lights { align-self: center; }
.browser-tab {
  width: 240px;
  height: 32px;
  padding: 8px 14px;
  border-radius: 9px 9px 0 0;
  background: #FFFFFF;
  font-size: 12.5px;
  color: #1F1F1F;
  white-space: nowrap;
  overflow: hidden;
}
.browser-toolbar { display: flex; align-items: center; height: 40px; padding: 0 14px; border-bottom: 1px solid #E3E3E3; }
.browser-toolbar .address {
  flex: 1;
  height: 28px;
  padding: 0 14px;
  border-radius: 14px;
  background: #F1F3F4;
  font-size: 13px;
  line-height: 28px;
  color: #3C4043;
}
.page { position: relative; display: flex; flex: 1; gap: 40px; padding: 36px 44px; min-height: 0; overflow: hidden; }
.page-nav { width: 150px; flex: none; font-size: 14px; line-height: 30px; color: #5F6368; }
.page-nav b { display: block; margin-bottom: 8px; font-size: 16px; color: #202124; }
.page-article { flex: 1; min-width: 0; }
.page-article h1 { margin: 0 0 8px; font-size: 30px; line-height: 38px; color: #202124; }
.page-article .meta { margin-bottom: 20px; font-size: 13px; color: #5F6368; }
.page-article p { margin: 0 0 16px; font-size: 16px; line-height: 27px; color: #3C4043; }
.page-code { margin: 0 0 16px; padding: 12px 14px; border-radius: 6px; background: #F6F8FA; font: 13px/20px ui-monospace, Menlo, monospace; color: #24292F; }
.page-toc { width: 170px; flex: none; font-size: 13px; line-height: 26px; color: #5F6368; }
.page-toc b { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: 0.06em; color: #202124; }

/* The layer's own parts. */
.chat-empty { height: 120px; margin: 0 20px; }
/* ⌥⇧D: the window outlined for a moment when it starts, 3px outside and concentric with
   its 16px corners. */
.layer-outline { position: absolute; border: 1px solid var(--accent); border-radius: 19px; pointer-events: none; }

/* Translations sit on Cida's paper in Cida's ink, whatever the app looks like. */
.layer-card {
  display: block;
  margin: -3px -8px;
  padding: 3px 8px;
  border-radius: var(--radius-chip);
  background: var(--surface-paper);
  color: var(--text-ink);
}
.chat-msg .text .link { color: #1264A3; }
/* Paragraphs set one under another at one left edge share one sheet as wide as the widest,
   the gaps between them filled. */
.layer-sheet {
  margin: -3px -8px;
  padding: 3px 8px;
  border-radius: var(--radius-chip);
  background: var(--surface-paper);
  color: var(--text-ink);
}
/* A sheet ends 3px below its last line; what follows keeps its place. */
.layer-sheet > :last-child { margin-bottom: 0; }
.layer-sheet + .page-code { margin-top: 16px; }
/* A translation: Cida's result serif; links in accent. */
.layer-text { font-family: var(--font-result-cjk); }
/* Waiting: the original breathes on an accent underlay the shape of the paper it turns into
   (drawn at its strongest). */
.layer-waiting {
  display: block;
  margin: -3px -8px;
  padding: 3px 8px;
  border-radius: var(--radius-chip);
  background: color-mix(in srgb, var(--accent) calc(var(--motion-waiting-opacity-max) * 100%), transparent);
}
.chat-msg .text .layer-text .link, .page .layer-text .link { color: var(--accent); }
.pointer {
  position: absolute;
  width: 16px;
  height: 22px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'><path d='M1 1v17l4.5-4.2 3 6.7 2.6-1.1-3-6.6H14z' fill='black' stroke='white' stroke-width='1.3' stroke-linejoin='round'/></svg>") no-repeat;
}

/* ---- Appearance (spec/appearance.md) ------------------------------------
 * A light state and its dark counterpart side by side; the dark stage stands in for a dark
 * desktop, the light one for the board itself. */

.appearance-pair { display: flex; gap: 24px; align-items: stretch; }
.appearance-stage { display: flex; flex-direction: column; gap: 24px; padding: 28px; border-radius: 12px; }
.appearance-pair > .panel { align-self: center; margin: 28px; }
.appearance-stage[data-appearance="dark"] { background: #141413; }
/* Inherited text colour is resolved where it is declared (body), so a dark scope sets its own. */
[data-appearance="dark"] { color: var(--text-primary); }
.appearance-stage.light { padding: 28px; }
.settings-pair { flex-direction: column; }
.settings-pair .appearance-stage { flex-direction: row; align-items: flex-start; }
.settings-pair .window { width: 560px; }
.appearance-stage.pills { width: 856px; align-items: center; justify-content: center; }
.appearance-stage.pills > .capture-hint { box-shadow: 0 0 0 1px var(--panel-edge), var(--panel-shadow); border: 0; }
.layer-demo { margin: 8px 0 0; font-size: 15px; line-height: 22px; }
.layer-demo .layer-sheet { display: inline-block; }
.layer-demo .link { color: var(--accent); }

/* ---- Share card (spec/panel.md §八) -----------------------------------
 * The bitmap ⇧⌘C puts on the pasteboard: the pair the result was generated
 * from, set like the panel but narrow enough to read on a phone. Its edge is
 * the panel's own — radius, stroke and the first shadow layer — inside a
 * transparent margin that holds the shadow. Always the light appearance. */

.share-bitmap { display: inline-block; align-self: flex-start; padding: var(--share-card-margin); }
.share-card {
  display: flex;
  flex-direction: column;
  width: var(--share-card-width);
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--panel-edge), 0 2px 6px #00000014;
}
.share-card .source { min-height: 0; padding: var(--space-result-y) var(--space-window-x); }
/* No control bar and no mark: the one line the panel has between input and
 * output is all that stays; the look itself is the brand. */
.share-card .result { border-top: 1px solid var(--border); }

.phone {
  width: 390px;
  overflow: hidden;
  padding: 44px 0 34px;
  border-radius: 44px;
  background: #000;
  box-shadow: 0 0 0 10px #1C1C1E;
}
.phone .share-bitmap { zoom: calc(390 / 500); }

/* Settings uses the same source / action bar / paper as the production panel. */
.icon-pen-line { --icon: url("data:image/svg+xml;utf8,<svg 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'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L9 17l-4 1 1-4Z'/></svg>"); }
.actions-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.actions-heading h3 { margin: 0; font-size: 12px; font-weight: 600; line-height: 17px; color: var(--text-control); }
.actions-heading small, .actions-preview small { color: var(--text-tertiary); font-size: 11px; line-height: 16px; }
.actions-heading small, .actions-paper small { color: var(--text-secondary); }
.actions-preview { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.actions-sample { padding: 18px; }
.actions-sample small, .actions-instruction small { display: flex; justify-content: space-between; }
.actions-sample p { margin: 8px 0 0; font-family: var(--font-body); font-size: 13px; line-height: 21px; }
.actions-preview .bar { height: 44px; padding: 0 12px; justify-content: space-between; }
.actions-preview .bar-action { width: 80px; justify-content: center; font-size: 11.5px; font-weight: 600; color: var(--text-control); }
.actions-preview .bar-action .key { font-size: 11px; font-weight: 400; color: var(--text-tertiary); }
.actions-paper { padding: 16px; background: var(--surface-paper); }
.actions-instruction { padding-bottom: 14px; }
.actions-instruction p { font-family: var(--font-ui); font-size: var(--font-size-body); line-height: calc(var(--font-size-body) * var(--line-height-body)); margin: 14px 0 0; color: var(--text-ink); }
.actions-placeholder { font-family: var(--font-body); font-size: 13px; line-height: 21px; min-height: 42px; margin: 0 0 16px; color: var(--text-tertiary); }

/* First use occupies the panel before the composer becomes available. */
.welcome-heading { padding: 24px 28px; font: 500 18px var(--font-ui); background: var(--surface); color: var(--text-primary); }
.welcome-paper { padding: 22px 28px; background: var(--surface-paper); display: flex; flex-direction: column; gap: 18px; }
.welcome-copy { font: 17px/1.8 var(--font-result-cjk); color: var(--text-primary); }
.welcome-actions { display: flex; gap: 14px; }
.welcome-actions button { height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; font: 500 12.5px var(--font-ui); color: var(--text-control); background: var(--surface); }
.welcome-actions button.primary { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.welcome-caption { font: 12px/1.5 var(--font-ui); color: var(--text-secondary); }

/* Recovery copy stays quiet and reserves two lines at the panel width. */
.failure-explanation { height: 40px; font-size: 13px; line-height: 20px; color: var(--text-secondary); }
.share-card .incomplete-mark { margin-top: 4px; font-size: 12px; line-height: 17px; color: var(--text-secondary); }

.actions-trial-result { font-family: var(--font-result-cjk); font-size: 15px; line-height: 1.75; margin: 16px 0; color: var(--text-ink); }
.actions-trial-result.reference { color: var(--text-secondary); }
.actions-trial-run { display: flex; justify-content: flex-end; padding-top: 8px; }

/* Shortcut and permission captions use the space before their trailing controls. */
.settings .wide-caption .labels { width: auto; flex: 1; min-width: 0; }
.settings .wide-caption .controls { flex: none; }

/* Update commands share the main panel's trailing action treatment. */
.bar.update-commands { justify-content: flex-end; gap: 8px; }
.update-commands .bar-action.execution { min-width: 0; }
.update-commands .update-skip { padding: 0 12px; font-size: 11.5px; font-weight: 500; color: var(--text-secondary); }