/*
  CityBites Market base layer.
  Applies only inside an element with the data-cb-ui="market" attribute, so routes that
  have not moved to Market are unaffected even if this file is loaded.
  Consumes citybites.market.tokens.css only; no raw colors here.
  The resets below are wrapped in :where() so they carry no specificity: any component class, Market or a cb- partial
  still on the page, wins over them. A reset with the weight of one attribute ties a single class and, loading later,
  used to win, which gave cb- primary buttons the page's dark text on their forest background.
*/

:where(body[data-cb-ui="market"]) { margin: 0; }

[data-cb-ui="market"] {
    background: var(--cb-mk-color-bg-page);
    color: var(--cb-mk-color-text-primary);
    font: var(--cb-mk-text-body-m);
    letter-spacing: var(--cb-mk-tracking-body-m);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

:where([data-cb-ui="market"]) *,
:where([data-cb-ui="market"]) *::before,
:where([data-cb-ui="market"]) *::after {
    box-sizing: border-box;
}

:where([data-cb-ui="market"]) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) {
    margin: 0;
}

:where([data-cb-ui="market"]) :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

:where([data-cb-ui="market"]) :where(img, svg, video) {
    display: block;
    max-width: 100%;
}

:where([data-cb-ui="market"]) :where(a) {
    color: inherit;
}

:where([data-cb-ui="market"]) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--cb-mk-color-border-focus);
    outline-offset: 2px;
    box-shadow: var(--cb-mk-focus-ring);
}

/* Text fields show focus with their own border and the caret, never a ring around the box.
   A bare input inside a styled wrapper, such as a dropdown's search row, shows only the caret. */
:where([data-cb-ui="market"]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="color"]), select, textarea):focus-visible {
    outline: none;
    box-shadow: none;
}

[data-cb-ui="market"] ::selection {
    background: var(--cb-mk-color-bg-accent);
    color: var(--cb-mk-color-text-on-accent);
}

/* Reduced motion is handled in the token file: the motion tokens drop to 0ms. */

/* Type styles from the Figma text styles */
.cb-mk-display-xl { font: var(--cb-mk-text-display-xl); letter-spacing: var(--cb-mk-tracking-display-xl); text-wrap: balance; }
.cb-mk-display-l { font: var(--cb-mk-text-display-l); letter-spacing: var(--cb-mk-tracking-display-l); text-wrap: balance; }
.cb-mk-h1 { font: var(--cb-mk-text-heading-1); letter-spacing: var(--cb-mk-tracking-heading-1); text-wrap: balance; }
.cb-mk-h2 { font: var(--cb-mk-text-heading-2); letter-spacing: var(--cb-mk-tracking-heading-2); text-wrap: balance; }
.cb-mk-h3 { font: var(--cb-mk-text-heading-3); letter-spacing: var(--cb-mk-tracking-heading-3); text-wrap: balance; }
.cb-mk-h4 { font: var(--cb-mk-text-heading-4); letter-spacing: var(--cb-mk-tracking-heading-4); text-wrap: balance; }
.cb-mk-body-l { font: var(--cb-mk-text-body-l); }
.cb-mk-body { font: var(--cb-mk-text-body-m); }
.cb-mk-body-strong { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-body-s { font: var(--cb-mk-text-body-s); }
.cb-mk-label { font: var(--cb-mk-text-label-m); }
.cb-mk-label-s { font: var(--cb-mk-text-label-s); }
.cb-mk-caption { font: var(--cb-mk-text-caption); color: var(--cb-mk-color-text-secondary); }
.cb-mk-overline { font: var(--cb-mk-text-overline); letter-spacing: var(--cb-mk-tracking-overline); text-transform: uppercase; color: var(--cb-mk-color-text-secondary); }
.cb-mk-number-xl { font: var(--cb-mk-text-number-xl); letter-spacing: var(--cb-mk-tracking-number-xl); font-variant-numeric: tabular-nums; }
.cb-mk-number-l { font: var(--cb-mk-text-number-l); letter-spacing: var(--cb-mk-tracking-number-l); font-variant-numeric: tabular-nums; }
.cb-mk-text-secondary { color: var(--cb-mk-color-text-secondary); }
.cb-mk-text-brand { color: var(--cb-mk-color-text-brand); }
.cb-mk-text-danger { color: var(--cb-mk-color-text-danger); }

@media (max-width: 47.99rem) {
    .cb-mk-display-xl { font-size: 2.75rem; }
    .cb-mk-display-l { font-size: 2.25rem; }
    .cb-mk-h1 { font-size: 1.875rem; }
    .cb-mk-h2 { font-size: 1.5rem; }
}

/* Icons: Views/Shared/Components/Market/_Icon.cshtml renders <svg class="cb-mk-icon"> */
.cb-mk-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cb-mk-icon--sm { width: 1rem; height: 1rem; }
.cb-mk-icon--lg { width: 1.5rem; height: 1.5rem; }
.cb-mk-icon--xl { width: 2rem; height: 2rem; }

/* Layout helpers */
.cb-mk-stack { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap); min-width: 0; }
.cb-mk-stack--sm { gap: var(--cb-mk-space-gap-sm); }
.cb-mk-stack--lg { gap: var(--cb-mk-space-gap-lg); }
.cb-mk-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-gap-sm); min-width: 0; }
.cb-mk-cluster--spread { justify-content: space-between; }
.cb-mk-grid { display: grid; gap: var(--cb-mk-space-gap-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cb-mk-grid-min, 18rem)), 1fr)); }
.cb-mk-divider { border: 0; border-top: 1px solid var(--cb-mk-color-border-default); margin: 0; }

/* The hidden attribute always wins over a component's own display (Field, Button, Card and Alert set one, and the
   components stylesheet loads later). The id inside :not() only raises the weight; no element carries it. */
[hidden]:not([hidden="until-found"], #cb-mk-hidden) { display: none; }

.cb-mk-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}