/* ============================================================
   The House Library.

   A rack of bin cards. It borrows the Library's bar and head wholesale
   — same brand block, same 82 layer, same nav — because the two are
   siblings and a somm moving between them should not feel the ground
   change. Only the rack itself is new.
   ============================================================ */

#house {
  /* v0.134: the column every part of the room lines up on. */
  --hs-col: 940px;
  position: fixed; inset: 0; z-index: 82;
  /* Its own token, not --chrome-2. See the note at that token in
     desk.css: the Cellar being a deeper, warmer room than the lists is
     a decision now, not a coincidence of which neutral it borrowed. */
  background: var(--cellar-ground);
  display: flex; flex-direction: column;
  overflow: hidden;
}
#house[hidden] { display: none; }

/* The desk stays mounted underneath — TSPdf and the phone's fit-zoom
   both measure real page rects, and a display:none desk breaks both.
   It is only made deaf and still. */
body.house-open #desk { pointer-events: none; }
body.house-open { overflow: hidden; }
body.house-open .cell-lib { display: none; }

/* ---------------- nav between the two places ----------------
   Two words, not icons. At this size a shelf glyph and a rack glyph
   would be the same eight pixels of grey. */
.lib-nav { display: flex; gap: 2px; align-items: center; }

.lib-nav button {
  appearance: none; border: 1px solid transparent; background: none;
  font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-soft);
  height: 27px; padding: 0 10px; border-radius: 3px; cursor: pointer;
  white-space: nowrap;
}
.lib-nav button:hover { color: var(--ink); background: var(--lift); }
.lib-nav button[aria-current="page"] {
  color: var(--ink); background: var(--lift);
  border-color: var(--chrome-line-2);
}
.lib-nav button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }

/* THE ONE NUMBER IN THE BAR.
   Three destinations drawn as three equal words hid a real asymmetry:
   lists change when you write them, the reference shelf never changes
   at all, and the Cellar drifts on its own — bottles go down, things go
   out, counts go stale. It is the only room in the app with news in it.
   This is that news, in the smallest form that carries it, and it says
   the room is an inventory without spending a word on saying so.

   Jost rather than Garamond because it sits against a Garamond label
   and needs to read as a figure rather than as a second word; tabular
   so the bar does not shift by a pixel when 9 becomes 10. Held to one
   number deliberately — the other two buttons have no equivalent fact,
   and a badge on each would be the sprawl this project keeps refusing.
   Hidden at zero: zero reads as a count, and an uncounted rack is an
   absence, not a quantity. */
/* `align-items: baseline` aligned the label to the badge correctly and
   the button to its two neighbours wrongly: an inline-flex button takes
   its first item's baseline as its own, which sat the words about five
   pixels above "My Lists" and "Wine Library" in the same 27px row.
   Centred, all three read off one line; the badge keeps its own
   alignment from the rule below. */
.nav-cellar { display: inline-flex; align-items: center; gap: 6px; }
.lib-nav-n {
  font-family: var(--font-ui-2);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  /* Lifted off the baseline: it is an annotation on the word, not the
     second half of it. */
  transform: translateY(-1px);
}
.lib-nav-n[hidden] { display: none; }
/* On the Cellar's own screen the rack below states every number this
   could. Keeping it lit there would be the button describing the page
   you are already reading. */
#house .lib-nav button[aria-current="page"] .lib-nav-n { display: none; }

/* ---------------- the rack ---------------- */
.hs-stack {
  flex: 1; overflow-y: auto;
  padding: 0 28px 64px;
}

/* Narrower than the Library's grid of cards. This is a list read down
   the left edge with controls at the right, and 1120px leaves a hand's
   width of nothing between a wine's name and its count. */
.hs-sec { max-width: var(--hs-col); margin: 0 auto 34px; }

.hs-sec-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--chrome-line);
  margin-bottom: 4px;
}
.hs-sec-head h3 {
  margin: 0; font-family: var(--font-ui); font-weight: 600;
  font-size: 17px; letter-spacing: .01em; color: var(--ink);
}
.hs-sec-sub { font-size: 12.5px; color: var(--ink-faint); }
.hs-spring { flex: 1; }
.hs-sec-n {
  font-family: var(--font-ui-2); font-size: 11px; letter-spacing: .09em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.hs-sec-none {
  margin: 12px 2px; font-size: 13px; color: var(--ink-faint);
}

/* Previous wines are present but demoted — one step down in contrast,
   not hidden behind a disclosure nobody opens. */
.hs-sec[data-sec="previous"] { opacity: .78; }
.hs-sec[data-sec="previous"]:hover,
.hs-sec[data-sec="previous"]:focus-within { opacity: 1; }

/* ---------------- a row ----------------
   The grid is the whole layout. Named tracks would be nice but the
   columns are read left to right exactly as written: mark, wine,
   vintage, count, insert, menu. */
.hs-rows { display: flex; flex-direction: column; }

.hs-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 84px 112px 132px 30px;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--chrome-line-2);
}
.hs-row:last-child { border-bottom: 0; }
.hs-row:hover { background: var(--lift-2); }

.hs-row.is-out .hs-name b { color: var(--ink-faint); }
.hs-row.is-prev .hs-name b { color: var(--ink-soft); font-weight: 400; }

/* ---------------- the favourite mark ---------------- */
.hs-fav {
  appearance: none; background: none; border: 0; padding: 0;
  width: 26px; height: 26px; border-radius: 3px; cursor: pointer;
  display: grid; place-items: center;
  color: var(--ink-faint);
}
.hs-fav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.hs-fav:hover { color: var(--ink-soft); background: var(--lift); }
.hs-fav.on { color: var(--accent-ink); }
.hs-fav.on svg { fill: currentColor; stroke: currentColor; }
.hs-fav:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }

/* ---------------- the wine ---------------- */
.hs-name { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* v0.130: a wine's name is set in the book weight here as it is in the
   Wine Library and on the list; the bold made the stock read as a column
   of headings under its own headings. */
.hs-name b {
  font-family: var(--font-ui); font-weight: 400; font-size: 15.5px;
  color: var(--ink); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-meta, .hs-price {
  font-size: 12px; color: var(--ink-faint); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------- the two prices ----------------
   A button that reads as text. It was a plain span for a long time,
   which put a read-only value inches from two editable fields with no
   way to tell why. The underline appears on hover so the row stays
   calm until you go looking. */
.hs-price {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; font-size: 12px; text-align: left;
  font-variant-numeric: tabular-nums; color: var(--ink-soft);
  cursor: pointer; border-radius: var(--r); max-width: 100%;
  /* `.hs-name` is a flex column, so without this the button stretches
     the full width of the name cell and both the hover underline and
     the focus ring draw an 860px box around a 130px label. */
  align-self: flex-start;
}
.hs-price:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.hs-price:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-theme="dark"] .hs-price:focus-visible { outline-color: var(--accent-ink); }

/* Most wines in a rack have no price, and a permanent "Set the prices"
   on every one of them is noise on a screen meant to be scanned.
   Revealed on hover and on keyboard focus. Touch has no hover, which
   is why the same editor is in the More menu - on a phone that is the
   only route to it. */
.hs-price.is-empty {
  opacity: 0;
  font-family: var(--font-ui-2); font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint);
  transition: opacity 90ms linear;
}
.hs-row:hover .hs-price.is-empty,
.hs-row:focus-within .hs-price.is-empty,
.hs-price.is-empty:focus-visible { opacity: 1; }

/* The pair, open in place under the name. Narrow on purpose: these are
   two- and three-figure numbers, and a field wide enough for a
   sentence invites one. */
.hs-pricebox { display: flex; gap: 8px; margin-top: 3px; }
.hs-pricebox label { display: flex; align-items: center; gap: 5px; }
.hs-pricebox label > span {
  font-family: var(--font-ui-2); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint);
}
.hs-pricebox input {
  appearance: none;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  font-family: var(--font-ui); font-size: 13px;
  font-variant-numeric: tabular-nums;
  height: 24px; width: 58px; padding: 0 6px;
  text-align: center;
}
.hs-pricebox input:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ---------------- vintage ----------------
   A field, because a vintage is a fact that changes with the delivery
   rather than an identity. Labelled above rather than beside: at 84px
   a beside-label leaves room for two digits. */
.hs-vin { display: flex; flex-direction: column; gap: 2px; }
.hs-vin > span {
  font-family: var(--font-ui-2); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint);
}
/* Where the columns line up, the caption is a column header and one is
   enough. Hidden rather than removed so every row keeps the same
   height and the fields stay on their line. */
@media (min-width: 861px) {
  .hs-rows .hs-row:not(:first-child) .hs-vin > span { visibility: hidden; }
}
.hs-vin input,
.hs-count input {
  appearance: none;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  font-family: var(--font-ui); font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  height: 26px; width: 100%; padding: 0 7px;
  text-align: center;
}
.hs-vin input::placeholder, .hs-count input::placeholder { color: var(--ink-faint); }
.hs-vin input:focus, .hs-count input:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ---------------- the count ----------------
   Minus, the number, plus, and the date underneath. The date is not
   decoration: a count without one is a claim, and this app does not
   put claims in front of people. */
.hs-count {
  display: grid;
  /* The number sits between its own two buttons rather than floating
     in the middle of a wide track — a stepper you have to aim at is a
     stepper that gets pressed twice. */
  grid-template-columns: 26px 54px 26px;
  grid-template-areas: "minus num plus" "when when when";
  gap: 3px 4px;
  align-items: center;
  justify-content: center;
}
.hs-count button {
  grid-area: minus;
  appearance: none; cursor: pointer;
  width: 26px; height: 26px; border-radius: 3px;
  border: 1px solid var(--btn-line);
  background: linear-gradient(var(--btn-a), var(--btn-b));
  color: var(--ink-soft);
  font-family: var(--font-ui); font-size: 15px; line-height: 1;
  display: grid; place-items: center;
}
.hs-count button[data-act="plus"] { grid-area: plus; }
.hs-count input { grid-area: num; }
.hs-count button:hover {
  background: linear-gradient(var(--btn-a-hi), var(--btn-b-hi));
  color: var(--ink);
}
.hs-count button:active { background: var(--btn-b); }
.hs-count button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }

.hs-when {
  grid-area: when;
  font-size: 10.5px; color: var(--ink-faint);
  text-align: center; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-row.is-out .hs-when { color: var(--accent-ink); }

/* ---------------- insert ---------------- */
/* The insert button is the shared .act-list (css/actions.css), v0.66. */

.hs-more {
  appearance: none; background: none; border: 0; padding: 0;
  width: 26px; height: 26px; border-radius: 3px; cursor: pointer;
  color: var(--ink-faint); display: grid; place-items: center;
}
.hs-more svg { width: 16px; height: 16px; fill: currentColor; }
.hs-more:hover { color: var(--ink); background: var(--lift); }
.hs-more:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }

/* ---------------- the row menu ---------------- */
.hs-menu {
  position: fixed; z-index: 96; width: 216px;
  background: var(--chrome); border: 1px solid var(--chrome-line);
  border-radius: var(--r); padding: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column;
}
.hs-menu button {
  appearance: none; background: none; border: 0; cursor: pointer;
  text-align: left; font-family: var(--font-ui); font-size: 13.5px;
  color: var(--ink); padding: 7px 9px; border-radius: 3px;
}
.hs-menu button:hover { background: var(--lift); }
.hs-menu button.danger { color: var(--accent-ink); }
.hs-menu button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -1px; }

/* ---------------- adding by hand ---------------- */
.hs-addwrap { max-width: 1120px; margin: 14px auto 0; }

.hs-add {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 86px auto;
  gap: 8px; align-items: center;
  padding: 10px; border-radius: var(--r);
  background: var(--lift-2);
  border: 1px solid var(--chrome-line-2);
}
.hs-add input {
  appearance: none;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  font-family: var(--font-ui); font-size: 13.5px;
  height: 30px; padding: 0 9px; width: 100%;
}
.hs-add input::placeholder { color: var(--ink-faint); }
.hs-add input:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.hs-add input#hsAddVin, .hs-add input#hsAddCount {
  text-align: center; font-variant-numeric: tabular-nums;
}
.hs-add button.primary {
  appearance: none; cursor: pointer; white-space: nowrap;
  height: 30px; padding: 0 15px; border-radius: 3px;
  border: 1px solid var(--accent);
  background: var(--accent); color: #fff;
  font-family: var(--font-ui); font-size: 13.5px;
}
.hs-add button.primary:hover { filter: brightness(1.08); }
.hs-add button.primary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* The master library's offers, under the field they answer. */
.hs-pick {
  position: absolute; left: 10px; right: 10px; top: calc(100% - 4px);
  z-index: 3;
  background: var(--chrome); border: 1px solid var(--chrome-line);
  border-radius: var(--r); padding: 4px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column;
  /* Tall enough for all six offers. 260px cut the sixth row in half,
     which reads as “there is more below” — and with the search capped
     at six there never is. */
  max-height: 304px; overflow-y: auto;
}
.hs-pick[hidden] { display: none; }
.hs-pick-hit {
  appearance: none; background: none; border: 0; cursor: pointer;
  text-align: left; padding: 7px 9px; border-radius: 3px;
  display: flex; flex-direction: column; gap: 1px;
}
.hs-pick-hit b {
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.hs-pick-hit span { font-size: 11.5px; color: var(--ink-faint); }
.hs-pick-hit:hover, .hs-pick-hit:focus-visible {
  background: var(--lift); outline: none;
}

/* ---------------- nothing yet ---------------- */
.hs-empty { max-width: var(--hs-col); margin: 36px auto 0; text-align: left; }
.hs-empty h3 {
  margin: 0 0 6px; font-family: var(--font-ui); font-weight: 600;
  font-size: 26px; color: var(--ink); letter-spacing: -.01em;
}
.hs-empty p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.hs-empty .hs-addwrap { margin-top: 22px; }

/* ---------------- narrow ----------------
   Counting happens standing in a cellar holding a phone, so the rack
   has to survive 390px. The row folds into two lines — the wine over
   its own controls — and nothing is dropped, because a control you
   cannot reach while holding a bottle is the one you needed.

   The breakpoint is 860 rather than the shell's PHONE_MAX of 760: the
   six-track row is already cramped on a small laptop, and this place
   has no phone shell of its own to hand off to. */
@media (max-width: 860px) {
  .hs-stack { padding: 0 14px 56px; }
  .hs-sec { margin-bottom: 26px; }

  .hs-row {
    grid-template-columns: 30px 78px minmax(0, 1fr) auto;
    /* The vintage field spans the star's column and the one beside it.
       Left in the star's column alone it gets 30px, which is narrower
       than the word "Vintage" that labels it. */
    grid-template-areas:
      "fav name name more"
      "vin vin  cnt  ins";
    gap: 8px 8px;
    padding: 11px 2px 12px;
    align-items: center;
  }
  .hs-fav   { grid-area: fav; }
  .hs-name  { grid-area: name; }
  .hs-more  { grid-area: more; justify-self: end; }
  .hs-vin   { grid-area: vin; }
  .hs-count { grid-area: cnt; }
  .hs-ins   { grid-area: ins; justify-self: end; }

  /* The date moves beside the number rather than under it: the row is
     already two lines tall and a third would halve how many wines fit
     on a phone screen. */
  .hs-count {
    grid-template-columns: 30px 58px 30px minmax(0, 1fr);
    grid-template-areas: "minus num plus when";
    gap: 6px;
  }
  .hs-count .hs-when { text-align: left; }

  .hs-add {
    grid-template-columns: minmax(0, 1fr) 76px;
    grid-template-areas:
      "name name"
      "vin  cnt"
      "go   go";
    gap: 8px;
  }
  #hsAddName  { grid-area: name; }
  #hsAddVin   { grid-area: vin; }
  #hsAddCount { grid-area: cnt; }
  #hsAddGo    { grid-area: go; }
}

/* ---------------- the bar, on a narrow screen ----------------
   A phone bar cannot hold the brand, both places, the theme, the
   language and the way back. Shrunk first, dropped second — and the
   dropping was wrong. The comment that used to sit here said the phone
   reached both places from its More sheet; the More sheet had Library
   in it and nothing else, so below 620px the only route into the
   Cellar was the group of cards at the foot of My Lists, standing where
   an entrance had been deleted. Wrapped third: .lib-bar has been
   flex-wrap since v0.26.0, so the nav does not have to fit beside the
   brand and the way back. It takes a row of its own underneath them.
   See DESIGN-cellar-phone.md. */
@media (max-width: 760px) {
  .lib-nav button { padding: 6px 9px; font-size: 13px; }
  #house .lib-bar { gap: 8px; }
}
@media (max-width: 620px) {
  /* The row is the last of the bar's own padding rather than something
     under it: the bar gives up its bottom padding, the nav spans the
     full width, and the hairline lands on the bar's bottom edge. A
     negative bottom margin was tried first and pulled the row out of
     the sticky bar's box, where it sat on top of the page heading. */
  .lib-bar { padding-bottom: 0; }
  .lib-nav {
    order: 9;
    flex: 0 0 100%;
    gap: 0;
    margin: 0 -12px;
    border-top: 1px solid var(--chrome-line);
  }
  /* Three equal cells rather than three words at their natural width:
     the row is the switch, so each place should be the same size of
     target, and Spanish's "Biblioteca de vinos" cannot be allowed to
     take two thirds of it. Specificity deliberate — .lib-bar button in
     library.css gives every button in this bar a border, a radius and
     6px of padding, which is right for a control and wrong for a cell
     in a switch. */
  .lib-bar .lib-nav button {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: none;
    /* The base rule pins these to height: 27px, which is a word in a
       toolbar. A row that is the phone's only way between rooms is a
       target, so it gets the 44 every phone guideline asks for and
       grows past it when Spanish needs a second line. */
    height: auto;
    min-height: 44px;
    padding: 8px 4px;
    font-size: 13.5px;
    /* Bold, all three. On the desk these are three small words in a
       toolbar; here they are the phone's only way between rooms, and a
       heading for the page under each. The current one is still told
       apart by ink and a rule, not by weight — weight is now what the
       row is, rather than which cell you are on. Garamond ships 400
       and 700 only, so 700 it is; no face is synthesised. */
    font-weight: 700;
    /* Two lines of whole words rather than one clipped one — the same
       answer the bar itself took in v0.26.0. "Biblioteca de vinos"
       cannot hold one line in a third of a 360px screen, and an
       ellipsis on a place name is worse than a wrap. */
    white-space: normal;
    line-height: 1.2;
    text-align: center;
  }
  .lib-bar .lib-nav button > span { min-width: 0; }
  /* The Cellar sits second, between your lists and the reference
     shelf, on every device. This used to be a phone-only `order`
     rule, so the desk and the phone disagreed; since v0.54.0 it is the
     markup order, and there is nothing left here to say it twice. */
  /* The current room is named by a rule under the word, not by a filled
     pill: a pill in a row of three equal cells reads as the one button
     you can press. */
  .lib-bar .lib-nav button[aria-current="page"] {
    color: var(--accent-ink);
    box-shadow: inset 0 -2px 0 var(--accent);
  }
}

@media (max-width: 460px) {
  /* Under the narrowest phones the insert button loses its word and
     keeps its job; the count field is what the thumb is aiming at. */
  .hs-row {
    grid-template-columns: 28px 50px minmax(0, 1fr) auto;
    gap: 7px 6px;
  }
  .hs-name b { font-size: 14.5px; }
  .hs-ins { padding: 0 8px 0 7px; font-size: 12.5px; gap: 5px; }
  .hs-count { grid-template-columns: 28px 46px 28px minmax(0, 1fr); gap: 5px; }
  /* "never counted" on two short lines rather than cut to "n…": the
     list button is a word wider since v0.66 and the date gives way. */
  .hs-when { font-size: 10px; white-space: normal; overflow: visible; line-height: 1.15; }
}

/* ═══════════ MORE THAN ONE ESTABLISHMENT ═══════════
   Two bars, two racks. Was a row of chips under the status line, which
   gave a licensed premises the visual weight of a tag and only named
   it once there were two. Now a card each, and one more to add the
   next.

   The heading is untouched by design. It sits in a .lib-head that is
   shrink-wrapped to its own content and centred by auto margins, so
   anything wider than the h2 dropped inside it would have widened the
   block and shoved the heading to the left. Giving the house's heading
   a definite width and centred text holds the h2 and the status line
   exactly where they were while the cards below get room. */
#house .lib-head {
  width: 100%;
  /* The rack's own width, so the cards line up with the wines. */
  max-width: 1120px;
  text-align: center;
}

/* WHAT THE ROOM IS.
   `cellar` is ambiguous to a first-time reader in a way `Wine Library`
   is not — it could plausibly be a saved list, an archive, a wish list,
   or where wines go when you take them off a page. It is none of those,
   and until now nothing on screen said so; the top level opened on a
   heading and two counts. Measured rather than full-width, because a
   1120px line of 15px type is a paragraph nobody finishes, and this one
   has to be read once.

   The third clause is the one that earns the space. Users get the
   boundary wrong, and the whole architecture rests on it: the cellar is
   a ledger that lists read from, never a draft of a list. */
.hs-role {
  margin: 10px 0 0;
  max-width: 62ch;
  font-family: var(--font-ui);
  font-size: 15px; line-height: 1.5;
  color: var(--ink-soft);
}
/* Not on an establishment's own rack. The masthead there already reads
   out live wines, bottles, what is down to the last, what is out and
   when it was counted — an inventory reading itself. A sentence
   explaining that this is an inventory would be a caption on it. */
#house.is-inside .hs-role { display: none; }

.hs-houses {
  /* The bottom margin is doing real work: with a delete armed this
     block grows a line, and without it the confirmation sat four
     pixels off the first section heading. */
  margin: 16px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
}

.hs-est-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

/* The card. Same vocabulary as the shelf's .lib-card — lift, hairline,
   4px corner, a 1px rise on hover — because a saved list and a venue
   are both objects you pick from a set, and inventing a second card
   style for the same gesture is how an interface starts to look
   assembled rather than designed. */
.hs-est {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 236px;
  padding: 13px 14px 11px;
  background: var(--lift);
  border: 1px solid var(--chrome-line-2);
  border-radius: var(--r);
  text-align: left;
  transition: border-color .16s, box-shadow .16s, transform .16s, background .16s;
}
.hs-est:not(.is-active):not(.is-naming):hover {
  border-color: var(--accent-line);
  box-shadow: 0 8px 26px -18px rgba(30, 24, 20, .5);
  transform: translateY(-1px);
}
/* The active rack is the one the harvest writes into, which is the
   whole reason a name is on screen at all. A spine down its edge
   rather than a filled panel: the card has to stay a calm surface for
   the three lines of type on it. */
.hs-est.is-active {
  border-color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent-ink);
}

/* The whole card switches, so the hit target fills it and the tools
   sit outside it as a sibling. `flex: 1` pushes those tools to the
   foot of the card so they line up across a row of unequal text. */
.hs-est-hit {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.hs-est-hit[aria-current="true"] { cursor: default; }
.hs-est-hit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r);
}

.hs-est-eyebrow {
  /* Empty on the inactive cards and still holding its line, so the
     names sit on one baseline across the row. */
  min-height: 12px;
  font-family: var(--font-ui-2);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--ink-faint);
}
.hs-est.is-active .hs-est-eyebrow { color: var(--accent-ink); }

.hs-est-name {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.18;
  color: var(--ink);
  /* A bar can be called anything, including one unbroken word longer
     than the card. */
  overflow-wrap: anywhere;
}
.hs-est-count {
  font-family: var(--font-ui-2);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
/* The warning under the count. Same type as the count so the card has
   one voice, and the accent so the eye finds it while scanning a row of
   places rather than reading one. */
.hs-est-low {
  margin-top: 2px;
  font-family: var(--font-ui-2);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.hs-est-note {
  margin-top: 3px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}

/* Rename and delete, against the establishment they act on. Held back
   until the card is under the cursor or the keyboard, because on a
   normal visit you are here to count bottles. The opacity keeps their
   space reserved, so no card changes height as the pointer crosses
   the row. */
.hs-est-tools {
  display: flex;
  gap: 13px;
  margin-top: 9px;
  opacity: 0;
  transition: opacity .14s ease;
}
.hs-est:hover .hs-est-tools,
.hs-est:focus-within .hs-est-tools,
.hs-est-tools.is-confirm { opacity: 1; }
.hs-est-tools.is-confirm {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
/* Left, not centred: a two-line question inside a 206px card would
   otherwise sit ragged on both sides. */
.hs-est-tools .hs-quiet { font-size: 10.5px; text-align: left; }

/* Adding one. A card among the cards, so a second venue reads as a
   peer of the first rather than as an export option. Dashed until it
   is hovered, which is the one place in this app where a dotted edge
   is honest: the card is not a thing yet. */
.hs-est-add {
  gap: 3px;
  background: none;
  border-style: dashed;
  cursor: pointer;
  font: inherit;
  color: inherit;
  align-items: flex-start;
}
.hs-est-add:hover {
  background: var(--lift);
  border-style: solid;
  border-color: var(--accent-line);
  transform: translateY(-1px);
}
.hs-est-add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.hs-est-add .hs-est-name { color: var(--ink-soft); }
.hs-est-plus {
  font-family: var(--font-ui-2);
  font-size: 16px;
  line-height: 1;
  color: var(--ink-faint);
  margin-bottom: 5px;
}

[data-theme="dark"] .hs-est-hit:focus-visible,
[data-theme="dark"] .hs-est-add:focus-visible,
[data-theme="dark"] .hs-est-go:focus-visible,
[data-theme="dark"] .hs-quiet:focus-visible { outline-color: var(--accent-ink); }

/* The CSV link, alone down here now. Text, underlined on hover — the
   weight of a footnote, because it is one. */
.hs-house-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.hs-quiet {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-family: var(--font-ui-2);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .14s ease;
}
.hs-quiet:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hs-quiet:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r);
}
/* Hover deepens. This used to reach for --accent-mark; that token is
   gone, and --accent is the deeper red it was standing in for. */
.hs-quiet.is-danger { color: var(--accent-ink); }
.hs-quiet.is-danger:hover { color: var(--accent); }

/* Naming one. The form replaces the card rather than opening beneath
   the row, so the establishment being named stays where it was on
   screen and the row does not reflow under the cursor. */
.hs-est.is-naming {
  gap: 7px;
  border-color: var(--accent-line, var(--accent-ink));
  border-style: solid;
}
.hs-est input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--chrome-line);
  border-radius: 3px;
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14.5px;
}
.hs-est input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.hs-est input::placeholder { color: var(--ink-faint); }
.hs-est-formacts {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: auto;
}
.hs-est-go {
  padding: 5px 12px;
  border: 1px solid var(--accent-ink);
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13.5px;
  cursor: pointer;
}
.hs-est-go:hover { background: var(--accent-ink); color: var(--on-accent); }
.hs-est-go:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  /* One card to a row, and the tools always showing: a phone has no
     hover, so held-back controls are simply missing controls. */
  .hs-est { width: 100%; max-width: 340px; }
  .hs-est-tools { opacity: 1; }
  /* Stacked, nothing needs to line up with anything, so the empty
     eyebrow above an inactive name is just a gap. */
  .hs-est-eyebrow:empty { display: none; }
}

/* ═══════════ AN ESTABLISHMENT IS A PAGE ═══════════
   A phone cannot show a switcher and the thing it switches at once. At
   390px the heading, the status line and two cards consumed 400px
   before the first wine, so the phone got two pages: the
   establishments, and one establishment as the whole page.

   Two classes on #house carry it. `.is-list` is the list of places;
   `.is-inside` is one of them, opened. Both existed only below 760px
   until v0.30.0, on the reasoning that a wide screen can hold the
   cards and the rack at once. It can. What that cost was the
   establishment itself: it was a thing you lit rather than somewhere
   you went, and its inventory read as an accessory of the switcher
   sitting above it. Both levels are global now, and the phone query
   below keeps only what is genuinely about 390 pixels. */

/* THE ESTABLISHMENT PAGE.
   The screen's own h2 steps aside and the establishment's name takes
   its place, drawn into the block below it and lifted above the status
   line by order. The h2 is hidden rather than rewritten, so the screen
   keeps its name in the markup and in Spanish without the painter
   having to know about either. */
#house.is-inside .lib-head {
  display: flex;
  flex-direction: column;
  text-align: left;
  /* 2px was right when the name was the last thing in the band. With
     the masthead under it the figures were touching the add form's
     border, which made the line read as the form's label. */
  padding-bottom: 14px;
}
#house.is-inside .lib-head h2 { display: none; }
#house.is-inside .hs-houses { order: 1; margin: 0 auto; align-items: stretch; }
#house.is-inside .lib-status { order: 2; margin: 3px auto 0; }

.hs-estpage-head { display: flex; flex-direction: column; gap: 2px; }

/* The way back, above the name and quieter than it: a route, not a
   title. Padded on the left by the arrow's own width so the name and
   the word line up on the same edge. */
.hs-back {
  appearance: none; -webkit-appearance: none;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 0 0 -2px; padding: 3px 2px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-ui-2);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.hs-back:hover { color: var(--accent-ink); }
.hs-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.hs-back-arrow { font-size: 15px; line-height: 1; letter-spacing: 0; }

/* The name takes the h2's own size on a wide screen, because it is
   standing in the h2's place and a document's title is not a caption.
   The phone query takes it back down to 25px. */
.hs-estpage-name {
  margin: 0;
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12; letter-spacing: -.012em;
  color: var(--ink);
}
.hs-estpage-name:focus, .hs-estpage-name:focus-visible { outline: none; }

/* THE MASTHEAD LINE.
   Two spans, not one sentence: the figures are the fact and the count
   date is a footnote about them, so the date is set smaller and a
   shade back rather than joined on with another middle dot. On a
   narrow screen they stack, which is why the gap is a flex gap and not
   a margin on the second. */
.hs-mast {
  margin: 5px 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px 10px;
  font-family: var(--font-ui);
  font-size: 14px; color: var(--ink-soft);
  letter-spacing: .012em;
}
.hs-mast-when { font-size: 12.5px; color: var(--ink-faint); }

/* Nothing to say about a rack nobody has counted, and an empty line
   should not reserve its leading. */
#house .lib-status:empty { display: none; }

/* THE LIST OF PLACES.
   In the scroller, not the fixed header: five establishments have to
   scroll, and a header cannot. */
#house.is-list .lib-head { text-align: left; }
#house.is-list .hs-houses { display: none; }
/* Left, not centred. The row centres its cards on the laptop's
   one-level layout, where the cards were a switcher over a rack and
   centring read as a toolbar. As the whole page they are a list, and a
   list starts where its heading starts. */
.hs-estpage {
  padding-top: 16px;
  /* The shelf's own column, so the first card's left edge is the
     heading's left edge. Without it the row sat on the scroller's 28px
     gutter and started 142px inside the name above it. */
  max-width: var(--hs-col);
  margin: 0 auto;
}
.hs-estpage .hs-est-row { justify-content: flex-start; }

/* A card on this page is a door. The chevron is the only thing that
   says so, and it is drawn at every width now that the card opens a
   page at every width — it used to be phone-only because on a laptop
   the same card was a switch that changed the rack beside it. */
.hs-estpage .hs-est-hit { position: relative; padding-right: 22px; }
.hs-estpage .hs-est-hit::after {
  content: '\203A';
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-ui);
  font-size: 21px; line-height: 1;
  color: var(--ink-faint);
}
.hs-estpage .hs-est-hit:hover::after { color: var(--accent-ink); }

/* THE ADD FIELD, AT THE TOP.
   Which is what makes the master library's offers visible at all:
   anchored to a form at the foot of the rack they opened 128px below
   the field, under the keyboard, every time. It is at the top on the
   laptop too now, so the page has one shape on both screens.

   Narrowed from 1120 to the shelf's 940 and centred with it. At the
   foot of Current Wines it could be the width of the rack container
   and nobody noticed; directly under the masthead, at 1120 against
   940, it was a third left edge on a page that should have one. */
.hs-addwrap.is-top { max-width: var(--hs-col); margin: 0 auto 26px; }

/* And the header band above, aligned to the same 940 column so the
   establishment's name starts where its first wine's name does. Done
   by centring each child of the band rather than by padding the band:
   a percentage in `padding` resolves against the containing block, not
   against the padded element, so the arithmetic silently used the
   screen's width instead of the band's and landed 80px out. */
#house .lib-head > * {
  width: 100%;
  max-width: var(--hs-col);
  margin-left: auto;
  margin-right: auto;
}

/* FINDING ONE WINE.
   The cellar was read the way a rack of bin cards is read, by looking
   down it, which works to about forty wines. The field is the width of
   a shelf heading rather than the width of the page: it is a filter on
   a list, not the page's subject, and a full-bleed search bar would
   announce itself as the latter. */
.hs-find {
  position: relative;
  max-width: var(--hs-col);
  margin: 0 auto 26px;
}
.hs-find input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 34px 9px 12px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
  background: var(--lift);
  border: 1px solid var(--chrome-line);
  border-radius: var(--r);
}
.hs-find input::placeholder { color: var(--ink-faint); }
.hs-find input:focus-visible {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.hs-find-x {
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  font-size: 13px; line-height: 1;
  color: var(--ink-faint);
  border-radius: 3px;
}
.hs-find-x:hover { color: var(--accent-ink); }
.hs-find-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A search answers with one list, so it borrows the shelf's own width
   and needs none of the shelf's heading furniture. */
.hs-found { max-width: var(--hs-col); margin: 0 auto 34px; }
.hs-nohits { max-width: var(--hs-col); margin: 0 auto; }
@media (max-width: 760px) {

  /* Phone-only deltas. Everything structural about the two levels is
     global now; what is left here is size and stacking. */
  .hs-estpage-name { font-size: 25px; }
  .hs-estpage .hs-est-row { flex-direction: column; align-items: stretch; }
  .hs-estpage .hs-est { max-width: none; }
  .hs-addwrap.is-top { margin: 0 auto 22px; }
  .hs-empty.is-terse { margin-top: 10px; }
  .hs-mast { font-size: 13px; }
  .hs-find { margin-bottom: 20px; }

  /* The shelf's one-line gloss goes. Set beside the heading in a 360px
     column it took the heading's width away and both wrapped: “Down to
     the last bottle” over two lines against “One left. Decide before
     service.” over two more, for four lines of furniture above two
     wines. The heading is the sentence on a phone. */
  .hs-sec-sub { display: none; }

  /* The door to the shelf this field is searching. Quiet, because it is
     the second way to do the thing the field above already does — and
     set in Garamond at sentence length, not in the uppercase Jost the
     other .hs-quiet controls use. Those are labels on a tool; this is
     a sentence offering somewhere to go, and eighteen shouted
     characters under a form is not calm. */
  .hs-tomaster {
    display: inline-block;
    margin: 10px 0 0;
    padding: 3px 0;
    font-family: var(--font-ui);
    font-size: 13.5px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--chrome-line);
  }
  .hs-tomaster:hover { color: var(--accent-ink); border-bottom-color: var(--accent-line); }
}

/* The offers, anchored to the field rather than to the form.
   The form folds to three rows at this width, so `top: 100%` put the
   list below the vintage, the bottles and the Add button — which on a
   phone is behind the keyboard. 44px is the form's padding plus the
   field's height, so the panel opens where the eye already is. It will
   cover the Add button while open; tapping outside closes it, and the
   keyboard's own return key adds what you typed without the button. */
@media (max-width: 860px) {
  .hs-pick {
    top: 44px;
    max-height: min(304px, 44vh);
  }
}

/* "On the list" — v0.55.0. A fact about the open list, set in the
   8.5px Jost the column labels use so it reads as a label rather than
   part of the wine's name, and in the accent ink so it can be found
   down a long rack without being a badge. */
.hs-onlist {
  align-self: flex-start;
  margin-top: 1px;
  font-family: var(--font-ui-2);
  font-size: 9px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink);
  white-space: nowrap;
}

/* The last paste — v0.56.0. One line under the Add field, in the
   status register, with its Undo; gone when you leave the room. */
.hs-pasted {
  margin: 8px 2px 0;
  font-family: var(--font-ui); font-size: 13px;
  color: var(--ink-soft);
}
.hs-pasted-undo {
  appearance: none; background: none; border: 0; padding: 0 0 0 6px;
  font: inherit; color: var(--accent-ink); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ---------------- the list, marked in the rack — v0.59 ----------------
   "On the sheet" is a small square tag on paper white with the list's
   glyph; the row gets a 3px rounded bar down its left edge, so the
   list's wines can be found in the rack at a glance. */
.hs-onlist {
  display: inline-flex !important; align-items: center; gap: 5px;
  width: fit-content;
  padding: 3px 8px 3px 6px; margin: 3px 0 2px;
  border-radius: 3px;
  background: var(--lift); color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--bridge-ring);
}
.hs-onlist .pg-glyph { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.hs-row.is-onsheet { position: relative; }
.hs-row.is-onsheet::before {
  content: ''; position: absolute; left: -12px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px; background: var(--accent-ink);
}
/* Landed on from the sheet's door or the Wine details band. */
.hs-row.is-landed { animation: hs-landed 1.8s ease-out; border-radius: 10px; }
@keyframes hs-landed {
  0%, 35% { box-shadow: 0 0 0 2px var(--bridge-ring), 0 8px 24px -14px rgba(60, 40, 20, .35); background: var(--lift); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .hs-row.is-landed { animation: none; box-shadow: 0 0 0 2px var(--bridge-ring); } }

/* ---------------- the name as a field — v0.60 ----------------
   Same face, size and line as the heading it replaces, so turning the
   name into a field moves nothing. One hairline underneath says it is
   writable; the accent replaces it while typing. */
.hs-estpage-name[title] { cursor: text; }
.hs-estpage-name.is-field { display: block; position: relative; max-width: 18em; }
.hs-title-field {
  display: block; width: 100%; box-sizing: border-box;
  margin: 0; padding: 0 0 3px;
  font: inherit; letter-spacing: inherit; color: inherit;
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--chrome-line);
  outline: none;
}
.hs-title-field::placeholder { color: var(--ink-faint); opacity: 1; }
.hs-title-field::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; }
.hs-title-field:focus { border-bottom-color: var(--accent-ink); }
/* The hint sits on the field's own line, at its right end, so showing
   it moves nothing below. */
.hs-title-hint {
  position: absolute; right: 0; bottom: 9px;
  font-family: var(--font-ui-2); font-size: 9.5px; letter-spacing: .13em; font-weight: 400;
  text-transform: uppercase; color: var(--ink-faint);
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.hs-estpage-name.is-field:focus-within .hs-title-hint { opacity: 1; }
body.mobile .hs-title-hint { display: none; }

/* ---------------- arranging (v0.65) ----------------
   DESIGN-cellar-arrange.md. One row of words under the find field: a
   bridge piece, so square-edged 3px buttons and bold Jost labels, the
   same as the other bridges. The headings below reuse the shelf's own
   head, with a fold chevron in front. */
.hs-arr {
  max-width: var(--hs-col);
  margin: -12px auto 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
}
.hs-arr-label {
  font-family: var(--font-ui-2); font-weight: 600; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.hs-arr-seg {
  display: inline-flex;
  border: 1px solid var(--chrome-line);
  border-radius: 3px;
  overflow: hidden;
}
.hs-arr-b {
  appearance: none; -webkit-appearance: none;
  border: 0; border-right: 1px solid var(--chrome-line);
  background: none; cursor: pointer;
  padding: 6px 11px;
  font-family: var(--font-ui-2); font-weight: 600; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.hs-arr-b:last-child { border-right: 0; }
.hs-arr-b:hover { color: var(--accent-ink); background: var(--accent-soft); }
.hs-arr-b.on { color: var(--paper, #fff); background: var(--accent); }
.hs-arr-b:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hs-arr-seg.is-depth .hs-arr-b { font-size: 9.5px; padding: 5px 9px; }
.hs-arr-seg.is-depth .hs-arr-b.on { color: var(--accent-ink); background: var(--accent-soft); }
.hs-arr-fold { font-size: 11px; }

/* The country: a label over its regions, not a third heading. */
.hs-country {
  max-width: var(--hs-col);
  margin: 8px auto 14px;
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-ui-2); font-weight: 600; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-ink);
}
.hs-country::after { content: ''; flex: 1; border-bottom: 1px solid var(--accent-line); transform: translateY(-3px); order: 1; }
.hs-country-n { order: 2; font-weight: 400; letter-spacing: .09em; text-transform: none; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.hs-grp .hs-sec-head { align-items: center; }
.hs-fold {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin-left: -4px;
  display: grid; place-items: center; flex: none;
  border: 0; border-radius: 3px; background: none; cursor: pointer;
  color: var(--ink-faint);
}
.hs-fold svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.hs-fold:hover { color: var(--accent-ink); background: var(--accent-soft); }
.hs-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.is-folded > .hs-sec-head > .hs-fold svg,
.is-folded > .hs-sub-head > .hs-fold svg { transform: rotate(-90deg); }
.hs-grp.is-folded > .hs-grp-body { display: none; }
.hs-grp.is-folded .hs-sec-head { margin-bottom: 0; }
.hs-grp.is-folded { margin-bottom: 18px; }

/* The appellation: one step down, with its subregion as a quiet
   prefix, so "Côte de Nuits" is read once per heading, not as a level. */
.hs-subgrp { margin: 14px 0 4px; }
.hs-sub-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 2px 5px 0;
  border-bottom: 1px dotted var(--chrome-line);
  margin-bottom: 2px;
}
.hs-sub-head h4 {
  margin: 0; font-family: var(--font-ui); font-weight: 600; font-size: 15px;
  color: var(--ink);
}
.hs-sub-pre {
  font-family: var(--font-ui-2); font-weight: 600; font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint);
  margin-right: 8px;
}
.hs-subgrp.is-folded > .hs-rows { display: none; }

.hs-grp.is-unplaced .hs-sec-head h3 { color: var(--ink-soft); }

@media (max-width: 760px) {
  .hs-arr { margin: -8px auto 20px; gap: 8px; }
  .hs-arr-label { width: 100%; }
  .hs-arr-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .hs-arr-seg::-webkit-scrollbar { display: none; }
  .hs-arr-b { padding: 8px 10px; }
  .hs-arr .hs-spring { display: none; }
  .hs-arr-fold { width: 100%; text-align: left; }
  .hs-sub-pre { display: block; margin: 0 0 1px; }
  .hs-country { margin-top: 4px; }
}

/* ═══════════ THE THREE PLACES AS BUTTONS (v0.67) ═══════════
   My Lists, The Cellar and Wine Library read as three words on the
   phone, with a rule under the current one, and nothing about them
   said "press". They are buttons now, on every device: a bordered 3px
   button each, the same family as the two action buttons (v0.66).
   The current place is the soft accent ground with accent ink and
   bold type; red fill stays reserved for the one primary action in the bar
   (New list), so the two never compete. */
.lib-nav { gap: 6px; }
.lib-bar .lib-nav button {
  border: 1px solid var(--chrome-line-2);
  background: var(--lift);
  color: var(--ink-soft);
  border-radius: 3px;
}
.lib-bar .lib-nav button:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}
.lib-bar .lib-nav button[aria-current="page"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-ink);
  /* v0.128: heavier by a hairline stroke, not by the 700 face, so the
     tab you are on is the same width as when you are not, and the
     three tabs stop shifting as you move between rooms. */
  box-shadow: none; font-weight: 400; -webkit-text-stroke: .45px currentColor;
}
[data-theme="dark"] .lib-bar .lib-nav button { background: transparent; }
[data-theme="dark"] .lib-bar .lib-nav button[aria-current="page"] { background: var(--accent-soft); }

@media (max-width: 620px) {
  .lib-nav {
    gap: 6px;
    margin: 0;
    padding: 8px 0 10px;
    border-top: 0;
  }
  .lib-bar .lib-nav button {
    border: 1px solid var(--chrome-line-2);
    border-radius: 3px;
    background: var(--lift);
    min-height: 40px;
    padding: 6px 4px;
  }
  .lib-bar .lib-nav button[aria-current="page"] {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent-ink);
    box-shadow: none; font-weight: 700; -webkit-text-stroke: 0;
  }
  [data-theme="dark"] .lib-bar .lib-nav button { background: transparent; }
  [data-theme="dark"] .lib-bar .lib-nav button[aria-current="page"] { background: var(--accent-soft); }
}

/* ═══════════ INVENTORY, SAID BY THE LAYOUT (v0.68) ═══════════ */
.hs-eyebrow { display: flex; align-items: center; gap: 10px; }
.hs-mode {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px 2px 6px;
  border: 1px solid var(--chrome-line-2);
  border-radius: 3px;
  background: var(--cellar-ground);
  font-family: var(--font-ui-2); font-weight: 600;
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hs-mode .sh-glyph { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; }

.hs-zones {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin-top: 14px;
}
.hs-zone {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 12px 13px;
  border: 1px solid var(--chrome-line);
  border-radius: var(--r);
  background: var(--lift);
}
.hs-zone-ic {
  flex: none; width: 30px; height: 30px; border-radius: 3px;
  display: grid; place-items: center;
  background: var(--cellar-ground); border: 1px solid var(--chrome-line);
  color: var(--accent-ink);
}
.hs-zone-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.hs-zone-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.hs-zone-t b {
  font-family: var(--font-ui-2); font-weight: 600; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.hs-zone-go {
  appearance: none; -webkit-appearance: none; align-self: flex-start;
  margin-top: 6px; padding: 5px 9px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  background: var(--paper, #fff); cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; color: var(--accent-ink);
}
.hs-zone-go:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.hs-zone-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[data-theme="dark"] .hs-zone-go { background: var(--lift); }
.hs-empty-note {
  margin-top: 12px !important;
  padding: 9px 12px;
  border-left: 2px solid var(--accent-line);
  font-size: 13px !important; color: var(--ink-faint) !important;
}
@media (max-width: 760px) {
  .hs-zones { grid-template-columns: 1fr; gap: 8px; }
  .hs-zone { padding: 10px 11px; }
}

/* ═══════════ ONE KIND OF BUTTON FOR THE ROOM (v0.69) ═══════════
   Glyph first, then the word, in a bordered 3px button. The same
   family as Add to the list and Put in the Cellar. */
.hs-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.hs-tool {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px 11px 4px 8px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  background: var(--lift); color: var(--ink-soft);
  font-family: var(--font-ui); font-size: 14px; line-height: 1.1;
  cursor: pointer; white-space: nowrap;
  transition: border-color .12s, background-color .12s, color .12s;
}
.hs-tool:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.hs-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hs-tool-ic { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--accent-ink); }
.hs-tool-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
/* The first count: the one thing the room can do for you that day. */
.hs-tool.is-first { background: var(--accent); border-color: var(--accent); color: #fff; }
.hs-tool.is-first .hs-tool-ic { color: #fff; }
.hs-tool.is-first:hover { background: var(--accent); filter: brightness(1.1); color: #fff; }
.hs-tool.is-mini { min-height: 26px; padding: 2px 8px 2px 6px; font-size: 12.5px; gap: 4px; }
.hs-tool.is-mini .hs-tool-ic, .hs-tool.is-mini .hs-tool-ic svg { width: 13px; height: 13px; }
.hs-tool.is-danger:hover { color: var(--accent-ink); }
[data-theme="dark"] .hs-tool { background: transparent; }
[data-theme="dark"] .hs-tool.is-first { background: var(--accent); }
@media (max-width: 620px) {
  .hs-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hs-tool { min-height: 40px; justify-content: center; }
}

/* The establishment cards: the shelf glyph in a small tile at the
   top, the Active label beside it, and tools always in view. */
.hs-est-top { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.hs-est-ic {
  flex: none; width: 26px; height: 26px; border-radius: 3px;
  display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent-ink);
}
.hs-est-ic .sh-glyph { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.hs-est-top .hs-est-eyebrow { margin: 0; }
.hs-est-tools { opacity: 1 !important; gap: 6px; }

/* The prices on a Cellar row: a small tag button. */
.hs-price {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px; padding: 1px 7px 1px 5px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  background: var(--lift);
}
.hs-price:hover { text-decoration: none; border-color: var(--accent-line); color: var(--accent-ink); }
.hs-price.is-empty {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0; text-transform: none;
  color: var(--ink-soft);
}
.hs-price-ic { display: inline-grid; place-items: center; width: 12px; height: 12px; color: var(--accent-ink); }
.hs-price-ic svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; }
[data-theme="dark"] .hs-price { background: transparent; }

/* The front page: the tag and one line where the paragraph was. */
.hs-role { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lib-inv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (hover: none) { .hs-price.is-empty { opacity: 1; } }
.hs-est-add .hs-est-plus {
  display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 6px;
  border: 1px dashed var(--accent-line); border-radius: 3px;
  color: var(--accent-ink); font-size: 17px;
}

/* The row's Put away, beside Prices: pointer only, on hover or focus. */
.hs-qa {
  display: none; align-items: center; gap: 4px;
  margin: 3px 0 0 6px; padding: 1px 7px 1px 5px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  background: var(--lift); color: var(--ink-soft); cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; line-height: 1.3;
}
.hs-qa:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.hs-qa:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[data-theme="dark"] .hs-qa { background: transparent; }
@media (hover: hover) and (min-width: 621px) {
  .hs-qa { display: inline-flex; opacity: 0; transition: opacity 90ms linear; }
  .hs-row:hover .hs-qa, .hs-row:focus-within .hs-qa { opacity: 1; }
}
.hs-qrow { display: flex; align-items: center; min-width: 0; }
.hs-qrow .hs-qa { margin-left: 6px; }

/* ═══════════ SHOWN, NOT SAID (v0.72) ═══════════ */
.hs-row.is-justset { animation: hs-justset 1.7s ease-out; }
@keyframes hs-justset {
  0%   { background-color: color-mix(in srgb, var(--accent) 14%, transparent); }
  100% { background-color: transparent; }
}
.hs-tool.is-done { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.hs-est.is-fresh { box-shadow: 0 0 0 2px var(--accent-line); transition: box-shadow .3s; }
.hs-arr-b { display: inline-flex; align-items: center; gap: 5px; }
.hs-arr-ic { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.hs-arr-fold { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .hs-row.is-justset { animation: none; } }
#hsAddGo.is-done { background: var(--accent-ink); }

/* ═══════════ THE CELLAR IS THE INVENTORY (v0.74) ═══════════ */
/* The word rides on the door itself, on every screen. */
.lib-nav button { display: inline-flex; align-items: center; gap: 6px; }
.lib-nav .nav-ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .85; }
.lib-nav button[aria-current="page"] .nav-ic { opacity: 1; }
.nav-inv {
  font-family: var(--font-ui-2); font-weight: 600; font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 5px 1px; border-radius: 3px;
  background: var(--cellar-ground); color: var(--accent-ink);
  border: 1px solid var(--accent-line);
}
.lib-nav button[aria-current="page"] .nav-inv { background: var(--accent-ink); color: var(--on-accent, #fff); border-color: var(--accent-ink); }

/* Above the room's name, the room's job, in the voice of the bridge. */
.inv-kicker {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 6px;
  font-family: var(--font-ui-2); font-weight: 700; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink);
}
.inv-kicker .sh-glyph { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; }
#house.is-inside .inv-kicker { display: none; }

/* The establishment's tag is the same accent family, louder than a caption. */
.hs-mode { border-color: var(--accent-line); color: var(--accent-ink); font-weight: 700; }

/* Clean-up: the tagline repeated in every bar, beside the mark that
   already names the product; the bar needs the room for its doors. */
.lib-brand > span { display: none; }

@media (max-width: 620px) {
  .lib-bar .lib-nav button { flex-direction: column; gap: 2px; padding: 5px 4px; height: auto; }
  .lib-nav .nav-ic { width: 15px; height: 15px; }
  .nav-inv { font-size: 7.5px; padding: 1px 4px 0; letter-spacing: .12em; }
  .nav-cellar .lib-nav-n { position: absolute; top: 4px; right: 6px; }
  .lib-bar .lib-nav button.nav-cellar { position: relative; }
}
.hs-find-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; fill: none; stroke: var(--accent-ink); stroke-width: 1.5; pointer-events: none; }
.hs-find input { padding-left: 34px; }
#hsAddGo.has-ic { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#hsAddGo.has-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.hs-when.is-today { display: inline-grid; place-items: center; color: var(--accent-ink); }
.hs-when.is-today svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lib-group-head .inv-kicker, .lib-group-head p.inv-kicker { color: var(--accent-ink); }
/* v0.75 — at an establishment, Esc is the ‹ The Cellar button, not the door to the list. */
.hs-back .kbd-esc { margin-left: 8px; letter-spacing: .04em; text-transform: none; }
/* v0.139: since v0.92 Escape leaves Inventory from inside an
   establishment too, so the door shows the key there as well. */

/* ═══════════ INVENTORY, SIMPLIFIED (v0.86) ═══════════
   A row is the wine and its count. The head is Count and More. The
   add field is one field and one button. Arrange is one button at the
   end of the find field. */
#house .hs-row.is-simple {
  grid-template-columns: minmax(0, 1fr) auto auto 30px;
  grid-template-areas: none;
  gap: 12px;
  padding: 12px 2px;
}
#house .hs-row.is-simple .hs-name { grid-area: auto; min-width: 0; }
#house .hs-row.is-simple .hs-name b { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#house .hs-row.is-simple .hs-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#house .hs-row.is-simple .hs-count {
  grid-area: auto;
  display: grid; grid-template-columns: 30px 48px 30px; grid-template-areas: none;
  gap: 4px; align-items: center;
}
#house .hs-row.is-simple .hs-count button,
#house .hs-row.is-simple .hs-count input { grid-area: auto; height: 30px; }
#house .hs-row.is-simple .hs-count input { text-align: center; }
#house .hs-row.is-simple .hs-ins { grid-area: auto; justify-self: end; }
#house .hs-row.is-simple .hs-ins-gap { display: block; width: 0; }
#house .hs-row.is-simple .hs-more { grid-area: auto; justify-self: end; }
.hs-star { flex: none; width: 13px; height: 13px; fill: var(--accent-ink); stroke: none; }
#house .hs-row.is-simple .hs-pricebox { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* The shelves: a title and its number. */
#house .hs-sec-head { gap: 10px; }
#house .hs-sec-head .hs-sec-n { margin-left: auto; }

/* The add field: one field, one button. */
#house .hs-add {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: none;
  padding: 0; background: none; border: 0;
}
#house .hs-add #hsAddName { grid-area: auto; height: 36px; font-size: 15px; padding: 0 12px; background: var(--lift); border-color: var(--chrome-line); }
#house .hs-add #hsAddGo { grid-area: auto; height: 36px; padding: 0 16px; }

/* The empty room: one line. */
.hs-empty.is-simple { padding: 26px 2px; }
.hs-empty.is-simple p { margin: 0; font-family: var(--font-ui); font-size: 15px; color: var(--ink-soft); }

/* More, and Arrange: a button with its menu under it. */
.hs-popwrap { position: relative; display: inline-flex; }
.hs-pop {
  position: absolute; z-index: 30; top: calc(100% + 5px); left: 0;
  min-width: 220px; padding: 4px;
  display: flex; flex-direction: column;
  background: var(--chrome); border: 1px solid var(--chrome-line);
  border-radius: var(--r); box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}
.hs-pop[hidden] { display: none; }
.hs-pop.is-right { left: auto; right: 0; }
.hs-pop-i {
  appearance: none; background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 3px;
  font-family: var(--font-ui); font-size: 14.5px; color: var(--ink); white-space: nowrap;
}
.hs-pop-i:hover { background: var(--lift); }
.hs-pop-i:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -1px; }
.hs-pop-i.on { color: var(--accent-ink); background: var(--accent-soft); }
.hs-pop-rule { height: 1px; margin: 4px 6px; background: var(--chrome-line-2); }
.hs-tool[aria-expanded="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }

/* Arrange sits at the end of the find field. */
#house .hs-find { display: flex; gap: 8px; align-items: center; }
#house .hs-find > svg.hs-find-ic { position: absolute; }
#house .hs-find input { flex: 1 1 auto; min-width: 0; }
#house .hs-find .hs-find-x { right: auto; position: relative; transform: none; top: auto; margin-left: -38px; }
#house .hs-find .hs-arr { flex: none; margin: 0; padding: 0; border: 0; background: none; display: inline-flex; }
#house .hs-find .hs-arr .hs-tool { min-height: 38px; }

@media (max-width: 860px) {
  #house .hs-row.is-simple {
    grid-template-columns: minmax(0, 1fr) auto 26px;
    grid-template-areas: "name cnt more" "ins ins ins";
    gap: 10px 8px;
  }
  #house .hs-row.is-simple .hs-name b { white-space: normal; }
  #house .hs-row.is-simple .hs-ins-gap { display: none; }
  #house .hs-row.is-simple .hs-ins { justify-self: start; }
  #house .hs-row.is-simple .hs-name { grid-area: name; }
  #house .hs-row.is-simple .hs-more { grid-area: more; }
  #house .hs-row.is-simple .hs-count { grid-area: cnt; grid-template-columns: 34px 44px 34px; }
  #house .hs-row.is-simple .hs-count button,
  #house .hs-row.is-simple .hs-count input { height: 34px; }
  #house .hs-row.is-simple .hs-ins, #house .hs-row.is-simple .hs-ins-gap { grid-area: ins; }
}
@media (max-width: 620px) {
  #house .hs-tools .hs-popwrap { flex: 1 1 0; }
  #house .hs-tools .hs-popwrap > .hs-tool { flex: 1 1 auto; justify-content: center; }
  #house .hs-tools > .hs-tool { flex: 1 1 0; }
}

/* ═══════════ ONE PAGE THAT SCROLLS (v0.88) ═══════════
   Inventory and the Wine Library used to hold the head still and scroll
   only the rack under it. With the room's picture in the head, that
   left a phone a thin strip to scroll through. Now the whole room
   scrolls as My Lists does: the picture and the title go up and away,
   the navigation bar stays pinned at the top. */
#house, #master { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#house > *, #master > * { flex-shrink: 0; }
#house > .hs-stack, #master > .ml-stack { flex: 1 0 auto; overflow: visible; }
#house > .lib-bar, #master > .lib-bar { position: sticky; top: 0; z-index: 5; }
#house > .app-credit, #master > .app-credit { position: sticky; bottom: 0; z-index: 4; background: var(--cellar-ground); }

/* v0.92: the Establishments menu in the eyebrow. */
.hs-switch .hs-back { gap: 5px; }
.hs-switch-caret { font-size: 10px; line-height: 1; letter-spacing: 0; }
.hs-switch .hs-pop { min-width: 240px; }
#house .hs-switch .hs-pop-i { font-size: 15px; }

/* ═══════════ AN EIGHTH POLISH PASS (v0.95) ═══════════ */
/* The establishment's name is this room's title, so it is set like the
   titles of the other two rooms: same size, same red. */
.hs-estpage-name { color: var(--accent-ink); }
@media (max-width: 760px) { .hs-estpage-name { font-size: clamp(30px, 4.4vw, 44px); } }
.hs-title-field::placeholder { color: var(--ink-faint); }
/* The arrange button says what it does: Sort, then the current order. */
.hs-arr-k {
  font-family: var(--font-ui-2); font-weight: 600; font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint);
  margin-right: 1px;
}

/* On the phone More is the right half of the row, so its menu opens
   from the right edge of the button and stays on the screen. */
@media (max-width: 760px) {
  .hs-morewrap .hs-pop { left: auto; right: 0; max-width: calc(100vw - 32px); }
}

/* The session note: the same amber the shelf uses for the same fact. */
.hs-mast-when.is-session { color: #8a5a10; }
[data-theme="dark"] .hs-mast-when.is-session { color: #d8a650; }

/* ═══════════ A NINTH POLISH PASS (v0.100) ═══════════ */
/* The empty rack, drawn: the same picture the establishments page
   carries, smaller, centred over one line and one button. */
.hs-empty.is-drawn { text-align: center; padding: 30px 2px 10px; }
.hs-empty-art { display: flex; justify-content: center; margin: 0 0 18px; pointer-events: none; }
.hs-empty-art svg { width: 240px; height: auto; opacity: .9; }
.hs-empty.is-drawn p { max-width: 30em; margin: 0 auto; }
.hs-empty-go { margin-top: 16px; }
@media (max-width: 760px) {
  .hs-empty-art svg { width: 200px; }
  .hs-empty.is-drawn { padding-top: 22px; }
}

/* v0.105: Delete, confirmed on the establishment's own page. */
.hs-killrow { margin-top: 10px; }
.hs-killrow .hs-tool.is-danger { color: var(--accent-ink); border-color: var(--accent); }
.hs-pop-i.is-danger { color: var(--accent-ink); }

/* ═══════════ AN ESTABLISHMENT'S LISTS (v0.108) ═══════════ */
.hs-lists { margin: 14px 0 4px; }
.hs-lists-h {
  display: block; margin: 0 0 8px;
  font-family: var(--font-ui-2); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.hs-lists-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.hs-list {
  appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; gap: 10px; min-width: 0;
  min-height: 52px; padding: 8px 12px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  background: var(--lift); color: var(--ink);
  font-family: var(--font-ui); text-align: left; cursor: pointer;
}
.hs-list:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.hs-list:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hs-list.is-open { border-color: var(--accent-line); }
.hs-list.is-new { border-style: dashed; background: transparent; color: var(--ink-soft); }
.hs-list .pg-glyph { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.hs-list-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hs-list-t b { font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-list-t small { font-size: 12.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-list-go { color: var(--ink-faint); font-size: 18px; }
@media (max-width: 620px) { .hs-lists-row { grid-template-columns: minmax(0, 1fr); } }

/* ═══════════ TWO AREAS, ONE HEADING STYLE (v0.109) ═══════════
   Lists and Wines open the same way: a hairline, a small-caps word
   with its count, and the area's own buttons at the right. */
#house .hs-area { margin: 18px 0 0; padding: 12px 0 0; border-top: 1px solid var(--chrome-line-2); }
#house .hs-area-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 32px; margin: 0 0 10px;
}
#house .hs-area-t {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--font-ui-2); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
#house .hs-area-n { font-size: 11px; letter-spacing: .04em; color: var(--ink-faint); }
#house .hs-area-h .hs-tools { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; }
#house .hs-area-h .hs-tools[hidden] { display: none; }
#house .hs-area-h .hs-tools > .hs-tool,
#house .hs-area-h .hs-tools .hs-popwrap,
#house .hs-area-h .hs-tools .hs-popwrap > .hs-tool { flex: 0 0 auto; }
#house .hs-area-h .hs-tool { min-height: 30px; font-size: 13.5px; }
#house .hs-area.is-wines { margin-bottom: 0; }
#house .hs-area.is-wines .hs-area-h { margin-bottom: 0; }
#house .hs-lists .hs-area-h { margin-bottom: 8px; }
#house .hs-area-none { margin: 0; font-size: 14px; color: var(--ink-faint); }
#house .hs-lists-row:has(> .hs-area-none) { display: block; }

/* ═══════════ THREE PARTS YOU CAN TELL APART (v0.112) ═══════════
   The hairline between areas was nearly the colour of the page. The
   establishment stays on the page as its masthead; Lists and Wines
   each open on a bar of their own, paper-white with a red edge, an
   icon and the word in ink, so the eye finds where each part starts. */
#house .hs-area { margin: 28px 0 0; padding: 0; border-top: 0; }
#house .hs-area-h {
  min-height: 46px; margin: 0 0 12px;
  padding: 6px 7px 6px 12px;
  background: var(--lift);
  border: 1px solid var(--chrome-line-2);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
}
#house .hs-area.is-wines .hs-area-h { margin-bottom: 0; }
#house .hs-area-t { align-items: center; gap: 8px; color: var(--ink); font-size: 12px; letter-spacing: .14em; font-weight: 600; }
#house .hs-area-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--accent-ink); }
#house .hs-area-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
#house .hs-area-n {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink);
  font-size: 11.5px; letter-spacing: 0; font-weight: 600;
}
#house .hs-area-h .hs-tool { min-height: 32px; }
#house .hs-lists .hs-area-none { padding: 0 2px 2px 15px; }
[data-theme="dark"] #house .hs-area-h { background: color-mix(in srgb, var(--ink) 5%, transparent); }

/* ═══════════ THE INVENTORY FIRST (v0.113) ═══════════
   Lists step aside to a toggle at the top right of the page; Group by
   sits under the Wines bar as four words, the chosen one lit. */
#house .hs-eyebrow { justify-content: space-between; }
#house .hs-lists-tog {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 4px 10px 4px 9px; margin-left: auto;
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  background: var(--lift); color: var(--ink);
  font-family: var(--font-ui-2); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
}
#house .hs-lists-tog:hover { border-color: var(--accent-line); background: var(--accent-soft); }
#house .hs-lists-tog.is-open { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
#house .hs-lists-tog .hs-area-ic { width: 16px; height: 16px; }
#house .hs-lists-tog .hs-area-ic svg { width: 15px; height: 15px; }
#house .hs-lists-car { width: 11px; height: 11px; fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s; }
#house .hs-lists-tog.is-open .hs-lists-car { transform: rotate(180deg); }
#house .hs-lists-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[data-theme="dark"] #house .hs-lists-tog { background: transparent; }
#house .hs-lists { margin-top: 18px; }

#house .hs-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 8px; }
#house .hs-group-k {
  font-family: var(--font-ui-2); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
#house .hs-seg {
  display: inline-flex; flex-wrap: nowrap;
  border: 1px solid var(--chrome-line-2); border-radius: 3px; background: var(--lift); overflow: hidden;
}
#house .hs-seg-b {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 12px; border: 0; border-left: 1px solid var(--chrome-line-2);
  background: transparent; color: var(--ink-soft);
  font-family: var(--font-ui); font-size: 15px; cursor: pointer; white-space: nowrap;
}
#house .hs-seg-b:first-child { border-left: 0; }
#house .hs-seg-b svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; flex: none; }
#house .hs-seg-b:hover { color: var(--accent-ink); background: var(--accent-soft); }
#house .hs-seg-b.is-on { background: var(--accent); color: #fff; }
#house .hs-seg-b:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#house .hs-seg.is-sub .hs-seg-b { min-height: 30px; font-size: 13.5px; padding: 3px 10px; }
#house .hs-seg.is-sub .hs-seg-b.is-on { background: var(--accent-soft); color: var(--accent-ink); }
#house .hs-group-fold {
  appearance: none; border: 0; background: none; padding: 4px 2px; margin-left: auto;
  font-family: var(--font-ui); font-size: 14px; color: var(--accent-ink); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px;
}
[data-theme="dark"] #house .hs-seg { background: transparent; }
[data-theme="dark"] #house .hs-seg-b.is-on { color: var(--paper, #fff); }
@media (max-width: 620px) {
  #house .hs-group-k { flex-basis: 100%; }
  #house .hs-seg { display: flex; width: 100%; }
  #house .hs-seg-b { flex: 1 1 0; justify-content: center; padding: 4px 4px; gap: 4px; font-size: 14px; }
  #house .hs-seg-b svg { display: none; }
  #house .hs-seg.is-sub { width: auto; }
  #house .hs-seg.is-sub .hs-seg-b { flex: 0 0 auto; padding: 3px 10px; }
  #house .hs-group-fold { margin-left: 0; }
}

/* ═══════════ PRODUCER AND REGION, CORRECTED (v0.114) ═══════════ */
#house .hs-fixbox {
  margin: 0 0 10px; padding: 14px;
  background: var(--lift); border: 1px solid var(--chrome-line-2); border-left: 3px solid var(--accent); border-radius: 3px;
}
#house .hs-fix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
#house .hs-fix-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#house .hs-fix-f > span { font-family: var(--font-ui-2); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
#house .hs-fix-f input {
  width: 100%; min-height: 38px; padding: 7px 10px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px; background: var(--paper, #fff); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px;
}
#house .hs-fix-f input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
#house .hs-fix-f input.is-bad { border-color: var(--accent); }
#house .hs-fix-where { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--accent-ink); }
#house .hs-fix-where.is-off { color: var(--ink-faint); }
#house .hs-fix-acts { display: flex; gap: 8px; margin-top: 12px; }
#house .hs-fix-acts .primary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--accent); border-radius: 3px; background: var(--accent); color: #fff;
  font-family: var(--font-ui); font-size: 15px; cursor: pointer;
}
#house .hs-fix-acts .primary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#house .hs-fix-acts .hs-tool { min-height: 36px; }
[data-theme="dark"] #house .hs-fixbox { background: color-mix(in srgb, var(--ink) 5%, transparent); }
[data-theme="dark"] #house .hs-fix-f input { background: transparent; }
#house .hs-row.is-fixed { animation: hsFixed 1.6s ease-out; }
@keyframes hsFixed { 0%, 30% { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } 100% { background: transparent; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { #house .hs-row.is-fixed { animation: none; } }
@media (max-width: 620px) { #house .hs-fix-grid { grid-template-columns: 1fr; } }

/* ═══════════ SUGGESTIONS YOU CAN BROWSE (v0.115) ═══════════ */
#house .hs-fix-f { position: relative; }
#house .hs-sug {
  margin-top: 4px; max-height: 288px; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--chrome-line-2); border-radius: 3px; background: var(--paper, #fff);
  box-shadow: 0 6px 18px rgba(40, 20, 10, .08);
}
#house .hs-sug[hidden] { display: none; }
#house .hs-sug-i {
  appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 48px; padding: 7px 12px; border: 0; border-top: 1px solid var(--chrome-line);
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  font-family: var(--font-ui); -webkit-tap-highlight-color: transparent;
}
#house .hs-sug-i:first-child { border-top: 0; }
#house .hs-sug-i:hover, #house .hs-sug-i.is-cur, #house .hs-sug-i:active { background: var(--accent-soft); }
#house .hs-sug-t { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
#house .hs-sug-t b { font-weight: 400; font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#house .hs-sug-t small { font-size: 13px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#house .hs-sug-n {
  flex: none; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: inline-grid; place-items: center; font-size: 12px; background: var(--chrome-2); color: var(--ink-soft);
}
#house .hs-sug-car { flex: none; font-size: 20px; line-height: 1; color: var(--ink-faint); }
#house .hs-sug-i.is-up { min-height: 42px; color: var(--ink-soft); background: var(--chrome-2); }
#house .hs-sug-i.is-up b { font-size: 14.5px; }
#house .hs-sug-car.is-up { font-size: 18px; }
#house .hs-sug-i.is-use b { color: var(--accent-ink); }
#house .hs-sug-i.is-use { box-shadow: inset 3px 0 0 var(--accent); }
[data-theme="dark"] #house .hs-sug { background: var(--chrome, #1f1b19); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
[data-theme="dark"] #house .hs-sug-i.is-up { background: color-mix(in srgb, var(--ink) 6%, transparent); }
@media (max-width: 620px) {
  #house .hs-sug { max-height: 46vh; }
  #house .hs-sug-i { min-height: 52px; }
}
#house .hs-fix-f input { scroll-margin-top: 150px; }

/* ================================================================
   v0.133 — the operator's desk: the before-service check, the wine
   panel, several wines at once, and the keyboard line.
   ================================================================ */

/* ---------- the before-service check ----------
   One line under the masthead, with only what needs a decision. Each
   figure is a button that opens its own short list; nothing is said
   when nothing is wrong except one quiet line that says so. */
.hs-check {
  margin: 12px 0 4px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  background: var(--lift);
  padding: 8px 10px;
}
.hs-check.is-clear { background: none; border-style: dashed; }
.hs-check-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.hs-check-t {
  font-family: var(--font-ui-2); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
  margin-right: 4px;
}
.hs-check-ok { font-size: 13.5px; color: var(--ink-soft); }
.hs-chk {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 3px 10px 3px 8px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  background: var(--field); color: var(--ink-soft);
  font-family: var(--font-ui); font-size: 13.5px; line-height: 1.1;
}
.hs-chk b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.hs-chk:hover, .hs-chk.is-open { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.hs-chk:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hs-chk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.hs-chk.is-out .hs-chk-dot { background: var(--accent); }
.hs-chk.is-low .hs-chk-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.hs-chk.is-none .hs-chk-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-faint); }
.hs-chk-car { color: var(--ink-faint); transition: transform .15s ease; }
.hs-chk.is-open .hs-chk-car { transform: rotate(90deg); color: var(--accent-ink); }
.hs-check-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--chrome-line); }
.hs-check-list li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--chrome-line);
}
.hs-check-list li:last-child { border-bottom: 0; padding-bottom: 2px; }
.hs-check-w {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
  text-align: left; flex: 1 1 220px; min-width: 0;
  display: flex; flex-direction: column; gap: 1px; color: var(--ink);
  font-family: var(--font-ui);
}
.hs-check-w b { font-weight: 400; font-size: 14.5px; }
.hs-check-w small { font-size: 12px; color: var(--ink-faint); }
.hs-check-w:hover b { color: var(--accent-ink); }
.hs-check-w:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hs-check-ls { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-check-none { font-size: 12.5px; color: var(--ink-faint); }

/* ---------- the rows, chosen and shown ---------- */
@media (min-width: 861px) {
  #house.is-inside .hs-row[data-id] { cursor: default; }
  #house.is-inside .hs-row[data-id] .hs-name { cursor: pointer; }
}
.hs-row.is-panel { background: var(--lift-2); }
.hs-row.is-panel .hs-name b { color: var(--accent-ink); }
.hs-row.is-chosen { background: var(--accent-soft); }
.hs-row.is-chosen:hover { background: var(--accent-soft); }

/* ---------- the wine panel ----------
   The editor's drawer, on the Inventory side: the same width, the same
   20px Garamond title in the red, the same small Jost captions. */
.hs-panel {
  position: fixed; right: 0; bottom: 0; top: 52px;
  width: 340px; z-index: 6;
  background: var(--chrome); border-left: 1px solid var(--chrome-line-2);
  box-shadow: -8px 0 24px rgba(0,0,0,.06);
  overflow-y: auto;
  padding: 12px 16px 24px;
}
.hs-panel[hidden] { display: none; }
@media (min-width: 1200px) {
  #house.has-panel .hs-stack,
  #house.has-panel .lib-head { padding-right: 368px; }
  /* The head is a centred 1120px box; with the panel open it spans
     the room like the rack below it, so the two keep one left edge. */
  #house.has-panel .lib-head { max-width: none; padding-left: 28px; }
}
.hs-panel-head { display: flex; align-items: flex-start; gap: 10px; }
.hs-panel-t {
  flex: 1; margin: 2px 0 0;
  font-family: var(--font-ui); font-size: 20px; font-weight: 400;
  line-height: 1.2; color: var(--accent-ink);
}
.hs-panel-x {
  appearance: none; cursor: pointer; flex: none;
  width: 28px; height: 28px; border-radius: 3px;
  border: 1px solid transparent; background: none; color: var(--ink-faint);
  font-size: 13px;
}
.hs-panel-x:hover { background: var(--lift); color: var(--ink); border-color: var(--chrome-line-2); }
.hs-panel-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hs-panel-meta { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
.hs-panel-sec { margin-top: 20px; }
.hs-panel-sec h3 {
  margin: 0 0 8px;
  font-family: var(--font-ui-2); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.hs-panel-count { display: flex; align-items: center; gap: 6px; }
.hs-panel-count .hs-step {
  appearance: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 3px;
  border: 1px solid var(--btn-line);
  background: linear-gradient(var(--btn-a), var(--btn-b));
  color: var(--ink-soft); font-family: var(--font-ui); font-size: 16px; line-height: 1;
}
.hs-panel-count .hs-step:hover { background: linear-gradient(var(--btn-a-hi), var(--btn-b-hi)); color: var(--ink); }
.hs-panel input {
  appearance: none;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  font-family: var(--font-ui); font-size: 14px;
  font-variant-numeric: tabular-nums;
  height: 30px; padding: 0 8px;
}
.hs-panel input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--accent-soft); }
.hs-panel-count input { width: 60px; text-align: center; }
.hs-panel-when { margin-left: 6px; font-size: 12.5px; color: var(--ink-faint); }
.hs-panel-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.hs-pf { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hs-pf > span {
  font-family: var(--font-ui-2); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint);
}
.hs-pf input { width: 100%; }
.hs-panel-vint {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px;
  padding: 10px; border: 1px solid var(--accent-line); border-radius: 3px;
  background: var(--accent-soft);
}
.hs-panel-vint .hs-pf { width: 96px; }
.hs-panel-note { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); }
.hs-panel-none { margin: 0; font-size: 13px; color: var(--ink-faint); }
.hs-panel-lists { list-style: none; margin: 0 0 8px; padding: 0; }
.hs-panel-lists li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--chrome-line);
}
.hs-panel-lists li:last-child { border-bottom: 0; }
.hs-panel-list {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  text-align: left; color: var(--ink); font-family: var(--font-ui);
}
.hs-panel-list .hs-tool-ic { color: var(--accent-ink); }
.hs-panel-list-t { display: flex; flex-direction: column; min-width: 0; }
.hs-panel-list-t b { font-weight: 400; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-panel-list-t small { font-size: 12px; color: var(--ink-faint); }
.hs-panel-lists li.is-stale .hs-panel-list-t small { color: var(--accent-ink); }
.hs-panel-list:hover b { color: var(--accent-ink); }
.hs-panel-list:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hs-panel-done { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-soft); }
.hs-panel-done svg { width: 13px; height: 13px; }
.hs-panel-acts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 16px; border-top: 1px solid var(--chrome-line); }
.hs-tool.is-on { border-color: var(--accent-line); color: var(--accent-ink); }
.hs-tool.is-danger:hover { border-color: var(--accent); color: var(--accent-ink); }
.hs-tool.is-danger.is-armed { background: var(--accent); border-color: var(--accent); color: #fff; }
.hs-panel-tip { margin: 16px 0 0; font-size: 12px; color: var(--ink-faint); }

/* ---------- several wines at once ---------- */
.hs-selbar {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 7;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  max-width: calc(100vw - 40px);
  padding: 8px 8px 8px 14px;
  background: var(--chrome); border: 1px solid var(--chrome-line-2); border-radius: 3px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.hs-selbar-n { font-size: 14px; color: var(--ink-soft); margin-right: 6px; }
.hs-selbar-n b { color: var(--accent-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-selbar-x {
  appearance: none; cursor: pointer; width: 28px; height: 28px; border-radius: 3px;
  border: 1px solid transparent; background: none; color: var(--ink-faint);
}
.hs-selbar-x:hover { background: var(--lift); color: var(--ink); }
@media (min-width: 1200px) { #house.has-panel .hs-selbar { left: calc(50% - 170px); } }

/* ---------- the keyboard line ----------
   Shown only while a count field has the caret, on a wide screen:
   the keys are taught in the one moment they are useful. */
.hs-kbd {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 8px);
  z-index: 6; pointer-events: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  padding: 7px 14px;
  background: var(--chrome); border: 1px solid var(--chrome-line-2); border-radius: 3px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  font-size: 12.5px; color: var(--ink-soft);
  opacity: 0; transition: opacity .15s ease, transform .15s ease;
}
.hs-kbd.is-on { opacity: 1; transform: translate(-50%, 0); }
.hs-kbd kbd {
  display: inline-block; min-width: 18px; padding: 0 4px; margin-right: 2px;
  border: 1px solid var(--chrome-line-2); border-bottom-width: 2px; border-radius: 3px;
  background: var(--field); color: var(--ink);
  font-family: var(--font-ui-2); font-size: 10.5px; line-height: 16px; text-align: center;
}
#house:has(.hs-selbar) .hs-kbd { display: none; }
@media (min-width: 1200px) { #house.has-panel .hs-kbd { left: calc(50% - 170px); } }
@media (max-width: 860px) { .hs-panel, .hs-kbd, .hs-selbar { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .hs-kbd { transition: none; } }

/* ================================================================
   v0.134 — INVENTORY ON A COMPUTER (DESIGN-inventory-desktop.md)
   One bar for grouping, finding and adding, pinned under the
   navigation; the wines as a table; the exceptions marked rather
   than the rule; a wider column on a large screen.
   ================================================================ */

/* The cells and the short line exist in every row and are shown only
   where there is a table to put them in. */
.hs-cell, .hs-cell-in, .hs-meta-s, .hs-colhead { display: none; }

@media (min-width: 1440px) {
  #house { --hs-col: 1120px; }
  #house .lib-head { max-width: none; }
}

@media (min-width: 861px) {
  /* ---------- the bar ---------- */
  #house .hs-bar {
    position: sticky; top: var(--hs-top, 60px); z-index: 4;
    max-width: var(--hs-col); margin: 0 auto 8px;
    background: var(--cellar-ground);
    padding-top: 8px;
  }
  /* The ground runs out to the edges behind the bar, so rows passing
     under it do not show at its sides. */
  #house .hs-bar::before {
    content: ""; position: absolute; z-index: -1;
    top: 0; bottom: 0; left: -28px; right: -28px;
    background: var(--cellar-ground);
  }
  #house .hs-bar-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    padding-bottom: 12px;
  }
  #house .hs-bar .hs-group { display: contents; }
  #house .hs-bar .hs-group-k { order: 0; }
  #house .hs-bar .hs-seg { order: 1; }
  #house .hs-bar .hs-find { order: 2; flex: 1 1 200px; max-width: none; margin: 0; }
  #house .hs-bar .hs-addwrap.is-top { order: 3; flex: 1.3 1 260px; max-width: none; margin: 0; }
  #house .hs-bar-br { order: 4; flex-basis: 100%; height: 0; }
  #house .hs-bar .hs-seg.is-sub { order: 5; }
  #house .hs-bar .hs-group-fold { order: 6; margin-left: auto; }
  #house .hs-bar .hs-find input { height: 38px; padding-top: 0; padding-bottom: 0; }
  #house .hs-bar .hs-add #hsAddName,
  #house .hs-bar .hs-add #hsAddGo { height: 38px; }
  #house .hs-bar .hs-pick { z-index: 6; }

  /* ---------- the table ---------- */
  #houseStack { --hs-ins: 0px; }
  #houseStack.has-list { --hs-ins: 136px; }
  #house .hs-row.is-simple,
  #house .hs-colhead {
    grid-template-columns: minmax(0, 1fr) 62px 58px 66px 116px var(--hs-ins) 30px;
    column-gap: 12px;
  }
  #house .hs-colhead {
    display: grid; align-items: end;
    padding: 0 2px 6px;
    border-bottom: 1px solid var(--chrome-line);
    font-family: var(--font-ui-2); font-size: 9.5px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  }
  #house .hs-colhead .ch-n { text-align: right; padding-right: 7px; }
  #house .hs-colhead .ch-n:first-of-type { text-align: center; padding-right: 0; }
  #house .hs-colhead .ch-c { text-align: center; }
  #house .hs-colhead .ch-l { text-align: right; padding-right: 4px; }

  /* A long name wraps to a second line rather than losing its end;
     with the figures in their own columns the row has the height. */
  #house .hs-row.is-simple .hs-name b { white-space: normal; overflow: visible; }
  #house .hs-row.is-simple .hs-meta { display: none; }
  #house .hs-row.is-simple .hs-meta-s {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px; color: var(--ink-faint); margin-top: 1px;
  }
  #house .hs-cell {
    display: block; appearance: none; -webkit-appearance: none;
    width: 100%; height: 30px; padding: 0 7px;
    border: 1px solid transparent; border-radius: 3px; background: none; cursor: text;
    font-family: var(--font-ui); font-size: 14px; color: var(--ink);
    font-variant-numeric: tabular-nums lining-nums;
    text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #house .hs-cell.is-vintage { text-align: center; }
  #house .hs-cell.is-blank { color: var(--ink-faint); }
  #house .hs-row:hover .hs-cell { border-color: var(--chrome-line-2); background: var(--field); }
  #house .hs-cell:hover { border-color: var(--accent-line) !important; }
  #house .hs-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  #house .hs-row.is-out .hs-cell, #house .hs-row.is-prev .hs-cell { color: var(--ink-faint); }
  #house .hs-cell-in {
    display: block; width: 100%; height: 30px; box-sizing: border-box; padding: 0 6px;
    appearance: none; background: var(--field); color: var(--ink);
    border: 1px solid var(--accent-line); border-radius: 3px;
    box-shadow: 0 0 0 2px var(--accent-soft);
    font-family: var(--font-ui); font-size: 14px; font-variant-numeric: tabular-nums lining-nums;
    text-align: right; outline: none;
  }
  #house .hs-cell-in.is-vintage { text-align: center; }

  /* ---------- the exceptions, not the rule ----------
     A wine already on the open list is a small page in the red; the
     words are in its tooltip. A wine that is not keeps its whole
     button, so the gaps in the list are what the eye finds. */
  #house .hs-row.is-simple .hs-ins.is-on {
    justify-self: end;
    width: 30px; height: 30px; padding: 0; gap: 0;
    display: inline-grid; place-items: center;
    border-color: transparent; background: none;
  }
  #house .hs-row.is-simple .hs-ins.is-on .act-t { display: none; }
  #house .hs-row.is-simple .hs-ins.is-on:hover { border-color: var(--accent-line); background: var(--accent-soft); }

  /* ---------- the section heading stays with its wines ---------- */
  #house .hs-sec > .hs-sec-head {
    position: sticky; top: var(--hs-stick, 120px); z-index: 3;
    background: var(--cellar-ground);
    padding-top: 8px;
    /* Out past the column on both sides, over the rows' list marks. */
    box-shadow: -16px 0 0 var(--cellar-ground), 16px 0 0 var(--cellar-ground);
  }
}

/* ================================================================
   v0.135 — A POLISH PASS ON THE TABLE (desktop only)
   ================================================================ */
@media (min-width: 861px) {
  /* A blank figure is blank. The dash comes back on the row under the
     pointer, where it says "there is a place to type here". */
  #house .hs-cell.is-blank { color: transparent; }
  #house .hs-row:hover .hs-cell.is-blank,
  #house .hs-cell.is-blank:focus-visible { color: var(--ink-faint); }

  /* Only the figure under the pointer draws its box; a whole row of
     boxes on every hover was three fields where there are none. */
  #house .hs-row:hover .hs-cell { border-color: transparent; background: none; }
  #house .hs-row .hs-cell:hover,
  #house .hs-row .hs-cell:focus-visible { border-color: var(--accent-line); background: var(--field); }

  /* The row under the pointer, and the row being counted, are tinted
     rather than lit: a white band across 1100px was the loudest thing
     on the page. */
  #house .hs-row.is-simple:hover { background: color-mix(in srgb, var(--lift-2) 55%, transparent); }
  #house .hs-row.is-simple:focus-within { background: color-mix(in srgb, var(--lift-2) 75%, transparent); }
  #house .hs-row.is-simple.is-chosen,
  #house .hs-row.is-simple.is-chosen:hover { background: var(--accent-soft); }

  /* The bar says when it is pinned: one hairline of shadow under it,
     only once rows are passing beneath. */
  #house .hs-bar { transition: box-shadow .15s ease; }
  #house .hs-bar.is-stuck { box-shadow: 0 6px 10px -8px rgba(0, 0, 0, .22); }
  #house .hs-bar.is-stuck::before { box-shadow: 0 6px 10px -8px rgba(0, 0, 0, .22); }
  /* The header and the first heading each had a rule, 40px apart. The
     header's rule goes; the heading's carries the line. */
  #house .hs-colhead { border-bottom: 0; padding-bottom: 2px; }
  #house .hs-bar { margin-bottom: 4px; }
}

/* Between 861px and 1199px the wine panel used to lie over the counts.
   Now the page moves over for it there too, and the two prices, which
   the panel shows, step out of the table while it is open. */
@media (min-width: 861px) and (max-width: 1199px) {
  #house .hs-panel { width: 300px; }
  #house.has-panel .hs-stack,
  #house.has-panel .lib-head { padding-right: 320px; }
  #house.has-panel .lib-head { max-width: none; padding-left: 28px; }
  #house.has-panel #houseStack.has-list { --hs-ins: 34px; }
  #house.has-panel .hs-row.is-simple,
  #house.has-panel .hs-colhead {
    grid-template-columns: minmax(0, 1fr) 62px 116px var(--hs-ins) 30px;
  }
  #house.has-panel .hs-row.is-simple .hs-cell.is-glass,
  #house.has-panel .hs-row.is-simple .hs-cell.is-bottle,
  #house.has-panel .hs-colhead .ch-glass,
  #house.has-panel .hs-colhead .ch-bottle { display: none; }
  #house.has-panel .hs-row.is-simple .hs-ins {
    width: 30px; height: 30px; padding: 0; gap: 0; justify-self: end;
    display: inline-grid; place-items: center;
  }
  #house.has-panel .hs-row.is-simple .hs-ins .act-t { display: none; }
  #house.has-panel .hs-colhead .ch-l { visibility: hidden; }
  #house.has-panel .hs-selbar,
  #house.has-panel .hs-kbd { left: calc(50% - 150px); }
}
@media (prefers-reduced-motion: reduce) { #house .hs-bar { transition: none; } }
#house .hs-panel:focus { outline: none; }

/* ================================================================
   v0.136 — A SECOND POLISH PASS ON THE TABLE (desktop only)
   ================================================================ */
@media (min-width: 861px) {
  /* The pinned bar's shadow ran out at a card edge 28px past the
     column, so the bar read as a floating box. Its ground now runs the
     full width of the room, like the navigation above it, and the
     shadow with it. */
  #house { overflow-x: hidden; }
  #house .hs-bar::before { left: -100vw; right: -100vw; }
  #house .hs-bar.is-stuck { box-shadow: none; }

  /* A put-away or out wine kept its dash under every blank price,
     because its faint colour outranked the blank rule. */
  #house .hs-row .hs-cell.is-blank { color: transparent; }
  #house .hs-row:hover .hs-cell.is-blank,
  #house .hs-row .hs-cell.is-blank:focus-visible { color: var(--ink-faint); }

  /* Sections sat 34px apart plus the heading's own top padding; in a
     table that is a gap, not a pause. */
  #house .hs-stack .hs-sec { margin-bottom: 22px; }

  /* "Add to the list" on a wine that is out or put away was a column
     of red buttons asking for the wines least likely to belong on the
     list. There it is only its icon, faint, and the words come back on
     the row under the pointer. */
  #house .hs-row.is-out .hs-ins:not(.is-on),
  #house .hs-row.is-prev .hs-ins:not(.is-on) {
    border-color: transparent; background: none; color: var(--ink-faint);
  }
  #house .hs-row.is-out .hs-ins:not(.is-on),
  #house .hs-row.is-prev .hs-ins:not(.is-on) {
    width: 30px; height: 30px; padding: 0; gap: 0; justify-self: end;
    display: inline-grid; place-items: center;
  }
  #house .hs-row.is-out .hs-ins:not(.is-on) .act-t,
  #house .hs-row.is-prev .hs-ins:not(.is-on) .act-t { display: none; }
  #house .hs-row.is-out:hover .hs-ins:not(.is-on),
  #house .hs-row.is-prev:hover .hs-ins:not(.is-on),
  #house .hs-row.is-out .hs-ins:not(.is-on):focus-visible,
  #house .hs-row.is-prev .hs-ins:not(.is-on):focus-visible {
    width: auto; padding: 0 10px; gap: 6px; display: inline-flex;
    border-color: var(--accent-line); background: var(--field); color: var(--accent-ink);
  }
  #house .hs-row.is-out:hover .hs-ins:not(.is-on) .act-t,
  #house .hs-row.is-prev:hover .hs-ins:not(.is-on) .act-t,
  #house .hs-row .hs-ins:not(.is-on):focus-visible .act-t { display: inline; }
}

/* ================================================================
   v0.137 — THREE ROOMS, ONE COLUMN (desktop only)
   My Lists sat at a 1320px measure (its title 116px from the edge at
   1440), Inventory at 940/1120 (160px) and the Wine Library at 820
   (310px). Moving between the three tabs, the title jumped each time.
   One measure now, shared: 940px, and 1120px from 1440px, the numbers
   Inventory already used.
   ================================================================ */
@media (min-width: 861px) {
  :root { --room-col: 940px; }
  #house { --hs-col: var(--room-col); }
  #library .lib-head,
  #library .lib-stack {
    max-width: calc(var(--room-col) + 56px);
    padding-left: 28px; padding-right: 28px;
    box-sizing: border-box;
  }
}
@media (min-width: 1440px) {
  :root { --room-col: 1120px; }
}
/* v0.142: the list prints a different year from Inventory's; the band says so in the accent, on the phone as on the desk. */
.cellar-band .cb-stale { display: block; color: var(--accent-ink); }

/* ═══════════ THE MORE MENU, IN GROUPS (v0.144) ═══════════ */
.hs-menu-sep { height: 1px; margin: 4px 6px; background: var(--chrome-line); flex: none; }
.hs-menu-label {
  padding: 6px 9px 2px; font-family: var(--font-ui-2); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-menu .mi-w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-menu button { display: flex; align-items: center; min-width: 0; }
/* On the phone: a sheet from the bottom, the wine's name at its head. */
.hs-menu-scrim { position: fixed; inset: 0; z-index: 95; background: rgba(20, 12, 10, .32); }
.hs-menu.is-sheet {
  left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto;
  max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--r-sheet, 12px) var(--r-sheet, 12px) 0 0; border-bottom: 0;
  padding: 6px 10px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .22);
  outline: none;
}
.hs-menu.is-sheet .hs-menu-head {
  padding: 12px 8px 8px; font-family: var(--font-display, var(--font-ui)); font-size: 18px; line-height: 1.25;
  color: var(--ink); border-bottom: 1px solid var(--chrome-line); margin-bottom: 4px;
}
.hs-menu.is-sheet button { min-height: 46px; font-size: 16px; padding: 10px 10px; }
.hs-menu.is-sheet .hs-menu-label { padding: 10px 10px 2px; font-size: 11px; }
.hs-menu.is-sheet .hs-menu-cancel {
  justify-content: center; margin-top: 6px; border: 1px solid var(--chrome-line);
  background: var(--paper, #fff); font-family: var(--font-ui); color: var(--ink);
}
.hs-menu.is-sheet .hs-menu-head small {
  display: block; margin-top: 3px; font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-soft);
}
.hs-menu.is-sheet { animation: hs-sheet-up .2s ease-out; }
.hs-menu-scrim { animation: hs-scrim-in .2s ease-out; }
@keyframes hs-sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes hs-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hs-menu.is-sheet, .hs-menu-scrim { animation: none; } }
body.hs-menu-open #house { overflow: hidden; }
/* v0.144.1: the wine you left from, back in Inventory. */
.hs-row.is-back { animation: hs-back-glow 1.8s ease-out; }
@keyframes hs-back-glow {
  0%, 30% { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
  100% { box-shadow: inset 3px 0 0 transparent; background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .hs-row.is-back { animation: none; } }

/* ═══════════ EXPORT, IN THE MORE MENU (v0.146) ═══════════ */
.hs-pop-sep { display: block; height: 1px; margin: 4px 6px; background: var(--chrome-line); }
.hs-pop-label {
  display: block; padding: 6px 10px 2px; font-family: var(--font-ui-2); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.hs-pop-i.has-hint { align-items: flex-start; }
.hs-pop-i.has-hint .hs-tool-ic { margin-top: 2px; }
.hs-pop-t { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.hs-pop-t small { font-size: 12px; line-height: 1.3; color: var(--ink-soft); margin-top: 1px; white-space: normal; }

/* ═══════════ PUT AWAY: BRING BACK IN PLACE OF THE COUNT (v0.147) ═══════════ */
.hs-count.is-away,
#house .hs-row.is-simple .hs-count.is-away { display: flex; }
.hs-count.is-away .hs-restore,
#house .hs-row.is-simple .hs-count.is-away .hs-restore {
  width: 100%; height: 30px; padding: 0 10px;
  font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft);
  white-space: nowrap;
}
.hs-count.is-away .hs-restore:hover { color: var(--accent-ink); border-color: var(--accent-line); }
@media (max-width: 860px) {
  #house .hs-row.is-simple .hs-count.is-away { width: 128px; }
  #house .hs-row.is-simple .hs-count.is-away .hs-restore { height: 34px; }
}
@media (min-width: 861px) {
  #house .hs-row.is-simple .hs-count.is-away { width: 116px; }
}

/* ═══════════ STATUS, OUTSIDE GROUP BY (v0.148) ═══════════
   Its own row and its own shape: separate buttons rather than one
   joined control, because a state is chosen across the groupings,
   not instead of them. */
#house .hs-status { margin-top: 12px; }
#house .hs-status .hs-seg {
  display: flex; flex-wrap: wrap; gap: 6px; border: 0; background: none; overflow: visible; width: auto;
}
#house .hs-status .hs-seg-b {
  flex: 0 0 auto; min-height: 32px; padding: 3px 11px; gap: 7px; align-items: baseline; line-height: 24px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px; background: var(--lift);
  font-size: 14.5px; justify-content: center;
}
#house .hs-status .hs-seg-b:first-child { border-left: 1px solid var(--chrome-line-2); }
#house .hs-seg-n {
  font-family: var(--font-ui-2); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
#house .hs-status .hs-seg-b.is-alert .hs-seg-n { color: var(--accent-ink); }
#house .hs-status .hs-seg-b.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
#house .hs-status .hs-seg-b.is-on .hs-seg-n { color: rgba(255, 255, 255, .82); }
[data-theme="dark"] #house .hs-status .hs-seg-b.is-on { color: var(--paper, #fff); }
@media (max-width: 620px) {
  /* One line that slides sideways, not two rows of buttons. */
  #house .hs-status .hs-seg {
    width: calc(100% + 16px); margin-right: -16px; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-right: 16px;
  }
  #house .hs-status .hs-seg::-webkit-scrollbar { display: none; }
  #house .hs-status .hs-seg-b { flex: 0 0 auto; padding: 3px 10px; font-size: 14px; min-height: 36px; line-height: 28px; }
}
@media (min-width: 861px) {
  #house .hs-bar-row.is-status { padding-top: 0; margin-top: -2px; }
  #house .hs-bar-row.is-status .hs-group { display: flex; margin: 0; }
}

/* ═══════════ THE TWO AXES: THE GRID AND THE BANDS (v0.149) ═══════════ */
#house .hs-grid {
  margin: 10px 0 6px; max-height: 300px; overflow: auto;
  border: 1px solid var(--chrome-line-2); border-radius: 3px; background: var(--lift);
  overscroll-behavior: contain;
}
#house .hs-grid table { width: 100%; border-collapse: separate; border-spacing: 0; }
#house .hs-grid thead th {
  position: sticky; top: 0; z-index: 1; background: var(--chrome);
  border-bottom: 1px solid var(--chrome-line-2);
  font-family: var(--font-ui-2); font-weight: 400; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); text-align: center; padding: 0;
}
#house .hs-grid thead th.hs-gy { text-align: left; padding: 8px 12px; }
#house .hs-grid tfoot td, #house .hs-grid tfoot th {
  position: sticky; bottom: 0; background: var(--chrome); border-top: 1px solid var(--chrome-line-2);
}
#house .hs-gh {
  appearance: none; border: 0; background: none; cursor: pointer; width: 100%;
  padding: 8px 6px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  line-height: 1.25;
}
#house .hs-gh:hover { color: var(--accent-ink); background: var(--accent-soft); }
#house .hs-gx.is-alert .hs-gh { color: var(--accent-ink); }
#house .hs-gx.is-sel .hs-gh { background: var(--accent); color: #fff; }
#house .hs-grid th[scope="row"] { text-align: left; font-weight: 400; padding: 0; }
#house .hs-grid td { text-align: center; padding: 0; border-top: 1px solid var(--chrome-line); }
#house .hs-grid tbody th[scope="row"] { border-top: 1px solid var(--chrome-line); }
#house .hs-grid tbody tr:first-child td, #house .hs-grid tbody tr:first-child th { border-top: 0; }
#house .hs-grow {
  appearance: none; border: 0; background: none; cursor: pointer; display: block; width: 100%;
  text-align: left; padding: 6px 12px; font-family: var(--font-ui); font-size: 15px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
#house span.hs-grow { cursor: default; }
#house button.hs-grow:hover { color: var(--accent-ink); }
#house .hs-grow.is-on { color: var(--accent-ink); font-weight: 700; }
#house .hs-grid tr.is-sel > th, #house .hs-grid tr.is-sel > td { background: var(--accent-soft); }
#house .hs-gc {
  appearance: none; border: 0; background: none; cursor: pointer; display: block; width: 100%;
  min-width: 46px; padding: 6px 4px; font-family: var(--font-ui); font-size: 15px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
#house button.hs-gc:hover { background: var(--accent-soft); color: var(--accent-ink); }
#house .hs-gc.is-zero { color: var(--ink-faint); cursor: default; }
#house td.is-alert button.hs-gc { color: var(--accent-ink); }
#house td.is-away button.hs-gc { color: var(--ink-soft); }
#house .hs-gc.is-all { color: var(--ink-soft); }
#house button.hs-gc.is-on, #house td.is-alert button.hs-gc.is-on { background: var(--accent); color: #fff; }
#house .hs-gc:focus-visible, #house .hs-gh:focus-visible, #house .hs-grow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#house .hs-grid tr.hs-gcountry th {
  text-align: left; padding: 8px 12px 2px; border-top: 1px solid var(--chrome-line);
  font-family: var(--font-ui-2); font-weight: 400; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-ink);
}
#house .hs-grid.is-one tbody th[scope="row"] { width: 1%; }
[data-theme="dark"] #house .hs-gx.is-sel .hs-gh,
[data-theme="dark"] #house button.hs-gc.is-on { color: var(--paper, #fff); }

/* What the grid chose, over the list. */
#house .hs-selnote {
  max-width: var(--hs-col); margin: 14px auto 10px;
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  font-family: var(--font-ui); font-size: 15px; color: var(--ink-soft);
  scroll-margin-top: calc(var(--hs-top, 0px) + 8px);
}
#house .hs-selnote-t { flex: 1 1 auto; min-width: 0; }
#house .hs-selnote-acts { display: inline-flex; gap: 6px; flex: none; }
#house .hs-selnote-b {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 3px 10px; border-radius: 3px;
  border: 1px solid var(--chrome-line-2); background: var(--lift);
  font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft);
}
#house .hs-selnote-b:hover { color: var(--accent-ink); border-color: var(--accent-line); }
#house .hs-selnote-b svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
#house .hs-selnote-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#house .hs-selnote b { color: var(--accent-ink); font-weight: 700; }

/* A group's wines in states, when it holds more than one. */
#house .hs-band-k {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 0 2px;
  font-family: var(--font-ui-2); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
#house .hs-band.is-low .hs-band-k, #house .hs-band.is-out .hs-band-k { color: var(--accent-ink); }
#house .hs-band-n { color: var(--ink-faint); letter-spacing: .04em; }
#house .hs-band + .hs-band { margin-top: 2px; }

@media (max-width: 620px) {
  #house .hs-grid { max-height: 260px; }
  #house .hs-grid .is-all { display: none; }
  #house .hs-grow { font-size: 14.5px; padding: 6px 10px; max-width: 132px; }
  #house .hs-gc { min-width: 0; font-size: 14.5px; padding: 7px 2px; }
  #house .hs-grid thead th { font-size: 9.5px; letter-spacing: .08em; }
  #house .hs-gh { padding: 7px 2px; }
  #house .hs-grid thead th.hs-gy { padding: 7px 10px; }
}
#house .hs-band > .hs-rows { margin-bottom: 0; padding-bottom: 0; }
#house .hs-band + .hs-band > .hs-band-k { padding-top: 14px; }

/* ═══════════ THE GRID ON THE PHONE (v0.150) ═══════════ */
#house .hs-gmore { display: none; }
#house .hs-ghint {
  margin: 6px 2px 0; font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-faint);
}
#house .hs-grid tr.is-sel > th { box-shadow: inset 3px 0 0 var(--accent); }
@media (max-width: 860px) {
  /* No scrolling inside the page: the rows past the sixth fold behind
     one row that says how many there are. */
  #house .hs-grid { max-height: none; overflow: visible; }
  #house .hs-grid thead th, #house .hs-grid tfoot td, #house .hs-grid tfoot th { position: static; }
  #house .hs-grid:not(.is-open) tr.is-more { display: none; }
  #house .hs-gmore { display: table-row; }
  #house .hs-gmore th { padding: 0; border-top: 1px solid var(--chrome-line); }
  #house .hs-gmore button {
    appearance: none; border: 0; background: none; cursor: pointer; width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; font-family: var(--font-ui); font-size: 14.5px; color: var(--accent-ink);
  }
  #house .hs-gmore svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .15s; }
  #house .hs-grid.is-open .hs-gmore svg { transform: rotate(180deg); }
  #house .hs-gc { min-height: 42px; }
  #house .hs-grow { min-height: 42px; white-space: normal; line-height: 1.2; overflow: visible; }
  #house .hs-grid thead th:not(.hs-gy) { white-space: normal; }
  #house .hs-grid thead .hs-gh { line-height: 1.2; }
  /* The choice stays at the top while its answer scrolls under it. */
  #house .hs-selnote {
    position: sticky; top: var(--hs-top, 0px); z-index: 6;
    margin: 12px -6px 8px; padding: 8px 10px;
    background: var(--chrome); border: 1px solid var(--accent-line); border-radius: 3px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
  }
  #house .hs-selnote-b { min-height: 36px; }
}
@media (max-width: 620px) {
  #house .hs-selnote-b.is-x span { display: none; }
  #house .hs-selnote-b.is-x { padding: 3px 11px; }
  #house .hs-selnote-b.is-x svg { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) { #house .hs-gmore svg { transition: none; } }

/* ═══════════ THE GRID, SET LIKE A LEDGER (v0.151) ═══════════
   No box: the grid sits on the ground of the page, ruled with hairlines
   the way the count sheet is, with a double rule over the total. The
   figures are the page's own, tabular and lining. A chosen figure is
   set in a small red tablet rather than flooding its cell. */
#house .hs-grid {
  border: 0; border-radius: 0; background: none;
  border-top: 1px solid var(--chrome-line); border-bottom: 1px solid var(--chrome-line);
  margin: 14px 0 8px;
}
#house .hs-grid table { table-layout: auto; }
#house .hs-grid thead th {
  background: var(--cellar-ground);
  border-bottom: 1px solid var(--chrome-line);
  font-size: 10px; letter-spacing: .14em; color: var(--ink-faint);
}
#house .hs-grid thead th.hs-gy { color: var(--ink-soft); padding: 10px 4px 8px 2px; }
#house .hs-gh { padding: 10px 4px 8px; }
#house .hs-gx.is-alert .hs-gh { color: var(--accent-ink); }
#house .hs-gx.is-sel .hs-gh { background: none; color: var(--accent-ink); box-shadow: inset 0 -2px 0 var(--accent); }
#house .hs-grid td, #house .hs-grid tbody th[scope="row"] { border-top: 1px solid var(--chrome-line-2); }
#house .hs-grow { padding: 7px 4px 7px 2px; font-size: 15.5px; }
#house .hs-grow.is-on { font-weight: 400; color: var(--accent-ink); }
#house .hs-gc {
  position: relative; padding: 7px 4px;
  font-size: 16px; font-variant-numeric: lining-nums tabular-nums;
}
#house button.hs-gc:hover { background: none; color: var(--accent-ink); }
#house button.hs-gc:hover::before {
  content: ''; position: absolute; inset: 4px 50%; margin: 0 -17px;
  border-radius: 3px; background: var(--accent-soft); z-index: -1;
}
#house .hs-gc { z-index: 0; }
/* The chosen figure, in a tablet. */
#house button.hs-gc.is-on, #house td.is-alert button.hs-gc.is-on { background: none; color: #fff; }
#house button.hs-gc.is-on::before {
  content: ''; position: absolute; inset: 5px 50%; margin: 0 -17px;
  border-radius: 3px; background: var(--accent); z-index: -1;
}
/* Nothing, drawn as a small point on the line of the figures. */
#house .hs-gc.is-zero { font-size: 0; padding: 7px 4px; }
#house .hs-gc.is-zero::before {
  content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-faint); opacity: .55; vertical-align: middle;
}
#house .hs-gc.is-all { color: var(--ink-soft); }
#house .hs-grid td.is-all, #house .hs-grid th.is-all { border-left: 1px solid var(--chrome-line-2); }
#house .hs-grid tr.is-sel > th, #house .hs-grid tr.is-sel > td { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
#house .hs-grid tr.is-sel > th { box-shadow: inset 2px 0 0 var(--accent); }
#house .hs-grid tbody tr:not(.hs-gcountry):not(.hs-gmore):hover > th,
#house .hs-grid tbody tr:not(.hs-gcountry):not(.hs-gmore):hover > td { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
/* Countries: the list's own label, a red word and a hairline after it. */
#house .hs-grid tr.hs-gcountry th { padding: 12px 2px 3px; border-top: 0; font-size: 10px; letter-spacing: .16em; font-weight: 600; }
#house .hs-grid tr.hs-gcountry + tr > th, #house .hs-grid tr.hs-gcountry + tr > td { border-top-color: var(--accent-line); }
/* The total, under a double rule. */
#house .hs-grid tfoot td, #house .hs-grid tfoot th {
  background: var(--cellar-ground); border-top: 3px double var(--chrome-line);
}
#house .hs-grid tfoot .hs-grow { font-family: var(--font-ui-2); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
#house .hs-grid tfoot .hs-gc { font-weight: 700; }
#house .hs-grid tfoot .hs-gc.is-all { font-weight: 400; }
/* Under the grid, the hint, quietly. */
#house .hs-ghint { margin: 8px 2px 0; font-size: 13px; }
/* In the list, each state's label runs into a hairline, as countries do. */
#house .hs-band-k { padding: 14px 0 4px; }
#house .hs-band-k::after { content: ''; flex: 1; border-bottom: 1px solid var(--chrome-line-2); transform: translateY(-3px); margin-left: 4px; }
#house .hs-band.is-low .hs-band-k::after, #house .hs-band.is-out .hs-band-k::after { border-bottom-color: var(--accent-line); }
#house .hs-band + .hs-band > .hs-band-k { padding-top: 18px; }
/* The choice, over the list: a quiet ledger strip with the red mark. */
#house .hs-selnote b { font-weight: 700; }
#house .hs-selnote-t { color: var(--ink-soft); }
@media (min-width: 861px) {
  /* On a computer the figures keep to measured columns at the right,
     so the names read as a column and the counts as a ledger. */
  #house .hs-grid th.hs-gx, #house .hs-grid td { width: 104px; }
  #house .hs-grid th.hs-gy, #house .hs-grid tbody th[scope="row"], #house .hs-grid tfoot th { width: auto; }
  #house .hs-grow { max-width: 360px; }
}
@media (max-width: 860px) {
  #house .hs-grid { margin-left: -2px; margin-right: -2px; }
  #house .hs-gmore button { font-size: 14px; min-height: 42px; }
  #house .hs-selnote {
    border: 1px solid var(--chrome-line); border-left: 3px solid var(--accent);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .10); margin-left: 0; margin-right: 0; padding: 7px 8px 7px 12px;
  }
}
@media (max-width: 620px) {
  #house .hs-gc { font-size: 15.5px; }
  #house button.hs-gc.is-on::before, #house button.hs-gc:hover::before { margin: 0 -15px; }
  #house .hs-grid thead th { font-size: 9px; letter-spacing: .1em; }
}
[data-theme="dark"] #house button.hs-gc.is-on { color: var(--paper, #fff); }
#house .hs-gc.is-zero { display: flex; align-items: center; justify-content: center; }
#house .hs-gc.is-zero::before { display: block; }
#house .hs-grid.is-one .hs-grow { white-space: nowrap; }

/* ═══════════ THE PHONE TABLE, SPACED (v0.152) ═══════════
   One measure for every state column, so the figures stand in even
   ranks under their headings; the names take the first third and wrap.
   Rows are a touch closer, rules lighter, and the order of reading is
   name, figure, heading, country: the names set largest in ink, the
   figures a step down, the headings and countries small and spaced. */
@media (max-width: 860px) {
  #house .hs-grid table { table-layout: fixed; width: 100%; }
  #house .hs-grid thead th.hs-gy { width: 34%; }
  #house .hs-grid.is-one thead th.hs-gy { width: 30%; }
  #house .hs-grid thead th { vertical-align: bottom; padding-top: 8px; padding-bottom: 7px; }
  #house .hs-gh { padding: 0 2px; min-height: 0; width: 100%; justify-content: center; text-align: center; }
  #house .hs-grid thead th.hs-gy { padding: 0 4px 7px 2px; vertical-align: bottom; }
  #house .hs-grid td, #house .hs-grid tbody th[scope="row"] {
    border-top-color: color-mix(in srgb, var(--chrome-line-2) 75%, transparent);
  }
  #house .hs-grow { min-height: 38px; padding: 6px 6px 6px 2px; font-size: 16px; line-height: 1.15; color: var(--ink); }
  #house .hs-gc { min-height: 38px; padding: 6px 2px; font-size: 15px; color: var(--ink-soft); }
  #house td.is-alert .hs-gc { color: var(--accent-ink); }
  #house td.is-away .hs-gc { color: var(--ink-faint); }
  #house .hs-gc.is-zero { min-height: 38px; }
  #house .hs-gc.is-zero::before { opacity: .4; }
  #house button.hs-gc.is-on::before, #house button.hs-gc:hover::before { inset: 6px 50%; margin: 0 -14px; }
  /* Countries: a little air above, none below, one rule only. */
  #house .hs-grid tr.hs-gcountry th { padding: 14px 2px 4px; border-bottom: 1px solid var(--accent-line); }
  #house .hs-grid tr.hs-gcountry + tr > th, #house .hs-grid tr.hs-gcountry + tr > td { border-top: 0; }
  #house .hs-grid tbody tr:first-child.hs-gcountry th { padding-top: 10px; }
  /* The total row reads as a total, not as one more region. */
  #house .hs-grid tfoot th, #house .hs-grid tfoot td { padding-top: 2px; }
  #house .hs-grid tfoot .hs-grow { font-size: 10px; letter-spacing: .14em; }
  #house .hs-grid tfoot .hs-gc { color: var(--ink); font-size: 15.5px; }
  #house .hs-grid tfoot td.is-alert .hs-gc { color: var(--accent-ink); }
  /* The fold row: centred, a step quieter than a choice. */
  #house .hs-gmore button { min-height: 40px; font-size: 14px; letter-spacing: .01em; }
  /* Air around the table as a whole. */
  #house .hs-grid { margin: 18px 0 6px; }
  #house .hs-ghint { margin: 8px 2px 4px; }
}
@media (max-width: 380px) {
  #house .hs-grid thead th.hs-gy { width: 30%; }
  #house .hs-grow { font-size: 15px; }
  #house .hs-gc { font-size: 14.5px; }
  #house .hs-grid thead th { font-size: 8.5px; letter-spacing: .08em; }
}
#house .hs-grid tr.hs-gcountry td.is-all, #house .hs-grid tr.hs-gmore td.is-all { border-left: 0; }
@media (min-width: 861px) { #house .hs-grid tr.hs-gcountry td.is-all { border-top: 0; } }
@media (max-width: 860px) { #house .hs-grid tr.hs-gcountry td.is-all { border-bottom: 1px solid var(--accent-line); } }

/* ═══════════ FEWER THINGS ON THE FIRST SCREEN (v0.157) ═══════════ */
/* Region's caret: the depth pair is behind a second tap. */
.hs-seg-b .hs-seg-caret {
  width: 10px; height: 10px; margin-left: 5px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease;
}
.hs-seg-b .hs-seg-caret.is-open { transform: rotate(180deg); }

@media (max-width: 860px) {
  /* One field: the Wine Library's offers sit in the page, under the
     field, above the wines they would join; nothing floats over the
     list being narrowed. */
  #house .hs-add #hsAddName { grid-column: 1; grid-row: 1; padding-right: 40px; }
  #house .hs-add #hsAddGo { grid-column: 2; grid-row: 1; }
  #house .hs-add .hs-pick {
    grid-column: 1 / -1; grid-row: 2;
    position: static;
    box-shadow: none; max-height: none; margin-top: 8px;
    background: var(--paper-ish, var(--chrome));
  }
  .hs-pick-k {
    font-family: var(--font-ui-2); font-size: 10px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-faint); padding: 6px 9px 4px;
  }
  .hs-add-x {
    appearance: none; background: none; border: 0; cursor: pointer;
    color: var(--ink-faint); font-size: 14px; line-height: 1;
    grid-column: 1; grid-row: 1; justify-self: end;
    min-width: 36px; min-height: 36px; z-index: 1;
    border-radius: 3px;
  }
  .hs-add-x:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
}

/* ═══════════ THE PHONE FLOW (v0.158) ═══════════ */
@media (max-width: 860px) {
  /* The field under the Wines heading. */
  #house .hs-addslot:empty { display: none; }
  #house .hs-addslot .hs-addwrap.is-top { margin: 12px 0 4px; max-width: none; }
  /* A row with nothing on its second line does not keep its gap. */
  #house .hs-row.is-simple:not(:has(.hs-ins)) { row-gap: 0; }
}
@media (max-width: 860px) {
  /* A band of one wine does not need a paragraph's worth of air. */
  #house .hs-band-k { padding-top: 12px; }
}
@media (max-width: 420px) {
  /* Narrow phones: the state headings get the width (the names give up
     four points), lose some tracking, and may hyphenate; Spanish
     "agotados" and "guardados" used to run into their neighbours. */
  #house .hs-grid thead th.hs-gy { width: 30%; }
  #house .hs-grid thead th { letter-spacing: .03em; }
  #house .hs-gh { hyphens: auto; -webkit-hyphens: auto; }
}
@media (max-width: 620px) {
  /* A door whose name takes two lines (Spanish "Biblioteca de vinos")
     no longer stands taller than its two neighbours. */
  .lib-bar .lib-nav { align-items: stretch; }
  .lib-bar .lib-nav button { justify-content: center; line-height: 1.1; }
}

/* ═══════════ THREE ZONES ON THE PHONE (v0.159) ═══════════
   Act, see, work. The Wines bar and the one field are one card (what
   you do); Group by and the table sit in a recessed tray (what you
   see); the rows open under their own label and a double rule (what
   you work on). */
@media (max-width: 860px) {
  /* Zone one: the bar and the field, joined. */
  #house .hs-area.is-wines .hs-area-h:has(+ .hs-addslot:not(:empty)) {
    border-bottom: 0; border-radius: 3px 3px 0 0; margin-bottom: 0;
  }
  #house .hs-addslot:not(:empty) {
    background: var(--lift);
    border: 1px solid var(--chrome-line-2); border-top: 0;
    border-left: 3px solid var(--accent);
    border-radius: 0 0 3px 3px;
    padding: 0 10px 10px 12px;
  }
  #house .hs-addslot .hs-addwrap.is-top {
    margin: 0; padding-top: 10px;
    border-top: 1px solid var(--chrome-line-2);
  }
  #house .hs-addslot #hsAddName { background: var(--paper, #fff); }
  [data-theme="dark"] #house .hs-addslot:not(:empty) { background: color-mix(in srgb, var(--ink) 5%, transparent); }

  /* Zone two: the summary, in a tray set into the page. */
  #house .hs-overview {
    margin: 18px 0 0;
    padding: 12px 10px 4px;
    /* v0.160: a deeper tray, so the summary is unmistakably its own
       surface between the white card above and the rows below. */
    background: color-mix(in srgb, var(--ink) 8.5%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
    border-radius: 3px;
    box-shadow: inset 0 1px 3px color-mix(in srgb, var(--ink) 10%, transparent);
  }
  #house .hs-overview .hs-group { margin-top: 0; }
  /* The table takes the tray's colour; on the phone it does not stick. */
  #house .hs-overview .hs-grid thead th,
  #house .hs-overview .hs-grid tfoot th,
  #house .hs-overview .hs-grid tfoot td { background: transparent; }
  #house .hs-overview .hs-ghint { margin-bottom: 8px; }

  /* Zone three: the wines, opened by a label under a double rule. */
  #house .hs-zone-k {
    margin: 26px 0 12px; padding-top: 12px;
    border-top: 3px double var(--chrome-line-2);
    font-family: var(--font-ui-2); font-size: 11px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
  }
  #house .hs-selnote + .hs-zone-k { margin-top: 10px; }
}

@media (max-width: 860px) {
  /* On the deeper tray the quiet figures and rules need a step more ink. */
  #house .hs-overview .hs-grid tbody tr + tr th,
  #house .hs-overview .hs-grid tbody tr + tr td { border-top-color: color-mix(in srgb, var(--ink) 14%, transparent); }
  #house .hs-overview .hs-ghint { color: var(--ink-soft); }
  [data-theme="dark"] #house .hs-overview { background: color-mix(in srgb, #000 22%, transparent); }
}

/* ═══════════ THREE ZONES ON THE DESKTOP (v0.161) ═══════════
   The phone's separation, at the desk: the Wines bar is the white card
   (act); Group by and the table sit in the same deep tray (see); the
   wines open under their label and a double rule, with Find and Add
   as the head of that zone, sticky over the rows (work). */
@media (min-width: 861px) {
  #house { --hs-tray: color-mix(in srgb, var(--ink) 8.5%, var(--cellar-ground)); }
  #house .hs-overview {
    margin: 18px 0 0;
    padding: 14px 18px 6px;
    background: var(--hs-tray);
    border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
    border-radius: 3px;
    box-shadow: inset 0 1px 3px color-mix(in srgb, var(--ink) 10%, transparent);
  }
  #house .hs-overview .hs-group { margin-top: 0; }
  /* The table takes the tray's ground, its sticky head and foot too, so
     rows scrolling under them pass beneath the same colour. */
  #house .hs-overview .hs-grid { background: transparent; border-color: transparent; }
  #house .hs-overview .hs-grid thead th,
  #house .hs-overview .hs-grid tfoot th,
  #house .hs-overview .hs-grid tfoot td { background: var(--hs-tray); }
  #house .hs-overview .hs-grid tbody tr + tr th,
  #house .hs-overview .hs-grid tbody tr + tr td { border-top-color: color-mix(in srgb, var(--ink) 14%, transparent); }
  #house .hs-overview .hs-ghint { color: var(--ink-soft); margin-bottom: 8px; }
  [data-theme="dark"] #house { --hs-tray: color-mix(in srgb, #000 22%, var(--cellar-ground)); }

  /* The wines' own label, on the room's column. */
  #house .hs-zone-k {
    max-width: var(--hs-col); margin: 30px auto 0; padding-top: 12px;
    border-top: 3px double var(--chrome-line-2);
    font-family: var(--font-ui-2); font-size: 11px; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
  }
  #house .hs-selnote + .hs-zone-k { margin-top: 12px; }
}

/* ═══════════ THE DESKTOP TRAY, SPACED (v0.162) ═══════════
   Two tiers inside the tray: the controls, then the table, divided by
   a rule; the table's head, country labels and total each a clear step
   in the order a reader takes them. */
@media (min-width: 861px) {
  #house .hs-overview { padding: 16px 22px 12px; }
  #house .hs-overview .hs-group {
    margin: 0; padding: 0 0 14px; gap: 10px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  }
  #house .hs-overview .hs-group-k { color: var(--ink-soft); font-weight: 500; margin-right: 2px; }
  #house .hs-overview .hs-group-fold { margin-left: auto; }
  #house .hs-overview .hs-grid { margin: 2px 0 0; border-top: 0; border-bottom: 0; max-height: 344px; }
  /* Head: the column words a step darker, over a firmer rule. */
  #house .hs-overview .hs-grid thead th {
    color: var(--ink-soft);
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  }
  #house .hs-overview .hs-grid thead th.hs-gy { color: var(--ink); padding: 14px 4px 9px 2px; }
  #house .hs-overview .hs-gh { padding: 14px 4px 9px; }
  /* Countries open with air above them; the first sits close to the head. */
  #house .hs-overview .hs-grid tr.hs-gcountry th { padding: 16px 2px 4px; }
  #house .hs-overview .hs-grid tbody tr.hs-gcountry:first-child th { padding-top: 10px; }
  /* Rows: names and figures on one size, a little more line. */
  #house .hs-overview .hs-grow { font-size: 16px; padding: 8px 4px 8px 2px; }
  #house .hs-overview .hs-gc { padding: 8px 4px; }
  #house .hs-overview .hs-gc.is-zero { padding: 8px 4px; }
  /* Total: a firmer double rule and a shadow cast upward, so rows
     scrolling beneath it read as going under, not as cut off. */
  #house .hs-overview .hs-grid tfoot td,
  #house .hs-overview .hs-grid tfoot th {
    border-top: 3px double color-mix(in srgb, var(--ink) 26%, transparent);
    box-shadow: 0 -10px 10px -10px color-mix(in srgb, var(--ink) 30%, transparent);
    padding-top: 4px; padding-bottom: 4px;
  }
  #house .hs-overview .hs-grid tfoot .hs-grow { color: var(--ink); }
  #house .hs-overview .hs-ghint { margin: 10px 0 2px; font-size: 13px; }
}

/* ═══════════ FEWER WORDS ON THE PAGE (v0.163) ═══════════ */
/* In a small group each wine says its own state, in the band's voice:
   a small capital word ahead of the line under the name. */
#house .hs-st {
  font-family: var(--font-ui-2); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-right: 7px; vertical-align: 1px;
}
#house .hs-st.is-low, #house .hs-st.is-out { color: var(--accent-ink); }
#house .hs-rows.is-tagged + .hs-rows.is-tagged > .hs-row:first-child { border-top: 1px solid var(--chrome-line-2); }
/* The Wine Library's suggestions say where they come from on both
   screens now that one field finds and adds on both. */
@media (min-width: 861px) {
  #house .hs-pick-k {
    display: block; font-family: var(--font-ui-2); font-size: 10px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-faint); padding: 8px 12px 4px;
  }
}
/* The phone: the © line waits at the end of the page instead of
   holding a strip of every screen. Settings keeps the same links. */
@media (max-width: 860px) {
  #house > .app-credit, #master > .app-credit { position: static; background: none; }
  #library .app-credit { position: static; background: none; }
}
/* One field on the desktop too: the clear button sits inside the field,
   Add beside it, the Wine Library's offers drop under both. */
@media (min-width: 861px) {
  #house .hs-add #hsAddName { grid-column: 1; grid-row: 1; padding-right: 40px; }
  #house .hs-add #hsAddGo { grid-column: 2; grid-row: 1; }
  #house .hs-add .hs-add-x {
    appearance: none; background: none; border: 0; cursor: pointer;
    color: var(--ink-faint); font-size: 14px; line-height: 1;
    grid-column: 1; grid-row: 1; justify-self: end; align-self: center;
    min-width: 36px; min-height: 36px; z-index: 1; border-radius: 3px;
  }
  #house .hs-add .hs-add-x:hover { color: var(--accent-ink); }
  #house .hs-add .hs-add-x:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
}
/* The offers sit in the bar, under the field, as on the phone: nothing
   floats over the rows the same letters have just narrowed. */
@media (min-width: 861px) {
  #house .hs-add .hs-pick {
    grid-column: 1 / -1; grid-row: 2; position: static;
    box-shadow: none; max-height: none; margin-top: 8px;
    background: var(--lift, var(--chrome));
  }
}