/* ============================================================
   06-editorial.css — Editorial customer screens

   The Stitch editorial comps for the customer app, plus the responsive and
   interaction refinements layered on top of them.

   Part of an ordered set linked in fragments/head.html. The browser applies these
   in link order and THAT ORDER IS THE CASCADE — a rule here can only override one
   in an earlier file. Do not reorder the links, and do not move a rule between
   files without checking what it then stops overriding.
   ============================================================ */

/* ============================================================
   06-app-editorial.css  (6 of 6)

   Customer app, Stitch Editorial layer.

   Loads last on purpose. It restates several components defined in 03-app.css
   and depends on winning the cascade against them, so its position is
   load-bearing rather than incidental.

   Part of an ordered set. The browser concatenates these in the order they
   are linked in fragments/head.html, and that order IS the cascade. Do not
   reorder the <link> tags, and do not move a rule between files without
   checking what it would then stop overriding.
   ============================================================ */

/* ============================================================================
   CUSTOMER APP — Stitch "Editorial" screens
   ============================================================================

   Everything below re-cuts the student and auth surfaces to the app design in
   Stitch. It sits last on purpose: the outlet and admin portals share this
   stylesheet and are not part of this redesign, so their rules are left intact
   above and only the customer-app components are restated here.

   Three things change shape rather than just colour, and they are the reason
   this is a rewrite and not a re-skin:

     - the food feed goes from horizontal rows to a two-up grid of square crops
     - the category row goes from illustrated pucks to a plain underlined tab bar
     - auth inputs lose their boxes and become ruled lines

   The old system's decorative layer — organic blobs, grain texture, the swirl
   behind the state medallion — has no counterpart in the design and is removed
   rather than re-tinted. On a near-white canvas it read as smudge.
   ============================================================================ */

/* ---------- Page headers ---------- */

/* The blob sat behind the greeting on a cream page. Gone: this design carries
   hierarchy with type size alone. */


.page-header-title {
    line-height: var(--lh-display-lg);
    margin: 0;
}

@media (min-width: 768px) {
    .page-header-title { font-size: var(--text-display-lg); }
}

.page-header-sub {
    margin: var(--stack-xs) 0 0;
    line-height: var(--lh-body-md);
}

/* Uppercase micro-label above each block — the design's main structural device
   on the cart and order screens. */
.section-label {
    font-family: var(--font-body);
    font-size: var(--text-label-sm);
    line-height: var(--lh-label-sm);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin: 0 0 var(--stack-sm);
}

/* ---------- Search ---------- */

.search-bar {
    position: relative;
    margin-bottom: var(--stack-md);
}

.search-bar input {
    width: 100%;
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    line-height: var(--lh-body-md);
    color: var(--color-ink);
    box-shadow: none;
    transition: border-color 150ms ease, background-color 150ms ease;
}


.search-bar input:focus {
    outline: none;
    border-color: var(--color-field-rule);
}

.search-bar > .material-symbols-outlined,
.search-bar > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-ink-muted);
    font-size: 22px;
    pointer-events: none;
}

/* ---------- "Popular today" rail ---------- */

.featured-scroll {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--stack-sm);
    margin: 0 calc(-1 * var(--margin-mobile));
    padding-left: var(--margin-mobile);
    padding-right: var(--margin-mobile);
}
.featured-scroll::-webkit-scrollbar { display: none; }

/* Not a card in this design — an image with three lines under it, no fill,
   no border, no shadow. */
.deal-card {
    scroll-snap-align: start;
}

.deal-card-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--stack-sm);
    overflow: hidden;
}

.deal-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.deal-card:hover .deal-card-photo img { transform: scale(1.05); }

.deal-card-photo.is-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-food);
}
.deal-card-photo.is-illustration img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.deal-card-body {
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
}

.deal-card-name {
    line-height: var(--lh-label-lg);
    color: var(--color-ink);
}

.deal-card-price {
    line-height: var(--lh-label-lg);
}

/* ---------- Discount + stock flags ---------- */

.discount-tag {
    line-height: var(--lh-label-sm);
}

.stock-note {
    margin-top: 2px;
    background: none;
    line-height: var(--lh-label-sm);
    letter-spacing: 0.02em;
}

/* ---------- Quantity stepper ---------- */

.qty-stepper,
.cart-control__stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
}

.qty-stepper button,
.cart-control__stepper button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background-color 150ms ease, transform 120ms ease;
}
.qty-stepper button:active,
.cart-control__stepper button:active { transform: scale(0.9); }
.qty-stepper button .material-symbols-outlined,
.cart-control__stepper button .material-symbols-outlined { font-size: 18px; }

.qty-stepper .qty-value,
.cart-control__stepper .cart-qty-value {
    min-width: 20px;
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--text-label-lg);
    font-weight: 600;
    color: var(--color-ink);
}

/* ---------- State medallion ---------- */

/* The swirl behind the disc belonged to the warm palette. Here it is just the
   icon on a tonal disc. */
.state-medallion::before { display: none; }

.state-medallion {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--stack-md);
}

.state-medallion__disc {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    background: var(--color-field);
    display: grid;
    place-items: center;
    box-shadow: none;
    border: none;
}

.state-medallion__disc .material-symbols-outlined { font-size: 34px; }

/* The three tones must be told apart at a glance, and two of them were not: after the
   palette moved to the burger-landing system, --color-primary-tint and --color-danger-tint
   both resolved to #ffd9d4, and --color-primary and --color-danger both to #e8281e. So a
   "neutral" medallion and a "bad" one rendered pixel-identical — an empty cart looked
   exactly like a cancelled order, and both looked like an error.

   Neutral is now the quiet one it was always meant to be. Only the colours change; the
   disc shape and size are untouched. */
.state-medallion--neutral .state-medallion__disc { background: var(--color-surface-deep); }
.state-medallion--neutral .state-medallion__disc .material-symbols-outlined { color: var(--color-ink); }
.state-medallion--good    .state-medallion__disc { background: var(--color-accent-tint); }
.state-medallion--good    .state-medallion__disc .material-symbols-outlined { color: var(--color-accent); }
.state-medallion--bad     .state-medallion__disc { background: var(--color-primary); }
.state-medallion--bad     .state-medallion__disc .material-symbols-outlined { color: #fff; }


/* ---------- Bottom navigation ---------- */

.bottom-nav {
    height: var(--bottom-nav-height);
    padding: 8px 16px calc(8px + var(--safe-area-bottom));
}

.bottom-nav-item {
    border-radius: var(--radius-sm);
    line-height: var(--lh-label-sm);
}
.bottom-nav-item:active { transform: scale(0.9); }
.bottom-nav-item.active {
    background: transparent;
}

.bottom-nav-badge {
    border: 2px solid var(--color-surface);
}

/* ---------- Sticky cart bar ---------- */


.sticky-cart-inner:hover { background: var(--color-primary-dark);}

.sticky-cart-info,
.sticky-cart-action {
    font-size: var(--text-label-lg);
    line-height: var(--lh-label-lg);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ---------- Order cards ---------- */

.order-card {
    display: block;
    background: var(--color-surface);
    padding: var(--stack-sm) var(--stack-md);
    color: inherit;
    transition: box-shadow 200ms ease;
}
.order-card:hover {color: inherit; }

.order-card-token {
    font-size: var(--text-headline-md);
    line-height: var(--lh-headline-md);
    font-weight: 700;
    color: var(--color-ink);
}

.order-card-total {
    font-size: var(--text-label-lg);
    font-weight: 600;
    color: var(--color-primary);
}

.order-card-date {
    font-size: var(--text-label-sm);
    color: var(--color-ink-muted);
}

.order-card-reason {
    font-size: var(--text-label-sm);
    line-height: var(--lh-label-sm);
    color: var(--color-danger);
}
.order-card-reason .material-symbols-outlined { font-size: 16px; }

/* ---------- Cart rows ---------- */

/* Rows on a rule, not floating cards — the design lists items as a ledger. */

.cart-item-photo.is-illustration { display: grid; place-items: center; background: var(--color-surface-food); }
.cart-item-photo.is-illustration img { width: 62%; height: 62%;}

.cart-item-name {
    line-height: 1.25;
    color: var(--color-ink);
}

.cart-item-price {
    margin-top: 2px;
}


.pickup-card {
    box-shadow: none;
}
.pickup-card__icon .material-symbols-outlined { font-size: 20px; }
.pickup-card__name { font-size: var(--text-body-lg);color: var(--color-ink); }

.cart-summary {
    border-top: 1px solid var(--color-border);
    padding-top: var(--stack-sm);
}
.cart-summary__row dt { font-size: var(--text-body-md); color: var(--color-ink-muted); font-weight: 500; }
.cart-summary__row dd { font-size: var(--text-headline-md); font-weight: 700; color: var(--color-ink); }

/* ---------- Dish detail ---------- */

.detail-hero {
    border-radius: var(--radius-md);
    background: var(--color-surface-deep);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
    margin-bottom: var(--stack-md);
}
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero.is-illustration { display: grid; place-items: center; background: var(--color-surface-food); }
.detail-hero.is-illustration img { width: 58%; height: 58%; object-fit: contain; }

.detail-eyebrow {
    font-size: var(--text-label-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-ink-muted);
    margin: 0 0 var(--stack-xs);
}

.detail-name {
    font-family: var(--font-display);
    font-size: var(--text-display-lg);
    line-height: var(--lh-display-lg);
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 0 0 var(--stack-sm);
    color: var(--color-ink);
}

.detail-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: var(--text-headline-lg);
    line-height: var(--lh-headline-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--stack-sm);
}

.detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-body-md);
    color: var(--color-ink-muted);
}
.detail-meta .material-symbols-outlined { font-size: 20px; color: var(--color-accent); }

.detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--stack-md);
    font-size: var(--text-label-lg);
    font-weight: 600;
    color: var(--color-ink-muted);
}
.detail-back:hover { color: var(--color-primary); }

.detail-unavailable {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--color-field);
    border: 1px solid var(--color-border);
    color: var(--color-ink-muted);
    font-size: var(--text-body-md);
    margin-bottom: var(--stack-sm);
}


/* ---------- Token badge ---------- */

.token-badge {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    background: none;
    padding: 0;
}

/* ---------- Auth ---------- */

/* The design puts sign-in on plain white rather than the app canvas, opens with
   the wordmark set large in primary, and rules its fields with a single line
   instead of boxing them. */

.auth-shell,
.auth-main { background: var(--color-surface); }

.auth-card {
    background: var(--color-surface);
    border-radius: 0;
    padding: var(--stack-lg) var(--margin-mobile);
}

/* The lockup becomes the design's oversized wordmark. The mark itself is dropped
   on mobile — at this size the word is the logo. */
.auth-lockup {
    display: block;
    margin-bottom: var(--stack-md);
}
.auth-lockup img { display: none; }
.auth-lockup span {
    font-family: var(--font-display);
    font-size: var(--text-display-lg);
    line-height: var(--lh-display-lg);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--color-primary);
}

.auth-head { margin-bottom: var(--stack-lg); }

.auth-head__title {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    margin: 0 0 var(--stack-xs);
}

.auth-head__sub {
    font-size: var(--text-body-md);
    line-height: var(--lh-body-md);
    color: var(--color-ink-muted);
    margin: 0;
}

.field { margin-bottom: var(--stack-md); }

.field__label {
    display: block;
    line-height: var(--lh-label-sm);
    font-weight: 500;
    color: var(--color-ink-muted);
    margin-bottom: var(--stack-xs);
}

/* Ruled, not boxed. The rule uses --color-field-rule rather than the design's
   own #E5E5E5 hairline: at 1.2:1 on this canvas that hairline is invisible as a
   control boundary, which WCAG 1.4.11 asks to clear 3:1. This tone is the same
   line, dark enough to actually be one. */
.field__input {
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-field-rule);
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    line-height: var(--lh-body-lg);
    color: var(--color-ink);
    box-shadow: none;
    transition: border-color 150ms ease;
}

.field__input::placeholder { color: var(--color-ink-muted); }

.field__input:focus {
    border-bottom-color: var(--color-primary);
    border-bottom-width: 2px;
    padding-bottom: 7px;   /* keeps the baseline still as the rule thickens */
    background: transparent;
}

.field__wrap { position: relative; }

.field__toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--color-ink-muted);
    padding: 8px;
    cursor: pointer;
}
.field__toggle .material-symbols-outlined { font-size: 20px; }

.btn-auth {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--text-label-lg);
    line-height: var(--lh-label-lg);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-top: var(--stack-sm);
    transition: background-color 150ms ease, transform 120ms ease;
}
.btn-auth:hover  { background: var(--color-primary-dark); color: #fff; }
.btn-auth:active { transform: scale(0.98); }

.auth-foot {
    margin-top: var(--stack-md);
    font-size: var(--text-body-md);
    color: var(--color-ink-muted);
    text-align: center;
}
.auth-foot a { color: var(--color-primary); font-weight: 600; }

/* Desktop keeps the brand panel — the design has a desktop sign-in too — but it
   re-tones to the new palette rather than the old peach. */
@media (min-width: 992px) {
    .auth-card { padding: var(--stack-lg); }

    /* The panel carries the identity at this width, so the card's own lockup would be
       the second one on screen. The pre-redesign layout hid it here for that reason;
       the unscoped `.auth-lockup { display: block }` above silently undid that, because
       a media query adds no specificity and this file's later rule simply won. */
    .auth-lockup { display: none; }
}

/* One step down the same red. The vivid --color-primary carries white text at 4.42:1,
   under AA for anything below 24px, and this panel is mostly body copy. --color-primary-dark
   is the same hue at 6.47:1, so the panel reads identically and the text becomes legible.
   The sub-heading was additionally at 82% opacity, which took it lower still. */
.auth-brand {
    background: var(--color-primary-dark);
    color: #fff;
}
.auth-brand__headline,
.auth-brand__lockup span { color: #fff; }
.auth-brand__sub { color: #fff; }
/* The translucent tile is gone with the boxed treatment — the illustrations sit
   directly on the panel now. Kept as an empty-intent note rather than silently
   deleted, because this file re-tones the brand panel and its absence is the
   deliberate choice, not an oversight. */

/* ---------- Buttons, app-wide within the customer surfaces ---------- */

.btn-primary {
    border-color: var(--color-primary);
    font-family: var(--font-body);
    font-size: var(--text-label-lg);
    letter-spacing: 0.01em;
}
.btn-primary:hover,
.btn-primary:focus {
    border-color: var(--color-primary-dark);
}

.btn-lg { padding: 14px 20px; font-size: var(--text-label-lg); }


/* ---------- Pickup code ---------- */

/* Read across a counter, often aloud, sometimes one-handed while holding a tray. It
   gets the largest type on the page and the widest tracking, because legibility at a
   glance is the entire job. */
.pickup-code-panel {
    text-align: center;
    padding: var(--stack-md);
    border-radius: var(--radius-md);
    background: var(--color-primary-tint);
    border: 1px solid var(--color-primary-soft);
}

.pickup-code-panel__label {
    margin: 0 0 var(--stack-xs);
    font-size: var(--text-label-sm);
    line-height: var(--lh-label-sm);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
}

.pickup-code-panel__code {
    margin: 0;
    font-family: var(--font-display);
    font-size: 48px;
    line-height: 1.1;
    font-weight: 800;
    /* Wide tracking so adjacent digits cannot be misread as one number. */
    letter-spacing: 0.18em;
    /* Tabular figures: the code must not reflow as digits change between orders. */
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
}

.pickup-code-panel__hint {
    margin: var(--stack-xs) 0 0;
    font-size: var(--text-body-md);
    color: var(--color-ink-muted);
}

/* Counter-side entry. Matches the code's tracking so a mistyped digit is obvious. */
.pickup-input {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* ============================================================
   07 — UX POLISH
   Responsive and interaction refinements layered after 06 so they
   win the cascade. Touch targets, sticky chrome, keyboard focus,
   and desktop density. Loaded last in head.html.
   ============================================================ */

/* ---------- Sticky top navbar ----------
   The menu is long; the navbar should stay in reach so the user can
   switch outlet or sign out without scrolling back to the top. On
   desktop this also keeps the brand anchored while browsing. */

/* ---------- Touch targets ----------
   The add control floats over the photo; it must be easy to hit.
   40px is the floor for a thumb target on a food feed. */

/* Stepper +/- buttons on menu cards and cart page */
.cart-control__stepper button,
.qty-stepper button {
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
}

/* ---------- Keyboard focus ----------
   Cards and controls get a clear focus ring so the whole feed is
   navigable by keyboard, not just the name link. */
.menu-card:focus-within,
.outlet-card:focus-within,
.cart-item-card:focus-within {
    box-shadow: 0 0 0 3px var(--color-primary-tint), var(--shadow-md);
}

.btn-add:focus-visible,
.cart-control__stepper button:focus-visible,
.qty-stepper button:focus-visible,
.category-chip:focus-visible,
.sticky-cart-inner:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---------- Desktop density ----------
   The 1100px container is roomy; let the menu breathe with a touch
   more max width and lift cards on hover for a tactile feed. */
@media (min-width: 992px) {
    .menu-card {
        transition: transform 180ms ease, box-shadow 180ms ease;
    }
    .menu-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
    }
}

/* ---------- Sticky category chips (mobile) ----------
   On a phone the category list is the fastest way to jump a long
   menu. Keep it pinned under the navbar so it never scrolls away. */
@media (max-width: 767.98px) {
    /* Active chip highlight while scrolling (driven by JS) */
    .category-chip.is-scroll-active {
        background: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
    }
}

/* ---------- Sticky add-to-cart bar (item detail, mobile) ----------
   Long descriptions push the add control out of reach. A slim bar
   pinned above the bottom nav keeps the primary action thumb-close. */
@media (max-width: 767.98px) {
    .detail-add {
        z-index: 1020;
        background: var(--color-surface-food);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: 10px 12px;
        margin-top: 1rem;
        box-shadow: var(--shadow-md);
    }
}

/* ---------- Cart page polish ----------
   The old cart page shrank the stepper with an inline transform and
   used a bare text delete. Replace those with clean, full-size
   controls and a proper remove button. */
.cart-item-card .qty-stepper {
    transform: none !important;
    transform-origin: initial !important;
}

.cart-item-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cart-item-remove:active {
    transform: scale(0.9);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .navbar,
    .category-chips-wrapper,
    .detail-add {
        position: static;
    }
    .menu-card,
    .btn-add,
    .cart-control__stepper button,
    .qty-stepper button,
    .cart-item-remove {
        transition: none;
    }
}