/* Native-shell layer for the iOS / Android WebView build.
   Loaded after the guide's own stylesheet, so at equal specificity these rules win. Nothing here
   changes the guide's look or layout: it only removes the browser tells that make a WebView feel
   like a web page. */

/* ---------- 1. no rubber-band, no browser pull-to-refresh ---------- */
html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}
body { overscroll-behavior-y: none; }

/* The containers that scroll inside the page keep their own momentum, and their scroll never
   chains out to the page behind them. */
.wheel-list, .sel-list, .pick-list, .inv-table-wrap, .ask-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ---------- 2. native tap and selection feedback ---------- */
/* Chrome and controls never show a text selection or a long-press callout. */
button, .tabbar, .topbar, .btn, .mode, .chip, .tile, .drink-row, .sel-btn, .sel-opt, .theme-opt, summary {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* The guide's own prose stays selectable, so recipes and lessons can still be copied. */
.lede, .item .body, .legal, .legal p, .drink-note, .cust-note, .info-list dd, .info-list dt {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* Fields keep their own selection and callout behaviour. */
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* ---------- 3. custom pickers: a button over a hidden <select> ---------- */
/* The real select stays in the DOM so the guide's change handlers and form posts keep working;
   it is simply never tappable, so the OS dropdown never opens. */
.sel-field { position: relative; display: block; }
.sel-src {
  position: absolute !important; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0;
  border: 0; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0);
}
.sel-btn {
  width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 99px;
  padding: 11px 16px; font: inherit; font-weight: 400; text-align: left; cursor: pointer;
  transition: border-color .2s, transform .12s;
}
.sel-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-btn svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.sel-btn:active { transform: translateY(1px); }
.inv-form .sel-btn { color: var(--fg); font-weight: 400; }
body.sel-open { overflow: hidden; }

.sel-sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.sel-scrim { position: absolute; inset: 0; background: rgba(10, 14, 12, .5); opacity: 0; transition: opacity .22s ease; }
.sel-sheet.is-open .sel-scrim { opacity: 1; }
.sel-panel {
  position: relative; width: 100%; max-width: 720px; max-height: 78vh; display: flex; flex-direction: column;
  background: var(--surface); color: var(--fg); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-lift);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%); transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}
.sel-sheet.is-open .sel-panel { transform: none; }
.sel-grab { width: 40px; height: 4px; border-radius: 99px; background: var(--line); margin: 10px auto 0; flex: none; }
.sel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px 4px; }
.sel-head .h-sec { margin: 0; }
.sel-head .btn { min-height: 38px; padding: 6px 14px; }
.sel-list { overflow-y: auto; padding: 6px 10px 14px; display: grid; gap: 4px; }
.sel-opt {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: 0; border-radius: 12px; padding: 13px 14px; font: inherit; text-align: left;
  color: var(--fg); cursor: pointer;
}
.sel-opt svg { width: 20px; height: 20px; flex: none; color: var(--bottle); }
.sel-opt.is-on { background: var(--surface-2); font-weight: 700; }
.sel-opt:active { background: var(--surface-2); }

/* ---------- 4. pull-to-refresh indicator ---------- */
@keyframes ptr-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .sel-panel, .sel-scrim { transition: none; }
}