/* =====================================================================
 *  RhinoHQ — Component library
 *  Buttons · Cards · Badges · Tables · Toasts · Update popup
 * ===================================================================== */

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.rhq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rhq-space-2);
    min-height: 44px;                 /* touch target */
    padding: var(--rhq-space-3) var(--rhq-space-5);
    border: 1px solid transparent;
    border-radius: var(--rhq-radius-md);
    font-family: var(--rhq-font-body);
    font-size: var(--rhq-text-sm);
    font-weight: var(--rhq-weight-semibold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--rhq-transition-fast),
                border-color var(--rhq-transition-fast),
                color var(--rhq-transition-fast),
                transform var(--rhq-transition-fast);
}

.rhq-btn:hover { text-decoration: none; }
.rhq-btn:active { transform: translateY(1px); }
.rhq-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.rhq-btn--primary {
    background: var(--rhq-accent);
    border-color: var(--rhq-accent);
    color: var(--rhq-text-on-accent);
}
.rhq-btn--primary:hover {
    background: var(--rhq-accent-hover);
    border-color: var(--rhq-accent-hover);
    color: var(--rhq-text-on-accent);
}

.rhq-btn--secondary {
    background: var(--rhq-surface-2);
    border-color: var(--rhq-border-strong);
    color: var(--rhq-text-primary);
}
.rhq-btn--secondary:hover { background: var(--rhq-surface-3); color: var(--rhq-text-primary); }

.rhq-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--rhq-text-secondary);
}
.rhq-btn--ghost:hover { background: var(--rhq-surface-2); color: var(--rhq-text-primary); }

.rhq-btn--danger {
    background: var(--rhq-danger);
    border-color: var(--rhq-danger);
    color: #fff;
}

.rhq-btn--sm { min-height: 34px; padding: var(--rhq-space-2) var(--rhq-space-3); font-size: var(--rhq-text-xs); }
.rhq-btn--lg { min-height: 52px; padding: var(--rhq-space-4) var(--rhq-space-8); font-size: var(--rhq-text-base); }

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.rhq-card {
    padding: var(--rhq-space-6);
    border: 1px solid var(--rhq-border-subtle);
    border-radius: var(--rhq-radius-lg);
    background: var(--rhq-surface-1);
    box-shadow: var(--rhq-shadow-sm);
}

.rhq-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rhq-space-4);
    margin-bottom: var(--rhq-space-5);
    padding-bottom: var(--rhq-space-4);
    border-bottom: 1px solid var(--rhq-border-subtle);
}

.rhq-card__title {
    margin: 0;
    font-size: var(--rhq-text-lg);
    font-weight: var(--rhq-weight-semibold);
}

/* Stat tile */
.rhq-stat {
    padding: var(--rhq-space-5);
    border: 1px solid var(--rhq-border-subtle);
    border-radius: var(--rhq-radius-lg);
    background: var(--rhq-surface-1);
}

.rhq-stat__label {
    display: block;
    margin-bottom: var(--rhq-space-2);
    font-family: var(--rhq-font-mono);
    font-size: var(--rhq-text-xs);
    letter-spacing: var(--rhq-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--rhq-text-muted);
}

.rhq-stat__value {
    display: block;
    font-family: var(--rhq-font-display);
    font-size: var(--rhq-text-2xl);
    font-weight: var(--rhq-weight-bold);
    line-height: 1.1;
    color: var(--rhq-text-primary);
}

.rhq-stat__meta {
    display: block;
    margin-top: var(--rhq-space-2);
    font-size: var(--rhq-text-sm);
    color: var(--rhq-text-muted);
}

.rhq-grid {
    display: grid;
    gap: var(--rhq-space-4);
}

.rhq-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rhq-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rhq-grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ---------------------------------------------------------------------
   Status badges
   Colour is never the only signal — each badge carries a text label,
   and callers add an icon where space allows.
   --------------------------------------------------------------------- */
.rhq-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--rhq-space-2);
    padding: 0.25rem 0.625rem;
    border: 1px solid;
    border-radius: var(--rhq-radius-full);
    font-size: var(--rhq-text-xs);
    font-weight: var(--rhq-weight-semibold);
    line-height: 1.5;
    white-space: nowrap;
}

.rhq-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.rhq-badge--success { background: var(--rhq-success-bg); border-color: var(--rhq-success-border); color: var(--rhq-success); }
.rhq-badge--warning { background: var(--rhq-warning-bg); border-color: var(--rhq-warning-border); color: var(--rhq-warning); }
.rhq-badge--danger  { background: var(--rhq-danger-bg);  border-color: var(--rhq-danger-border);  color: var(--rhq-danger); }
.rhq-badge--info    { background: var(--rhq-info-bg);    border-color: var(--rhq-info-border);    color: var(--rhq-info); }
.rhq-badge--neutral { background: var(--rhq-neutral-bg); border-color: var(--rhq-neutral-border); color: var(--rhq-neutral); }

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
.rhq-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rhq-border-subtle);
    border-radius: var(--rhq-radius-lg);
}

.rhq-table { width: 100%; border-collapse: collapse; font-size: var(--rhq-text-sm); }

.rhq-table thead th {
    position: sticky;
    top: 0;
    padding: var(--rhq-space-3) var(--rhq-space-4);
    background: var(--rhq-surface-2);
    border-bottom: 1px solid var(--rhq-border-strong);
    font-family: var(--rhq-font-mono);
    font-size: var(--rhq-text-xs);
    font-weight: var(--rhq-weight-medium);
    letter-spacing: var(--rhq-tracking-eyebrow);
    text-transform: uppercase;
    text-align: left;
    color: var(--rhq-text-muted);
    white-space: nowrap;
}

.rhq-table tbody td {
    padding: var(--rhq-space-3) var(--rhq-space-4);
    border-bottom: 1px solid var(--rhq-border-subtle);
    color: var(--rhq-text-secondary);
    vertical-align: middle;
}

.rhq-table tbody tr:last-child td { border-bottom: none; }
.rhq-table tbody tr:hover { background: var(--rhq-surface-2); }
.rhq-table .rhq-num { text-align: right; font-family: var(--rhq-font-mono); }

/* ---------------------------------------------------------------------
   Alerts
   --------------------------------------------------------------------- */
.rhq-alert {
    display: flex;
    gap: var(--rhq-space-3);
    padding: var(--rhq-space-4);
    border: 1px solid;
    border-radius: var(--rhq-radius-md);
    font-size: var(--rhq-text-sm);
}

.rhq-alert--success { background: var(--rhq-success-bg); border-color: var(--rhq-success-border); color: var(--rhq-text-primary); }
.rhq-alert--warning { background: var(--rhq-warning-bg); border-color: var(--rhq-warning-border); color: var(--rhq-text-primary); }
.rhq-alert--danger  { background: var(--rhq-danger-bg);  border-color: var(--rhq-danger-border);  color: var(--rhq-text-primary); }
.rhq-alert--info    { background: var(--rhq-info-bg);    border-color: var(--rhq-info-border);    color: var(--rhq-text-primary); }

/* ---------------------------------------------------------------------
   Toasts
   --------------------------------------------------------------------- */
.rhq-toasts {
    position: fixed;
    bottom: var(--rhq-space-6);
    right: var(--rhq-space-6);
    z-index: var(--rhq-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--rhq-space-3);
    max-width: 380px;
}

.rhq-toast {
    position: relative;
    padding: var(--rhq-space-4) var(--rhq-space-10) var(--rhq-space-4) var(--rhq-space-4);
    border: 1px solid var(--rhq-border-strong);
    border-radius: var(--rhq-radius-md);
    background: var(--rhq-surface-2);
    color: var(--rhq-text-primary);
    box-shadow: var(--rhq-shadow-lg);
    font-size: var(--rhq-text-sm);
    animation: rhq-toast-in var(--rhq-transition-slow);
}

.rhq-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: all var(--rhq-transition-base); }
.rhq-toast--success { border-left: 3px solid var(--rhq-success); }
.rhq-toast--warning { border-left: 3px solid var(--rhq-warning); }
.rhq-toast--danger  { border-left: 3px solid var(--rhq-danger); }
.rhq-toast--info    { border-left: 3px solid var(--rhq-info); }

.rhq-toast__close {
    position: absolute;
    top: var(--rhq-space-2);
    right: var(--rhq-space-2);
    width: 32px; height: 32px;
    border: 0;
    border-radius: var(--rhq-radius-sm);
    background: transparent;
    color: var(--rhq-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.rhq-toast__close:hover { background: var(--rhq-surface-3); color: var(--rhq-text-primary); }

@keyframes rhq-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .rhq-toasts { left: var(--rhq-space-4); right: var(--rhq-space-4); bottom: var(--rhq-space-4); max-width: none; }
}

/* =====================================================================
 *  UPDATE POPUP
 *  Soft mode  : bottom-right toast on desktop, bottom sheet on mobile.
 *  Forced mode: full-screen modal that cannot be dismissed.
 * ===================================================================== */

.rhq-update {
    position: fixed;
    bottom: var(--rhq-space-6);
    right: var(--rhq-space-6);
    z-index: var(--rhq-z-update);
    max-width: 420px;
    animation: rhq-update-in var(--rhq-transition-slow);
}

.rhq-update__panel {
    display: flex;
    gap: var(--rhq-space-4);
    padding: var(--rhq-space-5);
    border: 1px solid var(--rhq-accent-border);
    border-radius: var(--rhq-radius-lg);
    background: var(--rhq-surface-2);
    box-shadow: var(--rhq-shadow-xl);
}

.rhq-update__badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: var(--rhq-radius-md);
    background: var(--rhq-accent-subtle);
    color: var(--rhq-accent);
}

.rhq-update__content { flex: 1; min-width: 0; }

.rhq-update__title {
    margin: 0 0 var(--rhq-space-2);
    font-family: var(--rhq-font-display);
    font-size: var(--rhq-text-base);
    font-weight: var(--rhq-weight-semibold);
    line-height: 1.3;
    color: var(--rhq-text-primary);
}

.rhq-update__body {
    margin: 0 0 var(--rhq-space-2);
    font-size: var(--rhq-text-sm);
    color: var(--rhq-text-secondary);
}

.rhq-update__versions {
    margin: 0 0 var(--rhq-space-3);
    font-size: var(--rhq-text-xs);
    color: var(--rhq-text-muted);
}

.rhq-update__versions code {
    padding: 0.1em 0.35em;
    background: var(--rhq-surface-inset);
    color: var(--rhq-text-secondary);
}

.rhq-update__notes {
    margin: 0 0 var(--rhq-space-4);
    padding-left: var(--rhq-space-5);
    font-size: var(--rhq-text-xs);
}

.rhq-update__notes li { margin-bottom: var(--rhq-space-1); color: var(--rhq-text-muted); }

.rhq-update__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rhq-space-2);
}

.rhq-update__link {
    margin-left: auto;
    font-size: var(--rhq-text-xs);
    color: var(--rhq-text-muted);
}

.rhq-update__link:hover { color: var(--rhq-accent); }

/* Forced mode */
.rhq-update--forced {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
    padding: var(--rhq-space-4);
    background: rgba(10, 14, 19, 0.86);
    backdrop-filter: blur(3px);
}

.rhq-update--forced .rhq-update__panel {
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    padding: var(--rhq-space-8);
    text-align: left;
}

.rhq-update--forced .rhq-update__title { font-size: var(--rhq-text-xl); }

@keyframes rhq-update-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .rhq-update, .rhq-toast { animation: none; }
}

/* Mobile: bottom sheet */
@media (max-width: 640px) {
    .rhq-update:not(.rhq-update--forced) {
        left: 0; right: 0; bottom: 0;
        max-width: none;
    }

    .rhq-update:not(.rhq-update--forced) .rhq-update__panel {
        border-radius: var(--rhq-radius-lg) var(--rhq-radius-lg) 0 0;
        border-bottom: 0;
    }

    .rhq-update__actions .rhq-btn { flex: 1; }
    .rhq-update__link { width: 100%; margin: var(--rhq-space-2) 0 0; text-align: center; }
}

/* =====================================================================
 *  COMPLIANCE TOWER
 * ===================================================================== */

/* Readiness headline: gauge + explanation */
.rhq-readiness {
    display: flex;
    align-items: center;
    gap: var(--rhq-space-8);
    padding: var(--rhq-space-6);
    margin-bottom: var(--rhq-space-6);
    border: 1px solid var(--rhq-border-subtle);
    border-radius: var(--rhq-radius-lg);
    background: var(--rhq-surface-1);
}

.rhq-readiness__gauge { flex-shrink: 0; }
.rhq-readiness__detail { flex: 1; min-width: 0; }

@media (max-width: 720px) {
    .rhq-readiness { flex-direction: column; align-items: flex-start; gap: var(--rhq-space-5); }
}

/* Stat tile that is also a link */
.rhq-stat--link {
    display: block;
    text-decoration: none;
    transition: border-color var(--rhq-transition-fast), background-color var(--rhq-transition-fast);
}

.rhq-stat--link:hover {
    border-color: var(--rhq-accent-border);
    background: var(--rhq-surface-2);
    text-decoration: none;
}

/* Filter bar */
.rhq-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rhq-space-2);
    margin-bottom: var(--rhq-space-6);
    padding: var(--rhq-space-2);
    border: 1px solid var(--rhq-border-subtle);
    border-radius: var(--rhq-radius-md);
    background: var(--rhq-surface-1);
}

.rhq-filterbar__item {
    padding: var(--rhq-space-2) var(--rhq-space-4);
    border-radius: var(--rhq-radius-sm);
    font-size: var(--rhq-text-sm);
    color: var(--rhq-text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.rhq-filterbar__item:hover { background: var(--rhq-surface-2); color: var(--rhq-text-primary); text-decoration: none; }

.rhq-filterbar__item.is-active {
    background: var(--rhq-accent-subtle);
    color: var(--rhq-accent);
    font-weight: var(--rhq-weight-semibold);
}

/* "Required" marker next to a document name */
.rhq-req {
    display: inline-block;
    margin-left: var(--rhq-space-2);
    padding: 1px 6px;
    border: 1px solid var(--rhq-info-border);
    border-radius: var(--rhq-radius-full);
    background: var(--rhq-info-bg);
    font-family: var(--rhq-font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rhq-info);
    vertical-align: middle;
}

/* Definition list used in side panels */
.rhq-deflist { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--rhq-space-2) var(--rhq-space-4); }
.rhq-deflist dt { font-size: var(--rhq-text-xs); color: var(--rhq-text-muted); }
.rhq-deflist dd { margin: 0; font-size: var(--rhq-text-sm); color: var(--rhq-text-primary); }

/* File input */
input[type="file"].rhq-input { padding: var(--rhq-space-3); line-height: 1.6; cursor: pointer; }
input[type="file"].rhq-input::file-selector-button {
    margin-right: var(--rhq-space-4);
    padding: var(--rhq-space-2) var(--rhq-space-4);
    border: 1px solid var(--rhq-border-strong);
    border-radius: var(--rhq-radius-sm);
    background: var(--rhq-surface-2);
    color: var(--rhq-text-primary);
    font-family: var(--rhq-font-body);
    font-size: var(--rhq-text-sm);
    cursor: pointer;
}
input[type="file"].rhq-input::file-selector-button:hover { background: var(--rhq-surface-3); }

/* Date inputs need a light calendar icon on the dark surface */
input[type="date"].rhq-input::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Two-column page layout collapses on tablet */
@media (max-width: 900px) {
    .rhq-main > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* =====================================================================
 *  GROWTH & TENDER TOWER — kanban board
 * ===================================================================== */

.rhq-kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 1fr);
    gap: var(--rhq-space-4);
    overflow-x: auto;
    padding-bottom: var(--rhq-space-4);
    align-items: start;
}

.rhq-kanban__col {
    border: 1px solid var(--rhq-border-subtle);
    border-radius: var(--rhq-radius-lg);
    background: var(--rhq-surface-1);
    min-width: 0;
}

.rhq-kanban__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rhq-space-2);
    padding: var(--rhq-space-4);
    border-bottom: 1px solid var(--rhq-border-subtle);
    border-radius: var(--rhq-radius-lg) var(--rhq-radius-lg) 0 0;
    font-size: var(--rhq-text-sm);
    color: var(--rhq-text-primary);
}

.rhq-kanban__count {
    display: inline-block;
    margin-left: var(--rhq-space-2);
    padding: 1px 7px;
    border-radius: var(--rhq-radius-full);
    background: var(--rhq-surface-3);
    font-family: var(--rhq-font-mono);
    font-size: 11px;
    color: var(--rhq-text-secondary);
}

.rhq-kanban__value {
    font-family: var(--rhq-font-mono);
    font-size: var(--rhq-text-xs);
    color: var(--rhq-text-muted);
    white-space: nowrap;
}

.rhq-kanban__body { padding: var(--rhq-space-3); }

.rhq-kanban__empty {
    margin: 0;
    padding: var(--rhq-space-4);
    text-align: center;
    font-size: var(--rhq-text-xs);
    color: var(--rhq-text-muted);
}

/* Opportunity card */
.rhq-oppcard {
    padding: var(--rhq-space-3) var(--rhq-space-4);
    margin-bottom: var(--rhq-space-3);
    border: 1px solid var(--rhq-border-subtle);
    border-radius: var(--rhq-radius-md);
    background: var(--rhq-surface-2);
}

.rhq-oppcard:last-child { margin-bottom: 0; }

.rhq-oppcard__title {
    font-size: var(--rhq-text-sm);
    font-weight: var(--rhq-weight-semibold);
    color: var(--rhq-text-primary);
    line-height: 1.35;
}

.rhq-oppcard__client {
    margin-top: 2px;
    font-size: var(--rhq-text-xs);
    color: var(--rhq-text-muted);
}

.rhq-oppcard__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rhq-space-2);
    margin-top: var(--rhq-space-3);
    font-size: var(--rhq-text-xs);
    color: var(--rhq-text-secondary);
}

.rhq-oppcard__prob {
    padding: 1px 7px;
    border-radius: var(--rhq-radius-full);
    background: var(--rhq-accent-subtle);
    color: var(--rhq-accent);
    font-family: var(--rhq-font-mono);
    font-size: 11px;
}

.rhq-oppcard__foot {
    display: flex;
    gap: var(--rhq-space-3);
    margin-top: var(--rhq-space-2);
    font-size: 11px;
    color: var(--rhq-text-muted);
}

.rhq-oppcard__move { margin-top: var(--rhq-space-3); }

.rhq-select--mini {
    min-height: 32px;
    padding: 4px var(--rhq-space-6) 4px var(--rhq-space-3);
    font-size: var(--rhq-text-xs);
    background-position: right var(--rhq-space-2) center;
}

/* On a phone the board becomes a stack — a horizontal scroll of columns
   is unusable one-handed on site. */
@media (max-width: 720px) {
    .rhq-kanban {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        overflow-x: visible;
    }
}

/* =====================================================================
 *  REGISTER COMPONENT — search bar, view toggle, drag states
 * ===================================================================== */

.rhq-regbar {
    display: flex;
    align-items: center;
    gap: var(--rhq-space-3);
    margin-bottom: var(--rhq-space-5);
    flex-wrap: wrap;
}

.rhq-regbar__search {
    flex: 1;
    min-width: 220px;
    max-width: 420px;
    min-height: 42px;
}

.rhq-regbar__views {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--rhq-border-subtle);
    border-radius: var(--rhq-radius-md);
    background: var(--rhq-surface-1);
}

.rhq-regbar__views .rhq-btn {
    border: 0;
    background: transparent;
    color: var(--rhq-text-muted);
}

.rhq-regbar__views .rhq-btn.is-active {
    background: var(--rhq-accent-subtle);
    color: var(--rhq-accent);
}

/* Drag states */
[data-card][draggable="true"] { cursor: grab; }
[data-card].is-dragging { opacity: 0.45; cursor: grabbing; }

[data-lane-drop].is-dragover {
    outline: 2px dashed var(--rhq-accent);
    outline-offset: -4px;
    background: var(--rhq-accent-subtle);
    border-radius: var(--rhq-radius-md);
}

[data-lane-drop][data-droppable="0"] { position: relative; }

.rhq-lane-lock {
    font-family: var(--rhq-font-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rhq-text-muted);
}

/* Board lanes reuse the kanban look; make lane bodies a real drop area
   even when empty. */
.rhq-kanban__body { min-height: 90px; }

/* Status chips inside the register bar — buttons, same visual language
   as the old filter tabs, but client-side and shared by both views. */
.rhq-regbar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--rhq-border-subtle);
    border-radius: var(--rhq-radius-md);
    background: var(--rhq-surface-1);
}

.rhq-chip {
    border: 0;
    background: transparent;
    padding: var(--rhq-space-2) var(--rhq-space-3);
    border-radius: var(--rhq-radius-sm);
    font-family: var(--rhq-font-body);
    font-size: var(--rhq-text-sm);
    color: var(--rhq-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.rhq-chip:hover { background: var(--rhq-surface-2); color: var(--rhq-text-primary); }

.rhq-chip.is-active {
    background: var(--rhq-accent-subtle);
    color: var(--rhq-accent);
    font-weight: var(--rhq-weight-semibold);
}

.rhq-chip [data-chip-count] { opacity: 0.75; }

@media (max-width: 900px) {
    .rhq-regbar { align-items: stretch; }
    .rhq-regbar__search { max-width: none; }
    .rhq-regbar__chips { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}