/* Silberstein Home — redesign shell. Tokens from the design handoff. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
:root{
  --bg:#f7f5f0; --rail:#fbfaf7; --card:#ffffff; --line:#e6e1d8; --line-soft:#eee9e0;
  --chip:#f1ede4; --fg:#22201c; --muted:#6d675c; --faint:#8a8376; --disabled:#b9b1a2;
  --btn-border:#d6d0c4; --accent:#b07a10; --accent-soft:#f1e4c6;
  --accent-tint:#f3ecdc; --accent-tint-border:#e9dcbc; --accent-ink:#8a5f00;
  --ok:#2f7d4f; --warn:#c2621a; --warn-tint:#fbe9d7; --warn-ink:#a1500f; --cool:#1f6fb2;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:'DM Sans',system-ui,sans-serif;font-size:14px}
.mono{font-family:'DM Mono',ui-monospace,Menlo,monospace}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* Layout shells */
.app{display:grid;min-height:100vh}
.app.home{grid-template-columns:200px 1fr 300px}
.app.plain{grid-template-columns:200px 1fr}
.app.rooms{grid-template-columns:200px 250px 1fr}

/* Sidebar */
aside.side{border-right:1px solid var(--line);padding:26px 18px;display:flex;flex-direction:column;background:var(--bg)}
.wordmark{font-size:15px;font-weight:700;padding:0 8px 28px}
.wordmark b{color:var(--accent);font-weight:700}
nav.side a{display:flex;align-items:center;gap:10px;padding:8px;font-size:15px;font-weight:500;color:var(--muted);border-radius:7px}
nav.side a::before{content:"";width:6px;height:6px;border-radius:50%;background:transparent}
nav.side a:hover{color:var(--fg)}
nav.side a.active{color:var(--fg);font-weight:600}
nav.side a.active::before{background:var(--accent)}
.side-footer{margin-top:auto;font-family:'DM Mono',monospace;font-size:11px;line-height:1.7;color:var(--faint);padding:0 8px}
.side-footer .dot{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:middle;margin:0 5px}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.off{background:var(--disabled)}

/* Main + rail */
main{padding:26px 30px;min-width:0}
.rail{background:var(--rail);border-left:1px solid var(--line);padding:26px 22px;min-width:0}
.roomlist{background:var(--rail);border-right:1px solid var(--line);padding:18px 12px;overflow:auto}

/* Header block */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.page-title{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:8px 0 0}
.page-sub{font-size:14px;color:var(--muted);margin-top:6px}
.headblock{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:22px}
.lock-line{color:var(--warn-ink);font-size:13px;margin-top:8px}

/* Cards, sections, rows */
.section-title{font-size:13px;font-weight:700;letter-spacing:.02em;display:flex;align-items:baseline;gap:10px}
.section-title .note{font-weight:400;color:var(--muted)}
.section-title .right{margin-left:auto;font-weight:400}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px}
.card.status{border-radius:10px;padding:14px 18px}
.row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:none}
.row .name{font-size:13px;font-weight:500}
.row .sec{font-size:11px;color:var(--faint)}
.rowval{font-family:'DM Mono',monospace;font-size:11px;color:var(--faint)}

/* Buttons */
.btn{background:var(--card);border:1px solid var(--btn-border);border-radius:8px;padding:7px 12px;font-size:13px;font-weight:500;color:var(--fg);cursor:pointer;position:relative;overflow:hidden}
.btn:hover{background:var(--chip)}
.btn.header{padding:10px 16px}
.btn.sm{padding:3px 9px;font-size:11px;font-weight:600}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent;font-weight:600}
.btn.primary:hover{background:#9c6b0d}
.btn:disabled{color:var(--disabled);background:var(--chip);cursor:default;border-color:var(--btn-border)}
.btn .hold{position:absolute;inset:0;background:var(--accent-soft);width:0;z-index:0;transition:none}
.btn .lbl{position:relative;z-index:1}
.pill{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--muted)}
.pill.on{background:var(--accent-tint);color:var(--accent-ink)}
.pill.warn{background:var(--warn-tint);color:var(--warn-ink)}

/* Toggle */
.tog{width:34px;height:20px;border-radius:999px;background:var(--btn-border);border:none;position:relative;cursor:pointer;flex:none;padding:0;transition:background .15s}
.tog.big{width:48px;height:28px}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.tog.big::after{width:24px;height:24px}
.tog.on{background:var(--ok)}
.tog.on::after{left:16px}
.tog.big.on::after{left:22px}
.tog:disabled{opacity:.5;cursor:default}

/* Home specifics */
.qa{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.big-num{font-family:'DM Mono',monospace;font-weight:500}
.timeline{position:relative;padding-left:18px}
.timeline::before{content:"";position:absolute;left:3px;top:4px;bottom:4px;width:1px;background:#e3ddd0}
.tl-item{position:relative;margin-bottom:14px}
.tl-item::before{content:"";position:absolute;left:-18px;top:3px;width:7px;height:7px;border-radius:50%;background:#cfc8ba}
.tl-item.past{opacity:.55}
.tl-item.now::before{width:9px;height:9px;left:-19px;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tl-time{font-family:'DM Mono',monospace;font-size:11px;color:var(--faint)}
.tl-name{font-size:13px}
.friday{background:var(--accent-tint);border:1px solid var(--accent-tint-border);border-radius:8px;padding:14px 16px;margin-top:20px}
.friday .eyebrow{color:var(--accent-ink)}

/* misc */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
input[type=range]{-webkit-appearance:none;appearance:none;height:8px;border-radius:4px;background:var(--line-soft);outline:none;touch-action:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.25)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:var(--accent)}
select,input[type=number],input[type=search]{font-family:inherit;font-size:13px;border:1px solid var(--btn-border);border-radius:7px;padding:5px 8px;background:var(--card);color:var(--fg)}
.legend-tag{display:none}



/* ---- consistent control-row system (used on every page; mobile-first) ---- */
.crow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.crow:last-child{border-bottom:none}
.crow .cname{font-weight:500;min-width:0;font-size:14px}
.crow .cname small{display:block;color:var(--faint);font-size:11px;font-weight:400;margin-top:1px}
.crow .cmeta{font-family:'DM Mono',monospace;font-size:12px;color:var(--faint);text-align:right;white-space:nowrap;justify-self:end}
.crow .cmeta.cool{color:var(--cool);font-weight:600}.crow .cmeta.warn{color:var(--warn);font-weight:600}
.crow .cbtns{display:flex;gap:6px;justify-self:end}
.crow .cslider{grid-column:1/-1;display:flex;align-items:center;gap:10px}
.crow .cslider input[type=range]{flex:1;min-width:0}
.crow .cslider .cmeta{min-width:42px}
.seg{display:inline-flex;border:1px solid var(--btn-border);border-radius:8px;overflow:hidden}
.seg button{border:none;background:var(--card);padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-left:1px solid var(--btn-border)}
.seg button:first-child{border-left:none}
.seg button.on{background:var(--accent);color:#fff}
.seg button:disabled{color:var(--disabled);background:var(--chip)}
@media(max-width:720px){
  .crow{padding:14px 14px;gap:10px 12px}
  .crow .cname{font-size:15px}
  .crow .cbtns:has(.seg){grid-column:1/-1;justify-self:stretch}
  .crow .cbtns .seg{flex:1}
  .crow .cbtns .btn.sm{min-width:64px}
  .crow .cbtns .seg{display:flex}.crow .cbtns .seg button{flex:1;padding:10px}
}

/* ---- Shade favorites (Home + reused) ---- */
.fav{background:var(--card);border:1px solid var(--line);border-radius:8px;margin-top:8px}
.fav-row{display:grid;grid-template-columns:170px 1fr 44px auto;align-items:center;gap:8px 12px;padding:9px 12px;border-bottom:1px solid var(--line-soft)}
.fav-row:last-child{border-bottom:none}
.fav-row .fname{grid-column:1;font-size:13px;font-weight:500;min-width:0}
.fav-row .fname small{display:block;font-size:11px;color:var(--faint);font-weight:400;margin-top:1px}
.fav-row .fslider{grid-column:2;min-width:0}
.fav-row input[type=range]{width:100%}
.fav-row .fpct{grid-column:3;font-family:'DM Mono',monospace;font-size:12px;color:var(--faint);text-align:right}
.fav-row .fseg{grid-column:4}
.fav-foot{display:flex;align-items:center;padding:10px 12px;min-height:48px;font-size:13px}
.fav-foot a{color:var(--accent);font-weight:600;margin-left:auto}
.fav-hint{font-size:11px;color:var(--faint);margin-top:8px}
.fav-edit-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.fav-edit-row:last-child{border-bottom:none}
.fav-edit-row .tog{margin-left:auto}
.fav-edit-row.dim{opacity:.4;cursor:default}

/* ---- Room list (rooms.html) ---- */
.floorgroup{margin-top:14px}
.floorhead{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 8px 2px}
.navrow{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:56px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.navrow:last-child{border-bottom:none}
.navrow .nname{font-size:15px;font-weight:500}
.navrow .nsub{font-size:12px;color:var(--faint);margin-top:2px}
.navrow .chev{margin-left:auto;color:var(--disabled);font-size:18px}
.navrow.sel{background:var(--accent-soft)}
.navrow.sel .nsub{color:var(--accent-ink)}

/* ---- Dark Shabbos countdown card ---- */
.sh-count{background:#1f1c17;color:#fff;border-radius:14px;padding:18px 18px 16px;display:flex;justify-content:space-between;gap:16px}
.sh-count .cd-eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#c9bf9f}
.sh-count .cd-big{font-family:'DM Mono',monospace;font-size:40px;font-weight:500;color:#f1d38a;line-height:1.1;margin-top:6px;white-space:nowrap}
.sh-count .cd-side{font-size:13px;text-align:right;color:#c9bf9f;line-height:1.7}
.sh-count .cd-side b{color:#fff;font-weight:600}

/* ---- Bottom sheet (phone A/C etc.) ---- */
.sheet-back{position:fixed;inset:0;background:rgba(20,18,14,.4);z-index:40;display:flex;align-items:flex-end}
.sheet{background:var(--card);width:100%;border-radius:16px 16px 0 0;padding:18px 18px calc(24px + env(safe-area-inset-bottom));max-height:85vh;overflow:auto}
.sheet .sheet-grip{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sheet-close{background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer}

/* ---- Phone tab bar (rendered by renderSidebar) ---- */
.tabbar{display:none}

/* ---- More page ---- */
.more-user{display:flex;align-items:center;gap:12px;padding:14px}
.more-user .mu-name{font-size:15px;font-weight:600}
.more-user .mu-sub{font-size:12px;color:var(--faint);margin-top:2px}
.more-user .btn{margin-left:auto}

/* ===================== Responsive ===================== */
.body-split{display:grid;grid-template-columns:1fr minmax(280px,340px);gap:22px}
.page-actions{display:flex;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:900px){ .body-split{grid-template-columns:1fr} }

/* Tablet: keep sidebar, collapse extra columns, rail flows below main */
@media(max-width:1100px){
  .app.home{grid-template-columns:200px 1fr}
  .app.rooms{grid-template-columns:200px 1fr}
  .roomlist{display:none}
  .rail{display:block;grid-column:1/-1;border:none;background:none;padding:0 30px 26px}
  .app.home .rail{padding-left:30px}
}

/* Phone: tab bar replaces sidebar; everything single column */
@media(max-width:720px){
  .app.home,.app.plain,.app.rooms{grid-template-columns:1fr}
  aside.side{display:none}
  main{padding:0 18px calc(96px + env(safe-area-inset-bottom))}
  .rail{padding:0}
  .grid2{grid-template-columns:1fr}

  /* tab bar */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;
    height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:var(--card);border-top:1px solid var(--line)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    font-size:12px;font-weight:600;color:var(--faint);padding-top:6px}
  .tabbar a::before{content:"";width:5px;height:5px;border-radius:50%;background:transparent}
  .tabbar a.active{color:var(--fg)}
  .tabbar a.active::before{background:var(--accent)}

  /* controls */
  .btn{min-height:48px;border-radius:10px;padding:10px 14px;font-size:14px}
  .btn.header{min-height:44px}
  .btn.sm{min-height:38px;height:38px;padding:0 12px;font-size:13px;font-weight:600;border-radius:9px}
  .seg{border-radius:9px}
  .seg button{height:38px;padding:0 14px;font-size:13px;font-weight:600}
  .tog{width:44px;height:26px}.tog::after{width:22px;height:22px}.tog.on::after{left:20px}
  .tog.big{width:52px;height:30px}.tog.big::after{width:24px;height:24px}.tog.big.on::after{left:24px}
  input[type=range]{height:10px}
  input[type=range]::-webkit-slider-thumb{width:28px;height:28px}
  input[type=range]::-moz-range-thumb{width:28px;height:28px}
  .card{border-radius:12px}
  .row{min-height:56px;padding:10px 14px}
  select,input[type=number],input[type=search]{font-size:15px;padding:9px 10px}

  /* header block */
  .headblock{border-bottom:none;padding-bottom:12px;margin-bottom:8px}
  .page-title{font-size:26px;text-wrap:balance}
  .page-actions{justify-content:flex-start;width:100%}

  /* favorites two-line */
  .fav-row{grid-template-columns:1fr auto auto;padding:12px 14px 14px;gap:6px 10px}
  .fav-row .fname{grid-row:1;grid-column:1;font-size:15px}
  .fav-row .fname small{font-size:12px}
  .fav-row .fpct{grid-row:1;grid-column:2;font-size:13px;align-self:start;padding-top:2px}
  .fav-row .fseg{grid-row:1;grid-column:3;align-self:start}
  .fav-row .fslider{grid-row:2;grid-column:1/-1}

  /* dark countdown stacks a touch tighter */
  .sh-count .cd-big{font-size:40px}
}

/* Phone-only top bar on Home (no sidebar there) */
.phone-top{display:none}
@media(max-width:720px){
  .phone-top{display:flex;align-items:center;justify-content:space-between;padding:16px 0 6px}
  .phone-top .wm{font-size:15px;font-weight:700}
  .phone-top .wm b{color:var(--accent)}
  .phone-top .clk{font-family:'DM Mono',monospace;font-size:12px;color:var(--faint)}
}

/* ---- Rooms page list/detail routing ---- */
.roomlist-mobhead{display:none}
.rooms-back{display:none}
.rooms-back a{color:var(--accent);font-weight:600;font-size:15px}
/* Tablet: keep the room list column visible (per spec) */
@media(max-width:1100px){ .app.rooms{grid-template-columns:200px 220px 1fr} .app.rooms .roomlist{display:block} }
@media(max-width:720px){
  .app.rooms{grid-template-columns:1fr}
  .roomlist{display:block;border:none;background:none;padding:0;overflow:visible}
  .roomlist-deskhead{display:none}
  .roomlist-mobhead{display:block}
  .rooms-back{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-bottom:4px}
  body:not(.detail) .app.rooms main{display:none}
  body.detail .app.rooms .roomlist{display:none}
  .app.rooms main{padding:0 18px calc(96px + env(safe-area-inset-bottom))}
  .app.rooms .headblock{display:block!important}
  .app.rooms .page-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  .app.rooms .page-actions .btn{min-height:48px}
  .app.rooms .page-sub{white-space:normal!important;overflow:visible!important}
}

/* ---- Shabbos page phone tweaks ---- */
@media(max-width:720px){
  #mode-row{flex-wrap:wrap;row-gap:12px}
  #mode-row>div:nth-child(2){flex:1 1 60%}
  #mode-row>div:last-child{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #mode-row>div:last-child .btn{min-height:44px}
  #zmanim{grid-template-columns:1fr 1fr!important}
  #zmanim .card{padding:12px 14px}
  #zmanim .mono{font-size:18px}
  .sh-count .cd-big{font-size:38px}
}

/* ---- Handoff 2: remaining pieces (shade filter, Today card, climate fields, chips) ---- */
.seg.small button{height:32px;padding:0 12px;font-size:12px}
.ph-only{display:none}
.chip{font-family:'DM Mono',monospace;background:var(--chip);border-radius:6px;padding:3px 8px;font-size:12px}
.row .sub{display:block;font-size:11px;color:var(--faint);font-weight:400;margin-top:2px}
.tom-head .chev{display:none}
.more-row{display:none}
#climate .cellhead{font-size:11px;font-weight:600}
#climate .btn.sm{min-width:36px}
.pillfields{display:flex;gap:8px;margin-top:10px}
.pillfield{flex:1;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--faint);background:var(--bg);border-radius:999px;padding:4px 12px;min-height:32px}
.pillfield select{flex:1;border:none;background:transparent;padding:0;font-size:13px;color:var(--fg);min-width:0}
@media(max-width:720px){
  /* Home: 2×2 quick actions, rail becomes cards below main */
  .qa{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .qa .btn{min-height:48px}
  .app.home main{padding-bottom:8px}
  .app.home .rail{padding:0 18px calc(96px + env(safe-area-inset-bottom))}
  .timeline{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0}
  .timeline::before{display:none}
  .tl-item{display:grid;grid-template-columns:62px 1fr;column-gap:10px;align-items:baseline;padding:11px 14px;margin:0;border-bottom:1px solid var(--line-soft)}
  .tl-item:last-child{border-bottom:none}
  .tl-item::before{display:none}
  .tl-item .tl-time{font-size:12px}
  .tl-item .tl-name{font-size:14px}
  .tl-item .tl-time:nth-child(3){grid-column:2;font-size:11px}
  .tl-item.now{background:var(--accent-tint)}
  .tl-item.now .tl-time{color:var(--accent-ink);font-weight:500;grid-column:1/-1}
  .tom-head{background:var(--card);border:1px solid var(--line);border-radius:12px;min-height:52px;padding:0 14px;align-items:center;cursor:pointer;margin-top:16px!important}
  .tom-head .chev{display:inline;margin-left:auto;color:var(--disabled);font-size:18px;transition:transform .15s}
  .tom-head .note{margin-left:auto}
  .tom-head .chev{margin-left:8px}
  .rail #tomorrow{display:none;padding:10px 14px 0}
  .rail.tom-open #tomorrow{display:block}
  .rail.tom-open .tom-head .chev{transform:rotate(90deg)}
  /* Shabbos */
  .ph-only{display:inline}.dt-only{display:none}
  #settings .row{min-height:52px}
  #settings .row>span:first-child{font-size:15px}
  .chip{font-size:13px;padding:6px 10px}
  .row .sub{font-size:12px}
  /* Rooms detail */
  #climate{padding:16px}
  #climate .big{font-size:36px!important}
  #climate .cellhead{text-transform:uppercase;font-weight:700;letter-spacing:.06em}
  #climate .btn.sm{min-height:40px;height:40px;width:40px;padding:0;font-size:18px}
  #climate .spv{font-size:20px}
  .pillfield{min-height:40px;font-size:13px}
  .pillfield select{font-size:15px}
  .more-shade{display:none}
  #sh-card.expanded .more-shade{display:grid}
  .more-row{display:flex;min-height:48px;align-items:center;justify-content:center;color:var(--accent);font-weight:600;font-size:14px;cursor:pointer}
  #sh-card.expanded .more-row{display:none}
  /* Log */
  #log{font-size:13px}
}
@media(max-width:720px){
  .section-title{flex-wrap:wrap;row-gap:6px}
  .section-title .note{flex:1 1 120px;min-width:0}
  .section-title .right{flex:none;white-space:nowrap;margin-left:auto}
  .seg button{white-space:nowrap}
}