/* =====================================================================
   Million Beers Club, step 1 "Safe and fair": the look and the place of
   the new controls (Jules, 2026-11-02). Replaces Bob's wiring-only file of
   2026-10-31 under the same name, so index.html, world.html, sw.js and the
   release check need no change. Loaded after crowd.css, before the event
   files. Tokens only (var(--stout), var(--cream) ...), so every event look
   recolours it. Every rule targets a step 1 part, plus three deliberate
   neighbours, each marked: the main screen dock's bottom room (6), the
   first member card's gold count (7), and the empty rank columns (7).
   Placement notes for Bob: README.md in this folder.
   ===================================================================== */

/* ---------- 6. "Drink responsibly. Never drink and drive." ----------
   On the beer: a small stout plate with cream type, so it reads on any part of the glass (cream on stout,
   about 12:1 at the bottom of the beer; the bare line was 3.7:1 on the main screen and 2.4:1 on the board).
   Quieter than the links pill: smaller, no shadow, a touch see-through. */
.drink-line {
  display: block; width: max-content; max-width: calc(100% - 32px);
  margin: 0 auto; padding: 5px 12px 6px; border-radius: 999px;
  background: rgba(42, 23, 9, .78);
  background: color-mix(in srgb, var(--stout) 78%, transparent);
  color: var(--cream);
  font: 700 12px/1.3 var(--font-body); letter-spacing: .01em; text-align: center;
}
/* the main screen: the small print under the +1 cap, where nothing else ever sits (the toast and the photo tag
   live above the cap). Lifted out of the column, so the glass keeps its room; the dock gives up 22px below the cap. */
.main > .drink-line--main {   /* .main is a .screen: position absolute, so it frames the line */
  position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 10px); z-index: 6;
  margin: 0; transform: translateX(-50%);
}
.main > .dock { padding-bottom: calc(var(--safe-bottom) + 40px); }   /* deliberate neighbour: room for the line */
@media (max-height: 700px) {
  .main > .drink-line--main { bottom: calc(var(--safe-bottom) + 6px); }
  .main > .dock { padding-bottom: calc(var(--safe-bottom) + 34px); }
}
/* the World Board: in the dock, under "Start a club · Got an invite or code?" (README, move 1), so it shows
   without scrolling. If it stays after the board's last card it still reads, as the page's last line. */
.wb__dock > .drink-line { width: max-content; margin: 2px auto 0; }
.wb > .drink-line--board { margin: 14px auto calc(var(--safe-bottom) + 20px); }
/* the club page: on the stout sheet, plain and calm, the page's last line */
.s1foot .drink-line {
  margin: 22px auto 2px; padding: 0; background: none; max-width: 100%;
  color: var(--cream-68, rgba(255, 244, 223, .68)); font-size: 12.5px; line-height: 1.4;
}

/* ---------- 2. The reminders on the "it counted" toast ----------
   README, move 2: the reminder gets its own line (.toast__care, data-care="water|ride|home") under the count
   and Undo. Calm, never alarming and never a celebration: no gold, no red, no number made big. A soft band with
   a cream glass, car or house; the words stay Mary's. Without move 2 the toast still wraps, as today. */
.toast.has-care {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  width: min(360px, calc(100% - 24px)); max-width: none;
  padding: 7px 7px 0 16px; border-radius: 22px;
}
.toast.has-care .toast__text { grid-column: 1; grid-row: 1; padding: 4px 0; }
.toast.has-care .toast__undo { grid-column: 2; grid-row: 1; }
.toast__care {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 11px;
  margin: 8px -7px 0 -16px; padding: 10px 16px 13px 12px;
  border-top: 1px solid var(--cream-12, rgba(255, 244, 223, .12));
  background: var(--cream-08, rgba(255, 244, 223, .08));
  color: var(--cream); font: 700 14px/1.32 var(--font-body); text-align: left; overflow-wrap: anywhere;
}
.toast__care::before {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--cream-12, rgba(255, 244, 223, .12)) no-repeat 50% 50% / 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.6h12l-1.5 16.5a1.7 1.7 0 0 1-1.7 1.5H9.2a1.7 1.7 0 0 1-1.7-1.5z' fill='none' stroke='%23FFF4DF' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M7.3 10.6c1.6-.9 3.1-.9 4.7 0s3.1.9 4.7 0l-.9 9.4H8.2z' fill='%23FFF4DF'/%3E%3C/svg%3E");
}
.toast__care[data-care="ride"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.3 11.2l1.5-3.7a2 2 0 0 1 1.8-1.2h4.8a2 2 0 0 1 1.8 1.2l1.5 3.7' fill='none' stroke='%23FFF4DF' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M3.2 13.2a2 2 0 0 1 2-2h13.6a2 2 0 0 1 2 2v3.6a1 1 0 0 1-1 1H4.2a1 1 0 0 1-1-1z' fill='%23FFF4DF'/%3E%3Ccircle cx='7.6' cy='18' r='2.1' fill='%23FFF4DF'/%3E%3Ccircle cx='16.4' cy='18' r='2.1' fill='%23FFF4DF'/%3E%3C/svg%3E");
}
.toast__care[data-care="home"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.8 11.4L12 4.2l8.2 7.2' fill='none' stroke='%23FFF4DF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 10.6V20a1 1 0 0 0 1 1h3.6v-5.2h2.8V21H17a1 1 0 0 0 1-1v-9.4L12 5.4z' fill='%23FFF4DF'/%3E%3C/svg%3E");
}
.toast.has-care .toast__timer { z-index: 1; }

/* ---------- 1. The photo check: refused, waiting, the pose ----------
   Refused: same card, same rules, but the badge goes from green (go) to stout (not yet) with a small cream
   retake mark, and the advice sits on a soft note so the reason and the way out read first. Out of tries: the
   badge rests, no mark. Retake carries the retake arrow. */
.check[data-state="refused"] .check__badge,
.check[data-state="refusedFinal"] .check__badge { background: var(--stout); }
.check[data-state="refused"] .check__badge::after {
  content: ""; position: absolute; right: -6px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid var(--stout); box-sizing: border-box;
  background: var(--cream) no-repeat 50% 50% / 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 12.4A7.5 7.5 0 1 0 6.9 6.6' fill='none' stroke='%232A1709' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M5.6 2.9v4.6h4.6' fill='none' stroke='%232A1709' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.check[data-state="refused"] .check__text,
.check[data-state="refusedFinal"] .check__text {
  margin: 4px 0 0; padding: 11px 14px 12px; border-radius: 14px;
  background: rgba(42, 23, 9, .07);
  background: color-mix(in srgb, var(--stout) 7%, transparent);
  font-size: 15.5px;
}
.check[data-state="refused"] #checkGo { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.check[data-state="refused"] #checkGo::before {
  content: ""; flex: none; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 12.4A7.5 7.5 0 1 0 6.9 6.6' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M5.6 2.9v4.6h4.6' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 12.4A7.5 7.5 0 1 0 6.9 6.6' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M5.6 2.9v4.6h4.6' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* the pose (README, move 3): on the card, its own stout line under the ask, so it cannot be missed */
.check__pose {
  display: block; width: fit-content; max-width: 100%; margin: 12px auto 0; padding: 8px 14px 9px;
  border-radius: 14px; background: var(--stout); color: var(--cream);
  font: 800 14.5px/1.3 var(--font-body); text-align: center;
}
/* ... and on the camera: the hint turns into a cream sign while a pose is asked (the frame hint stays dark) */
.cam__hint.is-pose {
  background: var(--cream); color: var(--stout);
  border: 2.5px solid var(--stout); box-shadow: 0 3px 0 rgba(42, 23, 9, .6);
  font-size: 14px;
}

/* ---------- 3, 4, 5. The club page foot ----------
   One block under a hairline: the Hero first and big, then the quiet links, then Tim's list, then the drink
   line as the page's last words. */
.s1foot {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  margin: 28px 2px 0; padding-top: 20px;
  border-top: 1px solid var(--cream-12, rgba(255, 244, 223, .12));
}
.s1foot .btnrow { display: block; }
/* the Hero: a designated driver logs a water. A wide card, not a small pill: it is the one thing here to do. */
.s1foot #heroBtn {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  width: 100%; min-height: 64px; padding: 10px 16px 10px 10px; border-radius: 18px;
  background: var(--cream-08, rgba(255, 244, 223, .08)); color: var(--cream);
  border: 1.5px dashed rgba(255, 244, 223, .32);
  font: 800 16px/1.25 var(--font-body); text-align: left;
}
.s1foot #heroBtn svg {
  flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%; vertical-align: 0;
  background: var(--tap); fill: var(--cream); box-shadow: inset 0 0 0 2px rgba(255, 244, 223, .22);
}
.s1foot #heroBtn:active { transform: scale(.98); }
/* tonight's Hero: the badge is earned, so the card rests in green with a gold wheel (badges are gold) */
.s1foot #heroBtn:disabled {
  opacity: 1; cursor: default; transform: none;
  background: var(--tap); border: 1.5px solid rgba(255, 244, 223, .24);
}
.s1foot #heroBtn:disabled svg { background: var(--stout); fill: var(--gold); box-shadow: none; }
/* report links: findable, quiet. Cream at 68%, a thin line under, the size of the small print. */
.s1foot .sheet__foot2 { margin: 6px 8px 0; }
.s1foot #reportClubLink,
.mcard__more .sheet__foot2 > .linkish {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  color: var(--cream-68, rgba(255, 244, 223, .68)); font: 700 13.5px/1.2 var(--font-body);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: rgba(255, 244, 223, .4);
}
.mcard__more .sheet__foot2 { margin: 0 2px; }
/* Tim's review list, only on his phone: a tool pill that opens a panel */
.s1foot #opLink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 2px solid rgba(255, 244, 223, .5); border-radius: 999px;
  color: var(--cream); font: 800 13.5px/1 var(--font-body); text-decoration: none;
}
.s1foot #opLink::before {
  content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 21V4M5.5 4.5h11.2l-2.3 3.8 2.3 3.8H5.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 21V4M5.5 4.5h11.2l-2.3 3.8 2.3 3.8H5.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.s1op { margin: 8px 0 4px; padding: 4px; border-radius: 18px; background: var(--cream-08, rgba(255, 244, 223, .08)); }
.s1op .rows { margin: 0; }
.s1op .sheet__foot2 { margin: 12px 12px; color: var(--cream-82, rgba(255, 244, 223, .82)); }
/* each row: the name gets the full width, the two buttons sit under it */
.s1op .rowx { flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; min-height: 0; padding: 12px 12px 12px 14px; border-radius: 0; }
.s1op .rowx + .rowx { box-shadow: inset 0 1px 0 var(--cream-12, rgba(255, 244, 223, .12)); }
.s1op .rowx__main { flex: 1 1 100%; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.s1op .rowx__main b { font: 800 16px/1.25 var(--font-body); color: var(--cream); overflow-wrap: anywhere; }
.s1op .rowx__main small { font: 600 12.5px/1.35 var(--font-body); color: var(--cream-68, rgba(255, 244, 223, .68)); }
.s1op .rowx__side { display: flex; gap: 8px; }
.s1op .mini { min-height: 40px; padding: 0 16px; }

/* ---------- 7. No crown, no rank number: the cards close up the empty column ----------
   Deliberate neighbours: the rank column was kept empty (Bob, visibility: hidden); it now goes, and the first
   card's count is no longer gold (in name order the first card is only first in the alphabet). */
.mcard__rank, .tcrow__rank { display: none; }
.mcard__main { grid-template-columns: auto minmax(0, 1fr) auto; padding-left: 12px; }
.tcrow { grid-template-columns: auto minmax(0, 1fr) auto; }
.mcard:first-child .mcard__count { color: var(--cream); }