@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,400;0,500;1,6..72,400&family=Inter:wght@400;500;600&display=swap');

:root {
  --ink:   #1B1D22;
  --stone: #E9EAE5;
  --paper: #F5F6F2;
  --lees:  #6E2438;
  --brass: #9A8247;
  --slate: #5A6068;
  --sage:  #7C8B72;
  --rule:  rgba(27,29,34,.14);
  --ui: 'Inter', system-ui, sans-serif;
  --serif: 'Newsreader', Georgia, serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--ui); color: var(--ink);
  background: var(--paper); font-size: 15px; line-height: 1.5;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; margin: 0 0 .4em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.3rem; }
a { color: var(--lees); }

/* ---------------------------------------------------- back-office shell */
.shell { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }
.rail {
  background: var(--ink); color: var(--stone); padding: 26px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.rail .brand { font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; margin-bottom: 24px; }
.rail .brand small { display: block; font-family: var(--ui); font-size: .72rem;
  color: var(--brass); letter-spacing: .04em; margin-top: 4px; }
.rail button {
  background: none; border: 0; color: var(--stone); font: inherit; text-align: left;
  padding: 9px 11px; border-radius: 5px; cursor: pointer; opacity: .68;
}
.rail button:hover { opacity: 1; background: rgba(255,255,255,.07); }
.rail button[aria-current="true"] { opacity: 1; background: var(--lees); }
.rail .foot { margin-top: auto; font-size: .76rem; color: var(--slate); }
.rail input, .rail select {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: var(--stone); border-radius: 5px; padding: 7px 9px; width: 100%;
  font: inherit; font-size: .82rem; margin-top: 6px;
}
/* The native dropdown inherits the rail's dark background, but its options do
   not: browsers paint those with the system colors. */
.rail select option { color: var(--ink); background: var(--stone); }
.rail .foot-label { display: block; margin-top: 12px; }
.scene { padding: 32px 38px 64px; max-width: 1080px; }
.header-row { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; border-bottom: 1px solid var(--rule); padding-bottom: 14px; margin-bottom: 24px; }
.header-row p { margin: 0; color: var(--slate); font-size: .88rem; }

/* --------------------------------------------------------------- elements */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-weight: 500; color: var(--slate); font-size: .78rem;
  padding: 0 10px 8px; border-bottom: 1px solid var(--rule); }
td { padding: 11px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
tr.tight td { background: rgba(110,36,56,.05); }
.wine-name { font-family: var(--serif); font-size: 1.02rem; }
.wine-meta { color: var(--slate); font-size: .78rem; }

/* Color classes keep the stored French values: they come straight from the
   database column, so renaming them would break the binding. */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.rouge { background: #6E2438; } .blanc { background: #D8C98A; }
.rose { background: #D79AA0; } .effervescent { background: #B9C3AE; } .doux { background: #A9743C; }

button.action {
  font: inherit; font-size: .84rem; padding: 7px 13px; border-radius: 5px;
  border: 1px solid var(--rule); background: #fff; cursor: pointer;
}
button.action:hover { border-color: var(--ink); }
button.primary { background: var(--lees); color: #fff; border-color: var(--lees); }
button.primary:hover { background: #561B2C; }
button.step { width: 27px; height: 27px; padding: 0; font-size: .95rem; line-height: 1; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.stock { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 26px;
  display: inline-block; text-align: center; }
.stock.low { color: var(--lees); }

.note { background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--brass);
  padding: 14px 16px; border-radius: 4px; margin-bottom: 20px; font-size: .88rem; }
.empty { color: var(--slate); padding: 30px 0; font-size: .92rem; }

/* Identifies which model answered, in provider-comparison mode. */
.stamp { margin-top: 14px; padding-top: 10px; border-top: 1px dotted var(--rule);
  color: var(--slate); font-size: .72rem; letter-spacing: .03em; }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card { background: #fff; border: 1px solid var(--rule); border-radius: 5px; padding: 15px 16px; }
.card .figure { font-family: var(--serif); font-size: 2rem; line-height: 1; }
.card .label { color: var(--slate); font-size: .8rem; margin-top: 5px; }

/* ------------------------------------------------------ guest wine list */
.winelist { max-width: 620px; margin: 0 auto; padding: 30px 20px 140px; }
.winelist header { text-align: center; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.winelist header h1 { font-size: 2.1rem; margin-bottom: 2px; }
.winelist header p { color: var(--slate); font-size: .85rem; margin: 0; }
.family { margin-top: 30px; }
.family h2 { font-style: italic; color: var(--lees); font-size: 1.08rem;
  border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.wine-row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0;
  border-bottom: 1px dotted var(--rule); }
.wine-row .price { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.wine-row .price small { display: block; color: var(--slate); font-size: .74rem; }

/* The bar is no longer pinned to the viewport: on mobile, an element at
   position:fixed;bottom:0 ends up under the browser toolbar. The page becomes a
   column of dynamic height (dvh follows the browser bars opening and closing),
   the list scrolls, and the bar stays the last block. */
body.page-winelist {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
}
body.page-winelist .winelist { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 34px; }
body.page-winelist .bar { flex: none; }

.bar {
  background: var(--ink);
  padding: 13px 16px; display: flex; gap: 9px; align-items: center;
  /* iOS notch / gesture bar: viewport-fit=cover uncovers the bottom area. */
  padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px));
}
.bar input { flex: 1; padding: 11px 13px; border-radius: 22px; border: 0; font: inherit; }
.bar button { background: var(--lees); color: #fff; border: 0; border-radius: 22px;
  padding: 11px 19px; font: inherit; cursor: pointer; }
.exchange { margin-top: 26px; }
.guest-bubble { background: var(--stone); padding: 11px 15px; border-radius: 14px 14px 3px 14px;
  margin: 12px 0 12px auto; max-width: 78%; width: fit-content; }
.advice { background: #fff; border: 1px solid var(--rule); border-radius: 5px;
  padding: 16px 18px; margin: 12px 0; }
.advice .intro { font-family: var(--serif); font-style: italic; color: var(--slate);
  margin-bottom: 12px; }
.advice .pick { padding: 12px 0; border-top: 1px solid var(--rule); }
.advice .pick:first-of-type { border-top: 0; padding-top: 0; }

@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .rail { flex-direction: row; flex-wrap: wrap; padding: 14px; }
  .rail .brand, .rail .foot { width: 100%; margin: 0 0 8px; }
  .scene { padding: 20px 16px 60px; }
  table, thead, tbody, tr, td, th { display: block; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--rule); padding: 10px 0; }
  td { border: 0; padding: 3px 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }