/* =========================================================================
   DECANT — Web app structural layer (desktop / responsive).
   Builds on app/tokens.css (themes, wine palette, TAP gradient motif).
   Layout uses container queries so it genuinely reflows to the window width.
   ========================================================================= */

.dcweb {
  font-family: var(--font-sans);
  color: var(--txt-1);
  background: var(--page);
  height: 100%;
  display: flex;
  -webkit-font-smoothing: antialiased;
}
.dcweb *, .dcweb *::before, .dcweb *::after { box-sizing: border-box; }
.dcweb.topnav { flex-direction: column; }

/* thin, themed scrollbars inside the app */
.dcweb .scroll { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.dcweb .scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.dcweb .scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid var(--page); }
.dcweb .scroll::-webkit-scrollbar-track { background: transparent; }

/* ── shared primitives ─────────────────────────────────────────────────── */
.dcweb .eyebrow { font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--txt-3); margin:0; }
.dcweb .gbar { height:3px; width:30px; border-radius:999px; background:var(--tap-gradient-bar); flex-shrink:0; }
.dcweb .num { font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; }

.dcweb .card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-1);
}
.dcweb .card.hoverable { transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); cursor:pointer; }
.dcweb .card.hoverable:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); }

.dcweb .chip {
  display:inline-flex; align-items:center; gap:6px;
  background: var(--chip); color: var(--txt-2);
  font-size:12px; font-weight:500; line-height:1;
  padding:6px 11px; border-radius:999px; white-space:nowrap;
}

.dcweb .btn {
  appearance:none; border:none; cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:600; border-radius:999px;
  padding:10px 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.dcweb .btn-primary { background: var(--accent); color: var(--on-accent); }
.dcweb .btn-primary:hover { background: var(--accent-press); }
.dcweb .btn-primary:active { transform: translateY(1px); }
.dcweb .btn-ghost { background: transparent; color: var(--txt-1); border:1px solid var(--line-strong); }
.dcweb .btn-ghost:hover { background: color-mix(in srgb, var(--txt-1) 6%, transparent); }
.dcweb .btn-sm { padding:8px 14px; font-size:13px; }

/* ── sidebar nav ───────────────────────────────────────────────────────── */
.dcweb .sidebar {
  width: 252px; flex-shrink:0; height:100%; min-height:0; overflow-y:auto;
  background: var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:22px 16px 16px;
}
.dcweb .navitem {
  all:unset; cursor:pointer; display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:10px; color:var(--txt-2);
  font-size:14px; font-weight:600; line-height:1;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.dcweb .navitem:hover { background: var(--chip); color: var(--txt-1); }
.dcweb .navitem.active { background: var(--accent-soft); color: var(--accent); }
.dcweb .navitem svg { width:19px; height:19px; flex-shrink:0; }

/* ── top nav ───────────────────────────────────────────────────────────── */
.dcweb .topbar-nav {
  flex-shrink:0; height:66px; display:flex; align-items:center; gap:26px;
  padding:0 28px; background: var(--surface); border-bottom:1px solid var(--line); z-index:5;
}
.dcweb .toplink {
  all:unset; cursor:pointer; font-size:14px; font-weight:600; color:var(--txt-2);
  padding:6px 2px; border-bottom:2px solid transparent; transition:color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.dcweb .toplink:hover { color:var(--txt-1); }
.dcweb .toplink.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── main column ───────────────────────────────────────────────────────── */
.dcweb .main { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; height:100%; }
.dcweb .appbar {
  flex-shrink:0; min-height:64px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 28px; border-bottom:1px solid var(--line); background:var(--page);
}
/* Shaded canvas field: deepen the page tone behind the cards so each card
   reads as a distinct, raised area of information rather than blending in. */
.dcweb .content { flex:1; overflow-y:auto; container-type: inline-size; background: color-mix(in srgb, var(--page) 86%, var(--line-strong)); }
.dcweb .content-pad { padding: 26px 28px 64px; max-width: 1240px; margin:0 auto; }

/* ── search field ──────────────────────────────────────────────────────── */
.dcweb .search {
  display:flex; align-items:center; gap:9px; height:38px; padding:0 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  color:var(--txt-3); min-width:200px; transition:border-color var(--dur-1) var(--ease-out);
}
.dcweb .search:focus-within { border-color:var(--accent); }
.dcweb .search input { all:unset; flex:1; font-size:13.5px; color:var(--txt-1); }
.dcweb .search input::placeholder { color:var(--txt-3); }

/* ── stat / KPI ────────────────────────────────────────────────────────── */
.dcweb .kpi-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
/* KPI tile: label / value / sub stacked and centred. Rendered as a <button>
   when it navigates, so the whole tile is the click target (and keyboard
   reachable) rather than just the text inside it. */
.dcweb .kpi { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.dcweb button.kpi { font:inherit; color:inherit; width:100%; margin:0; -webkit-appearance:none; appearance:none; }
.dcweb button.kpi:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Whole-card click target (Overview). The keyboard path is the .card-more
   button in the head, so the surface itself takes no tabindex/role — that
   would announce a control wrapping the card's own buttons. */
.dcweb .card-link { cursor:pointer; }
.dcweb .card-link:focus-within { border-color:var(--accent); }
.dcweb .card-more {
  background:transparent; border:0; padding:2px 0; margin:0;
  font:inherit; font-size:12px; font-weight:600; color:var(--txt-3);
  display:inline-flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap;
  transition: color var(--dur-1) var(--ease-out);
}
.dcweb .card-more:hover, .dcweb .card-link:hover .card-more { color:var(--accent); }
.dcweb .card-more:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
/* A chip that navigates. Only font-family needs inheriting — .chip already
   sets its own size/weight, and `font:inherit` would clobber those. */
.dcweb button.chip { font-family:inherit; border:0; cursor:pointer; }
.dcweb button.chip:hover { box-shadow: inset 0 0 0 1px currentColor; }
.dcweb button.chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@container (max-width: 720px) { .dcweb .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.dcweb .two-col { display:grid; grid-template-columns: 1.15fr 0.85fr; gap:16px; align-items:start; }
@container (max-width: 880px) { .dcweb .two-col { grid-template-columns: 1fr; } }
.dcweb .three-col { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; align-items:start; }
@container (max-width: 900px) { .dcweb .three-col { grid-template-columns: 1fr; } }
/* Friends page: narrow list rail + wide overview pane */
.dcweb .friends-cols { display:grid; grid-template-columns: minmax(280px, 340px) 1fr; gap:18px; align-items:start; }
@container (max-width: 880px) { .dcweb .friends-cols { grid-template-columns: 1fr; } }

/* ── inventory table ───────────────────────────────────────────────────── */
.dcweb table.inv { width:100%; border-collapse:collapse; }
.dcweb table.inv th {
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--txt-3); padding:0 14px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
  cursor:pointer; user-select:none;
}
.dcweb table.inv th.right { text-align:right; }
.dcweb table.inv th:hover { color:var(--txt-1); }
.dcweb table.inv td { padding: var(--rowpad, 13px) 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
.dcweb table.inv tbody tr { cursor:pointer; transition: background var(--dur-1) var(--ease-out); }
.dcweb table.inv tbody tr:hover { background: var(--surface-2); }
.dcweb table.inv td.right { text-align:right; }

/* ── bottle card grid ──────────────────────────────────────────────────── */
.dcweb .bottle-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }

/* ── right drawer ──────────────────────────────────────────────────────── */
.dcweb .drawer-scrim {
  position:absolute; inset:0; z-index:40; background:rgba(10,8,6,0.42);
  animation: dcwFade var(--dur-2) var(--ease-out);
}
.dcweb .drawer {
  position:absolute; top:0; right:0; bottom:0; z-index:41; width:404px; max-width:88%;
  background:var(--surface); border-left:1px solid var(--line); box-shadow: var(--shadow-2);
  overflow-y:auto; animation: dcwSlide var(--dur-2) var(--ease-out);
}
@keyframes dcwFade { from { opacity:0; } to { opacity:1; } }
@keyframes dcwSlide { from { transform: translateX(28px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes dcwPop { from { transform: translateY(12px) scale(0.98); opacity:0; } to { transform:none; opacity:1; } }

/* ── modal ─────────────────────────────────────────────────────────────── */
.dcweb .modal-scrim { position:absolute; inset:0; z-index:50; background:rgba(10,8,6,0.5); display:flex; align-items:center; justify-content:center; padding:32px; animation: dcwFade var(--dur-2) var(--ease-out); }
.dcweb .modal { width:520px; max-width:100%; max-height:100%; overflow-y:auto; background:var(--surface); border-radius: var(--radius-4); box-shadow: var(--shadow-2); animation: dcwPop var(--dur-2) var(--ease-out); }

/* form fields */
.dcweb .field { display:flex; flex-direction:column; gap:6px; }
.dcweb .field label { font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--txt-3); }
.dcweb .field input, .dcweb .field select, .dcweb .field textarea {
  all:unset; box-sizing:border-box; width:100%; padding:10px 12px; font-size:14px; font-family:inherit;
  background:var(--page); border:1px solid var(--line); border-radius:8px; color:var(--txt-1);
}
.dcweb .field textarea { line-height:1.5; white-space:pre-wrap; }
.dcweb .field input:focus, .dcweb .field select:focus, .dcweb .field textarea:focus { border-color:var(--accent); }

/* toast */
.dcweb .toast {
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:60;
  background:var(--txt-1); color:var(--surface); font-size:13.5px; font-weight:600;
  padding:12px 20px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,0.3); white-space:nowrap;
  animation: dcwSlide var(--dur-2) var(--ease-out);
}

/* segmented toggle (table/grid view) */
.dcweb .seg { display:inline-flex; background:var(--chip); border-radius:999px; padding:3px; gap:2px; }
.dcweb .seg button {
  all:unset; cursor:pointer; display:flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; color:var(--txt-3); padding:6px 13px; border-radius:999px;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.dcweb .seg button.on { background:var(--surface); color:var(--txt-1); box-shadow:var(--shadow-1); }

/* cellar toolbar pill — shared by the sort control and the bin filter.
   Text uses --txt-1 (near-black in the light themes) rather than the muted
   --txt-3, which sat at too low a contrast on the chip background to read.
   NOT hardcoded #000: --txt-1 flips to a light tone on the dark theme, where
   literal black would be invisible. */
.dcweb .toolpill { display:inline-flex; align-items:center; gap:4px; background:var(--chip); border-radius:999px; padding:3px 4px 3px 12px; }
.dcweb .toolpill-label { font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--txt-1); cursor:pointer; }
.dcweb .toolpill select {
  all:unset; box-sizing:border-box; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:600; color:var(--txt-1); padding:6px 4px;
}
/* The native dropdown popup is drawn by the OS and does not inherit the app
   theme reliably, so its rows get explicit colours of their own. */
.dcweb .toolpill select option { color:#16140F; background:#FFFFFF; }
.dcweb .toolpill select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-radius:6px; }
/* numeric bound inputs (vintage range, rating floor) */
.dcweb .toolpill-num {
  all:unset; box-sizing:border-box; width:50px; text-align:center; cursor:text;
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--txt-1); padding:6px 2px;
}
.dcweb .toolpill-num::placeholder { color:var(--txt-3); font-weight:500; }
.dcweb .toolpill-num::-webkit-outer-spin-button,
.dcweb .toolpill-num::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.dcweb .toolpill-num:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-radius:6px; }
.dcweb .toolpill-sep { color:var(--txt-3); font-size:12px; }
.dcweb .toolpill-dir {
  all:unset; cursor:pointer; display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:999px; background:var(--surface); color:var(--txt-1);
  font-size:13px; font-weight:700; line-height:1; box-shadow:var(--shadow-1);
  transition: color var(--dur-1) var(--ease-out);
}
.dcweb .toolpill-dir:hover { color:var(--accent); }
.dcweb .toolpill-dir:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* filter chip button */
.dcweb .fchip {
  all:unset; cursor:pointer; white-space:nowrap; font-size:12.5px; font-weight:600;
  /* --txt-1, not the muted --txt-2: these are filter controls, and the label
     has to be readable at a glance to be usable. */
  padding:7px 13px; border-radius:999px; color:var(--txt-1); background:var(--chip);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.dcweb .fchip:hover { color:var(--accent); }
.dcweb .fchip.on { background:var(--accent); color:var(--on-accent); }

/* ── auth (login / create account) ─────────────────────────────────────── */
.dcweb .auth { height:100%; display:flex; }
.dcweb .auth-brand {
  width:46%; flex-shrink:0; position:relative; overflow:hidden;
  background: var(--ink-900); color:#fff;
  display:flex; flex-direction:column; padding:48px 44px;
}
@container (max-width: 760px) { .dcweb .auth-brand { display:none; } }
.dcweb .auth-brand .pat {
  position:absolute; right:-120px; bottom:-120px; width:420px; height:auto; pointer-events:none;
  opacity:0.10;
}
.dcweb .auth-form { flex:1; min-width:0; background:var(--surface); display:flex; align-items:center; justify-content:center; padding:40px 28px; }
.dcweb .auth-card { width:100%; max-width:372px; }
.dcweb .auth-card .field { margin-bottom:15px; }
.dcweb .auth-divider { display:flex; align-items:center; gap:14px; margin:22px 0; color:var(--txt-3); font-size:12px; }
.dcweb .auth-divider::before, .dcweb .auth-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.dcweb .sso {
  all:unset; box-sizing:border-box; cursor:pointer; width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:46px; border:1px solid var(--line-strong); border-radius:999px;
  font-size:14px; font-weight:600; color:var(--txt-1);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.dcweb .sso:hover { background: color-mix(in srgb, var(--txt-1) 5%, transparent); border-color:var(--txt-3); }
.dcweb .link { color:var(--accent); font-weight:600; cursor:pointer; text-decoration:none; }
.dcweb .link:hover { text-decoration:underline; }

/* checkbox */
.dcweb .check { display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:13px; color:var(--txt-2); user-select:none; }
.dcweb .check .box { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line-strong); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.dcweb .check.on .box { background:var(--accent); border-color:var(--accent); }

/* ── settings (account management) ─────────────────────────────────────── */
.dcweb .set-layout { display:grid; grid-template-columns: 212px 1fr; gap:28px; align-items:start; }
@container (max-width: 820px) { .dcweb .set-layout { grid-template-columns: 1fr; } }
.dcweb .set-nav { position:sticky; top:0; display:flex; flex-direction:column; gap:2px; }
@container (max-width: 820px) { .dcweb .set-nav { flex-direction:row; flex-wrap:wrap; position:static; } }
.dcweb .set-navitem {
  all:unset; cursor:pointer; display:flex; align-items:center; gap:11px;
  padding:10px 13px; border-radius:10px; color:var(--txt-2);
  font-size:13.5px; font-weight:600; transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.dcweb .set-navitem:hover { background:var(--chip); color:var(--txt-1); }
.dcweb .set-navitem.active { background:var(--accent-soft); color:var(--accent); }
.dcweb .set-navitem svg { width:18px; height:18px; flex-shrink:0; }
.dcweb .setrow { display:flex; align-items:center; gap:16px; padding:17px 0; border-top:1px solid var(--line); }
.dcweb .setrow:first-of-type { border-top:none; }
.dcweb .setrow .rl { flex:1; min-width:0; }
.dcweb .setrow .rt { font-size:14px; font-weight:600; color:var(--txt-1); }
.dcweb .setrow .rd { font-size:12.5px; color:var(--txt-3); margin-top:2px; line-height:1.45; }
.dcweb .setrow .rv { font-size:14px; color:var(--txt-2); font-weight:500; }

/* toggle switch */
.dcweb .switch { all:unset; cursor:pointer; position:relative; width:42px; height:24px; border-radius:999px; flex-shrink:0; background:var(--line-strong); transition:background var(--dur-2) var(--ease-out); }
.dcweb .switch.on { background:var(--accent); }
.dcweb .switch .knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.3); transition:transform var(--dur-2) var(--ease-out); }
.dcweb .switch.on .knob { transform:translateX(18px); }

/* capture-safe chart entrance */
@keyframes dcChartIn { from { opacity:0.4; transform: translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference) { .dcweb .chart-in { animation: dcChartIn 0.5s var(--ease-out) both; } }