/* Redesign preview, step 4: Tool Store and its dialogs. Loaded after
   redesign.css and built on its --rd-* tokens. Every rule sits under
   .kairos-redesign, so with the switch off the store is untouched. The same
   markup and behaviour; only the look changes. Dialogs are body-level panels,
   so they are matched by the .tool-store-dialog hook (tool-store.js), by
   .store-publish-panel, and by the builder form inside a panel. */

.kairos-redesign {
  --rdt-ok-fill: rgba(var(--success-rgb), .14);
  --rdt-warn-fill: color-mix(in srgb, var(--point) 18%, transparent);
  --rdt-err-fill: rgba(var(--danger-rgb), .12);
  --rdt-note: color-mix(in srgb, var(--rd-surface-2) 70%, transparent);
  --rdt-divider: color-mix(in srgb, var(--point) 20%, transparent);
}

/* -- Page header ------------------------------------------------------------- */
.kairos-redesign .tool-store-view { max-width: 1120px; margin: 0 auto; padding: 32px 36px 64px; }
.kairos-redesign .tool-store-view .view-header { padding-bottom: 0; margin-bottom: 0; }
.kairos-redesign .tool-store-view .view-header > div::before {
  content: "Intelligence"; display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--rd-ink-dim);
}
.kairos-redesign .tool-store-view .view-header h2 { margin: 4px 0 0; font-size: clamp(38px, 5vw, 52px); line-height: 1.02; }
.kairos-redesign .tool-store-view .view-header .sub { max-width: 620px; margin-top: 8px; font-size: 14px; }

/* -- Search, category tray, added only -------------------------------------- */
.kairos-redesign .tool-store-toolbar { gap: 10px; margin: 20px 0 12px; }
.kairos-redesign .tool-store-search {
  height: 40px; padding: 0 16px; border-radius: var(--rd-radius-pill); font-size: 14px;
  background-color: var(--rd-surface-solid); border: 1px solid var(--rd-line);
}
.kairos-redesign .tool-store-filters {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; margin: 0; border-radius: var(--rd-radius-pill);
  border: 0; background: rgba(var(--ink-rgb), .06);
}
.kairos-redesign .tool-store-filters .segmented-tab {
  min-height: 32px; padding: 0 14px; border-radius: var(--rd-radius-pill); font-size: 13px; color: var(--rd-ink-dim);
}
.kairos-redesign .tool-store-filters .segmented-tab.active {
  background: var(--rd-surface-solid); color: var(--rd-ink); font-weight: 500; box-shadow: 0 1px 2px rgba(var(--shade-rgb), .12);
}
.kairos-redesign .tool-store-filters .segmented-tab:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 1px; }
.kairos-redesign .tool-store-installed { font-size: 13px; color: var(--rd-ink); }
.kairos-redesign .tool-store-summary { gap: 10px 16px; min-height: 0; margin-bottom: 4px; align-items: flex-start; flex-direction: column-reverse; }
.kairos-redesign .tool-store-summary > .meta { font-size: 12px; color: var(--rd-ink-dim); }
.kairos-redesign .tool-store-manage { gap: 6px; }
.kairos-redesign .tool-store-manage .btn { min-height: 36px; padding: 0 14px; font-size: 13px; }
.kairos-redesign .tool-store-manage .btn.quiet {
  background: var(--rd-surface-solid); border: 1px solid var(--rd-line-strong); color: var(--rd-ink);
}
.kairos-redesign .tool-store-manage .btn.quiet:hover:not(:disabled) { background: var(--rd-surface-2); }

/* -- Update banner ----------------------------------------------------------- */
.kairos-redesign .tool-store-update-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0 4px; padding: 12px 16px;
  border-radius: 14px; background: var(--rd-surface-solid); border: 1px solid var(--rd-line-strong);
}
.kairos-redesign .tool-store-update-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--point); flex: none; }
.kairos-redesign .tool-store-update-text { flex: 1 1 240px; font-size: 14px; }
.kairos-redesign .tool-store-update-banner .btn { min-height: 34px; padding: 0 14px; font-size: 12.5px; }

/* -- Section labels ----------------------------------------------------------- */
.kairos-redesign .tool-store-heading {
  margin: 24px 0 10px; padding: 0 4px; font-size: var(--rd-label-size); font-weight: 500;
  letter-spacing: var(--rd-label-tracking); text-transform: uppercase; color: var(--rd-ink-dim);
}
.kairos-redesign .tool-store-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }

/* -- Cards ---------------------------------------------------------------------- */
.kairos-redesign .tool-store-card {
  gap: 0; padding: 14px 16px; border-radius: 14px; background-color: var(--rd-surface);
  border: 1px solid var(--rd-line); box-shadow: var(--rd-shadow);
}
.kairos-redesign .tool-store-card:hover { border-color: var(--rd-line-strong); }
.kairos-redesign .tool-store-card-top { order: 0; position: absolute; top: 14px; right: 16px; }
.kairos-redesign .tool-store-card { position: relative; }
.kairos-redesign .tool-store-mark { display: none; }
/* Add-on, creative-tool and Roblox cards put the status pill straight in the card; seat it top right like the rest. */
.kairos-redesign .tool-store-card > .tool-store-badge { position: absolute; top: 14px; right: 16px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.kairos-redesign .tool-store-card h4 { margin: 0 0 6px; padding-right: 110px; font-size: 14px; font-weight: 500; color: var(--rd-ink); }
.kairos-redesign .tool-store-card[data-skill] h4,
.kairos-redesign .tool-store-card:has(.tool-store-version, .tool-store-card-foot > .meta) h4 { font-family: var(--font-mono, "Cascadia Code", Consolas, monospace); font-size: 13.5px; }
.kairos-redesign .tool-store-card p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--rd-ink-dim); }
.kairos-redesign .tool-store-card .meta { font-size: 12px; color: var(--rd-ink-dim); }
.kairos-redesign .tool-store-card-foot { flex-wrap: wrap; justify-content: flex-start; gap: 6px; min-height: 0; margin-top: auto; }
.kairos-redesign .tool-store-card-foot > .meta,
.kairos-redesign .tool-store-card-foot > .tool-store-version,
.kairos-redesign .tool-store-card-foot > a:first-child { flex: 1 0 100%; font-size: 11.5px; color: var(--rd-ink-faint); order: -1; }
.kairos-redesign .tool-store-card .btn {
  min-height: 30px; padding: 0 12px; font-size: 12px; border-radius: var(--rd-radius-pill);
}
.kairos-redesign .tool-store-card .btn:not(.primary):not(.danger) {
  background: var(--rd-surface-solid); border: 1px solid var(--rd-line-strong); color: var(--rd-ink);
}
.kairos-redesign .tool-store-card .btn.quiet.danger,
.kairos-redesign .tool-store-card .btn.danger {
  background: transparent; border: 1px solid var(--rd-line-strong); color: var(--danger);
}
.kairos-redesign .tool-store-card .btn.danger:hover:not(:disabled) { background: var(--rdt-err-fill); }
.kairos-redesign .tool-store-card .tool-store-action .btn:not(.quiet):not(.danger),
.kairos-redesign .tool-store-card .tool-store-card-foot > .btn.primary,
.kairos-redesign .tool-store-card .tool-store-health + .tool-store-card-foot .tool-store-action .btn:not(.quiet) {
  background: var(--rd-primary-bg); color: var(--rd-primary-fg); border-color: transparent;
}
.kairos-redesign .tool-store-card .btn:disabled { opacity: .5; }
.kairos-redesign .tool-store-card-foot a, .kairos-redesign .tool-store-action a {
  color: var(--rd-ink); text-decoration: underline; text-decoration-color: var(--rd-line-strong); text-underline-offset: 2px;
}
.kairos-redesign .tool-store-action { justify-content: flex-start; }
.kairos-redesign .tool-store-card-foot > .tool-store-action { order: 0; }

/* Badges are filled status pills. */
.kairos-redesign .tool-store-badge {
  padding: 2px 8px; font-size: 11px; background: var(--rdt-ok-fill); color: var(--rd-ink);
}
.kairos-redesign .tool-store-badge.muted { background: var(--rd-surface-2); color: var(--rd-ink-dim); }
.kairos-redesign .tool-store-badge.blocked { background: var(--rdt-err-fill); color: var(--danger); }
.kairos-redesign .tool-store-card .pill, .kairos-redesign .tool-store-card-top .pill { font-size: 11px; }

/* Health and held tools sit as quiet notes inside the card. */
.kairos-redesign .tool-store-health { margin: 0 0 8px; font-size: 12px; color: var(--rd-ink-dim); }
.kairos-redesign .tool-store-health.health-working span { color: var(--rd-ink-dim); }
.kairos-redesign .tool-store-health .btn { min-height: 26px; padding: 0 10px; }
.kairos-redesign .tool-store-held {
  margin: 0 0 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--rdt-warn-fill); color: var(--rd-ink); font-size: 12px;
}
.kairos-redesign .tool-store-held .title { color: var(--rd-ink); font-size: 12px; font-weight: 500; }
.kairos-redesign .tool-store-held-tool { padding-top: 6px; border-top: 1px solid var(--rdt-divider); }
.kairos-redesign .tool-store-held .btn { min-height: 26px; }
.kairos-redesign .tool-store-held > .btn { background: var(--rd-primary-bg); color: var(--rd-primary-fg); border-color: transparent; }

/* Tab cards: status pill on top, then the build-your-own card, dashed. */
.kairos-redesign .tool-store-card-top .pill { position: static; }
.kairos-redesign .tool-store-card[data-tab-slug] .tool-store-card-foot { margin-top: 8px; }
.kairos-redesign .tool-store-card[data-tab-slug] p { margin-bottom: 8px; }
.kairos-redesign .tool-store-card p.tool-store-tab-reason { color: var(--danger); }
.kairos-redesign .tool-store-build-card { border-style: dashed; justify-content: center; }
.kairos-redesign .tool-store-build-card h4 { padding-right: 0; }
.kairos-redesign .tool-store-broken { border-color: rgba(var(--danger-rgb), .35); }

.kairos-redesign .tool-store-notice, .kairos-redesign .tool-store-empty {
  border-radius: 14px; border: 1px solid var(--rd-line); background: var(--rd-surface); color: var(--rd-ink-dim);
}

/* -- GitHub account chip and submissions -------------------------------------- */
.kairos-redesign .store-github { margin: 0 0 14px; }
.kairos-redesign .store-github-strip {
  display: inline-flex; margin-bottom: 8px; padding: 6px 12px; border-radius: 14px; font-size: 12px;
  background: var(--rd-surface-solid); border: 1px solid var(--rd-line-strong);
}
.kairos-redesign .store-github-strip .btn { min-height: 26px; padding: 0 10px; font-size: 12px; }
.kairos-redesign .store-github h4 {
  margin: 10px 0 6px; font-size: var(--rd-label-size); font-weight: 500; letter-spacing: var(--rd-label-tracking);
  text-transform: uppercase; color: var(--rd-ink-dim);
}
.kairos-redesign .store-github a, .kairos-redesign .store-publish-panel a { color: var(--rd-ink); text-decoration: underline; text-underline-offset: 2px; }
.kairos-redesign .store-device-code { font-family: var(--font-mono, "Cascadia Code", Consolas, monospace); font-size: 16px; }
.kairos-redesign .store-submission .tool-store-badge { background: var(--rdt-warn-fill); }
.kairos-redesign .submission-merged { background: var(--rdt-ok-fill); }
.kairos-redesign .submission-closed { background: var(--rd-surface-2); color: var(--rd-ink-dim); }

/* -- Dialogs ------------------------------------------------------------------- */
.kairos-redesign .modal-backdrop:has(> :is(.tool-store-dialog, .store-publish-panel, .panel-dialog:has(.tab-build-form))) {
  background: rgba(var(--shade-rgb), .32);
}
.kairos-redesign .panel-dialog:is(.tool-store-dialog, .store-publish-panel, :has(.tab-build-form)) {
  gap: 12px; padding: 20px 22px; border-radius: 20px; background: var(--rd-surface-solid);
  border: 1px solid var(--rd-line-strong); box-shadow: 0 24px 60px rgba(var(--shade-rgb), .22);
  font-size: 13px; color: var(--rd-ink);
}
.kairos-redesign .panel-dialog:is(.tool-store-dialog, .store-publish-panel, :has(.tab-build-form)) .modal-header {
  margin: 0; align-items: flex-start; font-family: var(--rd-font-title); font-style: italic; font-weight: 500;
  font-size: 28px; line-height: 1.1; color: var(--rd-ink);
}
.kairos-redesign .panel-dialog:is(.tool-store-dialog, .store-publish-panel, :has(.tab-build-form)) .modal-close-btn {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rd-line-strong);
  background: var(--rd-surface-solid); color: var(--rd-ink); font-family: var(--rd-font-ui); font-style: normal; font-size: 16px; line-height: 1;
}
.kairos-redesign .panel-dialog:is(.tool-store-dialog, .store-publish-panel, :has(.tab-build-form)) .modal-close-btn:hover { background: var(--rd-surface-2); }
.kairos-redesign .panel-dialog:is(.tool-store-dialog, .store-publish-panel, :has(.tab-build-form)) .modal-close-btn:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; }
.kairos-redesign .tool-store-dialog .modal-footer, .kairos-redesign .store-publish-panel .modal-footer { justify-content: flex-end; }
.kairos-redesign .tool-store-dialog .btn,
.kairos-redesign .store-publish-panel .btn,
.kairos-redesign .panel-dialog:has(.tab-build-form) .btn { min-height: 32px; padding: 0 14px; font-size: 12.5px; }
.kairos-redesign .modal-footer .btn.danger { color: var(--danger); background: transparent; border-color: var(--rd-line-strong); }

/* Notes inside dialogs. */
.kairos-redesign .tool-store-dialog .tool-store-install > p.meta,
.kairos-redesign .tool-store-dialog .tool-store-action,
.kairos-redesign .store-publish-body > .muted {
  padding: 8px 10px; border-radius: 10px; background: var(--rdt-note); color: var(--rd-ink-dim); font-size: 12px; margin: 0 0 12px;
}
.kairos-redesign .tool-store-dialog .tool-store-action:empty { display: none; }
.kairos-redesign .tool-store-dialog .tool-store-action { justify-content: flex-start; flex-wrap: wrap; }
.kairos-redesign .tool-store-dialog .meta { color: var(--rd-ink-dim); font-size: 12px; }

/* Forms: a primary pill beside each field row. */
.kairos-redesign .tool-store-form-row { gap: 8px; align-items: stretch; }
.kairos-redesign .tool-store-form-row > .btn:not(.quiet):not(.primary):not(.danger) { background: var(--rd-primary-bg); color: var(--rd-primary-fg); border-color: transparent; }
.kairos-redesign .tool-store-form-row > .btn:not(.quiet):not(.primary):not(.danger):hover:not(:disabled) { background: var(--rd-primary-hover); }
.kairos-redesign .tool-store-form-row > :is(input, select) { min-height: 34px; border-radius: 10px; font-size: 13px; }
.kairos-redesign .tool-store-install > .btn.quiet { background: transparent; border: 0; padding: 0; min-height: 0; color: var(--rd-ink); text-decoration: underline; text-underline-offset: 2px; }
.kairos-redesign .tool-store-install input[type="file"] { padding: 6px 10px; font-size: 12.5px; }

/* Scan reports and reviews. */
.kairos-redesign .tool-store-scan { padding: 12px; border-radius: 12px; border: 1px solid var(--rd-line-strong); background: transparent; }
.kairos-redesign .tool-store-scan .title { font-weight: 500; margin-bottom: 6px; }
.kairos-redesign .tool-store-scan pre, .kairos-redesign .tool-store-skill-body, .kairos-redesign .tool-store-tab-files {
  font-family: var(--font-mono, "Cascadia Code", Consolas, monospace); font-size: 12px; line-height: 1.55; color: var(--rd-ink);
}
.kairos-redesign .tool-store-skill-body, .kairos-redesign .tool-store-tab-files {
  padding: 12px; border-radius: 12px; background: var(--rdt-note); max-height: 260px; overflow: auto;
}
.kairos-redesign .tool-store-tab-review .tool-store-tab-hash {
  padding: 8px 10px; border-radius: 10px; background: var(--rdt-note); font-family: var(--font-mono, "Cascadia Code", Consolas, monospace); font-size: 12px; color: var(--rd-ink);
}
.kairos-redesign .tool-store-dialog .modal-footer .tool-store-card-foot { flex-wrap: wrap; justify-content: flex-end; }

/* Skill manager: create row, list rows, editor and findings. */
.kairos-redesign .tool-store-manager > .tool-store-heading { display: none; }
.kairos-redesign .tool-store-manager .glass.card {
  background-color: var(--rdt-note); border: 1px solid var(--rdt-divider); border-radius: 14px; box-shadow: none; padding: 12px;
}
.kairos-redesign .tool-store-manager :is(.card-row > input[placeholder] ~ .btn, .card-row:has(> .btn + .btn) > .btn:first-child:not(.danger)):not(.primary):not(.quiet) { background: var(--rd-primary-bg); color: var(--rd-primary-fg); border-color: transparent; }
.kairos-redesign .tool-store-manager #skills-list { margin-top: 12px !important; }
.kairos-redesign .tool-store-manager #skills-list > .glass.card { margin-bottom: 8px; background-color: transparent; border-color: var(--rdt-divider); }
.kairos-redesign .tool-store-manager #skills-list .title { font-family: var(--font-mono, "Cascadia Code", Consolas, monospace); font-size: 13px; font-weight: 600; }
.kairos-redesign .tool-store-manager textarea { font-size: 12px; line-height: 1.5; border-radius: 10px; }
.kairos-redesign .tool-store-manager details { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: var(--rd-surface-solid); }
.kairos-redesign .tool-store-manager details summary { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.kairos-redesign .tool-store-manager .btn.danger { color: var(--danger); background: transparent; }
.kairos-redesign .tool-store-manager .btn.danger[class*=""]:where(:not(.row-action-btn)) { border-color: var(--rd-line-strong); }
.kairos-redesign .empty-state-rich { background: transparent; }

/* Builder and tab builder. */
.kairos-redesign .panel-dialog .tab-build-form { gap: 12px; }
.kairos-redesign .panel-dialog .tab-build-field label { font-size: 12px; color: var(--rd-ink-dim); letter-spacing: 0; }
.kairos-redesign .tab-build-chips { gap: 6px; }
.kairos-redesign .tab-build-chip {
  min-height: 30px; padding: 0 12px; border-radius: var(--rd-radius-pill); font-size: 12px; font-family: var(--rd-font-ui);
  border: 1px solid var(--rd-line-strong); background: var(--rd-surface-solid); color: var(--rd-ink);
}
.kairos-redesign .tab-build-chip:hover { background: var(--rd-surface-2); color: var(--rd-ink); }
.kairos-redesign .tab-build-chip.active { background: var(--rd-primary-bg); color: var(--rd-primary-fg); border-color: transparent; }
.kairos-redesign .tab-build-chip:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; }
.kairos-redesign .tab-build-checkbox-row { color: var(--rd-ink); font-size: 13px; }
.kairos-redesign .tab-build-checkbox-row input { accent-color: var(--rd-ink); }
.kairos-redesign .tab-build-build-btn:not(.primary):not(.quiet):not(.danger) { align-self: flex-end; background: var(--rd-primary-bg); color: var(--rd-primary-fg); border-color: transparent; padding: 0 18px; }
.kairos-redesign .tab-build-build-btn:not(.primary):hover:not(:disabled) { background: var(--rd-primary-hover); }
.kairos-redesign .tab-build-error { font-size: 12.5px; }

/* Share to store. */
.kairos-redesign .store-publish-fields { gap: 10px; }
.kairos-redesign .store-publish-fields .field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--rd-ink-dim); }
.kairos-redesign .store-publish-fields .field:has(textarea) { grid-column: 1 / -1; }
.kairos-redesign .store-publish-preview { border-radius: 12px; border: 0; background: var(--rdt-note); }
.kairos-redesign .store-publish-preview h5 { font-family: var(--font-mono, "Cascadia Code", Consolas, monospace); font-size: 12px; font-weight: 500; }
.kairos-redesign .store-publish-preview pre { font-family: var(--font-mono, "Cascadia Code", Consolas, monospace); }

/* -- Phones --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .kairos-redesign .tool-store-view { padding: 20px 16px 48px; }
  .kairos-redesign .tool-store-view .view-header > div::before { padding-left: 54px; margin-top: 4px; }
  .kairos-redesign .tool-store-view .view-header h2 { font-size: 40px; }
  .kairos-redesign .tool-store-filters { width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .kairos-redesign .tool-store-filters .segmented-tab { min-height: 36px; padding: 0 14px; }
  .kairos-redesign .tool-store-installed { min-height: 36px; }
  .kairos-redesign .tool-store-manage .btn { min-height: 40px; }
  .kairos-redesign .tool-store-grid { grid-template-columns: 1fr; }
  .kairos-redesign .tool-store-card .btn { min-height: 36px; }
  .kairos-redesign .modal-backdrop > .panel-dialog:is(.tool-store-dialog, .store-publish-panel, :has(.tab-build-form)) {
    border-radius: 0; padding: 16px; background: var(--rd-surface-solid); }
  .kairos-redesign .panel-dialog:is(.tool-store-dialog, .store-publish-panel, :has(.tab-build-form)) .modal-header { font-size: 26px; }
}

/* Review files sits above the card actions as a compact pill. */
.kairos-redesign .tool-store-card > .btn { align-self: flex-start; margin-bottom: 6px; }

/* Quiet buttons inside dialogs read as hairline pills (the Advanced link keeps its text style). */
.kairos-redesign :is(.tool-store-dialog, .store-publish-panel) :is(.modal-body, .modal-footer) .btn.quiet:not(.danger):not(.tool-store-install > .btn):not(.tool-store-held *) {
  background: var(--rd-surface-solid); border: 1px solid var(--rd-line-strong); color: var(--rd-ink);
}

/* -- Phone polish ------------------------------------------------------------------------
   Captions and counts that sit straight on the sky get the page title's soft halo,
   and every control a thumb reaches gets a 44px floor. */
@media (max-width: 768px) {
  .kairos-redesign .tool-store-view :is(.tool-store-heading, .tool-store-summary > .meta, .tool-store-installed, .store-github h4) {
    color: var(--rd-ink-dim);
    text-shadow: 0 0 10px rgba(var(--wash-rgb), .95), 0 0 22px rgba(var(--wash-rgb), .8);
  }
  .kairos-redesign .tool-store-view .tool-store-installed { color: var(--rd-ink); }
  .kairos-redesign .tool-store-search { height: 44px; }
  .kairos-redesign .tool-store-filters .segmented-tab,
  .kairos-redesign .tool-store-installed { min-height: 44px; }
  .kairos-redesign .tool-store-manage .btn,
  .kairos-redesign .tool-store-card .btn,
  .kairos-redesign .tool-store-update-banner .btn,
  .kairos-redesign .store-github-strip .btn { min-height: 44px; }
  .kairos-redesign .tool-store-card-foot > a:first-child { display: flex; align-items: center; min-height: 44px; }
  .kairos-redesign .tool-store-health .btn, .kairos-redesign .tool-store-held .btn { min-height: 44px; }
  .kairos-redesign .panel-dialog:is(.tool-store-dialog, .store-publish-panel, :has(.tab-build-form)) .modal-close-btn { width: 44px; height: 44px; }
  .kairos-redesign .tool-store-dialog .btn,
  .kairos-redesign .store-publish-panel .btn,
  .kairos-redesign .panel-dialog:has(.tab-build-form) .btn,
  .kairos-redesign .tool-store-install > .btn.quiet,
  .kairos-redesign .tab-build-chip { min-height: 44px; }
  .kairos-redesign .tool-store-form-row > :is(input, select),
  .kairos-redesign .panel-dialog:has(.tab-build-form) :is(.custom-select-btn, input:not([type=checkbox])) { min-height: 44px; }
  .kairos-redesign .tool-store-manager .row-action-btn { width: 44px; height: 44px; }
}

/* -- Phone Tool Store: app-style rows, bottom sheet, "+" menu ---------------------------
   redesignToolStoreMobile.js decorates the existing cards (tile, pill, chevron, a tap
   target) and lifts the tapped card into a sheet. The decorations are hidden everywhere
   else, so desktop and the switch-off look keep their cards. */
.tool-store-top { display: contents; }
.ts-chips { display: contents; }
.ts-plus, .ts-row-tile, .ts-row-pill, .ts-row-chev, .ts-row-hit, .ts-sheet-backdrop { display: none; }
.tool-store-manage [hidden] { display: none !important; }

@media (max-width: 768px) {
  .kairos-redesign .tool-store-view { padding: 0 0 48px; }
  /* Header: title and "+", search, chip row. Sticky under the page top. */
  .kairos-redesign .tool-store-top {
    display: block; position: sticky; top: calc(-1 * var(--ts-pad-top, 20px)); z-index: 5;
    margin: calc(-1 * var(--ts-pad-top, 20px)) 0 0; padding: 14px 12px 6px; border-radius: 0 0 20px 20px;
    background: color-mix(in srgb, var(--rd-surface-solid) 90%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--rd-line); border-top: 0; box-shadow: var(--rd-shadow);
  }
  .kairos-redesign .tool-store-view .view-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; }
  .kairos-redesign .tool-store-view .view-header > div:first-child { min-width: 0; padding-left: 50px; }
  .kairos-redesign .tool-store-view .view-header > div::before,
  .kairos-redesign .tool-store-view .view-header .sub { display: none; }
  .kairos-redesign .tool-store-view .view-header h2 { margin: 0; font-size: 30px; line-height: 1.1; }
  .kairos-redesign .ts-plus {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
    background: var(--rd-primary-bg); color: var(--rd-primary-fg); border: 0;
  }
  .kairos-redesign .ts-plus:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; }
  .kairos-redesign .ts-plus[aria-expanded="true"] { background: var(--rd-primary-hover); }
  .kairos-redesign .tool-store-toolbar { display: block; margin: 4px 0 0; }
  .kairos-redesign .tool-store-search { display: block; width: 100%; height: 44px; }
  .kairos-redesign .ts-chips {
    display: flex; align-items: center; gap: 8px; margin: 6px -12px 0; padding: 4px 12px; overflow-x: auto; scrollbar-width: none;
  }
  .kairos-redesign .ts-chips::-webkit-scrollbar { display: none; }
  .kairos-redesign .ts-chips[data-more] { -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent); mask-image: linear-gradient(to right, black calc(100% - 36px), transparent); }
  .kairos-redesign .tool-store-filters { display: flex; flex-wrap: nowrap; gap: 8px; padding: 0; width: auto; overflow: visible; background: none; flex: none; }
  .kairos-redesign .tool-store-filters .segmented-tab,
  .kairos-redesign .tool-store-installed {
    position: relative; flex: none; min-height: 36px; padding: 0 14px; border-radius: var(--rd-radius-pill); font-size: 13.5px;
    border: 1px solid var(--rd-line-strong); background: var(--rd-surface-solid); color: var(--rd-ink); white-space: nowrap;
  }
  .kairos-redesign .tool-store-filters .segmented-tab.active,
  .kairos-redesign .tool-store-installed:has(input:checked) {
    background: var(--rd-primary-bg); color: var(--rd-primary-fg); border-color: transparent; box-shadow: none; font-weight: 500;
  }
  /* 36px chips keep a 44px touch area. */
  .kairos-redesign .tool-store-filters .segmented-tab::before,
  .kairos-redesign .tool-store-installed::before { content: ""; position: absolute; inset: -4px -2px; }
  .kairos-redesign .tool-store-installed { display: inline-flex; align-items: center; margin-left: 4px; text-shadow: none; }
  .kairos-redesign .tool-store-installed input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .kairos-redesign .tool-store-installed:has(input:focus-visible) { outline: 2px solid var(--rd-focus); outline-offset: 2px; }
  .kairos-redesign .tool-store-view .tool-store-installed { color: var(--rd-ink); }
  .kairos-redesign .tool-store-view .tool-store-installed:has(input:checked) { color: var(--rd-primary-fg); }

  /* Everything below the header sits in 16px gutters. */
  .kairos-redesign .tool-store-summary { margin: 10px 4px 0; min-height: 0; flex-direction: row; align-items: center; }
  .kairos-redesign .tool-store-view :is(.tool-store-summary > .meta, .tool-store-heading) { text-shadow: none; }
  .kairos-redesign .tool-store-heading { margin: 18px 0 8px; font-size: 11.5px; }
  .kairos-redesign .tool-store-heading[data-ts-group]::before { content: attr(data-ts-group) " · "; }

  /* The "+" menu is the real toolbar buttons in a popover. */
  .kairos-redesign .tool-store-manage { display: none; }
  .kairos-redesign .tool-store-view[data-ts-menu] .tool-store-manage {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: fixed; right: 12px; z-index: 30;
    width: min(300px, calc(100vw - 24px)); padding: 6px; border-radius: 16px;
    background: var(--rd-surface-solid); border: 1px solid var(--rd-line-strong); box-shadow: 0 18px 44px rgba(var(--shade-rgb), .26);
  }
  .kairos-redesign .tool-store-manage .btn,
  .kairos-redesign .tool-store-manage .btn.quiet {
    justify-content: flex-start; min-height: 44px; width: 100%; padding: 0 14px; border: 0; border-radius: 10px; text-align: left;
    background: transparent; color: var(--rd-ink); font-size: 14px;
  }
  .kairos-redesign .tool-store-manage .btn.primary { background: transparent; color: var(--rd-ink); font-weight: 500; }
  .kairos-redesign .tool-store-manage .btn:hover:not(:disabled),
  .kairos-redesign .tool-store-manage .btn:focus-visible { background: var(--rd-surface-2); }
  .kairos-redesign .tool-store-manage .btn:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: -2px; }

  /* Banner and GitHub account: compact rows. */
  .kairos-redesign .tool-store-update-banner { flex-wrap: nowrap; gap: 10px; margin: 10px 0 0; padding: 4px 4px 4px 14px; border-radius: 12px; }
  .kairos-redesign .tool-store-update-text { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kairos-redesign .tool-store-update-banner .btn { flex: none; min-height: 44px; padding: 0 16px; }
  .kairos-redesign .store-github { margin: 0 0 8px; }
  .kairos-redesign .store-github-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0; padding: 0 4px 0 14px; border-radius: 12px; font-size: 13px; }
  .kairos-redesign .store-github-strip .btn { flex: none; }

  /* List: one rounded group per section, a row per card. */
  .kairos-redesign .tool-store-grid {
    display: block; overflow: hidden; border-radius: 16px; background: var(--rd-surface); border: 1px solid var(--rd-line); box-shadow: var(--rd-shadow);
  }
  .kairos-redesign .tool-store-card:not(.ts-in-sheet) {
    position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 16px; column-gap: 12px; row-gap: 1px; align-items: center;
    min-height: 64px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--rd-line); border-radius: 0; background: transparent; box-shadow: none;
  }
  .kairos-redesign .tool-store-grid > .tool-store-card:last-child { border-bottom: 0; }
  .kairos-redesign .tool-store-card:not(.ts-in-sheet) > * { display: none; }
  .kairos-redesign .tool-store-card:not(.ts-in-sheet) > .ts-row-tile {
    display: grid; place-items: center; grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 12px;
    background: var(--rd-surface-2); border: 1px solid var(--rd-line); color: var(--rd-ink); font-size: 16px; font-weight: 500;
  }
  .kairos-redesign .ts-row-tile svg { width: 20px; height: 20px; }
  .kairos-redesign .tool-store-card:not(.ts-in-sheet) > h4 {
    display: block; grid-column: 2; grid-row: 1; align-self: end; margin: 0; padding: 0; font-size: 15px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .kairos-redesign .tool-store-card:not(.ts-in-sheet) > p:first-of-type {
    display: block; grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: 12.5px; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .kairos-redesign .tool-store-card:not(.ts-in-sheet) > .ts-row-pill {
    display: inline-block; grid-column: 3; grid-row: 1 / span 2; max-width: 112px; padding: 3px 9px; border-radius: var(--rd-radius-pill);
    font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--rd-surface-2); color: var(--rd-ink-dim);
  }
  .kairos-redesign .ts-row-pill.ts-ok { background: var(--rdt-ok-fill); color: var(--rd-ink); }
  .kairos-redesign .ts-row-pill.ts-warn { background: var(--rdt-warn-fill); color: var(--rd-ink); }
  .kairos-redesign .ts-row-pill.ts-bad { background: var(--rdt-err-fill); color: var(--danger); }
  .kairos-redesign .tool-store-card:not(.ts-in-sheet) > .ts-row-chev { display: grid; grid-column: 4; grid-row: 1 / span 2; color: var(--rd-ink-faint); }
  .kairos-redesign .tool-store-card:not(.ts-in-sheet) > .ts-row-hit {
    display: block; position: absolute; inset: 0; z-index: 1; width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 0;
    background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .kairos-redesign .ts-row-hit:active { background: color-mix(in srgb, var(--rd-ink) 6%, transparent); }
  .kairos-redesign .ts-row-hit:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: -3px; }
  .kairos-redesign .tool-store-build-card:not(.ts-in-sheet) { border-style: solid; }
  .kairos-redesign .tool-store-broken:not(.ts-in-sheet) { border-color: var(--rd-line); }

  /* Bottom sheet. Sits under dialogs (1500) so actions can open their own. */
  .kairos-redesign .ts-sheet-backdrop {
    display: flex; align-items: flex-end; position: fixed; inset: 0; z-index: 1400; background: rgba(var(--shade-rgb), .38);
    opacity: 0; pointer-events: none; transition: opacity 180ms ease;
  }
  .kairos-redesign .ts-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
  .kairos-redesign .ts-sheet {
    display: flex; flex-direction: column; width: 100%; max-height: 88dvh; border-radius: 22px 22px 0 0; outline: 0;
    background: var(--rd-surface-solid); border: 1px solid var(--rd-line-strong); border-bottom: 0; color: var(--rd-ink);
    box-shadow: 0 -18px 50px rgba(var(--shade-rgb), .28); transform: translateY(100%); transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
  }
  .kairos-redesign .ts-sheet-backdrop.open .ts-sheet { transform: none; }
  .kairos-redesign .ts-sheet-grip { flex: none; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--rd-line-strong); touch-action: none; }
  .kairos-redesign .ts-sheet-bar { display: flex; align-items: center; justify-content: space-between; flex: none; min-height: 44px; padding: 0 6px 0 20px; touch-action: none; }
  .kairos-redesign .ts-sheet-kind { font-size: var(--rd-label-size); font-weight: 500; letter-spacing: var(--rd-label-tracking); text-transform: uppercase; color: var(--rd-ink-dim); }
  .kairos-redesign .ts-sheet-close {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--rd-ink); cursor: pointer;
  }
  .kairos-redesign .ts-sheet-close svg { width: 18px; height: 18px; }
  .kairos-redesign .ts-sheet-close:hover { background: var(--rd-surface-2); }
  .kairos-redesign .ts-sheet-close:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: -2px; }
  .kairos-redesign .ts-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .kairos-redesign .ts-sheet .tool-store-card {
    position: relative; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 14px;
  }
  .kairos-redesign .ts-sheet .tool-store-card-top { top: 2px; right: 0; }
  .kairos-redesign .ts-sheet .tool-store-card > .tool-store-badge { top: 2px; right: 0; max-width: 140px; }
  .kairos-redesign .ts-sheet .tool-store-card h4 { margin: 0 0 8px; padding-right: 130px; font-size: 20px; line-height: 1.25; }
  .kairos-redesign .ts-sheet .tool-store-card p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
  .kairos-redesign .ts-sheet .tool-store-card .meta { font-size: 12.5px; }
  .kairos-redesign .ts-sheet .tool-store-card-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
  .kairos-redesign .ts-sheet .tool-store-card-foot > :not(.btn) { grid-column: 1 / -1; }
  .kairos-redesign .ts-sheet .tool-store-card-foot > .tool-store-action { display: grid; }
  .kairos-redesign .ts-sheet .tool-store-card-foot > .btn.ts-wide { grid-column: 1 / -1; }
  .kairos-redesign .ts-sheet .tool-store-card .btn,
  .kairos-redesign .ts-sheet .tool-store-card .tool-store-action .btn { min-height: 44px; width: 100%; font-size: 14px; justify-content: center; }
  .kairos-redesign .ts-sheet .tool-store-card > .btn { align-self: stretch; margin-bottom: 8px; }
  .kairos-redesign .ts-sheet .tool-store-health,
  .kairos-redesign .ts-sheet .tool-store-held { font-size: 13px; }
  .kairos-redesign .ts-sheet .tool-store-health .btn,
  .kairos-redesign .ts-sheet .tool-store-held .btn { width: auto; min-height: 44px; }
  .kairos-redesign .ts-sheet .tool-store-card-foot > a:first-child { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .kairos-redesign .ts-sheet, .kairos-redesign .ts-sheet-backdrop { transition: none; }
}

/* -- Desktop: the tab fills its window ------------------------------------------
   No centred column: the title, the search and category row, and the manage
   buttons span the width, and each section is a card grid that adds columns as
   the window grows. */
@media (min-width: 769px) {
  .kairos-redesign .tool-store-view { max-width: none; padding: 0 0 32px; }
  .kairos-redesign .tool-store-toolbar { align-items: center; flex-wrap: wrap; }
  .kairos-redesign .tool-store-toolbar .tool-store-search { flex: 1 1 320px; max-width: 560px; }
  .kairos-redesign .tool-store-summary { flex-direction: row-reverse; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .kairos-redesign .tool-store-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
}