/* Only Customer Radar's own layout. Every control, table, badge, dialog and the shell come from @gemboss/ui;
   nothing here restyles a kit class (one visual owner per component, Gems/CLAUDE.md §9.3). */
.cr-page { display: flex; flex-direction: column; gap: 16px; }
.cr-flush { padding: 0; overflow: hidden; }
.cr-pad { padding: 12px 16px; border-bottom: 1px solid var(--gemboss-divider); margin: 0; }
.cr-tabs { padding: 0 16px; border-bottom: 1px solid var(--gemboss-divider); overflow-x: auto; white-space: nowrap; }
.cr-toolbar { padding: 12px 16px; margin: 0; border-bottom: 1px solid var(--gemboss-divider); flex-wrap: wrap; }
.cr-grow { flex: 1 1 220px; }
.cr-back { font-size: 13px; align-self: flex-start; }
/* Links outside running text get a 24px target (WCAG 2.5.8, Gems §9.1). */
.cr-link24 { display: inline-flex; align-items: center; min-height: 24px; }
.cr-meta { margin: -8px 0 0; }
.cr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-actions form, .cr-inline { display: inline; margin: 0; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cr-score { font-size: 14px; font-variant-numeric: tabular-nums; }
.cr-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--gemboss-divider); flex-wrap: wrap; }
.cr-h2 { margin: 0; font-size: 14px; font-weight: 650; }
.cr-h3 { margin: 0; font-size: 14px; font-weight: 650; }
.cr-h4 { margin: 8px 0 0; font-size: 13px; font-weight: 650; }
.cr-left { text-align: left; }
.cr-th { text-align: left; font-weight: inherit; }
.cr-strong { font-weight: 600; }
.cr-nowrap { white-space: nowrap; }
.cr-row { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.cr-stack { display: flex; flex-direction: column; gap: 8px; }
/* A scroll box (ui-table-wrap) in a height-capped flex column shrinks to nothing (its min-height is 0): the
   settings pane cut the recipe table to 2px (07/11/2026). Children keep their height; the pane scrolls. */
.cr-page > *, .cr-stack > *, .cr-sheet > *, .cr-sec > *, .cr-detail > * { flex-shrink: 0; }
.cr-block { display: block; }
.cr-steps { display: flex; flex-direction: column; gap: 12px; }
.cr-step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; counter-reset: step; }
.cr-step-list li { border: 1px solid var(--gemboss-divider); border-radius: var(--gemboss-radius-md); padding: 12px; display: flex; flex-direction: column; gap: 4px; counter-increment: step; }
.cr-step-list li strong::before { content: counter(step) " · "; color: var(--gemboss-text-muted); font-weight: 500; }
.cr-form { display: flex; flex-direction: column; gap: 12px; }
.cr-field { display: flex; flex-direction: column; gap: 4px; }
.cr-field > span:first-child { font-weight: 550; }
.cr-text { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: 8px 10px; min-height: 120px; }
.cr-num-input { width: 72px; text-align: right; }
.cr-savebar { display: flex; gap: 12px; align-items: center; justify-content: flex-end; border-top: 1px solid var(--gemboss-divider); padding-top: 12px; }
.cr-bands { display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px; gap: 6px 12px; align-items: center; }
.cr-bar { display: block; height: 10px; border-radius: 4px; background: var(--gemboss-primary); min-width: 2px; }
.cr-bar--muted { background: var(--gemboss-text-muted); }
.cr-num { text-align: right; font-variant-numeric: tabular-nums; }
.cr-gates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cr-gates li { display: flex; gap: 8px; align-items: center; }
/* Store sheet */
.cr-sheet { display: flex; flex-direction: column; gap: 20px; }
.cr-sec { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.cr-scoreline { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cr-scoreline > div:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.cr-big { font-size: 40px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.cr-tags { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.cr-why { margin: 0; }
.cr-timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cr-timeline li { display: flex; gap: 12px; }
.cr-timeline li > span:first-child { min-width: 96px; flex: none; }
.cr-detail { display: flex; flex-direction: column; gap: 8px; }
.cr-pitch { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--gemboss-divider); padding-top: 12px; }
/* Sign in */
.cr-login { min-height: 100vh; display: grid; place-items: center; background: var(--gemboss-app-bg, #fafafb); margin: 0; padding: 16px; box-sizing: border-box; }
.cr-login__card { width: min(380px, 100%); display: flex; flex-direction: column; gap: 16px; }
.cr-login__brand { display: flex; gap: 8px; align-items: center; }
@media (max-width: 47.9975em) {
  .cr-tags { margin-left: 0; justify-content: flex-start; }
  .cr-timeline li { flex-direction: column; gap: 2px; }
}

/* Queue filters: always open on a wide screen; on a phone they fold behind one button so the first store shows in
   the first screen (visual-gate cta_above_fold@320/390, 07/11/2026). */
.cr-filters > .cr-filters__toggle { display: none; }
@media (max-width: 47.9975em) {
  .cr-filters > .cr-filters__toggle { display: inline-flex; margin: 8px 16px; list-style: none; }
  .cr-filters > .cr-filters__toggle::-webkit-details-marker { display: none; }
  .cr-filters { border-bottom: 1px solid var(--gemboss-divider); }
}

/* On a phone the queue's first store must be in the first screen (Gems §9.1, 320×568): the head keeps its title and
   buttons; the long description and the scoring note show from 768 up. */
@media (max-width: 47.9975em) {
  .cr-queue-head .ui-page-head p, .cr-wide-only { display: none; }
  .cr-page { gap: 12px; }
}