/* ============================================================
   YuMiHere — global styles
   Light & outgoing: sunny paper base, coral/sun/sky accents
   ============================================================ */

:root{
  /* Palette (see icons.html for the icon/logo reference):
       --coral → buttons            #74B53F
       --sky   → text nav & links   #5F80A6
       --sun   → icons & accents    #E0B847
     The old names stay so nothing else needs renaming. */
  --sun:        #E0B847;
  --coral:      #74B53F;
  --sky:        #5F80A6;
  --leaf:       #7ED09B;
  --ink:        #2E2A33;
  --ink-soft:   #6E6876;
  --paper:      #FFFDF6;
  --card:       #FFFFFF;
  --radius-lg:  28px;
  --radius-pill:999px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

/* ==== Shared primitives — one source of truth =================
   Every text input, textarea and select inherits these; the
   component rules below only state what DIFFERS (size, shape).
   Headings share Fredoka once; buttons share one focus ring.
   Fewer rules → smaller file → faster loads. ================= */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
select{
  font-family:'Nunito', sans-serif;
  font-size:1rem; font-weight:600;
  color:var(--ink);
  background:var(--paper);
  border:2px solid #EFE7D8;
  border-radius:16px;
  padding:10px 25px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:none;
  border-color:var(--sky);
}
textarea{ min-height:70px; resize:vertical; }
select, select option{ text-align:center; text-align-last:center; }
button{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }
h1, h2, h3{ font-family:'Fredoka', sans-serif; font-weight:600; }

/* The hidden attribute must always win, even over display rules
   like .btn{display:flex} or .assign-banner{display:flex}. */
[hidden]{ display:none !important; }

html, body{ height:100%; }

body{
  font-family:'Nunito', system-ui, sans-serif;
  background:var(--paper);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  overflow-x:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---- Sunny backdrop ---------------------------------------- */

.sky{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}

.sun-arc{
  position:absolute; top:-38vh; left:50%; transform:translateX(-50%);
  width:130vw; height:80vh; border-radius:50%;
  background:radial-gradient(circle at 50% 100%,
    rgba(255,197,61,.45) 0%,
    rgba(255,197,61,.18) 45%,
    rgba(255,197,61,0) 72%);
}

.blob{
  position:absolute; border-radius:50%;
  opacity:.55; filter:blur(1px);
  animation:drift 9s ease-in-out infinite alternate;
}
.blob.b1{ width:88px; height:88px; background:var(--sky);   top:12%;    left:-28px;  animation-delay:0s; }
.blob.b2{ width:56px; height:56px; background:var(--coral); top:22%;    right:-14px; animation-delay:-3s; }
.blob.b3{ width:40px; height:40px; background:var(--leaf);  bottom:20%; left:8%;     animation-delay:-6s; }
.blob.b4{ width:66px; height:66px; background:var(--sun);   bottom:10%; right:-20px; animation-delay:-1.5s; }

@keyframes drift{
  from{ transform:translateY(0)     rotate(0deg); }
  to  { transform:translateY(-22px) rotate(8deg); }
}

/* ---- Layout ------------------------------------------------- */

main{
  position:relative; z-index:1;
  flex:1;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  padding:32px 24px 24px;
  max-width:420px; width:100%; margin:0 auto;
}

/* ---- Signature: the pin friend ------------------------------ */

.pin{
  width:112px; height:132px; margin-bottom:20px;
  animation:hop 2.6s ease-in-out infinite;
  transform-origin:50% 100%;
}

@keyframes hop{
  0%,100%{ transform:translateY(0)     scale(1,1); }
  12%    { transform:translateY(0)     scale(1.04,.94); }
  32%    { transform:translateY(-14px) scale(.97,1.05); }
  52%    { transform:translateY(0)     scale(1.03,.95); }
  64%    { transform:translateY(0)     scale(1,1); }
}

.pin-shadow{
  width:64px; height:12px; border-radius:50%;
  background:rgba(46,42,51,.12);
  margin:-6px 0 22px;
  animation:squash 2.6s ease-in-out infinite;
}

@keyframes squash{
  0%,100%{ transform:scaleX(1); }
  32%    { transform:scaleX(.7); opacity:.7; }
  52%    { transform:scaleX(1.05); }
}

/* ---- Wordmark & tagline ------------------------------------- */

.wordmark{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  font-size:clamp(2.2rem, 9vw, 2.8rem);
  letter-spacing:-.02em;
  line-height:1;
  margin-bottom:10px;
}
.wordmark .yu  { color:var(--coral); }
.wordmark .mi  { color:var(--sun);   }
.wordmark .here{ color:var(--sky);   }

.tagline{
  color:var(--ink-soft);
  font-size:1.05rem;
  font-weight:600;
  text-align:center;
  margin-bottom:44px;
}

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

.auth{
  width:100%;
  display:flex; flex-direction:column; gap:14px;
}

.btn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; min-height:56px;
  border-radius:var(--radius-pill);
  border:none;
  font-family:'Nunito', sans-serif;
  font-size:1.05rem; font-weight:700;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.97); }
.btn svg{ flex:0 0 22px; width:22px; height:22px; }

.btn-google{
  background:var(--card);
  color:var(--ink);
  border:2px solid #EAE4D8;
  box-shadow:0 4px 0 #EAE4D8;
}
.btn-google:active{ box-shadow:0 1px 0 #EAE4D8; }

/* ---- Status & footer ----------------------------------------- */

.status{
  min-height:1.4em;
  text-align:center;
  font-size:.9rem; font-weight:700;
  color:var(--leaf);
  margin-top:14px;
}

footer{
  position:relative; z-index:1;
  text-align:center;
  padding:0 32px 28px;
  color:var(--ink-soft);
  font-size:.82rem; line-height:1.55;
}
footer a{ color:var(--coral); font-weight:700; text-decoration:none; }
footer a:focus-visible{ outline:2px solid var(--sky); border-radius:4px; }

/* ---- Accessibility -------------------------------------------- */


/* ============================================================
   FEED PAGE
   The activity feed (feed.html) reuses the tokens, backdrop
   (.sky) and button styles above. main.feed overrides the
   login page's centred hero layout.
   ============================================================ */

/* Override the login page's centred hero layout */
main.feed{
  justify-content:flex-start;
  padding:16px 16px 170px;   /* clears the bottom nav + FAB */
  max-width:520px;
}

/* ---- Top bar -------------------------------------------------- */

.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:10px;
  width:100%; max-width:520px; margin:0 auto;
  padding:12px 16px;
  background:rgba(255,253,246,.9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.topbar .mini-pin{ width:30px; height:36px; flex:0 0 auto; }

.topbar .brand{
  text-decoration:none;      /* it's a link home (feed) now */
  font-family:'Fredoka', sans-serif;
  font-weight:700; font-size:1.25rem;
  letter-spacing:-.02em;
  margin-right:auto;
}
.topbar .brand .yu  { color:var(--coral); }
.topbar .brand .mi  { color:var(--sun); }
.topbar .brand .here{ color:var(--sky); }

.topbar .avatar{
  width:36px; height:36px; border-radius:50%;
  border:2px solid var(--sun);
  object-fit:cover;
  background:var(--card);
}

.btn-signout{
  border:none; background:none;
  font-family:'Nunito', sans-serif;
  font-weight:700; font-size:.85rem;
  color:var(--ink-soft);
  cursor:pointer;
  padding:8px;
  border-radius:8px;
}

/* Avatar dropdown menu (My Profile / Settings) */
.avatar-menu{ position:relative; display:flex; }
.avatar-btn{
  border:2px solid var(--sun);
  background:var(--paper);
  padding:0;
  width:36px; height:36px;
  border-radius:50%;
  overflow:hidden;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.avatar-btn .avatar{
  width:100%; height:100%;
  border:none;
}

.avatar-dropdown{
  position:absolute;
  top:calc(100% + 8px); right:0;
  z-index:20;
  min-width:172px;
  background:var(--card);
  border:2px solid #F0E9DC;
  border-radius:16px;
  box-shadow:0 8px 20px rgba(46,42,51,.16);
  padding:6px;
}
.avatar-dropdown a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  color:var(--ink);
  font-weight:800; font-size:.92rem;
}
.avatar-dropdown a:hover{ background:var(--paper); color:var(--sky); }
.avatar-dropdown a:focus-visible{ outline:2px solid var(--sky); }

/* Sign out is a <button> among <a>s, so it has to be told to look the
   same. Separated by a rule and tinted, because it's the one item in
   here you don't want to hit by accident. */
.menu-signout{
  display:block; width:100%;
  padding:10px 12px;
  margin-top:6px;
  border:none; border-top:1.5px solid #F0E9DC;
  border-radius:0 0 10px 10px;
  background:none;
  text-align:left; cursor:pointer;
  font-family:'Nunito', sans-serif;
  font-weight:800; font-size:.92rem;
  color:var(--coral);
}
.menu-signout:hover{ background:var(--paper); }
.menu-signout:focus-visible{ outline:2px solid var(--sky); }

/* ---- Feed cards ------------------------------------------------ */

.feed-list{
  width:100%;
  display:flex; flex-direction:column; gap:14px;
  list-style:none;
}

.card{
  background:var(--card);
  border:2px solid #F0E9DC;
  border-radius:var(--radius-lg);
  box-shadow:0 4px 0 #F0E9DC;
  padding:16px 18px;
  animation:card-in .3s ease both;
}
@keyframes card-in{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:translateY(0); }
}

.card-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:10px;
}
.card-head .avatar{
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--sun); object-fit:cover;
  background:var(--paper);
}
.card-head .who{ display:flex; flex-direction:column; }
.card-head .name{ font-weight:800; font-size:.95rem; }
a.name{ color:inherit; text-decoration:none; }
a.name:hover{ color:var(--sky); }
a.name:focus-visible{ outline:2px solid var(--sky); border-radius:4px; }
.card-head .when{ font-size:.78rem; color:var(--ink-soft); font-weight:600; }

/* Expandable cards: tap to show full title/description + interested */
.card.expandable{ cursor:pointer; }
.card.expanded h2,
.card.expanded .desc{
  display:block;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  overflow:visible;
}

.card-interested{
  margin-top:12px;
  padding-top:12px;
  border-top:1.5px solid #F5EFE3;
}.card-interested h3{
    font-size:.95rem;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.int-list{ display:flex; flex-direction:column; gap:4px; }
.int-row{
  display:flex; align-items:center; gap:8px;
  text-decoration:none; color:inherit;
  font-weight:700; font-size:.88rem;
  padding:3px 0;
}
.int-row img{
  width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--sun);
  object-fit:cover;
  background:var(--paper);
}
.int-row:hover span{ color:var(--sky); }
.int-row:focus-visible{ outline:2px solid var(--sky); border-radius:8px; }
.int-loading{ color:var(--ink-soft); font-weight:600; font-size:.85rem; }

/* Remove-contact button in the relationship sheet */
.act-btn.danger.remove-friend{
  width:100%;
  margin:10px 0 0;
  padding:11px 0;
}

.badge{
  margin-left:auto;
  font-size:.72rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--radius-pill);
}
.badge.public { background:#E7F7EE; color:#2F9A5D; }
.badge.private{ background:#FDEDEA; color:#D6544A; }.card h2{
    font-size:1.2rem;
  margin-bottom:4px;
  /* wrap, but never more than one line */
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  line-clamp:1;
  overflow:hidden;
}
.card .desc{
  color:var(--ink-soft); font-size:.95rem; line-height:1.5;
  margin-bottom:12px;
  white-space:pre-line;
  /* wrap, capped at three lines */
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}

.card-meta{
  display:flex; flex-wrap:wrap; gap:8px;
}
.chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.8rem; font-weight:700;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  background:var(--paper);
  border:1.5px solid #EFE7D8;
  color:var(--ink);
}
.chip svg{ width:13px; height:13px; }
.chip.cat     { background:#FFF3D6; border-color:#F5DFA1; }
.chip.loc     { background:#E4F6FC; border-color:#BEE7F4; }
.chip.times   { background:#EAF8F0; border-color:#C4E9D3; }
.chip.sched   { background:#F3EFFB; border-color:#DED3F2; color:#7A5FB8; }
.chip.cost    { background:#FDF2E3; border-color:#F3D9AE; color:#8A6A2B; }

/* ---- Meet up: gathered activities + inline create form ---------------- */
.mu-act-list{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.mu-act-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:var(--radius-pill);
  background:var(--paper); border:1.5px solid #EFE7D8;
  font-size:.82rem;
}
.mu-act-chip .mu-act-meta{ color:var(--ink-soft); font-weight:400; }
.mu-act-remove{
  background:none; border:none; cursor:pointer;
  color:var(--ink-soft); font-size:.9rem; line-height:1; padding:0 0 0 2px;
}
.mu-act-remove:hover{ color:#D6544A; }
.mu-act-newform{
  margin-top:10px; padding:12px;
  background:var(--paper); border:1.5px solid #EFE7D8; border-radius:12px;
  display:flex; flex-direction:column; gap:8px;
}
.mu-act-newform input, .mu-act-newform select{ width:100%; }
.mu-act-newrow{ display:flex; gap:8px; }
.mu-act-newrow select{ flex:1; }
.mu-act-newbtns{ display:flex; gap:8px; justify-content:flex-end; }

/* Meet up card: the "what we'll do" activity list */
.mu-acts{
  margin:8px 0; padding:10px 12px;
  background:#FBFAF6; border:1.5px solid #F0E9DC; border-radius:12px;
}
.mu-acts-title{ font-weight:700; font-size:.85rem; margin:0 0 4px; }
.mu-act-line{ font-size:.88rem; padding:2px 0; }
.mu-act-line .mu-act-meta{ color:var(--ink-soft); }

/* Card actions: Edit/Cancel for the creator, Interested for others */
.card-actions{
  display:flex; gap:8px;
  margin-top:12px;
  padding-top:12px;
  border-top:1.5px solid #F5EFE3;
}
.act-btn{
  border:2px solid #EFE7D8;
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--radius-pill);
  font-family:'Nunito', sans-serif;
  font-weight:800; font-size:.85rem;
  padding:7px 14px;
  transition:transform .1s ease;
}
.act-btn:active{ transform:scale(.95); }
.act-btn.danger{
  border-color:#F6CCC7;
  color:#D6544A;
  margin-left:auto;
}
.act-btn.danger:hover{ background:#FDEDEA; }
.act-btn.active{
  background:var(--sun);
  border-color:#C9A02F;
}

/* ---- Empty state ----------------------------------------------- */

.empty{
  text-align:center;
  padding:48px 24px;
  color:var(--ink-soft);
}
.empty .pin{ width:84px; height:99px; margin:0 auto 6px; }
.empty .pin-shadow{ margin:-4px auto 18px; }.empty h2{
    color:var(--ink); font-size:1.3rem; margin-bottom:6px;
}
.empty p{ font-weight:600; }

/* ---- Floating Create button ------------------------------------ */

.fab{
  position:fixed;
  right:max(20px, env(safe-area-inset-right));
  bottom:calc(76px + env(safe-area-inset-bottom)); /* clears the bottom nav */
  z-index:8;
  width:62px; height:62px;
  border-radius:50%;
  border:none;
  background:var(--coral);
  color:#fff;
  box-shadow:0 5px 0 #E0B847, 0 8px 20px rgba(224,184,71,.35);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.fab svg{ width:26px; height:26px; transition:transform .2s ease; }
.fab:active{ transform:scale(.94); box-shadow:0 2px 0 #E0B847; }
.fab:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; }
.fab[aria-expanded="true"] svg{ transform:rotate(45deg); }

/* ---- Create sheet ----------------------------------------------- */

.sheet-backdrop{
  position:fixed; inset:0; z-index:9;
  background:rgba(46,42,51,.35);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.sheet-backdrop.open{ opacity:1; pointer-events:auto; }

.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  max-width:520px; margin:0 auto;
  /* Fills everything below the YuMiHere logo / sign-out banner */
  height:calc(100dvh - 64px);
  max-height:none;
  overflow-y:auto;
  background:var(--card);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:0 -8px 30px rgba(46,42,51,.18);
  padding:18px 22px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(105%);
  transition:transform .28s cubic-bezier(.32,.72,.28,1);

  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style:none;  /* IE and Edge */
  scrollbar-width:none;     /* Firefox */
}
.sheet.open{ transform:translateY(0); }

/* Hide scrollbar for Chrome, Safari and Opera */
.sheet::-webkit-scrollbar{
  display:none;
}.sheet h2{
    font-size:1.3rem; margin-bottom:10px;
}

.field{ margin-bottom:12px; }
.field label{
  display:block;
  font-size:.85rem; font-weight:800;
  margin-bottom:5px;
}
.field .hint{
  display:block;
  font-size:.78rem; font-weight:600;
  color:var(--ink-soft);
  margin-top:4px;
}
.field .optional{
  font-weight:600; color:var(--ink-soft); font-size:.78rem;
}

/* ---- Optional-details section (collapsed behind a ＋) ------------------ */
.optional-toggle{
  display:flex; align-items:center; gap:8px;
  width:100%; margin:4px 0 2px;
  padding:11px 14px;
  background:var(--paper);
  border:1.5px dashed #DDD3C0; border-radius:12px;
  font-family:inherit; font-weight:700; font-size:.9rem;
  color:var(--ink); cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.optional-toggle:hover{ background:#F6F1E6; border-color:#CFC3AB; }
.optional-toggle:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.optional-plus{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex:0 0 auto;
  background:var(--sun); color:#fff; border-radius:50%;
  font-size:1rem; line-height:1;
  transition:transform .2s ease;
}
.optional-toggle.open .optional-plus{ transform:rotate(45deg); }
.optional-hint{
  margin-left:auto; font-weight:400; font-size:.78rem; color:var(--ink-soft);
}


.field input,
.field textarea,
.field select{ width:100%; }

/* Preferred dates: calendar picker + removable chips */
.date-row{
  display:flex; gap:8px; align-items:stretch;
}
.date-row input[type="date"]{ flex:1; padding:10px 14px; }
.add-date{
  flex:0 0 auto;
  border:2px solid #E8AF25;
  background:var(--sun);
  color:var(--ink);
  border-radius:var(--radius-pill);
  font-family:'Nunito', sans-serif;
  font-weight:800; font-size:.88rem;
  padding:0 16px;
  cursor:pointer;
}
.add-date:active{ transform:scale(.96); }
.add-date:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

.date-chips{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:8px;
}
.date-chips:empty{ margin-top:0; }
.date-chip{
  border:2px solid #BEE7F4;
  background:#E4F6FC;
  color:var(--ink);
  border-radius:var(--radius-pill);
  font-family:'Nunito', sans-serif;
  font-weight:700; font-size:.82rem;
  padding:6px 12px;
  cursor:pointer;
}
.date-chip:hover{ border-color:var(--coral); background:#FDEDEA; }
.date-chip:focus-visible{ outline:2px solid var(--sky); }

.time-range{
  display:flex; align-items:center; gap:0;
  justify-content:space-between;
  flex-wrap:nowrap;
  width:90%;
  margin-top:8px;
}
.time-range span{ font-weight:700; color:var(--ink-soft); font-size:.85rem; }

/* Privacy segmented control */
.segment{
  display:flex; gap:0;
  border:2px solid #EFE7D8;
  border-radius:var(--radius-pill);
  overflow:hidden;
  background:var(--paper);
}
.segment button{
  flex:1;
  border:none; background:none;
  font-family:'Nunito', sans-serif;
  font-weight:800; font-size:.92rem;
  padding:11px 0;
  color:var(--ink-soft);
  cursor:pointer;
}
.segment button[aria-pressed="true"]{
  background:var(--sky);
  color:#fff;
}
.segment button:focus-visible{ outline:2px solid var(--coral); outline-offset:-2px; }

.private-note{
  display:none;
  margin-top:8px;
  font-size:.8rem; font-weight:600;
  color:var(--ink-soft);
  background:var(--paper);
  border:1.5px dashed #E5DCC9;
  border-radius:12px;
  padding:10px 12px;
}
.private-note.show{ display:block; }

.form-error{
  color:#D6544A;
  font-weight:700; font-size:.88rem;
  min-height:1.3em;
  margin-bottom:8px;
}
.form-error:empty{ min-height:0; margin:0; }

.btn-primary{
  background:var(--coral); color:#fff;
  box-shadow:0 4px 0 #E0B847;
}
.btn-primary:active{ box-shadow:0 1px 0 #E0B847; }
.btn-primary:disabled{
  opacity:.6; cursor:not-allowed;
}

/* ============================================================
   BOTTOM NAVIGATION (feed + address book)
   Icon-only links between the main pages.
   ============================================================ */

.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:7;
  max-width:520px; margin:0 auto;
  display:flex; justify-content:space-around; align-items:center;
  background:rgba(255,253,246,.95);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-top:2px solid #F0E9DC;
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));
}
.nav-btn{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:44px;
  border-radius:16px;
  color:var(--ink-soft);
  transition:color .15s ease, background .15s ease;
}
.nav-btn svg{ width:26px; height:26px; }
.nav-btn:hover{ color:var(--ink); }
.nav-btn.active{
  color:var(--sun);          /* icons wear the icon colour */
  background:#FBF3D9;
}
.nav-btn:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

/* ============================================================
   ADDRESS BOOK PAGE
   ============================================================ */

.page-title{
  font-family:'Fredoka', sans-serif;
  font-weight:700; font-size:1.6rem;
  align-self:flex-start;
  margin-bottom:6px;
}
.page-status{
  min-height:1.4em;
  align-self:flex-start;
  font-size:.9rem; font-weight:700;
  margin-bottom:10px;
}

main.feed section.card{
  width:100%;
  margin-bottom:14px;
}
.card h2{ margin-bottom:6px; }

/* Invite block inside the friends sheet */
.sheet-invite{
  text-align:center;
  margin-bottom:6px;
}
.sheet-invite .desc{
  color:var(--ink-soft);
  font-size:.92rem; line-height:1.5;
  margin-bottom:14px;
}
.sheet-divider{
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, #F0E9DC, transparent);
  margin:18px 0 14px;
}

/* Invite card */
.invite-card{ text-align:center; }
.invite-card .desc{ margin-bottom:14px; }

.invite-qr{
  display:inline-block;
  padding:10px;
  background:#FFFFFF;
  border:2px solid #F0E9DC;
  border-radius:16px;
  margin-bottom:12px;
  min-height:60px;
}
.invite-qr img, .invite-qr canvas{ display:block; }

.invite-code-row{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:14px;
}
.invite-code{
  font-family:'Fredoka', sans-serif;
  font-weight:700; font-size:1.5rem;
  letter-spacing:.18em;
  background:var(--paper);
  border:2px dashed #E8AF25;
  border-radius:14px;
  padding:8px 16px;
}

.invite-actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.invite-actions .btn-primary{
  background:var(--coral); color:#fff;
  box-shadow:0 4px 0 #E0B847;
  width:auto; min-height:46px; padding:0 22px;
  font-size:.95rem;
}
.invite-actions .btn-primary:active{ box-shadow:0 1px 0 #E0B847; }

/* Redeem row */
.redeem-row{
  display:flex; gap:8px;
}
.redeem-row input{
  flex:1;
  font-family:'Fredoka', sans-serif;
  font-weight:600; font-size:1.05rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--paper);
  border:2px solid #EFE7D8;
  border-radius:16px;
  padding:10px 14px;
  min-width:0;
}
.redeem-row input:focus-visible{ outline:none; border-color:var(--sky); }

/* Friends list */
.ab-section{ width:100%; }
.section-title{
  font-family:'Fredoka', sans-serif;
  font-weight:600; font-size:1.2rem;
  margin:6px 0 10px;
}
.friend-list{
  list-style:none;
  display:flex; flex-direction:column; gap:10px;
}
.friend-group-title{
  font-family:'Fredoka', sans-serif;
  font-weight:600; font-size:.95rem;
  color:var(--ink-soft);
  margin:6px 0 -2px;
  list-style:none;
}
.friend-group-title:first-child{ margin-top:0; }

.friend-row{
  display:flex; align-items:center; gap:10px;
  background:var(--card);
  border:2px solid #F0E9DC;
  border-radius:20px;
  box-shadow:0 3px 0 #F0E9DC;
  padding:10px 12px 10px 14px;
}
.friend-link{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  color:inherit;
  border-radius:12px;
}
.friend-link:hover .name{ color:var(--sky); }
.friend-link:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

.rel-chip{
  flex:0 0 auto;
  max-width:44%;
  border:2px dashed #E5DCC9;
  background:var(--paper);
  color:var(--ink-soft);
  border-radius:var(--radius-pill);
  font-family:'Nunito', sans-serif;
  font-weight:800; font-size:.76rem;
  padding:6px 11px;
  cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rel-chip.set{
  border-style:solid;
  border-color:#F5DFA1;
  background:#FFF3D6;
  color:var(--ink);
}
.rel-chip:focus-visible{ outline:2px solid var(--sky); }
.friend-row .avatar{
  width:40px; height:40px; border-radius:50%;
  border:2px solid var(--sun); object-fit:cover;
  background:var(--paper);
}
.friend-row .who{ display:flex; flex-direction:column; }
.friend-row .name{ font-weight:800; font-size:.98rem; }
.friend-row .when{ font-size:.78rem; color:var(--ink-soft); font-weight:600; }

.ab-empty{
  color:var(--ink-soft);
  font-weight:600;
  text-align:center;
  padding:18px 12px;
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */

.avatar-link{ display:flex; border-radius:50%; }
.avatar-link:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

.profile-head{
  display:flex; flex-direction:column; align-items:center;
  margin:6px 0 16px;
}
.profile-avatar img,
.profile-avatar-fallback{
  width:96px; height:96px; border-radius:50%;
  border:3px solid var(--sun);
  object-fit:cover;
  background:var(--card);
  display:block;
}
.profile-avatar-fallback{
  display:flex; align-items:center; justify-content:center;
  background:var(--paper);
}
.profile-avatar-fallback svg{ width:54px; height:64px; }
.name-row{
  display:flex; align-items:center; gap:8px;
  margin-top:10px;
}
.profile-name{
  font-family:'Fredoka', sans-serif;
  font-weight:700; font-size:1.5rem;
}
.profile-name.is-hidden{ opacity:.45; }
.profile-sub{
  color:var(--ink-soft);
  font-weight:700; font-size:.9rem;
}

/* About card field rows */
.ab-card{ width:100%; }
.field-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 0;
  border-bottom:1.5px solid #F5EFE3;
}
.field-row:last-of-type{ border-bottom:none; }
.field-row.is-hidden .field-label,
.field-row.is-hidden .field-control{ opacity:.45; }

.field-label{
  flex:0 0 108px;
  font-weight:800; font-size:.82rem;
}
.field-control{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; }
.field-control input,
.field-control select{
  width:100%;
  font-family:'Nunito', sans-serif;
  font-size:.95rem; font-weight:600;
  color:var(--ink);
  background:var(--paper);
  border:2px solid #EFE7D8;
  border-radius:12px;
  padding:7px 10px;
}
.field-control input:focus-visible,
.field-control select:focus-visible{ outline:none; border-color:var(--sky); }
.field-value{ font-weight:700; font-size:.95rem; word-break:break-word; }

.eye-btn{
  flex:0 0 auto;
  border:2px solid #EFE7D8;
  background:var(--paper);
  border-radius:50%;
  width:34px; height:34px;
  font-size:.95rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.eye-btn:focus-visible{ outline:2px solid var(--sky); }

.save-btn{
  margin-top:14px;
  background:var(--coral); color:#fff;
  box-shadow:0 4px 0 #E0B847;
}
.save-btn:active{ box-shadow:0 1px 0 #E0B847; }
.save-btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Interests — grouped by category */
.interests{
  width:100%;
  display:flex; flex-direction:column; gap:12px;
}
/* The category label sits beside its chips rather than above them. On a
   phone that saves a row per category, and the label reads as what it is
   — a heading for the row, not a section of its own. */
.interest-group{
  width:100%;
  display:flex; align-items:baseline; gap:10px;
  margin-bottom:8px;
}
.interest-cat{
  font-family:'Fredoka', sans-serif;
  font-weight:600; font-size:.95rem;
  color:var(--ink-soft);
  margin:0;
  /* Enough width for the labels to line up, but it gives way rather than
     truncating a long one. */
  flex:0 0 auto; min-width:84px; max-width:40%;
}
/* The chips take the rest and wrap under themselves, not under the
   label. */
.interest-group .card-meta{
  flex:1; min-width:0;
  display:flex; flex-wrap:wrap; gap:6px;
  margin:0;
}

/* Section dropdown */
.tab-select-wrap{
  width:100%;
  display:block;
  margin:14px 0 12px;
}
.sr-label{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.tab-select{
  width:100%;
  font-family:'Fredoka', sans-serif;
  font-weight:600; font-size:1.05rem;
  color:var(--ink);
  background:var(--card);
  border:2px solid #E8AF25;
  border-radius:var(--radius-pill);
  padding:12px 18px;
  box-shadow:0 4px 0 #F0E0AE;
  cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232E2A33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 18px center;
}
.tab-select:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

.tab-view{ width:100%; }
.tab-panel{ width:100%; }

/* ============================================================
   CALENDAR PAGE
   ============================================================ */

.cal-views{
  width:100%;
  display:flex;
  border:2px solid #EFE7D8;
  border-radius:var(--radius-pill);
  overflow:hidden;
  background:var(--card);
  margin-bottom:12px;
}
.cal-view-btn{
  flex:1;
  border:none; background:none;
  font-family:'Nunito', sans-serif;
  font-weight:800; font-size:.92rem;
  padding:11px 0;
  color:var(--ink-soft);
  cursor:pointer;
}
.cal-view-btn.active{ background:var(--sky); color:#fff; }
.cal-view-btn:focus-visible{ outline:2px solid var(--coral); outline-offset:-2px; }

.cal-nav{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:10px;
}
.cal-arrow{
  width:44px; height:44px;
  border:2px solid #EFE7D8;
  background:var(--card);
  border-radius:50%;
  font-size:1.5rem; line-height:1;
  color:var(--ink);
  cursor:pointer;
}
.cal-arrow:active{ transform:scale(.92); }
.cal-arrow:focus-visible{ outline:2px solid var(--sky); }

.cal-heading{ display:flex; align-items:center; gap:8px; }
.cal-month-btn{
  border:none; background:none;
  font-family:'Fredoka', sans-serif;
  font-weight:700; font-size:1.35rem;
  color:var(--ink);
  cursor:pointer;
  padding:4px 6px; border-radius:10px;
}
.cal-month-btn:hover{ color:var(--sky); }
.cal-month-btn:focus-visible{ outline:2px solid var(--sky); }
.cal-year{
  border:none;
  background:none;
  font-family:'Fredoka', sans-serif;
  font-weight:700; font-size:1.35rem;
  color:var(--ink-soft);
  cursor:pointer;
  appearance:none; -webkit-appearance:none;
  padding:4px 2px;
}
.cal-year:focus-visible{ outline:2px solid var(--sky); border-radius:8px; }

/* Calendar body fills the page column, so month/week views line up
   exactly with the ‹ › arrow positions above */
.cal-body{ width:100%; }

/* Month picker grid */
.cal-month-grid{
  width:100%;
  display:none;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  background:var(--card);
  border:2px solid #F0E9DC;
  border-radius:var(--radius-lg);
  box-shadow:0 4px 0 #F0E9DC;
  padding:12px;
  margin-bottom:12px;
}
.cal-month-grid:not([hidden]){ display:grid; }
.cal-month-cell{
  border:2px solid #EFE7D8;
  background:var(--paper);
  border-radius:14px;
  font-family:'Nunito', sans-serif;
  font-weight:800; font-size:.9rem;
  color:var(--ink);
  padding:10px 0;
  cursor:pointer;
}
.cal-month-cell.active{ background:var(--sun); border-color:#E8AF25; }
.cal-month-cell:focus-visible{ outline:2px solid var(--sky); }

/* Month view */
.cal-month{
  width:100%;
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:4px;
  background:var(--card);
  border:2px solid #F0E9DC;
  border-radius:var(--radius-lg);
  box-shadow:0 4px 0 #F0E9DC;
  padding:12px 10px;
}
.cal-dow{
  text-align:center;
  font-weight:800; font-size:.72rem;
  color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.05em;
  padding-bottom:4px;
}
.cal-cell{
  border:none;
  background:none;
  border-radius:12px;
  min-height:44px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  font-family:'Nunito', sans-serif;
  font-weight:700; font-size:.9rem;
  color:var(--ink);
  cursor:pointer;
}
.cal-cell:hover{ background:var(--paper); }
.cal-cell.other{ color:#CBC3B4; }
.cal-cell.today{
  background:var(--sun);
  color:var(--ink);
}
.cal-cell:focus-visible{ outline:2px solid var(--sky); }
.cal-dots{ display:flex; gap:3px; }
.cal-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--coral);
}
.cal-cell.today .cal-dot{ background:var(--ink); }

/* Week view */
.cal-week-row{
  width:100%;
  display:flex; align-items:center; gap:12px;
  border:2px solid #F0E9DC;
  background:var(--card);
  border-radius:18px;
  box-shadow:0 3px 0 #F0E9DC;
  padding:10px 14px;
  margin-bottom:8px;
  cursor:pointer;
  text-align:left;
  font-family:'Nunito', sans-serif;
}
.cal-week-row.today{ border-color:#E8AF25; background:#FFF9E8; }
.cal-week-row:focus-visible{ outline:2px solid var(--sky); }
.cal-week-day{
  flex:0 0 44px;
  display:flex; flex-direction:column; align-items:center;
}
.cal-week-dow{ font-size:.72rem; font-weight:800; color:var(--ink-soft); text-transform:uppercase; }
.cal-week-num{ font-family:'Fredoka', sans-serif; font-weight:700; font-size:1.2rem; }
.cal-week-events{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.cal-week-pill{
  background:#E4F6FC;
  border:1.5px solid #BEE7F4;
  border-radius:var(--radius-pill);
  font-weight:700; font-size:.78rem;
  padding:4px 10px;
  max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cal-week-more{ font-weight:800; font-size:.78rem; color:var(--ink-soft); }
.cal-week-none{ color:#D8D0C0; font-weight:800; }

/* Day view */
.cal-day-title{
  width:100%;
  font-family:'Fredoka', sans-serif;
  font-weight:600; font-size:1.2rem;
  margin-bottom:10px;
}
.cal-day-events{ width:100%; }
.cal-event{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--card);
  border:2px solid #F0E9DC;
  border-radius:18px;
  box-shadow:0 3px 0 #F0E9DC;
  padding:12px 14px;
  margin-bottom:8px;
}
.cal-event-time{
  flex:0 0 auto;
  background:#FFF3D6;
  border:1.5px solid #F5DFA1;
  border-radius:var(--radius-pill);
  font-weight:800; font-size:.78rem;
  padding:4px 10px;
  white-space:nowrap;
}
.cal-event-info{ display:flex; flex-direction:column; min-width:0; }
.cal-event-title{ font-weight:800; font-size:.95rem; }
.cal-event-meta{ font-size:.8rem; font-weight:600; color:var(--ink-soft); }

.cal-dot.ext{ background:var(--sky); }
.cal-week-pill.ext{
  background:#FFF3D6;
  border-color:#F5DFA1;
}

/* Imported appointment cards (day view) */
.cal-appt{
  background:var(--card);
  border:2px solid #BEE7F4;
  border-radius:18px;
  box-shadow:0 3px 0 #D8EFF8;
  padding:12px 14px;
  margin-bottom:8px;
}
.cal-appt.busy{ border-style:dashed; }
.cal-appt-top{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:4px;
}
.cal-appt-title{ font-weight:800; font-size:.95rem; }
.cal-appt-repeat{
  font-size:.72rem; font-weight:800;
  background:#F3EFFB; border:1.5px solid #DED3F2; color:#7A5FB8;
  border-radius:var(--radius-pill);
  padding:3px 9px;
}
.cal-appt-meta{
  font-size:.8rem; font-weight:600; color:var(--ink-soft);
  margin-bottom:2px;
  overflow-wrap:anywhere;
}
.cal-appt-desc{
  font-size:.88rem; color:var(--ink-soft); line-height:1.45;
  white-space:pre-line;
  margin:6px 0 2px;
  overflow-wrap:anywhere;
}
.cal-appt-priv{
  display:flex; align-items:center; gap:8px;
  margin-top:8px;
  font-size:.8rem; font-weight:800;
}
.cal-appt-priv select{
  font-family:'Nunito', sans-serif;
  font-weight:700; font-size:.82rem;
  color:var(--ink);
  background:var(--paper);
  border:2px solid #EFE7D8;
  border-radius:12px;
  padding:5px 8px;
}

.cal-day-sub{
  font-family:'Fredoka', sans-serif;
  font-weight:600; font-size:1rem;
  color:var(--ink-soft);
  margin:10px 0 8px;
  width:100%;
}

/* Synced calendar source rows in the sheet */
.src-row{
  display:flex; align-items:center; gap:8px;
  border:2px solid #F0E9DC;
  border-radius:16px;
  padding:10px 12px;
  margin-bottom:8px;
}
.src-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.src-name{
  font-weight:800; font-size:.88rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.src-sub{ font-size:.75rem; font-weight:600; color:var(--ink-soft); }
.src-row .act-btn.danger{ margin-left:0; padding:7px 10px; }

/* Custom time dropdowns (hours 00–23, minutes 00/15/30/45) */
.time-pair{
  display:inline-flex; align-items:center; gap:3px;
}
.time-pair b{ font-weight:800; color:var(--ink-soft); }

.tsel{ position:relative; }
.tsel-btn{
  font-family:'Nunito', sans-serif;
  font-weight:800; font-size:.95rem;
  color:var(--ink);
  background:var(--paper);
  border:2px solid #EFE7D8;
  border-radius:12px;
  padding:9px 0;
  width:56px;
  text-align:center;
  cursor:pointer;
}
.tsel-btn[aria-expanded="true"]{
  border-color:var(--sky);
  box-shadow:0 0 0 3px rgba(91,200,232,.25);
}
.tsel-btn:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

.tsel-list{
  position:absolute;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  z-index:30;
  width:64px;
  max-height:186px;
  overflow-y:auto;
  background:var(--card);
  border:2px solid #F0E9DC;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(46,42,51,.16);
  padding:4px;
}
.tsel-opt{
  padding:8px 0;
  text-align:center;
  border-radius:9px;
  font-weight:800; font-size:.92rem;
  color:var(--ink);
  cursor:pointer;
}
.tsel-opt:hover{ background:var(--paper); }
.tsel-opt.sel{
  background:var(--sun);
  color:var(--ink);
}
.time-colon{
  font-weight:800;
  margin:0 -6px;      /* pull the HH : MM pair together */
}

/* Shift pattern colour dot (sheet list) — tap to change colour */
.shift-dot-wrap{ position:relative; flex-shrink:0; display:flex; }
.shift-dot{
  width:18px; height:18px;
  border-radius:50%;
  border:2px solid rgba(46,42,51,.14);
  padding:0;
  cursor:pointer;
  flex-shrink:0;
}
.shift-dot:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

/* Colour picker grid */
.cpick{
  position:absolute;
  top:calc(100% + 8px);
  left:-6px;
  z-index:40;
  display:grid;
  grid-template-columns:repeat(4, 24px);
  gap:7px;
  background:var(--card);
  border:2px solid #F0E9DC;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(46,42,51,.18);
  padding:9px;
}
.cpick-swatch{
  width:24px; height:24px;
  border-radius:50%;
  border:2px solid rgba(46,42,51,.12);
  padding:0;
  cursor:pointer;
}
.cpick-swatch.sel{
  border-color:var(--ink);
  box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}
.cpick-swatch:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

/* Assign mode banner */
.assign-banner{
  display:none; align-items:center; gap:10px;
  width:100%;
  background:var(--card);
  border:2px solid #F0E9DC;
  border-radius:16px;
  box-shadow:0 3px 0 #EFE7D8;
  padding:10px 12px;
  margin-bottom:10px;
}
.assign-dot{
  width:14px; height:14px;
  border-radius:50%;
  flex-shrink:0;
}
.assign-text{
  flex:1; min-width:0;
  font-size:.85rem; font-weight:800;
  color:var(--ink);
}
.assign-banner:not([hidden]){ display:flex; }
.assign-banner .act-btn{ flex-shrink:0; }

/* Shift bars in month cells */
.cal-shift-bars{
  display:flex; flex-direction:column; gap:2px;
  width:80%;
  margin-top:2px;
}
.cal-shift-bar{
  height:3px;
  border-radius:2px;
}

/* Shift pills in week rows */
.cal-week-pill.shift{
  background:var(--card);
  display:inline-flex; align-items:center; gap:5px;
}
.cal-pill-dot{
  width:8px; height:8px;
  border-radius:50%;
  flex-shrink:0;
}

/* Shift colour dot in day-view bands */
.cal-band-dot{
  width:11px; height:11px;
  border-radius:50%;
  flex-shrink:0;
}

/* Schedule bands (day view) */
.cal-bands{ width:100%; margin-bottom:10px; }
.cal-band{
  display:flex; align-items:center; gap:10px;
  border-radius:14px;
  padding:8px 12px;
  margin-bottom:6px;
  font-size:.85rem; font-weight:700;
}
.cal-band.blocked{
  background:#FDEDEA;
  border:1.5px dashed #F0B9B3;
  color:#B4453C;
}
.cal-band.preferred{
  background:#E7F7EE;
  border:1.5px solid #BFE7CF;
  color:#2F7A4F;
}
.cal-band-time{
  font-weight:800; font-size:.78rem;
  white-space:nowrap;
}
.cal-band-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Header bell with unseen badge */
.bell-link{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  color:var(--ink-soft);
}
.bell-link svg{ width:21px; height:21px; }
.bell-link:hover{ color:var(--ink); }
.bell-link:focus-visible{ outline:2px solid var(--sky); }
.bell-badge{
  position:absolute;
  top:-2px; right:-4px;
  min-width:17px; height:17px;
  padding:0 4px;
  border-radius:var(--radius-pill);
  background:var(--coral);
  border:2px solid var(--paper);
  color:#fff;
  font-family:'Nunito', sans-serif;
  font-weight:800; font-size:.64rem;
  line-height:13px;
  text-align:center;
}

/* Notification rows */
.notif-row{
  display:flex; align-items:baseline; gap:10px;
  background:var(--card);
  border:2px solid #F0E9DC;
  border-radius:16px;
  box-shadow:0 3px 0 #EFE7D8;
  padding:12px 14px;
  margin-bottom:8px;
  text-decoration:none;
  color:var(--ink);
}
.notif-row.unseen{
  background:#FFF8E3;
  border-color:#F5DFA1;
}
.notif-msg{
  flex:1; min-width:0;
  font-weight:700; font-size:.92rem;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.notif-time{
  flex-shrink:0;
  font-size:.75rem; font-weight:700;
  color:var(--ink-soft);
}

/* Birthday markers on the calendar */
.cal-dot.bday{ background:#F48FB1; }
.cal-week-pill.bday{
  background:#FDEFF5;
  border-color:#F3C4D6;
}
.cal-bday{
  display:block;
  background:#FDEFF5;
  border:2px solid #F3C4D6;
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:6px;
  font-size:.9rem; font-weight:800;
  color:#B4527D;
  text-decoration:none;
}

/* Flash highlight when a notification deep-links to an activity */
.card.flash{
  animation:cardFlash 2.4s ease;
}
@keyframes cardFlash{
  0%, 55%{ box-shadow:0 0 0 3px var(--sun), 0 4px 0 #F0E9DC; }
  100%{ box-shadow:0 4px 0 #F0E9DC; }
}

/* Friend controls on a friend's profile */
.friend-controls{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:10px;
}

/* Link to the rejected list (address book) */
.rejected-link{
  display:block;
  text-align:center;
  margin:14px auto 4px;
  font-size:.85rem; font-weight:800;
  color:var(--ink-soft);
  text-decoration:none;
}
.rejected-link:hover{ color:var(--sky); }

/* Meet up cards */
.mu-cancelled{ opacity:.62; }
.mu-desc{
  font-size:.92rem; color:var(--ink-soft); line-height:1.5;
  margin:8px 0 4px;
  overflow-wrap:anywhere;
}
.mu-sub{
  font-size:.8rem; font-weight:700; color:var(--ink-soft);
  margin-bottom:8px;
}
.mu-people{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:8px;
}

/* Q&A — minimise / expand */
.mu-qa{ margin-top:6px; }
.mu-qa-title{
  font-family:'Fredoka', sans-serif;
  font-weight:600; font-size:.95rem;
  margin-bottom:6px;
}
.mu-q{ margin-bottom:6px; }
.mu-q-btn{
  display:flex; align-items:center; gap:8px;
  width:100%;
  text-align:left;
  background:var(--paper);
  border:2px solid #EFE7D8;
  border-radius:12px;
  padding:9px 12px;
  font-family:'Nunito', sans-serif;
  font-weight:700; font-size:.88rem;
  color:var(--ink);
  cursor:pointer;
}
.mu-q-btn[aria-expanded="true"]{ border-color:var(--sun); }
.mu-q-text{ flex:1; min-width:0; overflow-wrap:anywhere; }
.mu-q-badge{
  flex-shrink:0;
  font-size:.7rem; font-weight:800;
  color:var(--ink-soft);
}
.mu-q-body{
  padding:8px 12px 4px;
}
.mu-q-asker{
  font-size:.74rem; font-weight:700; color:var(--ink-soft);
  margin-bottom:4px;
}
.mu-q-answer{
  font-size:.88rem; line-height:1.5;
  overflow-wrap:anywhere;
}
.mu-ask-row{
  display:flex; gap:8px; align-items:center;
  margin-top:8px;
}
.mu-ask-input{
  flex:1; min-width:0;
  font-size:.9rem;
  border-radius:12px;
  padding:9px 12px;
}

/* Invite participants: search + selected list */
.invite-search-wrap{ position:relative; }
.invite-results{
  position:absolute;
  top:calc(100% + 4px);
  left:0; right:0;
  z-index:30;
  background:var(--card);
  border:2px solid #F0E9DC;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(46,42,51,.16);
  padding:4px;
  max-height:220px;
  overflow-y:auto;
}
.invite-result{
  padding:10px 12px;
  border-radius:10px;
  font-weight:700; font-size:.92rem;
  cursor:pointer;
}
.invite-result:hover{ background:var(--paper); color:var(--coral); }
.invite-row{
  display:flex; align-items:center; gap:8px;
  border:2px solid #F0E9DC;
  border-radius:14px;
  padding:8px 12px;
  margin-top:8px;
}
.invite-name{
  flex:1; min-width:0;
  font-weight:800; font-size:.9rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.invite-row .act-btn.danger{ padding:6px 10px; }
.suggest-slot{
  display:block;
  width:100%;
  text-align:left;
  margin-bottom:6px;
}

/* Meet up status chips */
.chip.mu-status.organising{ background:#FFF3D6; border-color:#F5DFA1; }
.chip.mu-status.scheduled{ background:#E3F4FB; border-color:#BEE7F4; }
.chip.mu-status.completed{ background:#E7F7EE; border-color:#BFE7CF; }
.chip.mu-status.memory{ background:#F3EFFB; border-color:#DED3F2; }
.chip.mu-status.cancelled{ background:#FDEDEA; border-color:#F0B9B3; }

/* Meet ups on the calendar */
.cal-dot.mu{ background:var(--coral); outline:1.5px solid #E85A4D; }
.cal-week-pill.mu{
  background:#FFE9E6;
  border-color:#F7C2BB;
}
.cal-meetup{
  display:block;
  background:#FFE9E6;
  border:2px solid #F7C2BB;
  border-radius:14px;
  padding:10px 12px;
  margin-bottom:6px;
  font-size:.9rem; font-weight:800;
  color:#B4453C;
  text-decoration:none;
  overflow-wrap:anywhere;
}

/* End comments + memory cards */
.mu-comment{
  font-size:.88rem; line-height:1.5;
  margin-bottom:4px;
  overflow-wrap:anywhere;
}
.memory-card{
  border:2px solid #DED3F2;
  background:#FBFAFE;
  border-radius:16px;
  padding:12px 14px;
  margin-bottom:10px;
}
.memory-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin-bottom:4px;
}
.memory-date{
  font-size:.75rem; font-weight:700; color:var(--ink-soft);
  flex-shrink:0;
}
.memory-meta{ font-size:.85rem; color:var(--ink-soft); margin:2px 0 6px; }
.memory-desc{
  font-size:.88rem; color:var(--ink-soft); line-height:1.5;
  margin-bottom:8px;
  overflow-wrap:anywhere;
}

/* Day-view hour timeline */
.cal-timeline{
  position:relative;
  width:100%;
  background:var(--card);
  border:2px solid #F0E9DC;
  border-radius:16px;
  overflow:hidden;
  margin-bottom:12px;
}
.tl-hour{
  position:absolute;
  left:0; right:0;
  border-top:1px dashed #EFE7D8;
}
.tl-hour-label{
  position:absolute;
  top:2px; left:6px;
  font-size:.64rem; font-weight:800;
  color:var(--ink-soft);
}
.tl-band{
  position:absolute;
  left:0; right:0;
  padding:2px 8px 2px 52px;
  pointer-events:none;
}
.tl-band.blocked{
  background:rgba(240,185,179,.28);
  border-left:4px solid #E8998F;
}
.tl-band.preferred{
  background:rgba(191,231,207,.30);
  border-left:4px solid #7ED09B;
}
.tl-band-label{
  font-size:.68rem; font-weight:800;
  color:var(--ink-soft);
}
.tl-item{
  position:absolute;
  left:52px; right:8px;
  border-radius:10px;
  padding:3px 9px;
  font-size:.76rem; font-weight:800;
  overflow:hidden;
  text-decoration:none;
}
.tl-item.appt{
  background:#E3F4FB;
  border:2px solid #BEE7F4;
  color:#2E6F86;
}
.tl-item.meetup{
  background:#FFE9E6;
  border:2px solid #F7C2BB;
  color:#B4453C;
  z-index:2;
}
/* Completed / memory meet ups stay on the calendar in a calm
   "done" green instead of vanishing. */
/* ---- Day & time picker (month calendar → day view) --------------------- */
.avail-sheet{ max-width:560px; }
.avail-note{ font-size:.85rem; color:var(--ink-soft); margin:4px 0 10px; }
.avail-body{ min-height:220px; }
.avm-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.avm-head strong{ font-size:1rem; }
.avm-grid{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;
  background:var(--paper); border:1.5px solid #EFE7D8;
  border-radius:12px; padding:8px;
}
.avm-dow{
  font-size:.7rem; font-weight:800; color:var(--ink-soft);
  text-align:center; padding:2px 0;
}
.avm-day{
  border:none; border-radius:8px; min-height:34px;
  font-size:.82rem; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:inherit;
}
.avm-day.green { background:#CDEBD6; color:#2F6B3F; }
.avm-day.green:hover{ background:#A9DDBA; }
.avm-day.amber { background:#FBEBC8; color:#8A6A2B; }
.avm-day.amber:hover{ background:#F5DFA1; }
.avm-day.red   { background:#F8DCD8; color:#A2453C; }
.avm-day.red:hover{ background:#F3C6C0; }
.avm-day.past  { background:transparent; color:#C9C0B0; cursor:default; }
.avm-day.blank { background:transparent; cursor:default; }
.avm-day.demo{ width:22px; height:18px; min-height:18px; display:inline-block; }
.avd-list{ display:flex; flex-direction:column; gap:5px; margin-top:10px;
  max-height:46vh; overflow-y:auto; }
.avd-row{
  display:flex; align-items:center; justify-content:space-between;
  border:none; border-radius:10px; padding:10px 14px;
  font-size:.88rem; cursor:pointer; font-family:inherit; text-align:left;
}
.avd-row.green { background:#CDEBD6; color:#2F6B3F; }
.avd-row.green:hover{ background:#A9DDBA; }
.avd-row.amber { background:#FBEBC8; color:#8A6A2B; }
.avd-row.amber:hover{ background:#F5DFA1; }
.avd-row.red   { background:#F2EDE4; color:#B9AE9C; cursor:not-allowed; }
.avd-free{ font-size:.75rem; font-weight:700; }
.avail-legend{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin:10px 0 4px; font-size:.75rem; color:var(--ink-soft);
}
.avail-legend-item{ display:inline-flex; align-items:center; gap:5px; }
.avm-day{ position:relative; flex-direction:column; gap:0; }
.avm-heart{ font-size:.55rem; line-height:1; margin-top:-2px; }
.avail-selected{ margin-top:10px; }
.avail-selected-title{
  font-weight:800; font-size:.85rem; margin:0 0 6px;
}
.avtf-sheet{ max-width:420px; }
.avtf-list{ display:flex; flex-direction:column; gap:8px; margin:10px 0 12px; }
.avtf-choice{ width:100%; justify-content:flex-start; text-align:left; }

/* Settings: timeframe editor rows */
.tf-row{
  display:flex; gap:8px; align-items:center; margin-bottom:8px;
}
.tf-row .tf-name{ flex:1; min-width:0; }
.tf-row input[type="time"]{ width:104px; flex:0 0 auto; }

/* ---- Optional-details bar: ＋ a field to add it ------------------------ */
.optional-bar{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin:6px 0 10px;
}
.optional-bar-label{
  font-weight:800; font-size:.85rem; margin-right:4px;
}
/* Same border as .act-btn, so these sit with the other buttons in the
   sheet rather than looking like a different kind of control. The dash
   was meant to say "optional" and only read as heavier. */
.opt-add{
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 12px; border-radius:var(--radius-pill);
  background:var(--paper); border:2px solid #EFE7D8;
  font-family:'Nunito', sans-serif; font-weight:800; font-size:.8rem;
  color:var(--ink); cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.opt-add:hover{ background:#F6F1E6; border-color:#E4DACA; }
.opt-add:active{ transform:scale(.95); }
/* Chosen: the sun fill carries it, the same way .act-btn.active does. */
.opt-add.on{
  background:#FFF3D6; border-color:var(--sun);
}
.optional-fields{ }
.daytime-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }

.cal-week-pill.mu.done{ background:#E9F4EC; border-color:#BFDCC8; color:#4C7A57; }
.cal-dot.mu.done{ background:#7FB08C; }
.tl-item.meetup.done{
  background:#E9F4EC;
  border:2px solid #BFDCC8;
  color:#4C7A57;
}

/* Suggested times grouped by day */
.suggest-days{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:8px;
}
.suggest-times{ margin-bottom:6px; }

/* Poll options in Q&A */
.poll-opt{
  display:block;
  width:100%;
  text-align:left;
  margin-bottom:5px;
}


/* Manual sign-in on the login card */
.manual-divider{
  display:flex; align-items:center; gap:10px;
  margin:16px 0 12px;
  color:var(--ink-soft);
  font-size:.78rem; font-weight:800;
}
.manual-divider::before,
.manual-divider::after{
  content:''; flex:1; height:2px;
  background:#F0E9DC; border-radius:2px;
}
.manual-auth .field{ margin-bottom:10px; }
.manual-auth input{ width:100%; font-size:.95rem; }
.link-btn{
  display:block;
  margin:10px auto 0;
  background:none; border:none;
  font-family:'Nunito', sans-serif;
  font-size:.82rem; font-weight:800;
  color:var(--ink-soft);
  cursor:pointer;
  text-decoration:underline;
}
.link-btn:hover{ color:var(--sky); }


/* Business page: hours grid + category picker */
/* Business profile: logo slot */
.biz-logo-row{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center;
}
.biz-logo-row .hint{ margin:0; }
.biz-logo-row .hint:empty{ display:none; }
.biz-logo{
  width:120px; height:120px; flex:0 0 auto;
  border-radius:24px; overflow:visible;
  background:var(--paper); border:1.5px solid #EFE7D8;
  display:flex; align-items:center; justify-content:center;
  position:relative; padding:0; cursor:pointer;
}
.biz-logo img{ border-radius:22px; }
.biz-logo-initial{ font-size:3rem !important; }
.biz-logo img{ width:100%; height:100%; object-fit:cover; }
.biz-logo-initial{
  font-family:'Fredoka',sans-serif; font-weight:700;
  font-size:1.8rem; color:var(--ink-soft);
}

/* Business profile: the Status field */
.biz-status{
  display:inline-flex; align-items:center;
  font-weight:800; font-size:.92rem;
  padding:7px 14px; border-radius:var(--radius-pill);
  margin:0 0 4px;
}
.biz-status.pending { background:#FDF2E3; border:1.5px solid #F3D9AE; color:#8A6A2B; }
.biz-status.verified{ background:#E9F4EC; border:1.5px solid #BFDCC8; color:#4C7A57; }
.biz-status.rejected{ background:#FBE7E4; border:1.5px solid #F0C3BC; color:#A2453C; }

.hours-row{
  display:flex; align-items:center; gap:8px;
  margin-bottom:6px;
}
.hours-day{
  width:86px; flex-shrink:0;
  font-size:.85rem; font-weight:800;
}
.hours-row input[type="time"],
.hours-row .hours-sel{
  font-size:.85rem; font-weight:700;
  border-radius:12px;
  padding:6px 10px;
}
.hours-row .hours-sel{ width:auto; min-width:88px; }
.hours-row input[type="time"]:disabled,
.hours-row .hours-sel:disabled{ opacity:.4; }
.catpick-group{ margin-bottom:8px; }
.catpick-subs{
  display:flex; flex-wrap:wrap; gap:5px;
  margin:6px 0 0 12px;
}
.act-btn.small{ padding:5px 10px; font-size:.76rem; }

.catpick-label{
  font-size:.78rem; font-weight:800;
  color:var(--ink-soft);
  margin:8px 0 2px;
}


/* Photos */
.card-photo{
  display:block;
  width:100%;
  max-height:280px;
  object-fit:cover;
  border-radius:14px;
  border:2px solid #F0E9DC;
  margin:8px 0;
}
.photo-grid{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:8px 0;
}
.photo-grid a{
  position:relative;
  display:block;
  width:86px; height:86px;
  border-radius:12px;
  overflow:hidden;
  border:2px solid #F0E9DC;
}
.photo-grid img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.photo-del{
  position:absolute;
  top:2px; right:2px;
  width:22px; height:22px;
  border-radius:50%;
  border:none;
  background:rgba(46,42,51,.72);
  color:#fff;
  font-size:.7rem; font-weight:800;
  cursor:pointer;
  line-height:1;
}
.photo-del:hover{ background:var(--coral); }


/* Event picture inside the activity sheet — square, thumbnail-shaped */
.sheet-photo{
  display:block;
  width:200px;
  max-width:100%;
  height:200px;
  border-radius:14px;
  border:2px dashed #E4DAC8;
  background:var(--paper);
  overflow:hidden;
  position:relative;
  font-family:'Nunito', sans-serif;
  font-size:.85rem; font-weight:800;
  color:var(--ink-soft);
}
.sheet-photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* Photo upload buttons sit on their own line (sheet thumbnail excepted) */
.photo-pick{
  display:block;
  width:100%;
  margin-top:8px;
}

/* Photo library picker (re-use uploaded photos) */
.plib{ max-height:80vh; overflow-y:auto; }
.plib-item{
  width:86px; height:86px;
  padding:0;
  border-radius:12px;
  border:2px solid #F0E9DC;
  overflow:hidden;
  background:var(--paper);
}
.plib-item img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.plib-item:hover{ border-color:var(--sky); }

/* ---- Map page --------------------------------------------------- */
.map-main{ padding-left:0; padding-right:0; }
.map-main{ width:100%; }
.map-wrap{
  position:relative;
  width:100%;            /* main is a centred flex column — without this
                            the wrap shrinks to zero and Leaflet sizes to it */
  align-self:stretch;
  height:calc(100vh - 190px);   /* fallback for browsers without dvh */
  height:calc(100dvh - 190px);
  min-height:340px;
  border-radius:18px;
  overflow:hidden;
  border:2px solid #F0E9DC;
  margin:0 10px;
}
#map{ width:100%; height:100%; }
.map-ctl{
  position:absolute;
  right:10px;
  z-index:800;
  width:44px; height:44px;
  border-radius:50%;
  border:2px solid #F0E9DC;
  background:var(--card);
  font-size:1.2rem;
  box-shadow:0 3px 0 #EFE7D8;
}
.map-ctl-locate{ top:10px; }
.map-ctl-filter{ top:62px; }
.map-filter{
  position:absolute;
  top:10px; left:10px;
  z-index:800;
  width:min(280px, calc(100% - 80px));
  background:var(--card);
  border:2px solid #F0E9DC;
  border-radius:16px;
  box-shadow:0 4px 0 #EFE7D8;
  padding:12px;
}
.map-kinds{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
/* Item pins are now full SVGs (the YuMiHere pin from icons.js) —
   no bubble behind them, just a soft drop shadow. */
.map-pin{
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; box-shadow:none;
  font-size:1.05rem;
}
.map-pin svg{
  width:100%; height:100%;
  filter:drop-shadow(0 2px 3px rgba(46,42,51,.35));
}
/* The "you are here" marker keeps the old round bubble look
   (the search marker is a proper pin now). */
.map-pin-me{
  background:var(--card);
  border:2px solid var(--coral);
  border-radius:50% 50% 50% 4px;
  box-shadow:0 2px 4px rgba(46,42,51,.25);
}
.map-pin-me{ border-color:#2F9A5D; border-radius:50%; }
.loc-toggle{
  border:none; background:none;
  font-size:.8rem; color:var(--sky);
  padding:0 4px; margin-left:4px;
  vertical-align:middle;
}
.loc-detail{
  margin-top:8px;
  padding:10px;
  background:rgba(91,200,232,.06);
  border:2px solid #EAF6FB;
  border-radius:12px;
}
/* leaflet-search when embedded in the filter panel */
.leaflet-popup-content{ font-family:'Nunito', sans-serif; font-weight:600; }

/* Location picker (feed / meet up sheets) */
.loc-results{
  display:flex; flex-direction:column; gap:4px;
  margin-top:6px;
  max-height:260px; overflow-y:auto;
  background:var(--card);
  border-radius:12px;
  padding:4px;
  box-shadow:0 4px 12px rgba(46,42,51,.12);
}
.loc-result{
  display:flex; flex-direction:column; align-items:flex-start;
  text-align:left;
  background:var(--paper);
  border:2px solid #EFE7D8;
  border-radius:12px;
  padding:8px 12px;
}
.loc-result:hover{ border-color:var(--sky); }
.loc-link{ text-decoration:none; }
.loc-link:hover{ text-decoration:underline; color:var(--sky); }

/* Icon image files (see icons.html → "How to change an icon"):
   registry entries that point at files in /icons/ render as <img>
   and get sized to sit like an emoji would. */
img.icon-img, [data-icon] img{
  width:1.15em; height:1.15em;
  vertical-align:-0.2em;
  object-fit:contain;
}

/* ---- Accessibility (all pages) --------------------------------- */

@media (prefers-reduced-motion: reduce){
  .pin, .pin-shadow, .blob, .card{ animation:none; }
  .btn{ transition:none; }
  .sheet, .sheet-backdrop{ transition:none; }
}

/* Settings section switcher */
/* The Settings and Address book section switches follow the calendar's
   Day / Week / Month bar: full width, thinner, card background. */
.settings-switch{
  width:100%;
  margin-bottom:14px;
  background:var(--card);
}
.settings-switch button{
  padding:8px 0;
  font-size:.88rem;
}

/* ---- Feedback rating scale ------------------------------------ */
.rating-scale{
  display:flex; justify-content:space-between;
  font-size:.8rem; color:var(--ink-soft);
  margin-top:4px;
}
input[type="range"]{ width:100%; accent-color:var(--coral); }

/* ---- Checkbox row (e.g. close-activity choice) ---------------- */
.checkbox-row{
  display:flex; align-items:flex-start; gap:10px;
  cursor:pointer; font-size:.95rem;
}
.checkbox-row input[type="checkbox"]{
  width:20px; height:20px; margin-top:2px;
  accent-color:var(--coral); flex:0 0 auto;
}

/* ---- Relationship milestones ---------------------------------- */
.ms-form{
  background:rgba(91,200,232,.06);
  border:2px solid #EAF6FB;
  border-radius:14px;
  padding:12px;
  margin-bottom:14px;
}
.ms-form-title{
  font-family:'Fredoka', sans-serif;
  font-size:1rem; margin:0 0 8px;
}
.ms-form label{
  display:block;
  font-size:.85rem; font-weight:700;
  color:var(--ink-soft);
  margin:8px 0 4px;
}
.ms-form .checkbox-row{ margin-top:10px; font-weight:400; }
.ms-form .btn{ margin-top:12px; }

.ms-list{ display:flex; flex-direction:column; gap:10px; }
.ms-row{
  border-left:4px solid var(--coral);
  background:var(--paper);
  border-radius:0 12px 12px 0;
  padding:10px 12px;
}
.ms-row.ms-auto{ border-left-color:var(--sun); }
.ms-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.ms-title{ font-family:'Fredoka', sans-serif; }
.ms-date{ font-size:.85rem; color:var(--ink-soft); white-space:nowrap; }
.ms-sub{ font-size:.8rem; color:var(--ink-soft); margin:2px 0 0; }
.ms-actions{ display:flex; gap:6px; margin-top:8px; justify-content:flex-end; }
.ms-actions .act-btn{ font-size:.8rem; padding:4px 10px; }

/* ---- Annual calendar buttons (anniversary / birthday) --------- */
.ms-cal-btn{ margin-left:auto; }
.ms-actions .act-btn.active,
.act-btn.ms-cal-btn.active{
  background:var(--sun); border-color:var(--sun);
}

/* ---- Icon buttons (milestone actions) -------------------------- */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  border:2px solid #EFE7D8;
  background:var(--card);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.icon-btn:hover{ transform:translateY(-1px); border-color:var(--sky); }
.icon-btn:active{ transform:translateY(0); }
.icon-btn.active{ background:var(--sun); border-color:var(--sun); }
.icon-btn.danger:hover{ border-color:var(--coral); }
.icon-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---- Clickable profile picture (own profile) ------------------- */
.profile-avatar.is-editable{ position:relative; cursor:pointer; }
.profile-avatar.is-editable:hover{ filter:brightness(.94); }
.profile-avatar.is-editable:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.avatar-edit{
  position:absolute; right:-2px; bottom:-2px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:var(--card);
  border:2px solid #EFE7D8;
  border-radius:50%;
  font-size:.8rem;
  pointer-events:none;
}

/* ---- Relationship status from the address book ----------------- */
.rel-derived{ display:flex; flex-direction:column; gap:2px; }
.rel-partner{ font-weight:700; color:var(--ink); text-decoration:none; }
.rel-partner:hover{ text-decoration:underline; }

/* ---- Location picker inside a profile field row ---------------- */
.field-control.loc-field{ position:relative; flex-wrap:wrap; }
.field-control.loc-field .loc-results{
  position:absolute; top:100%; left:0; right:0; z-index:30;
  margin-top:4px;
}

/* ---- Locked-behind-a-subscription notice ----------------------- */
.locked-note{
  margin:10px 0 0;
  padding:12px 14px;
  border:2px dashed #EFE7D8;
  border-radius:16px;
  background:var(--paper);
  color:var(--ink-soft);
  font-size:.88rem; font-weight:600; line-height:1.45;
}

/* ---- Plan comparison table ------------------------------------- */
.plan-table-wrap{ overflow-x:auto; margin:14px 0; -webkit-overflow-scrolling:touch; }
.plan-table{
  width:100%; min-width:0;
  border-collapse:separate; border-spacing:0;
  font-size:.85rem;
}
.plan-table th, .plan-table td{
  padding:9px 4px; text-align:center;
  border-bottom:2px solid #F4EEE1;
}
.plan-rowhead{
  text-align:left !important;
  font-weight:700; color:var(--ink-soft);
  /* "Activity posts" and "Team accounts" wrap to two lines here rather
     than forcing the whole table wider than the screen. */
  white-space:normal;
  width:1%;
  max-width:5.5em;
  line-height:1.25;
  hyphens:none;
}
.plan-col{
  cursor:pointer;
  border-top:3px solid transparent;
  border-radius:14px 14px 0 0;
  transition:background .12s ease, border-color .12s ease;
}
.plan-col:hover{ background:#FFF8E8; }
.plan-col:focus-visible{ outline:2px solid var(--sky); outline-offset:-2px; }
.plan-col.sel{ background:#FFF3F1; border-top-color:var(--coral); }
.plan-col .plan-name{
  display:block;
  font-family:'Fredoka', sans-serif;
  font-size:.95rem; font-weight:600;
  /* Three plan names across a phone is tight. Wrapping is better than
     pushing the table wider than the screen, which is what forced the
     price out of its box. */
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.2;
}
.plan-col .plan-price{
  display:block;
  font-size:.78rem; font-weight:800; color:var(--coral);
  margin-top:2px;
  /* "£9.99 / month" breaks at the slash rather than overflowing. */
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.2;
}
/* The header cells themselves need to give, or their contents cannot. */
.plan-table th{
  overflow:hidden;
  padding-left:4px; padding-right:4px;
}
.plan-table{ table-layout:fixed; width:100%; }
.plan-cell{ cursor:pointer; font-weight:600; }
.plan-cell.sel{ background:#FFF3F1; }
.plan-table tbody tr:last-child .plan-cell.sel{ border-radius:0 0 14px 14px; }

/* ---- Opening hours: hour + minute pair -------------------------- */
.hours-time{ display:inline-flex; align-items:center; gap:1px; min-width:0; }
/* Just wide enough for two digits plus the native dropdown arrow, so a
   whole day row (label + open + close + button) fits a phone screen. */
.hours-time .hours-sel{
  padding:8px 2px 8px 6px;
  min-width:0; width:3.4em;
  font-size:.9rem;
  text-align:center; text-align-last:center;
  border-radius:12px;
}
.hours-colon{ font-weight:800; color:var(--ink-soft); font-size:.9rem; }
.hours-row{ flex-wrap:nowrap; gap:4px; }
/* Overrides the fixed 86px above so the day name gives up space first. */
.hours-row .hours-day{
  width:auto; flex:1 1 4.5em; min-width:0;
  font-size:.84rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hours-row .act-btn{ padding:6px 10px; font-size:.78rem; white-space:nowrap; }

/* ---- Profile preview sheet -------------------------------------- */
.pv-sheet{ max-height:86vh; overflow-y:auto; }
.pv-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pv-body{ margin-top:14px; }
.pv-head{ display:flex; align-items:center; gap:14px; }
.pv-logo{
  width:72px; height:72px; flex:0 0 auto;
  border-radius:20px; object-fit:cover;
  border:2px solid #EFE7D8; background:var(--card);
}
.pv-logo-ph{ display:flex; align-items:center; justify-content:center; font-size:1.9rem; }
.pv-headtext{ min-width:0; }
.pv-name{ font-size:1.15rem; margin:0; }
.pv-sub{ font-size:.85rem; color:var(--ink-soft); margin:2px 0 0; }
.pv-desc{ margin:12px 0 0; line-height:1.5; }
.pv-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.pv-h4{
  font-family:'Fredoka', sans-serif; font-size:.95rem;
  margin:16px 0 6px; color:var(--ink);
}
.pv-row{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:.88rem; }
.pv-label{ color:var(--ink-soft); font-weight:700; }
.pv-value{ text-align:right; }
.pv-icons{ display:flex; flex-wrap:wrap; gap:8px; }
.pv-icon{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #EFE7D8; border-radius:50%;
  background:var(--card); text-decoration:none;
  font-size:1.05rem; color:var(--ink);
  transition:border-color .12s ease, transform .12s ease;
}
.pv-icon:hover{ border-color:var(--sky); transform:translateY(-1px); }
.pv-access{ margin:0; padding-left:18px; font-size:.88rem; line-height:1.6; }

/* ---- Secondary button, paired under a primary one --------------- */
.btn-ghost{
  background:var(--card);
  border:2px solid #EFE7D8;
  color:var(--ink);
  margin-top:10px;
}
.btn-ghost:hover{ border-color:var(--sky); }
.btn-ghost:active{ box-shadow:0 1px 0 #EAE4D8; }

/* ---- Status row inside the plan table --------------------------- */
.plan-cell.plan-status{ font-size:.78rem; font-weight:700; color:var(--ink-soft); }
.plan-cell.plan-status.is-current{ color:#2F9A5D; }

/* ---- Clickable location in the profile preview ------------------ */
.pv-loc{ color:var(--sky); text-decoration:none; font-weight:700; }
.pv-loc:hover{ text-decoration:underline; }
.pv-loc:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; border-radius:6px; }

/* ---- Admin queue headings --------------------------------------- */
.admin-qh{
  font-family:'Fredoka', sans-serif;
  font-size:1rem; margin:18px 0 8px;
  color:var(--ink-soft);
}

/* ---- Awaiting-approval chip (venues, pending rename) ------------- */
.pending-chip{
  display:inline-block; margin-left:8px;
  padding:2px 9px; border-radius:999px;
  background:#FFF3D6; color:#8A6A12;
  font-size:.72rem; font-weight:800;
}

/* A paying tier reads as a badge rather than a status word. */
.biz-status.paid{
  background:#EFE6F7; color:#5C3D7A; border-color:#D9C6EA;
}

/* Icon-only button: square, so a single glyph sits centred. */
.act-btn.icon-btn{
  padding:0; width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem; line-height:1;
}

/* ---- Business settings panel ------------------------------------ */
.set-h3{
  font-family:'Fredoka', sans-serif;
  font-size:1rem; margin:20px 0 6px;
}
.set-h3:first-of-type{ margin-top:8px; }

/* ---- Business header: reuses .profile-head from the profile page --- */
#bizHead .profile-avatar{
  padding:0; border:none; background:none;
  display:block;
}
#bizHead .profile-name{ margin:0; }
/* Empty hints shouldn't leave a gap under the name. */
#bizHead .hint:empty{ display:none; }
#bizHead .hint{ margin:2px 0 0; max-width:32ch; }
#bizHead .icon-btn{ margin-top:8px; }
.biz-status.paid{ font-weight:800; }

/* ---- Check-in QR sheet ------------------------------------------ */
.qr-sheet{ max-height:86vh; overflow-y:auto; }
.qr-box{
  display:flex; justify-content:center;
  padding:14px; margin:12px 0;
  background:#FFFFFF;          /* scanners want a plain white quiet zone */
  border:2px solid #EFE7D8; border-radius:18px;
}
.qr-box svg{ max-width:100%; height:auto; }
.qr-count{ font-weight:800; margin:0 0 8px; text-align:center; }
.qr-list{ max-height:34vh; overflow-y:auto; }
.checkin-h1{ font-family:'Fredoka', sans-serif; font-size:1.35rem; margin:0 0 8px; }

/* Invite QR on the address book, same white surround. */
.invite-qr svg{ display:block; max-width:100%; height:auto; }

/* ---- Business analytics ----------------------------------------- */
.an-controls{
  display:flex; flex-wrap:wrap; gap:12px;
  margin:12px 0 16px;
}
.an-ctl{ display:flex; flex-direction:column; gap:4px; flex:1 1 150px; min-width:0; }
.an-ctl > span{ font-size:.8rem; font-weight:800; color:var(--ink-soft); }

.an-tiles{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom:8px;
}
.an-tile{
  display:flex; flex-direction:column; gap:2px;
  padding:12px 14px;
  border:2px solid #EFE7D8; border-radius:16px;
  background:var(--paper);
}
.an-tile-v{
  font-family:'Fredoka', sans-serif;
  font-size:1.5rem; font-weight:700; color:var(--ink);
  line-height:1.1;
}
.an-tile-l{ font-size:.8rem; font-weight:700; color:var(--ink-soft); }
.an-tile-s{ font-size:.72rem; color:var(--ink-soft); }

.an-chart{ margin:6px 0 14px; overflow-x:auto; }
.an-chart svg{ display:block; min-width:280px; }
.an-bar{ fill:var(--sky); }
.an-lab{ font-family:'Nunito', sans-serif; font-size:12px; fill:var(--ink-soft); font-weight:700; }
.an-val{ font-family:'Nunito', sans-serif; font-size:12px; fill:var(--ink); font-weight:800; }
.an-host .set-h3{ margin-top:16px; }

/* ---- Likes list (profile) --------------------------------------- */
.like-list{ display:flex; flex-direction:column; gap:10px; }
.like-row{ display:flex; align-items:center; gap:12px; }
.like-logo{
  width:44px; height:44px; flex:0 0 auto;
  border-radius:12px; object-fit:cover;
  border:1.5px solid #EFE7D8; background:var(--paper);
}

/* ---- Review sheet on meet-up completion -------------------------- */
.review-sheet{ max-height:88vh; overflow-y:auto; }
.review-card{ margin-bottom:12px; }
.review-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.review-card textarea{ width:100%; min-height:70px; margin:8px 0; }
.star-row{ display:flex; gap:4px; margin:4px 0 6px; }
.star{
  background:none; border:none; cursor:pointer;
  font-size:1.7rem; line-height:1; padding:2px 4px;
  color:#E4DCCB;
  transition:color .1s ease, transform .1s ease;
}
.star:hover{ transform:scale(1.12); }
.star.on{ color:var(--sun); }
.star:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; border-radius:6px; }

/* ---- Like count in the business header --------------------------- */
.biz-likes{
  margin:2px 0 0;
  font-size:.9rem; font-weight:800;
  color:var(--ink-soft);
}

/* ---- Demographic pies -------------------------------------------- */
.an-pies{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  margin:8px 0 14px;
}
.an-pie{
  border:2px solid #EFE7D8; border-radius:18px;
  background:var(--paper); padding:14px;
}
.an-pie-h{
  font-family:'Fredoka', sans-serif;
  font-size:.95rem; margin:0 0 8px; text-align:center;
}
.an-pie-svg{ display:block; width:100%; max-width:190px; height:auto; margin:0 auto; }
.an-key{ display:flex; flex-direction:column; gap:4px; margin-top:10px; }
.an-key-item{ display:flex; align-items:center; gap:7px; font-size:.8rem; }
.an-key-dot{
  width:12px; height:12px; flex:0 0 auto;
  border-radius:4px; display:inline-block;
}

/* ---- Public business page --------------------------------------- */
#bizLogo img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
#bizHead .card-actions{ justify-content:center; margin-top:10px; }
.review-item{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 0; border-bottom:1px solid #F4EEE1;
}
.review-item:last-child{ border-bottom:none; }
.review-stars{ color:var(--sun); font-size:1rem; letter-spacing:1px; }

/* The location row is the only one whose control grows taller when you
   open it, so it needs its own alignment rules. Everything else keeps
   the centred layout. */
.field-row.loc-row{ align-items:flex-start; }
/* Anchored to the top and nudged down to sit on the input's baseline, so
   the label stays exactly where it is when the panel opens. */
.field-row.loc-row .field-label{
  display:flex; align-items:center; gap:2px;
  padding-top:11px;
}
/* .field-control is a flex ROW, so without wrapping the street/postcode
   panel would sit beside the input instead of under it. */
.field-row.loc-row .field-control{ flex-wrap:wrap; }
.field-row.loc-row .loc-detail{ flex:1 1 100%; margin-top:8px; }
.field-label .loc-toggle{ padding:0 2px; font-size:.85rem; }

/* ---- An icon tucked inside a text field -------------------------- */
/* The field-control is the positioning context; the input gets padding
   so typed text never runs underneath the icon. */
.field-control.has-inline-icon{ position:relative; }
.field-control.has-inline-icon > input{ padding-right:40px; }
.field-control.has-inline-icon > .field-value{ padding-right:40px; }
.inline-field-icon{
  position:absolute; top:0; bottom:0; right:8px;
  display:inline-flex; align-items:center; justify-content:center;
  width:28px;
  font-size:1.05rem; line-height:1;
  text-decoration:none;
  opacity:.75;
  transition:opacity .12s ease, transform .12s ease;
}
.inline-field-icon:hover{ opacity:1; transform:scale(1.08); }
.inline-field-icon:focus-visible{
  outline:2px solid var(--sky); outline-offset:2px; border-radius:8px; opacity:1;
}
/* On the location row the control wraps, so the icon must anchor to the
   input's line rather than the whole (taller) wrapped block. */
/* The wrapper also holds the collapsible address panel, so stretching
   the icon across it centres the icon over input AND panel — which is
   why it sat below the text. Pin it to the input's own line instead.

   The input is 1em of text plus its padding and border. Matching that
   rather than guessing a pixel height keeps it aligned if the font or
   the padding ever changes. */
.field-row.loc-row .field-control.has-inline-icon > .inline-field-icon{
  top:0;
  bottom:auto;
  /* The input is .95rem of text, 7px padding each side and a 2px border
     each side. Derived from those rather than a guessed pixel height, so
     it stays aligned if the padding changes. */
  height:calc(.95rem * 1.4 + 7px * 2 + 2px * 2);
}

/* ---- The default web link on a business ------------------------- */
/* Reads as a state, not a control — no border or hover, so it can't be
   mistaken for something you press. */
.link-default{
  display:inline-flex; align-items:center;
  padding:6px 12px;
  border-radius:999px;
  background:#EAF7E2; color:#2F6B23;
  font-size:.78rem; font-weight:800;
  white-space:nowrap;
}

/* ---- Save button: spinner, then a moment of "Saved" -------------- */
.btn.is-busy{ cursor:progress; }
.btn-spinner{
  display:inline-block;
  width:16px; height:16px;
  margin-right:8px;
  border:2.5px solid rgba(46,42,51,.22);
  border-top-color:var(--ink);
  border-radius:50%;
  animation:yumi-spin .7s linear infinite;
  vertical-align:-3px;
}
@keyframes yumi-spin{ to{ transform:rotate(360deg); } }
/* Respect a reduced-motion preference: still shows state, just static. */
@media (prefers-reduced-motion:reduce){
  .btn-spinner{ animation:none; border-top-color:transparent; }
}

/* ---- Static map on a business profile ---------------------------- */
.biz-map{
  width:100%; height:220px;
  border-radius:18px;
  border:2px solid #EFE7D8;
  overflow:hidden;
  margin:12px 0;
  background:var(--paper);
}
.biz-map .leaflet-control-attribution{ font-size:.62rem; }

/* ---- Day picker on the auto-schedule sheet ---------------------- */
.avtf-days{
  display:flex; gap:6px; justify-content:center;
  margin:10px 0 14px;
}
.avtf-day{
  width:38px; height:38px;
  border-radius:50%;
  border:2px solid #EFE7D8;
  background:var(--card);
  font-family:'Nunito', sans-serif;
  font-weight:800; font-size:.9rem;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.avtf-day.on{
  background:var(--sky); border-color:var(--sky); color:#fff;
}
.avtf-day:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

/* Labels inside the collapsed address block — tighter than a normal
   field label, since there are six of them stacked. */
.loc-detail .loc-lab{
  display:block; margin-top:8px;
  font-size:.78rem; font-weight:800; color:var(--ink-soft);
}
.loc-detail .loc-lab:first-child{ margin-top:0; }

/* ---- Action link inside a map popup ----------------------------- */
.leaflet-popup-content .popup-act{
  display:inline-block; margin-top:6px;
  font-weight:800; color:var(--sky);
  text-decoration:none;
}
.leaflet-popup-content .popup-act:hover{ text-decoration:underline; }

/* ---- Shared composer sheets (composer.js) ------------------------ */
/* Reuse the page sheets' look; only the bits the shared forms add
   need rules of their own. */
.sheet .loc-row{
  display:flex; flex-direction:column; gap:2px;
  padding:9px 12px; cursor:pointer;
  border-bottom:1px solid #F4EEE1;
}
.sheet .loc-row:last-child{ border-bottom:none; }
.sheet .loc-row:hover{ background:var(--paper); }
.sheet .time-range{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sheet textarea{ width:100%; }
.sheet a.hint{ display:block; margin:10px 0; color:var(--sky); text-decoration:none; }
.sheet a.hint:hover{ text-decoration:underline; }


/* An action that isn't available yet reads as inert, not inviting. */
.act-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  background:var(--paper);
  color:var(--ink-soft);
  border-color:#EFE7D8;
}
.act-btn:disabled:hover{ transform:none; }

/* ---- Shift pattern builder --------------------------------------- */
.shift-week{ margin:12px 0; }
.shift-day{
  border:2px solid #EFE7D8; border-radius:14px;
  padding:10px 12px; margin-bottom:8px;
  background:var(--card);
}
.shift-day-head{ display:flex; align-items:center; }
.shift-day-name{ font-weight:800; font-size:.9rem; }
.shift-times{ margin:8px 0 6px; display:flex; flex-direction:column; gap:8px; }
.shift-day .act-btn{ font-size:.78rem; padding:5px 10px; }

/* ---- Calendar toolbar -------------------------------------------- */
.cal-tools{ display:flex; justify-content:flex-end; margin:4px 0 10px; }

/* ---- Manage your photos ------------------------------------------ */
.photo-manage-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  margin-top:10px;
}
.photo-manage{
  margin:0; padding:10px;
  border:2px solid #EFE7D8; border-radius:16px;
  background:var(--card);
  display:flex; flex-direction:column; gap:8px;
}
.photo-manage img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:10px; background:var(--paper);
}
.photo-manage figcaption{ display:flex; flex-direction:column; gap:2px; }
.photo-manage .act-btn{ align-self:flex-start; font-size:.78rem; padding:5px 10px; }

/* ---- Video embeds ------------------------------------------------ */
.video-embed{
  position:relative;
  margin-top:10px;
  border-radius:14px;
  overflow:hidden;
  background:#000;
  aspect-ratio:16/9;
}
.video-embed iframe,
.video-embed .video-play{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.video-embed .video-play{
  padding:0; cursor:pointer; background:#000;
  display:flex; align-items:center; justify-content:center;
}
.video-embed .video-play img{
  width:100%; height:100%; object-fit:cover;
}
/* The play badge sits over the still. Kept large enough to be an easy
   target on a phone. */
.video-play-badge{
  position:absolute;
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(0,0,0,.62);
  color:#fff; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  padding-left:4px;
  transition:transform .12s ease, background .12s ease;
}
.video-embed .video-play:hover .video-play-badge{
  transform:scale(1.08);
  background:rgba(0,0,0,.78);
}

/* The remove tile in the photo picker. Same 86px square as a picture so
   the grid stays even, but plainly not a photo: dashed edge, no image. */
.plib-remove{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2px;
  border-style:dashed;
  border-color:#E8B4AE;
  background:var(--card);
  color:#E85A4D;
  cursor:pointer;
}
.plib-remove:hover{
  border-color:#E85A4D;
  background:#FDF3F1;
}
.plib-remove-mark{ font-size:1.5rem; line-height:1; }
.plib-remove-text{ font-size:.72rem; font-weight:800; }

/* ---- Weekday picker ---------------------------------------------- */
.day-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(56px, 1fr));
  gap:6px;
  margin:8px 0 4px;
}
.day-pill{
  padding:10px 4px;
  border-radius:12px;
  border:2px solid #EFE7D8;
  background:var(--card);
  font-weight:800; font-size:.82rem;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.day-pill.on{
  background:var(--sun);
  border-color:var(--coral);
}
.day-pill:hover{ border-color:var(--sky); }

/* A timeframe choice reads as a row, like picking a person. */
.tf-row{
  width:100%;
  text-align:left;
  cursor:pointer;
  background:var(--card);
}
.tf-row:hover{ border-color:var(--sky); }

/* ---- Suggested days & times -------------------------------------- */
/* Four rows fit; beyond that it scrolls rather than pushing the rest
   of the form off screen. 58px is one .invite-row plus its gap. */
.slot-list{
  max-height:232px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
/* A hint that there is more below, without a scrollbar on mobile. */
.slot-list:not(:empty){
  border-radius:12px;
}

/* The clock is a real target, not a decoration: it is how a time gets
   changed, so it reads larger than the bin beside it. */
.act-btn.slot-time{
  font-size:1.15rem;
  padding:8px 12px;
  line-height:1;
}
.slot-all-times{ margin-bottom:8px; }

/* ---- First-run setup --------------------------------------------- */
.ob-wrap{
  /* Below .sheet (10) on purpose. The walkthrough hands off to the real
     composers, and a sheet opened from it has to appear ON TOP of it —
     sitting above them meant the shift form opened behind the step that
     asked for it. */
  position:fixed; inset:0; z-index:8;
  background:rgba(46,42,51,.55);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0;
}
@media (min-width:640px){
  .ob-wrap{ align-items:center; padding:24px; }
}
.ob-card{
  background:var(--card);
  border-radius:22px 22px 0 0;
  width:100%; max-width:520px;
  max-height:92vh; overflow-y:auto;
  padding:20px 18px 16px;
  box-shadow:0 -8px 40px rgba(46,42,51,.25);
}
@media (min-width:640px){
  .ob-card{ border-radius:22px; }
}
.ob-head{ margin-bottom:10px; }
.ob-title{ font-size:1.25rem; margin:0 0 2px; }
.ob-count{ margin:0; font-size:.8rem; color:var(--ink-soft); font-weight:700; }

/* The bar fills as steps are completed, so the first screen reads 0. */
.ob-bar{
  height:8px; border-radius:99px;
  background:#F0E9DC; overflow:hidden; margin:10px 0 8px;
}
.ob-bar-fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--sun), var(--coral));
  transition:width .3s ease;
}
.ob-dots{ display:flex; gap:6px; justify-content:center; margin-bottom:12px; }
.ob-dot{
  width:8px; height:8px; border-radius:50%;
  background:#E4DACA;
}
.ob-dot.done{ background:var(--sun); }
.ob-dot.now{ background:var(--coral); transform:scale(1.35); }

.ob-body{ margin-bottom:8px; }
.ob-actions{ display:flex; gap:8px; align-items:center; margin-top:10px; }
.ob-actions .ob-next{ flex:1; margin-top:0; }
.ob-skip{
  display:block; width:100%;
  margin-top:10px; padding:8px;
  background:none; border:0;
  color:var(--ink-soft); font-weight:700; font-size:.85rem;
  text-decoration:underline; cursor:pointer;
}
.ob-skip:hover{ color:var(--ink); }

/* ---- Guide pages -------------------------------------------------- */
.guide-title{ font-size:1.5rem; margin:4px 0 12px; }
.guide-h{
  font-size:1.1rem; margin:20px 0 6px;
  padding-top:14px; border-top:2px solid #F0E9DC;
}
.guide-h:first-of-type{ border-top:0; padding-top:0; }
.guide-p{ margin:0 0 10px; line-height:1.55; }

.guide-fig{ margin:10px 0 14px; }
.guide-fig img{
  width:100%; height:auto;
  border-radius:14px;
  border:2px solid #F0E9DC;
  display:block;
}
.guide-fig figcaption{
  margin-top:5px;
  font-size:.8rem; color:var(--ink-soft); font-weight:700;
  text-align:center;
}
/* A picture not taken yet leaves its caption, so the guide still reads. */
.guide-fig.no-img figcaption{
  text-align:left; font-style:italic; opacity:.75;
}

.guide-list, .guide-steps{ margin:0 0 12px; padding-left:22px; line-height:1.55; }
.guide-list li, .guide-steps li{ margin-bottom:5px; }

/* Naming a control: the label, then what it does. */
.guide-key{
  display:flex; flex-direction:column; gap:1px;
  padding:9px 12px; margin-bottom:6px;
  background:var(--paper);
  border-radius:12px;
  border-left:4px solid var(--sky);
}
.guide-key-name{ font-weight:800; font-size:.92rem; }
.guide-key-what{ font-size:.86rem; color:var(--ink-soft); }

.guide-tip{
  display:flex; gap:9px; align-items:flex-start;
  padding:11px 13px; margin:12px 0;
  background:#FFF8E4;
  border-radius:14px;
  border:2px solid var(--sun);
}
.guide-tip p{ margin:0; font-size:.9rem; line-height:1.5; }
.guide-tip-mark{ font-size:1.05rem; line-height:1.3; }

.guide-feet{
  display:flex; gap:8px; flex-wrap:wrap;
  /* No bottom margin: the card already has padding, and main.feed
     clears the nav bar. Adding more here just pushed the buttons into
     dead space. */
  margin:22px 0 0;
  padding-top:14px; border-top:2px solid #F0E9DC;
}
.guide-feet .act-btn{ flex:1; min-width:140px; }

/* The link on the last setup step, and the card after finishing. */
.guide-link{
  display:inline-block; margin-top:10px;
  font-weight:800; font-size:.9rem;
  color:var(--coral); text-decoration:underline;
}
.guide-offer{ border:2px solid var(--sun); }

/* A prompt, not an alarm: nothing has gone wrong, there is just a step
   outstanding. Sun rather than coral for that reason. */
.confirm-banner{ border:2px solid var(--sun); }
.confirm-banner h2{ font-size:1.05rem; }

/* A section heading with controls after it. The heading takes the space,
   so the eye ends up hard right — the same place it sits on every
   field row above. */
.section-head{
  display:flex; align-items:center; gap:8px;
  margin-bottom:8px;
}
.section-head .section-title{ margin:0; flex:1; }

/* A dislike reads differently from an interest: same shape, muted. */
.dislike-chip{
  background:#FDF3F1;
  border-color:#E8B4AE;
  display:inline-flex; align-items:center; gap:6px;
}
.chip-x{
  background:none; border:0; cursor:pointer;
  color:#E85A4D; font-weight:800; font-size:.8rem;
  padding:0 0 0 2px; line-height:1;
}
.chip-x:hover{ color:#C63F33; }

/* ---- Analytics tables --------------------------------------------- */
/* Scrolls sideways rather than squeezing: six numbers do not fit a
   phone, and a squeezed table is unreadable either way. */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.stat-table{
  width:100%; border-collapse:collapse;
  font-size:.86rem; white-space:nowrap;
}
.stat-table th, .stat-table td{
  padding:8px 10px;
  border-bottom:1px solid #F0E9DC;
  text-align:left;
}
.stat-table th{
  font-weight:800; color:var(--ink-soft);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.03em;
}
/* Numbers read better right-aligned; the first column is the name. */
.stat-table td:nth-child(n+2){ text-align:right; }
.stat-table th:nth-child(n+2){ text-align:right; }
.stat-table tr:last-child td{ border-bottom:0; }
.stat-table a{ color:var(--coral); font-weight:800; text-decoration:none; }
.stat-table a:hover{ text-decoration:underline; }

/* ---- Analytics chart ---------------------------------------------- */
.chart-wrap{ margin:6px 0 2px; }
.chart{ width:100%; height:auto; display:block; overflow:visible; }
.chart .grid{ stroke:#F0E9DC; stroke-width:1; }
.chart .axis{
  font-size:11px; fill:var(--ink-soft);
  font-family:'Nunito', sans-serif; font-weight:700;
}
.chart-area{ fill:var(--sun); opacity:.22; }
.chart-line{
  fill:none; stroke:var(--coral); stroke-width:2.5;
  stroke-linejoin:round; stroke-linecap:round;
}
.chart-dot{ fill:var(--coral); stroke:var(--card); stroke-width:1.5; }
/* Only the ends are labelled; thirty dates across a phone cannot be read. */
.chart-ends{
  display:flex; justify-content:space-between;
  font-size:.74rem; color:var(--ink-soft); font-weight:700;
  margin-top:2px;
}

/* Leaderboard filters. Wrap rather than scroll: a hidden filter is one
   people forget is on. */
.filter-bar{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }
.filter-bar .field{ flex:1; min-width:120px; margin:0; }
.filter-bar label{ font-size:.74rem; }

/* The one step people miss before Google's consent screen. Sun rather
   than coral: nothing has gone wrong yet, and this is the moment to
   prevent it. */
.consent-warn{
  margin:8px 0 0;
  padding:10px 12px;
  background:#FFF8E4;
  border:2px solid var(--sun);
  border-radius:14px;
  font-size:.86rem; line-height:1.5;
}
.consent-warn strong{ display:block; margin-bottom:2px; }

/* ---- Admin tabs and view switches --------------------------------- */

/* .seg-btn inside .segment inherits border:none, but the class is also
   used on its own, where an unstyled button falls back to the browser
   default — a black border that matches nothing else on the site. */
.seg-btn{
  /* flex:1 here rather than only on `.segment button`, so a row of tabs
     shares the width evenly whatever it is wrapped in. Two tabs get half
     each, five get a fifth each. */
  flex:1 1 0;
  min-width:0;
  border:none;
  background:none;
  font-family:'Nunito', sans-serif;
  font-weight:800;
  color:var(--ink-soft);
  cursor:pointer;
  text-align:center;
  /* A long label wraps rather than pushing its neighbours out of shape. */
  white-space:normal;
  line-height:1.2;
}

/* The period and view switches. Same shape as the optional-field
   buttons in the composers, so a switch reads as a switch wherever it
   appears. */
.view-btn{
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  background:var(--paper);
  border:2px solid #EFE7D8;
  font-family:'Nunito', sans-serif;
  font-weight:800; font-size:.8rem;
  color:var(--ink); cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.view-btn:hover{ background:#F6F1E6; border-color:#E4DACA; }
.view-btn:active{ transform:scale(.95); }
/* Chosen: the sun fill carries it, as it does on .opt-add. */
.view-btn[aria-pressed="true"]{
  background:#FFF3D6; border-color:var(--sun);
}
.view-btn:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; }

/* Five admin tabs on a phone is about 70px each, so the label shrinks
   rather than overflowing. Two tabs elsewhere keep the normal size. */
.settings-switch .seg-btn{ font-size:.82rem; padding:9px 2px; }
@media (max-width:420px){
  .settings-switch .seg-btn{ font-size:.72rem; }
}

/* ---- Private group members ---------------------------------------- */
/* A member row is a person plus, for leaders, what that person may do.
   The permissions sit under the name rather than beside it: three
   labels will not fit on one line with a name on a phone. */
.member-row{ flex-direction:column; align-items:stretch; gap:8px; }
.member-top{ display:flex; align-items:center; gap:10px; }
.member-top .friend-link{ flex:1; min-width:0; }

.perm-row{
  display:flex; flex-wrap:wrap; gap:6px;
  padding-top:8px;
  border-top:1px solid #F0E9DC;
}
.perm-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  background:var(--paper);
  border:2px solid #EFE7D8;
  border-radius:var(--radius-pill);
  font-size:.76rem; font-weight:800;
  cursor:pointer;
}
.perm-chip input{
  width:16px; height:16px; margin:0;
  accent-color:var(--coral); flex:0 0 auto;
}
.perm-chip:hover{ border-color:#E4DACA; }

/* ---- Choosing people ---------------------------------------------- */
/* Eight rows then scroll. Without a cap a long address book pushes the
   buttons off the bottom of the sheet, and Create becomes unreachable. */
.people-picker{ display:block; }
.people-list{
  max-height:calc(8 * 52px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border:2px solid #EFE7D8;
  border-radius:14px;
  background:var(--card);
}
/* The row IS a label, so `.field label { display:block }` outranks a
   bare `.people-row` and stacks the picture, name and box. Matching its
   specificity puts them back on one line. */
.people-row,
.field .people-row,
.people-list label.people-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-bottom:1px solid #F5EFE2;
  cursor:pointer;
  min-height:52px;
  box-sizing:border-box;
}
.people-row:last-child{ border-bottom:0; }
.people-row:hover{ background:var(--paper); }
.people-row .avatar{
  width:32px; height:32px; border-radius:50%;
  object-fit:cover; flex:0 0 auto;
  background:var(--paper);
}
.people-row .src-info{
  flex:1; min-width:0;
  display:flex; flex-direction:column; justify-content:center;
}
/* One line, cut short rather than wrapped: a wrapped name would make
   its row taller than the rest and break the eight-row height. */
.people-row .src-name{
  font-size:.92rem; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin:0;
}
.people-row input{
  width:20px; height:20px; margin:0;
  accent-color:var(--coral); flex:0 0 auto;
}
.people-search{ margin-bottom:8px; }
.people-search input{
  width:100%;
  font-family:'Nunito', sans-serif;
  font-size:.95rem; font-weight:600;
  color:var(--ink);
  background:var(--paper);
  border:2px solid #EFE7D8;
  border-radius:12px;
  padding:7px 10px;
  box-sizing:border-box;
}
/* The tally stays visible while the list scrolls, so you can see how
   many are picked without scrolling back. */
.people-count{
  margin:6px 0 0;
  font-size:.78rem; font-weight:700;
  color:var(--ink-soft);
}

/* The meet-up invite list already searches and caps its results at
   eight. The list of people already chosen had no cap, so inviting
   twenty pushed the rest of the form off the screen. Same eight-row
   ceiling as the shared picker. */
#inviteList{
  max-height:calc(8 * 46px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* ---- My Groups, in the account menu -------------------------------- */
/* Looks like the links around it, but expands rather than navigating:
   there is no single page for "my groups", only the groups themselves. */
.menu-expand{
  display:flex; align-items:center; gap:8px;
  width:100%;
  padding:10px 14px;
  border:0; background:none;
  font-family:'Nunito', sans-serif;
  font-weight:700; font-size:.92rem;
  color:var(--ink); text-align:left;
  cursor:pointer;
}
.menu-expand:hover{ background:var(--paper); }
.menu-caret{ margin-left:auto; font-size:.7rem; color:var(--ink-soft); }
.menu-expand[aria-expanded="true"] .menu-caret{ transform:rotate(180deg); }

/* Indented so a group reads as being under My Groups rather than as
   another top-level destination. Capped so ten groups cannot push Sign
   out off the screen. */
.menu-sub{
  max-height:calc(5 * 40px);
  overflow-y:auto;
  background:var(--paper);
}
.menu-sub a{
  display:block;
  padding:9px 14px 9px 34px;
  font-size:.88rem;
}

/* The second step of a two-step chooser. Indented and spaced so it
   reads as following on from the first rather than as another
   independent field. */
.audience-which{ margin-top:6px; }
.audience-body{ margin-top:8px; }

/* Who is invited so far, whichever way they were chosen. Sits below the
   picker and survives switching between people, relationships and
   groups — which is the point of it. */
.chosen-chips{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:8px;
}
.chosen-chips:empty{ margin-top:0; }
/* A group reads differently from a person: it brings others with it. */
.chip-group{
  background:#EAF6FB;
  border-color:var(--sky);
}