/* =====================================================================
   Jessica Gomma — community space
   One stylesheet. Colours are defined once as tokens at the top; change
   a value there and it changes everywhere, in both light and dark.
   ===================================================================== */

:root{
  --paper:#EFE6D7;          /* the site's warm sand */
  --card:#F7F1E8;           /* the lighter cream */
  --card-2:#E7DBC7;
  --ink:#3A342C;            /* the site's warm near-black */
  --ink-soft:#6C6456;
  --ink-faint:#6F6759;
  --line:#DFD3BF;
  --heather:#A4542E;        /* the site's terracotta, a shade deeper so cream reads on it */
  --heather-bright:#B5633B; /* the site's exact terracotta, for large flat areas */
  --heather-ink:#F7F1E8;
  --heather-soft:#F4E4D8;
  --lichen:#7C8763;
  --gold:#A8792C;
  --danger:#8E3B2A;
  --bubble-them:#E7DBC7;
  --radius:18px;
  --shadow:0 18px 40px -22px rgba(58,52,44,.4);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1E1A16;
    --card:#272119;
    --card-2:#312A21;
    --ink:#EFE6D7;
    --ink-soft:#BCB2A2;
    --ink-faint:#968D7E;
    --line:#372F26;
    --heather:#D98A5B;
    --heather-bright:#D98A5B;
    --heather-ink:#241812;
    --heather-soft:#35251C;
    --lichen:#A0AC85;
    --gold:#D7A94E;
    --danger:#E08D7A;
    --bubble-them:#312A21;
    --shadow:0 18px 44px -22px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#1E1A16;
  --card:#272119;
  --card-2:#312A21;
  --ink:#EFE6D7;
  --ink-soft:#BCB2A2;
  --ink-faint:#968D7E;
  --line:#372F26;
  --heather:#D98A5B;
  --heather-bright:#D98A5B;
  --heather-ink:#241812;
  --heather-soft:#35251C;
  --lichen:#A0AC85;
  --gold:#D7A94E;
  --danger:#E08D7A;
  --bubble-them:#312A21;
  --shadow:0 18px 44px -22px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Nunito','Helvetica Neue',Arial,sans-serif;
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:600;margin:0;text-wrap:balance;line-height:1.2}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--heather)}
:focus-visible{outline:2px solid var(--heather);outline-offset:2px;border-radius:6px}
.hidden{display:none !important}

/* ---------- generic bits ---------- */
.sectionLabel{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-faint);font-weight:600}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card.tap{width:100%;text-align:left;transition:.16s}
.card.tap:hover{border-color:var(--heather)}
.stack{display:flex;flex-direction:column;gap:10px}
.whisper{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:17px;color:var(--ink-faint);text-align:center;padding:6px 20px 2px;line-height:1.5}
.muted{color:var(--ink-faint);font-size:13px}
.empty{text-align:center;color:var(--ink-faint);padding:34px 20px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:16px}
.tag{display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;padding:3px 8px;border-radius:999px;background:var(--heather-soft);color:var(--heather);font-weight:600}
.ava{width:28px;height:28px;border-radius:50%;flex:none;background:var(--card-2);color:var(--ink-soft);font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;letter-spacing:.03em}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--heather);color:var(--heather-ink);
  border-radius:999px;padding:12px 22px;font-weight:600;font-size:15px;
  transition:.16s;text-decoration:none;
}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.55;cursor:default}
.btn.ghost{background:transparent;color:var(--heather);border:1px solid var(--heather)}
.btn.quiet{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
.btn.small{padding:7px 15px;font-size:13px}
.btn.danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);font-weight:600}
.field input,.field textarea,.field select{
  border:1px solid var(--line);background:var(--card);border-radius:12px;
  padding:12px 14px;font-size:15px;width:100%;
}
.field textarea{resize:vertical;min-height:96px;line-height:1.5}
.field input[type="file"]{padding:9px 10px}
.field input[type="file"]::file-selector-button{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;margin-right:12px;
  background:var(--heather-soft);color:var(--heather);
  border:1px solid var(--heather);border-radius:999px;padding:7px 14px;
}
.field .hint{font-size:12px;color:var(--ink-faint)}

.notice{border-radius:12px;padding:11px 14px;font-size:13.5px;border:1px solid var(--line);background:var(--card)}
.notice.bad{border-color:var(--danger);color:var(--danger)}
.notice.good{border-color:var(--lichen);color:var(--lichen)}

#toast{
  position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);
  background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;
  font-size:13.5px;opacity:0;pointer-events:none;transition:.22s;z-index:60;max-width:88vw;text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- standalone pages (sign in, waiting, join) ---------- */
.gate{
  min-height:100dvh;display:flex;flex-direction:column;
  /* 'safe' matters: on a short screen with the name box and a message
     showing, plain centring pushes the top of the form off the screen
     where it cannot be scrolled back to. */
  justify-content:safe center;
  gap:22px;padding:40px 26px;max-width:460px;margin:0 auto;
}
@media (max-height:700px){ .gate{gap:18px;padding:26px 26px} }
.gate .mark{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.gate h1{font-size:41px;letter-spacing:-.01em}
.gate p.lede{color:var(--ink-soft);font-size:15.5px}
.gate form{display:flex;flex-direction:column;gap:16px}
.gate .foot{font-size:13px;color:var(--ink-faint);text-align:center}
.gate .foot a{text-decoration:none;border-bottom:1px solid var(--line)}
.linkish{color:var(--heather);font-size:13px;border-bottom:1px solid var(--line);padding-bottom:1px}
.linkish:hover{border-bottom-color:var(--heather)}
.codeBox{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;text-align:center;
  letter-spacing:.34em;text-indent:.34em;font-variant-numeric:tabular-nums;
  padding:14px 10px;
}

/* ---------- app shell ---------- */
.app{height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;position:relative;background:var(--paper)}
@media (min-width:600px){
  body{background:var(--card-2)}
  .app{border-left:1px solid var(--line);border-right:1px solid var(--line)}
}
.appbar{
  flex:none;display:flex;align-items:center;gap:10px;
  padding:max(18px,env(safe-area-inset-top)) 18px 12px;
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.appbar.solid{border-bottom-color:var(--line)}
.appbar .back{width:30px;height:30px;display:none;align-items:center;justify-content:center;border-radius:50%;color:var(--ink-soft);margin-left:-6px}
.appbar.sub .back{display:flex}
.appbar h2{font-size:22px;flex:1;letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatarBtn{width:32px;height:32px;border-radius:50%;background:var(--heather);color:var(--heather-ink);font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}

.screens{flex:1;position:relative;overflow:hidden}
.screen{
  position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  padding:4px 18px 26px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .26s ease,transform .26s ease,visibility .26s;
  display:flex;flex-direction:column;gap:18px;
}
.screen.on{opacity:1;visibility:visible;transform:none}
.screen > *{flex:0 0 auto}
.screen::-webkit-scrollbar,.msgs::-webkit-scrollbar{width:0}

/* today */
.hero{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--line);padding:26px 20px 22px}
#dust{position:absolute;inset:0;width:100%;height:100%}
.hero .heroInner{position:relative}
.hero .when{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-faint)}
.hero h3{font-size:35px;margin-top:10px;letter-spacing:-.01em}
.hero .sub{margin-top:9px;color:var(--ink-soft);font-size:14px;max-width:28ch}

.offer{display:flex;gap:14px;align-items:center}
.offer .meta{min-width:0}
.offer h4{font-size:20px}
.offer .meta p{font-size:12.5px;color:var(--ink-faint);margin-top:3px}
.playBtn{width:46px;height:46px;border-radius:50%;flex:none;background:var(--heather);display:flex;align-items:center;justify-content:center;transition:transform .14s}
.playBtn:hover{transform:scale(1.05)}
.playBtn svg{fill:var(--heather-ink)}
.peek{display:flex;gap:10px;align-items:flex-start}
.peek .body{min-width:0}
.peek .body b{font-size:13px;font-weight:600}
.peek .body p{font-size:13.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* circle */
.roomBtn{display:flex;gap:13px;align-items:center;width:100%;text-align:left;padding:14px 15px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);transition:.16s}
.roomBtn:hover{border-color:var(--heather)}
.roomIcon{width:38px;height:38px;border-radius:12px;flex:none;background:var(--heather-soft);display:flex;align-items:center;justify-content:center;color:var(--heather)}
.roomBtn .info{flex:1;min-width:0}
.roomBtn .info .top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.roomBtn .info h4{font-size:18.5px}
.roomBtn .info time{font-size:11.5px;color:var(--ink-faint);flex:none}
.roomBtn .info p{font-size:13px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}

/* thread */
.screen.thread{padding:0;gap:0}
.screen.thread .msgs{flex:1 1 auto}
.msgs{overflow-y:auto;padding:10px 18px 14px;display:flex;flex-direction:column;gap:14px}
.daySep{text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint);margin:4px 0}
.msg{display:flex;gap:9px;align-items:flex-end;max-width:86%;position:relative}
.msg .bub{background:var(--bubble-them);padding:9px 13px;border-radius:16px 16px 16px 5px;font-size:14.5px;white-space:pre-wrap;word-break:break-word}
.msg .bub .who{display:block;font-size:11.5px;font-weight:600;color:var(--heather);margin-bottom:2px}
.msg.me{margin-left:auto;flex-direction:row-reverse}
.msg.me .bub{background:var(--heather);color:var(--heather-ink);border-radius:16px 16px 5px 16px}
.msg .del{opacity:0;font-size:11px;color:var(--ink-faint);align-self:center;transition:.15s;padding:4px}
.msg:hover .del,.msg:focus-within .del{opacity:1}
.photoBtn{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);border:1px solid var(--line);background:var(--card)}
.photoBtn:hover{color:var(--heather);border-color:var(--heather)}
.photoBtn.on{color:var(--heather-ink);background:var(--heather);border-color:var(--heather)}
.msg .bub img{display:block;max-width:100%;border-radius:10px;margin-top:6px}
.msg .bub img:first-child{margin-top:0}
.msg.pending .bub{opacity:.55}

/* a private journal reads as a page, not a conversation */
.screen.thread.journal .msg{max-width:100%;margin-left:0;flex-direction:row}
.screen.thread.journal .msg .bub{background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:var(--radius);width:100%;padding:14px 16px}
.screen.thread.journal .daySep{margin:10px 0 2px}

/* today's card */
.cardPull{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:22px 18px}
.cardPull img{width:min(230px,66%);border-radius:14px;box-shadow:var(--shadow);transition:transform .18s}
.cardPull button:hover img{transform:translateY(-3px)}
.cardPull .words{font-family:'Cormorant Garamond',Georgia,serif;font-size:23px;line-height:1.35;color:var(--ink)}
.cardPull .prompt{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:18px;color:var(--ink-faint)}
.cardBack{
  width:min(230px,66%);aspect-ratio:2/3;border-radius:14px;border:1px solid var(--line);
  background:var(--heather-soft);display:flex;align-items:center;justify-content:center;
  color:var(--heather);font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;
  transition:transform .18s;
}
.cardPull button:hover .cardBack{transform:translateY(-3px)}

.composer{flex:none;display:flex;gap:9px;padding:11px 14px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper);align-items:flex-end}
.composer textarea{flex:1;resize:none;border:1px solid var(--line);background:var(--card);border-radius:18px;padding:10px 14px;font-size:15px;max-height:110px;line-height:1.4}
.send{width:38px;height:38px;border-radius:50%;background:var(--heather);display:flex;align-items:center;justify-content:center;flex:none}
.send svg{stroke:var(--heather-ink)}

/* listen */
.nowCard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.wave{display:flex;align-items:flex-end;gap:2.5px;height:52px;margin:16px 0 10px;cursor:pointer}
.wave span{flex:1;background:var(--line);border-radius:1px;pointer-events:none}
.wave span.past{background:var(--heather)}
.times{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.transport{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:14px}
.transport button{color:var(--ink-soft)}
.trackRow{display:flex;gap:13px;align-items:center;width:100%;text-align:left;padding:12px 4px;border-bottom:1px solid var(--line)}
.trackRow:last-child{border-bottom:0}
.trackRow .num{font-size:12px;color:var(--ink-faint);width:16px;flex:none;font-variant-numeric:tabular-nums}
.trackRow .t{flex:1;min-width:0}
.trackRow h4{font-size:15.5px;font-family:'Nunito',sans-serif;font-weight:600}
.trackRow p{font-size:12px;color:var(--ink-faint);margin-top:2px}
.trackRow .dur{font-size:12.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.trackRow.playing h4{color:var(--heather)}

/* words */
.pieceBtn{width:100%;text-align:left;padding:16px 0;border-bottom:1px solid var(--line)}
.pieceBtn:last-of-type{border-bottom:0}
.pieceBtn h4{font-size:24px}
.pieceBtn .first{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;color:var(--ink-soft);font-size:16.5px;margin-top:5px}
.pieceBtn .m{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-faint);margin-top:8px}
.reader{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;line-height:1.72;white-space:pre-line}
.readerHead h3{font-size:32px}
.readerHead .m{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint);margin-top:8px}
.holdBtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13px;color:var(--ink-soft);align-self:flex-start;transition:.16s}
.holdBtn:hover{border-color:var(--heather);color:var(--heather)}
.holdBtn.held{background:var(--heather-soft);border-color:var(--heather);color:var(--heather)}

/* gather */
.event{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:16px;display:flex;flex-direction:column;gap:12px}
.event .head{display:flex;gap:14px}
.date{width:52px;flex:none;text-align:center;border-right:1px solid var(--line);padding-right:12px}
.date .d{font-family:'Cormorant Garamond',serif;font-size:27px;line-height:1}
.date .mo{font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-faint);margin-top:4px}
.event h4{font-size:20px}
.event .where{font-size:13px;color:var(--ink-soft);margin-top:4px}
.event .foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.event .count{font-size:12.5px;color:var(--ink-faint)}
.rsvp{border:1px solid var(--heather);color:var(--heather);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;transition:.16s}
.rsvp:hover{background:var(--heather-soft)}
.rsvp.in{background:var(--heather);color:var(--heather-ink)}

/* you */
.profTop{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0 4px}
.bigAva{width:66px;height:66px;border-radius:50%;background:var(--heather);color:var(--heather-ink);display:flex;align-items:center;justify-content:center;font-size:22px;font-family:'Cormorant Garamond',serif}
.profTop h3{font-size:26px}
.setRow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.setRow:last-child{border-bottom:0}
.setRow b{font-size:14.5px;font-weight:600;display:block}
.setRow p{font-size:12.5px;color:var(--ink-faint);margin-top:2px}
.sw{width:44px;height:26px;border-radius:999px;background:var(--card-2);border:1px solid var(--line);flex:none;position:relative;transition:.2s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
.sw.on{background:var(--heather);border-color:var(--heather)}
.sw.on::after{transform:translateX(18px)}

/* tend (host only) */
.tendGroup{display:flex;flex-direction:column;gap:12px}
.reqRow{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.reqRow:last-child{border-bottom:0}
.reqRow .who{flex:1 1 55%;min-width:0}
.reqRow .who b{font-size:15px;font-weight:600;display:block}
.reqRow .who p{font-size:12.5px;color:var(--ink-faint);margin-top:2px;word-break:break-word}
.reqRow .acts{display:flex;gap:8px;flex:0 0 auto;margin-left:auto}
details.fold{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden}
details.fold > summary{padding:15px 16px;cursor:pointer;font-weight:600;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::after{content:"+";color:var(--ink-faint);font-size:18px}
details.fold[open] > summary::after{content:"–"}
details.fold .foldBody{padding:0 16px 16px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);padding-top:16px}

/* mini player + tabs */
.mini{flex:none;display:none;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line);background:var(--card);position:relative}
.mini.show{display:flex}
.mini .bar{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.mini .bar i{display:block;height:100%;background:var(--heather);width:0}
.mini .wrap{flex:1;min-width:0}
.mini b{font-size:13.5px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini p{font-size:11.5px;color:var(--ink-faint)}
.miniBtn{width:32px;height:32px;border-radius:50%;background:var(--heather);display:flex;align-items:center;justify-content:center;flex:none}
.miniBtn svg{fill:var(--heather-ink)}

/* Some hosts pin their own badge to the bottom-right corner, on top of
   everything. When one is present we sit the whole app above it rather
   than let it cover the tabs. */
body.badge-clear .app{padding-bottom:48px;background:var(--paper)}
body.badge-clear .gate{padding-bottom:88px}

/* The host's badge is their attribution and stays, but it does not need
   to be the loudest thing on a phone screen. */
#netlify-badge,
a[href*="netlify.com"],
iframe[src*="netlify"]{
  transform:scale(.7);
  transform-origin:bottom right;
  opacity:.85;
}

.tabbar{flex:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--line);background:var(--paper);padding:9px 6px max(12px,env(safe-area-inset-bottom))}
.tab{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink-faint);transition:color .16s;padding:2px 0}
.tab span{font-size:10px;letter-spacing:.03em}
.tab.on{color:var(--heather)}
.tab svg{stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tab .pip{position:absolute;transform:translate(14px,-4px);width:6px;height:6px;border-radius:50%;background:var(--lichen)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}