/* ============================================================
   THE TWO EASY ACTIONS (v0.66) — see js/actions.js
   One size, one shape, one type for both. They differ only by what
   they point at: the list is paper, the Cellar is cellar ground, the
   same two grounds the rest of the app gives those places.
   ============================================================ */
.act {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 11px 0 9px;
  border-radius: 3px;
  font-family: var(--font-ui); font-size: 13.5px; line-height: 1;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.act .act-glyph {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round;
}
.act-list {
  border: 1px solid var(--accent-line);
  background: var(--paper, #fff);
  color: var(--accent-ink);
}
.act-list:hover { border-color: var(--accent); background: var(--accent-soft); }
.act-cellar {
  border: 1px solid var(--chrome-line-2);
  background: var(--lift);
  color: var(--ink);
}
.act-cellar:hover { border-color: var(--ink-faint); }
.act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Done: the same button, quieter, saying where the wine is. */
.act.is-on {
  background: transparent;
  border-color: transparent;
  color: var(--ink-faint);
}
.act-list.is-on { color: var(--accent-ink); }
.act-list.is-on:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.act-cellar.is-on { cursor: default; }
.act-cellar.is-on:hover { border-color: transparent; }
.act.is-flash {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink);
}

/* No list open: there is nowhere for "Add to the list" to go, so it
   is not offered. The tile on the Wine Library says why. */
body.no-sheet .act-list { display: none !important; }

[data-theme="dark"] .act-list { background: var(--lift); }

/* ═══════════ GLYPHS IN MENUS (v0.71) ═══════════
   Every menu item leads with the drawing of its verb, in the accent,
   the same drawing the matching button uses. */
.mi-ic {
  flex: none; display: inline-grid; place-items: center;
  width: 16px; height: 16px; color: var(--accent-ink);
}
.mi-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.hs-menu button, .lc-menu button { display: flex; align-items: center; gap: 9px; }
.menu-item.has-ic { align-items: flex-start; gap: 10px; }
.menu-item.has-ic .mi-ic { margin-top: 2px; }
.menu-item.has-ic:hover .mi-ic { color: var(--on-accent, #fff); }
.lc-menu .danger.armed .mi-ic { color: var(--on-accent, #fff); }

/* The Wine Library's examples, as buttons that run themselves. */
.ml-try-k { margin: 0 0 8px; }
.ml-try { display: flex; flex-wrap: wrap; gap: 6px; }
.ml-try-b {
  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); cursor: pointer;
  font-family: var(--font-ui); font-size: 14px;
}
.ml-try-b:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.ml-try-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ml-try-ic { display: inline-grid; place-items: center; width: 14px; height: 14px; color: var(--accent-ink); }
.ml-try-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
[data-theme="dark"] .ml-try-b { background: transparent; }
.ml-empty .ml-try { margin-top: 10px; }
.ml-try-b.is-cellar { background: var(--cellar-ground); }
.ml-try-b.is-cellar .ml-try-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
/* v0.73 drawn choices: paper, margin, orientation, line and gap. */
.mi-ic.is-draw svg { width: 16px; height: 16px; stroke-width: 1.1; }
.mi-ic.is-draw .mi-fill { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: .8; stroke-dasharray: 1.2 1; }
.mi-ic.is-draw .mi-strong { stroke-width: 2; }
.menu-item.sel .mi-ic.is-draw, .menu-item[aria-checked="true"] .mi-ic.is-draw { color: var(--accent-ink); }
.menu-item.has-ic:hover .mi-ic.is-draw .mi-fill { fill: rgba(255,255,255,.18); stroke: currentColor; }

/* v0.87: "In Inventory ›" is a way to the wine, so it is a button again. */
.act-cellar.is-on.is-go { cursor: pointer; }
.act-cellar.is-on.is-go:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.act-go { margin-left: 3px; font-size: 15px; line-height: 1; color: var(--ink-faint); }
.act-cellar.is-go:hover .act-go { color: var(--accent-ink); }

/* v0.95: a wine already in Inventory shows the same quiet red button
   as one just added, not grey text that reads as switched off; on a
   phone there is no hover to reveal that it can be pressed. */
.act-cellar.is-on.is-go {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink);
}
.act-cellar.is-on.is-go .act-go { color: var(--accent-ink); }
.act-cellar.is-on.is-go:hover { border-color: var(--accent); }