/*
 * Palm Beach Bums. Hand-written, no build step - the 2004 site survived
 * twenty-two years partly because it had no toolchain to rot.
 *
 * The palette is the one in the spec: deep water, sun, and sand.
 */

:root {
  --sand: #F7F3EA;
  --card: #FFFFFF;
  --ink: #17282C;
  --ink-secondary: #3C5257;
  --muted: #5B6F73;
  --faint: #8A9A9D;
  --water: #0E6272;
  --water-deep: #0A4C59;
  --sun: #C8571B;
  /* The 2004 card turned a drawn number Yellow. This is that, calmed down
     enough to sit next to everything else. Dark text on it in both themes. */
  --gold: #F6C445;
  --gold-line: #DCA81F;
  --gold-ink: #17282C;
  --line: #E2D9C8;
  /* The two marks on a scorecard: the hole a card won, and a hole that tied and
     carried on. Tokens rather than literals because the wash has to be mixed
     against the ground it sits on, and the two themes have opposite grounds. */
  --won-wash: rgba(14, 98, 114, .13);
  --won-edge: rgba(14, 98, 114, .42);
  --carried-wash: rgba(200, 87, 27, .12);
  --carried-edge: rgba(200, 87, 27, .40);
  --shadow: 0 1px 2px rgba(23, 40, 44, .06), 0 6px 18px rgba(23, 40, 44, .07);
  --radius: 10px;
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sand: #10191B;
    --card: #182427;
    --ink: #E6EDEC;
    --ink-secondary: #C3D1D2;
    --muted: #9BADB0;
    --faint: #74898C;
    --water: #5EB8C6;
    --water-deep: #8AD2DC;
    --sun: #EE8A4C;
    --gold: #E2B33C;
    --gold-line: #C4991F;
    --gold-ink: #17282C;
    --line: #263639;
    /* Mixed from the dark palette's teal and orange, not the light one's, and
       carried heavier: a wash that reads on paper disappears on a dark card. */
    --won-wash: rgba(94, 184, 198, .26);
    --won-edge: rgba(94, 184, 198, .72);
    --carried-wash: rgba(238, 138, 76, .24);
    --carried-edge: rgba(238, 138, 76, .66);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--water); text-decoration: none; }
a:hover { color: var(--water-deep); text-decoration: underline; text-underline-offset: 3px; }
h1, h2, p, ul { margin: 0; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 4px; }

/* --- the bar across the top --------------------------------------------- */

.masthead {
  background: var(--water);
  border-bottom: 3px solid var(--sun);
}
.masthead__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: 10px; color: #FFFFFF; }
.brand:hover { color: #FFFFFF; text-decoration: none; }
.brand__name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.brand__since { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .72); }

/* Wrapping is not decoration. Seven pills in one unbreakable row come to about
   530px, which on a phone overflows the body, gives the whole page a sideways
   scroll, and makes the browser zoom out to fit - so the bar stops short of the
   screen edge and every page looks shrunken. */
.nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border-radius: 999px; color: rgba(255, 255, 255, .88); font-size: 14.5px; font-weight: 600;
}
.nav a:hover { background: rgba(255, 255, 255, .14); color: #FFFFFF; text-decoration: none; }
.nav a[aria-current="page"] { background: #FFFFFF; color: var(--water-deep); }

.page { max-width: 1080px; margin: 0 auto; padding: 26px 20px 60px; }
/* For a page whose content has a width of its own. The golf scorecard is
   eighteen holes, a name and three totals, and no amount of tightening makes
   that fit the usual measure on a laptop. */
.page--wide { max-width: 1240px; }

.footer {
  max-width: 1080px; margin: 0 auto; padding: 0 20px 40px;
  color: var(--faint); font-size: 13px;
}

/* --- headings ------------------------------------------------------------ */

.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.page-head__note { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.breadcrumb { font-size: 14px; margin-bottom: 8px; }
.empty { color: var(--muted); }

.section { margin-bottom: 34px; }
.section__name {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sun); margin-bottom: 10px;
}

/* --- albums -------------------------------------------------------------- */

.album-grid, .photo-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.album {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; color: var(--ink); height: 100%;
}
.album:hover { text-decoration: none; }
.album:hover .album__name { color: var(--water); }
/* min-height: 0 is doing the work. This is a flex item, and a flex item's
   automatic minimum size is its content - so a portrait cover grew past the
   4:3 box, and because the grid stretches a row to its tallest card, one
   upright photograph left every tile beside it with a band of empty space
   under the caption. */
.album__cover {
  display: block; aspect-ratio: 4 / 3; background: var(--line);
  flex: none; min-height: 0; overflow: hidden;
}
.album__cover img { width: 100%; height: 100%; object-fit: cover; }
.album__name { font-weight: 600; font-size: 15.5px; padding: 10px 12px 0; text-wrap: balance; }
.album__count { color: var(--faint); font-size: 13px; padding: 0 12px 12px; }

/* --- a grid of photographs ----------------------------------------------- */

.photo-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.photo-tile {
  display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  background: var(--line); box-shadow: var(--shadow);
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile:hover { outline: 2px solid var(--sun); outline-offset: 2px; }

/* --- one photograph ------------------------------------------------------ */

.photo-page { display: flex; flex-direction: column; gap: 16px; }
.photo { margin: 0; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.photo img { width: 100%; height: auto; background: #000000; }
.photo figcaption { padding: 12px 16px 14px; }
.photo__caption { font-size: 15.5px; }
.photo__meta { color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pager__where { color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
/* The end of the album: the button stays put so nothing shifts under a thumb. */
.button--spent { opacity: .35; box-shadow: none; background: transparent; }
.keys { color: var(--faint); font-size: 13px; text-align: center; }
.keys kbd {
  display: inline-block; min-width: 22px; padding: 1px 6px; margin: 0 1px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  background: var(--card); color: var(--ink-secondary); font: inherit; font-size: 12px;
}
@media (hover: none) { .keys { display: none; } }
.button {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px;
  border-radius: 999px; background: var(--card); box-shadow: var(--shadow);
  color: var(--ink); font-weight: 600; font-size: 14.5px;
}
.button:hover { color: var(--water); text-decoration: none; }

/* --- signing in, and the accounts list ----------------------------------- */

.form-page { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.panel {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.panel--wide { max-width: none; }
.panel h1 { font-size: 24px; letter-spacing: -.015em; }
.panel h2 { font-size: 17px; }
.panel__note { color: var(--muted); font-size: 14px; text-wrap: pretty; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink-secondary); }
.field input, .field select {
  min-height: var(--tap); padding: 0 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 16px;
}
.field input:focus, .field select:focus, select:focus {
  outline: none; border-color: var(--water); box-shadow: 0 0 0 3px rgba(14, 98, 114, .18);
}
.field input[aria-invalid="true"] { border-color: #B4442A; }
.field__error { color: #B4442A; font-size: 13px; }

/* A row of pill choices standing in a form as one field. */
.field--choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.field--choices legend { padding: 0 0 5px; font-size: 13.5px; font-weight: 600; color: var(--ink-secondary); }

.choice { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink-secondary); }
.choice input { width: 18px; height: 18px; accent-color: var(--water); }

.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.button--primary { background: var(--water); color: #FFFFFF; border: 0; cursor: pointer; font-size: 15px; }
.button--primary:hover { background: var(--water-deep); color: #FFFFFF; }

.notice {
  background: var(--card); border-left: 4px solid var(--sun); border-radius: 0 8px 8px 0;
  padding: 10px 14px; font-size: 14.5px; box-shadow: var(--shadow);
}

/* A field for things that fill forms in automatically. Not display:none -
   some of them know to skip that - but out of the flow, unreachable by tab,
   and hidden from a screen reader by aria-hidden on the wrapper. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.admin-page { display: flex; flex-direction: column; gap: 16px; }

/* Somebody asking to be let in: what they typed on the left, and what you can
   do about it on the right. Each button is its own form, so they stack rather
   than nest - HTML has no nested forms. */
.asking {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 12px 20px;
  padding: 14px 0; border-top: 1px solid var(--line); align-items: start;
}
.asking:first-of-type { border-top: 0; }
.asking__name { font-weight: 700; }
.asking__email { color: var(--muted); font-size: 14px; }
.asking__said { margin-top: 6px; color: var(--ink-secondary); font-size: 14.5px; text-wrap: pretty; }
.asking__when { margin-top: 6px; color: var(--faint); font-size: 13px; }
.asking__what { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.asking__what form { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.asking__what .field__hint { font-size: 12.5px; }

@media (max-width: 640px) {
  .asking { grid-template-columns: minmax(0, 1fr); }
}
.account-list { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.account {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
  align-items: center; gap: 14px; padding: 12px 16px;
}
.account + .account { border-top: 1px solid var(--line); }
.account__who, .account__state { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account__name { font-weight: 600; }
.account__detail { color: var(--faint); font-size: 12.5px; overflow-wrap: anywhere; }
.account__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.account__actions form { margin: 0; }
.account__actions select { min-height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; }
.text-button { border: 0; background: none; padding: 6px 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--water); cursor: pointer; }
.text-button:hover { text-decoration: underline; text-underline-offset: 3px; }

.badge {
  align-self: flex-start; padding: 2px 9px; border-radius: 999px;
  background: var(--line); color: var(--ink-secondary); font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.badge--in { background: rgba(14, 98, 114, .14); color: var(--water); }
.badge--waiting { background: rgba(200, 87, 27, .14); color: var(--sun); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 720px) {
  .account { grid-template-columns: minmax(0, 1fr); }
}

/* Laravel's paginator, quietened down to match. */
nav[role="navigation"] { margin-top: 22px; font-size: 14px; }
nav[role="navigation"] svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
  .page { padding-top: 18px; }
  .page-head h1 { font-size: 25px; }
  .album-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

  /* Tighter pills so the bar wraps to two rows rather than three or four. */
  .masthead__inner { gap: 10px; padding: 0 14px; min-height: 56px; }
  .nav a { padding: 0 10px; font-size: 13.5px; }
  .nav__whom { display: none; }

  /* The name column is stuck to the left edge while the holes scroll past it,
     so every pixel it takes is a hole the organiser cannot see. Narrow enough
     to leave six of them on screen; the name still scrolls inside its box. */
  .scorecard .scorecard__name input { width: 8ch; min-width: 8ch; padding: 5px 6px; }
  .scorecard__team { padding-right: 6px; }
  .scorecard__out { width: 22px; height: 22px; font-size: 15px; }
  .scorecard__hole { width: 38px; }
  .scorecard th, .scorecard td { padding: 6px 3px; }
}

/* --- the front page ------------------------------------------------------ */

.home { display: flex; flex-direction: column; gap: 26px; }

.welcome { display: flex; align-items: center; gap: 14px; }
/* Shown at the size it was drawn in 2004. Scaled up it looks like a mistake. */
.welcome__island { width: 118px; height: 55px; border-radius: 6px; flex: none; }
.welcome h1 { font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.welcome__note { color: var(--muted); font-size: 14.5px; }

.wisdom {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; border-left: 4px solid var(--sun);
}
.wisdom h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sun); margin-bottom: 8px;
}
.wisdom blockquote { margin: 0; }
.wisdom blockquote p { font-size: 18px; line-height: 1.45; text-wrap: pretty; max-width: 62ch; }
.wisdom blockquote footer { color: var(--muted); font-size: 14.5px; margin-top: 8px; }

.home__columns { display: grid; gap: 26px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
/* What a signed-out reader is offered instead of the calendar. */
.home__open { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.home__open a { font-weight: 600; }
.coming__signin { margin-top: 12px; }

.coming h2, .archive h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sun); margin-bottom: 10px;
}

.coming__item {
  display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.coming__item:last-child { border-bottom: 0; }
.coming__when { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.coming__title { font-weight: 600; text-wrap: balance; }
.coming__detail { color: var(--muted); font-size: 14px; margin-top: 2px; }

.archive__shot {
  display: block; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; color: var(--ink);
}
.archive__shot:hover { text-decoration: none; }
.archive__shot:hover .archive__caption { color: var(--water); }
.archive__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--line); }
.archive__caption { display: block; padding: 10px 12px 12px; font-size: 14.5px; text-wrap: balance; }
.archive__when { display: block; color: var(--faint); font-size: 13px; }

@media (max-width: 720px) {
  .home__columns { grid-template-columns: minmax(0, 1fr); }
}

/* --- the calendar -------------------------------------------------------- */

.calendar { display: flex; flex-direction: column; gap: 18px; }
.calendar__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 0; }

/*
 * The grid on the left, the month's list beside it.
 *
 * Both orders were tried. With the list first the leftover width fell between
 * the end of a title and the grid, which reads as a hole in the page; this way
 * the same space is at the outside edge, where it reads as margin. The grid is
 * a fixed 316px rather than half the page: it is a set of marks, and a
 * page-wide one is mostly empty cells.
 *
 * The grid is also first in the markup, so no placement is needed here, and
 * where the columns collapse - a phone - it lands at the top with the list
 * under it, which is the way round it wants to be on a small screen.
 */
.calendar__layout {
  display: grid; gap: 16px 30px;
  grid-template-columns: 316px minmax(0, 1fr);
  align-items: start;
}
.calendar__aside {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  position: sticky; top: 16px;
}
.calendar .agenda { min-width: 0; }

.months {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  font-size: 13.5px;
}
.months [rel="next"] { text-align: right; }
.months__today { justify-self: center; font-weight: 600; }
.months__today--here { color: var(--faint); font-weight: 400; }

.grid {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.grid th {
  padding: 8px 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.grid th abbr { text-decoration: none; }
.grid__day {
  height: 52px; vertical-align: top; text-align: center;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.grid__day:first-child { border-left: 0; }
.grid__day > a { display: block; height: 100%; padding: 6px 2px; color: inherit; }
.grid__day > a:hover { background: rgba(14, 98, 114, .07); text-decoration: none; }
.grid__day > span { display: block; padding: 6px 2px; }
.grid__day--outside { color: var(--faint); opacity: .5; }
.grid__day--today .grid__number {
  display: inline-block; min-width: 24px; padding: 1px 4px; border-radius: 999px;
  background: var(--sun); color: #FFFFFF; font-weight: 700;
}
.grid__number { font-size: 14px; }
.grid__marks { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
.grid__mark { width: 13px; height: 13px; color: var(--water); }

.agenda { display: flex; flex-direction: column; }
.agenda__day {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--line); scroll-margin-top: 16px;
}
.agenda__day:first-child { border-top: 0; }
.agenda__when { text-align: center; font-variant-numeric: tabular-nums; }
.agenda__weekday { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.agenda__date { display: block; font-size: 22px; line-height: 1.1; }
.agenda__day--today .agenda__date { color: var(--sun); font-weight: 700; }

.agenda__things { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.agenda__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.agenda__icon { width: 20px; height: 20px; color: var(--water); margin-top: 2px; }
/* Long enough for the longest title there is, short enough that a line of six
   words does not stretch across half a screen. */
.agenda__what { min-width: 0; max-width: 54ch; }
.agenda__title { font-weight: 600; text-wrap: pretty; overflow-wrap: anywhere; }
.agenda__yearly {
  display: inline-block; margin-left: 7px; padding: 1px 8px; border-radius: 999px;
  background: var(--line); color: var(--muted); font-size: 11.5px; font-weight: 700;
  letter-spacing: .03em; vertical-align: 1px;
}
.agenda__detail { color: var(--muted); font-size: 14px; margin-top: 2px; text-wrap: pretty; overflow-wrap: anywhere; }
/* Quiet until it is wanted: it sits on every row a member owns, and five of
   them shouting at once is louder than anything they are attached to. */
.agenda__edit {
  margin-left: 8px; font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--faint);
}
.agenda__item:hover .agenda__edit { color: var(--water); }
.agenda__edit:hover, .agenda__edit:focus-visible { color: var(--water); text-decoration: underline; }

/* --- bits the event form needs ------------------------------------------- */

.field textarea {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 16px; resize: vertical;
}
.field textarea:focus { outline: none; border-color: var(--water); box-shadow: 0 0 0 3px rgba(14, 98, 114, .18); }
.field__hint { color: var(--muted); font-size: 13.5px; margin-top: -6px; text-wrap: pretty; }
.field__optional { color: var(--faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.panel--quiet { background: none; box-shadow: none; padding: 0 22px; }
.button--danger { background: none; border: 1px solid var(--line); color: #B4442A; cursor: pointer; font-size: 14px; }
.button--danger:hover { border-color: #B4442A; background: rgba(180, 68, 42, .06); color: #B4442A; }

/*
 * One column: the grid at the top, where the markup already puts it, and the
 * month's list under it. Nothing sticks - there is no second column for it to
 * stay beside.
 */
@media (max-width: 880px) {
  .calendar__layout { grid-template-columns: minmax(0, 1fr); }
  .calendar__aside { position: static; }
  .months { font-size: 14.5px; }
}

@media (max-width: 560px) {
  .grid__day { height: 48px; }
  .grid__mark { width: 12px; height: 12px; }
  .agenda__day { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .agenda__date { font-size: 19px; }
}

/* --- softball statistics -------------------------------------------------- */

.stats { display: flex; flex-direction: column; gap: 16px; }

.seasons { display: flex; flex-wrap: wrap; gap: 6px; }
.seasons a {
  padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink-secondary);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.seasons a:hover { border-color: var(--water); color: var(--water); text-decoration: none; }
.seasons a[aria-current="page"] { background: var(--water); border-color: var(--water); color: #FFFFFF; }

/* Eleven columns will not fit a phone. The table scrolls in its own box so the
   page itself never moves sideways. */
.table-scroll {
  overflow-x: auto; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th, .table td { padding: 9px 10px; text-align: left; white-space: nowrap; }
.table thead th {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid var(--line);
}
.table thead th abbr { text-decoration: none; cursor: help; }
.table tbody tr + tr th, .table tbody tr + tr td { border-top: 1px solid var(--line); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table__name { font-weight: 600; white-space: nowrap; }
.table__avg { font-weight: 700; }
.table__beer { color: var(--muted); }
/* A hairline between the batting and the bar tab: they are different subjects. */
.table__beer-head { border-left: 1px solid var(--line); }
/* Your own line, so it can be found in a table of thirty-one. */
.table__mine th, .table__mine td { background: rgba(200, 87, 27, .09); }
.table__mine .table__name { color: var(--sun); }

.stats__foot { color: var(--faint); font-size: 13px; max-width: 70ch; text-wrap: pretty; }

/* The first column stays put while the numbers scroll under a thumb. */
@media (max-width: 720px) {
  .table th.table__name { position: sticky; left: 0; background: var(--card); }
  .table__mine th.table__name { background: #FBEDE4; }
}

/* --- adding photographs, and captioning them ----------------------------- */

.page-head--with-action {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

/* Where a locked button would otherwise be: the reason, then the way in. */
.notice--invite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  border-left-color: var(--water);
}
.notice--refused { border-left-color: #B4442A; }
.notice--refused ul { margin: 6px 0 0; padding-left: 20px; }
.notice--refused li { color: var(--muted); font-size: 14px; }

.field input[type="file"] {
  padding: 10px 12px; min-height: var(--tap); line-height: 1.4;
  border: 1px dashed var(--line); background: var(--sand);
}
.field input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 7px 14px; border: 0; border-radius: 999px;
  background: var(--water); color: #FFFFFF; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer;
}

.caption {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 7px;
}
.caption__label { font-size: 13.5px; font-weight: 600; color: var(--ink-secondary); }
.caption__row { display: flex; gap: 10px; align-items: stretch; }
.caption__row input {
  flex: 1 1 auto; min-width: 0; min-height: var(--tap); padding: 0 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 16px;
}
.caption__row input:focus {
  outline: none; border-color: var(--water); box-shadow: 0 0 0 3px rgba(14, 98, 114, .18);
}
.caption__row .button { flex: none; border: 0; cursor: pointer; }

@media (max-width: 480px) {
  .caption__row { flex-direction: column; }
  .caption__row .button { justify-content: center; }
}

/* --- keno ---------------------------------------------------------------- */

.keno { display: flex; flex-direction: column; gap: 18px; }
.keno__mine { text-align: right; }
/* A sentence, not a scoreboard: what is owed, which is the same thing a year
   later. The old "-2 beers over 2 draws" was a statistic about nothing. */
.keno__owed { font-size: 17px; font-weight: 600; color: var(--muted); }
.keno__owed.is-up { color: var(--water); }
.keno__owed.is-down { color: var(--sun); }

.keno__layout { display: grid; gap: 22px 28px; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
.keno__aside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.card-form { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.wager, .card { border: 0; margin: 0; padding: 0; min-width: 0; }
.wager legend, .card legend {
  padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sun); margin-bottom: 9px;
}
.card legend { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card__count { color: var(--faint); letter-spacing: .04em; font-weight: 600; text-transform: none; font-size: 12.5px; }
.is-ready .card__count { color: var(--water); }

/* Wager on the left, Draw and Clear pushed to the right edge of the same
   line. They wrap under it on a narrow screen rather than squeezing. */
.wager__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap;
}
.wager__choices { display: flex; gap: 8px; flex-wrap: wrap; }
.wager__actions { display: flex; gap: 8px; margin-left: auto; }
.wager__actions .button { border: 0; cursor: pointer; font-family: inherit; font-size: 14.5px; }
.wager__choice input { position: absolute; opacity: 0; pointer-events: none; }
.wager__choice span {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  font-weight: 600; font-size: 14.5px; cursor: pointer;
}
.wager__choice input:checked + span { background: var(--water); border-color: var(--water); color: #FFFFFF; }
.wager__choice input:focus-visible + span { outline: 2px solid var(--sun); outline-offset: 3px; }

.card__numbers {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px;
}
.spot { position: relative; }
.spot input { position: absolute; opacity: 0; pointer-events: none; }
.spot span {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line);
  background: var(--sand); color: var(--ink-secondary);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.spot span:hover { border-color: var(--water); color: var(--water); }
.spot input:checked + span, .spot--picked span { background: var(--water); border-color: var(--water); color: #FFFFFF; }
.spot input:disabled + span { cursor: not-allowed; opacity: .55; }
.spot input:focus-visible + span { outline: 2px solid var(--sun); outline-offset: 2px; }
/* Drawn and not picked: what got away. Yellow, as the 2004 card did it, and
   it stays yellow for the rest of the hand. */
.spot--drawn span { background: var(--gold); border-color: var(--gold-line); color: var(--gold-ink); }
/* Picked and drawn. */
.spot--hit span, .spot--hit input:checked + span {
  background: var(--sun); border-color: var(--sun); color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(200, 87, 27, .2);
}

.standings, .rules {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
}
.standings h2, .rules h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sun); margin-bottom: 10px;
}
.standing {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline;
  padding: 6px 0; font-size: 14px; border-top: 1px solid var(--line);
}
.standing:first-of-type { border-top: 0; }
.standing--mine { font-weight: 700; }
.standing__who { min-width: 0; overflow-wrap: anywhere; }
.standing__record { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.standing__pushed { color: var(--faint); }
.standing__beers { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 34px; }
.standing__beers.is-up { color: var(--water); }
.standing__beers.is-down { color: var(--sun); }
.standings__note { color: var(--faint); font-size: 12px; margin-top: 8px; }

.payoffs { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 10px; }
.payoffs caption { text-align: left; color: var(--faint); font-size: 12px; padding-bottom: 5px; }
.payoffs th, .payoffs td { padding: 4px 0; text-align: left; vertical-align: top; }
.payoffs th { font-weight: 700; white-space: nowrap; padding-right: 12px; font-variant-numeric: tabular-nums; }
.payoffs td { color: var(--muted); }

/* The house rules, under the card where there is room to read them, tied to
   the payoff table by the asterisk. */
.house-rules { max-width: 68ch; scroll-margin-top: 20px; }
.house-rules p { font-size: 13.5px; color: var(--muted); margin-bottom: 8px; text-wrap: pretty; }
.house-rules__small { font-size: 12px; color: var(--faint); }
.footnote { color: var(--sun); font-weight: 700; text-decoration: none; }
a.footnote:hover { text-decoration: underline; }

@media (max-width: 880px) {
  .keno__layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .card__numbers { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding: 10px; }
  .spot span { font-size: 13px; border-radius: 6px; }
}

/* --- golf, and the skins ------------------------------------------------- */

.golf { display: flex; flex-direction: column; gap: 18px; }

.outing {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: baseline;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 18px; color: var(--ink);
}
.outing:hover { text-decoration: none; }
.outing:hover .outing__where { color: var(--water); }
.outing__year { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.outing__where { font-weight: 600; min-width: 0; }
.outing__detail { display: block; color: var(--muted); font-size: 13.5px; font-weight: 400; }

.scorecard { width: 100%; border-collapse: collapse; font-size: 14px; }
.scorecard th, .scorecard td { padding: 6px 4px; text-align: center; white-space: nowrap; }
/* Fixed, so the three of them cannot each take as much as their heading wants
   and push the card past the page. */
.scorecard__total { width: 52px; }
.scorecard__skins { width: 48px; }
.scorecard__pays { width: 58px; }
.scorecard thead th {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted);
  border-bottom: 2px solid var(--line); font-variant-numeric: tabular-nums;
}
.scorecard__team { text-align: left; font-weight: 600; padding-right: 14px; position: sticky; left: 0; background: var(--card); }

/* The card's name is typed where it is read. It lives in the sticky column, so
   it stays alongside the strokes however far right the holes are scrolled. */
.scorecard__name { display: flex; align-items: center; gap: 4px; }
/* Two classes deep on purpose: `.scorecard input` below sets up the narrow,
   centred, tabular hole boxes, and this has to outrank it rather than race it. */
.scorecard .scorecard__name input {
  width: 13ch; min-width: 13ch; text-align: left; padding: 5px 7px; font-variant-numeric: normal;
}
.scorecard__out {
  flex: none; width: 26px; height: 26px; padding: 0; line-height: 1; font-size: 17px;
  border: 1px solid transparent; border-radius: 6px; background: none; color: var(--faint); cursor: pointer;
}
.scorecard__out:hover, .scorecard__out:focus-visible { border-color: #B4442A; color: #B4442A; background: rgba(180, 68, 42, .06); }
.scorecard__hole { width: 40px; font-variant-numeric: tabular-nums; }
/* What the hole is worth once carries have piled onto it: the number people
   argue about, so it goes on the card rather than only in the payout. */
.scorecard__worth { display: block; color: var(--sun); font-size: 10.5px; font-weight: 700; }
/* The same wash at the top of the column, so a carry reads as one thing all the
   way down: this hole tied, and these are the cards that tied on it. */
.scorecard thead .is-carried { color: var(--sun); background: var(--carried-wash); }
.scorecard__pars td, .scorecard__pars th { color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--line); }
.scorecard tbody tr + tr th, .scorecard tbody tr + tr td { border-top: 1px solid var(--line); }
.scorecard tbody .is-won { background: var(--won-wash); font-weight: 700; color: var(--water); }
.scorecard tbody .is-carried { background: var(--carried-wash); color: var(--sun); }

/* While the card is being typed in, the box fills the cell and paints over the
   wash behind it - so the marks were all but invisible in edit mode, which is
   the mode the organiser is actually in. The box steps out of the way and
   takes the mark as its own edge instead. */
.scorecard tbody .is-won input, .scorecard tbody .is-carried input { background: transparent; }
.scorecard tbody .is-won input { border-color: var(--won-edge); color: var(--water); font-weight: 700; }
.scorecard tbody .is-carried input { border-color: var(--carried-edge); color: var(--sun); font-weight: 700; }
/* Focus outranks the mark. The border is what says "you are in this box" on
   every other input on the site, and the two rules above would have quietly
   taken it away from exactly the cells somebody is most likely to correct. */
.scorecard tbody .is-won input:focus, .scorecard tbody .is-carried input:focus { border-color: var(--water); }
.scorecard input {
  width: 100%; min-width: 30px; padding: 5px 2px; text-align: center;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.scorecard input::-webkit-outer-spin-button, .scorecard input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.scorecard input:focus { outline: none; border-color: var(--water); box-shadow: 0 0 0 2px rgba(14, 98, 114, .2); }
.scorecard__total, .scorecard__skins { font-weight: 700; font-variant-numeric: tabular-nums; }
.scorecard__pays { font-weight: 700; color: var(--water); font-variant-numeric: tabular-nums; }
.scorecard__rounding { color: var(--faint); font-weight: 400; }
.form-actions--card { margin-top: 14px; }

/* A short list of names and amounts. It does not want the width of a scorecard
   behind it: stretched across the page the name ends up at one end and what it
   won at the other, with a stripe of nothing between them. */
.payout {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px;
  max-width: 480px;
}
.payout h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sun); margin-bottom: 10px;
}
.payout__sum { font-size: 16px; margin-bottom: 10px; }
.payout__list { list-style: none; margin: 0 0 10px; padding: 0; }
/* Fixed tracks rather than 1fr, so the three read as one line. The columns
   still line up down the list, which is the only reason this is a grid. */
.payout__list li {
  display: grid; grid-template-columns: minmax(0, 17ch) 6.5em 4.5em;
  justify-content: start; gap: 0 18px;
  padding: 7px 0; border-top: 1px solid var(--line); align-items: baseline;
}
.payout__list li:first-child { border-top: 0; }
.payout__who { font-weight: 600; overflow-wrap: anywhere; }
.payout__skins { color: var(--muted); font-size: 13.5px; }
.payout__cash { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.payout__note { color: var(--faint); font-size: 13px; text-wrap: pretty; }

.teams__players input {
  min-height: var(--tap); padding: 0 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 16px; min-width: 0;
}
.teams__players input:focus { outline: none; border-color: var(--water); box-shadow: 0 0 0 3px rgba(14, 98, 114, .18); }

/* Where the buttons are, so it is read by somebody who has just clicked one. */
.form-errors {
  border-left: 3px solid #B4442A; padding: 2px 0 2px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.form-errors .field__error { font-size: 14px; }

/* --- keno: the draw ------------------------------------------------------ */

/*
 * The verdict, over the page rather than shoving it down.
 *
 * Written into the markup already open, so with no JavaScript it is a panel
 * sitting in the flow and the result still reads; the script closes it and
 * opens it properly once the last ball has landed. Both states are styled
 * here, which is why the plain block rules come before the modal ones.
 */
.verdict {
  border: 0; border-radius: var(--radius); box-shadow: var(--shadow);
  background: var(--card); color: var(--ink);
  padding: 22px 24px; margin: 0 auto 18px; max-width: 30rem; width: calc(100% - 32px);
  border-top: 4px solid var(--line);
}
.verdict--won { border-top-color: var(--water); }
.verdict--lost { border-top-color: var(--sun); }
.verdict__line { font-size: 20px; line-height: 1.25; text-wrap: balance; margin-bottom: 6px; }
.verdict__net { color: var(--muted); font-size: 14.5px; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.verdict form { margin: 0; }
.verdict .button { border: 0; cursor: pointer; min-width: 7rem; justify-content: center; }
.verdict::backdrop { background: rgba(10, 25, 28, .55); }
/*
 * Open as a real modal, it sits a little down from the top - not centred, and
 * not against the edge. The margin above is what the block rules give it for
 * sitting in the page, and a dialog keeps that when it is raised, so it needs
 * saying again here. :modal matches only when it was opened with showModal(),
 * which is exactly the case this is for.
 */
.verdict:modal { margin: 10vh auto auto; }
/* Closed is closed: without this it still occupies its place in the page. */
.verdict:not([open]) { display: none; }

/*
 * Nothing on the form is touchable while the balls are still coming in. The
 * card had this already; the buttons did not, so Draw halfway through started
 * a second draw over the top of the first.
 */
.card__numbers.is-locked,
.wager.is-locked,
.keno__aside.is-locked { pointer-events: none; }
/* Dimmed, so they read as waiting rather than as unresponsive. The wager
   itself stays lit - it is the bet being played - and so do the standings,
   which are there to be read. Only what you could have clicked goes quiet. */
.wager.is-locked .wager__actions,
.keno__aside.is-locked .archive__shot { opacity: .45; }

/* The ball on its way in, from whichever side: the same yellow at half
   strength, so passing through reads differently from stopping. */
/* The second selector is not a flourish: a picked square gets its blue from
   `.spot input:checked + span`, which outranks a plain `.spot--passing span` -
   so without matching that weight the ball would stay blue crossing exactly
   the numbers you care about. */
.spot--passing span,
.spot--passing input:checked + span {
  background: var(--gold); border-color: var(--gold-line); color: var(--gold-ink);
  opacity: .45;
}

/* The ball crossing a square that has already come out. It darkens and dips
   rather than lighting up, so you see it touched without it looking as though
   the number was drawn a second time. A filter rather than a colour, because
   what is underneath may be the yellow of a drawn number or the orange of one
   of yours. */
.spot--crossed span,
.spot--crossed input:checked + span {
  filter: brightness(.78) saturate(1.15);
  transform: scale(.93);
}

/* Hanging over one of your numbers on the way past. Brighter than an ordinary
   pass and slightly raised, because this is the moment worth watching: it is
   sitting on your number and has not decided yet. */
.spot--teasing span,
.spot--teasing input:checked + span {
  opacity: 1;
  transform: scale(1.12);
  box-shadow: 0 0 0 3px rgba(246, 196, 69, .45);
  z-index: 2; position: relative;
}

/* A ball landing: a beat of gold before it settles into drawn or hit. The 2004
   page turned the square yellow, which is the bit people remember. */
@keyframes keno-land {
  0%   { transform: scale(.7); background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
  55%  { transform: scale(1.18); background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
  100% { transform: scale(1); }
}
.spot--landing span { animation: keno-land .5s ease-out; z-index: 1; position: relative; }

/* Landing on one of yours. Bigger, and a ring that opens out of it, so a hit
   reads across the room and a miss does not. */
@keyframes keno-hit {
  0%   { transform: scale(.7); box-shadow: 0 0 0 0 rgba(200, 87, 27, .55); }
  45%  { transform: scale(1.32); box-shadow: 0 0 0 10px rgba(200, 87, 27, 0); }
  70%  { transform: scale(.96); }
  100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(200, 87, 27, .2); }
}
.spot--landing-hit span { animation: keno-hit .68s cubic-bezier(.2, .9, .3, 1.2); z-index: 2; }

/* The churn, once, before the first ball. */
@keyframes keno-shuffle {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}
.card__numbers.is-shuffling span { animation: keno-shuffle .22s ease-in-out infinite; }
.card__numbers.is-shuffling .spot:nth-child(3n) span { animation-delay: .07s; }
.card__numbers.is-shuffling .spot:nth-child(3n+1) span { animation-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
  .spot--landing span,
  .spot--landing-hit span,
  .card__numbers.is-shuffling span { animation: none; }
  .spot--teasing span,
  .spot--crossed span { transform: none; }
}

/* --- when a page is not there -------------------------------------------- */

.lost { max-width: 46ch; padding-block: 18px; }
.lost h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 10px; text-wrap: balance; }
.lost p { color: var(--muted); margin-bottom: 14px; text-wrap: pretty; }
.lost__where { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 600; }


/* --- the beer tab -------------------------------------------------------- */

.beer-form {
  display: grid; gap: 12px 16px; align-items: end;
  grid-template-columns: minmax(0, 1.1fr) auto 76px minmax(0, 1.2fr) 150px auto;
}
.beer-form__direction { border: 0; margin: 0; padding: 0; }
.beer-form__direction legend {
  padding: 0 0 5px; font-size: 13.5px; font-weight: 600; color: var(--ink-secondary);
}
.beer-form__choices { display: flex; gap: 6px; }
.beer-form__choices .wager__choice span { min-height: var(--tap); padding: 0 14px; font-size: 14px; }
.beer-form .form-actions { margin: 0; }
.beer-form .button { border: 0; cursor: pointer; }
.beer-form select, .beer-form input {
  min-height: var(--tap); padding: 0 12px; width: 100%;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 16px;
}
.beer-form select:focus, .beer-form input:focus {
  outline: none; border-color: var(--water); box-shadow: 0 0 0 3px rgba(14, 98, 114, .18);
}

.tab-row {
  display: grid; gap: 10px 16px; align-items: baseline;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) auto auto;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px;
}
.tab-row:first-of-type { border-top: 0; }
.tab-row form { margin: 0; }
.tab-row__who { font-weight: 600; overflow-wrap: anywhere; }
.tab-row__part { color: var(--muted); font-variant-numeric: tabular-nums; }
.tab-row__when { color: var(--faint); font-size: 12.5px; text-align: right; }
.tab-row__fixed { color: var(--faint); font-size: 12.5px; font-style: italic; }
/* Somebody the crew keeps a tab for who will never sign in. */
.tab-row__nologin {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  background: var(--line); color: var(--muted); font-size: 11px; font-weight: 700;
}
.tab-row__owed { font-weight: 700; text-align: right; white-space: nowrap; }
.tab-row__owed.is-up { color: var(--water); }
.tab-row__owed.is-down { color: var(--sun); }

@media (max-width: 720px) {
  .beer-form { grid-template-columns: minmax(0, 1fr); }
  .beer-form__choices { flex-wrap: wrap; }
  .tab-row { grid-template-columns: minmax(0, 1fr) auto; }
}

/* --- your own account ----------------------------------------------------- */

/* What you owe, said once and large, before the entries that add up to it. */
.tab-total { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.tab-total.is-up { color: var(--water); }
.tab-total.is-down { color: var(--sun); }

.tab-list { list-style: none; margin: 0 0 12px; padding: 0; }
.tab-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px;
  padding: 8px 0; border-top: 1px solid var(--line); align-items: baseline;
}
.tab-list li:first-child { border-top: 0; }
.tab-list__what { min-width: 0; }
.tab-list__where { display: block; color: var(--faint); font-size: 13px; }
.tab-list__beers { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab-list__beers.is-up { color: var(--water); }
.tab-list__beers.is-down { color: var(--sun); }