/* home.css — Home: the apartment's whole day. Everything is prefixed hm-. */
.hm .screen{padding-top:calc(var(--safe-top) + 52px)}
.hm-hero{aspect-ratio:362/440;margin:0 -8px}
.hm-head{margin-top:20px}
.hm-copy{font-size:14.5px;color:var(--ink-70);line-height:1.5;max-width:36ch}
.hm-copy+.hm-copy{margin-top:8px}
.hm-quiet{color:var(--ink-45);font-size:13px}
.hm-note{font-size:13px;color:var(--ink-45);margin-top:10px;line-height:1.45}

/* the sun-hours chart: one strip per room, 04:00–24:00 */
.hm-chart{margin-top:14px;display:grid;gap:9px}
.hm-row{display:grid;grid-template-columns:62px 1fr 64px;gap:10px;align-items:center;font-size:13px}
.hm-row .n{color:var(--ink-70);font-weight:500}
.hm-row .v{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}
.hm-strip{position:relative;height:14px;border-radius:999px;background:rgba(44,37,40,.07);overflow:hidden}
.hm-strip i{position:absolute;top:0;bottom:0}
.hm-strip .day{background:rgba(44,37,40,.06)}
.hm-strip .sun{background:linear-gradient(90deg,#f4b36c,#f0954e);border-radius:3px}
.hm-strip .now{width:2px;margin-left:-1px;background:var(--ink);border-radius:2px;top:-2px;bottom:-2px}
.hm-strip.big{height:16px;margin:12px 0 4px}
.hm-axis{display:flex;justify-content:space-between;margin-left:72px;margin-right:74px;font-size:10.5px;color:var(--ink-45);font-variant-numeric:tabular-nums}

/* the hero's caption, pinned over the canvas */
.hm-ov{position:absolute;inset:0;pointer-events:none;transition:opacity .25s var(--ease)}
.hm-ov.off{opacity:0}
.hm-count{position:absolute;right:12px;top:12px;height:28px;padding:0 10px;border-radius:999px;display:flex;align-items:center;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
.hm-cap{position:absolute;left:14px;top:17px;font-size:12px;font-weight:500;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35),0 0 2px rgba(0,0,0,.25)}
.hm-step{position:absolute;left:12px;bottom:12px;height:38px;padding:0 10px 0 14px;border-radius:999px;display:flex;align-items:center;gap:2px;font-size:14px;font-weight:500}
.hm-dots{position:absolute;right:16px;bottom:26px;display:flex;gap:5px}
.hm-dots i{width:6px;height:6px;border-radius:9px;background:rgba(255,255,255,.55);box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.hm-dots i.on{background:#fff}
.hm-arr{position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:999px;display:grid;place-items:center;color:#fff;
  background:rgba(20,18,22,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hm-arr.l{left:8px}.hm-arr.r{right:8px}
.hm-arr svg{width:14px;height:14px}

/* 3D chrome */
.hm-over .hud .hseg button{font-size:13px}
.hm-sun{position:absolute;left:12px;right:12px;top:calc(var(--safe-top) + 52px);border-radius:20px;padding:9px 12px 4px;touch-action:none;cursor:ew-resize}
.hm-sunrow{display:flex;align-items:baseline;gap:8px}
.hm-sunrow .grow{flex:1}
.hm-time{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1}
.hm-date{font-size:12.5px;color:var(--ink-45)}
.hm-sunmeta{font-size:12.5px;color:var(--ink-70);font-variant-numeric:tabular-nums}
.hm-arc{display:block;width:100%;height:auto;margin-top:2px;overflow:visible}
.hm-arc .hz{stroke:rgba(44,37,40,.22);stroke-width:1}
.hm-arc .up{fill:none;stroke:#e7964f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hm-arc .dn{fill:none;stroke:rgba(44,37,40,.32);stroke-width:1.4;stroke-dasharray:2 4;stroke-linecap:round}
.hm-arc text{font-size:9px;fill:rgba(44,37,40,.45);font-family:Selecta,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.hm-arc .halo{fill:rgba(247,170,90,.22)}
.hm-arc .sun{fill:#f6a659;stroke:#fff;stroke-width:2}
.hm-arc .knob.night .halo{fill:rgba(160,175,220,.18)}
.hm-arc .knob.night .sun{fill:#cfd6ea}
.hm-sheet .row{align-items:flex-start}
.hm-sheet .hm-sseg{height:34px;flex:none;width:132px;background:rgba(9,9,9,.05)}
.hm-sheet .hm-sseg button{font-size:12.5px;padding:0 6px}
.hm-sheet .stats{margin:10px 0 2px}
.hm-sheet .hm-planrows{display:none;margin-top:12px;gap:8px}
.hm-sheet.plan .hm-planrows{display:grid}
.hm-sheet.plan .hm-strip.big{display:none}
.hm-sheet .hm-row{grid-template-columns:58px 1fr 60px}
.hm-pin{display:inline-flex;flex-direction:column;align-items:center;padding:5px 10px;border-radius:12px;line-height:1.15;font-size:12px}
.hm-pin b{font-weight:500}
.hm-pin em{font-style:normal;color:var(--ink-45);font-size:11px;font-variant-numeric:tabular-nums}
.lbl.lit .hm-pin{box-shadow:0 0 0 1.5px #f0a35a,var(--glass-shadow)}

/* dark */
#over.dark .hm-arc .hz{stroke:rgba(242,239,234,.22)}
#over.dark .hm-arc .dn{stroke:rgba(242,239,234,.35)}
#over.dark .hm-arc text{fill:rgba(242,239,234,.45)}
#over.dark .hm-date,#over.dark .hm-sunmeta{color:rgba(242,239,234,.6)}
#over.dark .hm-strip{background:rgba(255,255,255,.1)}
#over.dark .hm-strip .day{background:rgba(255,255,255,.07)}
#over.dark .hm-strip .now{background:#F2EFEA}
#over.dark .hm-sheet .hm-sseg{background:rgba(255,255,255,.08)}
#over.dark .hm-row .n{color:rgba(242,239,234,.75)}

/* #over is only transparent outside 3D, not inert: without this the hidden back
   pill sits on top of the listing's own back button and eats the tap */
#device:not([data-mode="3d"]) .hm-over{pointer-events:none}