/* ==========================================================================
   BRUTAL LITE — Social Mapia design system (preview)
   Calm, clean layout for content (map, videos, reading) +
   Brutalist Pop "brand moments" (yellow + ink stickers, hard shadows) for
   actions, badges, celebrations and share cards.
   Every page in /lite links this file. Page-specific CSS goes in the page.
   ========================================================================== */

:root{
  /* ink + paper */
  --ink:#141518; --ink-soft:#33363c; --muted:#6b7076; --muted-2:#a3a7ad;
  --paper:#ffffff;       /* page background (v3: white) */
  --card:#ffffff;        /* content cards */
  --card-2:#f4f5f7;      /* inputs, quiet fills, grouped sections (cool light grey) */
  --line:rgba(20,21,24,.10);   /* hairlines on calm surfaces */
  /* brand */
  --yellow:#ffd23f; --yellow-soft:#fff3c4;
  --blue:#2b52ff; --pink:#ff4d97; --lime:#c2ec3f; --orange:#ff5c28;
  --violet:#8b5cf6; --teal:#12b39a; --red:#ff3b30;
  /* brand-moment borders + hard shadows */
  --bd:2px solid var(--ink);
  --sh:3px 3px 0 var(--ink); --sh-lg:5px 5px 0 var(--ink); --sh-sm:2px 2px 0 var(--ink);
  /* calm shadow for floating calm things */
  --soft:0 6px 20px rgba(22,19,16,.08);
  /* radius */
  --r-card:16px; --r-ctl:12px; --r-pill:999px;
  /* type */
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-ui:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;font-family:var(--font-ui);color:var(--ink);
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none;}
img{-webkit-user-drag:none;}
button{font-family:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}

/* ---------- iPhone 16 frame (preview-only rules skipped per the strict rules: #stage, #frameOuter, #bezel, .island, .home-indicator) ---------- */
#screen{position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;background:var(--paper);isolation:isolate;}
.statusbar{position:absolute;top:0;left:0;right:0;height:50px;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 26px 7px;z-index:490;pointer-events:none;font:700 15px/1 -apple-system,var(--font-ui);letter-spacing:-.2px;color:var(--ink);
  background:linear-gradient(rgba(255,255,255,.96) 70%,rgba(255,255,255,0));}
.statusbar.on-dark{color:#fff;background:none;}
.statusbar .sb-right{display:flex;align-items:center;gap:5px;}
#scroller{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;}
#scroller::-webkit-scrollbar{display:none;}
.page{padding:58px 16px 120px;}            /* default page padding: below status bar, above footer */
.page.no-footer{padding-bottom:40px;}

/* ---------- type ---------- */
.h1{font:800 32px/1.05 var(--font-display);letter-spacing:-.6px;margin:0;}
.h2{font:800 22px/1.15 var(--font-display);letter-spacing:-.3px;margin:0;}
.h3{font:700 17px/1.2 var(--font-display);margin:0;}
.kicker{font:800 11px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.muted{color:var(--muted);}
.small{font-size:12.5px;}
.section{margin-top:26px;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;}
.section-head .link{font-weight:700;font-size:13px;color:var(--blue);}
/* yellow marker highlight (creator tagline etc.) */
.hl{background:linear-gradient(transparent 52%,var(--yellow) 52%);padding:0 2px;font-weight:700;}

/* ---------- brand-moment buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 20px;border-radius:var(--r-ctl);
  font:800 15.5px/1 var(--font-ui);cursor:pointer;border:0;white-space:nowrap;}
.btn i{font-size:18px;}
.btn-brand{background:var(--yellow);color:var(--ink);border:var(--bd);box-shadow:var(--sh);}          /* the signature button (Plan etc.) */
.btn-ink{background:var(--ink);color:#fff;border:var(--bd);box-shadow:var(--sh-sm);}
.btn-blue{background:var(--blue);color:#fff;border:var(--bd);box-shadow:var(--sh);}
.btn-line{background:#fff;color:var(--ink);border:1.5px solid var(--ink);}
.btn-ghost{background:var(--card-2);color:var(--ink);}
.btn-block{width:100%;}
.btn-sm{height:38px;padding:0 14px;font-size:13.5px;border-radius:10px;}
.btn-sm.btn-brand,.btn-sm.btn-blue{box-shadow:var(--sh-sm);}
.link-blue{color:var(--blue);font-weight:700;}
/* round icon buttons (calm, floating) */
.icon-btn{width:40px;height:40px;border-radius:50%;background:#fff;border:0;display:inline-flex;align-items:center;justify-content:center;
  font-size:19px;color:var(--ink);box-shadow:var(--soft);cursor:pointer;}
.icon-btn.ink-ring{border:var(--bd);box-shadow:var(--sh-sm);}

/* ---------- stickers (tilted badges) ---------- */
.sticker{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border:var(--bd);border-radius:var(--r-pill);
  font:800 11.5px/1 var(--font-ui);background:#fff;color:var(--ink);box-shadow:var(--sh-sm);transform:rotate(-2deg);white-space:nowrap;}
.sticker i{font-size:12px;}
.sticker.lime{background:var(--lime);} .sticker.pink{background:var(--pink);color:#fff;}
.sticker.yellow{background:var(--yellow);} .sticker.blue{background:var(--blue);color:#fff;}
.sticker.orange{background:var(--orange);color:#fff;} .sticker.teal{background:var(--teal);color:#fff;}
.sticker.tilt-r{transform:rotate(2deg);} .sticker.flat{transform:none;}

/* ---------- calm chips ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px;}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:var(--r-pill);background:#fff;
  border:1px solid var(--line);font:700 13px/1 var(--font-ui);color:var(--ink);white-space:nowrap;cursor:pointer;}
.chip i{font-size:15px;}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ---------- calm cards & lists ---------- */
.card{background:var(--card);border-radius:var(--r-card);border:1px solid var(--line);}
.card.pad{padding:16px;}
.card.brand{border:var(--bd);box-shadow:var(--sh);}           /* brand-moment card (offers, highlights) */
.list{background:var(--card);border-radius:var(--r-card);border:1px solid var(--line);overflow:hidden;}
.list .row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line);font-size:14.5px;}
.list .row:last-child{border-bottom:0;}
.list .row .ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--card-2);flex:0 0 auto;}
.list .row .val{margin-left:auto;color:var(--muted);font-size:13.5px;}
.list .row .chev{color:var(--muted-2);font-size:15px;}

/* ---------- inputs ---------- */
.field{margin-bottom:14px;}
.field label{display:block;font:700 12.5px/1 var(--font-ui);color:var(--muted);margin:0 0 7px 2px;}
.input{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border-radius:var(--r-ctl);background:#fff;border:1.5px solid var(--line);font-size:15px;}
.input i{color:var(--muted);font-size:18px;}
.input.focus{border:var(--bd);box-shadow:var(--sh-sm);}

/* ---------- avatars ---------- */
.av{border-radius:50%;object-fit:cover;background:var(--card-2);flex:0 0 auto;position:static;}
.av-24{width:24px;height:24px;} .av-32{width:32px;height:32px;} .av-44{width:44px;height:44px;} .av-56{width:56px;height:56px;}
.av.ring{border:var(--bd);}

/* ---------- video card (calm card, brand stickers on top) ---------- */
.vgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
.vcard{display:flex;flex-direction:column;gap:7px;min-width:0;cursor:pointer;}
.vcard__media{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--card-2);}
.vcard__media > img.poster,.vcard__media > span.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 12s ease-in-out infinite alternate;display:block;}
.vcard__media .tl{position:absolute;top:8px;left:8px;z-index:2;}
.vcard__media .tr{position:absolute;top:8px;right:8px;z-index:2;}
.vcard__media .scrim{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(0,0,0,.72));}
.vcard__media .tagline{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;color:#fff;font:800 13px/1.2 var(--font-display);}
.vcard__place{font:700 13px/1.25 var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vcard__by{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.vcard__by img{width:18px;height:18px;border-radius:50%;object-fit:cover;position:static;}
/* the round Plan button on a card = brand moment */
.plan-dot{width:34px;height:34px;border-radius:50%;background:var(--yellow);border:var(--bd);box-shadow:var(--sh-sm);
  display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink);cursor:pointer;}
.plan-dot.on{background:var(--ink);color:var(--yellow);}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.14) translate(-2%,-2%)}}

/* ---------- map pins (photo stickers) ---------- */
.pin{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-100%);}
.pin img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2.5px solid var(--ink);box-shadow:var(--sh-sm);background:#fff;position:static;}
.pin .lbl{margin-top:5px;background:var(--ink);color:#fff;font:700 10.5px/1 var(--font-ui);padding:4px 7px;border-radius:7px;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;}

/* ---------- bottom tab bar ---------- */
.island-footer{position:absolute;left:0;right:0;bottom:0;height:90px;padding-bottom:34px;z-index:300;display:flex;align-items:stretch;justify-content:space-around;
  background:rgba(255,255,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);}
.island-footer button{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);font:700 10px/1 var(--font-ui);cursor:pointer;}
.island-footer button i{font-size:22px;width:46px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:10px;}
.island-footer button.active{color:var(--ink);}
.island-footer button.active i{background:var(--yellow);border:var(--bd);box-shadow:var(--sh-sm);}

/* ---------- misc ---------- */
.divider{height:1px;background:var(--line);margin:20px 0;}
.toggle{width:46px;height:28px;border-radius:999px;background:#d5d8dd;position:relative;flex:0 0 auto;}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.toggle.on{background:var(--ink);} .toggle.on::after{left:21px;background:var(--yellow);}
.seg{display:flex;background:var(--card-2);border-radius:12px;padding:3px;}
.seg span{flex:1;text-align:center;padding:9px 6px;border-radius:9px;font:700 13px/1 var(--font-ui);color:var(--muted);}
.seg span.on{background:#fff;color:var(--ink);border:var(--bd);box-shadow:var(--sh-sm);}
.sticky-bottom{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 42px;z-index:250;
  background:linear-gradient(rgba(255,255,255,0),var(--paper) 30%);}

/* ==========================================================================
   v2 additions (2026-10-08)
   Rule: only ONE hard-shadow element per screen view (usually the Plan button).
   Stickers only for special things: Offer, New, 92% match, Free, Live.
   Video length and dates are plain (no sticker).
   ========================================================================== */

/* plain, calm video-length pill (replaces the lime "▶ 0:24" sticker) */
.dur{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;
  background:rgba(22,19,16,.72);color:#fff;font:700 11px/1 var(--font-ui);backdrop-filter:blur(6px);}
.dur i{font-size:11px;}
/* plain bold date heading (replaces date stickers) */
.date-h{font:800 13px/1 var(--font-ui);color:var(--ink);letter-spacing:.01em;margin:18px 0 10px;}
.date-h span{color:var(--muted);font-weight:700;margin-left:6px;}

/* sticky Plan bar: the one brand action, always visible on pin / business pages */
.plan-bar{position:absolute;left:0;right:0;bottom:90px;z-index:260;display:flex;align-items:center;gap:10px;
  padding:10px 16px 12px;background:linear-gradient(rgba(255,255,255,0),var(--paper) 28%);}
.plan-bar .btn-brand{flex:1;height:54px;font-size:16.5px;}
.plan-bar .icon-btn{width:54px;height:54px;border-radius:14px;background:#fff;border:1.5px solid var(--ink);box-shadow:none;font-size:21px;}
.page.has-plan-bar{padding-bottom:200px;}
/* calm card plan action (outline, no hard shadow — the hard shadow belongs to the main Plan button) */
.plan-dot{box-shadow:none;}

/* share cards (stories 9:16) */
.share-card{position:relative;width:100%;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:var(--yellow);border:var(--bd);}

/* ==========================================================================
   v3.1 polish (2026-10-09)
   ========================================================================== */

/* 1. Grey page + white cards on list/settings pages (class set by lite.js) */
.page-grey #screen{background:#f4f5f7;}
.page-grey .statusbar{background:linear-gradient(rgba(244,245,247,.96) 70%,rgba(244,245,247,0));}
.page-grey .sticky-bottom{background:linear-gradient(rgba(244,245,247,0),#f4f5f7 30%);}
.page-grey .card,.page-grey .list{background:#fff;}

/* 2. Black icons: colourful icons/tiles turned calm by lite.js */
.v31-ink-icon{color:var(--ink) !important;}
.v31-calm-tile{background:var(--card-2) !important;color:var(--ink) !important;border-color:transparent !important;}
.v31-calm-tile i{color:var(--ink) !important;}

/* 8. Plan moment: pop + toast */
@keyframes v31pop{0%{transform:scale(1)}35%{transform:scale(.9) rotate(-3deg)}70%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1)}}
.v31-pop{animation:v31pop .42s cubic-bezier(.3,1.6,.5,1);}
.v31-planned{background:var(--ink) !important;color:var(--yellow) !important;}
.v31-planned i{color:var(--yellow) !important;}
.v31-toast{position:absolute;left:50%;top:58px;z-index:600;transform:translate(-50%,-14px) rotate(-2deg);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--yellow);color:var(--ink);
  border:var(--bd);box-shadow:var(--sh);font:800 13.5px/1 var(--font-ui);white-space:nowrap;transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1);}
.v31-toast.show{opacity:1;transform:translate(-50%,0) rotate(-2deg);}
.v31-toast i{font-size:16px;}

/* 10. Accessibility */
:root{--muted-2:#80858d;}                       /* small grey text: 3.9:1 instead of 2.4:1 on white */
.icon-btn{width:44px !important;height:44px !important;} /* 44px minimum tap target */
.btn-sm{min-height:40px;}
.island-footer button{min-height:48px;}
:focus-visible{outline:3px solid var(--blue) !important;outline-offset:2px;border-radius:8px;}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}