/* taster.css — shared by index.html and menu.html.
   Both pages used to carry byte-identical copies of these rules. The Turnstile
   widget was once added to one page and not the other; keeping one copy is how
   that stops happening. Edit here, never in the pages. */

  .toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(70px); background: var(--ink); color: var(--white); padding: .8rem 1.6rem; border-radius: 999px; font-size: .85rem; font-weight: 500; z-index: 9999; transition: transform .3s; pointer-events: none; font-family: var(--sans); box-shadow: var(--shadow-md); }
  .toast.show { transform: translateX(-50%) translateY(0); }

  /* ── TASTER MODAL ── */
  .t-overlay { display:none; position:fixed; inset:0; background:rgba(20,16,13,.6); z-index:800; align-items:center; justify-content:center; padding:1rem; }
  .t-overlay.open { display:flex; }
  .t-box { background:var(--white); border-radius:16px; width:100%; max-width:420px; overflow:hidden; animation:slideUp .22s ease; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
  .t-header { background:var(--off-white); padding:1.3rem 1.5rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
  .t-header h3 { color:var(--text); font-family:var(--serif); font-size:1.25rem; font-weight:600; }
  .t-close { background:none; border:none; color:var(--muted); font-size:1.1rem; cursor:pointer; line-height:1; }
  .t-close:hover { color:var(--text); }
  .t-body { padding:1.6rem 1.5rem; }
  .t-step { display:none; }
  .t-step.active { display:block; }
  .t-label { font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--red); margin-bottom:.45rem; font-family:var(--sans); }
  .t-sub { font-size:.85rem; font-weight:300; color:var(--muted); font-family:var(--sans); margin-bottom:1.1rem; line-height:1.6; }
  .t-input { width:100%; border:1px solid var(--border); background:#fff; border-radius:10px; padding:.75rem 1rem; font-size:.9rem; font-family:var(--sans); color:var(--text); outline:none; transition:border-color .2s, box-shadow .2s; margin-bottom:.85rem; }
  .t-input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(154,51,36,.1); }
  .t-input-code { text-align:center; font-size:1.9rem; letter-spacing:.5em; font-weight:600; }
  .t-btn { width:100%; background:var(--ink); color:var(--white); border:none; border-radius:999px; padding:.9rem; font-size:.8rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; font-family:var(--sans); transition:background .2s, transform .15s; }
  .t-btn:hover { background:#463629; transform:translateY(-1px); }
  .t-btn:disabled { background:var(--border); color:var(--muted); cursor:not-allowed; transform:none; }
  .t-btn-ghost { width:100%; background:transparent; color:var(--text); border:1px solid var(--text); border-radius:999px; padding:.85rem; font-size:.8rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; font-family:var(--sans); transition:all .2s; margin-top:.6rem; }
  .t-btn-ghost:hover { background:var(--off-white); }
  .t-err { color:var(--red); font-size:.82rem; font-family:var(--sans); margin-bottom:.75rem; display:none; }
  .t-resend { text-align:center; margin-top:.75rem; font-size:.82rem; color:var(--muted); font-family:var(--sans); }
  .t-resend a { color:var(--red); cursor:pointer; text-decoration:underline; }
  .t-divider { border:none; border-top:1px solid var(--border); margin:1rem 0; }
  .t-choice { display:flex; flex-direction:column; gap:.75rem; }
  .t-choice-header { text-align:center; margin-bottom:.5rem; }
  .t-choice-icon { font-size:2.3rem; display:block; margin-bottom:.5rem; }
  .t-choice-title { font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--text); margin-bottom:.3rem; }
  .t-choice-sub { font-size:.84rem; font-weight:300; color:var(--muted); font-family:var(--sans); line-height:1.6; }
  .t-select { width:100%; border:1px solid var(--border); border-radius:10px; padding:.75rem 1rem; font-size:.9rem; font-family:var(--sans); color:var(--text); outline:none; background:#fff; margin-bottom:.85rem; }
  .t-select:focus { border-color:var(--red); }
  .t-checkbox-row { display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.85rem; font-family:var(--sans); font-size:.8rem; font-weight:300; color:var(--muted); }
  .t-checkbox-row input { margin-top:3px; accent-color:var(--red); }


  /* ── Shared additions (merge of index/menu) ── */
  .t-hint { font-family: var(--sans); font-size: .78rem; color: var(--muted); margin: -.35rem 0 .75rem; }
  .t-confirm { border: 1px solid var(--border); border-radius: 12px; padding: .9rem; margin: .25rem 0 .75rem; background: var(--off-white); }
  .t-confirm-q { font-family: var(--sans); font-size: .88rem; color: var(--text); margin-bottom: .75rem; line-height: 1.5; }
  .t-confirm-num { font-weight: 600; white-space: nowrap; }


  /* ── CORNER ACCOUNT MENU ──
     The account links used to sit in the page footers, at the bottom of a long
     scroll, and in the cave view they had to be re-rendered by hand every time
     the login state changed. They are one fixed control in the top-right corner
     now, shared by both pages and by the cave, so there is a single place that
     decides what a signed-in taster is allowed to see. */
  .hf-corner { position:fixed; top:calc(env(safe-area-inset-top,0px) + 8px); right:14px; z-index:650; display:flex; flex-direction:column; align-items:flex-end; gap:8px; font-family:var(--sans); transition:opacity .18s ease; }
  .hf-corner-toggle { position:relative; width:44px; height:44px; border-radius:50%; border:1px solid rgba(20,16,13,.14); background:rgba(252,249,244,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 4px 14px rgba(0,0,0,.22); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0; transition:transform .15s ease, background .2s; }
  .hf-corner-toggle:hover { transform:translateY(-1px); }
  .hf-corner-toggle span { display:block; width:17px; height:2px; border-radius:2px; background:var(--ink); transition:transform .28s cubic-bezier(.22,.8,.3,1), opacity .18s ease; }
  /* Three 2px bars with a 4px gap: the outer two are 6px off centre, so 6px of
     travel is exactly what turns them into a cross. */
  .hf-corner.open .hf-corner-toggle span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .hf-corner.open .hf-corner-toggle span:nth-child(2) { opacity:0; }
  .hf-corner.open .hf-corner-toggle span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
  .hf-corner-dot { position:absolute; top:2px; right:2px; width:9px; height:9px; border-radius:50%; background:var(--red); border:2px solid var(--white); display:none; }
  .hf-corner.signed-in .hf-corner-dot { display:block; }

  .hf-corner-items { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
  .hf-corner-item { display:block; white-space:nowrap; border:1px solid rgba(20,16,13,.12); background:var(--white); color:var(--text); border-radius:999px; padding:.55rem 1rem; font-size:.72rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; font-family:var(--sans); text-decoration:none; text-align:right; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.18);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px) scale(.94);
    transition:opacity .22s ease, transform .28s cubic-bezier(.22,.8,.3,1), visibility 0s linear .3s, background .2s; }
  /* Opening staggers each pill by --d so they unfold; closing drops the delays
     so the menu gets out of the way at once. */
  .hf-corner.open .hf-corner-item { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1);
    transition:opacity .22s ease var(--d,0s), transform .28s cubic-bezier(.22,.8,.3,1) var(--d,0s), visibility 0s, background .2s; }
  .hf-corner-item:hover { background:var(--off-white); }
  .hf-corner-name { background:var(--ink); border-color:var(--ink); color:var(--white); cursor:default; }
  .hf-corner-name:hover { background:var(--ink); }
  .hf-corner-manager { border-color:rgba(154,51,36,.45); color:var(--red); }

  /* The menu floats above the page and above the cave, but it must never sit on
     top of a dialog. z-index handles the ones stacked above it; this covers the
     dish and map sheets, which sit below. */
  body:has(.modal-overlay.open) .hf-corner,
  body:has(.maps-modal.open) .hf-corner,
  body:has(.r-overlay.open) .hf-corner,
  body:has(.t-overlay.open) .hf-corner,
  body:has(.cs-overlay.open) .hf-corner,
  body:has(.lucky-overlay.open) .hf-corner,
  body:has(.vid-overlay.open) .hf-corner { opacity:0; visibility:hidden; pointer-events:none; }