/* ============================================================
   THE MASTER WINE LIBRARY — the reference shelf

   Sibling to the house, so it borrows the house's chrome wholesale:
   the same .lib-bar, the same .lib-nav, the same .lib-head, the same
   z-index 82. Only what is genuinely different is written here, which
   is the search field and the hit rows.

   The rows are narrower than the house's on purpose. A house row
   carries a count, a status and a star; this one carries a name and
   two verbs, and giving it the same 940px would leave a hand's width
   of nothing between the wine and the buttons.
   ============================================================ */

#master {
  position: fixed; inset: 0; z-index: 82;
  background: var(--cellar-ground);
  display: flex; flex-direction: column;
  overflow: hidden;
}
#master[hidden] { display: none; }

/* The desk stays mounted underneath for the same reason the house
   leaves it mounted: TSPdf and the phone's fit-zoom both measure real
   page rects, and a display:none desk breaks both. */
body.master-open #desk { pointer-events: none; }
body.master-open { overflow: hidden; }
body.master-open .cell-lib { display: none; }

/* ---------------- the one control ---------------- */

/* The Wine Library used to disagree with itself at three different
   left edges: the heading at 56 (the shared `.lib-head` gutter), the
   search field at 258, and the hint under it at 230. The field and the
   hint were both capped at 820px but measured in different boxes — the
   field inside its own 28px padding, the hint inside `.ml-stack`'s.

   One column now, measured the same way everywhere: the 820px cap
   sits on the elements themselves and the 28px gutter stays on their
   parents, so the head, the field and the hits all land on 230. This
   is the `#house` rule from v0.30.0 applied to the other library —
   and the same trap avoided: the centring must go on the child, not
   as a percentage in the parent's padding. */
/* `.lib-head` carries `margin: 0 auto`, and an auto cross-axis margin
   on a flex item beats `align-items: stretch` — so inside this column
   the band was shrink-wrapped to its own text, 454px wide and floating
   in the middle, which is why the heading looked centred. `width: 100%`
   restores the full band, the same way `#house` does it. */
#master .lib-head { width: 100%; }
.ml-searchwrap { padding: 18px 28px 0; }
.ml-search { max-width: var(--room-col, 820px); margin: 0 auto; }
#master .lib-head > * {
  width: 100%;
  max-width: var(--room-col, 820px);
  margin-left: auto;
  margin-right: auto;
}

/* Big, because it is the only thing on the screen that does anything.
   A reference work with a timid search field is a reference work you
   give up on. */
.ml-search {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 14px;
  background: var(--field);
  border: 1px solid var(--chrome-line-2);
  border-radius: var(--r);
}
.ml-search:focus-within {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.ml-search svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: var(--ink-faint); stroke-width: 1.5; stroke-linecap: round;
}
.ml-search:focus-within svg { stroke: var(--accent-ink); }
.ml-search input {
  flex: 1; min-width: 0;
  appearance: none; background: none; border: 0; outline: none;
  font-family: var(--font-ui);
  font-size: 17px;
  color: var(--ink);
}
.ml-search input::placeholder { color: var(--ink-faint); }

/* ---------------- the hits ---------------- */

.ml-stack {
  flex: 1; overflow-y: auto;
  padding: 20px 28px 64px;
}
.ml-list, .ml-empty, .ml-hint, .ml-more {
  max-width: var(--room-col, 820px);
  margin-left: auto; margin-right: auto;
}

.ml-list { display: flex; flex-direction: column; }

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

.ml-id { min-width: 0; }
.ml-name {
  font-family: var(--font-ui);
  font-size: 16px; line-height: 1.25; color: var(--ink);
  overflow-wrap: anywhere;
}
.ml-meta {
  font-size: 12.5px; line-height: 1.4; color: var(--ink-faint);
  margin-top: 1px;
  overflow-wrap: anywhere;
}

/* The two verbs are the shared .act buttons (css/actions.css) since
   v0.66; this file only places them. */

/* ---------------- the empty states ---------------- */

/* This screen opens empty every time, so its resting state has to be
   an instruction rather than an apology. */
.ml-hint { padding: 18px 2px; }
.ml-hint p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px; line-height: 1.5; color: var(--ink-soft);
}

.ml-empty {
  margin: 18px auto 0; padding: 0 2px;
  font-family: var(--font-ui); font-size: 15px; color: var(--ink-faint);
}
.ml-more {
  margin: 14px auto 0; padding: 0 2px;
  font-size: 12.5px; color: var(--ink-faint);
}

/* ---------------- narrow ---------------- */

@media (max-width: 760px) {
  .ml-searchwrap { padding: 14px 14px 0; }
  .ml-stack { padding: 16px 14px 56px; }
  .ml-search { height: 42px; }
  .ml-search input { font-size: 16px; }

  /* The name takes the full width and the two verbs sit under it. At
     390px a three-column row gave the wine 150px, which is narrower
     than most producers' names. */
  .ml-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "id  id"
      "stk ins";
    gap: 10px 8px;
    padding: 14px 2px;
  }
  .ml-id { grid-area: id; }
  .ml-stock { grid-area: stk; justify-self: start; }
  .ml-ins { grid-area: ins; justify-self: end; }
  body.no-sheet .ml-row { grid-template-areas: "id id" "stk stk"; }
}

/* ═══════════ THE WAY BACK ═══════════
   The nav in this bar names all three places, and below 620px it is
   hidden — which left the Wine Library with no way back to an
   inventory a thumb had just come from.

   It sits in the page above the heading, not in the bar: the bar
   already holds "Back to the sheet", and a second way out beside it
   wrapped the bar onto two rows and gave a phone 186px of chrome.

   Drawn as an eyebrow rather than as a button, because that is what it
   is — a line above the title saying where this screen was entered
   from — and because the library already speaks in quiet uppercase
   Jost above its cards. */
.lib-back { display: none; }

@media (max-width: 760px) {
  .lib-back:not([hidden]) {
    appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center; gap: 4px;
    max-width: 100%;
    margin: 0 0 6px; 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);
  }
  .lib-back:not([hidden]) > span:last-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lib-back:hover { color: var(--accent-ink); }
  .lib-back:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
  }
  .lib-back-arrow { font-size: 15px; line-height: 1; letter-spacing: 0; }
}

/* ═══════════ THE TWO PLACES (v0.66) ═══════════
   The open list and the Cellar, side by side under the search field,
   each with the glyph and ground of the button that sends a wine
   there. A tile is a door; the chevron says so. */
.ml-dest {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  width: 100%; max-width: calc(var(--room-col, 820px) + 56px); box-sizing: border-box;
  margin: 12px auto 0; padding: 0 28px;
}
.ml-tile {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 9px 12px; text-align: left;
  border-radius: 3px;
  font-family: var(--font-ui); color: var(--ink);
  transition: border-color .12s, background .12s;
}
.ml-tile .act-glyph { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.ml-tile.is-list { background: var(--paper, #fff); border: 1px solid var(--accent-line); }
.ml-tile.is-list .act-glyph { color: var(--accent-ink); }
.ml-tile.is-cellar { background: var(--cellar-ground); border: 1px solid var(--chrome-line-2); }
.ml-tile.is-list:hover { border-color: var(--accent); }
.ml-tile.is-cellar:hover { border-color: var(--ink-faint); }
.ml-tile.is-none { background: transparent; border-style: dashed; }
.ml-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ml-tile-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ml-tile-k {
  font-family: var(--font-ui-2); font-weight: 600; font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint);
}
.ml-tile-n {
  font-size: 15px; line-height: 1.25; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ml-tile-s { font-size: 12px; color: var(--ink-faint); line-height: 1.3; }
.ml-tile-go { font-size: 20px; line-height: 1; color: var(--ink-faint); flex: none; }
[data-theme="dark"] .ml-tile.is-list { background: var(--lift); }

@media (max-width: 760px) {
  .ml-dest { padding: 0 14px; gap: 8px; margin-top: 10px; }
  .ml-tile { padding: 7px 9px; gap: 7px; }
  .ml-tile .act-glyph { width: 15px; height: 15px; }
  .ml-tile-n { font-size: 14px; }
  .ml-tile-s { font-size: 11px; }
  .ml-tile-go { display: none; }
}

/* v0.87: the tiles became one line, only with several establishments. */
.ml-dest { display: block; }
.ml-dest:empty { display: none; }
.ml-into {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft);
}
.ml-into .act-glyph { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--accent-ink); stroke-width: 1.3; }

/* ═══════════ WHICH INVENTORY (v0.91) ═══════════
   A small dialog over the Wine Library, asked only when there is more
   than one establishment. Same rounded panel and 3px buttons as the
   other bridge pieces. */
.ml-pick-scrim {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(28, 22, 16, .38);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ml-pick {
  width: 100%; max-width: 420px; box-sizing: border-box;
  background: var(--paper, #fff); color: var(--ink);
  border: 1px solid var(--chrome-line-2); border-radius: var(--r);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  padding: 20px 20px 14px;
  font-family: var(--font-ui);
}
[data-theme="dark"] .ml-pick { background: var(--lift); }
.ml-pick-k {
  margin: 0; font-family: var(--font-ui-2); font-weight: 600; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink);
}
.ml-pick h3 { margin: 4px 0 2px; font-size: 19px; font-weight: 500; line-height: 1.25; }
.ml-pick-q { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); }
.ml-pick-list { display: flex; flex-direction: column; gap: 8px; }
.ml-pick-h {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; text-align: left;
  background: var(--cellar-ground); color: var(--ink);
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  font-family: var(--font-ui);
}
.ml-pick-h:hover { border-color: var(--accent-line); }
.ml-pick-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ml-pick-h .act-glyph { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--accent-ink); stroke-width: 1.2; }
.ml-pick-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ml-pick-t b { font-weight: 600; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-pick-t small { font-size: 12px; color: var(--ink-faint); }
.ml-pick-v {
  flex: none; font-family: var(--font-ui-2); font-weight: 600; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 3px;
  background: var(--accent); color: #fff;
}
.ml-pick-h.is-in { background: transparent; }
.ml-pick-h.is-in .ml-pick-v { background: transparent; color: var(--ink-faint); padding-right: 0; }
.ml-pick-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.ml-pick-x {
  appearance: none; cursor: pointer; background: transparent;
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  padding: 7px 14px; font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft);
}
.ml-pick-x:hover { border-color: var(--ink-faint); color: var(--ink); }
@media (max-width: 760px) {
  .ml-pick-scrim { align-items: flex-end; padding: 0; }
  .ml-pick { max-width: none; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); }
}


.lib-back:not([hidden]) {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%;
  margin: 0 0 6px -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);
}
.lib-back:not([hidden]) > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-back:hover { color: var(--accent-ink); }
.lib-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.lib-back-arrow { font-size: 15px; line-height: 1; letter-spacing: 0; }

/* v0.107: the whole room scrolls. house.css asked for this in v0.88
   ("ONE PAGE THAT SCROLLS"), but this file loads after it and its
   `#master { overflow: hidden }` above won on order, while the stack
   had already been told not to scroll itself, so a long result list
   could not be scrolled at all. Said again here, where it wins. */
#master { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* v0.141: from an establishment, Esc goes back to it; the key is shown on that link. */
#master.back-house .sheet-door .kbd-esc { display: none !important; }
#masterBack .kbd-esc { margin-left: 8px; }
/* v0.141: the eyebrow back link lines up with the heading under it.
   It was 1120px wide and inline, so its auto margins resolved to 0 and
   it sat 44px left of the column at 1440px. */
#master .lib-head > #masterBack:not([hidden]) {
  width: auto;
  margin-left: max(0px, calc((100% - var(--room-col, 820px)) / 2 - 2px));
  margin-right: 0;
}
#masterBack #masterBackText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v0.165: the focused search field draws its edge in the word red in
   the dark, as the other fields' rings do. */
[data-theme="dark"] .ml-search:focus-within { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }