/* Hearth — layout only. Every colour, radius, shadow and step is a token;
   nothing here re-declares a design decision.

   THE FRAME, in one paragraph. The shell owns ONE plane, --sidebar, the design
   system's light neutral; on it sits a 264px white sidebar PANEL, inset by
   --space-3 on all four sides with --radius-2xl and one hairline (phones get the
   full-height drawer instead). The content column is the
   only scroll owner, paints nothing of its own, and every region
   on it is a CARD: --card surface, one hairline, --radius-2xl, one elevation step
   (--shadow-xs), never nested and never a second step. On the light plane a card
   is held by its hairline rather than by a tint showing through, and the gap
   between cards — --card-gap, 20px — is still the only separator. There are no
   rules across the content column.

   Density is deliberately generous: 34px nav rows, 24px page gutters, 20px card
   gutters, 44px table rows, 14px body. This is a screen somebody reads at a
   kitchen table with a cup of tea, not a ward station.

   Active state, one signature product-wide: the active row takes the CONTENT
   plane (--background) plus a hairline, the foreground token and medium weight —
   so it reads as the selected tab of the column beside it. Hover is a light wash
   of the same plane.

   Recession, one treatment product-wide: --muted surface, muted text, no
   primary control, and the row keeps its link, its badge and its clock. Applied
   to a device that is updating or switched out of the house, and to a paused
   routine — never to something broken, which is stated at full weight.

   Two signature geometries, and nothing else draws data:
     .hh-bar    — one proportion, used for a live draw, a room's share, a day of
                  energy, a battery, a filter's life and a margin.
     .hh-strip  — a 24-cell day, used for the tariff windows, a heating
                  schedule and a day's usage. One geometry, three meanings.

   Breakpoints, declared once for the whole shell: 1280 sidebar labelled · 1024
   the sidebar collapses to an icon rail, labels become tooltips · below 900 it
   leaves the layout and returns as an off-canvas drawer, complete and labelled ·
   below 767 the metric row goes to one column and tables scroll inside their own
   container. Nothing is lost on the way down and the account menu never
   collapses into an overflow. */

.hh-shell{--gutter-page:var(--space-6);--card-gap:var(--space-5);--card-pad:var(--space-5);display:grid;height:100dvh;overflow:hidden;grid-template-columns:264px minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:var(--sidebar);color:var(--foreground);font-size:var(--text-sm)}
.hh-shell[data-mode=rail]{grid-template-columns:64px minmax(0,1fr)}
.hh-shell[data-mode=drawer]{grid-template-columns:minmax(0,1fr)}

/* ── The sidebar ─────────────────────────────────────────────────────────── */
.hh-shell{--hh-side-plane:var(--sidebar)}
.hh-side{display:flex;min-width:0;min-height:0;flex-direction:column;border-inline-end:1px solid var(--border);background:var(--hh-side-plane)}
.hh-brand{display:flex;min-width:0;align-items:center;gap:var(--space-3);border-bottom:1px solid var(--border);padding:var(--space-4) var(--space-4)}
.hh-brand__mark{width:26px;height:26px;flex:none}
.hh-brand__text{display:flex;min-width:0;flex-direction:column}
.hh-brand__name{font-family:var(--font-heading);font-size:var(--text-base);font-weight:var(--font-weight-semibold);line-height:1.2;letter-spacing:var(--tracking-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-brand__sub{font-size:var(--text-xs);color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-nav{display:flex;min-height:0;flex:1;flex-direction:column;gap:var(--space-5);overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;padding:var(--space-4) var(--space-3)}
.hh-group{display:flex;min-width:0;flex-direction:column;gap:2px}
.hh-group__label{padding:0 var(--space-2) var(--space-2);font-size:var(--text-xs);font-weight:var(--font-weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-foreground)}
.hh-link{position:relative;display:flex;width:100%;min-width:0;align-items:center;gap:var(--space-3);height:34px;border:1px solid transparent;border-radius:var(--radius-lg);background:transparent;padding:0 var(--space-2-5);text-align:left;font:inherit;font-size:var(--text-sm);color:var(--muted-foreground);cursor:pointer;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}
.hh-link:hover{background:color-mix(in srgb,var(--background) 60%,transparent);color:var(--foreground)}
.hh-link[aria-current=page]{border-color:var(--border);background:var(--background);box-shadow:var(--shadow-xs);color:var(--foreground);font-weight:var(--font-weight-medium)}
.hh-link:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.hh-link__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hh-link__count{flex:none;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--foreground) 8%,transparent);padding:1px 6px;font-size:var(--text-2xs);font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums;color:var(--muted-foreground)}
.hh-link[aria-current=page] .hh-link__count{color:var(--foreground)}
/* Rail mode drops the group labels, so it must not keep paying for them: its own
   gap and padding, and centring by align-self rather than an auto margin — an
   auto margin resolved against a scrollbar-narrowed box goes NEGATIVE and puts
   the icons outside the panel. */
.hh-side[data-rail=true] .hh-link{width:40px;justify-content:center;padding:0;align-self:center}
.hh-side[data-rail=true] .hh-nav{gap:var(--space-3);padding:var(--space-3) var(--space-2)}
.hh-side[data-rail=true] .hh-group__label{display:none}
.hh-side[data-rail=true] .hh-brand{justify-content:center;padding-inline:var(--space-2)}
/* Inset the sidebar from the app container on anything that is not the phone:
   the shell's own plane shows through on all four sides, so the sidebar reads as
   a panel sitting ON the app rather than a wall bolted to its edge. The track
   widens by the two margins so the panel itself keeps its declared 264px / 64px.
   In drawer mode it is a full-height sheet over a scrim and none of this applies. */
.hh-shell:not([data-mode=drawer]){grid-template-columns:calc(264px + var(--space-3) * 2) minmax(0,1fr)}
.hh-shell[data-mode=rail]:not([data-mode=drawer]){grid-template-columns:calc(64px + var(--space-3) * 2) minmax(0,1fr)}
.hh-shell:not([data-mode=drawer]) .hh-side{margin:var(--space-3);overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-2xl);background:var(--background);box-shadow:var(--shadow-xs)}
/* The panel is white, so the active row can no longer be the white plane: it
   takes the muted tint instead, and hover is a lighter step of the same. One
   background AND one foreground token either way (§6.3). */
.hh-shell:not([data-mode=drawer]) .hh-link:hover{background:color-mix(in srgb,var(--foreground) 4%,transparent)}
.hh-shell:not([data-mode=drawer]) .hh-link[aria-current=page]{border-color:transparent;background:color-mix(in srgb,var(--foreground) 8%,transparent);box-shadow:none}
.hh-shell:not([data-mode=drawer]) .hh-account:hover{background:color-mix(in srgb,var(--foreground) 4%,transparent)}
.hh-shell:not([data-mode=drawer]) .hh-dot{box-shadow:0 0 0 2px var(--background)}
.hh-dot{position:absolute;inset-inline-end:6px;top:6px;width:6px;height:6px;border-radius:var(--radius-full);background:var(--warning);box-shadow:0 0 0 2px var(--hh-side-plane)}
.hh-side__foot{border-top:1px solid var(--border);padding:var(--space-3)}
.hh-account{display:flex;width:100%;min-width:0;align-items:center;gap:var(--space-3);border:0;border-radius:var(--radius-xl);background:transparent;padding:var(--space-2);text-align:left;font:inherit;color:inherit;cursor:pointer}
.hh-account:hover{background:color-mix(in srgb,var(--background) 60%,transparent)}
.hh-account--rail{width:44px;justify-content:center;padding:var(--space-1)}
.hh-account__text{display:flex;min-width:0;flex-direction:column}
.hh-account__name{font-size:var(--text-sm);font-weight:var(--font-weight-medium);line-height:1.25}
.hh-account__role{font-size:var(--text-xs);color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hh-scrim{position:fixed;inset:0;z-index:55;background:rgb(0 0 0/32%)}
.hh-shell[data-mode=drawer] .hh-drawer{position:fixed;inset-block:0;inset-inline-start:0;z-index:60;width:264px;background:var(--background);box-shadow:var(--shadow-lg)}

/* ── The radio, and the cameras ──────────────────────────────────────────
   Signal is three bars filled from ONE derived band, so a bar and a word can
   never disagree. The camera plate is the one dark surface in the product: a
   view of the outside is dark in both themes, and it is not a card — a camera
   that is not answering falls back to the muted plane, which is how everything
   else in here recesses. */
.hh-signal{display:inline-flex;align-items:center;gap:var(--space-2)}
.hh-vdot{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:var(--radius-full);background:var(--background);padding:2px 9px 2px 7px;font-size:var(--text-2xs);font-weight:var(--font-weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-foreground)}
.hh-vdot::before{content:"";width:6px;height:6px;flex:none;border-radius:var(--radius-full);background:var(--muted-foreground)}
.hh-vdot[data-tone=danger]::before{background:var(--destructive)}
.hh-vdot[data-tone=warning]::before{background:var(--warning)}
.hh-vdot[data-tone=success]::before{background:var(--success)}
.hh-signal__bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.hh-signal__bars i{width:3px;border-radius:1px;background:color-mix(in srgb,var(--foreground) 16%,transparent)}
.hh-signal__bars i:nth-child(1){height:5px}
.hh-signal__bars i:nth-child(2){height:8px}
.hh-signal__bars i:nth-child(3){height:12px}
.hh-signal[data-band=good] .hh-signal__bars i{background:var(--foreground)}
.hh-signal[data-band=fair] .hh-signal__bars i:nth-child(-n+2){background:var(--warning)}
.hh-signal[data-band=weak] .hh-signal__bars i:nth-child(1){background:var(--destructive)}
.hh-signal__text{font-size:var(--text-xs);color:var(--muted-foreground)}
.hh-signal[data-band=fair] .hh-signal__text{color:var(--warning)}
.hh-signal[data-band=weak] .hh-signal__text{color:var(--destructive)}
.hh-view{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-3);aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-xl);background:var(--color-neutral-900);padding:var(--space-3);color:var(--color-neutral-100);text-align:left}
.hh-view[data-tall=true]{padding:var(--space-4);border-radius:var(--radius-2xl)}
.hh-view[data-state=shuttered]{background:color-mix(in srgb,var(--color-neutral-900) 62%,var(--color-neutral-500))}
.hh-view[data-state=blind]{background:var(--muted);color:var(--muted-foreground);box-shadow:inset 0 0 0 1px var(--border)}
.hh-view--pick{width:100%;border:0;font:inherit;cursor:pointer}
.hh-view--pick[aria-pressed=true]{outline:2px solid var(--foreground);outline-offset:2px}
.hh-view__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.hh-view__chip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--radius-full);background:rgb(255 255 255/14%);padding:2px 8px;font-size:var(--text-2xs);font-weight:var(--font-weight-medium)}
.hh-view[data-state=blind] .hh-view__chip{background:color-mix(in srgb,var(--foreground) 8%,transparent)}
.hh-view__chip[data-live=true]::before{content:"";width:6px;height:6px;flex:none;border-radius:var(--radius-full);background:var(--destructive)}
.hh-view__clock{font-size:var(--text-2xs);opacity:.7;font-variant-numeric:tabular-nums}
.hh-view__body{display:flex;min-width:0;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);text-align:center;font-size:var(--text-xs);opacity:.74}
.hh-view[data-tall=true] .hh-view__body{font-size:var(--text-sm)}
.hh-view__foot{display:flex;min-width:0;align-items:baseline;justify-content:space-between;gap:var(--space-2)}
.hh-view__name{font-size:var(--text-sm);font-weight:var(--font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-view__res{font-size:var(--text-2xs);opacity:.66;white-space:nowrap}
.hh-views{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}

/* ── The content column: the only scroll owner, on the neutral plane ─────
   The plane is the shell's, not the column's: --sidebar, the design system's own
   light neutral. The content column paints nothing, so the white cards and the
   white sidebar panel both lift off one continuous plane. */
.hh-main{display:flex;min-width:0;flex-direction:column;overflow-y:auto;overflow-x:hidden;background:transparent;overscroll-behavior:contain}
.hh-main>*{flex-shrink:0}
.hh-topbar{display:flex;height:60px;flex:none;align-items:center;gap:var(--space-2);padding:0 var(--gutter-page)}
.hh-search{flex:1;max-width:26rem;min-width:0}
.hh-search input{cursor:pointer}
.hh-search-btn{display:none}
.hh-topbar__utility{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-1)}
.hh-utility{position:relative;display:inline-flex}
.hh-badge-dot{pointer-events:none;position:absolute;inset-inline-end:-2px;top:-2px;display:flex;height:16px;min-width:16px;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--destructive);padding-inline:4px;font-size:10px;font-weight:var(--font-weight-medium);color:var(--color-white);box-shadow:0 0 0 2px var(--background)}
.hh-notify{padding:var(--space-2)}
.hh-notify__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-1) var(--space-2) var(--space-2)}
.hh-notify__item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--space-3);border:0;border-radius:var(--radius-lg);background:transparent;padding:var(--space-2-5);text-align:left;font:inherit;color:inherit;cursor:pointer}
.hh-notify__item:hover{background:var(--accent)}
.hh-notify__title{font-size:var(--text-sm);font-weight:var(--font-weight-medium);text-wrap:pretty}
.hh-notify__body{grid-column:1;font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.hh-notify__time{grid-row:1;grid-column:2;font-size:var(--text-xs);color:var(--muted-foreground)}

/* ── Page header ─────────────────────────────────────────────────────────── */
.hh-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4);padding:var(--space-2) var(--gutter-page) var(--space-5)}
.hh-head>div:first-child{min-width:0}
.hh-head .o-breadcrumb__list{flex-wrap:nowrap;min-width:0;overflow:hidden;white-space:nowrap}
.hh-head .o-breadcrumb__page{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hh-title{margin:var(--space-2) 0 0;font-family:var(--font-heading);font-weight:var(--font-weight-semibold);font-size:var(--text-3xl);line-height:1.1;letter-spacing:var(--tracking-tight)}
.hh-lede{margin:var(--space-2) 0 0;max-width:62ch;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}
.hh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}

/* ── Cards: the only surface, one elevation, never nested ────────────────── */
.hh-band{padding:0 var(--gutter-page) var(--card-gap)}
.hh-card{display:flex;min-width:0;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-2xl);background:var(--card);box-shadow:var(--shadow-xs);padding:var(--card-pad)}
.hh-card--flush{padding-inline:0}
.hh-card--tint{background:var(--muted);box-shadow:none}
.hh-card--fill{flex:1}
.hh-card__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-4)}
.hh-card--flush .hh-card__head{padding-inline:var(--card-pad)}
.hh-card__title{margin:0;font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight)}
.hh-card__note{margin:var(--space-1) 0 0;max-width:64ch;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}
.hh-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:var(--card-gap);padding:0 var(--gutter-page) var(--card-gap)}
.hh-cols--wide{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.hh-cols--narrow{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
.hh-cols--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.hh-cols>*{display:flex;min-width:0;flex-direction:column;gap:var(--card-gap)}
.hh-stack{display:flex;min-width:0;flex-direction:column;gap:var(--card-gap)}
.hh-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--space-4)}
@media(max-width:1100px){.hh-cols,.hh-cols--wide,.hh-cols--narrow,.hh-cols--three{grid-template-columns:minmax(0,1fr)}}

/* Metric tiles: equal weight, so they may auto-fit (§5.1). Label, figure and
   qualifier line up across the row because the columns share one row
   definition. */
.hh-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--card-gap);padding:0 var(--gutter-page) var(--card-gap)}
.hh-figs>*{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start;gap:var(--space-1);border:1px solid var(--border);border-radius:var(--radius-2xl);background:var(--card);box-shadow:var(--shadow-xs);padding:var(--card-pad)}
.hh-fig__label{font-size:var(--text-sm);color:var(--muted-foreground)}
.hh-fig{font-family:var(--font-heading);font-weight:var(--font-weight-semibold);font-size:var(--text-4xl);line-height:1;letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums}
.hh-fig__unit{font-size:var(--text-lg);font-weight:var(--font-weight-medium);color:var(--muted-foreground)}
.hh-fig__qualifier{font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
@media(max-width:767px){.hh-figs{grid-template-columns:minmax(0,1fr)}}

/* ── The two signature geometries ────────────────────────────────────────── */
.hh-bar{display:flex;width:100%;height:8px;overflow:hidden;border-radius:var(--radius-full);background:var(--muted)}
.hh-bar__fill{display:block;height:100%;background:var(--foreground);transition:width var(--duration-slow) var(--ease-out)}
.hh-bar__fill--warn{background:var(--warning)}
.hh-bar__fill--danger{background:var(--destructive)}
.hh-bar__fill--good{background:var(--success)}
.hh-bar__fill--soft{background:var(--muted-foreground);opacity:.45}
.hh-bars{display:flex;align-items:flex-end;gap:3px;height:104px}
.hh-bars__col{display:flex;min-width:0;flex:1;flex-direction:column;align-items:center;gap:var(--space-1-5);justify-content:flex-end;border:0;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer}
.hh-bars__stack{display:flex;width:100%;flex-direction:column;justify-content:flex-end;height:80px;border-radius:var(--radius-sm);background:var(--muted);overflow:hidden}
.hh-bars__part{display:block;width:100%;background:var(--foreground)}
.hh-bars__part--soft{background:var(--muted-foreground);opacity:.4}
.hh-bars__col[data-on=true] .hh-bars__part{background:var(--chart-1)}
.hh-bars__tick{font-size:var(--text-2xs);color:var(--muted-foreground);white-space:nowrap}
/* The day strip: 24 cells, one per hour. Used for tariff windows, a heating
   schedule and a day's usage — one geometry, three meanings. */
.hh-strip{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px}
.hh-strip__cell{position:relative;height:26px;border-radius:var(--radius-xs);background:var(--muted)}
.hh-strip__cell[data-level="1"]{background:color-mix(in srgb,var(--foreground) 18%,var(--muted))}
.hh-strip__cell[data-level="2"]{background:color-mix(in srgb,var(--foreground) 42%,var(--muted))}
.hh-strip__cell[data-level="3"]{background:var(--foreground)}
.hh-strip__cell[data-tone=off]{background:color-mix(in srgb,var(--success) 30%,var(--muted))}
.hh-strip__cell[data-tone=peak]{background:color-mix(in srgb,var(--warning) 55%,var(--muted))}
.hh-strip__cell[data-now=true]::after{content:"";position:absolute;inset-block:-4px;inset-inline-start:50%;width:2px;border-radius:var(--radius-full);background:var(--foreground)}
.hh-strip__axis{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;margin-top:var(--space-1-5);font-size:var(--text-2xs);color:var(--muted-foreground)}
.hh-strip__axis span{grid-column:span 6;white-space:nowrap}
.hh-legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1-5) var(--space-4);font-size:var(--text-xs);color:var(--muted-foreground)}
.hh-legend__key{display:inline-flex;align-items:center;gap:var(--space-2)}
.hh-legend__swatch{width:10px;height:10px;border-radius:var(--radius-xs);background:var(--foreground)}
.hh-legend__swatch--soft{background:var(--muted-foreground);opacity:.4}
.hh-legend__swatch--off{background:color-mix(in srgb,var(--success) 30%,var(--muted))}
.hh-legend__swatch--peak{background:color-mix(in srgb,var(--warning) 55%,var(--muted))}

/* ── Rows, pairs and list furniture ─────────────────────────────────────── */
.hh-rows{display:flex;min-width:0;flex-direction:column}
.hh-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);border-top:1px solid var(--border);padding:var(--space-3-5) 0}
.hh-row:first-child{border-top:0;padding-top:0}
.hh-row:last-child{padding-bottom:0}
.hh-row--recessed{opacity:.66}
.hh-row__text{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}
.hh-row__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.hh-row__note{font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.hh-row__value{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;white-space:nowrap}
.hh-pairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--space-4) var(--space-5)}
.hh-pair{display:flex;min-width:0;flex-direction:column;gap:2px}
.hh-pair__label{font-size:var(--text-xs);color:var(--muted-foreground)}
.hh-pair__value{font-size:var(--text-sm);text-wrap:pretty}
.hh-muted{color:var(--muted-foreground)}
.hh-warn{color:var(--warning-foreground)}
.hh-danger{color:var(--destructive-foreground)}
.hh-good{color:var(--success-foreground)}
.hh-num{font-variant-numeric:tabular-nums;text-align:right}
.hh-footnote{font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.hh-chips{display:flex;flex-wrap:wrap;gap:var(--space-1-5)}
.hh-actions__row{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.hh-linkbtn{border:0;background:transparent;padding:0;font:inherit;font-weight:var(--font-weight-medium);color:var(--foreground);text-decoration:underline;text-decoration-color:var(--input);text-underline-offset:2px;cursor:pointer}
.hh-linkbtn:hover{text-decoration-color:var(--foreground)}
.hh-person{display:flex;min-width:0;align-items:center;gap:var(--space-2-5)}
.hh-person__text{display:flex;min-width:0;flex-direction:column}
.hh-person__name{font-size:var(--text-sm);font-weight:var(--font-weight-medium);line-height:1.3}
.hh-person__meta{font-size:var(--text-xs);color:var(--muted-foreground);line-height:1.3}
.hh-sort{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer}
.hh-sort[data-on=true]{color:var(--foreground)}

/* Tables live inside a flush card and scroll in their own container. */
/* The design system's Table renders inside its own .o-table-container, which is
   the element that scrolls. A nowrap table has to contribute its OWN intrinsic
   width to that container's scroll area: width:100% alone resolves against the
   container, min-content then pushes the box wider, and the excess is clipped
   with nothing to scroll — the action column simply cannot be reached. Do not
   put this back to width:100%. */
.hh-tablewrap{width:100%;min-width:0;overflow-x:auto}
.hh-tablewrap .o-table{width:max-content;min-width:100%}
.hh-tablewrap .o-table th,.hh-tablewrap .o-table td{white-space:nowrap}
.hh-tablewrap .o-table th:first-child,.hh-tablewrap .o-table td:first-child{padding-inline-start:var(--card-pad)}
.hh-tablewrap .o-table th:last-child,.hh-tablewrap .o-table td:last-child{padding-inline-end:var(--card-pad)}
.hh-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:0 var(--card-pad) var(--space-4)}
.hh-filters__text{flex:1;min-width:12rem;max-width:22rem}
.hh-filters__select{display:block;width:11rem}
.hh-tablefoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-4) var(--card-pad) 0}

/* ── Room and device controls ───────────────────────────────────────────── */
.hh-roomgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:var(--card-gap);padding:0 var(--gutter-page) var(--card-gap)}
.hh-roomgrid>*{height:100%}
.hh-room__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.hh-room__name{font-family:var(--font-heading);font-size:var(--text-base);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight)}
.hh-room__temp{display:flex;align-items:baseline;gap:2px;font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;line-height:1}
.hh-room__temp span{font-size:var(--text-sm);color:var(--muted-foreground)}
/* A card's footer is its last child and always sits on the card's floor: the auto
   top margin eats whatever height the card has spare, so cards side by side in a
   grid line their footers up however unequal their bodies are. The minimum gap
   above it comes from the element before it, because an auto margin collapses to
   nothing once the body fills the card. */
.hh-room__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--border)}
.hh-card>*:has(+.hh-room__foot){margin-bottom:var(--space-4)}
.hh-dial{display:flex;min-width:0;flex-direction:column;align-items:center;gap:var(--space-1)}
.hh-dial__reading{display:flex;align-items:baseline;gap:2px;font-family:var(--font-heading);font-size:var(--text-5xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums;line-height:1}
.hh-dial__reading span{font-size:var(--text-2xl);color:var(--muted-foreground)}
.hh-dial__target{font-size:var(--text-sm);color:var(--muted-foreground);text-align:center;text-wrap:pretty}
.hh-stepper{display:inline-flex;align-items:center;gap:var(--space-1);border:1px solid var(--border);border-radius:var(--radius-full);background:var(--background);padding:2px}
.hh-photos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.hh-photo{display:flex;align-items:center;justify-content:center;border:2px solid var(--border);border-radius:var(--radius-full);background:transparent;padding:2px;cursor:pointer}
.hh-photo[aria-pressed=true]{border-color:var(--foreground)}
.hh-upload{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.hh-drop{display:flex;flex:1;min-width:15rem;flex-direction:column;align-items:center;gap:var(--space-2);border:1px dashed var(--input);border-radius:var(--radius-xl);background:var(--muted);padding:var(--space-5);text-align:center;cursor:pointer}
.hh-drop:hover,.hh-drop[data-over=true]{border-color:var(--foreground)}
.hh-drop[data-invalid=true]{border-color:var(--destructive)}
.hh-drop:focus-within{outline:2px solid var(--ring);outline-offset:2px}
.hh-drop input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hh-drop__title{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.hh-preview{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}

/* ── Forms, settings and the staged bar ─────────────────────────────────── */
.hh-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--space-4)}
.hh-fields--one{grid-template-columns:minmax(0,1fr)}
.hh-fields__wide{grid-column:1/-1}
.hh-formbar{position:sticky;bottom:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);border-top:1px solid var(--border);background:color-mix(in srgb,var(--background) 92%,transparent);backdrop-filter:blur(6px);padding:var(--space-4) var(--gutter-page)}
.hh-formbar__note{flex:1;min-width:12rem;font-size:var(--text-xs);color:var(--muted-foreground)}
.hh-tabs{display:flex;gap:var(--space-1);overflow-x:auto;padding:0 var(--gutter-page) var(--card-gap);scrollbar-width:none}
.hh-tabs::-webkit-scrollbar{display:none}
.hh-tab{flex:none;border:1px solid transparent;border-radius:var(--radius-full);background:transparent;padding:var(--space-2) var(--space-3-5);font:inherit;font-size:var(--text-sm);color:var(--muted-foreground);white-space:nowrap;cursor:pointer}
.hh-tab:hover{background:var(--accent);color:var(--foreground)}
.hh-tab[aria-current=page]{border-color:var(--border);background:var(--muted);color:var(--foreground);font-weight:var(--font-weight-medium)}
.hh-tab:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.hh-checklist{display:flex;flex-direction:column;gap:var(--space-1-5)}
.hh-checklist__item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--muted-foreground)}
.hh-checklist__item[data-met=true]{color:var(--success-foreground)}

/* ── Auth: its own shell, no navigation owner (AGENTS §7.1) ─────────────── */
.hh-auth{display:grid;min-height:100dvh;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);background:var(--background);color:var(--foreground)}
.hh-auth__side{position:relative;isolation:isolate;overflow:hidden;display:flex;min-width:0;flex-direction:column;justify-content:space-between;gap:var(--space-8);border-inline-end:1px solid var(--border);background:var(--muted);padding:var(--space-10)}
.hh-auth__art{position:absolute;inset:-2px;z-index:-1;pointer-events:none;opacity:.5;background-image:radial-gradient(circle at center,color-mix(in srgb,var(--foreground) 26%,transparent) 1.2px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:radial-gradient(120% 100% at 12% 100%,#000 0%,rgb(0 0 0/45%) 42%,transparent 78%);mask-image:radial-gradient(120% 100% at 12% 100%,#000 0%,rgb(0 0 0/45%) 42%,transparent 78%)}
.hh-auth__mark{display:flex;align-items:center;gap:var(--space-2-5);font-family:var(--font-heading);font-size:var(--text-base);font-weight:var(--font-weight-semibold)}
.hh-auth__mark img{width:22px;height:22px}
.hh-auth__claim{max-width:24rem;font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:var(--font-weight-semibold);line-height:1.15;letter-spacing:var(--tracking-tight);text-wrap:pretty}
.hh-auth__fine{max-width:28rem;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}
.hh-auth__formside{display:flex;min-width:0;align-items:center;justify-content:center;padding:var(--space-10) var(--space-6)}
.hh-auth__form{display:flex;width:100%;max-width:25rem;flex-direction:column;gap:var(--space-6)}
.hh-auth__title{margin:0;font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight)}
.hh-auth__lede{margin:var(--space-2) 0 0;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}
.hh-auth__fields{display:flex;flex-direction:column;gap:var(--space-4)}
.hh-auth__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2)}
.hh-auth__foot{font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}
@media(max-width:900px){.hh-auth{grid-template-columns:minmax(0,1fr)}.hh-auth__side{border-inline-end:0;border-bottom:1px solid var(--border);gap:var(--space-5);padding:var(--space-6)}.hh-auth__claim{font-size:var(--text-2xl)}}

/* ── Responsiveness: content follows, nothing is lost ───────────────────── */
@media(max-width:1024px){
  .hh-shell{--gutter-page:var(--space-5);--card-gap:var(--space-4)}
  .hh-search{display:none}
  .hh-search-btn{display:inline-flex}
}
@media(max-width:767px){
  .hh-shell{--gutter-page:var(--space-4);--card-pad:var(--space-4)}
  .hh-title{font-size:var(--text-2xl)}
  .hh-fig{font-size:var(--text-3xl)}
  .hh-dial__reading{font-size:var(--text-4xl)}
  .hh-topbar{height:56px}
  .hh-link{height:44px}
  .hh-account{min-height:44px}
  .hh-roomgrid{grid-template-columns:minmax(0,1fr)}
  .hh-bars{height:88px}
  .hh-strip__cell{height:22px}
}
