/* =========================================================================
   All Around Outdoors :: Waffle Board - the owner's screen, built for a phone.

   This is run standing up, one handed, outdoors, by somebody who is not sitting
   at a desk and is not a computer person. Everything here follows from that:

     - Anything you tap is at least 48px, and the things you tap most are 56px
       and sit in the bottom third where a thumb reaches.
     - Every input is 16px or bigger. Under 16px, iOS zooms the page in when you
       focus a field and the person has to pinch back out every time.
     - Numbers are picked off a grid, not typed. You cannot fat-finger a square
       that is already sold if the sold ones are not tappable.
     - One screen does one job. No tab bar with six things on it.

   Loaded after app.css, which holds the colours and the shared components.
   ========================================================================= */

/* ------------------------------------------------------------ the shell */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Room for the bottom bar plus the home indicator on a notched phone. */
.app-main {
  flex: 1;
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

.app-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
}

.app-bar__item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 54px;
  padding: 4px 2px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.app-bar__item:active { background: var(--surface-2); }

.app-bar__item[aria-selected="true"] {
  color: var(--accent);
  background: var(--accent-soft);
}

.app-bar__glyph {
  width: 24px;
  height: 24px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A count sitting on the Squares icon, so "is there anything waiting" needs no tap. */
.app-bar__dot {
  position: absolute;
  transform: translate(14px, -12px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--warn);
  color: #1b1305;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}

/* ------------------------------------------------------- the top strip */

.app-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--gutter);
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.app-top__who {
  min-width: 0;
  flex: 1;
}

.app-top__name {
  display: block;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-top__sub {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
}

.iconbtn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}

.iconbtn:active { background: var(--surface-2); }
.iconbtn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ the tally

   Not called .hero: app.css already has a .hero for the public board page, and
   it is a two column grid on a wide screen. Sharing the name put the big number
   in the right hand column of a layout meant for a photo. */

.tally {
  padding: 22px var(--gutter) 6px;
  text-align: center;
}

.tally__board {
  font-size: 13px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.tally__count {
  font-size: clamp(44px, 17vw, 68px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}

.tally__count small {
  font-size: 0.42em;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0;
}

.tally__sub {
  font-size: 15px;
  color: var(--ink-2);
  margin: 0;
}

.tally__money {
  font-size: 20px;
  font-weight: 700;
  color: var(--good);
  font-variant-numeric: tabular-nums;
}

.meter {
  height: 12px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  margin: 14px 0 4px;
}

.meter__fill {
  display: block;   /* it is a span; without this it has no height at all */
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #ffc46b);
  transition: width 0.35s ease;
}

/* ------------------------------------------------------- big actions */

.bigbtn {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.bigbtn:active { transform: translateY(1px); }
.bigbtn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.bigbtn--quiet {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 16px;
  min-height: 52px;
  font-weight: 700;
}

.bigbtn--danger { background: var(--bad); color: #fff; }

.bigbtn svg {
  width: 22px; height: 22px; stroke: currentColor; fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

.actions {
  display: grid;
  gap: 10px;
  padding: 8px var(--gutter) 18px;
}

/* ------------------------------------------------------ the sheet */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.sheet[hidden] { display: none; }

.sheet__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--gutter);
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.sheet__title { font-size: 17px; font-weight: 800; flex: 1; margin: 0; }

.sheet__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px var(--gutter) 20px;
}

.sheet__foot {
  padding: 12px var(--gutter);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* ----------------------------------------------------- the square grid */

.picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 8px;
}

.picker__sq {
  appearance: none;
  aspect-ratio: 1;
  min-height: 58px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.picker__sq:active { background: var(--surface-3); }

.picker__sq[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
}

.picker__sq[disabled] {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-soft);
  color: var(--ink-3);
  opacity: 0.5;
  cursor: not-allowed;
}

.picker__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

.picker__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.picker__swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.picker__swatch--taken { border-style: dashed; background: transparent; opacity: 0.5; }
.picker__swatch--picked { background: var(--accent); border-color: var(--accent); }

/* --------------------------------------------------------- form fields */

.bigfield { display: block; margin: 0 0 16px; }

.bigfield__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 7px;
}

.bigfield__hint {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 6px;
}

.bigfield input,
.bigfield select,
.bigfield textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  /* 16px minimum or iOS zooms the whole page in on focus. */
  font-size: 17px;
}

.bigfield textarea { min-height: 96px; line-height: 1.5; }

.bigfield input:focus,
.bigfield select:focus,
.bigfield textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

/* A row of tappable options, for things that would otherwise be a dropdown. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
}

.chip[aria-pressed="true"],
.chip[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
}

/* --------------------------------------------------------- roster cards */

.rowcards { display: grid; gap: 10px; padding: 0 var(--gutter) 16px; }

.rowcard {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.rowcard__num {
  align-self: stretch;
  min-height: 54px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rowcard--paid .rowcard__num { background: var(--good-soft); color: var(--good); }
.rowcard--held .rowcard__num { background: var(--warn-soft); color: var(--warn); }
.rowcard--free .rowcard__num { background: var(--accent-soft); color: var(--accent); font-size: 15px; }

.rowcard__name { font-weight: 700; font-size: 16px; }
.rowcard__meta { font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.rowcard__meta a { color: var(--ink-2); }

.rowcard__do {
  grid-column: 1 / -1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  margin-top: 2px;
}

.minibtn {
  appearance: none;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.minibtn--go { background: var(--good); border-color: var(--good); color: #06210e; }
.minibtn--off { color: var(--ink-3); }

/* ------------------------------------------------------------- notices */

.bignote {
  margin: 0 var(--gutter) 16px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 15px;
}

.bignote strong { display: block; font-size: 17px; margin-bottom: 4px; }
.bignote--good { border-color: rgba(75, 189, 104, 0.4); background: var(--good-soft); }
.bignote--warn { border-color: rgba(224, 163, 58, 0.4); background: var(--warn-soft); }
.bignote--bad { border-color: rgba(232, 97, 76, 0.4); background: var(--bad-soft); }

.empty {
  text-align: center;
  padding: 40px var(--gutter);
  color: var(--ink-3);
}

.empty__big { font-size: 18px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }

/* ------------------------------------------------------ the draw screen */

.stage {
  margin: 0 var(--gutter) 16px;
  padding: 20px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
}

.stage__step {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stage__head { font-size: 22px; font-weight: 800; margin: 8px 0 6px; letter-spacing: -0.01em; }
.stage__body {
  color: var(--ink-2);
  font-size: 15px;
  margin: 0 auto 4px;
  max-width: 42ch;
  text-align: left;   /* a centred paragraph this long is hard work to read */
}

.countdown {
  font-size: clamp(34px, 13vw, 52px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin: 10px 0 2px;
}

.winner {
  font-size: clamp(56px, 22vw, 96px);
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 8px;
}

/* ------------------------------------------------------ setup, stepped */

.step { border-top: 1px solid var(--line-soft); }
.step:first-of-type { border-top: 0; }

.step__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px var(--gutter);
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 60px;
}

.step__no {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
}

.step[data-done="1"] .step__no { background: var(--good); color: #06210e; }
.step__title { flex: 1; font-weight: 700; font-size: 16px; }
.step__state { font-size: 13px; color: var(--ink-3); }
.step__body { padding: 0 var(--gutter) 22px; }
.step__body[hidden] { display: none; }

/* --------------------------------------------------- add to home screen */

.a2hs {
  margin: 0 var(--gutter) 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px dashed var(--accent-line);
  background: var(--accent-soft);
  font-size: 14px;
  color: var(--ink-2);
}

.a2hs strong { color: var(--ink); }

/* ============================================================== desktop */

@media (min-width: 820px) {
  .app-main {
    padding-bottom: 40px;
    max-width: var(--wrap);
    margin: 0 auto;
    width: 100%;
  }

  /* The bar moves to the top and reads as tabs. Same markup, same code.
     order: -1 is what actually moves it - the shell is a flex column and the
     bar is its last child, so sticky alone would keep it at the bottom. */
  /* Header first, then the tabs, then the page. */
  .app-top { order: -2; }

  .app-bar {
    order: -1;
    position: sticky;
    top: 0;
    bottom: auto;
    max-width: var(--wrap);
    margin: 0 auto;
    grid-auto-columns: max-content;
    justify-content: start;
    gap: 4px;
    width: 100%;
    padding: 8px var(--gutter);
    border-top: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    background: var(--bg);
  }

  .app-bar__item {
    flex-direction: row;
    gap: 8px;
    font-size: 15px;
    min-height: 44px;
    padding: 8px 14px;
  }

  .app-bar__glyph { width: 18px; height: 18px; }
  .app-bar__dot { transform: translate(8px, -10px); }

  .tally { text-align: left; padding-top: 28px; }
  .tally__count { font-size: 56px; }

  .actions {
    grid-auto-flow: column;
    justify-content: start;
    grid-auto-columns: minmax(200px, auto);
  }

  .sheet {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(620px, calc(100vw - 48px));
    max-height: min(860px, calc(100vh - 48px));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .sheet::backdrop { background: rgba(0, 0, 0, 0.5); }

  .rowcards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1100px) {
  .rowcards { grid-template-columns: 1fr 1fr 1fr; }
}

/* The dim backdrop behind a sheet on a phone is the sheet itself (full screen),
   so this only matters on desktop where the sheet floats. */
.sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.55);
}

.sheet-scrim[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .meter__fill { transition: none; }
  .bigbtn:active { transform: none; }
}

/* Stop the page behind a sheet scrolling when you drag inside the sheet. */
.u-noscroll { overflow: hidden; }

/* ------------------------------------------------- the forms we kept

   Board setup, settings and people are long forms full of named fields that the
   rest of the app reads by name. Rather than rebuild them and risk breaking
   what they feed, everything inside the app gets sized for a thumb: 48px
   minimum on anything tappable, and never below 16px of text in a field,
   because under 16px iOS zooms the page in the moment you tap one. */

.app-shell .field input,
.app-shell .field select,
.app-shell .field textarea {
  min-height: 48px;
  font-size: 16px;
  padding: 11px 12px;
}

.app-shell .field textarea { min-height: 92px; }

.app-shell .btn { min-height: 46px; font-size: 15px; }
.app-shell .btn--sm { min-height: 40px; }
.app-shell .btn--block { width: 100%; }

.app-shell summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.app-shell .check { min-height: 48px; padding: 10px 0; }
.app-shell .check input { width: 22px; height: 22px; }

/* A wide table on a narrow screen scrolls inside its own box rather than
   pushing the whole page sideways. */
.app-shell .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 819px) {
  /* The table view of the roster is for a desk. The cards say the same thing. */
  #roster-table-wrap { display: none; }
  .app-shell .grid-2,
  .app-shell .grid-3 { grid-template-columns: 1fr; }
}

/* The toast has to clear the bottom bar, or the message about what just happened
   sits behind the thing you tap next. */
@media (max-width: 819px) {
  body .toast-host { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Solid, not translucent. A see-through message sitting over a button with its
   own text in it is unreadable on a phone, which is the only place it appears. */
body .toast {
  background: var(--surface-3);
  box-shadow: var(--shadow);
  font-size: 15px;
  padding: 13px 16px;
  border-left: 4px solid var(--line);
}

body .toast--good { background: var(--surface-3); border-left-color: var(--good); }
body .toast--error { background: var(--surface-3); border-left-color: var(--bad); }