/* =========================================================
   redesign.css — UI refresh layer ("Classical gold" + DM Sans)
   Load AFTER css/app.css. Visual only: no selectors are renamed,
   no layout logic changes. Every font-size keeps the * var(--fs)
   multiplier so Settings → Text size still works.
   ========================================================= */
:root{
  --bg:#F3F2F2; --surface:#FFF8F0; --surface-2:#FFF3E4; --ink:#201F1D; --muted:#605D5D;
  --line:rgba(32,31,29,.16);
  --accent:#B68235; --accent-ink:#5A3B0A; --accent-soft:#FFF3E4;
  --accent-300:#FACB8D; --accent-400:#E1AD66; --accent-500:#C28D41; --accent-600:#A06F24;
  --accent-700:#7D5411; --accent-800:#5A3B0A; --accent-900:#3A270D;
  --neutral-100:#F8F4F4; --neutral-200:#EAE7E7; --neutral-300:#D7D3D3; --neutral-400:#BAB6B6; --neutral-600:#7D7979;
  --danger:#C1503F;
  --radius-lg:7px; --radius-md:7px; --radius-sm:4px;
  --shadow-1:0 1px 2px rgba(45,43,43,.14);
  --shadow-2:0 12px 32px rgba(45,43,43,.22);
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
}
:root[data-theme="dark"]{
  --bg:#17181B; --surface:#212226; --surface-2:#2A2620; --ink:#F1EFE7; --muted:#B4AEA4; --line:rgba(241,239,231,.14);
  --accent-soft:#3A270D; --accent-ink:#FFE3BF; --accent-700:#FACB8D; --accent-800:#FFE3BF; --accent-900:#FFF3E4;
  --neutral-200:#2E2F33; --neutral-300:#3A3B40; --neutral-400:#55565C;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17181B; --surface:#212226; --surface-2:#2A2620; --ink:#F1EFE7; --muted:#B4AEA4; --line:rgba(241,239,231,.14);
    --accent-soft:#3A270D; --accent-ink:#FFE3BF; --accent-700:#FACB8D; --accent-800:#FFE3BF; --accent-900:#FFF3E4;
    --neutral-200:#2E2F33; --neutral-300:#3A3B40; --neutral-400:#55565C;
  }
}

/* ---------- Type: one family everywhere (screensaver keeps Amiri) ---------- */
body,button,input,select,textarea{font-family:var(--font);}
h1,h2,h3,.num,.display,.cal-day-num,.xbig,.srow .t,.ttc-row .mins,.ttc-eta .n,.avatar,.member-head .nm,
.agenda-day-head .n,.stepper .val,.keypad button,.week-meal-day .d,.today-row .tt,.fridge-note .txt,
#mealCard .meal-line .v,.auth-card h1{font-family:var(--font);}
.clockblock .time,.xbig,.cal-day-num,.srow .t,.ttc-row .mins,.today-row .tt,.wx-day,.salah-pill small,
.pts-label,.agenda-time,.stepper .val{font-variant-numeric:lining-nums tabular-nums;}
em{font-style:italic;}

/* ---------- Top bar ---------- */
#topbar{padding:clamp(14px,2.4vh,22px) clamp(16px,3vw,40px) clamp(8px,1.4vh,16px);align-items:flex-end;}
.clockblock{flex-direction:row;align-items:flex-end;gap:16px;}
.clockblock .time{font-weight:400;font-size:calc(clamp(34px,6vw,68.5px) * var(--fs));letter-spacing:-.02em;line-height:.85;}
.clockblock .date{font-size:calc(12.5px * var(--fs));font-style:italic;font-weight:400;color:var(--muted);
  border-left:1px solid var(--line);padding-left:16px;padding-bottom:4px;}
.clockblock .date b{display:block;font-style:normal;font-weight:600;font-size:calc(21.5px * var(--fs));color:var(--ink);line-height:1.05;}
.topbar-right{gap:10px;}
.member-legend{gap:6px;}
.legend-chip{height:calc(38px * var(--ui));padding:0 12px 0 5px;border-radius:var(--radius-lg);border:1px solid transparent;
  font-size:calc(12px * min(var(--fs),1.3));font-weight:400;color:var(--ink);}
.legend-chip.all{font-style:italic;font-weight:400;padding:0 14px;}
.legend-chip:hover{background:var(--surface-2);}
.legend-chip.on{background:#fff;border-color:currentColor;box-shadow:none;}
:root[data-theme="dark"] .legend-chip.on{background:var(--surface);}
.legend-chip.all.on{border-color:var(--accent);}
.legend-chip .av{width:calc(28px * min(var(--fs),1.3));height:calc(28px * min(var(--fs),1.3));font-size:calc(9.5px * var(--fs));font-weight:600;letter-spacing:.03em;}
.iconbtn{width:calc(44px * var(--ui));height:calc(44px * var(--ui));border-radius:var(--radius-sm);background:transparent;border:1px solid var(--line);}
.iconbtn:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);}
#addBtn{border-color:var(--accent);color:var(--accent);}
#addBtn:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);}
#syncPill .status-pill,#syncPill > *{border-radius:3px;}
.iconbtn:focus-visible,.btn:focus-visible,.seg button:focus-visible,.nav-labels button:focus-visible,
.legend-chip:focus-visible,.settings-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- Screen heads ---------- */
.screen{padding:0 clamp(16px,3vw,40px) 18px;gap:0;}
.screen-head{flex:none;border-top:1px solid var(--line);padding:8px 0 18px;gap:16px;}
#screen-2 .screen-head{padding-bottom:8px;}
.screen-title{font-size:calc(clamp(24px,3vw,36px) * var(--fs));font-weight:400;letter-spacing:-.01em;line-height:1.1;}
.screen-title em{font-style:italic;}

/* ---------- Buttons: outlined, never filled ---------- */
.btn{background:transparent;color:var(--accent-700);border:1px solid var(--accent);border-radius:var(--radius-sm);
  font-weight:600;font-size:calc(12.5px * var(--fs));min-height:calc(40px * var(--ui));}
.btn:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);}
.btn:active{background:color-mix(in srgb,var(--accent) 22%,transparent);transform:none;}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn.ghost:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--danger);}
.btn.sm{font-size:calc(11.5px * var(--fs));}
.linkbtn{color:var(--accent-700);}
.mini-btn,.shop-actions button{background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:calc(11.5px * var(--fs));font-weight:500;padding:.45em 1em;}
.mini-btn:hover,.shop-actions button:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);}
.voice-btn{background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:var(--radius-sm);
  width:calc(42px * var(--ui)) !important;height:calc(42px * var(--ui));}
.voice-btn.listening{background:transparent;color:var(--danger);border-color:var(--danger);}

/* Segmented controls (Day/Week/Month, This/Next week, settings segs) */
.seg{background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0;gap:0;overflow:hidden;}
.seg button{border-radius:0;color:var(--ink);font-weight:600;font-size:calc(14.5px * var(--fs));padding:0 1.2em;height:calc(40px * var(--ui));}
.seg button + button{border-left:1px solid var(--line);}
.seg button.active{background:var(--accent-soft);color:var(--accent-800);box-shadow:inset 0 0 0 1px var(--accent);}
#settingsPanel .seg,#settingsPanel .seg button{border-radius:0;}
#settingsPanel .seg{border-radius:var(--radius-sm);}

/* Inputs */
input[type=text],input[type=number],input[type=time],input[type=date],input[type=url],input[type=email],input[type=password],input[type=search],select,textarea{
  border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff;caret-color:var(--accent);}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--surface);}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--accent);}
#shopInput{border-radius:var(--radius-sm) !important;min-height:calc(42px * var(--ui));}
input[type=range]{accent-color:var(--accent);}

/* Custom checkboxes (chores + shopping) — stroke, not fill */
.chore-item input[type=checkbox],.shop-item input[type=checkbox]{
  -webkit-appearance:none;appearance:none;margin:0;width:calc(23px * var(--ui));height:calc(23px * var(--ui));flex:none;
  border:1.5px solid var(--neutral-400);border-radius:3px;background:#fff center/72% no-repeat;cursor:pointer;}
.chore-item input[type=checkbox]:checked,.shop-item input[type=checkbox]:checked{border-color:var(--accent-600);background-color:var(--accent-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D5411' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");}
:root[data-theme="dark"] .chore-item input[type=checkbox],:root[data-theme="dark"] .shop-item input[type=checkbox]{background-color:var(--surface);}

/* ---------- Cards (Today screen, chores, calendar) ---------- */
.card,.xcard,.member-card,.agenda-day,.cal-day{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);}
#extras-grid{gap:16px;grid-auto-rows:minmax(min-content,1fr);}
.xcard{padding:20px 22px;gap:12px;}
.xcard-head{gap:12px;}
.icon-badge{width:calc(38px * var(--ui));height:calc(38px * var(--ui));}   /* ring styling comes from cardHead() — see instructions */
.xcard-title{font-size:calc(20.5px * var(--fs));font-weight:600;line-height:1.1;}
.xcard-title small{font-size:calc(11.5px * var(--fs));font-style:italic;font-weight:400;color:var(--muted);margin-top:2px;}
.xbig{font-weight:400;font-size:calc(clamp(40px,5vw,72px) * var(--fs));letter-spacing:-.02em;line-height:.9;}
.xsub{font-size:calc(13.5px * var(--fs));color:var(--ink);}
.xfoot{font-size:calc(11px * var(--fs));border-top:1px solid var(--line);padding-top:10px;}
.xfoot b{color:var(--accent-700) !important;font-weight:600;}

/* Today card rows */
.today-card .card-add{width:calc(40px * var(--ui));height:calc(40px * var(--ui));border-radius:var(--radius-sm);background:transparent;border:1px solid var(--line);}
.today-row{gap:12px;padding:9px 10px;border-radius:var(--radius-sm);border:1px solid transparent;font-size:calc(13.5px * var(--fs));}
.today-row .tt{width:56px;font-weight:600;font-size:calc(15.5px * var(--fs));color:var(--muted);}
.today-row .bar{width:3px;border-radius:2px;}
.today-row .ti{font-weight:400;}
.today-row .ti small{font-style:italic;font-size:calc(11px * var(--fs));}
.today-row.now{background:var(--accent-soft);border-color:var(--accent-300);}
.today-row.now .tt{color:var(--accent-700);}
.mini-av{width:calc(24px * var(--ui));height:calc(24px * var(--ui));font-size:calc(8.5px * var(--fs));font-weight:600;}

/* Weather */
.wx-days{border-top:1px solid var(--line);padding-top:12px;}
.wx-day .dn{font-weight:400;font-style:italic;font-size:calc(11px * var(--fs));}
.wx-day .ic{font-size:calc(20px * var(--fs));}
.wx-day .hi{font-weight:600;font-size:calc(16px * var(--fs));}

/* Salah card */
.srow{border:1px solid transparent;border-radius:var(--radius-sm);padding:0 12px;}
.srow .l{font-weight:400;color:var(--muted);}
.srow .t{font-weight:600;}
.srow.active{background:var(--accent-soft);border-color:var(--accent-400);}
.srow.active .l{color:var(--accent-800);font-style:italic;}
.srow.active .t{color:var(--ink);}

/* Shopping */
.shop-list{gap:0;}
.shop-item{padding:7px 2px;border-bottom:1px solid var(--line);font-size:calc(13.5px * var(--fs));gap:10px;}
.shop-item label{gap:10px;}
.shop-actions{gap:6px;}

/* Meals */
#mealCard .meal-line .k{font-weight:400;letter-spacing:.12em;}
#mealCard .meal-line .v{font-weight:600;}

/* TTC */
.ttc-row{gap:12px;}
.ttc-row .mins{font-weight:600;}
.ttc-row.first .mins{color:var(--accent-700);}
.ttc-row .br{border-radius:3px;font-family:var(--font);font-weight:600;}
.ttc-row .crowd{background:transparent !important;border:1px solid currentColor;border-radius:3px;font-weight:400;}

/* Fridge note */
.fridge-note{border:1px solid var(--accent-300);border-radius:3px;box-shadow:0 3px 10px rgba(45,43,43,.16);transform:rotate(-.7deg);}
.fridge-note .txt{font-style:italic;font-weight:400;}
.fridge-note .by{font-weight:400;}

/* ---------- Chores screen ---------- */
#chores-grid{gap:16px;grid-auto-rows:minmax(min-content,1fr);}
.member-card{padding:20px 18px;gap:16px;border-top-width:3px;}   /* border-top-color is set inline per member — see instructions */
.avatar{width:calc(60px * var(--ui));height:calc(60px * var(--ui));font-weight:600;font-size:calc(20px * var(--fs));}
.member-head .nm{font-weight:600;font-size:calc(22.5px * var(--fs));}
.salah-label{font-weight:400;font-size:calc(11px * var(--fs));}
.salah-label span:last-child{font-style:italic;}
.salah-pill{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;padding:6px 0;}
.salah-pill b{font-weight:600;font-size:calc(10.5px * var(--fs));}
.salah-pill.done{background:var(--accent-soft);border-color:var(--accent-500);color:var(--muted);}
.salah-pill.done b{color:var(--accent-800);}
.chore-list{gap:0;}
.chore-item{align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:calc(13px * var(--fs));}
.chore-item.done label{color:var(--neutral-600);}
.chore-tag{font-size:calc(9.5px * var(--fs));font-weight:400;border-radius:3px;padding:1px 7px;}
.add-task-btn{border:1px dashed var(--neutral-400);border-radius:var(--radius-sm);padding:10px;font-style:italic;font-weight:400;font-size:calc(11.5px * var(--fs));}
.add-task-btn:hover{border-color:var(--accent);color:var(--accent-700);}
.bar{height:6px;border-radius:3px;background:var(--neutral-200);}
.pts-label{font-weight:400;font-size:calc(11px * var(--fs));}
.week-pill{background:transparent;border:1px solid var(--accent);color:var(--accent-700);border-radius:3px;font-weight:400;font-size:calc(11.5px * var(--fs));padding:.4em 1em;}

/* ---------- Calendar ---------- */
#cal-range-label{font-size:calc(19px * var(--fs)) !important;font-style:italic;font-weight:400 !important;color:var(--accent-800) !important;}
#screen-2 > div:nth-of-type(2){margin-top:0 !important;padding-bottom:14px;}
.cal-day{padding:14px 10px;gap:8px;}
.cal-day.today{background:var(--accent-soft);border-color:var(--accent);}
.cal-day-dow{font-weight:400;letter-spacing:.1em;font-size:calc(10px * var(--fs));}
.cal-day.today .cal-day-dow{color:var(--accent-700);}
.cal-day-num{font-weight:400;font-size:calc(30.5px * var(--fs));line-height:1;}
.cal-day.today .cal-day-num{color:var(--accent-800);}
.cal-wx{font-weight:400;font-size:calc(10.5px * var(--fs));}
.evt-chip{color:var(--ink);font-weight:400;border-radius:3px;padding:.42em .6em;font-size:calc(11px * var(--fs));}   /* tint + left bar set inline — see instructions */
.evt-chip.feed{border-left-width:3px;}
.agenda-day-head .n{font-weight:400;font-size:calc(43px * var(--fs));}
.agenda-day-head .l{font-style:italic;font-size:calc(20px * var(--fs));color:var(--ink);}
.agenda-time{font-weight:600;font-size:calc(16px * var(--fs));width:84px;}
.agenda-title{font-weight:400;}
.filter-banner{font-weight:400;}
.filter-banner button{background:transparent;color:var(--accent-700);font-weight:600;}
.gcal-badge{background:var(--neutral-100);color:#444141;border-radius:3px;font-weight:400;}

/* ---------- Bottom nav ---------- */
#bottomnav{gap:8px;padding:10px 0 clamp(12px,2vh,16px);}
.nav-labels{gap:8px;}
.nav-labels button{height:calc(44px * var(--ui));padding:0 22px;border-radius:var(--radius-sm);background:transparent;border:1px solid var(--line);
  color:var(--muted);font-weight:600;font-size:calc(16px * var(--fs));gap:8px;}
.nav-labels button .dot{width:7px;height:7px;opacity:.35;}
.nav-labels button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-800);}
.nav-labels button.active .dot{opacity:1;}
.dots{gap:8px;}
.dots button{width:8px;height:5px;border-radius:3px;background:var(--neutral-300);}
.dots button.active{width:26px;height:5px;border-radius:3px;background:var(--accent);}

/* ---------- Settings drawer ---------- */
#settingsPanel{width:min(460px,92vw);border-left:1px solid var(--line);box-shadow:var(--shadow-2);}
#settingsScrim{background:rgba(45,43,43,.38);}
.settings-head{padding:22px 24px 12px;border-bottom:none;}
.settings-head h2{font-weight:400;font-size:calc(29px * var(--fs));}
.settings-tabs{padding:6px 24px 14px;gap:6px;}
.settings-tabs button{border-radius:var(--radius-sm);background:transparent;color:var(--ink);font-weight:400;font-size:calc(11.5px * var(--fs));padding:6px 12px;}
.settings-tabs button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-800);}
.settings-body{padding:20px 24px 40px;gap:26px;}
.sec h3{font-weight:600;letter-spacing:.08em;font-size:calc(11.5px * var(--fs));color:var(--accent-700);}
.field label{font-weight:400;font-size:calc(11px * var(--fs));color:color-mix(in srgb,var(--ink) 70%,transparent);}
.toggle-row label.tl{font-weight:400;font-size:calc(12.5px * var(--fs));}
.slider-tog{background:var(--neutral-200);border:1px solid var(--line);}
.slider-tog::before{top:calc(2px * var(--sw));}
.switch input:checked + .slider-tog{background:var(--accent-soft);border-color:var(--accent);}
.switch input:checked + .slider-tog::before{background:var(--accent);}
.theme-opt{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-weight:600;font-size:calc(14.5px * var(--fs));}
.theme-opt.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-800);}
.stepper button{border-radius:var(--radius-sm);background:transparent;font-weight:400;}
.stepper .val{font-weight:600;font-size:calc(20px * var(--fs));}
.member-edit-row,.feed-row,.acc-row{border-radius:var(--radius-sm);}
.status-pill{border-radius:3px;font-weight:400;}
.status-pill.ok{background:var(--accent-soft);color:var(--accent-800);}
.warn-box{border-radius:var(--radius-sm);}

/* ---------- Modals ---------- */
#modalScrim{background:rgba(45,43,43,.5);}
.modal{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-2);}
.modal h3{font-weight:400;font-size:calc(23.5px * var(--fs));}
.chip-opt{border:1px solid var(--line);border-radius:var(--radius-sm);font-weight:400;}
.chip-opt.pick{background:var(--accent-soft);color:var(--accent-800);border-color:var(--accent);}
.daychip{border:1px solid var(--line);font-weight:400;}
.daychip.sel{background:var(--accent-soft);color:var(--accent-800);border-color:var(--accent);}
.icon-opt{border:1px solid var(--line);border-radius:var(--radius-sm);}
.icon-opt.sel{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}
.week-meal-day{border-radius:var(--radius-sm);}
.week-meal-day.today{background:var(--accent-soft);border-color:var(--accent);}
.meal-ideas{border-radius:var(--radius-lg);}
.keypad button{font-weight:400;}
.keypad button:active{background:var(--accent-soft);}
#toast{border-radius:var(--radius-sm);font-weight:400;}

::selection{background:color-mix(in srgb,var(--accent) 30%,transparent);}

/* ---------- Fit fixes for large text sizes (added during install) ---------- */
/* The big temperature never grows wider than the card, and the description wraps under it if needed. */
.xbig{font-size:min(calc(clamp(40px,5vw,72px) * var(--fs)), 21cqw);}
.xcard > div:has(> .xbig){flex-wrap:wrap;row-gap:4px;}