@rightkit/system-ui 0.0.0-stage → 0.1.0

package/dist/views/activity.css

@@ -0,0 +1,94 @@
+/* Activity timeline. Scoped under .ck-activity; tokens come from styles.css. */
+.ck-activity {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 0;
+  overflow: auto;
+  padding: 14px 18px 18px;
+  scroll-padding: 12px;
+}
+.ck-activity :focus-visible { outline: 2px solid var(--rk-focus, var(--rk-accent)); outline-offset: 2px; border-radius: 6px; }
+.ck-activity h2 { margin: 0 0 6px 2px; font-size: 13px; font-weight: 600; color: var(--rk-ink); }
+.ck-activity p { margin: 0; }
+.ck-activity .muted { color: var(--rk-ink-2); font-size: 12px; }
+.ck-activity > * { flex: none; }
+
+.ck-activity-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.ck-activity-select { min-width: 140px; }
+
+.ck-activity-day { display: flex; flex-direction: column; min-width: 0; }
+.ck-activity-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--rk-hairline);
+  border-radius: 12px;
+  background: var(--rk-panel, var(--rk-fill-2));
+  overflow: hidden;
+}
+.ck-activity-row {
+  display: grid;
+  grid-template-columns: 74px 112px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 14px;
+  min-width: 0;
+  transition: background-color 120ms ease;
+}
+.ck-activity-row + .ck-activity-row { border-top: 1px solid var(--rk-hairline); }
+.ck-activity-row:hover { background: var(--rk-plane); }
+.ck-activity-row:active { background: color-mix(in srgb, var(--rk-accent) 14%, var(--rk-plane)); }
+
+.ck-activity-time {
+  color: var(--rk-ink-2);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.ck-activity-kind {
+  justify-self: start;
+  padding: 2px 8px;
+  border: 1px solid var(--rk-hairline);
+  border-radius: 999px;
+  color: var(--rk-ink-2);
+  font-size: 11px;
+  white-space: nowrap;
+}
+.ck-activity-summary {
+  min-width: 0;
+  color: var(--rk-ink);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.ck-activity-empty {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 18px;
+  border: 1px dashed var(--rk-hairline);
+  border-radius: 12px;
+  color: var(--rk-ink);
+  font-size: 13px;
+}
+.ck-activity-error { color: var(--rk-danger, #c0392b); font-size: 12px; }
+.ck-activity-more { display: flex; justify-content: center; }
+.ck-activity-note { padding: 0 2px; }
+
+@media (max-width: 560px) {
+  .ck-activity { padding: 12px 16px 16px; }
+  .ck-activity-row { grid-template-columns: 1fr auto; grid-template-areas: "time kind" "summary summary" "open open"; }
+  .ck-activity-time { grid-area: time; }
+  .ck-activity-kind { grid-area: kind; justify-self: end; }
+  .ck-activity-summary { grid-area: summary; }
+  .ck-activity-row > button { grid-area: open; justify-self: start; }
+}

package/dist/views/apps.css

@@ -0,0 +1,98 @@
+/* Apps page (v2.1). Tokens come from styles.css and the app-shell. */
+.ck-apps { gap: 8px; }
+.ck-apps > * { min-width: 0; }
+.ck-apps :focus-visible { outline: 2px solid var(--rk-focus, var(--rk-accent)); outline-offset: 2px; }
+
+.ck-apps-tools { display: flex; align-items: center; gap: 8px; flex: none; }
+.ck-apps-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--ck-control-line, var(--rk-hairline)); background: var(--rk-fill-2); color: var(--rk-ink-3); }
+.ck-apps-search:focus-within { border-color: var(--rk-accent); }
+.ck-apps-search svg { flex: none; }
+.ck-apps-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--rk-ink); font: inherit; outline: none; }
+.ck-apps-search input::placeholder { color: var(--rk-ink-3); }
+.ck-apps-search:has(input:focus-visible) { outline: 2px solid var(--rk-focus, var(--rk-accent)); outline-offset: 2px; }
+.ck-apps-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; flex: none; }
+.ck-apps-summary { font-size: 12px; color: var(--rk-ink-2); overflow-wrap: anywhere; }
+
+.ck-apps-about { flex: none; font-size: 12px; color: var(--rk-ink-2); }
+.ck-apps-about > summary { display: inline-block; min-height: 24px; padding: 3px 0; cursor: pointer; }
+.ck-apps-about p { margin: 4px 0 0; max-width: 560px; }
+
+.ck-apps-card { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--rk-hairline); border-radius: 12px; background: var(--rk-fill-2); padding: 0 12px; scroll-padding: 10px; }
+.ck-apps-card:focus-visible { outline-offset: -2px; }
+
+.ck-apps-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; align-items: center; gap: 10px; padding: 2px 0; border-bottom: 1px solid var(--rk-hairline); }
+.ck-apps-row:last-child { border-bottom: 0; }
+.ck-apps-open { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 4px 6px 4px 0; border-radius: 8px; color: var(--rk-ink); font: inherit; text-align: left; }
+.ck-apps-open:hover { background: var(--rk-plane); }
+.ck-apps-text { display: flex; flex-direction: column; min-width: 0; }
+.ck-apps-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-weight: 600; overflow-wrap: anywhere; }
+.ck-apps-sub { font-size: 12px; color: var(--rk-ink-2); overflow-wrap: anywhere; }
+.ck-apps-icon { flex: none; width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }
+.ck-apps-icon--fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--rk-plane); color: var(--rk-ink-3); }
+.ck-apps-size { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-variant-numeric: tabular-nums; color: var(--rk-ink-2); white-space: nowrap; }
+.ck-apps-bar { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--rk-plane); overflow: hidden; }
+.ck-apps-bar i { display: block; height: 100%; background: var(--rk-accent); }
+
+.ck-apps-update { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; max-width: 260px; }
+.ck-apps-badge { display: inline-block; max-width: 100%; padding: 1px 7px; border-radius: 6px; font-size: 12px; line-height: 1.5; background: var(--rk-plane); color: var(--rk-ink-2); overflow-wrap: anywhere; }
+.ck-apps-badge--warn { background: var(--rk-warn-soft, var(--rk-plane)); color: var(--rk-warn); }
+.ck-apps-badge--ok { background: var(--rk-ok-soft, var(--rk-plane)); color: var(--rk-ok); }
+.ck-apps-badge--bad { background: var(--rk-bad-soft, var(--rk-plane)); color: var(--rk-bad); }
+.ck-apps-badge--accent { color: var(--rk-accent); }
+.ck-apps-status { font-size: 12px; color: var(--rk-ink-2); overflow-wrap: anywhere; text-align: right; }
+.ck-apps-status--ok { color: var(--rk-ok); }
+.ck-apps-status--bad { color: var(--rk-bad); }
+
+.ck-apps-state { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 4px; color: var(--rk-ink-2); }
+.ck-apps-state strong { color: var(--rk-ink); font-size: 14px; }
+.ck-apps-error { flex: none; padding: 8px 12px; border-radius: 8px; background: var(--rk-bad-soft, var(--rk-fill-2)); color: var(--rk-bad); font-size: 12px; overflow-wrap: anywhere; }
+.ck-apps-failed { margin-top: 4px; color: var(--rk-bad); }
+
+/* Detail */
+.ck-apps-head { display: flex; align-items: center; gap: 10px; flex: none; }
+.ck-apps-head-title { flex: 1; min-width: 0; }
+.ck-apps-head-title h2 { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 650; color: var(--rk-ink); overflow-wrap: anywhere; }
+.ck-apps-back { display: inline-flex; align-items: center; gap: 2px; }
+.ck-apps-group + .ck-apps-group { margin-top: 6px; }
+.ck-apps-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; font-weight: 600; }
+.ck-apps-group-head span { min-width: 0; overflow-wrap: anywhere; }
+.ck-apps-group-head .muted { font-weight: 400; }
+.ck-apps-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 6px 0; border-top: 1px solid var(--rk-hairline); cursor: pointer; }
+.ck-apps-item > .rk-check { margin: 7px 0 0 7px; }
+.ck-apps-path { display: block; font-weight: 600; overflow-wrap: anywhere; word-break: break-word; }
+.ck-apps-item-main { min-width: 0; padding-top: 5px; }
+.ck-apps-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
+.ck-apps-item .ck-apps-size { padding-top: 5px; }
+.ck-apps-extra { margin: 8px 0; font-size: 12px; color: var(--rk-ink-2); overflow-wrap: anywhere; }
+.ck-apps-extra h3 { margin: 0 0 2px; font-size: 12px; font-weight: 650; color: var(--rk-ink); }
+.ck-apps-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; flex: none; padding-top: 8px; border-top: 1px solid var(--rk-hairline); }
+.ck-apps-foot-copy { flex: 1 1 240px; min-width: 0; }
+.ck-apps-foot-copy strong { font-variant-numeric: tabular-nums; color: var(--rk-ink); }
+.ck-apps-foot-copy .ck-apps-sub { display: block; }
+
+/* Starts by itself: read-only list, loaded when opened */
+.ck-apps-startup { flex: none; font-size: 12px; color: var(--rk-ink-2); }
+.ck-apps-startup > summary { display: inline-block; min-height: 24px; padding: 3px 6px 3px 0; border-radius: 6px; font-weight: 600; color: var(--rk-ink); cursor: pointer; }
+.ck-apps-startup > summary:hover { background: var(--rk-plane); }
+.ck-apps-startup > summary:active { background: var(--rk-fill-2); color: var(--rk-ink-2); }
+.ck-apps-startup-body { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; padding: 6px 0 2px; }
+.ck-apps-startup-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.ck-apps-startup-scope { margin: 8px 0 2px; font-size: 12px; font-weight: 650; color: var(--rk-ink); }
+.ck-apps-startrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rk-hairline); }
+.ck-apps-startrow .ck-apps-text { min-width: 0; }
+.ck-apps-startwhat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rk-ink-2); font-variant-numeric: tabular-nums; }
+.ck-apps-note { font-size: 12px; color: var(--rk-ink-2); }
+.ck-apps-note p { margin: 2px 0 0; overflow-wrap: anywhere; }
+@media (max-width: 860px) {
+  .ck-apps-startrow { grid-template-columns: minmax(0, 1fr) auto auto; }
+  .ck-apps-startwhat { grid-column: 1 / -1; grid-row: 2; }
+}
+
+@media (max-width: 860px) {
+  .ck-apps { gap: 6px; padding: 10px 12px; }
+  .ck-apps-open { min-height: 44px; }
+}
+@media (forced-colors: active) {
+  .ck-apps-card, .ck-apps-badge { border: 1px solid CanvasText; }
+  .ck-apps-bar i { background: Highlight; }
+}

package/dist/views/chat.css

@@ -0,0 +1,61 @@
+/* Chat section. Tokens come from styles.css and the app-shell; every class is scoped under .ck-chat. */
+.ck-chat { overflow: auto; gap: 12px; padding: 14px 18px 18px; scroll-padding: 12px; }
+.ck-chat > * { flex: none; }
+.ck-chat :focus-visible { outline: 2px solid var(--rk-focus, var(--rk-accent)); outline-offset: 2px; }
+.ck-chat h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--rk-ink); }
+.ck-chat h3 { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--rk-ink); }
+.ck-chat .ck-sub { font-size: 12px; line-height: 1.45; color: var(--rk-ink-2); overflow-wrap: anywhere; margin: 0; }
+.ck-chat .error { font-size: 12px; overflow-wrap: anywhere; color: var(--rk-bad); padding: 8px 12px; border-radius: 8px; background: var(--rk-bad-soft); }
+
+.ck-chat-intro { margin: 0; font-size: 12px; line-height: 1.5; color: var(--rk-ink-2); max-width: 680px; }
+
+.ck-chat-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--rk-hairline); border-radius: 12px; background: var(--rk-panel, var(--rk-fill-2)); }
+
+.ck-chat-status { font-size: 13px; color: var(--rk-ink); overflow-wrap: anywhere; }
+.ck-chat-link-line { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--rk-ink-2); }
+.ck-chat-link-error { color: var(--rk-bad); overflow-wrap: anywhere; }
+
+.ck-chat-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
+@media (max-width: 720px) { .ck-chat-main { grid-template-columns: minmax(0, 1fr); } }
+
+.ck-chat-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--ck-control-line, var(--rk-hairline)); background: var(--rk-fill-2); color: var(--rk-ink-3); }
+.ck-chat-search:focus-within { border-color: var(--rk-accent); }
+.ck-chat-search svg { flex: none; }
+.ck-chat-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--rk-ink); font: inherit; outline: none; }
+.ck-chat-search input::placeholder { color: var(--rk-ink-3); }
+
+.ck-chat-device { display: flex; flex-direction: column; gap: 4px; }
+.ck-chat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+
+/* Chat rows are buttons: hover, pressed and selected each look different. */
+.ck-chat-item { display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 1px; width: 100%; min-height: 40px; padding: 5px 8px; border-radius: 8px; color: var(--rk-ink); font: inherit; text-align: left; }
+.ck-chat-item:hover { background: var(--rk-plane); }
+.ck-chat-item:active { background: color-mix(in srgb, var(--rk-accent) 22%, var(--rk-plane)); }
+.ck-chat-item[aria-pressed="true"] { background: color-mix(in srgb, var(--rk-accent) 14%, transparent); box-shadow: inset 2px 0 0 var(--rk-accent); }
+.ck-chat-kind { grid-row: 1 / span 2; align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; text-align: center; background: var(--rk-fill-2); color: var(--rk-ink-2); }
+.ck-chat-kind-claude { background: color-mix(in srgb, var(--rk-accent) 18%, transparent); color: var(--rk-ink); }
+.ck-chat-kind-muse { background: var(--rk-plane); color: var(--rk-ink); box-shadow: inset 0 0 0 1px var(--rk-line-strong); }
+.ck-chat-name { min-width: 0; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ck-chat-meta { min-width: 0; font-size: 11px; color: var(--rk-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.ck-chat-compose { gap: 8px; }
+.ck-chat-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; color: var(--rk-ink-2); }
+.ck-chat-field input, .ck-chat-field textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--ck-control-line, var(--rk-hairline)); background: var(--rk-fill-2); color: var(--rk-ink); font: inherit; outline: none; }
+.ck-chat-field input:focus-visible, .ck-chat-field textarea:focus-visible { border-color: var(--rk-accent); outline: 2px solid var(--rk-focus, var(--rk-accent)); outline-offset: 2px; }
+.ck-chat-field input::placeholder, .ck-chat-field textarea::placeholder { color: var(--rk-ink-3); }
+.ck-chat-field textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
+.ck-chat-field textarea:disabled { opacity: .55; }
+.ck-chat-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.ck-chat-receipt { padding: 8px 10px; border-radius: 8px; background: var(--rk-plane); font-size: 12px; line-height: 1.45; color: var(--rk-ink); overflow-wrap: anywhere; }
+
+.ck-chat-disclosure { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 28px; padding: 3px 8px 3px 4px; border-radius: 7px; color: var(--rk-ink); font: inherit; font-size: 13px; font-weight: 600; }
+.ck-chat-disclosure:hover { background: var(--rk-plane); }
+.ck-chat-disclosure:active { background: color-mix(in srgb, var(--rk-accent) 22%, var(--rk-plane)); }
+.ck-chat-inbox { display: flex; flex-direction: column; gap: 8px; }
+.ck-chat-message { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 8px; background: var(--rk-plane); }
+.ck-chat-message pre { margin: 0; font: inherit; font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--rk-ink); }
+
+.ck-chat-link-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; font-size: 13px; color: var(--rk-ink); }
+.ck-chat-link-name { min-width: 0; overflow-wrap: anywhere; }
+.ck-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; }
+@media (max-width: 720px) { .ck-chat-form { grid-template-columns: minmax(0, 1fr); } }

package/dist/views/cleanup.css

@@ -0,0 +1,49 @@
+/* Cleanup page (v2.1). Scoped under .ck-cleanup; tokens come from styles.css. */
+.ck-cleanup { overflow: hidden; gap: 10px; }
+.ck-cleanup h2 { margin: 0; font-size: 15px; line-height: 1.35; }
+.ck-cleanup p { margin: 0; }
+.ck-cleanup .muted { color: var(--rk-ink-2); font-size: 12px; }
+.ck-cleanup :focus-visible { outline: 2px solid var(--rk-focus, var(--rk-accent)); outline-offset: 2px; }
+.ck-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ck-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }
+.ck-head > div { min-width: 0; }
+.ck-cleanup > [role="group"], .ck-cleanup > [role="radiogroup"], .ck-cleanup > [role="tablist"] { flex: none; align-self: flex-start; }
+
+.ck-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; scroll-padding: 10px; }
+.ck-card { background: var(--rk-fill-2); border: 1px solid var(--rk-hairline); border-radius: 10px; padding: 8px 12px; flex: none; }
+.ck-card > h2 { padding: 4px 0 6px; }
+.ck-empty { padding: 16px 0; }
+
+.ck-group + .ck-group { margin-top: 8px; }
+.ck-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
+.ck-group-head label { display: flex; align-items: center; gap: 4px; min-width: 0; padding-left: 4px; }
+.ck-check { width: 32px; height: 32px; display: inline-grid; place-items: center; flex: none; }
+.ck-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 2px 0; border-top: 1px solid var(--rk-hairline); }
+.ck-row .ck-check { margin-top: 2px; }
+.ck-size { padding-top: 9px; color: var(--rk-ink-2); }
+
+.ck-detail { min-width: 0; }
+.ck-detail summary, .ck-held summary, .ck-about summary { display: flex; align-items: flex-start; gap: 6px; list-style: none; cursor: pointer; min-height: 32px; padding: 7px 0 4px; border-radius: 6px; }
+.ck-detail summary::-webkit-details-marker, .ck-held summary::-webkit-details-marker, .ck-about summary::-webkit-details-marker { display: none; }
+.ck-detail summary > svg, .ck-held summary > svg, .ck-about summary > svg { flex: none; margin-top: 3px; color: var(--rk-ink-2); transition: transform 0.12s; }
+.ck-detail[open] > summary > svg, .ck-held[open] > summary > svg, .ck-about[open] > summary > svg { transform: rotate(90deg); }
+.ck-detail summary > span, .ck-held summary > span, .ck-about summary > span { min-width: 0; flex: 1; }
+.ck-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
+.ck-reason { display: block; overflow-wrap: anywhere; }
+.ck-path { padding: 0 0 4px 20px; overflow-wrap: anywhere; word-break: break-word; }
+
+.ck-held, .ck-about { flex: none; border-top: 1px solid var(--rk-hairline); padding-top: 2px; }
+.ck-held-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 4px 0 4px 20px; }
+.ck-held-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
+.ck-held-row .ck-size { padding-top: 0; }
+.ck-about p { padding: 0 0 6px 20px; }
+
+.ck-history { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--rk-hairline); }
+.ck-history-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
+.ck-paths summary { padding-top: 4px; }
+.ck-issue { color: var(--rk-bad); font-size: 12px; padding-top: 2px; }
+.ck-lines { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
+
+
+.ck-selection { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--rk-hairline); padding-top: 8px; }
+.ck-selection > div { min-width: 0; flex: 1 1 220px; }

package/dist/views/health.css

@@ -0,0 +1,17 @@
+/* Drive health and duplicates in Storage. Tokens come from styles.css. */
+.health-line { display: inline-flex; flex-wrap: wrap; gap: 3px 7px; align-items: center; min-width: 0; }
+.health-panel { gap: 10px; }
+.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px 12px; }
+.health-metric { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.health-section { display: flex; flex-direction: column; gap: 3px; }
+.health-test { display: flex; justify-content: space-between; gap: 10px; }
+.health-spark { display: flex; flex-direction: column; gap: 3px; }
+.health-spark svg { display: block; width: 100%; height: 44px; overflow: visible; }
+.volume-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.volume-cell .health-toggle { align-self: flex-start; }
+.dup-controls { flex-wrap: wrap; align-items: center; }
+.dup-path { flex: 1; min-width: 200px; }
+.dup-group { gap: 2px; }
+.dup-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 4px 0; border-top: 1px solid var(--rk-hairline); }
+.dup-row.sub { padding-left: 18px; }
+.dup-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

package/dist/views/membrane.css

@@ -0,0 +1,23 @@
+/* Membrane section (#386). Scoped under .ck-membrane; tokens come from styles.css. */
+.ck-membrane { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: auto; padding: 14px 18px 18px; scroll-padding: 12px; }
+.ck-membrane > * { flex: none; }
+.ck-membrane :focus-visible { outline: 2px solid var(--rk-focus, var(--rk-accent)); outline-offset: 2px; border-radius: 6px; }
+.ck-membrane h2 { margin: 0 0 6px 2px; font-size: 13px; font-weight: 600; color: var(--rk-ink); }
+.ck-membrane p { margin: 0; }
+.ck-membrane .muted { color: var(--rk-ink-2); font-size: 12px; }
+.ck-membrane-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
+.ck-membrane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.ck-membrane-head h2 { margin: 0; }
+.ck-membrane-kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 12px; align-items: baseline; }
+.ck-membrane-kv dt { color: var(--rk-ink-2); }
+.ck-membrane-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.ck-membrane-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+.ck-membrane-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 2px; border-top: 1px solid var(--rk-hairline); font-size: 12px; }
+.ck-membrane-row:first-child { border-top: 0; }
+.ck-membrane-path { overflow-wrap: anywhere; color: var(--rk-ink); }
+.ck-membrane-error { color: var(--rk-danger, var(--rk-ink)); font-size: 12px; }
+.ck-membrane-log { margin: 0; max-height: 320px; overflow: auto; padding: 10px 12px; border-radius: 8px; background: var(--rk-surface-2, transparent); border: 1px solid var(--rk-hairline); font-size: 11px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--rk-ink); }
+@media (max-width: 560px) {
+  .ck-membrane-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
+  .ck-membrane-kv { grid-template-columns: 90px minmax(0, 1fr); }
+}

package/dist/views/monitor.css

@@ -0,0 +1,99 @@
+/* Graphs on Overview and Monitor. Tokens come from styles.css and the shell. */
+.chart-spark { display: block; width: 100%; overflow: visible; }
+.chart-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
+.chart-dashed { stroke-dasharray: 4 3; }
+.chart-fill { fill: currentColor; fill-opacity: 0.14; stroke: none; }
+.chart-grid { stroke: var(--rk-hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
+.chart-base { stroke: var(--rk-ink-3); stroke-opacity: 0.5; }
+
+.chart { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.chart-plot { position: relative; flex: 1; min-width: 0; touch-action: pan-y; }
+.chart-svg { display: block; width: 100%; height: 100%; overflow: visible; }
+.chart-row { display: flex; gap: 6px; min-width: 0; }
+.chart-yaxis { flex: none; width: 50px; display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 11px; line-height: 1; color: var(--rk-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.chart-rule { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: var(--rk-ink-2); pointer-events: none; }
+.chart-tip { position: absolute; top: 4px; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 4px 8px; border: 1px solid var(--rk-hairline); border-radius: 6px; background: var(--rk-plane); color: var(--rk-ink); font-size: 12px; line-height: 1.35; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
+.chart-tip-time { color: var(--rk-ink-2); }
+.chart-tip-row { display: inline-flex; align-items: center; gap: 6px; }
+.chart-tip-row i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
+.chart-axis { display: flex; justify-content: space-between; padding-left: 56px; font-size: 11px; color: var(--rk-ink-3); }
+
+.monitor-charts { display: flex; flex-direction: column; gap: 10px; flex: none; }
+.monitor-charts-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; font-size: 11px; color: var(--rk-ink-3); }
+/* One symmetric row of three compact cards, so the process table stays in view (#415). */
+.monitor-charts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
+.monitor-chart-card .chart-yaxis { display: none; }
+/* The time axis repeats the caption above the row ("History, last 15 minutes"), so the cards drop it (#415). */
+.monitor-chart-card .chart-axis { display: none; }
+.monitor-chart-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 10px; border: 1px solid var(--rk-hairline); border-radius: 12px; background: var(--rk-panel, var(--rk-fill-2)); }
+.monitor-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; min-width: 0; font-size: 12px; color: var(--rk-ink-2); }
+.monitor-chart-now { color: var(--rk-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
+.monitor-legend { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11px; color: var(--rk-ink-2); }
+.monitor-legend span { display: inline-flex; align-items: center; gap: 5px; }
+.monitor-legend i { display: inline-block; width: 12px; height: 0; border-top: 2px solid; }
+.monitor-legend i.dashed { border-top-style: dashed; }
+.monitor-waiting { padding: 8px 0; font-size: 12px; }
+
+/* The page scrolls as a whole once charts sit above the process table. */
+.monitor-view { overflow: auto; flex-wrap: nowrap; }
+.monitor-view .mon-list { flex: none; overflow: visible; }
+
+.monitor-notice { display: flex; flex-direction: column; gap: 2px; flex: none; padding: 10px 12px; border: 1px solid var(--rk-hairline); border-radius: 12px; background: var(--rk-panel, var(--rk-fill-2)); }
+.monitor-notice.warn { border-color: var(--rk-warn); }
+.monitor-notice.bad { border-color: var(--rk-bad); }
+.monitor-notice.calm { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; padding: 4px 2px; border: 0; background: none; }
+.monitor-notice.calm h2 { font-size: 13px; }
+.monitor-notice h2 .ok { color: var(--rk-ok); }
+.monitor-notice h2 .warn { color: var(--rk-warn); }
+.monitor-notice h2 .bad { color: var(--rk-bad); }
+.monitor-notice p { margin: 0; font-size: 12px; color: var(--rk-ink-2); overflow-wrap: anywhere; }
+.monitor-h2 { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 650; color: var(--rk-ink); }
+.monitor-charts-head .monitor-h2 { font-size: 15px; }
+.monitor-notice h2 { margin: 0; font-size: 15px; font-weight: 650; color: var(--rk-ink); }
+.monitor-meta { flex: 0 1 auto; white-space: normal; }
+.monitor-view .mon-section { flex-wrap: wrap; }
+.monitor-view .caption { flex: none; margin: 0; }
+
+/* Threads and Started sit between Memory and Actions; Actions also holds Reveal. */
+.monitor-view .mon-cols { grid-template-columns: minmax(0, 1fr) 56px 84px 64px 76px 312px; }
+/* The five fixed columns need about 660px on their own. In a narrower window the name used to
+   shrink to nothing, so there the actions move to their own line under the row and the name
+   keeps the space. */
+.monitor-view .mon-list { container-type: inline-size; }
+@container (max-width: 860px) {
+  .monitor-view .mon-cols { grid-template-columns: minmax(120px, 1fr) 56px 84px 64px 76px; row-gap: 4px; }
+  .monitor-view .mon-cols > .mon-actions { grid-column: 1 / -1; flex-wrap: wrap; }
+  .monitor-view .mon-head > :nth-child(6), .monitor-view .mon-member > :nth-child(6) { display: none; }
+}
+.monitor-view .mon-head [role="columnheader"] { display: flex; min-width: 0; }
+.monitor-view .mon-head [role="columnheader"].mon-num { justify-content: flex-end; }
+.monitor-view .mon-sort {
+  display: inline-flex; align-items: center; gap: 3px; min-width: 0; height: 24px; padding: 0 6px; margin: 0 -6px;
+  border-radius: 6px; color: var(--rk-ink-2); font: inherit; font-size: 11px;
+}
+.monitor-view .mon-sort[aria-current="true"] { color: var(--rk-ink); font-weight: 600; }
+.monitor-view .mon-sort:hover { color: var(--rk-ink); background: var(--rk-fill-2); }
+.monitor-view .mon-sort:active { color: var(--rk-ink); background: var(--rk-plane); box-shadow: inset 0 0 0 1px var(--rk-hairline); }
+
+/* Inspect panel: one process, read when asked. Lists scroll inside the panel; paths stay selectable. */
+.monitor-view .mon-inspect { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 2px 0 6px; padding: 10px 12px; border: 1px solid var(--rk-hairline); border-radius: 10px; background: var(--rk-panel, var(--rk-fill-2)); }
+.monitor-view .mon-inspect-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; min-width: 0; }
+.monitor-view .mon-inspect-title { margin: 0; font-size: 13px; font-weight: 650; color: var(--rk-ink); overflow-wrap: anywhere; }
+.monitor-view .mon-inspect-actions { display: inline-flex; gap: 6px; flex: none; }
+.monitor-view .mon-inspect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 14px; min-width: 0; }
+.monitor-view .mon-inspect-h { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--rk-ink-2); }
+.monitor-view .mon-inspect-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; max-height: 220px; overflow: auto; list-style: none; font-size: 12px; font-variant-numeric: tabular-nums; }
+.monitor-view .mon-inspect-port { display: grid; grid-template-columns: 56px 48px minmax(0, 1fr); gap: 8px; min-width: 0; }
+.monitor-view .mon-inspect-path { min-width: 0; overflow-wrap: anywhere; color: var(--rk-ink); user-select: text; }
+.monitor-view .mon-inspect-notes { margin: 0; padding-left: 16px; }
+.monitor-view .mon-inspect p { margin: 0; }
+
+/* Per-process history in the Inspect panel: kept only while the Monitor page is open. */
+.monitor-view .mon-history { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.monitor-view .mon-history .mon-inspect-h { margin: 0; }
+.monitor-view .mon-spark-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; min-width: 0; }
+.monitor-view .mon-spark-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.monitor-view .mon-spark-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--rk-ink-2); }
+.monitor-view .mon-spark-now { color: var(--rk-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
+.monitor-view .mon-spark { height: 32px; color: var(--rk-accent); }
+.monitor-view .mon-spark-range { font-variant-numeric: tabular-nums; }

package/dist/views/settings.css

@@ -0,0 +1,176 @@
+/* Settings pages (v2.1): grouped cards, one row per setting, local status beside the control.
+   Tokens come from the app shell and styles.css. Every class here is scoped under .ck-settings. */
+.ck-settings { overflow: auto; gap: 14px; padding: 14px 18px 18px; scroll-padding: 12px; }
+.ck-settings > * { flex: none; }
+.ck-settings :focus-visible { outline: 2px solid var(--rk-focus, var(--rk-accent)); outline-offset: 2px; border-radius: 6px; }
+
+.ck-settings .ck-sgroup { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 0; }
+.ck-settings .ck-sgroup > h2 { margin: 0 0 0 2px; font-size: 13px; font-weight: 600; color: var(--rk-ink); }
+.ck-settings .ck-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--rk-hairline); border-radius: 12px; background: var(--rk-panel, var(--rk-fill-2)); box-shadow: none; }
+.ck-settings .ck-card > * + * { border-top: 1px solid var(--rk-hairline); }
+.ck-settings .ck-card > .ck-foot { border-top: 0; margin-top: -6px; padding: 0 14px 10px; }
+.ck-settings .ck-card > .ck-foot + .ck-set,
+.ck-settings .ck-card > .ck-foot + .ck-account,
+.ck-settings .ck-card > .ck-foot + .ck-permrow { border-top: 1px solid var(--rk-hairline); }
+
+.ck-settings .ck-sub,
+.ck-settings .rk-sr__desc { margin-top: 0; color: var(--rk-ink-2); font-size: 12px; line-height: 1.45; }
+.ck-settings .ck-num { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
+.ck-settings .error { color: var(--rk-bad); font-size: 12px; overflow-wrap: anywhere; }
+.ck-settings > .error { padding: 8px 12px; border-radius: 8px; background: var(--rk-bad-soft); }
+
+/* Claude accounts under the Claude row: one compact hairline-separated list, a row per account */
+.ck-settings .ck-claude-list { flex: 0 0 auto; width: calc(100% + 28px); display: flex; flex-direction: column; margin: 0 -14px -8px; border-top: 1px solid var(--rk-hairline); }
+.ck-settings .ck-claude-account { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 44px; padding: 4px 14px; overflow: hidden; }
+.ck-settings .ck-claude-account + .ck-claude-account { border-top: 1px solid var(--rk-hairline); }
+.ck-settings .ck-claude-account .ck-account-name { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; gap: 8px; }
+.ck-settings .ck-claude-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 2px 4px; margin: 0 -4px; border-radius: 6px; color: var(--rk-ink); font: inherit; font-weight: 600; cursor: text; }
+.ck-settings .ck-claude-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ck-settings .ck-claude-name svg { flex: none; opacity: .4; color: var(--rk-ink-3); }
+.ck-settings .ck-claude-account:hover .ck-claude-name svg,
+.ck-settings .ck-claude-name:focus-visible svg { opacity: 1; }
+.ck-settings .ck-claude-name:hover { background: var(--rk-fill-2); }
+.ck-settings .ck-claude-edit { width: 200px; min-height: 28px; padding: 2px 8px; font-weight: 600; }
+.ck-settings .ck-claude-plan, .ck-settings .ck-claude-asof { white-space: nowrap; }
+.ck-settings .ck-forget { width: 22px; height: 22px; opacity: 0; }
+.ck-settings .ck-claude-account:hover .ck-forget,
+.ck-settings .ck-forget:focus-visible { opacity: 1; }
+.ck-settings .ck-forget:hover { background: var(--rk-fill-2); color: var(--rk-bad); }
+.ck-settings .ck-claude-meters { flex: 1 1 400px; display: flex; gap: 16px; min-width: 0; max-width: 60%; }
+.ck-settings .ck-claude-none { text-align: right; }
+.ck-settings .ck-claude-win { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+.ck-settings .ck-claude-head { display: flex; align-items: baseline; gap: 6px; line-height: 16px; white-space: nowrap; }
+.ck-settings .ck-claude-head .ck-sub { line-height: 16px; font-size: 11px; }
+.ck-settings .ck-claude-eta { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
+.ck-settings .ck-claude-value { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--rk-ink); }
+.ck-settings .ck-claude-bar-off { display: block; height: 4px; border-radius: 2px; background: var(--rk-fill-2); }
+.ck-settings .ck-claude-unseen { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-top: 1px solid var(--rk-hairline); color: var(--rk-ink-3); font: inherit; font-size: 12px; text-align: left; }
+.ck-settings .ck-claude-unseen:hover { color: var(--rk-ink); }
+.ck-settings .ck-claude-unseen + .ck-claude-account { border-top: 1px solid var(--rk-hairline); }
+
+/* Rows */
+.ck-settings .ck-set,
+.ck-settings .ck-account { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 48px; padding: 8px 14px; border-bottom: 0; }
+.ck-settings .ck-text,
+.ck-settings .rk-sr__text { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
+.ck-settings .ck-text > strong,
+.ck-settings .rk-sr__label { font-weight: 500; color: var(--rk-ink); }
+.ck-settings .ck-ctl,
+.ck-settings .rk-sr__control { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; min-width: 0; }
+.ck-settings .ck-ctl .error { flex-basis: 100%; text-align: right; }
+/* Not the RightKit toggle: it is a <button> with a fixed 22px track, and a taller
+   min-height stretches the track while the knob stays pinned 2px from the top. */
+.ck-settings .ck-ctl button:not(.rk-toggle),
+.ck-settings .ck-line button:not(.rk-toggle),
+.ck-settings .ck-savebar button:not(.rk-toggle) { min-height: 32px; }
+.ck-settings .ck-ctls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
+.ck-settings .ck-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
+.ck-settings .ck-line.ck-inline { justify-content: flex-end; }
+.ck-settings .ck-line > .ck-input { flex: 1 1 140px; }
+.ck-settings .ck-line > .ck-path { flex: 1 1 200px; overflow-wrap: anywhere; }
+.ck-settings .ck-foot.ck-line { align-items: center; }
+.ck-settings .ck-stack { flex-direction: column; align-items: stretch; }
+.ck-settings .ck-stack > .ck-text { flex: none; }
+/* A remote approval's whole summary (up to 1600 characters): wrapped, never cut; a long one scrolls inside a capped box. */
+.ck-settings .ck-approval-summary { margin: 4px 0; max-height: 160px; overflow-y: auto; overflow-x: hidden; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.45; color: var(--rk-ink-2); }
+.ck-settings .ck-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.ck-settings .ck-savebar { flex-wrap: nowrap; justify-content: space-between; }
+.ck-settings .ck-subgroup { display: flex; flex-direction: column; }
+.ck-settings .ck-subgroup > .ck-set { border-top: 1px solid var(--rk-hairline); }
+.ck-settings .ck-subhead { padding: 8px 14px 0; font-size: 12px; font-weight: 600; color: var(--rk-ink-2); }
+.ck-settings .ck-keys { min-width: 96px; }
+.ck-settings .ck-indent { margin-left: 12px; overflow-wrap: anywhere; }
+.ck-settings .ck-about { padding: 0 2px; }
+.ck-settings .ck-lead { padding: 8px 12px; border-radius: 8px; font-size: 12px; background: var(--rk-fill-2); color: var(--rk-ink-2); }
+.ck-settings .ck-card > .ck-lead { margin: 10px 14px; border-top: 0; }
+.ck-settings .ck-card > .ck-lead + .ck-permrow { border-top: 0; }
+.ck-settings .ck-lead.ck-tone-ok { background: var(--rk-ok-soft); color: var(--rk-ok); }
+.ck-settings .ck-lead.ck-tone-warn { background: var(--rk-warn-soft); color: var(--rk-warn); }
+.ck-settings .ck-tone-ok { color: var(--rk-ok); }
+.ck-settings .ck-tone-warn { color: var(--rk-warn); }
+.ck-settings .ck-tone-bad { color: var(--rk-bad); }
+.ck-settings .ck-lead.ck-tone-ok, .ck-settings .ck-lead.ck-tone-warn { font-weight: 500; }
+
+/* Permissions: the row's own border replaces the group's */
+.ck-settings .ck-permrow > .ck-set { border-top: 0; }
+.ck-settings .ck-permrow > .ck-foot { padding: 0 14px 10px; }
+.ck-settings .ck-stale { display: flex; flex-direction: column; gap: 2px; padding: 4px 14px; }
+.ck-settings .ck-stale-check { min-height: 32px; margin-left: 12px; }
+
+/* Status: always text, colour only reinforces it */
+.ck-settings .ck-status { display: inline-block; border-radius: 6px; padding: 2px 8px; font-size: 12px; line-height: 1.4; white-space: nowrap; background: var(--rk-fill-2); color: var(--rk-ink-2); border: 1px solid var(--rk-hairline); }
+.ck-settings .ck-status-granted { background: var(--rk-ok-soft); color: var(--rk-ok); border-color: transparent; }
+.ck-settings .ck-status-needsApproval { background: var(--rk-warn-soft); color: var(--rk-warn); border-color: transparent; }
+
+/* Accounts */
+.ck-settings .ck-account-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.ck-settings .ck-account-name > strong { font-weight: 600; color: var(--rk-ink); }
+.ck-settings .ck-account-actions { margin-top: 6px; }
+.ck-settings .ck-account .ck-ctl { flex-wrap: nowrap; gap: 12px; }
+.ck-settings .ck-order { display: flex; gap: 4px; }
+
+/* Inputs */
+.ck-settings .rk-select { min-width: 120px; max-width: 100%; }
+.ck-settings .ck-input { min-width: 0; }
+.ck-settings .ck-input-name { width: 220px; max-width: 100%; }
+/* Multi-line lists stay plain textareas; single-line fields are the shell's Input. */
+.ck-settings textarea.ck-input { width: 100%; min-height: 32px; min-width: 0; padding: 4px 10px; border: 1px solid var(--ck-control-line, var(--rk-hairline)); border-radius: 8px; background: var(--rk-plane); color: var(--rk-ink); font: inherit; resize: vertical; line-height: 1.4; }
+.ck-settings textarea.ck-input::placeholder { color: var(--rk-ink-3); }
+.ck-settings textarea.ck-input:focus-visible { border-color: var(--rk-accent); }
+.ck-settings .ck-slider { display: flex; align-items: center; gap: 10px; min-height: 32px; }
+.ck-settings .ck-slider input { width: 140px; }
+
+@media (max-width: 860px) {
+  .ck-settings { padding: 12px 14px 16px; gap: 12px; }
+}
+@media (forced-colors: active) {
+  .ck-settings .ck-card, .ck-settings .ck-status, .ck-settings .ck-input { border: 1px solid CanvasText; }
+  .ck-settings :focus-visible { outline: 2px solid Highlight; }
+}
+
+/* The Chat chat list: grouped by computer, Claude live, Codex recent. */
+.ck-settings .ck-chats { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 12px; }
+.ck-settings .ck-chats-head { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--rk-ink); display: flex; gap: 8px; align-items: baseline; }
+.ck-settings .ck-chats-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+.ck-settings .ck-chats-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 160px) 120px; align-items: center; gap: 8px; min-height: 24px; font-size: 12px; }
+.ck-settings .ck-chats-kind { font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; text-align: center; }
+.ck-settings .ck-chats-kind-claude { background: color-mix(in srgb, var(--rk-accent) 18%, transparent); color: var(--rk-ink); }
+.ck-settings .ck-chats-kind-codex { background: var(--rk-fill-2); color: var(--rk-ink-2); }
+.ck-settings .ck-chats-kind-muse { background: var(--rk-plane); color: var(--rk-ink); box-shadow: inset 0 0 0 1px var(--rk-line-strong); }
+.ck-settings .ck-chats-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ck-settings .ck-chats-folder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rk-ink-2); }
+.ck-settings .ck-chats-when { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; font-size: 11px; color: var(--rk-ink-3); }
+.ck-settings .ck-chats-status { font-size: 11px; color: var(--rk-ink-3); }
+.ck-settings .ck-chats-status-busy { color: var(--rk-ink); }
+.ck-settings .ck-chats-more { padding-left: 60px; }
+.ck-settings .ck-chats-inbox { grid-column: 2 / -1; font-size: 11px; }
+
+/* Nearby devices: one row per device with a name, a note line and Allow / Ask / Deny. */
+.ck-settings .ck-device { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 48px; padding: 8px 14px; }
+.ck-settings .ck-device .ck-text { flex: 1 1 240px; min-width: 0; }
+.ck-settings .ck-device .ck-ctl { flex-wrap: nowrap; gap: 12px; }
+.ck-settings .ck-device:hover .ck-claude-name svg,
+.ck-settings .ck-device:hover .ck-forget { opacity: 1; }
+
+/* Search: a box above the sections; while it has text every section shows only its matching rows. */
+.ck-settings .ck-search { display: flex; align-items: center; gap: 8px; position: sticky; top: -14px; z-index: 2; margin: -14px -18px 0; padding: 14px 18px 8px; background: var(--rk-plane); }
+.ck-settings .ck-search .ck-input { flex: 1 1 auto; min-width: 0; }
+.ck-settings .ck-search-none { padding: 4px 2px; }
+.ck-settings .ck-search-section { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; }
+.ck-settings .ck-search-section > .rk-settings__result-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; border-bottom: 1px solid var(--rk-hairline); padding-bottom: 4px; }
+.ck-settings .ck-search-section .rk-settings__result-title { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rk-ink-3); }
+.ck-settings .ck-mark { background: color-mix(in srgb, var(--rk-accent) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
+/* Footnotes and the about line belong to the page, not to a result. */
+.ck-settings .ck-search-section .ck-foot:not([role="alert"]),
+.ck-settings .ck-search-section .ck-about { display: none; }
+@media (max-width: 860px) {
+  .ck-settings .ck-search { margin: -12px -14px 0; padding: 12px 14px 8px; top: -12px; }
+}
+
+/* Blocked apps: the list is also the drop target for a .app, .exe or .lnk. */
+.ck-settings .ck-drop { display: flex; flex-direction: column; min-height: 44px; margin: 4px 0 8px; padding: 4px 12px; border: 1px dashed var(--rk-hairline); border-radius: 8px; justify-content: center; }
+.ck-settings .ck-drop.ck-drop-over { border-color: var(--rk-accent, currentColor); }
+.ck-settings .ck-drop .ck-set { border-top: 0; }
+/* Each switch row takes the full width, so every switch sits in one column at the right (#413). */
+.ck-onboarding-features .ck-set > .ck-line { flex: 1 1 100%; flex-wrap: nowrap; }
+.ck-onboarding-features .ck-line > div:first-child { flex: 1 1 0; min-width: 0; }