/* =============================================================================================
   Supwell design foundation ("Grit", MJ's Figma): tokens, Sw* component styles, motion kit.
   Linked right after app.min.css by Supwell/wwwroot/index.html (app) and
   Supwell.Web/Components/App.razor (web). Plain CSS: Tailwind does not compile this file, so
   nothing here needs an app.min.css rebuild. /admin/ui-kit renders every token and component.

   Cascade: app.min.css declares the layers (theme, base, components, utilities). Component
   classes live in @layer components, so a Tailwind utility on the same element still wins.
   Unlayered on purpose: heading sizes (MAUI's css/mobile.css resizes h1-h3 unlayered under
   640px, and only an unlayered class beats it), the toast host, and the motion kit. So a
   heading's size goes on a kit class or an inline style, never only on a Tailwind text-[..]
   utility, and a serif heading uses .sw-display (regular weight, no synthesized bold).

   Colour rule: the hex values below are the ones the feed and marketplace already render;
   app.css @theme mirrors them as Tailwind colours (bg-sw-ground, text-sw-ink...). Keep the
   two in sync. No new hues: restraint over saturation.

   Motion rule: base styles are the FINAL state; new keyframes carry only the "from" state and
   fill backwards, so nothing is left hidden or holding a transform (a transform makes the element
   the containing block of its position:fixed children, and so does a translate/scale animation
   for as long as it runs). Whole pages and layers therefore animate opacity only. One
   reduced-motion switch at the end covers the whole app.

   Contents: 0 Fonts · 1 Tokens · 2 Type · 3 Controls · 4 Components · 5 Motion kit
             6 Legacy animations (moved from app.css / MainLayout) · 7 Reduced motion
   ============================================================================================= */

/* 0. FONTS ------------------------------------------------------------------------------------ */
/* Self-hosted (fonts/*.woff2, SIL OFL 1.1) so the app never waits on Google's CDN and works
   offline. Same files, subsets and weight ranges the Google Fonts link served. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Other scripts Google Fonts served (cyrillic, greek, vietnamese): unicode-range keeps them from downloading unless such text is on screen. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-greek-ext.woff2") format("woff2"); unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/jetbrains-mono-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/jetbrains-mono-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/jetbrains-mono-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/jetbrains-mono-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/space-grotesk-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* 1. TOKENS ----------------------------------------------------------------------------------- */
:root {
  /* ground and surfaces */
  --sw-ground: #efeae6;      /* page, html/body, WebView, splash (was surface-200 / #EFEAE6) */
  --sw-ground-2: #f5f2ef;    /* sunken: input wells, segmented track, close discs */
  --sw-card: #ffffff;
  --sw-line: #e5e1d9;        /* hairline on cards, inputs, chips */
  --sw-line-2: #c2b7a3;      /* MJ's 0.5px rules: sheet header/footer, stat dividers, grabber */
  --sw-line-3: #9ea796;      /* list dividers in sheets, switch "off" track */
  --sw-scrim: rgba(0, 0, 0, .30);

  /* ink */
  --sw-ink: #2d2d2d;         /* body copy and titles */
  --sw-ink-2: #817d6b;       /* muted copy, meta, labels (4.1:1 on white) */
  --sw-ink-muted: #6e6a59;   /* THE muted AA token: small muted copy (10-13px), meta, labels, footer icons and counts.
                                5.1:1 on white, 4.9:1 on #f5f2ef, 4.5:1 on the ground. Feed, marketplace and the batch-3 pages. */
  --sw-ink-2-aa: var(--sw-ink-muted);   /* the batch-3 pages' name for it (was #6b6756 / #6c6857): one value */
  --sw-ink-3: #9e9e96;       /* placeholders and decoration only, never readable copy */

  /* brand. The olive family is one set now: --sw-olive is the brand (was #373c2b, #374120,
     #3e452f); --sw-olive-2 is Tailwind's olive-800 (#3F4531), still on feed text. */
  --sw-olive: #373c2b;
  --sw-olive-2: #3f4531;
  --sw-on-olive: #ffffff;    /* text on olive, as the marketplace draws it */
  --sw-cream: #f6f3e6;       /* cream text on olive (auth screens, events) */
  --sw-yellow: #fdf312;      /* accent, sparingly: one highlight per screen at most */
  --sw-disabled: #b6b8a8;    /* MJ's disabled primary */
  --sw-olive-wash: rgba(55, 60, 43, .08);
  --sw-olive-line: rgba(55, 60, 43, .22);

  /* semantic, muted on purpose */
  --sw-go: #507a2a;          --sw-go-wash: rgba(80, 122, 42, .12);
  --sw-amber: #a27c07;       --sw-amber-wash: rgba(162, 124, 7, .12);
  --sw-danger: #b3402a;      --sw-danger-wash: rgba(179, 64, 42, .10);

  /* type. --sw-font-body is what the app has always rendered for unclassed text. The style
     guide's split (§3.1): Inter is the UI face (buttons, sheet and confirm titles, segments,
     rows, chips, toasts); Space Grotesk is for page headings and numerals only. */
  --sw-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sw-font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sw-font-head: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --sw-font-serif: "Instrument Serif", "Times New Roman", serif;
  --sw-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sw-font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;  /* = --sw-font-ui; activation.css and the marketplace titles */
  --sw-fs-display: 36px;     /* Instrument Serif heroes */
  --sw-fs-title: 24px;
  --sw-fs-h2: 20px;
  --sw-fs-h3: 16px;
  --sw-fs-body: 15px;
  --sw-fs-small: 13px;
  --sw-fs-label: 11px;       /* JetBrains Mono uppercase labels; the floor for readable copy */
  --sw-fs-micro: 10px;       /* tags and badges only */
  --sw-tracking: -0.43px;    /* MJ's UI tracking */
  --sw-tracking-label: .06em;

  /* shape */
  --sw-r-xs: 4px;            /* tags */
  --sw-r-sm: 10px;           /* thumbs, icon tiles */
  --sw-r-md: 12px;           /* buttons, inputs, chips, segmented */
  --sw-r-card: 14px;         /* cards (feed card radius) */
  --sw-r-sheet: 25px;        /* bottom-sheet top corners */
  --sw-r-pill: 999px;

  /* space */
  --sw-1: 4px; --sw-2: 8px; --sw-3: 12px; --sw-4: 16px; --sw-5: 20px;
  --sw-6: 24px; --sw-8: 32px; --sw-10: 40px; --sw-14: 56px;
  --sw-gutter: 16px;

  /* elevation: cards sit on hairlines; shadows are for things that float */
  --sw-shadow-card: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);  /* = feed's shadow-sm */
  --sw-shadow-tile: 0 2px 8px rgba(0, 0, 0, .08);   /* THE card shadow: .sw-surface (MJ's marketplace card, the feed's tile) */
  --sw-shadow-float: 0 2px 8px rgba(0, 0, 0, .10);                                   /* glass chips */
  --sw-shadow-pop: 0 8px 24px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .08);      /* menus, toasts */
  --sw-shadow-sheet: 0 -10px 40px rgba(0, 0, 0, .14);

  /* z-index. Legacy page modals sit at 9999 and the Blazor error bar at 10000; sheets and
     toasts go above them so a SwConfirm opened from an old modal is never buried. */
  --sw-z-raised: 2;
  --sw-z-sticky: 30;
  --sw-z-nav: 40;            /* top navbar, bottom nav */
  --sw-z-sidebar: 50;
  --sw-z-popover: 60;        /* menus, marketplace sheets */
  --sw-z-sheet: 10010;
  --sw-z-modal: 10020;
  --sw-z-toast: 10100;

  /* safe area. Android WebView reports env() as 0; the native bridge writes
     --sw-safe-t-android / --sw-safe-b-android on <html> from the real window insets. */
  --sw-safe-t: max(env(safe-area-inset-top, 0px), var(--sw-safe-t-android, 0px));
  --sw-safe-b: max(env(safe-area-inset-bottom, 0px), var(--sw-safe-b-android, 0px));
  --sw-safe-l: env(safe-area-inset-left, 0px);
  --sw-safe-r: env(safe-area-inset-right, 0px);
  --sw-topbar-h: 68px;       /* MainLayout's navbar under the status bar: 4px of air + the 64px row */
  --sw-tabbar-h: 48px;       /* MainLayout's bottom nav */
  --sw-top-room: calc(var(--sw-safe-t) + var(--sw-topbar-h));
  --sw-tab-room: calc(var(--sw-tabbar-h) + var(--sw-safe-b));

  /* motion. Durations divide by --sw-tempo: set it to .25 on <html> for slow-mo QA. */
  --sw-pop: cubic-bezier(.2, .9, .25, 1.15);   /* things that land: chips, puck, switch, toast */
  --sw-out: cubic-bezier(.16, 1, .3, 1);        /* entries and counts */
  --sw-glide: cubic-bezier(.32, .72, 0, 1);     /* sheets, steps, navigation */
  --sw-tempo: 1;
  --sw-dur-fast: calc(160ms / var(--sw-tempo));
  --sw-dur: calc(280ms / var(--sw-tempo));
  --sw-dur-slow: calc(560ms / var(--sw-tempo));
}
@media (min-width: 768px) { :root { --sw-gutter: 24px; } }
@media (min-width: 1024px) { :root { --sw-gutter: 32px; } }

/* Scroll lock while a SwSheet is open (sw-ui.js counts nested sheets). */
html.sw-locked { overflow: hidden; }

/* 2. TYPE ------------------------------------------------------------------------------------- */
@layer components {
  .sw-label {
    font: 500 var(--sw-fs-label)/1.3 var(--sw-font-mono); letter-spacing: var(--sw-tracking-label);
    text-transform: uppercase; color: var(--sw-ink-2);
  }
  .sw-body { font: 400 var(--sw-fs-body)/1.5 var(--sw-font-body); color: var(--sw-ink); }
  .sw-small { font: 400 var(--sw-fs-small)/1.45 var(--sw-font-body); color: var(--sw-ink-2); }
  .sw-num { font-variant-numeric: tabular-nums; }
}
/* Headings: unlayered so they beat css/mobile.css's h1-h3 sizes in the app (class > element). */
.sw-display { margin: 0; font: 400 var(--sw-fs-display)/1.05 var(--sw-font-serif); font-synthesis: none; letter-spacing: -.01em; color: var(--sw-olive); text-wrap: balance; }
/* Instrument Serif ships one weight (400, plus a real italic). On an h1/h2 the base layer asks
   for 600-700, and the browser would smear a fake bold over the regular face: never let it.
   The Tailwind serif utilities get the same guard. */
.font-sw-serif, .font-display { font-synthesis: none; }
.sw-title { margin: 0; font: 600 var(--sw-fs-title)/1.15 var(--sw-font-head); letter-spacing: var(--sw-tracking); color: var(--sw-ink); text-wrap: balance; }
.sw-h2 { margin: 0; font: 600 var(--sw-fs-h2)/1.25 var(--sw-font-head); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
.sw-h3 { margin: 0; font: 600 var(--sw-fs-h3)/1.3 var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }

/* 3. CONTROLS --------------------------------------------------------------------------------- */
@layer components {
  .sw-icon { flex: none; display: inline-block; vertical-align: middle; }

  /* SwButton: .sw-btn + kind + size. Busy keeps the colour (aria-busy, never disabled) and
     stacks the label and the busy content in one grid cell, so the width never jumps. */
  .sw-btn {
    --bg: var(--sw-card); --fg: var(--sw-ink); --bd: var(--sw-line);
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 18px; border: 1px solid var(--bd); border-radius: var(--sw-r-md);
    background: var(--bg); color: var(--fg); cursor: pointer; text-decoration: none; white-space: nowrap;
    font: 600 16px/1.2 var(--sw-font-ui); letter-spacing: var(--sw-tracking);
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: scale var(--sw-dur-fast) ease, background-color var(--sw-dur) ease, border-color var(--sw-dur) ease, color var(--sw-dur) ease, opacity var(--sw-dur) ease;
  }
  .sw-btn:hover, .sw-btn:visited { color: var(--fg); }
  .sw-btn:active { scale: .97; }
  .sw-btn:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
  .sw-btn__in { display: inline-grid; align-items: center; justify-items: center; }
  .sw-btn__in > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; }
  .sw-btn__busy { visibility: hidden; }
  .sw-btn--primary { --bg: var(--sw-olive); --fg: var(--sw-on-olive); --bd: var(--sw-olive); }
  .sw-btn--secondary { --bg: var(--sw-card); --fg: var(--sw-ink); --bd: var(--sw-line); }
  .sw-btn--ghost { --bg: transparent; --fg: var(--sw-olive); --bd: transparent; font-size: 14px; text-transform: uppercase; }
  .sw-btn--destructive { --bg: var(--sw-danger); --fg: #fff; --bd: var(--sw-danger); }
  @media (hover: hover) {
    .sw-btn--primary:hover:not(:disabled) { --bg: var(--sw-olive-2); --bd: var(--sw-olive-2); }
    .sw-btn--secondary:hover:not(:disabled) { --bg: var(--sw-ground-2); }
    .sw-btn--ghost:hover:not(:disabled) { --bg: var(--sw-olive-wash); }
  }
  /* A busy button is natively disabled (no double submit, even as a form's submit button) but
     keeps its colours: only a really disabled one greys out. */
  .sw-btn:disabled { cursor: default; scale: none; }
  .sw-btn--primary:disabled:not([aria-busy="true"]) { --bg: var(--sw-disabled); --bd: var(--sw-disabled); }
  .sw-btn--secondary:disabled:not([aria-busy="true"]), .sw-btn--ghost:disabled:not([aria-busy="true"]), .sw-btn--destructive:disabled:not([aria-busy="true"]) { opacity: .45; }
  .sw-btn[aria-busy="true"] { cursor: progress; }
  .sw-btn[aria-busy="true"] .sw-btn__label { visibility: hidden; }
  .sw-btn[aria-busy="true"] .sw-btn__busy { visibility: visible; }
  .sw-btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
  .sw-btn--lg { min-height: 50px; padding: 0 22px; }
  .sw-btn--block { display: flex; width: 100%; }
  .sw-btn--ghost.sw-btn--sm { font-size: 13px; }

  /* SwIconButton: 36px disc, 44px target */
  .sw-icon-btn {
    position: relative; flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--sw-line); border-radius: 50%; background: var(--sw-card); color: var(--sw-ink);
    cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: scale var(--sw-dur-fast) ease, background-color var(--sw-dur) ease;
  }
  .sw-icon-btn::after { content: ""; position: absolute; inset: -4px; }
  .sw-icon-btn:hover, .sw-icon-btn:visited { color: var(--sw-ink); }
  .sw-icon-btn:active { scale: .92; }
  .sw-icon-btn:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
  .sw-icon-btn:disabled { opacity: .45; cursor: default; scale: none; }
  .sw-icon-btn--plain { border-color: transparent; background: transparent; }
  .sw-icon-btn__dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--sw-go); box-shadow: 0 0 0 2px var(--sw-card); }

  /* SwChip. Filter chip: MJ's 12px-radius tile, olive when on. Status chip (Tone): small wash pill. */
  .sw-chip {
    position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 0 12px;
    border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-card); color: var(--sw-ink);
    font: 500 14px/1.2 var(--sw-font-ui); letter-spacing: var(--sw-tracking); white-space: nowrap; text-decoration: none;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--sw-dur) ease, border-color var(--sw-dur) ease, color var(--sw-dur) ease, scale var(--sw-dur-fast) ease;
  }
  .sw-chip::after { content: ""; position: absolute; inset: -4px 0; }
  .sw-chip:hover, .sw-chip:visited { color: var(--sw-ink); }
  .sw-chip:active { scale: .96; }
  .sw-chip:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
  .sw-chip.is-on, .sw-chip.is-on:hover { background: var(--sw-olive); border-color: var(--sw-olive); color: var(--sw-on-olive); }
  .sw-chip__count { color: var(--sw-ink-2); font-variant-numeric: tabular-nums; }
  .sw-chip.is-on .sw-chip__count { color: rgba(255, 255, 255, .75); }
  .sw-chip--status {
    min-height: 24px; padding: 0 9px; border-color: transparent; border-radius: var(--sw-r-pill); cursor: default;
    background: var(--sw-ground-2); color: var(--sw-ink-2); font: 600 12px/1 var(--sw-font-ui); letter-spacing: 0;
  }
  .sw-chip--status::after { content: none; }
  .sw-chip--status:active { scale: none; }
  .sw-chip--olive { background: var(--sw-olive); color: var(--sw-on-olive); }
  .sw-chip--go { background: var(--sw-go-wash); color: var(--sw-go); }
  .sw-chip--amber { background: var(--sw-amber-wash); color: var(--sw-amber); }
  .sw-chip--danger { background: var(--sw-danger-wash); color: var(--sw-danger); }

  /* SwSegmented: --n segments, --i selected; the olive puck slides under the selection */
  .sw-seg {
    --n: 2; --i: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    padding: 3px; border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-ground-2); isolation: isolate;
  }
  .sw-seg__puck {
    position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n));
    border-radius: 9px; background: var(--sw-olive); box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    transform: translateX(calc(var(--i) * 100%)); transition: transform calc(320ms / var(--sw-tempo)) var(--sw-pop);
  }
  .sw-seg__opt {
    min-width: 0; min-height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: none; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-tap-highlight-color: transparent;
    color: var(--sw-ink); font: 600 13px/1 var(--sw-font-ui); letter-spacing: 0; transition: color var(--sw-dur) ease;
  }
  .sw-seg__opt[aria-pressed="true"] { color: var(--sw-on-olive); }
  .sw-seg__opt:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 1px; }

  /* SwSwitch: MJ's 40x26 track (olive on, sage off), 22px thumb, 44px target */
  .sw-switch {
    position: relative; flex: none; display: inline-block; width: 40px; height: 26px; padding: 2px; border: 0; border-radius: 25px;
    background: var(--sw-line-3); cursor: pointer; vertical-align: middle; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--sw-dur) ease;
  }
  .sw-switch::before {
    content: ""; display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    transition: translate calc(260ms / var(--sw-tempo)) var(--sw-pop);
  }
  .sw-switch::after { content: ""; position: absolute; inset: -9px -2px; }
  .sw-switch[aria-checked="true"] { background: var(--sw-olive); }
  .sw-switch[aria-checked="true"]::before { translate: 14px 0; }
  .sw-switch:disabled { opacity: .45; cursor: default; }
  .sw-switch:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }

  /* Inputs, MJ's field: white, hairline, 12px radius. 16px text on phones so iOS never zooms. */
  .sw-input {
    width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--sw-line); border-radius: var(--sw-r-md);
    background: var(--sw-card); color: var(--sw-ink); font: 500 16px/1.4 var(--sw-font-body); caret-color: var(--sw-olive);
    -webkit-appearance: none; appearance: none; transition: border-color var(--sw-dur) ease;
  }
  .sw-input::placeholder { color: var(--sw-ink-3); }
  .sw-input:focus { outline: none; border-color: var(--sw-olive); }
  @media (min-width: 768px) { .sw-input { font-size: 14px; } }
  textarea.sw-input { min-height: 96px; resize: vertical; }
  .sw-field { display: grid; gap: 6px; }

  /* Card: white on hairline, the feed card's radius */
  .sw-card { position: relative; border: 1px solid var(--sw-line); border-radius: var(--sw-r-card); background: var(--sw-card); }

  /* THE card shell, one box for the whole app: white, radius 14, no hairline, the tile shadow.
     Feed cards (with .sw-fcard), marketplace cards and detail, alerts, Plans (browse, detail,
     Today, Get started), Calendar, Profile, Shoes and Settings all wear it, so they can't drift.
     Layered (components), so a page's own Tailwind layout and padding utilities still apply. */
  .sw-surface { position: relative; border: 0; border-radius: var(--sw-r-card); background: var(--sw-card); box-shadow: var(--sw-shadow-tile); }
  .sw-card--pad { padding: 16px; }

  /* SwSpinner: one ring in the current colour. Buttons and infinite scroll only; screens use SwSkeleton. */
  .sw-spinner {
    --s: 18px; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; vertical-align: middle;
    border: 2px solid currentColor; border-right-color: transparent; opacity: .9;
    animation: sw-spin calc(800ms / var(--sw-tempo)) linear infinite;
  }
  .sw-spinner.is-idle { animation: none; }

  /* Visually hidden, still read by screen readers */
  .sw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* 4. COMPONENTS ------------------------------------------------------------------------------- */
@layer components {
  /* SwListGroup + SwListRow */
  .sw-list { margin: 0 0 var(--sw-5); }
  .sw-list__title { display: block; margin: 0 4px 8px; }
  .sw-list__card { overflow: hidden; border: 1px solid var(--sw-line); border-radius: var(--sw-r-card); background: var(--sw-card); }
  .sw-list__foot { margin: 8px 4px 0; color: var(--sw-ink-2); font: 400 var(--sw-fs-small)/1.45 var(--sw-font-body); }
  .sw-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; margin: 0;
    border: 0; border-top: 1px solid var(--sw-line); background: none; color: var(--sw-ink); text-align: left; text-decoration: none;
    font: 500 15px/1.3 var(--sw-font-ui); letter-spacing: var(--sw-tracking); -webkit-tap-highlight-color: transparent;
  }
  .sw-row:first-child { border-top: 0; }
  a.sw-row, button.sw-row { cursor: pointer; transition: background-color var(--sw-dur-fast) ease; }
  a.sw-row:hover, a.sw-row:visited { color: var(--sw-ink); }
  a.sw-row:active, button.sw-row:active { background: var(--sw-ground-2); }
  @media (hover: hover) { a.sw-row:hover, button.sw-row:hover:not(:disabled) { background: var(--sw-ground-2); } }
  .sw-row:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: -2px; }
  .sw-row__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--sw-r-sm); background: var(--sw-ground-2); color: var(--sw-olive); }
  .sw-row__main { flex: 1 1 auto; min-width: 0; }
  .sw-row__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sw-row__sub { display: block; margin-top: 2px; color: var(--sw-ink-2); font: 400 var(--sw-fs-small)/1.35 var(--sw-font-body); letter-spacing: 0; }
  .sw-row__trail { flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 55%; color: var(--sw-ink-2); font-size: 14px; font-weight: 400; }
  .sw-row__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sw-row__chev { color: var(--sw-ink-3); }
  .sw-row.is-danger, .sw-row.is-danger:hover { color: var(--sw-danger); }
  .sw-row.is-danger .sw-row__icon { background: var(--sw-danger-wash); color: var(--sw-danger); }
  .sw-row:disabled, .sw-row[aria-disabled="true"] { opacity: .45; cursor: default; }

  /* SwPageHeader: one pattern for detail pages. Back disc, title, trailing actions. */
  .sw-ph { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; }
  .sw-ph--safe { padding-top: calc(var(--sw-safe-t) + 6px); }
  .sw-ph--sticky { position: sticky; top: 0; z-index: var(--sw-z-sticky); background: var(--sw-ground); }
  .sw-ph__titles { flex: 1 1 auto; min-width: 0; }
  .sw-ph__titles > .sw-label { display: block; margin-bottom: 2px; }
  .sw-ph__sub { margin: 2px 0 0; color: var(--sw-ink-2); font: 400 var(--sw-fs-small)/1.35 var(--sw-font-body); }
  .sw-ph__trail { flex: none; display: flex; align-items: center; gap: 8px; }

  /* SwSheet. Phones: bottom sheet, MJ's header (centred 16px title, 0.5px rule, disc close).
     >= 768px: centred dialog. The host is moved to <body> on first render (sw-ui.js). */
  .sw-sheet-host { display: contents; }
  .sw-sheet-root { position: fixed; inset: 0; z-index: var(--sw-z-sheet); display: flex; align-items: flex-end; justify-content: center; }
  /* z-index -1: paints under the panel, and ranks above it for Android back (index.html picks
     the deepest z-chain), so back taps the scrim, which honours Dismissible. */
  .sw-sheet__scrim { position: absolute; inset: 0; z-index: -1; background: var(--sw-scrim); touch-action: none; animation: sw-fade calc(320ms / var(--sw-tempo)) ease backwards; }
  .sw-sheet {
    position: relative; display: flex; flex-direction: column; width: 100%; max-width: 480px;
    max-height: calc(100vh - var(--sw-safe-t) - 12px); max-height: calc(100dvh - var(--sw-safe-t) - 12px);
    padding-bottom: var(--sw-safe-b); overflow: hidden; outline: none; touch-action: pan-y;
    border-radius: var(--sw-r-sheet) var(--sw-r-sheet) 0 0; background: var(--sw-card); box-shadow: var(--sw-shadow-sheet);
    animation: sw-sheet-up calc(320ms / var(--sw-tempo)) var(--sw-glide) backwards;
  }
  .sw-sheet--foot { padding-bottom: 0; }
  .sw-sheet--tall { height: 88vh; height: 88dvh; }
  .sw-sheet__grab { flex: none; display: grid; place-items: center; height: 20px; cursor: grab; touch-action: none; }
  .sw-sheet__grab::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--sw-line-2); }
  .sw-sheet__head { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 10px; border-bottom: .5px solid var(--sw-line-2); touch-action: none; }
  .sw-sheet__side { flex: none; display: flex; justify-content: center; width: 32px; }
  .sw-sheet__titles { flex: 1 1 auto; min-width: 0; text-align: center; }
  .sw-sheet__titles > .sw-label { display: block; }
  .sw-sheet__close, .sw-sheet__back {
    position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
    background: var(--sw-ground-2); color: var(--sw-ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .sw-sheet__back { background: none; }
  .sw-sheet__close::after, .sw-sheet__back::after { content: ""; position: absolute; inset: -8px; }
  .sw-sheet__close:disabled { opacity: .45; cursor: default; }
  .sw-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 20px; }
  .sw-sheet--flush .sw-sheet__body { padding: 0; }
  .sw-sheet__foot {
    flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px calc(10px + var(--sw-safe-b));
    border-top: .5px solid var(--sw-line-2); background: var(--sw-card);
  }
  .sw-sheet__foot > .sw-btn--block { flex: 1 1 0; width: auto; }
  @media (min-width: 768px) {
    .sw-sheet-root { align-items: center; padding: 24px; }
    .sw-sheet {
      max-width: 520px; max-height: min(760px, 88vh); padding-bottom: 0; border-radius: 18px;
      animation: sw-pop calc(260ms / var(--sw-tempo)) var(--sw-out) backwards;
    }
    .sw-sheet--tall { height: min(760px, 88vh); }
    .sw-sheet__grab { height: 12px; visibility: hidden; }
    .sw-sheet__foot { padding-bottom: 10px; }
  }

  /* SwConfirm (a SwSheet) */
  .sw-sheet--confirm { max-width: 420px; }
  .sw-confirm { padding: 4px 4px 0; text-align: center; }
  .sw-confirm__icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: var(--sw-ground-2); color: var(--sw-olive); }
  .sw-confirm--destructive .sw-confirm__icon { background: var(--sw-danger-wash); color: var(--sw-danger); }
  .sw-confirm__msg { margin: 0; color: var(--sw-ink-2); font: 400 var(--sw-fs-body)/1.45 var(--sw-font-body); text-wrap: pretty; }
  .sw-confirm__error { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--sw-r-md); background: var(--sw-danger-wash); color: var(--sw-danger); font: 500 14px/1.4 var(--sw-font-body); text-align: left; }
  .sw-confirm__actions { display: grid; gap: 6px; margin-top: 20px; }
  @media (min-width: 768px) {
    .sw-sheet--confirm { max-width: 400px; }
    .sw-confirm__actions { grid-template-columns: 1fr 1fr; gap: 10px; }
    .sw-confirm__actions > :first-child { order: 2; }
  }
  /* SwConfirm Layout="sheet" (Feed_DeleteConfirm, Shoes_RemoveSheet): header, preview, message, footer. */
  .sw-sheet--confirm-sheet { max-width: none; }
  .sw-sheet--confirm-sheet .sw-sheet__foot { gap: 30px; }
  .sw-confirm-sheet { display: flex; flex-direction: column; gap: 14px; }
  .sw-confirm-sheet__msg { margin: 0; font: 500 14px/20px var(--sw-font-ui); color: var(--sw-ink); text-wrap: pretty; }
  .sw-confirm-sheet .sw-confirm__error { margin: 0; }
  .sw-confirm-preview { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--sw-ground-2); text-align: left; }
  .sw-confirm-preview__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--sw-card); color: var(--sw-olive-2); }
  .sw-confirm-preview__text { min-width: 0; display: flex; flex-direction: column; }
  .sw-confirm-preview__title { font: 600 15px/20px var(--sw-font-ui); color: var(--sw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sw-confirm-preview__meta { font: 500 12px/16px var(--sw-font-ui); color: var(--sw-ink-muted); }
  @media (min-width: 768px) {
    .sw-sheet--confirm-sheet { max-width: 440px; }
  }

  /* SwEmptyState: never a dead end */
  .sw-empty { display: grid; justify-items: center; padding: 40px 24px; text-align: center; }
  .sw-empty--compact { padding: 24px 16px; }
  .sw-empty__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border: 1px solid var(--sw-line); border-radius: 50%; background: var(--sw-card); color: var(--sw-olive); }
  .sw-empty__body { max-width: 34ch; margin: 6px 0 0; color: var(--sw-ink-2); font: 400 var(--sw-fs-body)/1.45 var(--sw-font-body); text-wrap: pretty; }
  .sw-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }

  /* SwSkeleton: first load only; a refetch keeps the old content on screen */
  .sw-skel {
    display: block; border-radius: 6px;
    background: linear-gradient(90deg, var(--sw-ground-2) 25%, #faf9f7 50%, var(--sw-ground-2) 75%) 0 0 / 200% 100%;
    animation: sw-shimmer calc(1400ms / var(--sw-tempo)) ease-in-out infinite;
  }
  /* On white the cream base would vanish; step down to the page ground. */
  .sw-card .sw-skel, .sw-list__card .sw-skel, .sw-sheet .sw-skel {
    background-image: linear-gradient(90deg, var(--sw-ground) 25%, var(--sw-ground-2) 50%, var(--sw-ground) 75%);
  }
  .sw-skel--line { height: .8em; border-radius: 5px; }
  .sw-skel--block { border-radius: var(--sw-r-card); }
  .sw-skel--circle { border-radius: 50%; }
  .sw-skel-lines { display: grid; gap: 8px; }

  /* SwStepper: wizard chrome. Bars fill as you go; each step is re-keyed and slides in from
     the side it came from. */
  .sw-stepper { display: flex; flex-direction: column; min-height: 0; }
  .sw-stepper__top { flex: none; display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; }
  .sw-stepper__spacer { flex: none; width: 36px; height: 36px; }
  .sw-stepper__bars { --n: 3; flex: 1 1 auto; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; }
  .sw-stepper__bar { position: relative; height: 3px; overflow: hidden; border-radius: 2px; background: var(--sw-line); }
  .sw-stepper__bar::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--sw-olive);
    transition: width calc(550ms / var(--sw-tempo)) var(--sw-out);
  }
  .sw-stepper__bar.is-done::after, .sw-stepper__bar.is-now::after { width: 100%; }
  .sw-stepper__screen { flex: 1 1 auto; min-height: 0; outline: none; animation: sw-step-in calc(380ms / var(--sw-tempo)) var(--sw-glide) backwards; }
  .sw-stepper__screen.is-back { animation-name: sw-step-back; }
  .sw-stepper__screen.is-first { animation: none; }
  .sw-stepper__screen > .sw-label { display: block; margin-bottom: 4px; }
  .sw-stepper__foot { flex: none; display: flex; align-items: center; gap: 12px; padding-top: 14px; }
  .sw-stepper__foot > .sw-btn--block { flex: 1 1 0; width: auto; }
}

/* SwToastHost: one host, dropped in under the status bar, above sheets. */
.sw-toast-host {
  position: fixed; z-index: var(--sw-z-toast); top: calc(var(--sw-safe-t) + 8px); left: 0; right: 0;
  display: grid; justify-items: center; padding: 0 12px; pointer-events: none;
}
.sw-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 4px; width: min(100%, 420px); padding: 6px;
  border: 1px solid var(--sw-line); border-radius: var(--sw-r-card); background: var(--sw-card); box-shadow: var(--sw-shadow-pop);
  animation: sw-drop calc(420ms / var(--sw-tempo)) var(--sw-pop) backwards;
}
.sw-toast.is-leaving {
  opacity: 0; translate: 0 -30%;
  transition: opacity calc(220ms / var(--sw-tempo)) ease, translate calc(220ms / var(--sw-tempo)) ease;
}
.sw-toast__main {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 6px; border: 0;
  background: none; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sw-toast__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--sw-r-sm); background: var(--sw-ground-2); color: var(--sw-olive); }
.sw-toast--success .sw-toast__icon { background: var(--sw-go-wash); color: var(--sw-go); }
.sw-toast--error .sw-toast__icon { background: var(--sw-danger-wash); color: var(--sw-danger); }
.sw-toast__text { flex: 1 1 auto; min-width: 0; }
.sw-toast__k { display: block; margin-bottom: 1px; }
.sw-toast__t { display: block; font: 600 14px/1.3 var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); text-wrap: pretty; }
.sw-toast__go { flex: none; color: var(--sw-ink-3); }
.sw-toast__action {
  flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--sw-r-sm); background: var(--sw-ground-2);
  color: var(--sw-olive); font: 600 13px/1 var(--sw-font-ui); text-transform: uppercase; cursor: pointer;
}

/* Heading sizes inside components (unlayered, see the header note) */
.sw-ph__title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--sw-fs-h2)/1.2 var(--sw-font-head); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
.sw-sheet__title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--sw-fs-h3)/1.3 var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
.sw-confirm__title { margin: 0 0 6px; font: 600 var(--sw-fs-h2)/1.25 var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); text-wrap: balance; }
.sw-empty__title { margin: 0; font: 600 18px/1.3 var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); text-wrap: balance; }
.sw-stepper__screen > .sw-h2 { margin-bottom: 14px; }

/* 5. MOTION KIT ------------------------------------------------------------------------------- */
/* New keyframes hold only the "from" state and use the individual translate/scale/rotate
   properties, so they compose with an element's own transform. */
@keyframes sw-rise { from { opacity: 0; translate: 0 var(--rise, 12px); } }
@keyframes sw-fade { from { opacity: 0; } }
@keyframes sw-fade-out { to { opacity: 0; } }
@keyframes sw-pop { from { opacity: 0; scale: .94; } }
@keyframes sw-drop { from { opacity: 0; translate: 0 -120%; } }
@keyframes sw-sheet-up { from { translate: 0 100%; } }
@keyframes sw-step-in { from { opacity: 0; translate: 18px 0; } }
@keyframes sw-step-back { from { opacity: 0; translate: -18px 0; } }
@keyframes sw-shake { 20% { translate: -5px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
@keyframes sw-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes sw-spin { to { rotate: 360deg; } }

.sw-rise { animation: sw-rise var(--sw-dur-slow) var(--sw-out) backwards; animation-delay: calc(var(--d, 0ms) / var(--sw-tempo)); }
.sw-fade { animation: sw-fade var(--sw-dur) var(--sw-out) backwards; animation-delay: calc(var(--d, 0ms) / var(--sw-tempo)); }
.sw-pop { animation: sw-pop var(--sw-dur) var(--sw-pop) backwards; animation-delay: calc(var(--d, 0ms) / var(--sw-tempo)); }
.sw-shake { animation: sw-shake calc(360ms / var(--sw-tempo)) linear; }

/* Staggered rise for a block's children: 60ms steps, capped at 10. */
.sw-stagger > * { animation: sw-rise var(--sw-dur-slow) var(--sw-out) backwards; }
.sw-stagger > :nth-child(2) { animation-delay: calc(60ms / var(--sw-tempo)); }
.sw-stagger > :nth-child(3) { animation-delay: calc(120ms / var(--sw-tempo)); }
.sw-stagger > :nth-child(4) { animation-delay: calc(180ms / var(--sw-tempo)); }
.sw-stagger > :nth-child(5) { animation-delay: calc(240ms / var(--sw-tempo)); }
.sw-stagger > :nth-child(6) { animation-delay: calc(300ms / var(--sw-tempo)); }
.sw-stagger > :nth-child(7) { animation-delay: calc(360ms / var(--sw-tempo)); }
.sw-stagger > :nth-child(8) { animation-delay: calc(420ms / var(--sw-tempo)); }
.sw-stagger > :nth-child(9) { animation-delay: calc(480ms / var(--sw-tempo)); }
.sw-stagger > :nth-child(10) { animation-delay: calc(540ms / var(--sw-tempo)); }
.sw-stagger > :nth-child(n+11) { animation: none; }

/* Press feedback for anything tappable */
.sw-press { transition: scale var(--sw-dur-fast) ease; }
.sw-press:active { scale: .97; }

/* Scroll-driven rise where supported (Safari 26+, Chrome); elsewhere content is simply there. */
@supports (animation-timeline: view()) {
  .sw-scroll-rise { animation: sw-rise linear backwards; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}

/* Route transitions (MainLayout, sw/sw-shell.js). html[data-sw-nav] is push | back | fade | none, set
   when the path changes; the routed page (.sw-route, re-keyed per path) fades in. Opacity only: an
   animated translate or transform, even at 0, makes the page the containing block of its
   position:fixed UI (comment bar, toasts, covers) for the whole run, so that UI would sit in the page
   and then jump to the viewport. "none" is a history swipe or the browser's own back, which already
   drew its own transition. The start opacity is a variable, not one keyframe per kind: a page already
   on screen keeps its animation-name when the attribute changes, so it never replays, and before the
   first navigation it is 1, so the first paint does not fade. The feed and marketplace family (the
   kept-alive layers and .sw-layer--legacy routes) swaps instantly, as it always has. */
@keyframes sw-route { from { opacity: var(--sw-route-o, 1); } }
html[data-sw-nav] { --sw-route-o: 0; }
html[data-sw-nav="none"] { --sw-route-o: 1; }
.sw-route { animation: sw-route var(--sw-dur) var(--sw-glide) backwards; }
.sw-layer--legacy > .sw-route { animation: none; }

/* View Transitions (swUi.vt): pages name the parts that move with view-transition-name. */
::view-transition-group(*) { animation-duration: calc(380ms / var(--sw-tempo)); animation-timing-function: var(--sw-glide); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: calc(240ms / var(--sw-tempo)); }

/* 6. LEGACY ANIMATIONS ------------------------------------------------------------------------ */
/* Moved here from app.css and MainLayout's inline <style> so every animation lives in one place.
   Frames, durations and fill modes are exactly what shipped (feed and marketplace must not move a
   pixel); only the curve that equals --sw-out is named, and durations now follow --sw-tempo.
   These keep their explicit "to" frames on purpose: the forwards fill is part of how they render. */

/* Feed card entrance (FeedItemCard) */
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.feed-card-animate { animation: cardFadeUp calc(400ms / var(--sw-tempo)) var(--sw-out) both; }
.feed-card-animate:nth-child(1) { animation-delay: 0ms; }
.feed-card-animate:nth-child(2) { animation-delay: calc(60ms / var(--sw-tempo)); }
.feed-card-animate:nth-child(3) { animation-delay: calc(120ms / var(--sw-tempo)); }
.feed-card-animate:nth-child(4) { animation-delay: calc(180ms / var(--sw-tempo)); }
.feed-card-animate:nth-child(5) { animation-delay: calc(240ms / var(--sw-tempo)); }
.feed-card-animate:nth-child(6) { animation-delay: calc(300ms / var(--sw-tempo)); }
.feed-card-animate:nth-child(7) { animation-delay: calc(360ms / var(--sw-tempo)); }
.feed-card-animate:nth-child(8) { animation-delay: calc(420ms / var(--sw-tempo)); }

/* Like heart (FeedCardFooter). Its own springy curve, kept. */
@keyframes heartPop {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(0.95); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.like-button-animate { transition: color calc(200ms / var(--sw-tempo)) ease, transform calc(100ms / var(--sw-tempo)) ease; }
.like-button-animate:active { transform: scale(0.92); }
.like-button-animate.liked svg { animation: heartPop calc(450ms / var(--sw-tempo)) cubic-bezier(0.17, 0.89, 0.32, 1.28); }

/* Centred legacy modals (MainLayout prompts, ContactSellerModal, admin Shoes) */
@keyframes modal-panel-slide-up {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-modal-backdrop { animation: sw-fade calc(200ms / var(--sw-tempo)) ease-out forwards; }
.animate-modal-panel { animation: modal-panel-slide-up calc(300ms / var(--sw-tempo)) var(--sw-out) forwards; }

/* Header search panel (MainLayout) */
@keyframes searchSlideDown {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}
.search-panel-enter { animation: searchSlideDown calc(200ms / var(--sw-tempo)) ease-out forwards; }

/* Bottom-nav create menu (MainLayout): the bloom and its backdrop. Bespoke curves, kept. */
@keyframes createMenuBloom {
  0% { opacity: 0; transform: scale(0) translateY(40px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes createMenuCollapse {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0) translateY(40px); }
}
.create-menu-item { animation: createMenuBloom calc(350ms / var(--sw-tempo)) cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.create-menu-item.closing { animation: createMenuCollapse calc(250ms / var(--sw-tempo)) cubic-bezier(0.55, 0, 1, 0.45) both; }
.create-menu-backdrop { animation: sw-fade calc(300ms / var(--sw-tempo)) ease-out both; }
.create-menu-backdrop.closing { animation: sw-fade-out calc(250ms / var(--sw-tempo)) ease-in both; }

/* 6b. MARKETPLACE KIT ----------------------------------------------------------------------- */
/* Sits apart from the feed's section 8 and shares its names wherever both describe the same
   thing: --sw-shadow-tile and --sw-ink-muted are section 1 tokens, and the card shell is the one
   .sw-surface (section 4). The marketplace's anchored popover is .sw-pop-menu; .sw-menu belongs
   to the feed. */
@layer components {
  .sw-label--strong { color: var(--sw-ink-muted); }
  /* Mono section label inside a card: DESCRIPTION, QUESTIONS (2), WATCHING (2). */
  .sw-section-label {
    display: block; margin: 0; font: 700 12px/15px var(--sw-font-mono); letter-spacing: var(--sw-tracking);
    text-transform: uppercase; color: var(--sw-ink-muted);
  }
  /* Field label in a sheet: Inter 12/16 bold caps, 6px above its control. */
  .sw-flabel {
    display: block; margin: 0 0 6px; font: 700 12px/16px var(--sw-font-ui); letter-spacing: -.2px;
    text-transform: uppercase; color: var(--sw-ink-muted);
  }
  .sw-hint { margin: 6px 0 0; font: 500 12px/16px var(--sw-font-ui); color: var(--sw-ink-muted); }
  .sw-hint--ok { display: flex; align-items: center; gap: 6px; color: var(--sw-olive); }
  .sw-hint--error { color: var(--sw-danger); }

  /* Anchored popover menu (MJ's Market_ViewMenu): the view menu, the sort menus, a listing's kebab
     and a saved search's menu. Opens 10px under its trigger inside a position:relative wrapper;
     --end anchors it to the trigger's right edge, --up opens it above. Not .sw-menu: that is the
     feed's fixed, JS-placed panel, and the two must not share rules. */
  .sw-pop-menu {
    position: absolute; z-index: var(--sw-z-popover); top: calc(100% + 10px); left: 0; min-width: 200px; padding: 6px 12px;
    /* The same near-opaque warm white as .sw-menu, so a photo behind can't tint it. */
    border-radius: var(--sw-r-card); background: rgba(255, 253, 250, .96);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--sw-shadow-pop);
    transform-origin: top left; animation: sw-pop calc(180ms / var(--sw-tempo)) var(--sw-out) backwards;
  }
  .sw-pop-menu--end { left: auto; right: 0; transform-origin: top right; }
  .sw-pop-menu--up { top: auto; bottom: calc(100% + 10px); transform-origin: bottom right; }
  .sw-pop-menu__row {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 0 4px;
    border: 0; border-bottom: .5px solid var(--sw-line-3); background: none; text-align: left; text-decoration: none; cursor: pointer;
    font: 500 15px/1.2 var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-olive-2);
    -webkit-tap-highlight-color: transparent; transition: background-color var(--sw-dur-fast) ease;
  }
  .sw-pop-menu__row:last-child { border-bottom: 0; }
  .sw-pop-menu__row:active { background: var(--sw-olive-wash); }
  .sw-pop-menu__row:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: -2px; border-radius: 6px; }
  .sw-pop-menu__row:disabled { opacity: .45; cursor: default; }
  .sw-pop-menu__row.is-danger { color: var(--sw-danger); }
  .sw-pop-menu__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sw-pop-menu__check { flex: none; margin-left: auto; color: var(--sw-olive); }
  .sw-pop-menu__sep { height: 6px; margin: 0 -12px 6px; border-bottom: .5px solid var(--sw-line-3); }
  .sw-pop-menu__k {
    margin: 0; padding: 8px 4px 4px; font: 500 11px/14px var(--sw-font-mono); letter-spacing: .06em;
    text-transform: uppercase; color: var(--sw-ink-muted);
  }
  .sw-pop-menu-catch {
    position: fixed; inset: 0; z-index: calc(var(--sw-z-popover) - 1); width: 100%; height: 100%; margin: 0; padding: 0;
    border: 0; background: rgba(0, 0, 0, .08); cursor: default; -webkit-tap-highlight-color: transparent;
    animation: sw-fade calc(180ms / var(--sw-tempo)) ease backwards;
  }
  @media (min-width: 1024px) { .sw-pop-menu-catch { background: transparent; } }

  /* Pills: the view pill (the page's title on phones) and the sort pill. 40px, never collapses. */
  .sw-pill {
    position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 40px; max-width: 100%; padding: 0 12px;
    border: 1px solid rgba(0, 0, 0, .05); border-radius: 25px; background: rgba(255, 255, 255, .55); color: var(--sw-olive-2);
    font: 500 14px/18px var(--sw-font-ui); letter-spacing: var(--sw-tracking); white-space: nowrap; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: scale var(--sw-dur-fast) ease, background-color var(--sw-dur) ease;
  }
  .sw-pill:active { scale: .97; }
  .sw-pill:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
  .sw-pill--view { box-shadow: 1px 1px 4px rgba(0, 0, 0, .18); font-size: 15px; font-weight: 700; }
  .sw-pill--sort { gap: 8px; }
  .sw-pill__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .sw-pill__chev { flex: none; transition: rotate calc(160ms / var(--sw-tempo)) var(--sw-out); }
  .sw-pill[aria-expanded="true"] .sw-pill__chev { rotate: 180deg; }

  /* Liquid-glass circle (filter, alerts, back, kebab). Active = a filter or menu is on. */
  .sw-glass-btn {
    position: relative; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 50%; color: var(--sw-olive-2); cursor: pointer; text-decoration: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .25) 100%);
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .10);
    -webkit-tap-highlight-color: transparent; transition: scale var(--sw-dur-fast) ease, background-color var(--sw-dur) ease;
  }
  .sw-glass-btn:hover, .sw-glass-btn:visited { color: var(--sw-olive-2); }
  .sw-glass-btn:active { scale: .92; }
  .sw-glass-btn:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
  .sw-glass-btn.is-active, .sw-glass-btn[aria-expanded="true"] {
    background: rgba(55, 60, 43, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 8px rgba(0, 0, 0, .10);
  }
  .sw-glass-btn__badge {
    position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--sw-olive); box-shadow: 0 0 0 2px var(--sw-ground); color: #fff; text-align: center;
    font: 700 11px/18px var(--sw-font-ui); letter-spacing: 0; font-variant-numeric: tabular-nums; pointer-events: none;
    animation: sw-pop calc(280ms / var(--sw-tempo)) var(--sw-pop) backwards;
  }

  /* Removable filter chip: the whole chip removes its filter. 32px tall, 44px to the finger. */
  .sw-chip--removable {
    min-height: 32px; height: 32px; padding: 0 8px 0 12px; border-radius: 25px; font-size: 13px; letter-spacing: -.2px; gap: 6px;
  }
  .sw-chip--removable::after { inset: -6px 0; }
  .sw-chip--removable > .sw-icon:last-child { color: var(--sw-ink-muted); }
  .sw-chip--removable.is-leaving { opacity: 0; scale: .9; pointer-events: none; transition: opacity calc(160ms / var(--sw-tempo)) ease, scale calc(160ms / var(--sw-tempo)) ease; }
  .sw-chip--pill { min-height: 32px; height: 32px; border-radius: 25px; }

  /* Choice tile (Ships from, Miles, sizes, ±½): 40px+, olive when on, ink when off. */
  .sw-choice {
    display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 40px; padding: 0 6px;
    border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-card); color: var(--sw-ink);
    font: 500 14px/1.2 var(--sw-font-ui); letter-spacing: var(--sw-tracking); white-space: nowrap; cursor: pointer;
    -webkit-tap-highlight-color: transparent; font-variant-numeric: tabular-nums;
    transition: background-color var(--sw-dur) ease, border-color var(--sw-dur) ease, color var(--sw-dur) ease, scale var(--sw-dur-fast) ease;
  }
  .sw-choice:active { scale: .96; }
  .sw-choice:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
  .sw-choice[aria-pressed="true"], .sw-choice[aria-checked="true"], .sw-choice.is-on { border-color: var(--sw-olive); background: var(--sw-olive); color: var(--sw-on-olive); }
  .sw-choice.is-near, .sw-choice.is-between { border-color: var(--sw-line); background: var(--sw-ground-2); color: var(--sw-ink); }
  .sw-choice:disabled { opacity: .45; cursor: default; }
  .sw-choice--lg { min-height: 44px; }
  .sw-choice--tile { min-height: 48px; font-size: 15px; font-weight: 600; }
  .sw-choice__sub { display: block; margin-top: 2px; font-size: 10px; font-weight: 500; color: var(--sw-ink-muted); }
  .sw-choice[aria-pressed="true"] .sw-choice__sub { color: rgba(255, 255, 255, .75); }

  /* Picker row: a field that opens a sub-view (Brand, Size, Status). */
  .sw-picker {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 0 10px 0 12px;
    border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-card); color: var(--sw-ink); text-align: left;
    font: 500 16px/1.3 var(--sw-font-ui); letter-spacing: var(--sw-tracking); cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: border-color var(--sw-dur) ease;
  }
  .sw-picker:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
  .sw-picker__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sw-picker__value.is-empty { color: var(--sw-ink-3); }
  .sw-picker__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/16px var(--sw-font-ui); color: var(--sw-ink-muted); }
  .sw-picker > .sw-icon:last-child { color: var(--sw-line-3); }
  @media (min-width: 768px) { .sw-picker { font-size: 15px; } }

  /* .sw-input drops the native look, so a select gets its chevron back. */
  select.sw-input {
    padding-right: 34px; cursor: pointer;
    background: var(--sw-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ea796' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 18px 18px;
  }

  /* Switch row on an inset well (Save this search, Alert me). */
  .sw-switch-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px;
    border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-ground-2); text-align: left;
  }
  .sw-switch-row.is-off { opacity: .5; }
  .sw-switch-row__t { display: block; font: 600 15px/1.3 var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
  .sw-switch-row__s { display: block; font: 500 12px/16px var(--sw-font-ui); color: var(--sw-ink-muted); }

  /* Check row in a picker sub-view (brands, categories, statuses). */
  .sw-check-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 0;
    border: 0; border-bottom: .5px solid var(--sw-line-3); background: none; text-align: left; cursor: pointer;
    font: 500 15px/1.3 var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); -webkit-tap-highlight-color: transparent;
  }
  .sw-check-row:last-child { border-bottom: 0; }
  .sw-check-row:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: -2px; }
  .sw-check-box {
    flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--sw-line-2); border-radius: 6px;
    background: var(--sw-card); color: transparent; transition: background-color var(--sw-dur-fast) ease, border-color var(--sw-dur-fast) ease;
  }
  [aria-checked="true"] > .sw-check-box { border-color: var(--sw-olive); background: var(--sw-olive); color: #fff; }
  .sw-check-box--round { border-radius: 50%; }

  /* Inline ring for pull-to-refresh (22px, olive on a sand track). */
  .sw-ring {
    --s: 22px; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%;
    border: 2px solid var(--sw-line-2); border-top-color: var(--sw-olive-2);
    animation: sw-spin calc(800ms / var(--sw-tempo)) linear infinite;
  }

  /* SwEmptyState in MJ's form: no icon disc, 120px of air on a page (32px in a sheet). */
  .sw-empty--mj { padding: 120px 24px 0; }
  .sw-sheet .sw-empty--mj, .sw-empty--mj.sw-empty--compact { padding: 32px 12px 8px; }
  .sw-empty--mj .sw-empty__body { max-width: 300px; margin-top: 10px; font: 500 13px/19px var(--sw-font-ui); color: var(--sw-ink-muted); }
  /* The CTA hugs its label as the empty-state CTA (7.4: 14/600, padding 10/18), the same as Feed's,
     with a text button under it when there is one (Alerts_Empty). A filled pair (primary and
     secondary) stacks in a 240px column so the two line up (Market_EmptyFilters, Alerts_NoResults). */
  .sw-empty--mj .sw-empty__actions { flex-direction: column; flex-wrap: nowrap; align-items: center; width: auto; max-width: 100%; gap: 8px; margin-top: 18px; }
  .sw-empty--mj .sw-empty__actions > .sw-btn { min-height: 40px; padding: 10px 18px; font-size: 14px; line-height: 20px; }
  .sw-empty--mj .sw-empty__actions > .sw-btn--ghost { padding: 10px; line-height: 16px; }
  .sw-empty--mj .sw-empty__actions:has(> .sw-btn--secondary) { align-items: stretch; width: 240px; }
  .sw-empty--mj .sw-empty__actions:has(> .sw-btn--secondary) > .sw-btn { width: 100%; min-height: 44px; padding: 0 18px; font-size: 16px; line-height: 1.2; }
}
/* Unlayered: beats MAUI's css/mobile.css h2 size (a section label is often an h2). */
.sw-empty--mj .sw-empty__title { font: 600 16px/21px var(--sw-font-ui); letter-spacing: var(--sw-tracking); }
h2.sw-section-label, h3.sw-section-label { font: 700 12px/15px var(--sw-font-mono); }

/* --- Marketplace --------------------------------------------------------------------------- */
@layer components {
  /* Applied-filter row under the header: one line, scrolls sideways, fades out at the right. */
  .mkt-chiprow {
    display: flex; align-items: center; gap: 8px; height: 44px; margin: -6px 0 6px; padding: 6px 0; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .mkt-chiprow::-webkit-scrollbar { display: none; }

  /* A refetch keeps the list on screen, dimmed, until the new one swaps in. */
  .mkt-body { transition: opacity calc(160ms / var(--sw-tempo)) ease; }
  .mkt-body[aria-busy="true"] { opacity: .5; pointer-events: none; }
  /* First page: staggered rise (60ms steps, capped). Appended pages and refetches: a short fade. */
  .mkt-in { animation: sw-rise var(--sw-dur-slow) var(--sw-out) backwards; animation-delay: calc(var(--d, 0ms) / var(--sw-tempo)); }
  .mkt-in--fade { animation: sw-fade calc(200ms / var(--sw-tempo)) var(--sw-out) backwards; }
  .mkt-fade { animation: sw-fade var(--sw-dur) var(--sw-out) backwards; }

  /* Paging footer: same 128px whatever it shows, so nothing shifts. */
  .mkt-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 128px; padding: 24px 0; text-align: center; color: var(--sw-olive-2); }
  .mkt-more__text { margin: 0; font: 500 13px/19px var(--sw-font-ui); color: var(--sw-ink-muted); }
  .mkt-end { margin: 0; padding: 32px 0; text-align: center; font: 500 13px/19px var(--sw-font-ui); color: var(--sw-ink-muted); }

  /* Pull to refresh: one ring; the gap closes only after the list has swapped. */
  .mkt-ptr { display: flex; align-items: center; justify-content: center; height: 0; overflow: hidden; transition: height calc(200ms / var(--sw-tempo)) var(--sw-out); }
  .mkt-ptr.pulling { height: var(--pull-height, 0px); transition: none; }
  .mkt-ptr.refreshing { height: 60px; }
  .mkt-ptr__arrow { width: 22px; height: 22px; color: var(--sw-olive-2); transition: rotate calc(200ms / var(--sw-tempo)) ease; }
  .mkt-ptr__arrow.ready { rotate: 180deg; }

  /* Listing-card skeleton: the card's exact geometry. */
  .mkt-skel-card { display: flex; height: 120px; overflow: hidden; }
  .mkt-skel-card .mkt-skel-card__photo { flex: none; width: 120px; height: 120px; border-radius: 0; }
  .mkt-skel-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; }
  .mkt-skel-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .mkt-skel-card__lines { display: flex; flex-direction: column; gap: 8px; width: 60%; padding-top: 6px; }
  .mkt-skel-card__stats { display: flex; gap: 10px; padding-top: 7px; border-top: 1px solid var(--sw-line); }

  /* Search result row (the listing wizard's shoe and brand pickers). */
  .mkt-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/20px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
  .mkt-result {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 0; border: 0; border-bottom: .5px solid var(--sw-line-3);
    background: none; color: var(--sw-ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mkt-result:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: -2px; }
  .mkt-result__act { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 600 14px/1 var(--sw-font-ui); color: var(--sw-olive); }

  /* Listing detail */
  .mkt-stat__k { margin: 0; font: 500 10px/13px var(--sw-font-mono); color: var(--sw-ink-muted); }
  .mkt-stat__v { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 16px/18px var(--sw-font-mono); color: var(--sw-ink); }
  .mkt-you { flex: none; border-radius: 6px; background: var(--sw-ground-2); padding: 4px 8px; font: 500 11px/13px var(--sw-font-mono); color: var(--sw-ink); }
  .mkt-safe-link {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; border: 0; background: none; cursor: pointer;
    font: 600 13px/1 var(--sw-font-ui); color: var(--sw-olive-2); text-decoration: underline; text-underline-offset: 2px;
  }

  /* The marketplace's own sheets (filter, listing wizard) wear SwSheet's chrome and motion. */
  .mkt-sheet { animation: sw-sheet-up calc(320ms / var(--sw-tempo)) var(--sw-glide) backwards; box-shadow: var(--sw-shadow-sheet); }
  .mkt-sheet__scrim { animation: sw-fade calc(320ms / var(--sw-tempo)) ease backwards; }
  .mkt-bars { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; margin-bottom: 16px; }
  .mkt-bars > span { position: relative; height: 3px; overflow: hidden; border-radius: 2px; background: var(--sw-line); }
  .mkt-bars > span::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--sw-olive); transition: width calc(550ms / var(--sw-tempo)) var(--sw-out); }
  .mkt-bars > span.is-done::after { width: 100%; }
}
/* Unlayered: the listing title is an h1 and the card title an h3, which MAUI's css/mobile.css
   would otherwise resize (the h1 to 28px, wrapping long titles onto three lines). */
.mkt-title { margin: 2px 0 0; font: 600 22px/27px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); overflow-wrap: anywhere; }
.mkt-card-title { margin: 0; font: 600 18px/23px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
@media (min-width: 1024px) {
  .mkt-sheet-host.mkt-web .mkt-sheet { animation: sw-pop calc(260ms / var(--sw-tempo)) var(--sw-out) backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-ring { animation: none !important; }
}

/* 7. REDUCED MOTION --------------------------------------------------------------------------- */
/* The one switch for the whole app. Animations still run, in .01ms and once, so anything that
   ends on a forwards fill lands visible instead of staying hidden. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  .sw-skel, .sw-scroll-rise { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* 8. FEED ------------------------------------------------------------------------------------- */
/* The feed family (Feed_* boards): one card shell for posts, runs, listings, the Get Started card
   and the detail pages; the header, footer, menus, refetch bar, pull to refresh, skeleton and
   states around it. Unlayered on purpose: the titles are h1/h3 and must beat css/mobile.css's
   element sizes in the app, and nothing here should lose to a stray Tailwind utility. */
:root {
  --sw-danger-mj: #b84c41;           /* liked heart, destructive rows, delete button */
  --sw-tan: rgba(171, 148, 126, .98);
  --sw-tile: #f0e9e6;                /* stat tile */
  --sw-fs-card-title: 18px;
  --sw-fs-detail-title: 22px;
  --sw-feed-w: 600px;               /* Feed_Desktop: the feed's column, controls included */
}
/* The controls, hint and progress line share the cards' column on wide screens. The bar must
   stay a direct child of the scrolling layer to stay sticky, so it's narrowed here, not wrapped. */
.feed-layer > .feed-controls-bar { max-width: var(--sw-feed-w); margin-left: auto; margin-right: auto; }
/* Its own rule: a WebView without :has() drops only this one. */
.feed-controls-bar:has(+ .sw-detail-stack) { max-width: var(--sw-feed-w); margin-left: auto; margin-right: auto; }

/* List: every child (announcements, Get Started, cards) on one 12px rhythm */
.sw-feed { max-width: var(--sw-feed-w); margin: 0 auto; padding-top: 4px; transition: opacity var(--sw-dur-fast) ease; }
.sw-feed.is-refetching { opacity: .5; pointer-events: none; }
.sw-feed__list { display: flex; flex-direction: column; gap: 12px; }
.sw-feed__list > * { margin: 0; }
.sw-feed.is-fading { animation: sw-fade calc(200ms / var(--sw-tempo)) var(--sw-out) backwards; }

/* Feed card: the one card shell (.sw-surface, section 4) plus the feed's clip and colour. Markup
   is always class="sw-surface sw-fcard". */
.sw-fcard { display: block; overflow: hidden; color: var(--sw-ink); -webkit-tap-highlight-color: transparent; }
.sw-fcard--tap { cursor: pointer; }
.sw-fcard-in { animation: sw-rise var(--sw-dur) var(--sw-out) backwards; --rise: 8px; animation-delay: calc(var(--d, 0ms) / var(--sw-tempo)); }
.sw-fcard-add { animation: sw-fade var(--sw-dur-fast) var(--sw-out) backwards; }
.sw-fcard__media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--sw-line); overflow: hidden; cursor: pointer; }
.sw-fcard__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sw-fcard__media--video { aspect-ratio: auto; cursor: default; background: #000; }
.sw-fcard__media--sold img { filter: grayscale(1); }
.sw-fcard__media--flush { aspect-ratio: auto; cursor: default; background: none; }
@media (min-width: 768px) { .sw-fcard__media { max-height: 360px; } .sw-fcard__media--video, .sw-fcard__media--flush { max-height: none; } }
.sw-fcard__badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 4px 8px; border-radius: 4px; background: var(--sw-olive);
  font: 700 10px/15px var(--sw-font-mono); letter-spacing: var(--sw-tracking); text-transform: uppercase; color: #fff; pointer-events: none;
}
.sw-fcard__count {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 4px 10px; border-radius: var(--sw-r-pill); background: rgba(0, 0, 0, .6);
  font: 500 12px/16px var(--sw-font-ui); color: #fff; pointer-events: none; font-variant-numeric: tabular-nums;
}
.sw-fcard__body { padding: 14px 14px 0; }
.sw-fcard__title {
  margin: 10px 0 0; font: 600 var(--sw-fs-card-title)/24px var(--sw-font-head); letter-spacing: var(--sw-tracking);
  color: var(--sw-ink); text-wrap: pretty; overflow-wrap: anywhere;
}
/* A listing's title is Inter on the feed too, as on the marketplace card (MJ #973). */
.sw-fcard__title--listing { font-family: var(--sw-font-ui); }
.sw-fcard__brand { margin: 10px 0 0; font: 700 12px/16px var(--sw-font-mono); letter-spacing: var(--sw-tracking); color: var(--sw-ink); text-transform: uppercase; }
.sw-fcard__brand + .sw-fcard__title { margin-top: 2px; }
.sw-fcard__event + .sw-fcard__title { margin-top: 8px; }
.sw-fcard__text {
  margin: 4px 0 0; font: 400 15px/22px var(--sw-font-ui); color: var(--sw-ink); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sw-fhead + .sw-fcard__text { margin-top: 10px; }
.sw-fcard__text--2 { -webkit-line-clamp: 2; }
.sw-fcard__date {
  margin-top: 10px; font: 400 10px/12px var(--sw-font-head); letter-spacing: var(--sw-tracking); text-transform: uppercase;
  color: var(--sw-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-fcard__strip { margin-top: 6px; }
.sw-fcard__shoe { margin-top: 8px; }
.sw-fcard__foot { margin-top: 12px; border-top: 1px solid var(--sw-line); display: flex; align-items: center; min-height: 44px; }
.sw-fcard__event {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: var(--sw-ground-2);
  font: 500 11px/14px var(--sw-font-mono); text-transform: uppercase; color: var(--sw-ink); text-decoration: none;
}
.sw-fcard__event .sw-icon { color: var(--sw-olive-2); }
/* Section card (comments) */
.sw-fcard--section { padding: 14px 14px 6px; }
.sw-fsec-h { margin: 0; font: 700 12px/15px var(--sw-font-mono); letter-spacing: var(--sw-tracking); color: var(--sw-ink-muted); text-transform: uppercase; }

/* Header */
.sw-fhead { display: flex; align-items: center; gap: 10px; }
.sw-fhead__av {
  position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  overflow: hidden; background: var(--sw-line); box-shadow: 0 0 0 2px var(--sw-ground); cursor: pointer;
  font: 700 14px/1 var(--sw-font-ui); color: var(--sw-ink); -webkit-tap-highlight-color: transparent;
}
.sw-fhead__av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sw-fhead__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.sw-fhead__name {
  max-width: 100%; margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: 600 15px/20px var(--sw-font-ui); color: var(--sw-olive-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-fhead__meta { max-width: 100%; font: 500 13px/18px var(--sw-font-ui); color: var(--sw-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-fhead__pill {
  flex: none; align-self: flex-start; margin-top: 2px; padding: 4px 10px; border: 1px solid rgba(171, 148, 126, .6); border-radius: var(--sw-r-pill);
  font: 600 10px/15px var(--sw-font-ui); letter-spacing: .025em; text-transform: uppercase; color: var(--sw-olive-2);
}

/* Footer controls: every one a 44px target */
.sw-fbtn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; margin: 0; padding: 0 10px; border: 0; background: none;
  color: var(--sw-ink-muted); font: 600 14px/20px var(--sw-font-ui); font-variant-numeric: tabular-nums; cursor: pointer;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.sw-fbtn:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: -4px; border-radius: 10px; }
.sw-fbtn--heart { padding: 0 6px 0 0; transition: color var(--sw-dur-fast) ease, scale var(--sw-dur-fast) ease; }
.sw-fbtn--heart:active { scale: .92; }
.sw-fbtn--heart[aria-pressed="true"] { color: var(--sw-danger-mj); }
.sw-fbtn--heart[aria-pressed="true"] .sw-icon { fill: var(--sw-danger-mj); }
.sw-fbtn--heart.is-pop .sw-icon { animation: heartPop calc(450ms / var(--sw-tempo)) cubic-bezier(.17, .89, .32, 1.28); }
.sw-fbtn--count { padding: 0 10px 0 0; }
.sw-fbtn--lead { padding-left: 0; }
.sw-fbtn__avs { display: inline-flex; margin-left: 2px; }
.sw-fbtn__avs img {
  width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid #fff; object-fit: cover; background: var(--sw-line);
}
.sw-fbtn__avs > * + * { margin-left: -6px; }
.sw-fbtn--icon { width: 44px; justify-content: center; padding: 0; }
.sw-fbtn--more { width: 44px; justify-content: center; padding: 0; margin-right: -12px; }
.sw-fspacer { flex: 1 1 auto; }

/* Post extras: review chip, link preview */
.sw-fchip {
  margin-top: 10px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--sw-ground-2);
  color: var(--sw-ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.sw-fchip:hover, .sw-fchip:visited { color: var(--sw-ink); }
.sw-fchip__thumb { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: #fff; color: var(--sw-ink-muted); }
.sw-fchip__thumb img { width: 100%; height: 100%; object-fit: contain; }
.sw-fchip__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sw-fchip__k { font: 700 10px/13px var(--sw-font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--sw-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-fchip__t { font: 600 14px/20px var(--sw-font-ui); color: var(--sw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-fchip__chev { flex: none; color: var(--sw-line-3); }
.sw-flink {
  margin-top: 10px; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--sw-ground-2);
  color: var(--sw-ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.sw-flink:hover, .sw-flink:visited { color: var(--sw-ink); }
.sw-flink__thumb { flex: none; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--sw-line); }
.sw-flink__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-flink__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
.sw-flink__k { display: flex; align-items: center; gap: 4px; font: 700 10px/13px var(--sw-font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--sw-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-flink__t { font: 600 14px/19px var(--sw-font-ui); color: var(--sw-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* Listing stats row */
.sw-fstats { margin-top: 10px; display: flex; border-top: 1px solid var(--sw-line-2); padding-top: 6px; white-space: nowrap; letter-spacing: var(--sw-tracking); color: var(--sw-ink); font-family: var(--sw-font-mono); }
.sw-fstats__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 0 4px 0 6px; border-right: .5px solid var(--sw-line-2); }
.sw-fstats__col:first-child { padding-left: 0; }
.sw-fstats__col:last-child { border-right: 0; padding-right: 0; }
.sw-fstats__k { margin: 0; font: 500 10px/10px var(--sw-font-mono); color: var(--sw-ink-muted); }
.sw-fstats__v { margin: 0; display: flex; align-items: flex-end; gap: 5px; min-width: 0; }
.sw-fstats__n { font: 700 16px/16px var(--sw-font-mono); overflow: hidden; text-overflow: ellipsis; }
.sw-fstats__u { flex: none; font: 500 10px/16px var(--sw-font-mono); }

/* Announcement banner (and its photo variant) */
.sw-fann {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; box-sizing: border-box; padding: 0 14px; margin: 0; border: 0;
  border-radius: var(--sw-r-card); background: var(--sw-olive); color: #f6f3e6; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sw-fann__pin { flex: none; color: rgba(246, 243, 230, .7); }
.sw-fann__t { flex: 1 1 auto; min-width: 0; font: 600 14px/20px var(--sw-font-ui); color: #f6f3e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-fann__chev { flex: none; color: rgba(246, 243, 230, .6); }
.sw-fann-photo { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--sw-r-card); overflow: hidden; background: var(--sw-olive); box-shadow: var(--sw-shadow-tile); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sw-fann-photo__img { display: block; width: 100%; aspect-ratio: 16 / 9; background: rgba(55, 60, 43, .4); }
.sw-fann-photo__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sw-fann-photo .sw-fann { border-radius: 0; }

/* Delete-failed notice at the bottom of a card */
.sw-fnotice { display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--sw-ground-2); border-top: 1px solid var(--sw-line); }
.sw-fnotice > .sw-icon { color: var(--sw-danger-mj); }
.sw-fnotice__t { flex: 1 1 auto; min-width: 0; padding: 10px 0; font: 500 13px/18px var(--sw-font-ui); color: var(--sw-ink); }

/* Text link button ("Try again", "Show all"): underlined olive, 44px tall by padding */
.sw-flinkbtn {
  flex: none; margin: 0; padding: 13px 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: 600 13px/18px var(--sw-font-ui); color: var(--sw-olive); text-decoration: underline; text-underline-offset: 2px;
}
.sw-flinkbtn:disabled { opacity: .5; cursor: default; }

/* Controls bar (Feed and PageActionsBar), the filter dot, the hint row and the refetch bar */
.sw-glass-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--sw-olive); box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.sw-glass-on, .sw-glass-on:active { background: rgba(55, 60, 43, .12); box-shadow: inset 0 0 0 1px rgba(55, 60, 43, .18); }
.sw-sort-chev { transition: rotate var(--sw-dur-fast) ease; }
.sw-sort-chev.is-open { rotate: 180deg; }
.sw-fhint { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; max-width: var(--sw-feed-w); margin: -10px auto -6px; padding: 0 2px; font: 500 13px/18px var(--sw-font-ui); color: var(--sw-ink-muted); }
.sw-fhint b { font-weight: 600; color: var(--sw-ink); }
.sw-fprogress { position: relative; height: 2px; max-width: calc(var(--sw-feed-w) - 4px); margin: 6px auto 2px; border-radius: 2px; background: var(--sw-line); overflow: hidden; }
.sw-fprogress::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; border-radius: 2px; background: var(--sw-olive);
  animation: sw-fslide calc(1100ms / var(--sw-tempo)) linear infinite;
}
@keyframes sw-fslide { from { translate: -100% 0; } to { translate: 265% 0; } }

/* Menus: one thick-glass panel for the sort, the filter and every kebab. Fixed and placed by
   feedControls.js against its trigger, so no card's overflow can clip it. */
.sw-menu-catch { position: fixed; inset: 0; z-index: 59; background: transparent; -webkit-tap-highlight-color: transparent; }
.sw-menu {
  position: fixed; z-index: 60; top: 0; left: 0; min-width: 208px; max-width: min(300px, calc(100vw - 24px)); overflow: hidden; border-radius: 12px;
  /* Near-opaque warm white with no saturation boost, so a photo behind never tints the panel. */
  background: rgba(255, 253, 250, .96);
  -webkit-backdrop-filter: blur(30px) saturate(100%); backdrop-filter: blur(30px) saturate(100%); border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .08);
  text-align: left; outline: none;
}
.sw-menu:not([data-placed]) { visibility: hidden; }
.sw-menu[data-placed] { animation: sw-pop var(--sw-dur-fast) var(--sw-out) backwards; }
.sw-menu__k { margin: 0; padding: 12px 16px 4px; font: 700 11px/14px var(--sw-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sw-ink-muted); }
.sw-menu__row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; box-sizing: border-box; margin: 0; padding: 10px 16px;
  border: 0; border-top: 1px solid rgba(229, 224, 216, .4); background: none; color: var(--sw-olive-2); text-align: left; cursor: pointer;
  font: 500 14px/20px var(--sw-font-ui); -webkit-tap-highlight-color: transparent; transition: background-color var(--sw-dur-fast) ease;
}
.sw-menu__row:first-child, .sw-menu__k + .sw-menu__row { border-top: 0; }
.sw-menu__row:active { background: rgba(63, 69, 49, .08); }
@media (hover: hover) { .sw-menu__row:hover:not(:disabled):not([aria-disabled="true"]) { background: rgba(0, 0, 0, .04); } }
.sw-menu__row:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: -2px; }
.sw-menu__row.is-selected { background: rgba(63, 69, 49, .06); font-weight: 600; }
.sw-menu__row.is-danger { color: var(--sw-danger-mj); }
.sw-menu__row[aria-disabled="true"], .sw-menu__row:disabled { opacity: .45; cursor: default; }
.sw-menu__main { flex: 1 1 auto; min-width: 0; }
.sw-menu__label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-menu__sub { display: block; margin-top: 1px; font: 500 12px/16px var(--sw-font-ui); color: var(--sw-ink-muted); white-space: normal; }
.sw-menu__check { flex: none; color: var(--sw-olive-2); }
.sw-menu__box { flex: none; display: block; }
.sw-menu__foot { margin: 0; padding: 10px 16px 12px; border-top: 1px solid rgba(229, 224, 216, .4); font: 500 12px/16px var(--sw-font-ui); color: var(--sw-ink-muted); }
/* Plain kebab trigger (comments): 32px glyph box with a 44px target */
.sw-kebab { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--sw-ink-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sw-kebab::after { content: ""; position: absolute; inset: -6px; }

/* Pull to refresh: a floating disc under the controls bar; nothing in the flow moves */
.sw-ptr {
  position: fixed; z-index: 45; left: 50%; top: 0; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14); display: grid; place-items: center; opacity: 0; pointer-events: none; visibility: hidden;
}
.sw-ptr.is-on { visibility: visible; }
.sw-ptr.is-settling { transition: translate var(--sw-dur) var(--sw-out), opacity var(--sw-dur) ease; }
.sw-ptr__arrow { transition: rotate var(--sw-dur-fast) var(--sw-pop); transform-origin: 13px 13px; transform-box: view-box; }
.sw-ptr.is-armed .sw-ptr__arrow { rotate: 180deg; }
.sw-ptr.is-busy .sw-ptr__arrow { opacity: 0; }
.sw-ptr.is-busy .sw-ptr__svg { animation: sw-spin calc(800ms / var(--sw-tempo)) linear infinite; }

/* "N new" pill after a background refresh while scrolled down */
.sw-newpill {
  position: fixed; z-index: 45; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 12px;
  border: 0; border-radius: var(--sw-r-pill); background: var(--sw-olive); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  font: 600 13px/18px var(--sw-font-ui); cursor: pointer; animation: sw-pop var(--sw-dur) var(--sw-pop) backwards; -webkit-tap-highlight-color: transparent;
}

/* First-load skeleton: blocks in the page ground inside the white card */
.sw-fskel-media { display: block; height: 180px; border-radius: 0 !important; }
.sw-fskel-row { display: flex; align-items: center; gap: 10px; }
.sw-fskel-foot { margin-top: 14px; height: 44px; border-top: 1px solid var(--sw-line); display: flex; align-items: center; gap: 18px; }
.sw-fcard .sw-skel { background-image: linear-gradient(90deg, var(--sw-ground) 25%, var(--sw-ground-2) 50%, var(--sw-ground) 75%); }

/* States: empty, error, signed out, filtered, detail not found */
.sw-fempty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 96px 24px 0; text-align: center; }
.sw-fempty--tight { padding-top: 72px; }
.sw-fempty__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border: 1px solid var(--sw-line); border-radius: 50%; background: #fff; color: var(--sw-olive-2); }
.sw-fempty__t { margin: 0; font: 600 16px/22px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
.sw-fempty__b { margin: 0; max-width: 280px; font: 500 13px/19px var(--sw-font-ui); color: var(--sw-ink-muted); text-wrap: pretty; }
.sw-fcta {
  margin-top: 8px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 12px; background: var(--sw-olive); color: #fff; cursor: pointer;
  font: 600 14px/20px var(--sw-font-ui); -webkit-tap-highlight-color: transparent; transition: scale var(--sw-dur-fast) ease;
}
.sw-fcta:active { scale: .97; }
.sw-fcta:disabled { opacity: .5; cursor: default; }
.sw-fend { display: flex; align-items: center; gap: 12px; padding: 12px 4px 0; font: 500 13px/18px var(--sw-font-ui); color: var(--sw-ink-muted); }
.sw-fend::before, .sw-fend::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--sw-line-2); opacity: .6; }
.sw-fmore { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 0; }
.sw-fmore__t { margin: 0; font: 500 13px/18px var(--sw-font-ui); color: var(--sw-ink-muted); }
.sw-fmore .sw-flinkbtn { padding: 12px 16px; font-size: 14px; }

/* Detail pages (post, run): same shell, a bigger title, the full body */
.sw-detail-stack { display: flex; flex-direction: column; gap: 12px; max-width: var(--sw-feed-w); margin: 0 auto; padding: 4px 0 16px; }
.sw-detail-title { margin: 12px 0 0; font: 600 var(--sw-fs-detail-title)/28px var(--sw-font-head); letter-spacing: var(--sw-tracking); color: var(--sw-ink); text-wrap: pretty; overflow-wrap: anywhere; }
.sw-detail-text { margin-top: 8px; font: 400 16px/25px var(--sw-font-ui); color: var(--sw-ink); overflow-wrap: anywhere; }
.sw-detail-label { margin-top: 12px; font: 400 10px/12px var(--sw-font-head); letter-spacing: var(--sw-tracking); text-transform: uppercase; color: var(--sw-ink-muted); }
.sw-vis { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; }
.sw-vis > .sw-icon { color: var(--sw-ink-muted); }
.sw-vis--shared > .sw-icon { color: var(--sw-olive); }
.sw-vis__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sw-vis__t { font: 600 14px/19px var(--sw-font-ui); color: var(--sw-ink); }
.sw-vis__s { font: 500 12px/16px var(--sw-font-ui); color: var(--sw-ink-muted); }
.sw-vis__btn { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 25px; background: var(--sw-olive); color: #fff; font: 600 14px/18px var(--sw-font-ui); cursor: pointer; }
.sw-vis__btn--ghost { background: #fff; border: 1px solid var(--sw-line); color: var(--sw-olive); font-size: 13px; }

/* Comments (CommentItem) */
.sw-cmt { display: flex; gap: 10px; padding: 10px 0; }
.sw-cmt__av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: var(--sw-line); font: 700 10px/1 var(--sw-font-ui); color: var(--sw-ink); cursor: pointer; }
.sw-cmt__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-cmt__body { flex: 1 1 auto; min-width: 0; }
.sw-cmt__head { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.sw-cmt__name { min-width: 0; margin: 0; padding: 0; border: 0; background: none; font: 600 14px/20px var(--sw-font-ui); color: var(--sw-olive-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-align: left; }
.sw-cmt__meta { flex: none; font: 500 12px/16px var(--sw-font-ui); color: var(--sw-ink-muted); }
/* Tag chip after the name ("SELLER" on a listing's Questions). */
.sw-cmt__tag { flex: none; border-radius: 4px; background: #F5F2EF; padding: 1px 5px; font: 700 10px/14px var(--sw-font-mono); text-transform: uppercase; color: #2D2D2D; }
.sw-cmt__text { margin-top: 2px; font: 400 15px/22px var(--sw-font-ui); color: var(--sw-ink); overflow-wrap: anywhere; }
.sw-cmt__acts { display: flex; align-items: center; gap: 16px; margin-top: 2px; min-height: 32px; }
.sw-cmt__act { margin: 0; padding: 8px 0; border: 0; background: none; cursor: pointer; font: 600 12px/16px var(--sw-font-ui); letter-spacing: .02em; text-transform: uppercase; color: var(--sw-ink-muted); -webkit-tap-highlight-color: transparent; }
.sw-cmt__act[aria-pressed="true"] { color: var(--sw-danger-mj); }
.sw-cmt__likes { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; }
.sw-cmt__likes .sw-icon { color: var(--sw-danger-mj); fill: var(--sw-danger-mj); }
.sw-cmt__kebab { margin: -6px -8px -6px 0; }

/* Likers sheet rows */
.sw-liker { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; margin: 0; border: 0; border-top: .5px solid var(--sw-line-3); background: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sw-liker:first-child { border-top: 0; }
.sw-liker__av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--sw-line); font: 700 14px/1 var(--sw-font-ui); color: var(--sw-ink); }
.sw-liker__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-liker__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sw-liker__n { font: 600 15px/20px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-olive-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-liker__s { font: 500 12px/16px var(--sw-font-ui); color: var(--sw-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-liker__chev { flex: none; color: var(--sw-line-3); }

/* Composer (Feed_Composer) and share sheet field labels */
.sw-composer__label { display: block; font: 700 12px/26px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink-muted); }
.sw-composer .sw-sheet__body { padding: 12px 12px 30px; }
/* Composer's reviewed-shoe row (Feed_Composer) and its picker sheet (Feed_ComposerShoe) */
.sw-pickrow {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; margin: 0; padding: 9px 10px; box-sizing: border-box;
  border: 1px solid var(--sw-line); border-radius: 12px; background: var(--sw-card); text-align: left; cursor: pointer;
  font: 500 15px/26px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink-muted);
  -webkit-tap-highlight-color: transparent; transition: border-color calc(160ms / var(--sw-tempo)) var(--sw-out);
}
.sw-pickrow:active { border-color: var(--sw-line-2); }
.sw-pickrow__label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-pickrow__chev { flex: none; color: var(--sw-ink-3); }
.sw-pickrow--set { cursor: default; padding-right: 4px; color: var(--sw-ink); }
.sw-pickrow--set > .sw-icon:first-child { flex: none; color: var(--sw-olive); }
.sw-pickrow__open { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.sw-pickrow__brand { font: 700 11px/14px var(--sw-font-mono); letter-spacing: var(--sw-tracking); text-transform: uppercase; color: var(--sw-ink-muted); }
.sw-pickrow__name { font: 600 15px/20px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-shoepick { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0 auto; }
.sw-shoepick__search {
  display: flex; align-items: center; gap: 8px; padding: 0 8px 0 12px; border: 1px solid var(--sw-ink-muted); border-radius: 12px; background: var(--sw-card); color: var(--sw-ink-muted);
}
.sw-shoepick__search:focus-within { border-color: var(--sw-olive); }
.sw-shoepick__search input { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; font: 500 16px/24px var(--sw-font-ui); color: var(--sw-ink); }
.sw-shoepick__search input::placeholder { color: var(--sw-ink-3); }
.sw-shoepick__clear { flex: none; position: relative; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--sw-line); color: var(--sw-ink); cursor: pointer; }
.sw-shoepick__clear::after { content: ""; position: absolute; inset: -11px; }
.sw-shoepick__h { margin: 6px 0 0; font: 700 12px/15px var(--sw-font-mono); letter-spacing: var(--sw-tracking); text-transform: uppercase; color: var(--sw-ink-muted); }
.sw-shoepick__note { margin: 4px 0 0; font: 500 14px/20px var(--sw-font-ui); color: var(--sw-ink-muted); }
.sw-shoepick__card {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 10px; box-sizing: border-box; border: 1px solid var(--sw-line); border-radius: 12px;
  background: var(--sw-card); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color calc(160ms / var(--sw-tempo)) var(--sw-out);
}
.sw-shoepick__card[aria-checked="true"] { border-color: var(--sw-olive); }
.sw-shoepick__img { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--sw-ground-2); color: var(--sw-ink-muted); }
.sw-shoepick__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sw-shoepick__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sw-shoepick__brand { font: 700 12px/16px var(--sw-font-mono); letter-spacing: var(--sw-tracking); text-transform: uppercase; color: var(--sw-ink); }
.sw-shoepick__name { font: 600 16px/20px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); overflow-wrap: anywhere; }
.sw-shoepick__meta { font: 500 12px/16px var(--sw-font-ui); color: var(--sw-ink-muted); }
.sw-shoepick__radio { flex: none; display: grid; place-items: center; width: 20px; height: 20px; box-sizing: border-box; border: 1px solid var(--sw-line-2); border-radius: 50%; color: #fff; }
.sw-shoepick__card[aria-checked="true"] .sw-shoepick__radio { border-color: var(--sw-olive); background: var(--sw-olive); }
.sw-shoepick-sheet .sw-sheet__foot { gap: 30px; }
/* The comments card clears the sticky back row when a #comments link lands on it */
.sw-fcard--section[id] { scroll-margin-top: 64px; }

/* Notifications (NotificationBell, Alerts_Notifications): the bell's dot, then the sheet's tabs and
   rows. Inbox-row language: 44px photo, 14/600 line over a 13/500 muted line, time and an 8px
   #507A2A dot on the right, 0.4 hairlines between rows. */
.sw-nb__bell-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #507A2A; box-shadow: 0 0 0 2px #fff; }
.sw-nb { min-height: 100%; letter-spacing: var(--sw-tracking); }
.sw-nb__tabs { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; padding: 0 8px; border-bottom: .5px solid var(--sw-line-2); background: #fff; }
.sw-nb__tab { position: relative; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 0; padding: 10px 4px; border: 0; background: none; cursor: pointer; font: 600 14px/18px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink-muted); -webkit-tap-highlight-color: transparent; }
.sw-nb__tab[aria-selected="true"] { color: var(--sw-ink); }
.sw-nb__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--sw-olive); }
.sw-nb__count { border-radius: 10px; background: var(--sw-line); padding: 1px 6px; font: 600 11px/15px var(--sw-font-ui); letter-spacing: 0; color: var(--sw-ink); }
.sw-nb__tab[aria-selected="true"] .sw-nb__count { background: var(--sw-olive); color: #fff; }
.sw-nb__gear { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--sw-ink-muted); cursor: pointer; }
.sw-nb__list { padding: 0 16px 24px; }
.sw-nb__day { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; min-height: 20px; }
.sw-nb__day + .sw-nb__row { margin-top: 0; }
.sw-nb__daylabel { margin: 0; font: 500 11px/14px var(--sw-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sw-ink-muted); }
.sw-nb__markread { position: relative; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font: 600 14px/16px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-olive); }
.sw-nb__markread::after { content: ""; position: absolute; inset: -12px -8px; }
.sw-nb__row { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(229, 223, 217, .4); background: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sw-nb__thumb { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--sw-ground-2); color: var(--sw-ink-muted); }
.sw-nb__thumb > img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; display: block; }
.sw-nb__initial { font: 600 16px/1 var(--sw-font-ui); color: var(--sw-olive-2); }
.sw-nb__badge { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--sw-line); color: var(--sw-olive); }
.sw-nb__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-nb__line { margin: 0; font: 600 14px/18px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-nb__sub { margin: 0; font: 500 13px/17px var(--sw-font-ui); letter-spacing: 0; color: var(--sw-ink-muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-nb__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 2px; }
.sw-nb__time { font: 400 12px/1 var(--sw-font-ui); letter-spacing: 0; color: rgba(63, 69, 49, .5); white-space: nowrap; }
.sw-nb__row.is-unread .sw-nb__time { font-weight: 700; color: var(--sw-olive-2); }
.sw-nb__dot { width: 8px; height: 8px; border-radius: 50%; background: #507A2A; }
.sw-nb__manage { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 12px 0 0; padding: 12px; border: 0; border-radius: 12px; background: var(--sw-ground-2); text-align: left; cursor: pointer; }
.sw-nb__prefs { padding: 14px 16px 24px; }
.sw-nb__pref { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(229, 223, 217, .4); }
.sw-nb__pref:last-child { border-bottom: 0; }
.sw-nb__pref .sw-nb__sub { margin-top: 2px; }

/* Desktop top bar page title (MainLayout): the same heading style as SwPageHeader */
.sw-desk-title { font: 600 20px/24px var(--sw-font-head); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }

@media (prefers-reduced-motion: reduce) {
  .sw-fprogress::after { animation: none !important; display: none; }
  .sw-fcard-in, .sw-fcard-add, .sw-feed.is-fading, .sw-menu[data-placed], .sw-newpill { animation: none !important; }
  .sw-ptr.is-busy .sw-ptr__svg { animation: none !important; }
}