*{box-sizing:border-box;margin:0;padding:0}
/* 100dvh, not 100%: on iOS 100% resolves against a viewport that ignores the
   home indicator area and any browser chrome, leaving dead space at the bottom.
   The 100% line stays first as a fallback for anything without dvh. */
html,body{width:100%;height:100%;height:100dvh;overflow:hidden;background:#e8e8e4}
body{display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
:root{--dav-w:26%}
.top-row{display:flex;gap:6px;margin:6px 6px 0;flex-shrink:0}
.points-bar{width:calc(100% - var(--dav-w) - 6px);flex-shrink:0;display:flex;align-items:center;gap:5px;background:#2c2c2c;border-radius:10px;padding:7px 10px;overflow:hidden}
.dav-bar{width:var(--dav-w);flex-shrink:0;display:flex;align-items:center;gap:5px;background:#2c2c2c;border-radius:10px;padding:7px 8px;overflow:hidden}
.class-btn{font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,0.15);border:1.5px solid rgba(255,255,255,0.35);border-radius:14px;padding:4px 10px;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.mode-btn{font-size:11px;padding:4px 8px;border-radius:14px;border:1.5px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.12);color:#ddd;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.mode-btn.active-reg  {background:#1565c0;color:#fff;border-color:#90caf9;font-weight:700;box-shadow:0 0 0 2px #90caf9}
.mode-btn.active-ydp  {background:#7b1fa2;color:#fff;border-color:#ce93d8;font-weight:700;box-shadow:0 0 0 2px #ce93d8}
.mode-btn.active-ydp15{background:#5e1192;color:#fff;border-color:#ba68c8;font-weight:700;box-shadow:0 0 0 2px #ba68c8}
.mode-btn.active-ydp2 {background:#4a0072;color:#fff;border-color:#ab47bc;font-weight:700;box-shadow:0 0 0 2px #ab47bc}
.top-divider{width:1px;height:18px;background:rgba(255,255,255,0.2);flex-shrink:0}
.end-btn{font-size:11px;padding:4px 8px;border-radius:14px;border:1.5px solid #ef9a9a;color:#ffcdd2;background:transparent;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.undo-btn{font-size:13px;padding:4px 8px;border-radius:14px;border:1.5px solid rgba(255,255,255,0.25);color:#ddd;background:rgba(255,255,255,0.1);cursor:pointer;font-family:inherit;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.undo-btn:disabled{opacity:0.3;cursor:default}
.manage-btn{font-size:11px;padding:4px 8px;border-radius:14px;border:1.5px solid rgba(255,255,255,0.25);color:#ddd;background:rgba(255,255,255,0.1);cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;margin-left:auto;-webkit-tap-highlight-color:transparent}
.dav-bar-title{font-size:11px;font-weight:700;color:#fff;font-family:'Suez One',serif;direction:rtl;flex:1;white-space:nowrap;overflow:hidden;min-width:0}
.dav-edit-btn{font-size:9px;padding:3px 6px;border-radius:9px;border:1.5px solid rgba(255,255,255,0.3);background:transparent;color:#ddd;cursor:pointer;font-family:inherit;flex-shrink:0;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.dav-next-btn{font-size:9px;padding:4px 7px;border-radius:9px;border:none;background:#4caf50;color:#fff;cursor:pointer;font-family:inherit;font-weight:700;flex-shrink:0;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.dav-prev-btn{font-size:9px;padding:4px 7px;border-radius:9px;border:1.5px solid rgba(255,255,255,0.3);background:transparent;color:#ddd;cursor:pointer;font-family:inherit;font-weight:700;flex-shrink:0;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.dav-reset-bar-btn{font-size:9px;padding:4px 7px;border-radius:9px;border:1.5px solid #ffb74d;background:transparent;color:#ffb74d;cursor:pointer;font-family:inherit;font-weight:700;flex-shrink:0;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.sync-indicator{font-size:9px;color:rgba(255,255,255,0.5);flex-shrink:0;margin-left:4px}
.main-layout{display:flex;gap:6px;padding:6px;flex:1;min-height:0;overflow:hidden}
.points-side{width:calc(100% - var(--dav-w) - 6px);flex-shrink:0;overflow:hidden;display:flex;flex-direction:column}
.grid{display:grid;gap:5px;width:100%;height:100%;align-content:start}
.davening-side{width:var(--dav-w);flex-shrink:0;display:flex;flex-direction:column}
.davening-panel{background:#fff;border-radius:10px;border:2px solid #c8e6c9;flex:1;overflow:hidden;display:flex;flex-direction:column}
.davening-list{flex:1;padding:3px;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-height:0}
.dav-row{display:flex;align-items:center;justify-content:center;border-radius:5px;flex:1;padding:0 4px}
.dav-text{text-align:center;width:100%;direction:rtl;line-height:1.1;font-family:'Suez One',serif;color:#000;font-weight:700}
.dav-fixed  {background:#fff9c4;border:1.5px solid #f9d835}
.dav-green  {background:#c8e6c9;border:1.5px solid #81c784}
.dav-blue   {background:#bbdefb;border:1.5px solid #64b5f6}
.dav-purple {background:#e1bee7;border:1.5px solid #ce93d8}
.dav-pink   {background:#ffccbc;border:1.5px solid #ff8a65}
.dav-orange {background:#ffe0b2;border:1.5px solid #ffb74d}
.dav-teal   {background:#b2dfdb;border:1.5px solid #4db6ac}
.card{border-radius:10px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.card.bday-active::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#ff6b9d 1.5px,transparent 1.5px),radial-gradient(circle,#ffd93d 1.5px,transparent 1.5px),radial-gradient(circle,#6bcb77 1.5px,transparent 1.5px),radial-gradient(circle,#4d96ff 1.5px,transparent 1.5px),radial-gradient(circle,#ff9f43 1.5px,transparent 1.5px);background-size:28px 28px;background-position:0 0,7px 14px,14px 7px,21px 21px,4px 20px;opacity:0.62;border-radius:8px}
.name-bar{cursor:pointer;position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;padding:0 9px;overflow:hidden}
.sname{font-weight:700;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Suez One',serif}
.mid-bar{display:flex;align-items:center;padding:0 9px;cursor:pointer;position:relative;z-index:1;flex-shrink:0;overflow:hidden}
.mid-left{flex:1}.mid-right{flex:1;text-align:right}
.grand-num,.today-num{font-weight:700;line-height:1}
.grand-lbl,.today-lbl{font-weight:600;margin-top:1px}
.btn-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:4px;position:relative;z-index:1;flex-shrink:0}
.pt-btn{display:block;width:100%;border-radius:6px;border:2px solid transparent;cursor:pointer;user-select:none;position:relative;-webkit-tap-highlight-color:transparent}
.pt-btn:active{transform:scale(0.90)}
.tap-count{position:absolute;bottom:2px;right:4px;font-weight:700;line-height:1}
.tier-start{border:2px solid #bbb}.tier-start .name-bar{background:#e0e0e0}.tier-start .sname{color:#333}.tier-start .mid-bar{background:#f5f5f5}.tier-start .grand-num,.tier-start .today-num{color:#444}.tier-start .grand-lbl,.tier-start .today-lbl{color:#777}
.tier-half1{border:2px solid #66bb6a}.tier-half1 .name-bar{background:#a5d6a7}.tier-half1 .sname{color:#1b5e20}.tier-half1 .mid-bar{background:#f0faf1}.tier-half1 .grand-num,.tier-half1 .today-num{color:#2e7d32}.tier-half1 .grand-lbl,.tier-half1 .today-lbl{color:#388e3c}
.tier-1{border:2px solid #2e7d32}.tier-1 .name-bar{background:#2e7d32}.tier-1 .sname{color:#fff}.tier-1 .mid-bar{background:#e8f5e9}.tier-1 .grand-num,.tier-1 .today-num{color:#1b5e20}.tier-1 .grand-lbl,.tier-1 .today-lbl{color:#388e3c}
.tier-half2{border:2px solid #64b5f6}.tier-half2 .name-bar{background:#90caf9}.tier-half2 .sname{color:#0d47a1}.tier-half2 .mid-bar{background:#f0f7ff}.tier-half2 .grand-num,.tier-half2 .today-num{color:#1565c0}.tier-half2 .grand-lbl,.tier-half2 .today-lbl{color:#1976d2}
.tier-2{border:2px solid #1565c0}.tier-2 .name-bar{background:#1565c0}.tier-2 .sname{color:#fff}.tier-2 .mid-bar{background:#e3f0ff}.tier-2 .grand-num,.tier-2 .today-num{color:#0d47a1}.tier-2 .grand-lbl,.tier-2 .today-lbl{color:#1565c0}
.tier-half3{border:2px solid #bdbdbd}.tier-half3 .name-bar{background:#bdbdbd}.tier-half3 .sname{color:#333}.tier-half3 .mid-bar{background:#f8f8f8}.tier-half3 .grand-num,.tier-half3 .today-num{color:#444}.tier-half3 .grand-lbl,.tier-half3 .today-lbl{color:#666}
.tier-3{border:2px solid #757575}.tier-3 .name-bar{background:#616161}.tier-3 .sname{color:#fff}.tier-3 .mid-bar{background:#f0f0f0}.tier-3 .grand-num,.tier-3 .today-num{color:#333}.tier-3 .grand-lbl,.tier-3 .today-lbl{color:#555}
.tier-half4{border:2px solid #ffd54f}.tier-half4 .name-bar{background:#ffe082}.tier-half4 .sname{color:#7f5100}.tier-half4 .mid-bar{background:#fffde7}.tier-half4 .grand-num,.tier-half4 .today-num{color:#e65100}.tier-half4 .grand-lbl,.tier-half4 .today-lbl{color:#f57f17}
.tier-4{border:2px solid #e65100}.tier-4 .name-bar{background:#e65100}.tier-4 .sname{color:#fff}.tier-4 .mid-bar{background:#fff8e1}.tier-4 .grand-num,.tier-4 .today-num{color:#bf360c}.tier-4 .grand-lbl,.tier-4 .today-lbl{color:#e65100}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;background:rgba(0,0,0,0.5)}
.modal{background:#fff;border-radius:14px;padding:16px;width:100%;max-width:340px;max-height:85vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal h3{font-size:16px;font-weight:700;margin-bottom:12px;color:#111}
.modal-close{float:right;background:none;border:none;font-size:22px;cursor:pointer;color:#444;line-height:1;padding:0}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:0.5px solid #ddd;font-size:13px;color:#333;font-weight:500}
.stat-row:last-of-type{border-bottom:none}
.stat-val{font-weight:700;color:#111;font-size:14px}
.edit-points-section{background:#f0f7ff;border-radius:10px;padding:10px 12px;margin-top:10px;border:1.5px solid #90caf9}
.edit-points-label{font-size:12px;font-weight:700;color:#0d47a1;margin-bottom:8px}
.edit-points-row{display:flex;align-items:center;gap:8px}
.edit-points-input{flex:1;padding:8px 10px;border-radius:8px;border:1.5px solid #90caf9;font-size:16px;font-family:inherit;color:#111;outline:none;background:#fff;text-align:center}
.edit-points-btn{padding:8px 16px;border-radius:8px;border:none;background:#1565c0;color:#fff;font-size:13px;font-family:inherit;cursor:pointer;font-weight:700;white-space:nowrap}
.dav-modal{background:#fff;border-radius:14px;padding:16px;width:100%;max-width:400px;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.dav-modal h3{font-size:15px;font-weight:700;margin-bottom:4px;color:#111}
.sub{font-size:11px;color:#666;margin-bottom:10px}
.section-block{background:#f9f9f9;border-radius:9px;border:1px solid #e0e0e0;padding:10px;margin-bottom:8px}
.section-label{font-size:12px;font-weight:700;color:#444;margin-bottom:6px;direction:rtl;font-family:'Suez One',serif}
.fixed-tag{font-size:10px;color:#aaa;font-style:italic;font-family:sans-serif;font-weight:400}
.dav-item-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.dav-sort-item{display:flex;align-items:center;gap:6px;margin-bottom:4px;padding:4px 6px;border-radius:7px;background:#f9f9f9;border:1px solid #e8e8e8;cursor:default;touch-action:none}
.dav-sort-item:hover{background:#f0f0f0}
.drag-handle{font-size:16px;color:#bbb;cursor:grab;padding:0 4px;flex-shrink:0;user-select:none}
.drag-handle:active{cursor:grabbing}
.dav-item-text{flex:1;font-size:13px;color:#111;direction:rtl;text-align:right;font-family:'Suez One',serif}
.dav-item-del{background:none;border:none;color:#c62828;font-size:16px;cursor:pointer;padding:0 3px;flex-shrink:0}
.dav-add-row{display:flex;gap:6px;margin-top:6px}
.dav-add-input{flex:1;padding:6px 8px;border-radius:7px;border:1.5px solid #ccc;font-size:14px;font-family:'Suez One',serif;color:#111;outline:none;background:#fff;direction:rtl;text-align:right}
.dav-add-btn{padding:6px 12px;border-radius:7px;border:none;background:#1565c0;color:#fff;font-size:12px;cursor:pointer;font-weight:700;font-family:inherit}
.manage-modal{background:#fff;border-radius:14px;padding:16px;width:100%;max-width:360px;max-height:85vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.manage-modal h3{font-size:15px;font-weight:700;margin-bottom:10px;color:#111}
.smrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:0.5px solid #eee}
.smrow-name{flex:1;font-size:13px;color:#111;font-weight:500}
.sm-edit-input{flex:1;padding:5px 8px;border-radius:6px;border:1.5px solid #1565c0;font-size:13px;font-family:inherit;color:#111;outline:none;background:#fff}
.sm-icon-btn{background:#f0f0f0;border:1.5px solid #ccc;cursor:pointer;font-size:12px;padding:5px 9px;border-radius:6px;color:#222;font-family:inherit;font-weight:600}
.sm-icon-btn.danger{background:#fff0f0;border-color:#ffb3b3;color:#c62828}
.confirm-row{display:flex;align-items:center;gap:6px;flex:1}
.confirm-lbl{font-size:12px;color:#c62828;flex:1;font-weight:600}
.confirm-yes{background:#c62828;border:none;color:#fff;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-family:inherit;font-weight:700}
.confirm-no{background:#ddd;border:none;color:#333;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12px;font-family:inherit;font-weight:600}
.add-form{display:flex;gap:6px;margin-top:12px}
.add-input{flex:1;padding:8px 10px;border-radius:8px;border:1.5px solid #ccc;font-size:13px;font-family:inherit;color:#111;outline:none;background:#fff}
.add-submit{padding:8px 14px;border-radius:8px;border:none;background:#1565c0;color:#fff;font-size:13px;font-family:inherit;cursor:pointer;font-weight:700}
.class-modal{background:#fff;border-radius:14px;padding:16px;width:100%;max-width:340px;max-height:85vh;overflow-y:auto}
.class-modal h3{font-size:15px;font-weight:700;margin-bottom:10px;color:#111}
.class-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;margin-bottom:6px;cursor:pointer;border:2px solid #e0e0e0;background:#fafafa}
.class-row.active-class{border-color:#1565c0;background:#e3f0ff}
.class-row-name{flex:1;font-size:14px;font-weight:600;color:#111}
.class-row-count{font-size:11px;color:#666}
.del-class-btn{background:#fff0f0;border:1.5px solid #ffb3b3;color:#c62828;font-size:11px;padding:4px 8px;border-radius:6px;cursor:pointer;font-family:inherit;font-weight:600}
.add-class-form{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:0.5px solid #eee}
.add-class-input{flex:1;padding:8px 10px;border-radius:8px;border:1.5px solid #ccc;font-size:13px;font-family:inherit;color:#111;outline:none;background:#fff}
.add-class-submit{padding:8px 14px;border-radius:8px;border:none;background:#1565c0;color:#fff;font-size:13px;font-family:inherit;cursor:pointer;font-weight:700}
.levelup-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:300;background:rgba(0,0,0,0.65);animation:fadeIn 0.3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.levelup-box{border-radius:20px;padding:28px 32px;text-align:center;max-width:300px;width:88%;animation:popIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275)}
@keyframes popIn{from{transform:scale(0.4);opacity:0}to{transform:scale(1);opacity:1}}
#confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:299}

/* ── added for the rewrite ───────────────────────────────────────────────── */
.mode-btn.active-mode{background:#1565c0;color:#fff;border-color:#90caf9;font-weight:700;box-shadow:0 0 0 2px #90caf9}
#mode-btns{display:flex;gap:5px;align-items:center;overflow:hidden}
.openday-chip{font-size:10px;padding:3px 8px;border-radius:12px;white-space:nowrap;flex-shrink:0;font-weight:700}
.openday-chip.stale{background:#e65100;color:#fff;border:1.5px solid #ffb74d}
body.no-davening .davening-side,body.no-davening .dav-bar{display:none}
body.no-davening .points-bar,body.no-davening .points-side{width:100%}
body.no-points .points-side,body.no-points .points-bar{display:none}
body.no-points .dav-bar,body.no-points .davening-side{width:100%}
.btn-label{position:absolute;top:3px;left:0;right:0;text-align:center;font-size:9px;font-weight:700;
  line-height:1;opacity:0.85;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}
.empty-grid{grid-column:1/-1;text-align:center;padding:40px;color:#888;font-size:14px}
.empty-grid p{margin-bottom:14px}

/* screens */
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;background:#2c2c2c;z-index:400;padding:24px;text-align:center}
.screen h1{font-family:'Suez One',serif;font-size:26px;color:#fff;direction:rtl}
/* Latin headings must not inherit the RTL direction, or '…' jumps to the left. */
.screen h1[dir='ltr']{direction:ltr}
/* Direct children only. `.screen p` matched Clerk's own markup inside
   #signin-mount, painting its error messages white on a white card — every
   validation error rendered as a bare red icon with invisible text. */
.screen > p,.screen > .brand + p{font-size:13px;color:rgba(255,255,255,0.65);max-width:340px;line-height:1.5}
#signin-mount,#signin-mount *{color:initial}
.screen .sub{color:rgba(255,255,255,0.6)}

/* banner */
.banner{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:350;
  padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;max-width:88vw;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.banner.error{background:#c62828;color:#fff}
.banner.ok{background:#2e7d32;color:#fff}

/* shared buttons */
.wide-btn{display:block;width:100%;padding:11px;border-radius:9px;border:none;font-size:14px;
  font-family:inherit;font-weight:700;cursor:pointer;text-align:center;margin-top:10px;-webkit-tap-highlight-color:transparent}
.wide-btn.blue{background:#1565c0;color:#fff;-webkit-text-fill-color:#fff}
.wide-btn.red{background:#c62828;color:#fff;-webkit-text-fill-color:#fff}
.wide-btn.grey{background:#555;color:#fff;-webkit-text-fill-color:#fff}
.wide-btn.orange{background:#e65100;color:#fff;-webkit-text-fill-color:#fff}
.wide-note{padding:11px;border-radius:9px;font-size:14px;font-weight:700;text-align:center;margin-top:10px}
.wide-note.green{background:#e8f5e9;color:#1b5e20;border:1.5px solid #a5d6a7}
.btn-pair{display:flex;gap:8px}
.btn-pair .wide-btn{flex:1}
.bday-box{background:#fff5f5;border-radius:10px;padding:10px;margin-top:10px;border:1.5px solid #ffcdd2}

/* settings + davening editor */
.section-label-en{font-size:12px;font-weight:700;color:#444;margin-bottom:6px}
.section-block.fixed{background:#fffde7;border-color:#f9d835}
.cfg-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.cfg-input{flex:1;padding:6px 8px;border-radius:7px;border:1.5px solid #ccc;font-size:13px;
  font-family:inherit;color:#111;background:#fff;min-width:0}
.cfg-input.rtl{direction:rtl;text-align:right;font-family:'Suez One',serif}
.cfg-num{width:74px;padding:6px 8px;border-radius:7px;border:1.5px solid #ccc;font-size:13px;
  font-family:inherit;color:#111;background:#fff;text-align:center}
.cfg-once{font-size:11px;color:#555;display:flex;align-items:center;gap:4px;white-space:nowrap}
.cfg-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:#222;padding:5px 0;font-weight:600}
.dav-item-row.is-current{background:#e8f5e9;border:1.5px solid #66bb6a;border-radius:7px;padding:3px 6px}
.cur-tag{font-size:9px;color:#2e7d32;font-weight:700;font-family:sans-serif}
.dav-add-btn.ghost{background:#eee;color:#333}

/* Suite branding: every Torah Tools app shows the same wordmark above its own
   name, so a rebbe recognises the family and knows the account carries over. */
.brand{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:6px}
.brand-suite{font-size:11px;letter-spacing:0.22em;font-weight:700;color:rgba(255,255,255,0.45)}
.brand-tool{font-size:12px;color:rgba(255,255,255,0.55);letter-spacing:0.04em}


/* Editing dialogs get room to work in. The davening editor was capped at 400px,
   which made it feel squeezed into the width of the board column even though it
   is centred. Setup and the board editor are the two places where the user needs
   the most space, not the least. */
.dav-modal{max-width:min(880px,94vw)!important;max-height:92vh!important;padding:20px 22px}
.manage-modal{max-width:min(560px,94vw)!important;max-height:92vh!important}
.class-modal{max-width:min(520px,94vw)!important}
@media (min-width:900px){
  .dav-modal .section-block{padding:12px 14px}
}
.cfg-locked{flex:1;padding:6px 8px;border-radius:7px;background:#f0f0f0;border:1.5px solid #e0e0e0;
  font-size:13px;color:#555;font-weight:600}
.cfg-pts{font-size:11px;color:#777;white-space:nowrap}

/* Line icons rather than emoji or glyphs for anything permanently on screen:
   emoji render differently per platform, sit off the text baseline, and cannot
   inherit colour. Celebrations still use emoji — there they are the point. */
.undo-btn,.dav-prev-btn,.dav-next-btn,.modal-close,.mode-btn[data-act="settings"]{
  display:inline-flex;align-items:center;justify-content:center;gap:4px}
.modal-close{float:right;background:none;border:none;cursor:pointer;color:#444;padding:2px;line-height:0}
.undo-btn svg,.dav-prev-btn svg,.dav-next-btn svg{width:13px;height:13px}
.mode-btn[data-act="settings"] svg{width:14px;height:14px}

/* App-level controls (class switcher, settings) belong to the app, not to the
   points module — hiding points must not take them away. They are mirrored into
   the davening bar and revealed only when the points bar is gone. */
.dav-only-controls{display:none;align-items:center;gap:5px;flex-shrink:0}
body.no-points .dav-only-controls{display:inline-flex}
body.no-points .dav-bar-title{flex:1;text-align:center}

/* Reorderable rotation items */
.dav-item-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;padding:6px 8px;
  border-radius:8px;background:#fafafa;border:1px solid #eee}
.dav-item-row.dragging{opacity:.9;background:#e3f0ff;border-color:#90caf9;box-shadow:0 4px 14px rgba(0,0,0,.18)}
/* A comfortable grab target. At 23x19 this was hard to hit with a finger. */
.drag-handle{cursor:grab;color:#aaa;flex-shrink:0;line-height:0;touch-action:none;
  -webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;
  justify-content:center;min-width:34px;min-height:34px;margin:-6px 0;border-radius:7px}
.drag-handle:hover{background:#eef2f7;color:#555}
.drag-handle:active{cursor:grabbing;color:#666}
.nudge{background:none;border:none;color:#aaa;cursor:pointer;padding:0 3px;line-height:1;font-size:13px}
.nudge:hover{color:#333}
.nudge:disabled{opacity:.25;cursor:default}
.section-title-static{font-size:13px;font-weight:700;color:#222;direction:rtl;text-align:right;
  font-family:'Suez One',serif;margin-bottom:8px}
.section-block.is-off{opacity:.5}
.section-block.is-off .dav-item-row{display:none}
.section-block.is-off .dav-add-row{display:none}
.bulk-input{width:100%;padding:9px 10px;border-radius:8px;border:1.5px solid #ccc;font-size:14px;
  font-family:inherit;color:#111;background:#fff;resize:vertical;line-height:1.5}


/* Layout lives in CSS, so screen() clearing the inline display resolves to flex.
   Previously it fell back to block and the davening board stopped at its content
   height instead of filling the viewport. */
#screen-app{display:flex;flex-direction:column;height:100%;height:100dvh;width:100%;min-height:0}
.main-layout{min-height:0}
.davening-side{min-height:0}
.davening-panel{min-height:0}
.davening-list{min-height:0}
.dav-row{min-height:0}

.dav-item-row{transition:transform .12s ease}
.sorting{user-select:none;-webkit-user-select:none}
.sorting .dav-item-row{transition:none}
.dav-item-row.dragging{position:relative;z-index:5;transition:none}

/* Destructive action, kept out of the top bar so it cannot be hit by accident */
.danger-zone{margin-top:18px;padding-top:14px;border-top:1px solid #eee}
.wide-btn.outline-danger{background:transparent;border:1.5px solid #ef9a9a;color:#c62828;
  -webkit-text-fill-color:#c62828;margin-top:0}
.confirm-box{background:#fff8f8;border:1.5px solid #ffcdd2;border-radius:10px;padding:14px}
.confirm-title{font-size:14px;font-weight:800;color:#c62828;margin-bottom:8px}
.confirm-text{font-size:12.5px;color:#444;line-height:1.55;margin-bottom:10px}

/* Top bars: give every control the same height and vertical rhythm.
   Buttons were being clipped at the top because the bars had fixed padding and
   overflow:hidden while the controls sized themselves independently, and the
   davening Edit button was visibly smaller than Back/Next beside it. */
.points-bar,.dav-bar{min-height:40px;overflow:visible;padding:0 10px}
.top-row{align-items:stretch}
.points-bar > *,.dav-bar > *{align-self:center}
.class-btn,.mode-btn,.end-btn,.undo-btn,.manage-btn,.top-pill{
  height:26px;display:inline-flex;align-items:center;justify-content:center;
  line-height:1;padding:0 10px;font-size:11px}
.class-btn{font-size:12px;font-weight:700}
.undo-btn{gap:5px}
.undo-btn span{font-size:11px;font-weight:600}
.top-pill{font-size:10.5px;padding:0 9px;gap:4px}
.dav-bar-title{font-size:11px}

/* Birthday: confetti wash over the whole card plus a badge on the name bar, so
   it reads as a birthday at a glance rather than only from the multiplier. */
.bday-badge{margin-left:auto;flex-shrink:0;line-height:0;opacity:.75;display:inline-flex}
.bday-badge svg{width:17px;height:17px}

/* Safe areas. viewport-fit=cover plus a black-translucent status bar means iOS
   draws the clock and battery OVER the page, so the top bar must be inset by the
   safe area or it sits underneath them. Applies both in Safari and once the app
   is installed to the home screen. */
.top-row{
  margin-top:calc(6px + env(safe-area-inset-top, 0px));
  margin-left:calc(6px + env(safe-area-inset-left, 0px));
  margin-right:calc(6px + env(safe-area-inset-right, 0px));
}
.main-layout{
  padding-left:calc(6px + env(safe-area-inset-left, 0px));
  padding-right:calc(6px + env(safe-area-inset-right, 0px));
  padding-bottom:calc(2px + env(safe-area-inset-bottom, 0px));
}
.screen{
  padding-top:calc(24px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Section header: toggle and title share one line. */
.section-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.section-head .section-title-static{flex:1;margin-bottom:0;text-align:right}
.section-head .cfg-toggle{padding:0;flex-shrink:0}
.section-head .fixed-tag{flex-shrink:0}
.section-block{padding:10px 12px}


/* One pill shape for every top-bar control, matching Edit / Back / Next. */
.class-btn,.mode-btn,.end-btn,.undo-btn,.manage-btn,.top-pill,.dav-edit-btn{
  height:26px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;
  line-height:1;padding:0 11px;font-size:10.5px;font-weight:600;gap:4px;white-space:nowrap}
.class-btn{font-size:11.5px;font-weight:700}

/* Trim the gap under the board: the panel should reach the same baseline as the
   cards beside it. */
.main-layout{padding-top:6px}
.davening-list{padding:3px}