/*
  CityBites layout primitives.
  These classes describe structure only. Page-specific workflow chrome belongs
  in citybites.patterns.css.
*/

.cb-shell {
    width: min(100% - (var(--cb-space-4) * 2), var(--cb-shell-max-width));
    margin-inline: auto;
}

.cb-shell-frame {
    width: min(100% - (var(--cb-space-4) * 2), var(--cb-wide-page-max-width));
    margin-inline: auto;
}

.cb-page {
    width: min(100% - (var(--cb-space-4) * 2), var(--cb-page-max-width));
    margin-inline: auto;
}

.cb-page--wide {
    max-width: var(--cb-wide-page-max-width);
}

.cb-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cb-space-4);
}

.cb-page-header__copy {
    display: grid;
    gap: var(--cb-space-2);
    min-width: 0;
}

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

.cb-stack--tight {
    gap: var(--cb-space-2);
}

.cb-stack--loose {
    gap: var(--cb-space-6);
}

.cb-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cb-space-3);
}

.cb-cluster--between {
    justify-content: space-between;
}

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

.cb-grid--cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.cb-section {
    padding-block: var(--cb-space-6);
}

.cb-section--hero {
    padding-block-start: var(--cb-space-7);
}

.cb-rail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, var(--cb-rail-width));
    gap: var(--cb-space-6);
    align-items: start;
}

.cb-sticky-rail {
    position: sticky;
    top: var(--cb-space-5);
}

/* Authenticated app shell foundation.
   Issue 218 migrates /app and /app/orders onto these shell rules while
   older app selectors remain in compatibility styles. */

body[data-cb-experience="app"] .cb-app-shell.cb-app-shell--foundation {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    background: var(--cb-surface-page);
    color: var(--cb-text-primary);
    font-family: var(--cb-font-sans);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: start;
    border-right: 1px solid var(--cb-border-default);
    background: var(--cb-surface-card);
    box-shadow: var(--cb-shadow-xs);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-sidebar-inner {
    display: grid;
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--cb-space-5);
    padding: var(--cb-space-4);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--cb-space-3);
    color: var(--cb-text-primary);
    text-decoration: none;
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-brand-mark {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--cb-radius-md);
    background: var(--cb-action-primary);
    color: var(--cb-action-primary-text);
    font-size: var(--cb-text-sm);
    font-weight: var(--cb-font-weight-extrabold);
    line-height: 1;
    box-shadow: var(--cb-shadow-xs);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-brand-copy,
body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-user-copy,
body[data-cb-experience="app"] .cb-app-shell--foundation .cb-mobile-nav-summary-copy {
    display: grid;
    min-width: 0;
    gap: var(--cb-space-1);
    line-height: 1.1;
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-brand-copy strong,
body[data-cb-experience="app"] .cb-app-shell--foundation .cb-mobile-nav-summary-copy strong {
    color: var(--cb-text-primary);
    font-family: var(--cb-font-heading);
    font-size: var(--cb-text-md);
    font-weight: var(--cb-font-weight-bold);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-brand-copy span,
body[data-cb-experience="app"] .cb-app-shell--foundation .cb-mobile-nav-summary-copy span {
    color: var(--cb-text-muted);
    font-size: var(--cb-text-xs);
    font-weight: var(--cb-font-weight-medium);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-nav {
    display: grid;
    align-content: start;
    gap: var(--cb-space-2);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-nav-link {
    display: flex;
    min-width: 0;
    min-height: 2.6rem;
    align-items: center;
    gap: var(--cb-space-3);
    padding: 0 var(--cb-space-3);
    border-radius: var(--cb-radius-md);
    color: var(--cb-text-secondary);
    font-size: var(--cb-text-sm);
    font-weight: var(--cb-font-weight-semibold);
    text-decoration: none;
    transition:
        background-color var(--cb-motion-base),
        color var(--cb-motion-base),
        box-shadow var(--cb-motion-base);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-nav-link:hover,
body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-nav-link:focus-visible {
    background: var(--cb-surface-muted);
    color: var(--cb-text-primary);
    text-decoration: none;
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-nav-link:focus-visible {
    outline: none;
    box-shadow: var(--cb-shadow-focus);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-nav-link.cb-app-nav-link--active {
    background: var(--cb-action-primary);
    color: var(--cb-action-primary-text);
    box-shadow: var(--cb-shadow-sm);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-nav-icon,
body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-nav-icon svg {
    display: inline-flex;
    width: var(--cb-control-icon-size);
    height: var(--cb-control-icon-size);
    flex: 0 0 auto;
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-nav-badge {
    display: inline-grid;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    place-items: center;
    border-radius: var(--cb-radius-pill);
    background: var(--cb-action-primary);
    color: var(--cb-action-primary-text);
    font-size: var(--cb-text-xs);
    font-weight: var(--cb-font-weight-bold);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-nav-link--active .cb-app-nav-badge {
    background: var(--cb-surface-card);
    color: var(--cb-text-action);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-user-menu {
    position: relative;
    border-top: 1px solid var(--cb-border-default);
    padding-top: var(--cb-space-3);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-user-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--cb-space-2);
    padding: var(--cb-space-2);
    border: 1px solid var(--cb-border-default);
    border-radius: var(--cb-radius-lg);
    background: var(--cb-surface-card);
    cursor: pointer;
    list-style: none;
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-user-summary::-webkit-details-marker,
body[data-cb-experience="app"] .cb-app-shell--foundation .cb-mobile-nav-summary::-webkit-details-marker {
    display: none;
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-user-avatar,
body[data-cb-experience="app"] .cb-app-shell--foundation .cb-mobile-nav-summary-user {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--cb-radius-pill);
    background: var(--cb-action-primary-soft);
    color: var(--cb-text-action);
    font-size: var(--cb-text-sm);
    font-weight: var(--cb-font-weight-bold);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-user-copy strong,
body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-user-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-user-copy strong {
    color: var(--cb-text-primary);
    font-size: var(--cb-text-sm);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-user-copy span {
    color: var(--cb-text-muted);
    font-size: var(--cb-text-xs);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-user-caret {
    width: 0.55rem;
    height: 0.55rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    color: var(--cb-text-muted);
    transform: rotate(45deg) translateY(-2px);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-user-dropdown {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--cb-space-2));
    min-width: 10rem;
    padding: var(--cb-space-2);
    border: 1px solid var(--cb-border-default);
    border-radius: var(--cb-radius-lg);
    background: var(--cb-surface-card);
    box-shadow: var(--cb-shadow-md);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-user-action {
    display: flex;
    min-height: 2.25rem;
    align-items: center;
    padding: 0 var(--cb-space-3);
    border-radius: var(--cb-radius-md);
    color: var(--cb-text-secondary);
    font-size: var(--cb-text-sm);
    font-weight: var(--cb-font-weight-semibold);
    text-decoration: none;
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-user-action:hover {
    background: var(--cb-surface-muted);
    color: var(--cb-text-primary);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-frame,
body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-main {
    min-width: 0;
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-content {
    width: min(calc(100% - (var(--cb-space-6) * 2)), var(--cb-wide-page-max-width));
    margin-inline: auto;
    padding-block: var(--cb-space-5) var(--cb-space-8);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-content--ordering-workspace {
    width: min(calc(100% - (var(--cb-space-5) * 2)), 108rem);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-page-intro-slot {
    margin-bottom: var(--cb-space-5);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-section--app-body,
body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-body-grid,
body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-primary {
    min-width: 0;
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-section--app-body {
    padding: 0;
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-body-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    gap: var(--cb-space-5);
    align-items: start;
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-body-grid--full {
    grid-template-columns: minmax(0, 1fr);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-mobile-nav-wrap {
    display: none;
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-mobile-nav {
    border: 1px solid var(--cb-border-default);
    border-radius: var(--cb-radius-xl);
    background: var(--cb-surface-card);
    box-shadow: var(--cb-shadow-sm);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-mobile-nav-summary {
    display: flex;
    min-height: 3.75rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--cb-space-3);
    padding: var(--cb-space-3) var(--cb-space-4);
    cursor: pointer;
    list-style: none;
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-mobile-nav-summary-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--cb-space-3);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-mobile-nav-summary-action {
    display: inline-flex;
    min-height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--cb-space-1);
    padding: 0 var(--cb-space-3);
    border: 1px solid var(--cb-border-default);
    border-radius: var(--cb-radius-pill);
    background: var(--cb-surface-card);
    color: var(--cb-text-secondary);
    font-size: var(--cb-text-sm);
    font-weight: var(--cb-font-weight-semibold);
    box-shadow: var(--cb-shadow-xs);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-mobile-nav-summary-action svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--cb-motion-fast);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-mobile-nav[open] .cb-mobile-nav-summary-action svg {
    transform: rotate(180deg);
}

body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-nav--mobile {
    padding: 0 var(--cb-space-3) var(--cb-space-3);
}

@media (max-width: 56rem) {
    .cb-page-header,
    .cb-rail-layout {
        grid-template-columns: 1fr;
    }

    .cb-page-header {
        display: grid;
    }

    .cb-sticky-rail {
        position: static;
    }
}

@media (max-width: 64rem) {
    body[data-cb-experience="app"] .cb-app-shell.cb-app-shell--foundation {
        display: block;
    }

    body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-sidebar {
        display: none;
    }

    body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-content,
    body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-content--ordering-workspace {
        width: min(calc(100% - (var(--cb-space-4) * 2)), var(--cb-wide-page-max-width));
        padding-block: var(--cb-space-4) var(--cb-space-7);
    }

    body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-mobile-nav-wrap {
        display: block;
        margin-bottom: var(--cb-space-4);
    }

    body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-body-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 40rem) {
    body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-content,
    body[data-cb-experience="app"] .cb-app-shell--foundation .cb-app-content--ordering-workspace {
        width: min(calc(100% - (var(--cb-space-3) * 2)), var(--cb-wide-page-max-width));
        padding-block: var(--cb-space-3) var(--cb-space-6);
    }

    body[data-cb-experience="app"] .cb-app-shell--foundation .cb-mobile-nav-summary {
        padding-inline: var(--cb-space-3);
    }
}