/*!
 * Souq el Mostalzmat (سوق المستلزمات) — Design System Stylesheet
 * ---------------------------------------------------------------
 * Self-contained, framework-free CSS shared by every Blade view.
 * Adopt via:  <link rel="stylesheet" href="/css/souq.css">
 *
 * Palette, type, spacing and components documented in
 * /docs/SOUQ_DESIGN_SYSTEM.md — read that file first if you are
 * new to this stylesheet.
 *
 * Mobile-first: base rules target ~320px phones. Breakpoints add
 * comfort/desktop enhancements, they never remove functionality.
 *
 * Sections:
 *   1. Tokens (light)               6. Buttons
 *   2. Tokens (dark override)       7. Hero (storefront banner)
 *   3. Reset                        8. Gallery / horizontal-scroll
 *   4. Base + RTL                   9. Seller card / related list
 *   5. Layout (header/search/chips) 10. Tools / report / flash / status
 *                                   11. Stats blocks (DemandIntel)
 *                                   12. Pager / empty / foot / misc
 *                                   13. Accessibility helpers
 *                                   14. Responsive breakpoints
 *                                   15. Reduced motion
 * ============================================================ */

/* ============================================================
   1. TOKENS — locked brand palette + derived tints + scales
   ============================================================ */
:root{
  /* Brand palette (locked — do not change without design sign-off) */
  --wa:      #25D366; /* WhatsApp green — primary action / brand */
  --wa-d:    #1da851; /* darker green — text on light green tints, prices */
  --teal:    #128C7E; /* secondary brand accent, gradients, in-site chat CTA */
  --ink:     #0b141a; /* body text */
  --muted:   #667781; /* secondary text, meta, placeholders */
  --line:    #e9edef; /* hairline borders */
  --bg:      #eef1f3; /* page background */
  --card:    #ffffff; /* card/surface background */
  --blue:    #1877f2; /* Facebook-source accent */

  /* Tints derived FROM the locked palette (do not hardcode hex elsewhere) */
  --wa-tint:    #e7f9ee; /* green pill/badge backgrounds */
  --blue-tint:  #e7f0ff; /* blue pill/badge backgrounds */
  --soft:       #f0f2f5; /* neutral chip/tag background */
  --amber:      #b26a00; /* "requested"/status accent text */
  --amber-tint: #fff4e5; /* "requested"/status accent background */
  --amber-line: #ffe0b0;

  /* Typography */
  --font: "Cairo","Noto Kufi Arabic",Tahoma,system-ui,"Segoe UI",sans-serif;

  /* Type scale (1rem = 16px) */
  --fs-xs:  0.75rem;   /* 12px — meta, tags, badges        */
  --fs-sm:  0.8125rem; /* 13px — secondary labels           */
  --fs-base:0.875rem;  /* 14px — body copy / descriptions   */
  --fs-md:  0.9375rem; /* 15px — UI text, buttons, inputs   */
  --fs-lg:  1rem;      /* 16px — card titles, prices        */
  --fs-xl:  1.125rem;  /* 18px — brand wordmark, section h2 */
  --fs-2xl: 1.3125rem; /* 21px — post/page H1               */
  --fs-3xl: 1.625rem;  /* 26px — hero name, stat numbers    */

  /* Spacing scale (4px base unit) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* Radius scale */
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   12px;
  --r-xl:   14px;
  --r-2xl:  18px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(11,20,26,.06);
  --shadow-md: 0 2px 8px rgba(11,20,26,.12);
  --shadow-lg: 0 8px 24px rgba(11,20,26,.16);

  /* Layout */
  --container: 680px; /* mobile-first content max-width, matches existing views */
  --tap-min:   44px;  /* minimum recommended touch-target size */
}

/* ============================================================
   2. TOKENS — dark mode override (optional, additive)
   Brand colors (wa/wa-d/teal/blue) stay recognizable; only
   neutrals invert so text/background contrast holds up.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root{
    --ink:   #e9edef;
    --muted: #93a3ad;
    --line:  #26343d;
    --bg:    #0b141a;
    --card:  #111b21;

    --wa-tint:    #0e2a1c;
    --blue-tint:  #0e1f33;
    --soft:       #1c2a33;
    --amber-tint: #3a2a12;
    --amber-line: #5c4319;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 2px 10px rgba(0,0,0,.45);
    --shadow-lg: 0 10px 28px rgba(0,0,0,.55);
  }
  .desc{ color:#c7d0d6 !important; }
  .gallery{ background:#000; }
}

/* ============================================================
   3. RESET — minimal, framework-free
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
ul,ol{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }

/* ============================================================
   4. BASE + RTL
   This system is authored RTL-first (dir="rtl" lang="ar" on
   <html>). Layout relies on flexbox/grid + `gap`, which is
   direction-agnostic by design — most rules below need no
   left/right overrides. The few physical (non-logical)
   properties are called out inline.
   ============================================================ */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere; /* guards against long unbroken SKU/brand strings overflowing narrow phones */
  overflow-x:hidden;      /* belt-and-suspenders: no page-level horizontal scroll */
}
html[dir="rtl"] body{ direction:rtl; }
/* If a view is ever rendered LTR (e.g. an English admin tool reusing this
   sheet), flip here rather than duplicating component rules. */
html[dir="ltr"] body{ direction:ltr; }

/* ============================================================
   5. LAYOUT — container, sticky header, search, chips
   ============================================================ */
.wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--sp-3) var(--sp-8); }

header.top,.top{
  position:sticky; top:0; z-index:20;
  background:var(--wa); color:#fff;
  box-shadow:var(--shadow-md);
}
.top .row{
  max-width:var(--container); margin:0 auto; padding:var(--sp-3);
  display:flex; align-items:center; gap:var(--sp-2);
  min-height:var(--tap-min);
}
.back{
  font-size:1.375rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--tap-min); min-height:var(--tap-min);
  padding:var(--sp-1) var(--sp-2); border-radius:var(--r-md);
  flex:0 0 auto;
}
.brand{ font-size:var(--fs-xl); font-weight:800; letter-spacing:-.3px; white-space:nowrap; }
.brand small{ display:block; font-size:var(--fs-xs); font-weight:500; opacity:.9; }

form.search{ flex:1 1 auto; min-width:0; } /* min-width:0 is required so this flex child can actually shrink below its content size on narrow phones */
.search input{
  width:100%; min-width:0; min-height:var(--tap-min);
  border:0; border-radius:var(--r-pill);
  padding:var(--sp-3) var(--sp-4); font-size:var(--fs-md); font-family:inherit;
  outline:none;
}

/* Chips + any future horizontally-scrolling row (tables, filter bars, etc.)
   Never overflows the page body: the scroller clips, the page doesn't. */
.chips,.hscroll{
  display:flex; gap:var(--sp-2); overflow-x:auto;
  padding:var(--sp-3) 0 var(--sp-1);
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.chips::-webkit-scrollbar,.hscroll::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; background:var(--card); border:1px solid var(--line); color:var(--ink);
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-pill);
  font-size:var(--fs-base); font-weight:600;
  min-height:36px; display:inline-flex; align-items:center;
}
.chip.active,.chip-active{ background:var(--wa); color:#fff; border-color:var(--wa); }

/* ============================================================
   6. CARD — the core content block (listing card, post,
   storefront row, related item…)
   ============================================================ */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl);
  margin-top:var(--sp-3); overflow:hidden; box-shadow:var(--shadow-sm);
}
.card .head,.head{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4) var(--sp-1); }

.avatar{
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--wa),var(--teal)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1rem; flex:0 0 auto;
}
.avatar-lg{ width:44px; height:44px; font-size:1.125rem; }  /* post-detail header */
.avatar-xl{ width:64px; height:64px; font-size:var(--fs-3xl); } /* storefront hero */

.who{ flex:1; min-width:0; }
.who .name{ font-weight:700; font-size:var(--fs-lg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.who .meta{ font-size:var(--fs-xs); color:var(--muted); }

/* Source-channel pill (WhatsApp / Facebook origin) */
.src{ font-size:var(--fs-xs); font-weight:700; padding:3px var(--sp-2); border-radius:var(--r-md); flex:0 0 auto; }
.src.wa,.src-wa{ background:var(--wa-tint); color:var(--wa-d); }
.src.fb,.src-fb{ background:var(--blue-tint); color:var(--blue); }

.body{ display:block; padding:2px var(--sp-4) var(--sp-3); color:inherit; }
.title{ font-weight:700; font-size:var(--fs-lg); margin-bottom:2px; }
h1.title{ font-size:var(--fs-2xl); line-height:1.35; margin-bottom:var(--sp-2); font-weight:800; }
.desc{
  font-size:var(--fs-base); color:#3b4a54;
  white-space:pre-line; word-break:break-word; overflow-wrap:anywhere;
}

/* Feed-card photo (re-hosted seed image). Capped height so a tall portrait shot
   can't push the contact buttons off-screen on mobile; object-fit keeps it from
   distorting. Neutral placeholder background while it loads. */
.photo{
  display:block; width:100%; max-height:320px; object-fit:cover;
  margin:10px 0 4px; border-radius:10px; background:#e9edef;
}

.price{ margin-top:var(--sp-2); font-weight:800; font-size:var(--fs-lg); color:var(--wa-d); }
.price.ask,.price-ask{ color:var(--muted); font-weight:600; font-size:var(--fs-base); }

.tags{ margin-top:var(--sp-2); display:flex; gap:6px; flex-wrap:wrap; }
.tag{ font-size:var(--fs-xs); background:var(--soft); color:var(--muted); padding:3px var(--sp-3); border-radius:var(--r-sm); }
.tag-sku,.tag.sku{ background:var(--wa-tint); color:var(--wa-d); font-weight:700; }
/* "Requested" indicator — unifies show.blade's standalone .req-badge and
   company.blade's inline .req into one component. */
.tag-req,.req-badge,.req{
  display:inline-block; font-size:0.6875rem; font-weight:700;
  background:var(--amber-tint); color:var(--amber);
  padding:2px var(--sp-2); border-radius:var(--r-sm);
}
.req-badge{ margin-bottom:var(--sp-2); } /* block usage above an H1 */

.status-note{
  background:var(--amber-tint); color:#8a5a00; border:1px solid var(--amber-line);
  border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-base); font-weight:600; margin:var(--sp-2) 0;
}

/* ============================================================
   7. BUTTONS
   Legacy markup uses `<a class="btn wa">` / `<a class="btn call">`
   (space-separated modifiers). New views should prefer the
   dash-modifier classes `.btn-wa` / `.btn-call`. Both are
   supported so existing Blade files can adopt this sheet with
   zero markup changes.
   ============================================================ */
.actions{ display:flex; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4) var(--sp-4); border-top:1px solid var(--line); }
.btn{
  flex:1; text-align:center; padding:var(--sp-3); min-height:var(--tap-min);
  border-radius:var(--r-lg); font-weight:800; font-size:var(--fs-md);
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.btn.call,.btn-call{ background:#fff; border:1.5px solid var(--wa); color:var(--wa-d); }
.btn.wa,.btn-wa{ background:var(--wa); color:#fff; }
.btn.wa:active,.btn.call:active,.btn-wa:active,.btn-call:active,.btn:active{ transform:translateY(1px); }
.btn-teal{ background:var(--teal); color:#fff; } /* e.g. "message seller on-site" CTA */
.btn-full,.btn.full,.btn.wide{ flex:none; width:100%; }
/* Neutral/secondary "ghost" button — unifies .btn.share, .tools button and
   .report button.send, which previously had three slightly different looks. */
.btn-soft,.btn.share{
  background:#fff; border:1px solid var(--line); color:var(--muted);
  flex:0 0 auto; padding:var(--sp-2) var(--sp-4); min-height:40px;
}
.ico{ width:18px; height:18px; flex:0 0 auto; }

/* ============================================================
   8. HERO — storefront banner (company.blade.php)
   ============================================================ */
.hero{
  background:linear-gradient(135deg,var(--teal),var(--wa)); color:#fff;
  border-radius:0 0 var(--r-2xl) var(--r-2xl);
  padding:var(--sp-6) var(--sp-4) var(--sp-5);
  display:flex; align-items:center; gap:var(--sp-4);
}
.hero .av{
  width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:var(--fs-3xl); flex:0 0 auto;
}
.hero .n{ font-size:var(--fs-xl); font-weight:800; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.badge,.hero .badge{ font-size:var(--fs-xs); background:#fff; color:var(--wa-d); padding:2px var(--sp-2); border-radius:var(--r-md); font-weight:800; }
.hero .stats{ font-size:var(--fs-sm); opacity:.95; margin-top:4px; }
.cta{ display:flex; gap:var(--sp-2); margin-top:var(--sp-3); }

/* ============================================================
   9. GALLERY — post-detail image carousel (horizontal-scroll,
   never overflows the page; same pattern as .chips/.hscroll).
   ============================================================ */
.gallery{
  display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; background:#000;
}
.gallery::-webkit-scrollbar{ display:none; }
.gallery img{ width:100%; flex:0 0 100%; scroll-snap-align:center; max-height:420px; object-fit:contain; background:var(--ink); }

/* ============================================================
   10. SELLER CARD / RELATED LIST / STOREFRONT ROW
   ============================================================ */
.seller-card{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4); min-height:var(--tap-min); }
.seller-card .grow{ flex:1; min-width:0; }
.seller-card .go{
  font-size:var(--fs-sm); font-weight:800; color:var(--wa-d); background:var(--wa-tint);
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); white-space:nowrap;
}

.subhdr{ font-weight:800; font-size:var(--fs-md); color:var(--muted); margin:22px 2px 2px; }

.rel{ margin-top:var(--sp-2); }
.rel a{
  display:flex; gap:var(--sp-3); align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-2); margin-top:var(--sp-2); min-height:var(--tap-min);
}
.rel .rimg{
  width:52px; height:52px; border-radius:var(--r-md); background:var(--wa-tint); color:var(--wa-d);
  display:flex; align-items:center; justify-content:center; font-weight:800; flex:0 0 auto; object-fit:cover;
}
.rel .rt{ flex:1; min-width:0; }
.rel .rt .n{ font-weight:700; font-size:var(--fs-base); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rel .rt .p{ font-size:var(--fs-xs); color:var(--muted); }

/* Storefront listing row (company.blade.php) */
.card a.row2{ display:flex; gap:var(--sp-3); align-items:center; padding:var(--sp-3) var(--sp-4); min-height:var(--tap-min); }
.thumb{
  width:60px; height:60px; border-radius:var(--r-lg); background:var(--wa-tint); color:var(--wa-d);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:var(--fs-xl);
  flex:0 0 auto; object-fit:cover;
}
.info{ flex:1; min-width:0; }
.info .t{ font-weight:700; font-size:var(--fs-lg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.info .d{ font-size:var(--fs-sm); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.info .pr{ font-weight:800; font-size:var(--fs-base); color:var(--wa-d); margin-top:2px; }
.info .pr.ask{ color:var(--muted); font-weight:600; }

/* ============================================================
   11. TOOLS / REPORT / FLASH MESSAGES
   ============================================================ */
.tools{ display:flex; gap:var(--sp-3); justify-content:center; margin-top:var(--sp-4); }
.tools button,.tools summary{
  cursor:pointer; background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-2) var(--sp-4); font-weight:700; font-size:var(--fs-sm); color:var(--muted);
  font-family:inherit; min-height:40px; display:inline-flex; align-items:center;
}
details.report{ margin-top:var(--sp-2); }
details.report[open] summary{ color:var(--ink); }
.report form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-3); margin-top:var(--sp-2); display:flex; gap:var(--sp-2);
}
.report input{
  flex:1; min-width:0; border:1px solid var(--line); border-radius:9px;
  padding:var(--sp-2) var(--sp-3); font-family:inherit; font-size:var(--fs-base); min-height:40px;
}
.report button.send{ background:var(--soft); color:var(--ink); }

.flash{
  background:var(--wa-tint); color:var(--wa-d); border:1px solid #b7ebc9; border-radius:var(--r-md);
  padding:var(--sp-2) var(--sp-3); text-align:center; font-weight:700; margin-top:var(--sp-3);
}

/* ============================================================
   12. STATS BLOCKS — weekly-demand style pages (DemandIntel)
   DemandIntel's tokens have already been aligned to the locked
   palette upstream (--wa/--wa-d/--teal/--blue etc.), so linking
   this sheet is a drop-in match on color. The rules below match
   index.blade.php's current gradient page-banner + stat-card +
   ranked-list layout pixel-for-pixel.
   ============================================================ */

/* Gradient banner page header — used instead of the sticky .top
   bar on pages with no site-wide nav chrome (e.g. /demand).
   Same teal→green diagonal already used for avatars/.hero. */
header.page{
  margin-bottom:var(--sp-5);
  padding:var(--sp-6) var(--sp-4) var(--sp-5);
  background:linear-gradient(135deg,var(--teal),var(--wa-d));
  border-radius:var(--r-2xl);
  box-shadow:var(--shadow-md);
}
header.page h1{ font-size:1.6rem; margin:0 0 6px; color:#fff; }
header.page p{ margin:0; color:rgba(255,255,255,.9); font-size:0.95rem; }

/* Generic plain page-title block (no gradient) — for future interior
   pages that don't want the DemandIntel-style banner treatment. */
.page-head{ margin-bottom:var(--sp-5); }
.page-head h1{ font-size:var(--fs-2xl); margin:0 0 6px; }
.page-head p{ margin:0; color:var(--muted); font-size:var(--fs-base); }

.totals{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-bottom:var(--sp-6); }
.stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--sp-4); text-align:center; }
.stat .num{ font-size:1.9rem; font-weight:700; display:block; line-height:1.2; }
.stat.requests .num{ color:var(--blue); }
.stat.offers .num{ color:var(--wa-d); }
.stat .lbl{ color:var(--muted); font-size:0.9rem; }

section.demand h2{ font-size:1.15rem; margin:0 0 var(--sp-3); }

ol.ranked{ display:flex; flex-direction:column; gap:10px; }
ol.ranked li{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-3) 14px; display:flex; align-items:center; gap:var(--sp-3); min-height:var(--tap-min);
}
.rank{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--blue-tint); color:var(--blue); font-weight:700; font-size:0.9rem;
  display:flex; align-items:center; justify-content:center;
}
.label{ flex:1 1 auto; font-weight:600; word-break:break-word; overflow-wrap:anywhere; }
/* Renamed from the original DemandIntel `.count` (a numeric pill) to avoid
   clashing with the site-wide `.count` below (the "N listings" text label
   used in feed.blade.php / company.blade.php). index.blade.php now uses
   class="count-pill" on this element. */
.count-pill{
  flex:0 0 auto; background:var(--blue); color:#fff; border-radius:var(--r-pill);
  padding:4px var(--sp-3); font-size:0.85rem; font-weight:600; white-space:nowrap;
}

footer.page{ margin-top:28px; text-align:center; color:var(--muted); font-size:0.8rem; }

/* DemandIntel's container is 720px (vs the 680px standard used by
   feed/show/company) with slightly different padding. Combine as
   class="wrap wrap-wide" to override just this page — the shared
   `.wrap` stays 680px for every other view. */
.wrap-wide{ max-width:720px; padding:20px 16px 48px; }

/* Below 420px, collapse the two stat cards to a single column
   (matches DemandIntel's original small-phone behavior). */
@media (max-width:420px){
  .totals{ grid-template-columns:1fr; }
}

/* ============================================================
   13. PAGER / EMPTY / FOOT / MISC SITE-WIDE BITS
   ============================================================ */
.empty{ text-align:center; color:var(--muted); padding:60px var(--sp-5); }
/* Dashed-border card variant — combine as class="empty empty-dashed"
   (DemandIntel's "no requests this week" state). */
.empty-dashed{ border:1px dashed var(--line); border-radius:var(--r-xl); background:var(--card); padding:28px var(--sp-4); }
.count{ padding:14px 2px 2px; color:var(--muted); font-size:var(--fs-sm); } /* "N listings" label — see note in section 12 */

.pager{ display:flex; justify-content:center; gap:var(--sp-3); margin-top:var(--sp-5); }
.pager a,.pager span{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-2) var(--sp-4); font-weight:700; font-size:var(--fs-base);
  min-height:40px; display:inline-flex; align-items:center;
}

.foot{ text-align:center; color:var(--muted); font-size:var(--fs-xs); padding:24px 0 0; }
.foot a{ color:var(--wa-d); font-weight:700; }

.demandlink{
  display:block; background:#fff; border:1px dashed var(--wa); color:var(--wa-d);
  border-radius:var(--r-lg); text-align:center; padding:var(--sp-3); margin-top:var(--sp-3);
  font-weight:700; min-height:var(--tap-min);
}

/* ============================================================
   14. ACCESSIBILITY HELPERS
   ============================================================ */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,.chip:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px; border-radius:var(--r-sm);
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================================
   15. RESPONSIVE BREAKPOINTS
   Base rules above already work down to 320px. These add
   comfort spacing and desktop-only hover affordances — nothing
   here is required for the layout to function.
   ============================================================ */
@media (min-width:480px){
  .wrap{ padding-left:var(--sp-4); padding-right:var(--sp-4); }
  .totals{ gap:var(--sp-4); }
}

@media (min-width:768px){
  .wrap{ padding-bottom:var(--sp-8); }
  .card{ border-radius:var(--r-2xl); }
  h1.title{ font-size:1.5rem; }
}

/* Hover affordances only for pointer-capable devices, so touch users never
   get a "stuck" hover state after tapping. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{ filter:brightness(1.03); }
  .chip:hover{ border-color:var(--wa); }
  .card a:hover .t,.card a:hover .n{ color:var(--wa-d); }
  .pager a:hover{ border-color:var(--wa); color:var(--wa-d); }
}

/* ============================================================
   16. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}