/* SMELLS, after jasonkreher.com: a Google Sheets page. Everything is built from whole cells.
   Rows are a fixed height (--H). Columns repeat as G B C D per card, with a final G, where
   G is a gutter. app.js sets --n (cards per row) and draws the gridlines (--gridlines) to match. */
:root {
  --ink: #000;
  --paper: #fff;
  --grid: #dadce0;
  --muted: #555;
  --yellow: #ffff57;
  --magenta: #ea3bf7;
  --cyan: #75f9fb;
  --H: 28px;
  --n: 2;
  --line: 2px solid var(--ink);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 13px/1.25 Arial, "Helvetica Neue", Helvetica, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* one shared grid for every section */
.sheet {
  display: grid;
  grid-template-columns: 0.5fr repeat(var(--n), 1fr 2fr 2fr 0.5fr);
  grid-auto-rows: var(--H);
  max-width: 1100px; margin: 0 auto;
  background: var(--paper) var(--gridlines, none) repeat-y;
}
.sheet > * { min-width: 0; min-height: 0; margin: 0; }

/* ---------- header: rows 1–5 ---------- */
header.sheet {
  position: sticky; top: 0; z-index: 5;
  grid-template-rows: repeat(5, var(--H));
  padding-top: env(safe-area-inset-top);
  background-position: 0 env(safe-area-inset-top);
}
.band {
  grid-column: 2 / -2; grid-row: 2 / 5; background: var(--yellow);
  outline: var(--line); outline-offset: -1px;
}
h1 {
  grid-column: 3 / -3; grid-row: 3; z-index: 1;
  display: grid; place-items: center; background: var(--paper); outline: var(--line); outline-offset: -1px;
  font: 700 18px/1 Arial, Helvetica, sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.cell-btn {
  grid-row: 3; z-index: 1; border: 0; background: none; padding: 0; display: grid; place-items: center; color: var(--ink);
}
#menu-btn { grid-column: -3; }

/* ---------- menu: four blocks, magenta, cyan, yellow, white ---------- */
.menu {
  position: fixed; left: 0; right: 0; z-index: 6;
  top: calc(env(safe-area-inset-top) + 5 * var(--H));
  grid-template-rows: repeat(17, var(--H));
  border-bottom: var(--line);
}
.menu[hidden] { display: none; }
.m-band { grid-column: 2 / -2; outline: var(--line); outline-offset: -1px; }
.m-band[data-for="ranked"] { grid-row: 2 / 5; background: var(--magenta); }
.m-band[data-for="owned"] { grid-row: 6 / 9; background: var(--cyan); }
.m-band[data-for="queue"] { grid-row: 10 / 13; background: var(--yellow); }
.m-band[data-for="own"] { grid-row: 14 / 17; background: var(--paper); }
.menu button {
  grid-column: 3 / -3; z-index: 1; border: 0; background: var(--paper); outline: var(--line); outline-offset: -1px;
  font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
}
.menu button[data-view="ranked"] { grid-row: 3; }
.menu button[data-view="owned"] { grid-row: 7; }
.menu button[data-view="queue"] { grid-row: 11; }
.menu #own { grid-row: 15; }
.menu button.on { background: var(--ink); color: var(--paper); }
.menu small { font-weight: 400; margin-left: 6px; letter-spacing: .04em; }

/* ---------- controls: search and sort, then a blank row ---------- */
.controls { grid-template-rows: repeat(2, var(--H)); }
#search {
  grid-column: 2 / -4; grid-row: 1; border: 0; border-radius: 0; outline: var(--line); outline-offset: -1px;
  background: var(--paper); padding: 0 8px; font-size: 16px; -webkit-appearance: none; appearance: none;
}
#search::placeholder { color: #888; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
#sort {
  grid-column: -4 / -2; grid-row: 1; border: 0; border-radius: 0; outline: var(--line); outline-offset: -1px;
  padding: 0 30px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  -webkit-appearance: none; appearance: none;
  /* a bold down chevron, since the phone's own arrow is hidden */
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat right 10px center / 14px 9px;
}

/* ---------- cards: B–D wide, 11 rows tall plus a blank row, placed by app.js ----------
   Rows repeat per card: house, name (1.5 rows tall), 8 photo rows, bottom row, blank row. */
.cards {
  grid-auto-rows: var(--H) calc(1.5 * var(--H)) var(--H) var(--H) var(--H) var(--H) var(--H) var(--H) var(--H) var(--H) var(--H) var(--H);
  background-image: var(--gridlines-cards, none);
}
.card {
  display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
  border: 0; padding: 0; background: none; color: var(--ink); text-align: left;
  outline: var(--line); outline-offset: -1px;
}
.card > * { min-width: 0; min-height: 0; }
.score {                                        /* B2 */
  grid-column: 1; grid-row: 1; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
}
.score.top { background: var(--yellow); color: var(--ink); outline: var(--line); outline-offset: -1px; }
/* house in C2:D2; name in C3:D3, a row stretched to 1.5 rows tall so long names wrap to two lines, centered top to bottom */
.head { display: contents; }
.house, .name {
  grid-column: 2 / 4; align-self: center; padding: 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase;
}
.house { grid-row: 1; font-size: 9px; letter-spacing: .1em; color: var(--muted); }
.name {
  grid-row: 2; align-self: center; font-weight: 700; font-size: 12px; line-height: 1.2;
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bottle {                                       /* B4:D11 merged */
  grid-column: 1 / 4; grid-row: 3 / 11; background: var(--paper); box-shadow: inset 0 2px 0 var(--ink);
  overflow: hidden;
}
.bottle img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 10px 8px 6px; }
.foot {                                         /* C12:D12 merged */
  grid-column: 2 / 4; grid-row: 11; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  outline: var(--line); outline-offset: -1px;
}
.foot.owned { background: var(--cyan); }      /* tags match their menu block: Owned cyan, Queue yellow */
.foot.tag { background: var(--yellow); grid-column: 3; }   /* D12 only: "Queue" needs one cell */

/* letter tiles when there's no photo, in one of the three colors */
.ph { width: 100%; height: 100%; display: grid; place-items: center; }
.ph span { font: 700 44px Arial, Helvetica, sans-serif; }
.ph.c0 { background: var(--yellow); }
.ph.c1 { background: var(--magenta); }
.ph.c2 { background: var(--cyan); }
.bottle .ph { box-shadow: inset 0 2px 0 var(--ink); }

.empty.error { grid-row: 1 / 7; align-self: start; text-transform: none; letter-spacing: 0; font-size: 13px; }
.empty { grid-column: 2 / -2; grid-row: 1; align-self: center; padding: 0 6px; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }

/* ---------- detail and setup panels ---------- */
dialog.panel {
  width: calc(100% - 16px); max-width: 560px; max-height: 90vh; margin: auto auto 8px; padding: 0;
  border: 3px solid var(--ink); box-shadow: -5px 5px 0 var(--ink); border-radius: 0; background: var(--paper); color: var(--ink);
}
@media (min-width: 640px) { dialog.panel { margin: auto; } }
dialog.panel::backdrop { background: rgb(0 0 0 / .5); }
.close {
  position: absolute; top: 0; right: 0; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 0;
  background: var(--ink); color: var(--paper); font-size: 24px; line-height: 1;
}
.sheet-body { padding: 0 0 calc(24px + env(safe-area-inset-bottom)); }
.d-bottle { height: 40vh; max-height: 360px; border-bottom: 3px solid var(--ink); }
.d-bottle img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 20px; }
.d-bottle .ph span { font-size: 80px; }
.d-head { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px 0; }
.d-head .house { font-size: 10px; }
.d-head h2 { font: 700 22px/1.1 Arial, Helvetica, sans-serif; text-transform: uppercase; margin: 3px 0 8px; }
.d-score {
  flex: none; font-size: 30px; font-weight: 700; padding: 8px 10px 6px; background: var(--ink); color: var(--paper);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.d-score.top { background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); }
.tag.static, .owned.static {
  display: inline-block; flex: none; padding: 4px 8px 4px calc(8px + .06em); font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; border: 2px solid var(--ink); line-height: 1.2; text-align: center;
}
.tag.static { background: var(--yellow); }
.owned.static { background: var(--cyan); }
.d-notes { padding: 0 20px; font-size: 16px; line-height: 1.5; margin: 14px 0; }
.sheet-body > .muted { padding: 0 20px; }
.d-links { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 20px 0; }
.d-links a, .btn {
  display: inline-block; border: 2px solid var(--ink); border-radius: 0; padding: 9px 12px; color: var(--ink);
  text-decoration: none; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; background: var(--paper);
}
.d-links a:first-child { background: var(--cyan); }

.setup { padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
.setup h2 { font: 700 22px Arial, Helvetica, sans-serif; text-transform: uppercase; margin: 0 44px 10px 0; }
.setup .intro { margin: 0 0 12px; font-size: 16px; line-height: 1.4; }
.setup ol { padding-left: 20px; line-height: 1.5; }
.setup li { margin-bottom: 6px; }
.setup label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 0; }
.setup input { display: block; width: 100%; margin-top: 4px; border: 2px solid var(--ink); border-radius: 0; padding: 10px; font-size: 16px; }
.setup .btn { margin-top: 14px; background: var(--yellow); }
.err { color: #c00; font-weight: 700; }
.muted { color: var(--muted); }