/* house-grid.css
   The room chips, the heating strip and the sparklines. ONE copy, loaded by
   both index.html (the Island lobby) and rooms.html (the Lookout page).

   Written against the estate tokens already defined on both pages:
   --ink --muted --dim --line --border --em --coral --gold-bg --indigo
   and the Fraunces / Hanken Grotesk / JetBrains Mono stack. Nothing here
   defines a colour those pages do not already have, except the four verdict
   tones below, which are scoped to hg- classes so they cannot leak.
*/

.hg-scope{
  --hg-ok:#2E7D5B; --hg-cold:#2F6690; --hg-warm:#C2703A;
  --hg-alert:#B0392F; --hg-stale:#9AA4AE;
}

/* ---- shell ------------------------------------------------------------- */
.hg-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:0 .1rem .55rem}
.hg-ttl{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(31,42,46,.55);display:flex;align-items:center;gap:.5rem}
.hg-ttl .cdot{width:7px;height:7px;border-radius:50%;background:var(--hg-ok);flex:none}
.hg-when{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:rgba(31,42,46,.45);
  text-decoration:none;white-space:nowrap}
.hg-when:hover{color:rgba(31,42,46,.7)}

.hg-wrap{border:1px solid var(--border);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.74));
  box-shadow:0 14px 34px -26px rgba(20,28,39,.45)}

/* ---- the verdict, when a page asks for it ------------------------------ */
.hg-verdict{font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:clamp(1.35rem,3.2vw,1.75rem);line-height:1.2;letter-spacing:-.015em;
  margin:1rem 1.2rem .15rem}
.hg-verdict em{font-style:italic}
.hg-sub{margin:0 1.2rem .95rem;font-size:.88rem;line-height:1.5;
  color:var(--muted);max-width:60ch}
.hg-banner{margin:0;padding:.75rem 1.2rem;font-size:.84rem;line-height:1.5;
  background:#FBF7EE;border-bottom:1px solid #E8DCC4;color:#6B5320}
.hg-banner b{display:block;font-weight:600}
.hg-banner.bad{background:#FBF0EF;border-color:#E6C9C6;color:#7A2621}

/* ---- floors and chips -------------------------------------------------- */
.hg-floors{border-top:1px solid var(--line)}
.hg-floor{display:grid;grid-template-columns:40px 1fr;border-bottom:1px solid var(--line)}
.hg-floor:last-child{border-bottom:0}
.hg-spine{position:relative;border-right:1px solid var(--line);display:flex;
  align-items:center;justify-content:center}
.hg-spine span{writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:'JetBrains Mono',monospace;font-size:.54rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.hg-spine b{position:absolute;left:0;top:0;bottom:0;width:3px}

.hg-chips{display:grid;gap:6px;padding:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
/* Floor header - rooms page only, emitted when renderFloors is passed
   {heads:true}. The lobby keeps .hg-spine and is unaffected. Shaped after the
   HEATING strip so it reads as the same kind of divider. The left edge carries
   the same mean-derived colour the gutter rail used to. */
.hg-fhead{position:relative;display:flex;align-items:baseline;gap:.55rem;
  padding:.6rem .8rem .55rem;background:rgba(255,255,255,.38);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hg-fhead:first-child{border-top:0}
.hg-fhead i{position:absolute;left:0;top:0;bottom:0;width:3px}
.hg-fhead h3{font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:1.02rem;letter-spacing:-.01em;line-height:1}
.hg-fmeta{margin-left:auto;font-family:'JetBrains Mono',monospace;
  font-size:.6rem;color:var(--dim);white-space:nowrap}
.hg-fmeta b{font-family:'Fraunces',Georgia,serif;font-size:.95rem;
  font-weight:500;color:var(--ink)}
/* Two-class selector deliberately: the responsive block later in this file
   sets .hg-floor to 48px 1fr, and a single class would lose to it on order. */
.hg-floors .hg-floor-wide{grid-template-columns:1fr;border-bottom:0}

/* Every field is its own block. They ran together on one line when these were
   inline spans, which is what made the lobby strip look squeezed. */
.hg-chip{display:block;min-width:0;text-align:left;cursor:pointer;
  border:1px solid var(--border);border-radius:13px;padding:.55rem .65rem .5rem;
  background:rgba(255,255,255,.8);text-decoration:none;color:inherit;
  font:inherit;transition:border-color .18s,transform .18s}
.hg-chip:hover{border-color:rgba(20,28,39,.26);transform:translateY(-1px)}
.hg-chip:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.hg-chip .n{display:block;font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-weight:600;font-size:.75rem;color:var(--ink);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hg-chip .t{display:block;font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:1.35rem;line-height:1.15;letter-spacing:-.02em;margin-top:.1rem}
.hg-chip .t small{font-size:.66rem}
.hg-chip .h{display:block;font-family:'JetBrains Mono',monospace;font-size:.56rem;
  color:var(--dim);margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hg-chip.stale{background:rgba(20,28,39,.035)}
.hg-chip.stale .t{color:var(--hg-stale)}
.hg-chip.missing{border-style:dashed;background:transparent}
.hg-chip.missing .t{font-family:'JetBrains Mono',monospace;font-size:.62rem;
  font-weight:600;color:var(--dim);padding:.2rem 0}

/* ---- chip attention states ---------------------------------------------------------
   Contrast does the work. A settled chip steps back; a flagged one keeps full
   weight and gains a coloured edge and a one-word reason. With most rooms fine
   most of the time, the grid reads as calm with an exception, rather than
   seventeen things all shouting equally.

   Deliberately no background fills: a wash of colour across a whole chip makes
   the reading harder to read, which is the one thing the chip must always do
   well. */
.hg-chip.settled{opacity:.62}
.hg-chip.settled:hover,.hg-chip.settled:focus-visible{opacity:1}
.hg-chip.settled .n{font-weight:500;color:var(--muted)}

.hg-chip.flag{position:relative;overflow:hidden;border-color:rgba(20,28,39,.2)}
.hg-chip.flag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--hg-stale)}
.hg-chip.flag-damp::before{background:var(--hg-cold)}
.hg-chip.flag-cold::before{background:var(--hg-cold)}
.hg-chip.flag-quiet::before{background:var(--hg-stale)}

/* The reason, inline after the room name. Small, uppercase, and the same
   colour as its edge so the two read as one mark. */
.hg-why{font-family:'JetBrains Mono',monospace;font-style:normal;
  font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;
  margin-left:.4rem;padding:.1rem .25rem;border-radius:4px;
  background:rgba(20,28,39,.07);color:var(--muted);vertical-align:.08em}
.hg-chip.flag-damp .hg-why{background:rgba(47,102,144,.14);color:var(--hg-cold)}
.hg-chip.flag-cold .hg-why{background:rgba(47,102,144,.14);color:var(--hg-cold)}
.hg-chip.flag-quiet .hg-why{background:rgba(20,28,39,.07);color:var(--hg-stale)}

/* The name line has to make room for the tag without truncating the room. */
.hg-chip .n{display:flex;align-items:baseline;gap:0}
.hg-chip .n{white-space:normal}

@media(prefers-reduced-motion:no-preference){
  .hg-chip{transition:border-color .18s,transform .18s,opacity .18s}
}

.hg-spark{display:block;width:100%;height:16px;margin-top:.35rem}

/* The band. A tinted scale, a solid in-band region and a ringed marker: the
   earlier light-grey-on-white version was effectively invisible. */
.hg-band{display:block;height:5px;border-radius:3px;position:relative;
  margin-top:.35rem;background:rgba(20,28,39,.07)}
.hg-band u{position:absolute;top:0;height:5px;border-radius:3px;
  text-decoration:none;background:rgba(46,125,91,.30)}
.hg-band i{position:absolute;top:-3px;width:4px;height:11px;border-radius:2px;
  box-shadow:0 0 0 2px #fff}

/* ---- heating strip ----------------------------------------------------- */
.hg-sys{border-top:1px solid var(--line)}
.hg-syshead{display:flex;align-items:baseline;justify-content:space-between;
  padding:.6rem 1.2rem .45rem;background:rgba(20,28,39,.025);
  border-bottom:1px solid var(--line)}
.hg-syshead span:first-child{font-family:'JetBrains Mono',monospace;font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hg-syshead span:last-child{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--dim)}
.hg-row{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  width:100%;padding:.75rem 1.2rem;border:0;border-bottom:1px solid var(--line);
  background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
  text-decoration:none}
.hg-row:last-child{border-bottom:0}
.hg-row:hover{background:rgba(20,28,39,.02)}
.hg-row:focus-visible{outline:2px solid var(--indigo);outline-offset:-2px}
.hg-row>div:first-child{min-width:0}
.hg-row .hg-rn{font-weight:600;font-size:.94rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.hg-row .hg-rm{font-family:'JetBrains Mono',monospace;font-size:.66rem;line-height:1.5;
  color:var(--dim);margin-top:.2rem;overflow-wrap:anywhere;text-indent:0;padding-left:0}
.hg-row .hg-rm b{font-weight:600;color:var(--muted)}
.hg-row .hg-rt{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.3rem;
  line-height:1;letter-spacing:-.02em;text-align:right;min-width:62px}
.hg-row .hg-rt small{font-size:.68rem}
.hg-row .hg-rt span{display:block;font-family:'JetBrains Mono',monospace;font-size:.6rem;
  color:var(--dim);margin-top:.22rem;font-weight:400}
.hg-badge{font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--border);
  border-radius:5px;padding:.16rem .3rem}

.hg-note{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--dim);
  padding:.6rem 1.2rem;border-top:1px solid var(--line);line-height:1.5}

/* ---- wider screens ----------------------------------------------------- */
@media(min-width:720px){
  .hg-chips{grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:8px;padding:.85rem}
  .hg-chip{padding:.65rem .8rem .6rem}
  .hg-chip .n{font-size:.8rem}
  .hg-chip .t{font-size:1.55rem}
  .hg-spark{height:20px}
  .hg-floor{grid-template-columns:48px 1fr}
}
@media(min-width:1000px){
  .hg-chips{grid-template-columns:repeat(auto-fit,minmax(184px,1fr))}
}
@media(prefers-reduced-motion:reduce){ .hg-chip{transition:none} }