/* CONSUMERLAND — the home. Scoped to #v-home, every class prefixed .hm- .
   The page is a property listing you live in: the room large on the left, the plan of
   the place and the household on the right, what is in the room underneath. */

#v-home{--hm-shadow:0 1px 2px rgba(0,0,0,.05)}

.hm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:4px 0 18px}
.hm-head h1{font-size:clamp(28px,3.6vw,38px);font-weight:800;letter-spacing:-.035em}
.hm-head p{margin:4px 0 0;color:var(--ink-3);font-size:14px}
.hm-head p b{color:var(--ink);font-weight:700}
.hm-acts{display:flex;gap:8px;flex-wrap:wrap}
.hm-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.hm-mainc{min-width:0}

/* ------------------------------------------------------------------ stage */
.hm-stage{position:relative;border-radius:10px;overflow:hidden;background:#222;touch-action:pan-y;aspect-ratio:1000/620}
.hm-stage svg{display:block;width:100%;height:100%}
.hm-prop{cursor:pointer;transition:transform .16s cubic-bezier(.2,.9,.3,1)}
.hm-prop .hm-hit{fill:transparent}
.hm-prop:hover{transform:translateY(-4px)}
.hm-prop:focus-visible{outline:none}
.hm-prop:focus-visible .hm-hit{fill:rgba(255,210,63,.18);stroke:#FFD23F;stroke-width:3}
.hm-ghost{opacity:.5;transition:opacity .16s}
.hm-prop:hover .hm-ghost{opacity:1}
@keyframes hmPop{0%{transform:translateY(14px) scale(.9);opacity:0}60%{transform:translateY(-5px) scale(1.03)}100%{transform:none;opacity:1}}
.hm-new{animation:hmPop .55s cubic-bezier(.2,1.3,.4,1)}
.hm-roomcap{position:absolute;left:14px;top:12px;background:rgba(255,255,255,.92);color:var(--ink);font-size:13px;padding:5px 10px;border-radius:5px}
.hm-label{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(22,24,29,.9);color:#fff;
  font-size:13px;font-weight:600;padding:7px 12px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .15s;
  white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.hm-stage.hm-hint .hm-label{opacity:1}
.hm-flag{position:absolute;right:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 140px)}
.hm-chip{background:rgba(22,24,29,.88);color:#fff;font-size:12px;font-weight:600;padding:5px 9px;border-radius:5px;white-space:nowrap}
.hm-chip.warn{background:var(--warn)} .hm-chip.bad{background:var(--bad)} .hm-chip.good{background:var(--money)}

/* ------------------------------------------------------------ in the room */
.hm-sec{margin-top:26px}
.hm-sec h2,.hm-card h2{font-size:18px;font-weight:800;margin-bottom:12px}
.hm-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 24px}
.hm-items li{border-bottom:1px solid var(--line)}
.hm-items button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 2px;text-align:left}
.hm-items button:hover b{text-decoration:underline}
.hm-items i{width:30px;height:30px;border-radius:5px;flex:0 0 30px;border:1px solid rgba(0,0,0,.12)}
.hm-items span{flex:1;min-width:0;display:flex;flex-direction:column}
.hm-items b{font-size:14.5px;font-weight:600}
.hm-items small{font-size:12.5px;color:var(--ink-3)}
.hm-items em{font-style:normal;text-align:right;font-size:12.5px;color:var(--ink-3);display:flex;flex-direction:column;max-width:45%}
.hm-items em small{font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hm-items em.can small{color:var(--money)}
.hm-items em.top{color:var(--money);font-weight:600}

/* ------------------------------------------------------------- side panel */
.hm-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:160px}
.hm-card{border:1px solid var(--line);border-radius:10px;padding:16px}
.hm-plan-core{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:96px 80px;
  grid-template-areas:"a a b" "c d e";border:3px solid var(--ink);background:var(--ink);gap:3px}
.hm-plan-ext{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:8px}
.hm-pl{background:#fff;padding:8px 9px;text-align:left;display:flex;flex-direction:column;justify-content:flex-start;gap:2px;
  font-size:13px;position:relative;min-height:54px;transition:background .12s}
.hm-pl:hover{background:#FAF7EC}
.hm-pl.on{background:#FFF1B8}
.hm-pl b{font-weight:700;line-height:1.15}
.hm-pl em{font-style:normal;font-size:11.5px;color:var(--ink-3);line-height:1.2}
.hm-pl em.hot{color:var(--spend);font-weight:700}
.hm-plan-ext .hm-pl{border:2px solid var(--ink)}
.hm-plan-ext .hm-pl.add{border-style:dashed;border-color:var(--line-2);background:transparent}
.hm-dl{margin:0;display:flex;flex-direction:column}
.hm-dl button{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);text-align:left;width:100%}
.hm-dl button:last-child{border:none}
.hm-dl button:hover dd{text-decoration:underline}
.hm-dl dt{font-size:14px;color:var(--ink-3)}
.hm-dl dd{margin:0;text-align:right;font-weight:700;font-size:14px;display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
.hm-dl dd small{font-weight:500;font-size:12px;color:var(--ink-3)}

/* ------------------------------------------------------------------ body */
.hm-bars{display:flex;gap:10px;flex-wrap:wrap}
.hm-bar{flex:1 1 90px;min-width:0}
.hm-bar .hm-bt{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--ink-2);margin-bottom:4px}
.hm-bar .hm-bw{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.hm-bar .hm-bw i{display:block;height:100%;border-radius:3px;transition:width .5s cubic-bezier(.2,.9,.3,1)}

/* ------------------------------------------------------------ sheet parts */
.hm-hero{position:relative;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}
.hm-hero svg{display:block;width:100%;height:auto}
.hm-tiers{display:flex;flex-direction:column;gap:8px}
.hm-tier{display:flex;gap:11px;align-items:center;padding:11px 12px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);text-align:left;width:100%;transition:border-color .14s,transform .12s}
.hm-tier.on{border-color:color-mix(in srgb,var(--money) 45%,var(--line));background:var(--money-soft)}
.hm-tier.next{border-color:color-mix(in srgb,var(--sec) 45%,var(--line))}
.hm-tier.past{opacity:.5}
.hm-tier .hm-sw{width:34px;height:34px;border-radius:9px;flex:0 0 34px;border:1px solid rgba(0,0,0,.16)}
.hm-tier .hm-tt{font-weight:700;font-size:13px;line-height:1.2}
.hm-tier .hm-ts{font-size:11px;color:var(--ink-3);line-height:1.25}
.hm-tier .hm-tp{margin-left:auto;font-weight:700;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}

.hm-food{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.hm-food:last-child{border-bottom:none}
.hm-food .hm-fg{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;flex:0 0 38px;
  background:linear-gradient(160deg,var(--bc),color-mix(in srgb,var(--bc) 70%,#000))}
.hm-food .hm-fn{font-size:12.5px;font-weight:600;line-height:1.2}
.hm-food .hm-fs{font-size:10.5px;color:var(--ink-3)}
.hm-food.off{opacity:.62}
.hm-food.off .hm-fg{filter:grayscale(1)}
.hm-cap{height:7px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin:8px 0 4px}
.hm-cap i{display:block;height:100%;background:var(--sec);transition:width .4s}
.hm-cap i.full{background:var(--warn)}

.hm-sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.hm-sw-b{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);text-align:left;
  transition:transform .12s,border-color .14s}
.hm-sw-b:hover{transform:translateY(-2px);border-color:var(--line-2)}
.hm-sw-b.on{border-color:var(--money);box-shadow:0 0 0 2px color-mix(in srgb,var(--money) 30%,transparent)}
.hm-sw-b .hm-sw-c{height:46px;display:block}
.hm-sw-b .hm-sw-t{font-size:11px;font-weight:700;padding:7px 8px 2px;line-height:1.2}
.hm-sw-b .hm-sw-p{font-size:10.5px;color:var(--ink-3);padding:0 8px 8px;font-family:var(--mono)}

.hm-ext{display:flex;gap:11px;align-items:center;padding:11px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);text-align:left;width:100%}
.hm-ext.built{border-color:color-mix(in srgb,var(--money) 40%,var(--line));background:var(--money-soft)}
.hm-ext.locked{opacity:.58}
.hm-ext .hm-eg{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:20px;flex:0 0 42px;
  background:linear-gradient(160deg,var(--bc),color-mix(in srgb,var(--bc) 68%,#000))}
.hm-ext .hm-et{font-weight:700;font-size:13.5px;line-height:1.2}
.hm-ext .hm-ed{font-size:11.5px;color:var(--ink-3);line-height:1.3}

/* ------------------------------------------------------------ build beat */
.hm-build{text-align:center;padding:34px 22px}
.hm-build .hm-bg{font-size:64px;display:block;animation:hmBuild 1.1s ease-in-out infinite}
@keyframes hmBuild{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
.hm-build .hm-bt2{font-family:var(--disp);font-weight:800;font-size:22px;margin-top:14px;letter-spacing:-.02em}
.hm-build .hm-bs{color:var(--ink-3);font-size:13px;margin-top:6px}
.hm-prog{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;margin:18px auto 0;max-width:280px}
.hm-prog i{display:block;height:100%;width:0;background:var(--ink);
  animation:hmProg 2.1s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes hmProg{to{width:100%}}

/* ---------------------------------------------------------------- mobile */
@media (max-width:980px){

  .hm-side{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));order:2;margin-top:18px}
  .hm-grid{display:flex;flex-direction:column;gap:0}
  .hm-mainc{display:contents}
  .hm-stage{order:1}
  .hm-sec{order:3}
}
@media (max-width:620px){
  .hm-stage{aspect-ratio:auto;height:62vw;min-height:240px}
  .hm-stage svg{height:100%}
  .hm-label{display:none}
  .hm-prop:hover{transform:none}
  .hm-acts .btn{padding:8px 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .hm-prop,.hm-new,.hm-build .hm-bg,.hm-prog i{animation:none!important;transition:none!important}
}