/* ============================================================
   The Library — the shelf.

   Quieter than the desk on purpose. The desk is a workshop with a
   bright page in the middle of it; the shelf is the room you walk
   through to get there, so it is one flat surface, generous margins,
   and no chrome competing with the miniatures. The pages are the only
   bright things on screen, which is exactly the hierarchy a shelf
   wants: the lists are the content, everything else is furniture.
   ============================================================ */

#library {
  position: fixed;
  inset: 0;
  /* Above the desk toolbar, the drawer and the phone's own nav and
     bottom bar, which all live in the 60s. Below the toast (90) and
     the busy shade (95): the Library still uses both. */
  z-index: 75;
  overflow: auto;
  overscroll-behavior: contain;
  /* v0.83: one ground for all three rooms, the Cellar's cream. */
  background: var(--cellar-ground);
  -webkit-overflow-scrolling: touch;
}
#library[hidden] { display: none; }

/* The desk stays mounted and measurable underneath — TSPdf reads the
   real page rects — so it is only pushed out of reach, never hidden. */
body.lib-open #desk { pointer-events: none; }
body.lib-open { overflow: hidden; }

/* ---------------- top bar ---------------- */
.lib-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  /* v0.26.0 — wrap rather than squeeze. With the buttons refusing to
     shrink, a width that genuinely cannot hold the row has to give
     somewhere, and a second line of whole words is better than one
     line of shredded ones. This is the same answer the desk toolbar
     got in v0.25.0. It is a fallback, not a layout: at 390px and 360px
     the bar still sits on one line. */
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px clamp(18px, 5vw, 56px);
  background: color-mix(in srgb, var(--chrome) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--chrome-line-2);
}
.lib-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 19px;
  letter-spacing: .01em;
  color: var(--ink);
}
.lib-brand svg { width: 28px; height: 28px; flex: none; color: var(--accent-ink); }
.lib-brand b { font-weight: 600; }
.lib-brand span { color: var(--ink-soft); font-size: 13.5px; letter-spacing: .04em; }
.lib-spring { flex: 1 1 auto; }

/* v0.26.0 — flex: none and nowrap.
   The bar is a nowrap flex row, and nothing here declared a shrink
   floor, so on a narrow phone the browser took the width out of these
   buttons instead of the row. "Back to the sheet" was 90px wide over
   three lines at 390px and 51px over five lines at 320px, which pushed
   the bar itself from 58px to 111px tall. The label was not too long;
   it was being crushed. These two properties say the words come first
   and the row wraps if it must — see the phone block below. */
.lib-bar button {
  flex: none;
  white-space: nowrap;
  font: inherit;
  font-family: var(--font-ui);
  font-size: 14.5px;
  border: 1px solid var(--chrome-line-2);
  background: var(--lift);
  color: var(--ink);
  border-radius: 3px;
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color .14s, background .14s, transform .14s;
}
.lib-bar button:hover { border-color: var(--ink-soft); }
.lib-bar button:active { transform: translateY(1px); }
/* v0.26.0 — the shelf bar's text buttons had the same gap the toolbar
   did: .lib-icon and .lib-nav button were drawn, these two were not. */
.lib-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-theme="dark"] .lib-bar button:focus-visible { outline-color: var(--accent-ink); }
/* New list is accent-filled, so it takes its own label's colour, inset
   — same reasoning and the same negative offset as .tb-out-primary: a
   white ring outside the button would be a white line on cream. Both
   themes, because the dark override above is the more specific
   selector and would otherwise win. */
.lib-bar .primary:focus-visible,
[data-theme="dark"] .lib-bar .primary:focus-visible {
  outline-color: var(--on-accent);
  outline-offset: -3px;
}
.lib-bar .primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.lib-bar .primary:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }
#libAccount {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ---------------- heading ---------------- */
.lib-head {
  padding: clamp(26px, 5vw, 46px) clamp(18px, 5vw, 56px) 0;
  max-width: 1320px;
  margin: 0 auto;
}
/* The page title carries the accent rather than ink, which is how
   v7.2.99 set "My Lists". On three otherwise very quiet screens it is
   the one warm thing above the fold, and it names the room you are in. */
.lib-head h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 44px);
  letter-spacing: -.012em;
  color: var(--accent-ink);
}
/* Focused programmatically so a screen reader announces the route.
   No ring: the user did not reach it with a key, and a red box around
   the page title is the loudest thing on a screen meant to be calm. */
.lib-head h2:focus, .lib-head h2:focus-visible { outline: none; }
.lib-status {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  letter-spacing: .015em;
}
.lib-status.is-warn { color: #8a5a10; }
.lib-status strong { font-weight: 600; }

/* ---------------- the stack ---------------- */
.lib-stack {
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px clamp(18px, 5vw, 56px) 80px;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  align-items: start;
}
/* A pair is one object on the shelf and spans the grid so its two
   halves never break across a row boundary from each other. */
.lib-pair { grid-column: 1 / -1; }
.lib-welcome { grid-column: 1 / -1; }

/* Detached from the nav so it does not read as a fourth destination. */
#libNewBtn { margin-left: 14px; }

/* ---------------- card ---------------- */
.lib-card {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--lift);
  border: 1px solid var(--chrome-line-2);
  border-radius: var(--r);
  cursor: pointer;
  text-align: left;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.lib-card:hover {
  border-color: var(--accent-line);
  box-shadow: 0 8px 26px -18px rgba(30, 24, 20, .5);
  transform: translateY(-1px);
}
.lib-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lib-card.is-open { border-color: var(--accent); }

/* The miniature. A real sheet at ~21%, so it needs a paper edge and a
   shadow to read as paper and not as a screenshot. `overflow:hidden`
   is load-bearing: the scaled page is full letter size and only the
   top of it belongs on the card. */
/* PAPER. This is a picture of page one, so it is white in both themes
   for the same reason the sheet is. See the zone note in desk.css. */
.lc-thumb {
  flex: none;
  width: 118px;
  height: 152px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--thumb-edge), 0 4px 12px -8px rgba(0, 0, 0, .45);
  position: relative;
}
.lc-thumb .mini-frame { position: absolute; inset: 0; }
.lc-thumb .mini-page {
  transform-origin: 0 0;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--paper);
  box-shadow: none;
  border: 0;
}
/* The mini borrows the sheet's own stylesheet, which draws editor
   affordances on hover. None of them belong on a thumbnail. */
.lc-thumb .mini-page * { pointer-events: none !important; cursor: default !important; }
.lc-thumb .mini-page .blk:hover,
.lc-thumb .mini-page .cell:hover { background: none !important; box-shadow: none !important; }
.lc-thumb .mini-page .cell[data-ph]:empty::before { content: none; }
.lc-thumb.is-blank::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-top: 1px solid var(--chrome-line-2);
  border-bottom: 1px solid var(--chrome-line-2);
  opacity: .7;
}

.lc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lc-top { display: flex; align-items: center; gap: 8px; }
.lc-spring { flex: 1 1 auto; }
.lc-pill {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--chrome-line-2);
  border-radius: var(--r);
  padding: 3px 9px;
  white-space: nowrap;
}
/* A state, not a control. It was a solid oxblood pill, which made it
   one of exactly two things on this screen wearing the accent fill —
   the other being the New list button, the one thing here you can
   press. It also said for the third time what the card's accent border
   and your having just come from this list already say. The Cellar
   answers the same question one room away with .hs-est-eyebrow: Jost,
   letter-spaced, accent ink, no fill. This follows it — at 10.5px
   rather than the Cellar's 9.5, because there the eyebrow sits alone
   and here it shares a baseline with .lc-pill 8px away. */
.lc-open {
  font-family: var(--font-ui-2);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  padding: 3px 0;
}
.lc-more {
  flex: none;
  width: 28px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  opacity: .5;
  transition: opacity .14s, background .14s, border-color .14s;
}
.lib-card:hover .lc-more { opacity: 1; }
.lc-more:hover { background: var(--chrome); border-color: var(--chrome-line-2); }
.lc-more svg { width: 16px; height: 16px; fill: currentColor; }

.lc-name {
  margin: 10px 0 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.16;
  letter-spacing: -.006em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.lc-name.is-editing {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
  cursor: text;
}
.lc-meta {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  letter-spacing: .015em;
}
.lc-chips { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.lc-chip {
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--ink-soft);
  background: var(--chrome);
  border-radius: var(--r);
  padding: 3px 7px;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Dashed means "something can go here" everywhere else in TableSet —
   the page inserters, the Add an establishment card, the phone's add
   pair, the margin guides. This is a count of the sections that did not
   fit, and nothing can be added to it. Same ground as the chips it
   counts, quieter ink, because it is a remainder rather than a name. */
.lc-chip-more { color: var(--ink-faint); }

/* ---------------- card menu ---------------- */
.lc-menu {
  position: absolute;
  top: 44px;
  right: 14px;
  z-index: 5;
  min-width: 178px;
  background: var(--lift);
  border: 1px solid var(--chrome-line-2);
  border-radius: var(--r);
  box-shadow: 0 16px 40px -20px rgba(30, 24, 20, .55);
  padding: 5px;
  display: flex;
  flex-direction: column;
  cursor: default;
}
.lc-menu button {
  font: inherit;
  font-family: var(--font-ui);
  font-size: 14.5px;
  text-align: left;
  border: 0;
  background: none;
  color: var(--ink);
  padding: 8px 11px;
  border-radius: 3px;
  cursor: pointer;
}
.lc-menu button:hover { background: var(--chrome); }
.lc-menu .danger { color: #9a2a22; }
[data-theme="dark"] .lc-menu .danger:not(.armed) { color: var(--accent-ink); }
.lc-menu .danger.armed { background: var(--danger); color: var(--on-accent); }

/* ---------------- pair group ---------------- */
.lib-pair {
  background: color-mix(in srgb, var(--ink) 3.5%, transparent);
  border: 1px solid var(--chrome-line-2);
  border-radius: var(--r);
  padding: 16px 16px 18px;
}
.lp-head { display: flex; align-items: baseline; gap: 12px; padding: 0 2px 12px; }
.lp-name {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -.006em;
  color: var(--ink);
  cursor: text;
}
.lp-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.lp-name.is-editing { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.lp-meta {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lp-cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.lib-card.in-pair { background: var(--lift); }

/* ---------------- welcome ---------------- */
.lib-welcome {
  padding: clamp(18px, 4vw, 40px) 0 0;
  max-width: 940px;
}
.lib-welcome h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 32px);
  letter-spacing: -.01em;
  color: var(--ink);
}
/* Promoted: with the duplicate heading gone this sentence leads the
   block, so it carries a little more weight than a subline would. */
/* ---------------- the fan ----------------
   Three miniature lists, tilted, the middle one raised and in front.
   Sizes are in px because this is a picture at a fixed scale, not a
   layout: the rules have to read as type at 138px wide, and a fluid
   version turned them to mush on a laptop. */
.lw-fan {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 14px;
  margin: 4px 0 34px;
  padding-top: 18px;
  pointer-events: none;
}
.lwf {
  flex: none;
  width: 138px; height: 180px;
  box-sizing: border-box;
  padding: 13px 12px;
  display: flex; flex-direction: column; gap: 9px;
  background: var(--paper);
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--thumb-edge), 0 10px 24px -14px rgba(50, 38, 28, .55);
}
.lwf:first-child { transform: rotate(-6deg) translateY(6px); }
.lwf:nth-child(2) { transform: translateY(-16px); z-index: 2; }
.lwf:last-child { transform: rotate(6deg) translateY(6px); }
.lwf-t {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--accent-paper);
  margin-bottom: 1px;
}
.lwf-sec { display: flex; flex-direction: column; gap: 4px; }
/* The section name, as a short accent rule — the one coloured mark in
   the miniature, which is what makes it read as a wine list. */
.lwf-h {
  height: 2px; width: 42%;
  background: var(--accent-paper);
  opacity: .62;
  border-radius: 1px;
  margin-bottom: 2px;
}
.lwf-r { display: flex; align-items: center; gap: 6px; }
.lwf-l { flex: 1 1 auto; height: 1.5px; background: #cbc4b8; border-radius: 1px; }
.lwf-l:nth-child(1) { flex-basis: auto; }
.lwf-r:nth-child(odd) .lwf-l { opacity: .78; }
.lwf-p { flex: none; width: 13px; height: 1.5px; background: #cbc4b8; border-radius: 1px; }

/* The right-hand sheet is the two-column one, so its rules run in pairs. */
.lwf[data-k="combined"] .lwf-sec { gap: 3px; }
.lwf[data-k="combined"] .lwf-l { opacity: .6; }

@media (max-width: 720px) {
  .lw-fan { gap: 8px; margin-bottom: 26px; }
  .lwf { width: 104px; height: 136px; padding: 10px 9px; gap: 7px; }
  .lwf-t { font-size: 10px; }
  .lwf:nth-child(2) { transform: translateY(-11px); }
}

.lib-welcome .lw-lead {
  margin: 2px 0 26px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  /* Wide enough that the sentence holds one line on a laptop rather
     than dropping “at once.” onto a line of its own. */
  max-width: 62ch;
}
.lib-welcome p {
  margin: 8px 0 26px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 54ch;
}
.lw-tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }
.lw-tile, .lnf-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 18px;
  background: var(--lift);
  border: 1px solid var(--chrome-line-2);
  border-radius: var(--r);
  cursor: pointer;
  font: inherit;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.lw-tile:hover, .lnf-tile:hover {
  border-color: var(--accent-line);
  transform: translateY(-1px);
  box-shadow: 0 8px 26px -18px rgba(30, 24, 20, .5);
}
.lnf-tile.is-sel {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.lw-t, .lnf-t {
  font-family: var(--font-ui);
  font-size: 19px;
  color: var(--ink);
}
.lw-s, .lnf-s {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.lw-b, .lnf-b {
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.lw-demo {
  margin-top: 22px;
  font: inherit;
  font-family: var(--font-ui);
  font-size: 14.5px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--chrome-line-2);
  color: var(--ink-soft);
  padding: 2px 0;
  cursor: pointer;
}
.lw-demo:hover { color: var(--accent-ink); border-color: currentColor; }

/* ---------------- new-list flow ---------------- */
#libNew {
  position: fixed;
  inset: 0;
  z-index: 82;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(28, 22, 18, .42);
  backdrop-filter: blur(2px);
}
#libNew[hidden] { display: none; }
.lnf-card {
  width: min(760px, 100%);
  max-height: min(86vh, 820px);
  display: flex;
  flex-direction: column;
  background: var(--chrome);
  border: 1px solid var(--chrome-line-2);
  border-radius: var(--r);
  box-shadow: 0 40px 90px -40px rgba(20, 14, 10, .6);
  overflow: hidden;
}
.lnf-head { padding: 22px 26px 16px; border-bottom: 1px solid var(--chrome-line-2); background: var(--lift); }
.lnf-head h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 25px;
  letter-spacing: -.008em;
  color: var(--ink);
}
.lnf-head p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.lnf-body { padding: 22px 26px; overflow: auto; flex: 1 1 auto; }
.lnf-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.lnf-field { display: block; margin-top: 20px; }
.lnf-field > span {
  display: block;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.lnf-field em { font-style: normal; opacity: .6; text-transform: none; letter-spacing: .02em; }
.lnf-field input {
  width: 100%;
  font: inherit;
  font-family: var(--font-ui);
  font-size: 16px;
  padding: 9px 12px;
  border: 1px solid var(--chrome-line-2);
  border-radius: 3px;
  background: var(--lift);
  color: var(--ink);
}
.lnf-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.lnf-tpls { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.lnf-tpl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  font: inherit;
  padding: 13px 14px;
  background: var(--lift);
  border: 1px solid var(--chrome-line-2);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .14s, transform .14s;
}
.lnf-tpl:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.lnf-tpl.is-sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lnf-tpl-name { font-size: 18px; color: var(--ink); line-height: 1.2; }
.lnf-tpl-blurb { font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
/* .lnf-rest is gone: the "other nine templates" disclosure was
   removed in v0.19.0 and all eighteen looks now sit in one grid. */
.lnf-note { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-soft); }

.lnf-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-top: 1px solid var(--chrome-line-2);
  background: var(--lift);
}
.lnf-foot .spring { flex: 1 1 auto; }
.lnf-foot button {
  font: inherit;
  font-family: var(--font-ui);
  font-size: 15px;
  padding: 8px 18px;
  border-radius: 3px;
  border: 1px solid var(--chrome-line-2);
  background: var(--lift);
  color: var(--ink);
  cursor: pointer;
}
.lnf-foot button:hover { border-color: var(--ink-soft); }
.lnf-foot .primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.lnf-foot .primary:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }

/* ---------------- phone ----------------
   One column, thumbs on the left still — a list you can identify by
   its face at a glance is the whole point of the miniature, and a
   somm on the floor is on a phone. */
@media (max-width: 760px) {
  /* Tighter than it was. With the buttons at their natural width the
     row is close to full on a narrow phone, and the wrap decision is
     made on base sizes, so a few pixels either way is the difference
     between one line and two. 7px and 12px buy about 16px of slack,
     which is what puts the longer Spanish labels back on one line at
     360px. 320px still wraps, and should — the words are whole there
     and that is the trade. */
  .lib-bar { padding: 11px 12px; gap: 7px; }
  .lib-brand { font-size: 17px; }
  /* The wordmark goes with the tagline on the phone. The desk toolbar
     has always shown the chalice alone, so this is the existing
     behaviour of the other bar rather than a new decision, and it
     returns 60px to the row that the buttons needed. The mark keeps
     its aria-label, so the name is still announced. */
  .lib-brand span, .lib-brand b, #libAccount { display: none; }
  .lib-bar button { padding: 7px 10px; font-size: 14px; }
  .lib-head { padding: 22px 16px 0; }
  /* `minmax(0, 1fr)` rather than `1fr`: a bare `1fr` track cannot go
     below its own min-content, and on a 360px phone the widest card
     body pushed the column 9px past the right margin, so the shelf sat
     16px from the left and 7px from the right. The zero floor lets the
     text wrap instead, and `min-width: 0` on the body lets it. */
  .lib-stack { padding: 18px 16px 120px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lc-body, .lib-card { min-width: 0; }
  .lib-card { padding: 13px; gap: 13px; }
  .lc-thumb { width: 92px; height: 119px; }
  .lc-name { font-size: 19px; }
  .lib-pair { padding: 13px 13px 15px; }
  .lp-cards { grid-template-columns: 1fr; }
  .lc-menu { right: 10px; top: 40px; }
  .lnf-card { max-height: 92vh; }
  .lnf-head, .lnf-body, .lnf-foot { padding-left: 16px; padding-right: 16px; }
  .lnf-tpls { grid-template-columns: 1fr 1fr; }
}

/* ---------------- the brand, as the way back ----------------
   No new control in the toolbar: the mark that was already there does
   the job. It gains a hover state and a small chevron so it reads as
   something you can press, and nothing else in the bar moves. */
#btnLibrary {
  font: inherit;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  border-radius: 3px;
  transition: background .14s, border-color .14s;
}
#btnLibrary:hover { background: var(--chrome-2); border-color: var(--chrome-line-2); }
#btnLibrary:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
/* The chevron used to appear only on hover, which assumed the mark
   had already been read as a button. Below 1530px .brand-name is
   display:none, so on a 13-inch laptop that left a wine glass in the
   corner and nothing else — indistinguishable from a logo, because it
   is also the logo. It rests at three-quarters now and firms up under
   the pointer: present enough to say there is a way back, quiet enough
   not to become a second button beside the mark. */
.brand-back {
  width: 11px;
  height: 11px;
  margin-left: -1px;
  color: var(--ink-faint);
  opacity: .75;
  transition: opacity .16s, color .16s;
}
#btnLibrary:hover .brand-back,
#btnLibrary:focus-visible .brand-back { opacity: 1; color: var(--ink-soft); }

/* ─── Theme switch on the shelf ───
   The Library covers the status bar, so the control repeats here. Icon
   only, and shaped like a shelf-bar button rather than a status-bar one
   so it belongs to this screen. Only the destination glyph shows. */
.lib-bar .lib-icon {
  font: inherit;
  border: 1px solid var(--chrome-line-2);
  background: var(--lift);
  color: var(--ink-soft);
  border-radius: 3px;
  padding: 8px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .14s, background .14s, color .14s;
}
.lib-bar .lib-icon:hover { border-color: var(--ink-soft); color: var(--accent-ink); }
.lib-bar .lib-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lib-icon svg { width: 15px; height: 15px; display: block; }
.lib-icon .th-moon { fill: currentColor; stroke: none; }
.lib-icon .th-sun  { fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; }
.lib-icon .th-sun  { display: none; }
[data-theme="dark"] .lib-icon .th-sun  { display: block; }
[data-theme="dark"] .lib-icon .th-moon { display: none; }

/* Matches .sb-lang on the desk, at the Library's slightly larger scale.
   Both switches drive the same flag, so they are deliberately the same
   control drawn twice rather than two designs for one setting. */
.lib-bar .lib-lang > span {
  font: 600 10px/1 var(--font-ui-2);
  letter-spacing: .09em;
  font-variant-numeric: tabular-nums;
  display: block;
}

/* The offer of a rack for an establishment the app has not seen.
   Sits under the Establishment field in the new-list flow, as a
   sentence with one thing to press — not a checkbox, because there is
   nothing to tick if you have only ever had one bar. */
.lnf-house {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-faint);
}
.lnf-house-go {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lnf-house-go:hover { color: var(--ink); }
.lnf-house-go[data-on="1"] {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

/* ============================================================
   The Cellar, on the shelf.  DESIGN-cellar-on-shelf.md

   One card per establishment in the same grid cell as a list,
   because the inventory is not a sub-feature of a list. Everything
   here rides on .lib-card; only the thumb and three lines differ.
   ============================================================ */

/* The group heading spans the grid, so the cards below it start a
   fresh row rather than filling a gap left by the last list. */
.lib-group-head {
  grid-column: 1 / -1;
  margin: 26px 0 -2px;
  padding-top: 26px;
  border-top: 1px solid var(--chrome-line-2);
}
/* Set exactly as `.lib-head h2` sets "My Lists", accent and all: at
   this size the Cellar reads as the second title on the shelf rather
   than as a subsection of the lists above it, which is what it is. */
.lib-group-head h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 44px);
  letter-spacing: -.012em;
  color: var(--accent-ink);
}
.lib-group-head p {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* THE ROOM, NOT PAPER. Every other thumb on this shelf is white in
   both themes because it pictures something that prints. A cellar
   never prints, so it is drawn on the Cellar's own ground and no
   paper edge or paper shadow goes near it. */
.cc-thumb {
  background: var(--cellar-ground);
  box-shadow: inset 0 0 0 1px var(--chrome-line-2);
  display: grid;
  place-items: center;
}
.cc-thumb .rk { width: 100%; height: 100%; display: block; }
.rk-rule { stroke: var(--ink-faint); stroke-width: 1; opacity: .45; }
.rk-m { stroke-width: 2.4; stroke-linecap: round; }
.rk-on { stroke: var(--ink-soft); opacity: .85; }
.rk-un { stroke: var(--ink-faint); opacity: .5; }
.rk-low { stroke: var(--accent-ink); }
.rk-out { stroke: var(--accent-ink); opacity: .42; }

.lib-cellar.is-active { box-shadow: inset 2px 0 0 var(--accent-ink); }
.lib-cellar.is-active:hover {
  box-shadow: inset 2px 0 0 var(--accent-ink), 0 8px 26px -18px rgba(30, 24, 20, .5);
}
.cc-low {
  margin: 5px 0 0;
  font-size: 12.5px;
  letter-spacing: .015em;
  color: var(--accent-ink);
}

/* The add card keeps the geometry and drops the drawing: an
   establishment that does not exist yet has no rack to picture. */
.cc-add .lc-name { margin-top: 0; font-size: 19px; }
.cc-add .lc-body { justify-content: center; }
/* Empty shelving under the plus: the honest picture of what an
   establishment you have not made yet holds. */
.cc-thumb-add { position: relative; }
.cc-thumb-add .rk { position: absolute; inset: 0; opacity: .5; }
.cc-thumb-add .cc-plus { position: relative; }
.cc-plus {
  font-family: var(--font-ui);
  font-size: 30px;
  line-height: 1;
  color: var(--ink-faint);
}
.cc-add:hover .cc-plus { color: var(--accent-ink); }

/* No sheet yet, so no way back to one. See paintSheetDoor() in
   js/library.js. */
body.no-sheet #libClose,
body.no-sheet #houseClose,
body.no-sheet #masterClose { display: none; }

/* ============================================================
   THE BRIDGES — v0.59.0
   The pieces that join the two rooms are allowed to be softer than
   the rest of the app: rounded panels, one warm shadow, a slight
   gradient on the Cellar's ground, icons in tinted tiles. Buttons and
   tags keep the app's square 3px corner and its Jost capitals. Shared
   by the welcome band, the Wine details band and the rack's marks.
   ============================================================ */
:root {
  --bridge-ground: linear-gradient(135deg,
    color-mix(in srgb, var(--cellar-ground) 84%, #fff 16%), var(--cellar-ground));
  --bridge-edge: color-mix(in srgb, var(--cellar-ground) 91%, #000 9%);
  --bridge-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 1px 2px rgba(60, 40, 20, .06),
    0 10px 28px -14px rgba(60, 40, 20, .3);
  --bridge-tile: color-mix(in srgb, var(--accent) 9%, var(--lift));
  --bridge-ring: color-mix(in srgb, var(--accent) 20%, transparent);
}
[data-theme="dark"] {
  --bridge-ground: linear-gradient(135deg,
    color-mix(in srgb, var(--cellar-ground) 82%, #fff 6%), var(--cellar-ground));
  --bridge-edge: var(--chrome-line);
  --bridge-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 28px -14px rgba(0, 0, 0, .7);
  --bridge-tile: var(--accent-soft);
  --bridge-ring: var(--accent-line);
}

/* A smaller picture, so the lists and the Cellar's band both sit
   above the fold at 1280 × 800. */
.lw-fan { margin: -8px 0 18px; padding-top: 6px; }
.lwf { width: 104px; height: 132px; padding: 10px 9px; gap: 6px; }
.lwf:nth-child(2) { transform: translateY(-12px); }

/* v0.80: one quiet line, not a card. A hairline above, the grid
   glyph, one sentence and an outlined door. */
.lw-cellar {
  display: flex; align-items: center; gap: 12px;
  margin-top: 26px; padding: 16px 2px 0;
  border-top: 1px solid var(--chrome-line);
}
.lwc-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.lwc-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.lwc-t { font-family: var(--font-ui); font-size: 16px; color: var(--ink-soft); min-width: 0; }
.lwc-go {
  margin-left: auto; flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 4px 13px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px; cursor: pointer;
  background: var(--lift); color: var(--accent-ink);
  font-family: var(--font-ui); font-size: 14px;
}
.lwc-go span { transition: transform .18s ease; }
.lwc-go:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.lwc-go:hover span { transform: translateX(2px); }
.lwc-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) {
  .lw-cellar { flex-wrap: wrap; row-gap: 10px; }
  .lwc-t { flex: 1 1 calc(100% - 42px); font-size: 15px; }
  .lwc-go { margin-left: 42px; }
}

/* ---------------- the way back names the list ----------------
   On paper white with a hairline and a soft shadow: in the Cellar and
   the Wine Library, the list is the thing on paper. */
.sheet-door { display: inline-flex; align-items: center; gap: 7px; max-width: 280px; }
body.no-sheet .sheet-door { display: none !important; }
.sheet-door .sd-arrow { font-size: 15px; line-height: 1; color: var(--ink-faint); margin-top: -1px; }
.sheet-door .pg-glyph { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--accent-ink); stroke-width: 1.3; }
.sheet-door .sd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════ THE KINDS OF LIST, DRAWN (v0.69) ═══════════ */
.lib-welcome .lw-lead.is-kicker {
  margin: 2px 0 12px;
  font-family: var(--font-ui-2); font-weight: 600;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.lw-ic {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 6px;
  border-radius: 3px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent-ink);
}
.lw-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.lw-ic .lw-ic-front { fill: var(--accent-soft); }
@media (max-width: 620px) {
  .lw-tile { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; row-gap: 2px; padding: 14px; }
  .lw-tile .lw-ic { grid-row: 1 / span 3; margin: 0; }
}

/* ═══════════ THE WELCOME'S TWO DOORS (v0.70) ═══════════ */
.lw-demo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 10px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  background: var(--lift); color: var(--ink-soft);
}
.lw-demo:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.lw-demo-ic { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--accent-ink); }
.lw-demo-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
[data-theme="dark"] .lw-demo { background: transparent; }
.lwc-go-ic { display: inline-grid; place-items: center; width: 15px; height: 15px; font-style: normal; }
.lwc-go-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* ═══════════ SHOWN ON THE CARD (v0.72) ═══════════ */
.lc-fresh {
  font-family: var(--font-ui-2); font-weight: 600; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
  background: var(--accent); color: #fff;
  animation: lc-fresh-in .2s ease-out;
}
@keyframes lc-fresh-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.lib-card.is-fresh { box-shadow: 0 0 0 2px var(--accent-line); transition: box-shadow .3s; }

/* v0.75 — the door back to the list says so. */
.sheet-door .sd-kick { color: var(--ink-faint); white-space: nowrap; }
.sheet-door { max-width: 360px; }
@media (max-width: 760px) { .sheet-door .sd-kick { display: none; } }
body.mobile .sheet-door .sd-kick { display: none; }
.lnf-house-go.is-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 7px; border: 1px solid var(--chrome-line-2); border-radius: 3px;
  background: var(--lift); color: var(--ink-soft); text-decoration: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 13.5px;
}
.lnf-house-go.is-toggle:hover { border-color: var(--accent-line); color: var(--ink); }
.lnf-house-go.is-toggle[data-on="1"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.lnf-house-go .tg-box { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid var(--ink-faint); border-radius: 2px; background: var(--paper, #fff); }
.lnf-house-go[data-on="1"] .tg-box { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.lnf-house-go .tg-box svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.lnf-house-go .tg-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }

/* ═══════════ BACKUP (v0.77) ═══════════ */
.bk-zone {
  grid-column: 1 / -1;
  margin: 22px 0 10px; padding: 18px 20px 16px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  background: var(--lift);
  max-width: 780px;
}
.bk-head { display: flex; gap: 12px; align-items: flex-start; }
.bk-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 3px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.bk-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.bk-head h3 { margin: 0 0 2px; font-family: var(--font-ui-2); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.bk-head p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.bk-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.bk-btn {
  appearance: none; display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 4px 13px 4px 10px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  background: var(--lift); color: var(--ink);
  font-family: var(--font-ui); font-size: 14px; cursor: pointer;
}
.bk-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; color: var(--accent-ink); }
.bk-btn:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.bk-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bk-btn.is-go { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent, #fff); }
.bk-btn.is-go svg { color: currentColor; }
.bk-btn.is-go:hover { filter: brightness(1.08); color: var(--on-accent, #fff); }
.bk-confirm { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: 3px; background: var(--accent-soft); }
.bk-confirm p { margin: 0 0 4px; }
.bk-file { font-size: 14.5px; color: var(--ink); }
.bk-what { font-family: var(--font-ui-2); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.bk-rule { font-size: 13.5px; color: var(--ink-soft); }
.bk-confirm .bk-acts { margin-top: 10px; }
.bk-msg { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 14px; }
.bk-msg svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.bk-msg.is-ok { color: var(--accent-ink); }
.bk-msg.is-err { color: var(--accent-ink); font-weight: 600; }
.bk-last { margin: 10px 0 0; font-size: 13px; color: var(--ink-faint); }
@media (max-width: 620px) {
  .bk-zone { margin-top: 32px; padding: 14px; }
  .bk-acts { display: grid; grid-template-columns: 1fr; }
  .bk-btn { justify-content: center; min-height: 42px; }
}

/* ═══════════ SETTINGS (v0.79) ═══════════ */
.is-moved { display: none !important; }
.st-gear svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.15; }
.sb-icon.st-gear svg { width: 14px; height: 14px; }
.st-gear.is-on { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }

.lw-restore {
  display: flex; align-items: center; gap: 6px; margin: 12px auto 0;
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-faint);
}
.lw-restore svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lw-restore span { border-bottom: 1px solid var(--chrome-line-2); }
.lw-restore:hover { color: var(--accent-ink); }
.lw-restore:hover span { border-bottom-color: var(--accent-line); }

.st-layer { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; }
.st-layer[hidden] { display: none; }
.st-scrim { position: absolute; inset: 0; background: rgba(20, 16, 14, .38); animation: stFade .14s ease-out; }
.st-panel {
  position: relative; width: min(600px, calc(100vw - 32px)); max-height: min(780px, calc(100vh - 48px));
  display: flex; flex-direction: column;
  background: var(--chrome); color: var(--ink);
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  box-shadow: 0 18px 50px rgba(20, 16, 14, .28);
  animation: stRise .16s ease-out;
}
@keyframes stFade { from { opacity: 0; } }
@keyframes stRise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .st-scrim, .st-panel { animation: none; } }
.st-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--chrome-line); }
.st-mark svg { width: 18px; height: 18px; display: block; fill: none; stroke: var(--accent-ink); stroke-width: 1.15; }
.st-head h2 { margin: 0; flex: 1; font-family: var(--font-ui); font-size: 20px; font-weight: 400; color: var(--accent-ink); }
.st-close {
  display: inline-flex; align-items: center; gap: 2px; padding: 5px 7px;
  background: none; border: 1px solid transparent; border-radius: 3px; color: var(--ink-soft); cursor: pointer;
}
.st-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.st-close:hover { border-color: var(--chrome-line-2); background: var(--lift); color: var(--accent-ink); }
.st-close:focus-visible, .st-opt:focus-visible, .st-btn:focus-visible, .st-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.st-scroll { overflow-y: auto; padding: 4px 20px 20px; overscroll-behavior: contain; }
.st-sec { padding: 20px 0 20px; border-bottom: 1px solid var(--chrome-line); transition: background-color .4s; }
.st-sec:last-child { border-bottom: 0; }
.st-sec.is-lit { background: var(--accent-soft); box-shadow: 0 0 0 12px var(--accent-soft); }
.st-sec h3 { margin: 0 0 12px; font-family: var(--font-ui-2); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.st-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.st-k { font-size: 16px; color: var(--ink); }
.st-note { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-faint); }
.st-seg { display: inline-flex; border: 1px solid var(--chrome-line-2); border-radius: 3px; overflow: hidden; background: var(--lift); }
.st-opt {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 13px;
  border: 0; border-left: 1px solid var(--chrome-line-2); background: transparent;
  font-family: var(--font-ui); font-size: 14.5px; color: var(--ink-soft); cursor: pointer;
}
.st-opt:first-child { border-left: 0; }
.st-opt svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.st-opt:hover { color: var(--accent-ink); background: var(--accent-soft); }
.st-opt.is-on { background: var(--accent-ink); color: var(--on-accent, #fff); }
.st-device { display: flex; gap: 12px; align-items: flex-start; }
.st-dev-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 3px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.st-dev-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.st-dev-what { margin: 0; font-family: var(--font-ui-2); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.st-dev-size { margin: 3px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.st-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.st-btn, .st-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 13px 4px 10px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px; background: var(--lift);
  font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); cursor: pointer; text-decoration: none;
}
.st-btn svg, .st-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; color: var(--accent-ink); }
.st-btn:hover, .st-link:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.st-btn.is-quiet { margin-top: 14px; }
.st-btn.is-danger { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent, #fff); }
.st-btn.is-danger svg { color: currentColor; }
.st-warn { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: 3px; background: var(--accent-soft); }
.st-warn p { margin: 0 0 4px; font-size: 14.5px; }
.st-ver { margin: 0; font-size: 15px; color: var(--ink-soft); }
.bk-zone.is-bare { margin: 0; padding: 0; border: 0; background: none; max-width: none; grid-column: auto; }
html.st-open, html.st-open body { overflow: hidden; }
html.ts-erasing body { opacity: .4; pointer-events: none; }

@media (max-width: 620px) {
  .st-layer { place-items: end stretch; }
  .st-panel { width: 100%; max-height: 92vh; border-radius: var(--r-sheet) var(--r-sheet) 0 0; border-bottom: 0; }
  .st-line { flex-direction: column; align-items: stretch; gap: 6px; }
  .st-seg { display: grid; grid-template-columns: 1fr 1fr; }
  .st-opt { justify-content: center; min-height: 42px; }
  .st-row { display: grid; grid-template-columns: 1fr; }
  .st-btn, .st-link { justify-content: center; min-height: 42px; }
  .st-scroll { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
.bk-zone.is-bare .bk-head h3 { display: none; }
.bk-zone.is-bare .bk-head p { margin-top: 7px; }

/* ═══════════ THE ROOMS' PICTURES (v0.81, refined v0.82) ═══════════
   The fan's palette only: paper, the grey of its rules, and the red.
   The Cellar is a rack in hairline with a few ends marked red; the
   Wine Library is three labels fanned like the lists, the middle one
   an old Barbaresco label with the village engraved. Decorative, and
   only on each room's first page. */
.hd-wrap { display: flex; justify-content: center; margin: 14px 0 26px; pointer-events: none; }
.hd-art { width: 360px; height: 176px; max-width: 100%; display: block; overflow: visible; }
.ha-hair { fill: none; stroke: #b9b0a2; stroke-width: 1; }
.ha-hair.is-faint { stroke: #d6cfc3; }
.ha-hair.is-dash { stroke-dasharray: 2 3; }
.ha-dot { fill: var(--accent-paper); }
.ha-paper { fill: var(--paper); stroke: var(--thumb-edge); stroke-width: 1; }
.hd-labels { filter: drop-shadow(0 10px 12px rgba(50, 38, 28, .16)); }
.ha-red-hair { fill: none; stroke: var(--accent-paper); stroke-width: .9; opacity: .75; }
.ha-red-hair.is-faint { opacity: .4; stroke-width: .6; }
.ha-engrave { fill: none; stroke: var(--accent-paper); stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; }
.ha-cap { font-family: var(--font-ui); font-size: 15px; letter-spacing: .2em; fill: var(--accent-paper); }
.ha-small { font-family: var(--font-ui-2); font-size: 5.2px; letter-spacing: .16em; fill: #8f877b; }
.ha-year { font-family: var(--font-ui); font-size: 8.5px; letter-spacing: 0; font-variant-ligatures: none; text-rendering: geometricPrecision; fill: #8f877b; }
/* In the dark the rack's hairlines lift to the dark ink; the labels
   stay paper, as the sheets do. */
[data-theme="dark"] .hd-rack .ha-hair { stroke: #6f665c; }
[data-theme="dark"] .hd-rack .ha-hair.is-faint { stroke: #4a433c; }
[data-theme="dark"] .hd-rack .ha-dot { fill: var(--accent); }
[data-theme="dark"] .hd-labels { filter: none; }
#house.is-inside .hd-wrap { display: none; }
#master:has(#mlQ:not(:placeholder-shown)) .hd-wrap { display: none; }
@media (max-width: 720px) {
  .hd-wrap { margin: 10px 0 20px; }
  .hd-art { width: 320px; height: 156px; }
}

/* v0.89: the wordmark is back beside the chalice on the phone. The
   navigation now sits on its own row under the brand, so the 60px it
   once needed are free; the tagline stays off. */
@media (max-width: 760px) {
  .lib-brand b { display: inline; font-size: 19px; letter-spacing: .01em; }
  .lib-brand { gap: 8px; }
}

/* v0.94: New list sits in the room, under the status line, in the
   accent fill it had in the bar. */
.lib-tools { display: flex; gap: 8px; margin: 14px 0 0; }
#libNewBtn {
  margin: 0; flex: none; white-space: nowrap; cursor: pointer;
  font-family: var(--font-ui); font-size: 15px; font-weight: 500;
  padding: 9px 16px; border-radius: 3px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent, #fff);
  transition: background .14s, transform .14s;
}
#libNewBtn:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }
#libNewBtn:active { transform: translateY(1px); }
#libNewBtn:focus-visible { outline: 2px solid var(--on-accent, #fff); outline-offset: -3px; }
@media (max-width: 760px) {
  .lib-tools { margin-top: 12px; }
  #libNewBtn { flex: 1 1 auto; justify-content: center; padding: 10px 14px; }
}

/* v0.97: the amber note, readable on the dark ground too. */
[data-theme="dark"] .lib-status.is-warn { color: #d8a650; }
.lib-warn { color: #8a5a10; }
[data-theme="dark"] .lib-warn { color: #d8a650; }

/* ═══════════ LISTS UNDER THEIR ESTABLISHMENT (v0.108) ═══════════
   The shelf, arranged by place: a heading per establishment with its
   own Inventory button, its lists, and a card to start the next one. */
.lib-stack > .lib-est-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lib-est-head .leh-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lib-est-head h3 { font-size: clamp(24px, 3.2vw, 32px); min-width: 0; overflow-wrap: anywhere; }
.lib-est-head.is-loose h3 { color: var(--ink-soft); font-size: clamp(20px, 2.6vw, 26px); }
.leh-inv {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px 12px 4px 9px;
  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; cursor: pointer;
}
.leh-inv svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-ink); stroke-width: 1.3; }
.leh-inv:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.leh-inv:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lib-newhere {
  appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 12px 16px;
  border: 1px dashed var(--chrome-line-2); border-radius: var(--r);
  background: transparent; color: var(--ink-soft);
  font-family: var(--font-ui); font-size: 15px; text-align: left; cursor: pointer;
}
.lib-newhere:hover { border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-soft); }
.lib-newhere:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lnh-plus { color: var(--accent-ink); font-size: 20px; line-height: 1; }
.lc-menu button.is-cur { color: var(--accent-ink); }
.lc-menu button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; flex: none; }

/* ═══════════ THE ESTABLISHMENT, CHOSEN (v0.110) ═══════════ */
.lnf-estfield .lnf-lab {
  display: block; margin-bottom: 8px;
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft);
}
.lnf-est { display: flex; flex-wrap: wrap; gap: 8px; }
.lnf-est-o {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 6px 13px 6px 10px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px;
  background: var(--lift); color: var(--ink);
  font-family: var(--font-ui); font-size: 15px; cursor: pointer;
}
.lnf-est-o svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-ink); stroke-width: 1.3; flex: none; }
.lnf-est-plus { color: var(--accent-ink); font-size: 18px; line-height: 1; width: 16px; text-align: center; }
.lnf-est-o:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.lnf-est-o:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lnf-est-o.is-sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.lnf-estfield input { margin-top: 10px; }
.lnf-est-note { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-faint); }

/* ═══════════ THE DESK SAYS WHERE THE MARK GOES (v0.111) ═══════════
   The rooms carry My Lists as a word; the desk carried it as a glass
   and a chevron. Where the row has room, the word rides beside them. */
.brand-to { display: none; font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); margin-left: 2px; white-space: nowrap; }
#btnLibrary:hover .brand-to { color: var(--accent-ink); }
@media (min-width: 1260px) {
  .brand-to { display: inline; }
  #toolbar .brand-name { display: none; }
}

/* ═══════════ v0.171: the account ═══════════
   "Changed on another device", on the card and on the shelf's status
   line, with its two answers as buttons. Same small type and the same
   red-tinted button the status bar's Undo uses: a choice to make, not
   an alarm. */
.cl-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lc-cloud { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--chrome-line); }
.cl-said { font-family: var(--font-ui-2); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-ink); margin-right: 2px; }
.cl-act {
  padding: 1px 9px; border: 1px solid var(--accent-line); border-radius: 3px;
  background: var(--accent-soft); color: var(--accent-ink);
  font: inherit; font-size: 12px; line-height: 1.5; cursor: pointer;
}
.cl-act.cl-mine { background: transparent; }
.cl-act:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.cl-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lib-cloud-house { margin-top: 6px; }
.lc-cloud .cl-said { flex-basis: 100%; margin-bottom: 1px; }

/* ═══════════ v0.172: Account, at the top of Settings ═══════════
   Forms in the panel's own type: Jost labels over Garamond fields, a
   hairline box, 3px corners. One filled red button per step, the
   thing to do; everything else is the panel's ordinary button. What
   went wrong sits under the fields in the red ink, in place. */
.ac-zone { display: block; }
.st-btn.is-primary { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent, #fff); }
.st-btn.is-primary svg { color: currentColor; }
.st-btn.is-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.st-btn[disabled] { opacity: .6; cursor: progress; }
.ac-zone .st-row .st-btn.is-quiet { margin-top: 0; border-color: transparent; background: none; }
.ac-zone .st-row .st-btn.is-quiet:hover { border-color: var(--chrome-line-2); background: var(--lift); }
.ac-form { display: grid; gap: 12px; }
.ac-form > .st-note:first-child { margin-top: 0; }
.ac-f { display: grid; gap: 5px; }
.ac-k { font-family: var(--font-ui-2); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ac-in { position: relative; display: block; }
.ac-in input {
  box-sizing: border-box; width: 100%; min-height: 38px; padding: 6px 10px;
  border: 1px solid var(--chrome-line-2); border-radius: 3px; background: var(--lift);
  font-family: var(--font-ui); font-size: 16px; color: var(--ink);
}
.ac-in input[type=password], .ac-in input[name=password] { padding-right: 40px; }
.ac-in input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent-line); }
.ac-show {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 3px; background: none; color: var(--ink-faint); cursor: pointer;
}
.ac-show svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.ac-show[aria-pressed=true], .ac-show:hover { color: var(--accent-ink); }
.ac-show:focus-visible { outline: 2px solid var(--accent); }
.ac-hint { font-size: 13px; color: var(--ink-faint); line-height: 1.4; }
.ac-err { margin: 0; font-size: 14px; line-height: 1.45; color: var(--accent-ink); }
.ac-err:focus { outline: none; }
.ac-zone > .ac-err { margin-bottom: 12px; }
.ac-ok { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.ac-link {
  justify-self: start; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 14px; color: var(--accent-ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.ac-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ac-stack { display: grid; gap: 8px; margin-top: 12px; justify-items: start; }
.ac-stack .st-btn.is-quiet { margin-top: 0; border-color: transparent; background: none; }
.ac-q { margin-top: 16px; }
@media (max-width: 620px) {
  .ac-stack { justify-items: stretch; }
  .ac-stack .st-btn { justify-content: center; min-height: 42px; }
  .ac-in input { min-height: 44px; }
}

/* v0.174: the Terms box on Create an account and Join the beta. */
.ac-terms { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.ac-terms input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.ac-terms a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.ac-terms input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* v0.175: Turnstile's slot; empty and collapsed unless Cloudflare asks for a click. */
.ac-check:empty { display: none; }
.ac-check { margin: 4px 0 2px; min-height: 0; }