/* ---------------------------------------------------------------------------
   app.css — glassmorphism layer on top of Tailwind.
   Only the things Tailwind utilities can't express live here.
--------------------------------------------------------------------------- */

:root{
  /* Pin native widgets (select popups, date pickers, scrollbars) to the APP's
     theme. Without this they follow the PHONE's system theme: a phone in dark
     mode showed the light-mode dropdown list as dark-on-dark = unreadable. */
  color-scheme: light;
  --bg-1:#eef2ff; --bg-2:#f8fafc; --bg-3:#e0e7ff;
  --glass:rgba(255,255,255,.62);
  --glass-brd:rgba(255,255,255,.75);
  --ink:#0f172a; --ink-soft:#475569;
  --ring:rgba(79,70,229,.35);
}
html.dark{
  color-scheme: dark;
  --bg-1:#0b1020; --bg-2:#0f172a; --bg-3:#111a35;
  --glass:rgba(23,32,56,.62);
  --glass-brd:rgba(148,163,184,.16);
  --ink:#e2e8f0; --ink-soft:#94a3b8;
  --ring:rgba(129,140,248,.35);
}

*{ -webkit-tap-highlight-color:transparent; }

body{
  color:var(--ink);
  background:
    radial-gradient(1100px 700px at 8% -8%,  rgba(99,102,241,.20), transparent 60%),
    radial-gradient(900px 620px at 105% 4%,  rgba(236,72,153,.16), transparent 58%),
    radial-gradient(800px 700px at 45% 115%, rgba(16,185,129,.16), transparent 60%),
    linear-gradient(160deg,var(--bg-1),var(--bg-2) 45%,var(--bg-3));
  background-attachment:fixed;
  min-height:100dvh;
  transition:background .4s ease,color .3s ease;
}

/* ------------------------------ glass surfaces --------------------------- */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 10px 30px -12px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
html.dark .glass{ box-shadow:0 14px 34px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05); }

.glass-soft{
  background:color-mix(in srgb,var(--glass) 70%, transparent);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* ------------------------------ section cards ---------------------------- */
.sec-card{
  position:relative; overflow:hidden;
  border-radius:1.5rem;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease;
  will-change:transform;
}
.sec-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 45%);
  opacity:.65; pointer-events:none;
}
.sec-card:active{ transform:scale(.97); }
@media (hover:hover){
  .sec-card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -18px rgba(30,41,59,.45); }
}
.sec-card .accent{
  position:absolute; inset:auto auto 0 0; height:5px; width:100%;
  background:linear-gradient(90deg,var(--a1),var(--a2));
}

/* group accents -- auto-assigned palette (see config/catalog.php) */
.g-indigo  { --a1:#6366f1; --a2:#a855f7; }
.g-sky     { --a1:#0ea5e9; --a2:#22d3ee; }
.g-rose    { --a1:#ef4444; --a2:#fb7185; }
.g-amber   { --a1:#f59e0b; --a2:#facc15; }
.g-emerald { --a1:#10b981; --a2:#84cc16; }
.g-violet  { --a1:#8b5cf6; --a2:#d946ef; }
.g-teal    { --a1:#14b8a6; --a2:#2dd4bf; }
.g-orange  { --a1:#f97316; --a2:#fb923c; }

/* legacy place-named classes kept so older markup still renders */
.g-abuja      { --a1:#6366f1; --a2:#a855f7; }
.g-birmingham { --a1:#0ea5e9; --a2:#22d3ee; }
.g-canada     { --a1:#ef4444; --a2:#f97316; }
.g-zone       { --a1:#f59e0b; --a2:#facc15; }
.g-outdoor    { --a1:#10b981; --a2:#84cc16; }
.g-general    { --a1:#64748b; --a2:#94a3b8; }

/* ------------------------------ form controls ---------------------------- */
/* Native dropdowns render their popup list using the element's own colours.
   Without this, the transparent/glass background leaves white text on a white
   list in dark mode (options effectively invisible). Give select + option an
   explicit solid colour pair in each theme. */
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:2.6rem;
  color-scheme:inherit;          /* popup list follows the app theme */
}
select option{ color-scheme:inherit; }
/* NOTE on specificity: the selects also carry .glass-soft / .glass (0,1,0),
   whose `background` shorthand would otherwise win over a bare `select`
   selector (0,0,1) and erase the chevron. Both theme rules below are written
   at (0,1,1) so they beat the glass classes in light *and* dark mode.
   The background must stay a single shorthand, or Tailwind preflight's
   `background-repeat:repeat` tiles the chevron across the whole control. */
html:not(.dark) select{
  color:var(--ink);
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right .85rem center / 1.1em,
    rgba(255,255,255,.72);
}
html.dark select{
  color:var(--ink);
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right .85rem center / 1.1em,
    rgba(23,32,56,.92);
}
/* The popup list itself: must be opaque, and must contrast in both themes. */
select option{
  background-color:#ffffff;
  color:#0f172a;
  font-weight:600;
  padding:.5rem;
}
html.dark select option{
  background-color:#172038;
  color:#e2e8f0;
}
select option:checked,
select option:hover{
  background-color:#e0e7ff;
  color:#0f172a;
}
html.dark select option:checked,
html.dark select option:hover{
  background-color:#312e81;
  color:#ffffff;
}
/* Date input: `color-scheme` alone tells the browser to draw the native
   calendar icon and picker panel in light-on-dark -- adding an invert()
   filter on top would flip it straight back to black-on-dark. */
html.dark input[type="date"]{ color:var(--ink); }
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.75; cursor:pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover{ opacity:1; }

/* ------------------------------ counters --------------------------------- */
.step-btn{
  width:3.25rem; height:3.25rem; border-radius:var(--r-md);
  display:grid; place-items:center;
  user-select:none; touch-action:manipulation;
  border:1px solid var(--field-brd);
  transition:transform .12s ease, background .16s ease, border-color .16s ease;
}
.step-btn:active{ transform:scale(.92); }
.step-minus{ color:#e11d48; background:rgba(225,29,72,.08); }
.step-plus { color:#059669; background:rgba(5,150,105,.09); }
html.dark .step-minus{ color:#fb7185; background:rgba(225,29,72,.14); }
html.dark .step-plus { color:#34d399; background:rgba(16,185,129,.14); }
.step-minus:hover{ background:rgba(225,29,72,.14); border-color:rgba(225,29,72,.3); }
.step-plus:hover { background:rgba(5,150,105,.15); border-color:rgba(5,150,105,.3); }
.count-input{
  width:100%; text-align:center;
  font-size:1.9rem; font-weight:700; letter-spacing:-.03em;
  background:transparent; border:none; outline:none; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.count-input::-webkit-outer-spin-button,
.count-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.count-input[type=number]{ -moz-appearance:textfield; }

/* ------------------------------ animations ------------------------------- */
@keyframes popIn{ from{opacity:0; transform:translateY(18px) scale(.96)} to{opacity:1; transform:none} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes pulseNum{ 0%{transform:scale(1)} 40%{transform:scale(1.14)} 100%{transform:scale(1)} }
.anim-pop   { animation:popIn .26s cubic-bezier(.2,.9,.25,1) both; }
.anim-fade  { animation:fadeIn .2s ease both; }
.anim-up    { animation:slideUp .35s ease both; }
.pulse-num  { animation:pulseNum .28s ease; }
.stagger > *{ animation:slideUp .4s ease both; }
.stagger > *:nth-child(1){animation-delay:.02s} .stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.10s} .stagger > *:nth-child(4){animation-delay:.14s}
.stagger > *:nth-child(5){animation-delay:.18s} .stagger > *:nth-child(6){animation-delay:.22s}
.stagger > *:nth-child(7){animation-delay:.26s} .stagger > *:nth-child(8){animation-delay:.30s}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* ------------------------------ toasts ----------------------------------- */
#toasts{ position:fixed; left:0; right:0; bottom:calc(1rem + env(safe-area-inset-bottom));
         z-index:90; display:flex; flex-direction:column; align-items:center; gap:.5rem; pointer-events:none; }
.toast{
  pointer-events:auto; max-width:min(92vw,28rem);
  display:flex; gap:.6rem; align-items:flex-start;
  padding:.85rem 1.1rem; border-radius:1rem; font-weight:600; font-size:.92rem;
  color:#fff; box-shadow:0 14px 30px -12px rgba(0,0,0,.55);
  animation:popIn .22s ease both;
}
.toast.ok   { background:linear-gradient(135deg,#059669,#10b981); }
.toast.err  { background:linear-gradient(135deg,#dc2626,#f43f5e); }
.toast.info { background:linear-gradient(135deg,#4f46e5,#7c3aed); }
.toast.warn { background:linear-gradient(135deg,#d97706,#f59e0b); }

/* ------------------------------ modal ------------------------------------ */
.sheet{
  max-height:min(92dvh,860px);
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(1rem + env(safe-area-inset-bottom));
}
.sheet::-webkit-scrollbar{ width:8px }
.sheet::-webkit-scrollbar-thumb{ background:rgba(120,130,160,.35); border-radius:99px }

/* ------------------------------ misc ------------------------------------- */
.spinner{
  width:1.05em; height:1.05em; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{ to{transform:rotate(360deg)} }

.skeleton{
  background:linear-gradient(90deg,rgba(148,163,184,.16),rgba(148,163,184,.32),rgba(148,163,184,.16));
  background-size:200% 100%; animation:shimmer 1.3s infinite; border-radius:.75rem;
}
@keyframes shimmer{ to{background-position:-200% 0} }

.chip{ font-size:.675rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
       padding:.25rem .6rem; border-radius:99px; line-height:1.25; }

@media print{
  .no-print{ display:none!important }
  body{ background:#fff!important }
  .glass{ background:#fff!important; box-shadow:none!important; border:1px solid #ddd!important }
}

/* ---------------------------------------------------------------------------
   Custom dropdown (see assets/js/select.js)
   Replaces the native <select> popup, which the OS draws with its own colours
   and which therefore ignored the app theme on Android (dark app, white list).
--------------------------------------------------------------------------- */
.cs-wrap{ position:relative; display:block; }

/* keep the real <select> for forms/a11y, but out of sight */
select.cs-native{
  position:absolute; opacity:0; pointer-events:none;
  width:100%; height:100%; left:0; top:0; margin:0; z-index:-1;
}

.cs-btn{
  width:100%; text-align:left;
  display:flex; align-items:center; gap:.5rem;
  color:var(--ink);
  cursor:pointer;
}
.cs-btn .cs-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-btn.cs-placeholder .cs-label{ opacity:.55; }
.cs-btn .cs-arrow{ opacity:.55; font-size:.9em; line-height:1; }
.cs-btn:active{ transform:scale(.995); }

.cs-panel{
  z-index:200;
  border-radius:1rem;
  padding:.35rem;
  overflow-y:auto;
  overscroll-behavior:contain;      /* don't let the list scroll the page */
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  box-shadow:0 18px 44px -14px rgba(15,23,42,.45);
  animation:popIn .14s ease both;
  /* opaque: a translucent popup over busy content is hard to read */
  background:var(--bg-2);
}
html.dark .cs-panel{ background:#111a30; box-shadow:0 18px 44px -14px rgba(0,0,0,.75); }

.cs-opt{
  width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.8rem .9rem;
  border-radius:.7rem;
  font-weight:600; font-size:.95rem;
  color:var(--ink);
  background:transparent;
  cursor:pointer;
}
.cs-opt:hover,
.cs-opt:focus-visible{ background:rgba(99,102,241,.12); }
.cs-opt.cs-sel{ background:rgba(99,102,241,.18); }
html.dark .cs-opt:hover,
html.dark .cs-opt:focus-visible{ background:rgba(129,140,248,.18); }
html.dark .cs-opt.cs-sel{ background:rgba(129,140,248,.26); }
.cs-opt:disabled{ opacity:.4; cursor:not-allowed; }
.cs-tick{ color:#6366f1; font-weight:800; }
html.dark .cs-tick{ color:#a5b4fc; }

/* ===========================================================================
   DESIGN SYSTEM — final polish layer
   Tokens + component classes so every screen shares one visual language.
   Purely presentational: no behaviour depends on anything below.
=========================================================================== */

:root{
  --r-sm:.625rem; --r-md:.875rem; --r-lg:1.125rem; --r-xl:1.5rem; --r-2xl:1.75rem;
  --sh-1:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --sh-2:0 2px 4px rgba(15,23,42,.05), 0 6px 16px -6px rgba(15,23,42,.12);
  --sh-3:0 8px 28px -10px rgba(15,23,42,.22);
  --sh-pop:0 20px 48px -16px rgba(15,23,42,.32);
  --brand:#4f46e5; --brand-2:#9333ea;
  --field:rgba(255,255,255,.78);
  --field-brd:rgba(15,23,42,.09);
  --hair:rgba(15,23,42,.07);
}
html.dark{
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 6px rgba(0,0,0,.45), 0 10px 24px -12px rgba(0,0,0,.6);
  --sh-3:0 10px 30px -12px rgba(0,0,0,.7);
  --sh-pop:0 24px 56px -18px rgba(0,0,0,.8);
  --field:rgba(148,163,184,.10);
  --field-brd:rgba(148,163,184,.18);
  --hair:rgba(148,163,184,.14);
}

/* ------------------------------- typography ----------------------------- */
body{
  font-feature-settings:"cv02","cv03","cv04","ss01";
  letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ letter-spacing:-0.022em; }
.num{ font-variant-numeric:tabular-nums; letter-spacing:-0.03em; }
.eyebrow{
  font-size:.6875rem; font-weight:700; letter-spacing:.075em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* --------------------------------- icons -------------------------------- */
.ico{ flex:none; display:inline-block; vertical-align:middle; }
.ico-btn{                       /* square icon-only control */
  width:2.5rem; height:2.5rem; border-radius:var(--r-md);
  display:inline-grid; place-items:center;
  color:var(--ink);
  background:var(--field);
  border:1px solid var(--field-brd);
  transition:background .16s ease, transform .12s ease, border-color .16s ease;
}
.ico-btn:hover{ background:color-mix(in srgb, var(--field) 70%, var(--brand) 8%); }
.ico-btn:active{ transform:scale(.93); }
.ico-badge{                      /* tinted icon chip inside cards */
  width:2.25rem; height:2.25rem; border-radius:var(--r-md);
  display:inline-grid; place-items:center;
}

/* -------------------------------- buttons ------------------------------- */
.btn{
  --btn-h:2.875rem;
  min-height:var(--btn-h);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:0 1.05rem;
  border-radius:var(--r-md);
  font-weight:650; font-size:.9375rem; line-height:1;
  letter-spacing:-0.01em;
  white-space:nowrap;
  transition:transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease,
             background .16s ease, opacity .16s ease, border-color .16s ease;
  touch-action:manipulation;
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.btn:disabled,.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn-lg{ --btn-h:3.375rem; font-size:1rem; padding:0 1.35rem; border-radius:var(--r-lg); }
.btn-sm{ --btn-h:2.25rem; font-size:.8125rem; padding:0 .8rem; border-radius:var(--r-sm); }
.btn-block{ width:100%; }

.btn-primary{
  color:#fff; border:1px solid transparent;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:var(--sh-2);
}
.btn-primary:hover{ filter:brightness(1.06); }
.btn-success{
  color:#fff; border:1px solid transparent;
  background:linear-gradient(135deg,#059669,#10b981);
  box-shadow:var(--sh-2);
}
.btn-success:hover{ filter:brightness(1.06); }
.btn-whatsapp{ color:#fff; border:1px solid transparent; background:#1FAF54; box-shadow:var(--sh-2); }
.btn-whatsapp:hover{ filter:brightness(1.07); }
.btn-danger{
  color:#fff; border:1px solid transparent;
  background:linear-gradient(135deg,#e11d48,#dc2626);
  box-shadow:var(--sh-2);
}
.btn-danger:hover{ filter:brightness(1.06); }
.btn-ghost{
  color:var(--ink);
  background:var(--field);
  border:1px solid var(--field-brd);
}
.btn-ghost:hover{ background:color-mix(in srgb,var(--field) 70%, var(--brand) 8%); }
.btn-quiet{ color:var(--ink-soft); background:transparent; border:1px solid transparent; }
.btn-quiet:hover{ background:var(--field); color:var(--ink); }
.btn-danger-ghost{
  color:#e11d48; background:var(--field); border:1px solid var(--field-brd);
}
html.dark .btn-danger-ghost{ color:#fb7185; }
.btn-danger-ghost:hover{ background:rgba(225,29,72,.10); border-color:rgba(225,29,72,.28); }

/* --------------------------------- cards -------------------------------- */
.card{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-2);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}
.card-flat{
  background:var(--field);
  border:1px solid var(--field-brd);
  border-radius:var(--r-lg);
}
.hair{ border-color:var(--hair) !important; }

/* --------------------------------- forms -------------------------------- */
.field{
  width:100%;
  min-height:3.125rem;
  padding:.8rem 1rem;
  border-radius:var(--r-md);
  background:var(--field);
  border:1px solid var(--field-brd);
  color:var(--ink);
  font-weight:600; font-size:1rem;     /* >=16px stops iOS zoom-on-focus */
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.field::placeholder{ color:var(--ink-soft); opacity:.6; font-weight:500; }
.field:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--brand) 18%, transparent);
  background:color-mix(in srgb,var(--field) 80%, #fff 20%);
}
html.dark .field:focus{ background:color-mix(in srgb,var(--field) 80%, #000 10%); }
.field-label{
  display:block;
  font-size:.75rem; font-weight:700; letter-spacing:.02em;
  color:var(--ink-soft);
  margin:0 0 .4rem .125rem;
}
.field-hint{ display:block; font-size:.75rem; color:var(--ink-soft); opacity:.85; margin:.4rem 0 0 .125rem; }
.req{ color:#e11d48; }
html.dark .req{ color:#fb7185; }

/* custom dropdown inherits the field look */
.cs-btn{
  min-height:3.125rem;
  padding:.8rem 1rem;
  border-radius:var(--r-md);
  background:var(--field);
  border:1px solid var(--field-brd);
  font-weight:600; font-size:1rem;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.cs-btn:hover{ border-color:color-mix(in srgb,var(--brand) 35%, var(--field-brd)); }
.cs-btn[aria-expanded="true"]{
  border-color:var(--brand);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--brand) 18%, transparent);
}
.cs-arrow{ transition:transform .18s ease; }
.cs-btn[aria-expanded="true"] .cs-arrow{ transform:rotate(180deg); }
.cs-panel{ box-shadow:var(--sh-pop); border:1px solid var(--field-brd); }
.cs-opt{ min-height:2.875rem; }

/* ------------------------------ status tint ----------------------------- */
.tint-ok   { background:rgba(16,185,129,.12); color:#047857; }
.tint-warn { background:rgba(245,158,11,.14); color:#b45309; }
.tint-err  { background:rgba(225,29,72,.12);  color:#be123c; }
.tint-info { background:rgba(79,70,229,.12);  color:#4338ca; }
html.dark .tint-ok   { background:rgba(16,185,129,.16); color:#6ee7b7; }
html.dark .tint-warn { background:rgba(245,158,11,.16); color:#fcd34d; }
html.dark .tint-err  { background:rgba(225,29,72,.18);  color:#fda4af; }
html.dark .tint-info { background:rgba(129,140,248,.18); color:#c7d2fe; }

/* -------------------------------- toasts -------------------------------- */
.toast{
  gap:.625rem; align-items:center;
  padding:.8rem 1.05rem;
  border-radius:var(--r-md);
  font-weight:600; font-size:.9rem;
  box-shadow:var(--sh-pop);
  backdrop-filter:blur(10px);
}
.toast .ico{ width:1.15rem; height:1.15rem; }
.toast.ok   { background:#0f9d6e; }
.toast.err  { background:#e11d48; }
.toast.info { background:#4f46e5; }
.toast.warn { background:#d97706; }

/* ------------------------------ empty state ----------------------------- */
.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2.25rem 1.25rem;
  border-radius:var(--r-lg);
  border:1px dashed var(--field-brd);
  background:var(--field);
  color:var(--ink-soft);
}
.empty .ico{ width:1.75rem; height:1.75rem; opacity:.5; margin-bottom:.6rem; }

/* ------------------------------- sheet grip ----------------------------- */
.grip{
  width:2.5rem; height:.3rem; border-radius:99px;
  background:var(--field-brd); margin:0 auto .9rem;
}

/* ------------------------------ touch targets --------------------------- */
@media (pointer:coarse){
  .btn{ --btn-h:3rem; }
  .btn-sm{ --btn-h:2.5rem; }
  .ico-btn{ width:2.75rem; height:2.75rem; }
}

/* ---------------------------- motion refinement ------------------------- */
@keyframes sheetUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.anim-pop{ animation:sheetUp .22s cubic-bezier(.22,.9,.3,1) both; }
.sec-card{ transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease; }
@media (hover:hover){ .sec-card:hover{ transform:translateY(-2px); box-shadow:var(--sh-3); } }
.sec-card:active{ transform:scale(.985); }

/* theme toggle shows the icon for the theme you'd switch TO */
.only-dark{ display:none; }
html.dark .only-dark{ display:inline-flex; }
html.dark .only-light{ display:none; }
.cs-arrow{ display:inline-flex; color:var(--ink-soft); }
.cs-tick{ display:inline-flex; }

/* equal-height session cards so rows never look ragged */
#sectionGrid{ align-items:stretch; }
#sectionGrid > .sec-card{ height:100%; }