/* =====================================================================
   Tide web app — UI. Phone-framed on desktop, full-bleed on mobile.
   Light theme matching the iOS app + the landing mockups.
   ===================================================================== */
:root{
  --bg:#FFF6EF; --ink:#241B2E; --muted:#6B6475; --card:#ffffff; --chip:#F0E9F1;
  --accent:#F2502F; --teal:#12B7A6; --gold:#FFC83D; --blue:#2E6FE0; --purple:#7B6CF6;
  --line:rgba(36,27,46,.08); --nav:rgba(255,246,239,.92); --shadow:0 10px 24px rgba(36,27,46,.10);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink);
  background:linear-gradient(160deg,#2B2140,#4A2F75 60%,#7A3F6E);
  display:flex; align-items:center; justify-content:center; min-height:100vh;
}
.display{font-family:'Bricolage Grotesque',system-ui,sans-serif;}
button{font-family:inherit; cursor:pointer;}
a{color:inherit;}

/* phone frame */
.phone{
  width:392px; max-width:100vw; height:812px; max-height:100vh; position:relative;
  background:#241B2E; border-radius:46px; padding:12px; box-shadow:0 40px 90px rgba(0,0,0,.4);
}
.screen{position:relative; background:var(--bg); border-radius:36px; overflow:hidden; height:100%; display:flex; flex-direction:column;}
@media (max-width:480px){
  body{background:var(--bg);}
  .phone{width:100vw; height:100vh; max-height:none; border-radius:0; padding:0;}
  .screen{border-radius:0;}
}

/* scrollable content area above the tab bar */
.view{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:54px 16px 78px;}
.view::-webkit-scrollbar{width:0;}
.hdr{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:6px;}
.hdr h1{font-size:30px; letter-spacing:-1.2px; margin:0;}
.sub{font-size:13px; color:var(--muted); margin:2px 0 14px;}
.pill{display:inline-flex; align-items:center; gap:5px; background:var(--chip); color:var(--ink); padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700; border:none;}
.pill.on{background:var(--accent); color:#fff;}
.chiprow{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px;}

/* cards */
.card{background:var(--card); border-radius:18px; padding:14px; box-shadow:var(--shadow); margin-bottom:11px;}
.tag{padding:4px 9px; border-radius:999px; font-size:10px; font-weight:800;}
.tag.food{background:#FFE7E0; color:#F2502F;} .tag.campus{background:#FFEFCF; color:#E07F00;}
.tag.study{background:#E2ECFF; color:#2E6FE0;} .tag.social{background:#ECE7FF; color:#6B4FE6;}
.tag.default{background:var(--chip); color:var(--muted);}
.meta{font-size:11px; color:#6B6475; font-weight:600;} /* WCAG AA on white/cream cards */
.ptitle{font-weight:700; font-size:15.5px; line-height:1.25; letter-spacing:-.2px; margin:7px 0 0;}
.pbody{font-size:13px; color:var(--muted); margin-top:5px; line-height:1.45;}
.actions{display:flex; align-items:center; gap:8px; margin-top:11px;}
.vote{display:inline-flex; align-items:center; gap:5px; background:var(--chip); color:var(--muted); padding:6px 11px; border-radius:999px; font-size:12px; font-weight:800; border:none;}
.vote.on{background:#FFE7E0; color:var(--accent);}
.cmt{display:inline-flex; align-items:center; gap:5px; color:#9A8FA8; font-weight:700; font-size:12px; background:none; border:none;}

/* buttons */
.btn{display:block; width:100%; border:none; border-radius:14px; padding:14px; font-weight:800; font-size:15px; background:var(--accent); color:#fff; box-shadow:0 8px 18px rgba(242,80,47,.3);}
.btn.alt{background:var(--ink);} .btn.ghost{background:var(--chip); color:var(--ink); box-shadow:none;}
.btn.gold{background:var(--gold); color:var(--ink); box-shadow:0 8px 18px rgba(255,200,61,.4);}
.btn:disabled{opacity:.55;}
.fab{position:absolute; right:16px; bottom:80px; width:50px; height:50px; border-radius:50%; background:var(--accent); color:#fff; border:none; box-shadow:0 10px 22px rgba(242,80,47,.45); font-size:26px; line-height:1; z-index:20;}

/* class / event */
.clz{position:relative; overflow:hidden; padding-left:18px;}
.clz .bar{position:absolute; left:0; top:0; bottom:0; width:5px;}
.row{display:flex; align-items:center; gap:7px;}
.count{font-size:10px; color:#0E9C8E; font-weight:800; background:#D6F4EF; padding:3px 8px; border-radius:999px;}
.evt{padding:0; overflow:hidden;}
.evt .top{height:64px; display:flex; align-items:flex-end; padding:10px 13px; position:relative;}
.evt .date{position:absolute; top:10px; right:12px; text-align:center; background:#fff; border-radius:10px; padding:5px 9px; box-shadow:0 4px 10px rgba(0,0,0,.12);}
.evt .body{padding:12px 14px;}

/* drop */
.match{border-radius:22px; padding:22px 18px; text-align:center; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(160deg,#2B2140 0%,#5B3A8C 60%,#F2502F 130%);}
.mystery{width:92px;height:92px;border-radius:50%;margin:0 auto;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;border:2px dashed rgba(255,255,255,.5);}
.mystery.pulse{animation:tidePulse 2.6s infinite;}
@keyframes tidePulse{0%,100%{box-shadow:0 0 0 0 rgba(242,80,47,.32)}50%{box-shadow:0 0 0 18px rgba(242,80,47,0)}}

/* tab bar */
.tabbar{position:absolute; left:0; right:0; bottom:0; height:64px; padding:9px 10px; display:flex; justify-content:space-around; background:var(--nav); backdrop-filter:blur(12px); border-top:1px solid var(--line); z-index:25;}
.tab{display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; color:#BBB1C6; background:none; border:none; font-size:9px; font-weight:800;}
.tab.on{color:var(--accent);}
.tab svg{width:21px;height:21px;}

/* overlays / modals */
.sheet{position:absolute; inset:0; z-index:40; background:var(--bg); display:flex; flex-direction:column; animation:slideUp .25s ease;}
@keyframes slideUp{from{transform:translateY(20px);opacity:.4}to{transform:none;opacity:1}}
.sheet .shead{display:flex; align-items:center; gap:10px; padding:46px 16px 10px; border-bottom:1px solid var(--line);}
.sheet .sbody{flex:1; overflow-y:auto; padding:16px;}
.iconbtn{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:18px;display:flex;align-items:center;justify-content:center;}
.field{width:100%; border:1px solid var(--line); border-radius:12px; padding:13px; font:inherit; font-size:15px; background:#fff; color:var(--ink); margin-bottom:10px;}
textarea.field{min-height:90px; resize:vertical;}
label.lbl{font-size:12px; font-weight:800; color:var(--muted); display:block; margin:6px 0 6px;}
.err{color:var(--accent); font-size:13px; font-weight:700; margin:6px 0;}
.note{color:var(--muted); font-size:12px; margin:6px 0;}

/* login modal */
.modal{position:absolute; inset:0; z-index:60; background:rgba(20,15,28,.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:18px;}
.modal .box{background:var(--bg); border-radius:24px; padding:24px; width:100%; max-width:340px; box-shadow:0 30px 70px rgba(0,0,0,.4);}
.brandrow{display:flex; align-items:center; gap:8px; margin-bottom:14px;}

/* chat */
.msgs{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px;}
.bub{max-width:78%; padding:9px 13px; border-radius:16px; font-size:14px; line-height:1.35; word-wrap:break-word;}
.bub.me{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:5px;}
.bub.them{align-self:flex-start; background:var(--card); color:var(--ink); border-bottom-left-radius:5px; box-shadow:var(--shadow);}
.bub.sys{align-self:center; background:var(--chip); color:var(--muted); font-size:12px; font-weight:700;}
.composer{display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line); background:var(--bg);}
.composer input{flex:1; border:1px solid var(--line); border-radius:999px; padding:11px 14px; font:inherit; background:#fff;}
.send{width:44px;height:44px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:18px;flex:none;}

/* misc */
.center{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:50px 20px; text-align:center; color:var(--muted);}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--chip);border-top-color:var(--accent);animation:sp 1s linear infinite;}
@keyframes sp{to{transform:rotate(360deg)}}
.avatar{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:30px;}
.toast{position:absolute; left:16px; right:16px; bottom:78px; background:var(--ink); color:#fff; padding:11px 14px; border-radius:12px; font-size:13px; font-weight:700; z-index:50; text-align:center; box-shadow:0 10px 24px rgba(0,0,0,.3);}
.demo-banner{background:var(--ink); color:#fff; font-size:12px; font-weight:700; text-align:center; padding:7px; }
.demo-banner a{color:var(--gold); text-decoration:underline; cursor:pointer;}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;}}