/* Gather — Heart Religion Digital Library
   Theme variables; each theme overrides these on <html data-theme="...">. */

:root{
  --bg:#f6f1e7;
  --surface:#fffdf7;
  --ink:#2e2c26;
  --muted:#6d675c;
  --primary:#1d3b2e;
  --primary-soft:rgba(29,59,46,.08);
  --accent:#a07d2c;
  --border:#ddd3bd;
  --danger:#8c3b2e;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;
  --radius:14px;
}

html[data-theme="sage"]{
  --bg:#edf0e8; --surface:#fbfcf8; --ink:#31382f; --muted:#6a7263;
  --primary:#46594b; --primary-soft:rgba(70,89,75,.09);
  --accent:#8a7b4f; --border:#cfd4c6; --danger:#8c3b2e;
}
html[data-theme="clay"]{
  --bg:#f5ebe1; --surface:#fffaf3; --ink:#382d25; --muted:#75655a;
  --primary:#74452f; --primary-soft:rgba(116,69,47,.09);
  --accent:#9c7430; --border:#ddcbb8; --danger:#8c3b2e;
}
html[data-theme="slate"]{
  --bg:#edf0f2; --surface:#fafbfc; --ink:#2c333b; --muted:#666e77;
  --primary:#3a4a59; --primary-soft:rgba(58,74,89,.09);
  --accent:#8a6d3b; --border:#cfd6dc; --danger:#8c3b2e;
}
html[data-theme="plum"]{
  --bg:#f2ebee; --surface:#fdf8fa; --ink:#352b33; --muted:#6f636b;
  --primary:#573a50; --primary-soft:rgba(87,58,80,.09);
  --accent:#97753a; --border:#d9c9d2; --danger:#8c3b2e;
}
html[data-theme="sand"]{
  --bg:#f3ebda; --surface:#fdf8ec; --ink:#38312a; --muted:#6f6455;
  --primary:#6a573a; --primary-soft:rgba(106,87,58,.10);
  --accent:#96742e; --border:#d9cba8; --danger:#8c3b2e;
}
html[data-theme="moss"]{
  --bg:#eef0e3; --surface:#fafbf3; --ink:#2f3324; --muted:#6b6f5c;
  --primary:#3d4a2c; --primary-soft:rgba(61,74,44,.09);
  --accent:#8a7b4f; --border:#d3d6c2; --danger:#8c3b2e;
}
html[data-theme="spruce"]{
  --bg:#e9efec; --surface:#f7faf8; --ink:#2a332f; --muted:#64716c;
  --primary:#2c4a45; --primary-soft:rgba(44,74,69,.09);
  --accent:#8a7b4f; --border:#c9d4cf; --danger:#8c3b2e;
}
html[data-theme="rosewood"]{
  --bg:#f4e9e7; --surface:#faf3f1; --ink:#362b2b; --muted:#6f6262;
  --primary:#6b4247; --primary-soft:rgba(107,66,71,.09);
  --accent:#96742e; --border:#dcc9c6; --danger:#8c3b2e;
}
html[data-theme="ochre"]{
  --bg:#f4ecdc; --surface:#faf5e9; --ink:#38312a; --muted:#6f6455;
  --primary:#7a5a28; --primary-soft:rgba(122,90,40,.10);
  --accent:#8a6d3b; --border:#dccfae; --danger:#8c3b2e;
}
html[data-theme="linen"]{
  --bg:#f1ece1; --surface:#faf7ef; --ink:#33302a; --muted:#6e675c;
  --primary:#5c564a; --primary-soft:rgba(92,86,74,.09);
  --accent:#8a7b4f; --border:#d8d0bd; --danger:#8c3b2e;
}
html[data-theme="dusk"]{
  --bg:#eceef1; --surface:#f7f8fa; --ink:#2c2f38; --muted:#676c78;
  --primary:#454b5e; --primary-soft:rgba(69,75,94,.09);
  --accent:#8a6d3b; --border:#cfd4da; --danger:#8c3b2e;
}

/* Text-size setting scales every rem-based measure. */
html[data-fontsize="small"]{font-size:14px;}
html[data-fontsize="medium"]{font-size:16px;}
html[data-fontsize="large"]{font-size:19px;}

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.55;
  min-height:100vh; padding-bottom:env(safe-area-inset-bottom);
  transition:background .25s ease, color .25s ease;
}
button{font-family:var(--sans);}
[hidden]{display:none !important;}

/* Top bar: no header bar — open top with a journal dateline and a floating gear */
.topbar{
  max-width:720px; margin:0 auto;
  padding:calc(10px + env(safe-area-inset-top)) 16px 4px;
  display:flex; align-items:center; justify-content:space-between;
}
.dateline{
  font-family:var(--serif); font-style:italic; font-size:.86rem;
  color:var(--muted); letter-spacing:.3px;
}
.icon-btn{
  background:none; border:none;
  width:32px; height:32px; border-radius:50%; cursor:pointer; color:var(--muted);
  display:flex; align-items:center; justify-content:center; flex:none;
  padding:0;
}
.icon-btn:active{transform:scale(.92);}

/* Settings panel */
.settings-panel{
  max-width:720px; margin:12px auto 0; background:var(--surface); color:var(--ink);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:18px;
}
.settings-panel h3{font-family:var(--serif); font-size:1.3rem; color:var(--primary); margin-bottom:4px;}
.set-section{padding:12px 0; border-top:1px solid var(--border);}
.set-section:first-of-type{border-top:none;}
.set-section h4{font-size:.8rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; font-weight:600;}
.set-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
.set-head h3{margin-bottom:0;}
.set-close{min-height:44px;}
.theme-opts{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:6px 2px 2px;}
.theme-sw{
  width:48px; height:48px; border-radius:50%; cursor:pointer; padding:0; flex:none;
  border:1px solid rgba(0,0,0,.18);
}
.theme-sw[aria-checked="true"]{outline:2px solid var(--accent); outline-offset:3px;}
.theme-name{font-size:.85rem; color:var(--muted); font-style:italic; text-align:center; margin-top:10px; min-height:1.3em;}
.seg{display:flex; border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.seg button{
  flex:1; background:var(--bg); border:none; color:var(--ink); cursor:pointer;
  padding:12px 4px; font-size:.95rem; min-height:48px;
}
.seg button + button{border-left:1px solid var(--border);}
.seg button[aria-pressed="true"]{background:var(--primary); color:#f7f3ea; font-weight:600;}
.name-row{display:flex; gap:10px;}
.name-row input{
  flex:1; font-size:1rem; padding:12px 14px; min-width:0;
  border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--ink);
}
.name-row input:focus{outline:2px solid var(--primary); outline-offset:1px;}
.mini-primary{
  background:var(--primary); color:#f7f3ea; border:none; border-radius:10px;
  padding:12px 20px; font-size:.95rem; cursor:pointer; flex:none; min-height:48px;
}

/* Install hint */
.install-hint{
  max-width:720px; margin:12px auto 0; padding:12px 16px;
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:10px; display:flex; gap:12px; align-items:center; justify-content:space-between;
  font-size:.9rem;
}
.install-hint p{flex:1;}
.share-glyph{font-size:1.05em;}

/* Layout */
main{max-width:720px; margin:0 auto; padding:16px 16px 120px;}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 18px; margin-bottom:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.card h2{font-family:var(--serif); font-size:1.45rem; font-weight:600; color:var(--primary); margin-bottom:10px;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px;}
.section-head h2{margin-bottom:0;}
.hint{font-size:.88rem; color:var(--muted); margin-bottom:12px;}
.empty{
  font-family:var(--serif); font-size:1.08rem; font-style:italic; color:var(--muted);
  text-align:center; padding:18px 12px; line-height:1.6;
}
.ref{display:block; font-style:normal; font-size:.82rem; margin-top:6px; font-family:var(--sans);}
.smallcaps{font-variant:small-caps; letter-spacing:1px; font-style:normal;}

/* Brain dump */
.dump-row{display:flex; gap:10px; margin-bottom:8px;}
#dumpInput{
  flex:1; font-size:1.05rem; padding:14px 16px;
  border:1px solid var(--border); border-radius:12px; background:var(--bg); color:var(--ink);
  min-width:0;
}
#dumpInput:focus{outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary);}
.mic-btn{
  flex:none; width:54px; height:54px; border-radius:50%;
  background:var(--primary); color:#f7f3ea; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.mic-btn:active{transform:scale(.96);}
.mic-btn.listening{background:var(--danger); animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.65;}}
.mic-status{min-height:1.2em; font-size:.85rem; color:var(--muted); font-style:italic;}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.chip{
  border:1px solid var(--border); background:var(--bg); color:var(--ink);
  border-radius:999px; padding:10px 18px; font-size:.95rem; cursor:pointer;
  min-height:44px; display:inline-flex; align-items:center; gap:8px;
}
.chip:active{background:var(--primary-soft);}
.chip .cdot{width:12px; height:12px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,.12);}

/* Buckets */
.bucket{
  border:1px solid var(--border); border-left:5px solid var(--bcolor, var(--border));
  border-radius:10px; margin-bottom:12px; overflow:hidden; background:var(--surface);
}
.bucket-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:var(--primary-soft); gap:8px;
}
.bucket-id{display:flex; align-items:center; gap:10px; min-width:0;}
.bucket-dot{width:16px; height:16px; border-radius:50%; background:var(--bcolor, var(--border)); flex:none; border:1px solid rgba(0,0,0,.12);}
.bucket-name{font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--primary); overflow-wrap:anywhere;}
.bucket-tools{display:flex; gap:2px; flex:none;}
.mini-btn{
  background:none; border:none; color:var(--muted); font-size:.85rem; cursor:pointer;
  padding:10px 8px; min-width:44px; min-height:44px; border-radius:8px;
}
.mini-btn:active{background:rgba(0,0,0,.06);}
.mini-btn.danger{color:var(--danger);}
.bcolors{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 14px; border-top:1px dashed var(--border);
}
.bcolors .blabel{font-size:.78rem; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-right:2px;}
.bsw{
  width:30px; height:30px; border-radius:50%; border:1px solid rgba(0,0,0,.15);
  cursor:pointer; padding:0; min-width:30px; min-height:30px;
}
.bsw[aria-pressed="true"]{outline:2px solid var(--ink); outline-offset:2px;}
.bucket-items{list-style:none;}
.item{
  display:flex; align-items:center; gap:8px; padding:12px 14px;
  border-top:1px solid var(--border);
}
.item.dragging{opacity:.5;}
.item-text{flex:1; font-size:1rem; min-width:0; overflow-wrap:anywhere;}
.item.done .item-text{text-decoration:line-through; color:var(--muted);}
.item-actions{display:flex; gap:2px; flex:none;}
.act{
  border:1px solid var(--border); background:var(--bg); border-radius:8px;
  min-width:44px; min-height:44px; font-size:1.05rem; cursor:pointer; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.act.done-btn{color:var(--primary); border-color:var(--primary);}
.bucket .empty-note{padding:12px 14px; font-size:.88rem; color:var(--muted); font-style:italic;}

/* Today */
.today-date{font-size:.85rem; color:var(--muted); letter-spacing:.5px;}
.today-row{
  display:flex; align-items:center; gap:12px; padding:14px 6px;
  border-top:1px solid var(--border);
}
.today-row:first-of-type{border-top:none;}
.tick{width:28px; height:28px; flex:none; accent-color:var(--primary); cursor:pointer;}
.today-text{flex:1; font-size:1.02rem; min-width:0; overflow-wrap:anywhere;}
.today-bucket{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; color:var(--muted); letter-spacing:.3px;
}
.today-bucket .cdot{width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,.12);}

/* Week grid */
.week-grid{display:grid; grid-template-columns:1fr; gap:10px;}
@media (min-width:640px){ .week-grid{grid-template-columns:repeat(7,1fr);} }
.day{
  border:1px solid var(--border); border-radius:10px; padding:10px;
  min-height:96px; background:var(--bg);
}
.day.today{outline:2px solid var(--accent); outline-offset:-1px;}
.day.dragover{outline:2px dashed var(--primary); outline-offset:-2px;}
.day-name{font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:2px;}
.day-date{font-family:var(--serif); font-size:1.2rem; color:var(--primary); margin-bottom:8px;}
.day-items{list-style:none;}
.day-items .item{padding:8px 6px; border-top:1px dashed var(--border); font-size:.93rem;}
.day-items .item:first-child{border-top:none;}
.day .empty-note{font-size:.82rem; color:var(--muted); font-style:italic; padding:4px 0;}

/* Done list */
.done-week{margin-bottom:14px;}
.done-week h3{font-family:var(--serif); font-size:1.1rem; color:var(--primary); margin-bottom:6px; font-weight:600;}
.done-week ul{list-style:none;}
.done-week li{
  padding:8px 4px; border-top:1px solid var(--border); font-size:.95rem;
  display:flex; gap:8px; align-items:baseline;
}
.done-week li:first-child{border-top:none;}
.done-check{color:var(--primary); flex:none;}

/* Buttons */
.text-btn{
  background:none; border:none; color:var(--primary); font-size:.95rem; cursor:pointer;
  padding:10px 6px; min-height:44px; text-decoration:underline; text-underline-offset:3px;
  white-space:nowrap;
}

/* Tab bar */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--surface); border-top:1px solid var(--border);
  display:grid; grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:.76rem; letter-spacing:.2px; padding:12px 2px 10px;
  min-height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border-top:3px solid transparent; line-height:1.25;
}
.tabbar button[aria-selected="true"]{color:var(--primary); font-weight:600; border-top-color:var(--accent);}
.tab-count{
  font-size:.72rem; background:var(--primary); color:#f7f3ea; border-radius:999px;
  min-width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px;
}

/* Other apps */
.app-row{
  display:flex; align-items:center; gap:12px; padding:10px 4px;
  border-top:1px solid var(--border); text-decoration:none; color:var(--ink);
}
.app-row:first-child{border-top:none;}
a.app-row:active{background:var(--primary-soft);}
.app-row-icon{width:42px; height:42px; border-radius:11px; flex:none;}
.app-row-name{font-family:var(--serif); font-size:1.08rem; font-weight:600; color:var(--primary); line-height:1.25;}
.app-row-desc{font-size:.85rem; color:var(--muted); line-height:1.45;}
.app-row-mark{
  width:42px; height:42px; border-radius:11px; flex:none;
  border:1px dashed var(--border); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; letter-spacing:2px;
}

/* Onboarding */
.onboard{
  position:fixed; inset:0; z-index:60; background:var(--primary);
  display:flex; align-items:center; justify-content:center; padding:28px;
}
.onboard-card{
  background:var(--surface); border-radius:20px; border:1px solid var(--border);
  padding:36px 28px; max-width:420px; width:100%; text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.onboard-card h2{
  font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--primary);
  line-height:1.3; margin-bottom:6px;
}
.cursive-preview{
  font-family:var(--script); font-size:2.4rem; color:var(--accent);
  min-height:1.4em; margin-bottom:8px; overflow-wrap:anywhere;
}
.onboard-card input{
  width:100%; font-size:1.15rem; padding:14px 16px; text-align:center;
  border:1px solid var(--border); border-radius:12px; background:var(--bg); color:var(--ink);
  margin-bottom:14px;
}
.onboard-card input:focus{outline:2px solid var(--primary); outline-offset:1px;}
.primary-btn{
  width:100%; background:var(--primary); color:#f7f3ea; border:none; border-radius:12px;
  padding:15px; font-size:1.05rem; cursor:pointer; min-height:54px; letter-spacing:.3px;
}
.primary-btn:active{transform:scale(.98);}

/* Sheet */
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40;}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41;
  background:var(--surface); border-top:1px solid var(--border);
  border-radius:18px 18px 0 0; padding:20px 20px calc(24px + env(safe-area-inset-bottom));
  max-width:720px; margin:0 auto;
}
.sheet h3{font-family:var(--serif); font-size:1.3rem; color:var(--primary); margin-bottom:6px; text-align:center;}
.sheet .chips{justify-content:center;}
.sheet-cancel{display:block; margin:14px auto 0;}

/* Footer */
.privacy{padding:20px 6px 40px; text-align:center;}
.privacy h2{font-family:var(--serif); font-size:1.2rem; color:var(--primary); margin-bottom:8px;}
.privacy p{font-size:.9rem; color:var(--muted); max-width:52ch; margin:0 auto 14px;}
.privacy .verse{font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--ink);}
.colophon{font-size:.72rem !important; letter-spacing:3px; margin-top:20px !important;}

/* Commonplace — a verse commonplace book */
.verse-form{margin-top:4px;}
.verse-form h3{font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--primary); margin-bottom:10px;}
.field{display:block; margin-bottom:12px;}
.flabel{display:block; font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; font-weight:600;}
.field input, .field textarea{
  width:100%; font-size:1rem; padding:12px 14px; font-family:var(--sans);
  border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--ink);
}
.field textarea{resize:vertical; min-height:84px; line-height:1.6;}
.field input:focus, .field textarea:focus{outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary);}
.kjv-note{font-size:.82rem; color:var(--muted); font-style:italic; margin-bottom:12px;}
.form-actions{display:flex; gap:10px; align-items:center;}

.verse-card{
  border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:10px; padding:16px; margin-bottom:12px; background:var(--surface);
}
.verse-ref{font-family:var(--serif); font-size:1.28rem; font-weight:600; color:var(--primary); margin-bottom:8px;}
.verse-text{font-family:var(--serif); font-size:1.12rem; font-style:italic; line-height:1.7; margin-bottom:10px;}
.verse-tags{margin-top:0;}
.tchip{
  border:1px solid var(--border); background:var(--primary-soft); color:var(--primary);
  border-radius:999px; padding:7px 15px; font-size:.82rem; cursor:pointer; min-height:38px;
}
.tchip.static{cursor:default;}
.chip[aria-pressed="true"]{background:var(--primary); color:#f7f3ea; border-color:var(--primary);}
.verse-actions{display:flex; gap:6px; margin-top:12px;}

#tagFilters{margin-bottom:12px;}
#tagFilters:empty{margin-bottom:0;}

/* Revisit — slow reflection, one verse at a time */
.revisit{
  position:fixed; inset:0; z-index:60; background:var(--primary);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.revisit-card{
  background:var(--surface); border-radius:20px; border:1px solid var(--accent);
  padding:38px 28px; max-width:520px; width:100%; text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  max-height:86vh; overflow-y:auto;
}
.revisit-count{font-size:.76rem; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); margin-bottom:16px;}
.revisit-ref{font-family:var(--serif); font-size:1.55rem; font-weight:600; color:var(--primary); margin-bottom:16px;}
.revisit-text{font-family:var(--serif); font-size:1.32rem; font-style:italic; line-height:1.8; margin-bottom:16px;}
.revisit-tags{justify-content:center; margin-bottom:6px;}
.revisit-actions{display:flex; gap:10px; justify-content:center; align-items:center; margin-top:22px;}

/* ---- Minimal header: settings gear only ---- */
/* ---- Greeting: plain cursive on the page background ---- */
.greeting-script{
  font-family:var(--script); font-weight:400;
  font-size:2.6rem; line-height:1.35; color:var(--primary);
  text-align:center; margin:4px 0 20px; padding:0 8px;
  overflow-wrap:anywhere;
}

/* ---- Brain-dump pill ---- */
.dump-pill{
  display:flex; align-items:center; gap:4px;
  background:var(--primary); border-radius:999px;
  padding:7px 18px 7px 7px; margin-bottom:4px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  cursor:text;
  transition:background .25s ease;
}
.dump-pill:focus-within{outline:2px solid var(--accent); outline-offset:2px;}
.dump-pill .mic-btn{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:transparent; color:#f7f3ea; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.dump-pill .mic-btn:active{transform:scale(.94);}
.dump-pill .mic-btn.listening{background:var(--danger); animation:pulse 1.4s ease-in-out infinite;}
#dumpInput{
  flex:1; background:transparent; border:none; color:#f7f3ea;
  font-size:1.05rem; padding:12px 6px; min-width:0;
}
#dumpInput::placeholder{color:rgba(247,243,234,.72);}
#dumpInput:focus{outline:none; border:none;}
.dump-dd{margin:10px 2px 4px;}

/* ---- Buckets: cute illustrated tiles ---- */
.buckets-head{align-items:center;}
.bucket-add-btn{
  background:none; border:none; cursor:pointer; color:var(--primary);
  padding:8px; min-width:52px; min-height:52px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.bucket-add-btn:active{transform:scale(.94);}
.bucket-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:6px;}
@media (min-width:640px){ .bucket-grid{grid-template-columns:repeat(3,1fr);} }
.bucket-tile{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 10px 14px; text-align:center; cursor:pointer; position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.bucket-tile:active{transform:scale(.98);}
.bucket-tile .tile-art{display:flex; justify-content:center; margin-bottom:2px;}
.bucket-tile .bname{
  font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--primary);
  overflow-wrap:anywhere; line-height:1.3;
}
.bucket-tile .bcount{font-size:.78rem; color:var(--muted); margin-top:2px; letter-spacing:.3px;}
.tile-edit{
  position:absolute; top:4px; right:4px;
  background:none; border:none; color:var(--muted); cursor:pointer;
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; opacity:.75;
}
.tile-edit:active{background:rgba(0,0,0,.06); opacity:1;}
.tile-items{margin-top:12px; text-align:left; border-top:1px dashed var(--border); padding-top:6px;}
.tile-items .bucket-items{list-style:none;}

/* ---- Planner view switcher ---- */
.view-switch{margin:2px 0 16px;}
.view-switch button[aria-pressed="true"]{background:var(--primary); color:#f7f3ea; font-weight:600;}

/* ---- Day view ---- */
.day-nav{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px;}
.day-nav h3{
  font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--primary);
  text-align:center; flex:1; line-height:1.3;
}
.nav-arrow{
  flex:none; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--border); background:var(--bg); color:var(--primary);
  font-size:1.5rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.nav-arrow:active{background:var(--primary-soft);}
.day-detail{
  border:1px solid var(--border); border-radius:10px; background:var(--bg);
  padding:8px 10px; min-height:120px;
}
.day-detail.dragover{outline:2px dashed var(--primary); outline-offset:-2px;}
.day-detail .day-items{list-style:none;}
.day-detail .empty-note{padding:16px 8px; text-align:center;}

/* ---- Month view ---- */
.month-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.month-grid.mhead{margin-bottom:6px;}
.mhead span{
  text-align:center; font-size:.72rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--muted); padding:4px 0;
}
.mcell{
  aspect-ratio:.92; border:1px solid var(--border); border-radius:10px; background:var(--bg);
  color:var(--ink); cursor:pointer; padding:0; font-family:var(--sans);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:44px;
}
.mcell .mnum{font-size:.92rem; line-height:1;}
.mcell .mdot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;}
.mcell.today{outline:2px solid var(--accent); outline-offset:-1px;}
.mcell.blank{background:transparent; border:none; cursor:default; min-height:0;}
.mcell.dragover{outline:2px dashed var(--primary); outline-offset:-2px;}

/* ---- Coming up ---- */
.up-row{
  display:flex; gap:12px; align-items:baseline; width:100%;
  background:none; border:none; border-top:1px solid var(--border);
  padding:13px 4px; cursor:pointer; text-align:left; color:var(--ink);
  font-family:var(--sans); font-size:.95rem;
}
.up-row:first-of-type{border-top:none;}
.up-row:active{background:var(--primary-soft);}
.up-day{
  font-family:var(--serif); font-weight:600; color:var(--primary);
  flex:none; min-width:118px; font-size:1rem;
}
.up-items{flex:1; color:var(--muted); min-width:0; overflow-wrap:anywhere;}

/* ---- Bucket dropdown: one long oval, opens a list ---- */
.bdd{position:relative;}
.bdd-btn{
  width:100%; display:flex; align-items:center; gap:10px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  border-radius:999px; padding:13px 20px; font-size:1rem; cursor:pointer; min-height:54px;
  text-align:left;
}
.bdd-btn .cdot{width:12px; height:12px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,.12);}
.bdd-ph{color:var(--muted);}
.bdd-btn .chev{margin-left:auto; color:var(--muted); font-size:.8rem; flex:none;}
.bdd-menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.16);
  max-height:262px; /* roughly 5 bucket rows, then scroll */
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.bdd-row{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; border-top:1px solid var(--border);
  padding:13px 18px; font-size:1rem; color:var(--ink); cursor:pointer; text-align:left; min-height:52px;
}
.bdd-row:first-child{border-top:none;}
.bdd-row:active{background:var(--primary-soft);}
.bdd-row .cdot{width:12px; height:12px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,.12);}

/* ---- Add item directly to today ---- */
.sched-tools{display:flex; align-items:center; gap:10px;}
.add-btn{
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer; flex:none;
  background:var(--primary); color:#f7f3ea; font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center; padding-bottom:3px;
}
.add-btn:active{transform:scale(.94);}
.add-form{border-top:1px dashed var(--border); margin-top:10px; padding-top:14px;}
.add-form input[type="text"]{
  width:100%; font-size:1rem; padding:12px 14px; font-family:var(--sans);
  border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--ink);
  margin-bottom:10px;
}
.add-form input[type="text"]:focus{outline:2px solid var(--primary); outline-offset:1px;}
.time-row{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.time-row input{flex:1; margin-bottom:0 !important; text-align:center;}
.time-sep{color:var(--muted); flex:none;}
.time-hint{font-size:.78rem; color:var(--muted); font-style:italic; flex:none;}
.add-bucket{margin-bottom:12px;}
.today-time{flex:none; font-size:.85rem; color:var(--muted); min-width:58px;}
.item-time{
  flex:none; font-size:.78rem; color:var(--muted);
  background:var(--primary-soft); border-radius:999px; padding:3px 10px; white-space:nowrap;
}

/* ---- Bucket customization modal ---- */
#bucketModal .bcolors{border-top:none; padding:4px 0 0;}