/* ==========================================================================
   Bayti design layer: the landing page's look, applied to the whole app.
   Loaded after app.css. It restyles shared components only (cards, buttons,
   fields, header, navigation, modals), so every page follows automatically.
   ========================================================================== */
:root{
 --night:#17110c;--surface:#221a13;--surface-2:#2a2017;--line:#3a2c20;--line-2:#4a3829;
 --text:#f5ede3;--dust:#bba993;--dust-2:#9c8a76;
 --ember:#f0a94e;--clay:#e0693a;--sage:#7fbf9e;--danger:#e8705f;
 --flame-1:#f0a94e;--flame-2:#e0693a;--flame-ink:#1b1208;--ring:#f0a94e80;
 --field:#140f0b;--glass:rgba(23,17,12,.82);
 --display:'Secular One','Rubik',system-ui,sans-serif;
 --body:'Rubik',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
 --r-lg:24px;--r:18px;--r-sm:13px;
}
body.light{
 --night:#faf5ee;--surface:#fffdf9;--surface-2:#ffffff;--line:#ecdfd1;--line-2:#e0cfbd;
 --text:#2a1e14;--dust:#7c6955;--dust-2:#9a8672;--field:#fffdfa;--glass:rgba(250,245,238,.86);--ring:#e0693a55;
}

/* ---------- base ---------- */
body{font-family:var(--body);color:var(--text);background:radial-gradient(1000px 520px at 85% -10%,#f0a94e1f,transparent 60%),radial-gradient(800px 480px at -10% 110%,#e0693a14,transparent 60%),var(--night);background-attachment:fixed;-webkit-font-smoothing:antialiased}
body.light{background:radial-gradient(1000px 520px at 85% -10%,#f0a94e24,transparent 60%),radial-gradient(800px 480px at -10% 110%,#e0693a12,transparent 60%),var(--night);color:var(--text)}
::selection{background:#f0a94e55}
:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08}
h2{font-size:clamp(19px,2vw,23px);line-height:1.2}
h3{font-size:18px;line-height:1.25}
.muted,.empty{color:var(--dust)}
.eyebrow{font-family:var(--body);font-size:12.5px;letter-spacing:.01em;font-weight:600;color:var(--ember);text-transform:none}
.error{color:#ff9f8f}
body.light .error{color:#c0392b}

/* ---------- header ---------- */
.topbar{background:var(--glass);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid #ffffff0f;box-shadow:none}
body.light .topbar{border-bottom-color:#0000000d}
.brand b{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:0}
.brand small{color:var(--dust)}
.logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,var(--ember),var(--clay));color:#fff;box-shadow:0 10px 22px -10px #e0693aaa;font-size:0}
.logo .ui-logo{width:22px;height:22px}
.desktop-nav a{border-radius:99px;padding:8px 14px;color:var(--dust);font-weight:500}
.desktop-nav a:hover{background:#ffffff0d;color:var(--text)}
.desktop-nav a[aria-current=page]{background:#ffffff12;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
body.light .desktop-nav a:hover,body.light .desktop-nav a[aria-current=page]{background:#0000000a}
.icon{border-radius:13px;border:1px solid var(--line);background:#ffffff08;color:var(--text)}
.icon:hover{border-color:var(--line-2);background:#ffffff10}
body.light .icon{background:#fff;border-color:var(--line)}
.icon .ui-ic{width:19px;height:19px}
.lang-btn{font-size:12.5px;font-weight:600;width:auto;padding:0 12px}
.bell-badge{background:var(--clay);border-color:var(--night)}

/* phones: the logo alone carries the brand, so the header buttons all fit */
@media (max-width:560px){.brand>span:last-child{display:none}.top-actions{gap:5px}.icon{width:38px;height:38px}.lang-btn{padding:0 10px}}
/* ---------- bottom navigation (phones) ---------- */
@media (max-width:900px){
 .mobile-nav{background:var(--glass);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid #ffffff14;border-radius:26px;box-shadow:0 18px 40px -18px #000c;padding:6px}
 body.light .mobile-nav{border-color:#0000000f;box-shadow:0 18px 40px -22px #7a5a3a66}
 .mobile-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;border-radius:20px;color:var(--dust);text-decoration:none;font-size:0}
 .mobile-nav a .ui-ic{width:23px;height:23px}
 .mobile-nav a small{font-size:11px;font-weight:500;line-height:1.1}
 .mobile-nav a[aria-current=page]{color:var(--ember);background:#f0a94e1a}
 body.light .mobile-nav a[aria-current=page]{color:var(--clay);background:#e0693a14}
}

/* ---------- page heading ---------- */
.page-head h1{margin:6px 0 8px}
.page-head p{color:var(--dust);font-size:15.5px;line-height:1.6;max-width:40em;margin:0}

/* ---------- surfaces ---------- */
.card{background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 26px 60px -34px #000d}
body.light .card{background:var(--surface);box-shadow:0 18px 44px -30px #7a5a3a55}
.panel{padding:22px}
.panel-head{margin-bottom:6px}
.panel-head h2{margin:2px 0}
.row{border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row small{color:var(--dust)}
.notice{background:#f0a94e14;border:1px solid #f0a94e40;color:#f3dcc0;border-radius:var(--r-sm)}
body.light .notice{background:#f0a94e17;border-color:#e0693a40;color:#6d4520}
.empty{padding:34px 18px;font-size:15px}

/* ---------- buttons ---------- */
.primary{min-height:46px;padding:0 22px;border-radius:99px;background:linear-gradient(150deg,var(--ember),var(--clay));color:var(--flame-ink);font-weight:700;font-size:15px;box-shadow:0 14px 30px -14px #e0693acc,inset 0 1px 0 #ffffff55;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.primary:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 18px 34px -14px #e0693aee,inset 0 1px 0 #ffffff55}
.primary:active{transform:scale(.98)}
.primary.wide{min-height:50px;font-size:16px}
.chip{border:1px solid var(--line-2);border-radius:99px;padding:8px 14px;background:#ffffff08;color:#e6d9c8;font-size:12.5px;font-weight:600}
.chip:hover{border-color:var(--ember);color:var(--text)}
body.light .chip{background:#fff;color:#4a3826;border-color:var(--line-2)}
.pill{padding:4px 10px;border-radius:99px;background:#ffffff10;color:var(--dust);font-size:11px;font-weight:600}
body.light .pill{background:#0000000a}
.pill.urgent{background:#e8705f26;color:#ffb3a7}
.pill.high{background:#e0693a26;color:#ffc09a}
.pill.medium{background:#f0a94e22;color:#f6cd8f}
body.light .pill.urgent{color:#b23b2b}body.light .pill.high{color:#b0501f}body.light .pill.medium{color:#96601a}
.close{border-radius:50%}

/* ---------- fields ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]),select,textarea{font-family:var(--body);font-size:15px;color:var(--text);background:var(--field);border:1px solid var(--line-2);border-radius:14px;min-height:46px;padding:11px 14px}
textarea{min-height:96px;line-height:1.55}
input::placeholder,textarea::placeholder{color:var(--dust-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 4px #f0a94e2a}
body.light input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]),body.light select,body.light textarea{background:var(--field);color:var(--text);border-color:var(--line-2)}
input[type=checkbox],input[type=radio]{accent-color:var(--clay)}

/* ---------- modals (bottom sheet on phones) ---------- */
.modal{background:rgba(10,7,5,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-card{background:linear-gradient(170deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:28px;box-shadow:0 40px 90px -30px #000}
body.light .modal-card{background:var(--surface)}
.modal-card h2{font-size:24px;margin-bottom:14px}
@media (max-width:620px){.modal{padding:0}.modal-card{width:100%;border-radius:28px 28px 0 0;padding-bottom:calc(25px + env(safe-area-inset-bottom,0px))}}

/* ---------- dashboard and shared blocks ---------- */
.hero h1{font-size:clamp(32px,5vw,50px)}
.stat strong{font-family:var(--display);font-weight:400;font-size:40px;letter-spacing:0;line-height:1.1}
.stat small{color:var(--dust);font-size:13px}
.quick-links a{border-radius:var(--r);border:1px solid var(--line);background:#ffffff06;transition:border-color .15s ease,background .15s ease}
.quick-links a:hover{border-color:var(--line-2);background:#ffffff0c}
.quick-links small{color:var(--dust)}
body.light .quick-links a{background:#fff}
.feed-tab,.feed-subtab{border-radius:99px}
.feed-tab.active,.feed-subtab.active{background:var(--text);color:var(--night);border-color:var(--text)}
.toast{border-radius:99px;background:linear-gradient(150deg,var(--ember),var(--clay));color:var(--flame-ink);font-weight:700;box-shadow:0 16px 36px -14px #000c}
.hint-box{border-radius:var(--r)}
.auth-card{background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:28px}
body.light .auth-card{background:var(--surface)}

@media (prefers-reduced-motion:reduce){.primary,.quick-links a{transition:none}.primary:hover{transform:none}}

/* ==========================================================================
   Fit every screen (found by measuring all pages at 320-1366px)
   ========================================================================== */
/* emergency cards: edit and delete sat on top of each other (an old one-button rule) */
.contact .note-actions .icon{position:static}
/* fields never grow wider than their box (date pickers and wide inputs pushed into their neighbours) */
label input,label select,label textarea{width:100%;min-width:0;max-width:100%}
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{min-width:0;max-width:100%}
form>*,.modal-card form>*{min-width:0}
/* sign-in and sign-up forms: an even column with room between fields */
.auth-card form{display:grid;gap:12px}
.auth-card form>input,.auth-card form>select,.auth-card form>button{margin:0}
.auth-card .logo .ui-logo{width:22px;height:22px}
/* post actions wrap instead of being cut off on small phones */
.feed-post-actions{flex-wrap:wrap;row-gap:8px}
/* finger-sized targets on phones (at least ~40px), without changing how things look */
@media (max-width:600px){
 .hint-x{min-height:40px;padding-inline:14px}
 main .icon{min-width:40px;min-height:40px}
 .note-actions .icon,.contact .note-actions .icon{width:38px;height:38px}
 .chip{min-height:38px;display:inline-flex;align-items:center;justify-content:center}
 .like-btn{min-height:40px}
 .check{position:relative}
 .check::before{content:'';position:absolute;inset:-7px}
 .close{min-width:40px;min-height:40px;display:grid;place-items:center}
 .cal-chip{min-height:20px;font-size:10px;padding:3px 4px;line-height:1.3}
}

/* ===== Announcement banner (written in the admin) ===== */
.announce{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:14px 16px;border-radius:var(--r);background:linear-gradient(150deg,#f0a94e24,#e0693a14);border:1px solid #f0a94e55}
.announce-ico{font-size:22px;flex:none}
.announce .grow{min-width:180px}
.announce b{display:block;font-size:15px}
.announce p{margin:2px 0 0;color:var(--dust);font-size:14px;overflow-wrap:anywhere}
.announce-x{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--text);font-size:22px;line-height:1;cursor:pointer}

/* ==========================================================================
   Form fields that sit right on every screen
   ========================================================================== */
/* A field fills its row unless a layout (toolbar, stepper, table) sizes it on purpose. */
form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not(.qty-input),
form select,form textarea{width:100%;max-width:100%;min-width:0}
/* Phones zoom into any field with text smaller than 16px and the form jumps: keep 16px there. */
@media (max-width:900px){
 input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]),select,textarea{font-size:16px!important}
}
/* Saved email/password autofill: keep our field colors instead of the browser's white/blue box. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{
 -webkit-text-fill-color:var(--text);caret-color:var(--text);
 -webkit-box-shadow:0 0 0 1000px var(--field) inset!important;box-shadow:0 0 0 1000px var(--field) inset!important;
 border-color:var(--line-2);transition:background-color 99999s ease-out 0s}
input:-webkit-autofill:focus{border-color:var(--ember);-webkit-box-shadow:0 0 0 1000px var(--field) inset,0 0 0 4px #f0a94e2a!important}
/* Date and time pickers on phones ignore width:100% unless their native look is reset. */
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:none;appearance:none;min-width:0;display:block;text-align:start;line-height:1.3}
input::-webkit-date-and-time-value{text-align:start}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(.4);opacity:.8;cursor:pointer}
body.light input::-webkit-calendar-picker-indicator{filter:none}
/* Email / link fields type left-to-right, but their Hebrew placeholder should still read from the right. */
[dir=rtl] input[dir=ltr]:placeholder-shown,[dir=rtl] input[type=email]:placeholder-shown,[dir=rtl] input[type=url]:placeholder-shown{direction:rtl;text-align:right}
/* Selects: same height and look as text fields. */
select{-webkit-appearance:none;appearance:none;padding-inline-end:38px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bba993' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-size:18px!important;background-position:left 12px center!important}
[dir=ltr] select{background-position:right 12px center!important}
select::-ms-expand{display:none}
/* Shopping: the item name always gets the room; the "who" picker is capped. */
.shopping-add{grid-template-columns:minmax(0,1fr) auto minmax(0,170px) auto}
.shopping-add input[name=item]{min-width:120px}
@media (max-width:700px){.shopping-add{grid-template-columns:1fr}.shopping-add select{max-width:none}}
/* Long words, links and emails never push a card wider than the screen. */
.card,.row .grow,.notice,.hint-text,.modal-card{overflow-wrap:anywhere}
img,video,svg{max-width:100%}

/* ---------- Tabs: never cut off; a sideways strip on narrow screens ---------- */
.feed-tabs,.feed-subtabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.feed-tabs::-webkit-scrollbar,.feed-subtabs::-webkit-scrollbar{display:none}
.feed-tab{flex:1 0 auto;white-space:nowrap;padding:10px 16px;border-radius:99px;background:#ffffff08;border:1px solid var(--line);color:var(--dust)}
body.light .feed-tab{background:#fff}
.feed-subtabs{gap:6px;border-bottom:0;padding-bottom:2px;margin-bottom:14px}
.feed-subtabs.wrap{flex-wrap:wrap;overflow:visible}
.feed-subtab{flex:none;white-space:nowrap;padding:8px 14px;border:1px solid var(--line);border-radius:99px;color:var(--dust);font-size:13px;font-weight:600}
.feed-subtab:hover{color:var(--text);border-color:var(--line-2)}
.feed-tab.active,.feed-subtab.active{background:var(--text);color:var(--night);border-color:var(--text)}
/* calendar date badge never breaks */
.datebox{white-space:nowrap;min-width:52px}

/* badges and counters never break mid-word */
.pill,.bell-badge,.adm-badge,.level-chip,.m-tag{white-space:nowrap;flex:none}

/* ---------- Phones: lists with many actions use two lines, so the title always has room ---------- */
@media (max-width:560px){
 .row.searchable{flex-wrap:wrap;row-gap:8px}
 .row.searchable>.grow{flex:1 1 calc(100% - 60px);min-width:0}
 .row.searchable>.grow+*{margin-inline-start:48px}
 .row.searchable>.grow~*{flex:none}
 /* filters: search on its own line, the pickers share the next one */
 .toolbar{flex-wrap:wrap}
 .toolbar input{flex:1 1 100%}
 .toolbar select{flex:1 1 0;min-width:0}
 .adm-toolbar input{flex:1 1 100%}
 .adm-toolbar select{flex:1 1 0}
}

/* ===== Fields: the same on every page and every phone ===== */
/* Emails, passwords, links and numbers are typed left-to-right even in Hebrew, so '@' and '.' never jump;
   the text still lines up with the page (right side in Hebrew), and the Hebrew placeholder stays readable. */
input[type=email],input[type=password],input[type=url],input[type=tel],input[type=number],input[dir=ltr]{direction:ltr}
[dir=rtl] input[type=email],[dir=rtl] input[type=password],[dir=rtl] input[type=url],[dir=rtl] input[type=tel],[dir=rtl] input[dir=ltr]{text-align:right}
[dir=rtl] input[type=email]::placeholder,[dir=rtl] input[type=password]::placeholder,[dir=rtl] input[type=url]::placeholder,[dir=rtl] input[type=tel]::placeholder{direction:rtl;text-align:right}
/* Saved-password autofill (Chrome, Samsung Internet, Safari) paints fields light; keep them in the theme. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{
 -webkit-text-fill-color:var(--text);caret-color:var(--text);
 -webkit-box-shadow:0 0 0 1000px var(--field) inset!important;box-shadow:0 0 0 1000px var(--field) inset!important;
 border-color:var(--line-2);transition:background-color 9999s ease-out 0s}
input:-webkit-autofill:focus{border-color:var(--ember)}
/* Phones: 16px text stops iPhones from zooming into a field when it is tapped. */
@media (max-width:900px){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}}
/* A field in a stacked form always spans the form (labels, cards and sign-in included). */
.auth-card input:not([type=checkbox]):not([type=radio]),.auth-card select,.auth-card textarea,
.adm-form input:not([type=checkbox]):not([type=radio]),.adm-form select,.adm-form textarea{width:100%;max-width:100%}
.auth-card form{gap:12px}
.auth-card label{display:grid;gap:6px;color:var(--dust);font-size:13px}
input[type=date],input[type=time],input[type=datetime-local]{min-width:0}
select{appearance:auto}

/* maintenance: the owner's warning bar and the users' screen */
.maint-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px;padding:14px 16px;border-radius:16px;background:#e8705f1f;border:1px solid #e8705f80;color:var(--text)}
.maint-bar b{font-size:15px}
.maint-bar span{flex:1 1 260px;color:var(--dust);font-size:13.5px}
.maint-card{text-align:center;display:grid;justify-items:center;gap:10px}
.maint-card .logo{width:56px;height:56px;border-radius:16px}
.maint-card .logo .ui-logo{width:30px;height:30px}
.join-form{display:grid;gap:12px}
.join-form label{display:grid;gap:6px;color:var(--dust);font-size:13px}
.join-form input[readonly]{opacity:.75}

/* ---------- Today screen ---------- */
.today-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:22px}
.today-head h1{margin:6px 0 7px}
.today-head p{margin:0;color:var(--dust);font-size:15px}
.today-card{overflow:hidden}
.today-card-head{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;padding:22px 22px 15px;border-bottom:1px solid var(--line)}
.today-card-head h2{margin:3px 0 0}
.today-count{padding:7px 11px;border-radius:99px;background:#ffffff09;color:var(--dust);font-size:12px}
.today-timeline{padding:8px 22px 18px}
.today-hour{display:flex;align-items:center;gap:12px;margin:17px 0 6px;color:var(--ember);font-size:12px;font-weight:800}
.today-hour:after{content:"";height:1px;background:var(--line);flex:1}
.today-hour span{min-width:42px}
.today-line{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}
.today-line:last-child{border-bottom:0}
.today-line .check{margin-inline-end:1px}
.today-type{flex:none;width:31px;height:31px;border-radius:10px;display:grid;place-items:center;font-weight:800}
.task-type{background:#f0a94e18;color:var(--ember)}
.event-type{background:#e0693a18;color:var(--clay)}
.meal-type{background:#7fbf9e18;color:var(--sage)}
.dinner-line{margin-top:2px}
.dinner-hour{margin-top:22px}
.today-alert{padding:15px 20px;margin-bottom:14px;border-color:#e8705f55;background:linear-gradient(145deg,#e8705f12,var(--surface))}
.today-alert-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.today-alert-head>span{font-size:21px}
.today-alert-head b{display:block}
.today-alert-head small{display:block;color:var(--dust);margin-top:2px}
.today-line.overdue{border-bottom:1px solid #e8705f26}
.today-empty{text-align:center;padding:54px 15px;color:var(--dust);display:grid;place-items:center;gap:7px}
.today-empty div{font-size:34px}
.today-empty b{color:var(--text);font-size:18px}
.today-bottom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.today-link-card{display:flex;align-items:center;gap:12px;padding:17px 18px;transition:transform .15s ease,border-color .15s ease}
.today-link-card:hover{transform:translateY(-2px);border-color:var(--line-2)}
.today-link-card>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#f0a94e14;color:var(--ember)}
.today-link-card>div{flex:1}
.today-link-card b{display:block}
.today-link-card small{display:block;color:var(--dust);margin-top:2px}

/* ---------- Rotating duties ---------- */
.rotation-intro{display:flex;gap:15px;align-items:center;margin-bottom:14px;background:linear-gradient(145deg,#f0a94e10,var(--surface))}
.rotation-intro-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:#f0a94e18;font-size:25px}
.rotation-intro h2{margin:0 0 5px}
.rotation-intro p{margin:0;color:var(--dust);font-size:13px}
.rotation-form{display:grid;gap:12px}
.rotation-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rotation-form label{display:block;color:var(--dust);font-size:12px;font-weight:600}
.rotation-form label input,.rotation-form label textarea,.rotation-form label select{margin-top:5px}
.rotation-form select[multiple]{min-height:112px}.rotation-order-list{display:grid;gap:7px;margin-top:5px}.rotation-member-select{margin-top:0!important}
.rotation-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.rotation-row:last-child{border-bottom:0}
.rotation-symbol{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:#f0a94e14}
.rotation-row small{display:block;color:var(--dust);font-size:11px;margin-top:3px}
.rotation-off{opacity:.68}

/* ---------- Calendar subscription ---------- */
.calendar-sync-head{display:flex;align-items:center;gap:12px}
.calendar-sync-head h2{margin:2px 0 0}
.calendar-sync-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#f0a94e18;color:var(--ember);font-size:22px}
.calendar-sync-box{padding:14px;border:1px solid var(--line);border-radius:16px;background:#ffffff05}
.calendar-sync-box label{font-size:11px;color:var(--dust);font-weight:700}
.calendar-sync-box input{direction:ltr;text-align:left;margin-top:6px}
.calendar-sync-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.calendar-sync-actions .calendar-action{min-width:0;height:52px;min-height:52px;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;line-height:1.15;text-decoration:none;white-space:nowrap;overflow:hidden;border-radius:14px;font-size:13px;font-weight:800;box-sizing:border-box}
.calendar-sync-actions .primary.calendar-action{font-size:13px}
.calendar-sync-actions .calendar-action-apple{font-size:13px}
.calendar-sync-actions .calendar-action>span:first-child{font-size:17px;line-height:1;flex:0 0 auto}
.calendar-sync-actions .calendar-action-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-sync-actions .calendar-action.is-copied{transform:none}
.calendar-sync-actions .calendar-action:disabled{opacity:1;cursor:default}
.calendar-sync-steps{display:grid;gap:8px;margin-top:14px}
.calendar-sync-steps div{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--dust)}
.calendar-sync-steps b{width:21px;height:21px;flex:none;border-radius:50%;display:grid;place-items:center;background:#f0a94e18;color:var(--ember);font-size:10px}

@media (max-width:700px){
 .today-head{align-items:stretch;flex-direction:column}
 .today-head .chip{align-self:flex-start}
 .today-card-head{align-items:flex-start;flex-direction:column}
 .today-timeline{padding-inline:15px}
 .today-bottom-grid{grid-template-columns:1fr}
 .rotation-form-grid{grid-template-columns:1fr}
 .rotation-row{align-items:flex-start;flex-wrap:wrap}
 .rotation-row .grow{min-width:calc(100% - 54px)}
}
@media (max-width:560px){
 .calendar-sync-actions{grid-template-columns:1fr}
 .calendar-sync-actions .calendar-action{width:100%;height:52px;min-height:52px;padding-inline:14px}
}
@media (min-width:701px) and (max-width:1100px){
 .calendar-sync-actions .calendar-action{height:52px;min-height:52px}
}

/* ---------- My Day entry on the original Home dashboard ---------- */
.today-home-card{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:16px 18px;text-decoration:none;color:inherit;border-color:#f0a94e35;background:linear-gradient(135deg,#f0a94e12,var(--surface));transition:transform .15s ease,border-color .15s ease,background .15s ease}
.today-home-card:hover{transform:translateY(-2px);border-color:#f0a94e66;background:linear-gradient(135deg,#f0a94e18,var(--surface))}
.today-home-icon{width:46px;height:46px;flex:none;border-radius:15px;display:grid;place-items:center;background:#f0a94e18;font-size:22px}
.today-home-card b{display:block;font-size:17px;margin-top:2px}
.today-home-card small{display:block;color:var(--dust);margin-top:3px}
.today-home-arrow{font-size:20px;color:var(--ember);padding-inline-start:8px}

/* ========================================================================
   Bayti Light Theme — FINAL ALL-PAGES SURFACE AUDIT
   This block is intentionally last: ui.css loads after app.css.
   ======================================================================== */
body.light .panel,
body.light .stat,
body.light .event,
body.light .contact,
body.light .note,
body.light .person-card,
body.light .event-card,
body.light .task-card,
body.light .task-item,
body.light .task-list .card,
body.light .shopping-card,
body.light .document-card,
body.light .permission-card,
body.light .settings-card,
body.light .profile-card,
body.light .family-feature,
body.light .family-family-card,
body.light .album-card,
body.light .album-detail-head,
body.light .gallery-section,
body.light .challenge-card,
body.light .challenge-row,
body.light .rotation-row,
body.light .today-link-card,
body.light .calendar-list .event-card {
  background: var(--surface) !important;
  color: var(--text);
  border-color: var(--line);
}

/* Family hub tiles / tabs / bookmarks */
body.light .family-hub-hero {
  background: linear-gradient(145deg,#fffaf4,#fffdf9) !important;
  color: var(--text);
  border-color: var(--line);
}
body.light .family-hub-nav a,
body.light .family-subnav a,
body.light .gallery-tab,
body.light .feed-tab,
body.light .feed-subtab,
body.light .section-tab,
body.light .tab,
body.light .subtab,
body.light .filter-tab,
body.light .bookmark,
body.light .nav-pill {
  background: #fff !important;
  color: #594636 !important;
  border-color: var(--line) !important;
  box-shadow: none;
}
body.light .family-hub-nav a.active,
body.light .family-subnav a.active,
body.light .gallery-tab.active,
body.light .feed-tab.active,
body.light .feed-subtab.active,
body.light .section-tab.active,
body.light .tab.active,
body.light .subtab.active,
body.light .filter-tab.active,
body.light .bookmark.active,
body.light .nav-pill.active {
  background: linear-gradient(150deg,var(--ember),var(--clay)) !important;
  color: var(--flame-ink) !important;
  border-color: transparent !important;
}

/* Remaining dark feature tiles introduced by the family/community redesign */
body.light .family-community,
body.light .family-gallery,
body.light .family-notes,
body.light .family-challenges {
  background: #fff !important;
  color: var(--text);
  border-color: var(--line);
}

/* Gallery and album surfaces */
body.light .gallery-cell,
body.light .album-cover,
body.light .memory-cell,
body.light .gallery-viewer-meta,
body.light .note-poll-option {
  background: #fff !important;
  color: var(--text);
  border-color: var(--line);
}
body.light .gallery-day-head > span,
body.light .family-hub-orb,
body.light .season-icon,
body.light .invite-icon,
body.light .rotation-symbol,
body.light .today-link-card > span,
body.light .calendar-sync-icon,
body.light .today-home-icon {
  background: #f8f2ed !important;
  color: #a8621e;
  border-color: #eadfd4;
}

/* Community post/comment controls */
body.light .feed-post,
body.light .comments-section,
body.light .comments-modal-list,
body.light .comments-modal-list .comment-row,
body.light .feed-album-frame,
body.light .feed-album-item {
  background: #fff;
  color: var(--text);
  border-color: var(--line);
}
body.light .like-btn,
body.light .feed-icon-btn,
body.light .sheet-btn {
  background: #fff !important;
  color: #3f3227 !important;
  border-color: var(--line) !important;
}
body.light .comment-form input {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Notes, polls, challenges and progress */
body.light .note-poll-option:hover,
body.light .sheet-btn:hover,
body.light .chip:hover,
body.light .quick-links a:hover {
  background: #f8f2ed !important;
}
body.light .score-bar,
body.light .ch-bar,
body.light .task-progress {
  background: #eee7e0 !important;
}
body.light .pb-note-body,
body.light .hint-box,
body.light .push-status,
body.light .calendar-sync-box,
body.light .builder-card,
body.light .event-role-section,
body.light .repeat-builder,
body.light .rotation-intro {
  background: #faf6f2 !important;
  color: var(--text);
  border-color: var(--line);
}

/* Calendar / Today */
body.light .calendar-day-heading {
  color: #3f3227 !important;
  background: linear-gradient(180deg,#fffdfb 72%,transparent) !important;
}
body.light .datebox {
  background: #f0a94e !important;
  color: #6e3f12 !important;
}
body.light .today-count,
body.light .event-meta span,
body.light .event-transport span,
body.light .today-transport span,
body.light .task-type,
body.light .event-type,
body.light .meal-type {
  background: #f8f2ed !important;
  color: #695441 !important;
}

/* Forms, labels and small controls that still used dark-theme literals */
body.light .auth-card,
body.light .modal-card,
body.light .modal-card input,
body.light .modal-card textarea,
body.light .modal-card select,
body.light .toolbar input,
body.light .toolbar select,
body.light .shopping-add input,
body.light .shopping-add select,
body.light .qty-stepper,
body.light .qty-btn,
body.light .check,
body.light .close {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body.light .narrow label,
body.light .auth-card label,
body.light .rotation-form label,
body.light .muted,
body.light .empty,
body.light .perm-cell,
body.light .shop-cat-header,
body.light .task-filter-count {
  color: var(--dust) !important;
}

/* Dark text/background combinations left by legacy classes */
body.light .pill-table td code,
body.light .tag,
body.light .pill,
body.light .chip {
  background: #f8f2ed !important;
  color: #594636 !important;
  border-color: var(--line) !important;
}
body.light .pill.urgent { background:#fbe4e8 !important; color:#9c2038 !important; }
body.light .pill.high { background:#fbe8df !important; color:#9c3f20 !important; }
body.light .pill.medium { background:#fbeedb !important; color:#8a5417 !important; }
body.light .pill.low { background:#e1f3e8 !important; color:#1f6b40 !important; }

/* Preserve intentionally dark media itself */
body.light .gallery-play,
body.light .gallery-badge,
body.light .gallery-fav,
body.light .gallery-album-badge,
body.light .feed-album-counter,
body.light .lb-overlay,
body.light .feed-slide > .feed-slide-bg {
  color: #fff;
}