/* Discover. Phone first, and the same palette as the desktop app. */

:root {
  --bg: #10151b;
  --panel: #1c242d;
  --field: #111820;
  --border: #3b4a5a;
  --text: #f6f2ea;
  --muted: #b8c4cf;
  --blue: #1b7890;
  --blue-2: #4eb4d5;
  --red: #9f352b;
  --gold: #df9b12;
  --green: #3f7d4a;

  --bar-h: 52px;
  --tabs-h: 56px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: none;
}

/* Inputs below 16px make Safari zoom the whole page on focus. */
input, textarea, button, select { font-size: 16px; font-family: inherit; }

/* --------------------------------------------------------------- chrome -- */

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 14px 0;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.bar h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: .3px; }
.bar .icon {
  background: none; border: 0; color: var(--muted);
  font-size: 22px; padding: 4px 8px; line-height: 1;
}

main {
  padding: calc(var(--bar-h) + env(safe-area-inset-top) + 12px) 12px
           calc(var(--tabs-h) + env(safe-area-inset-bottom) + 24px);
  max-width: 720px; margin: 0 auto;
}

.tabs {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tabs-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.tabs button {
  background: none; border: 0; color: var(--muted);
  font-size: 13px; font-weight: 500; padding: 0 0 2px;
}
.tabs button.on { color: var(--blue-2); box-shadow: inset 0 2px 0 var(--blue-2); }

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

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.card h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.hint { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.hint code { background: var(--field); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.state { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.state.bad { color: var(--gold); }

/* -------------------------------------------------------------- controls -- */

/* Centering button text, in two parts.
 *
 * Buttons do not inherit line-height, so their label sits on a text baseline
 * rather than in the middle of the box. Flex centering fixes that, and gets the
 * ink within 0.2px of centre on a label like "Paste A List".
 *
 * Measured centre still reads as slightly low, because the eye centres on the
 * x-height band where the letter bodies are, not on the cap-top-to-baseline
 * extent. So every button also carries a 1px optical lift: the padding is a
 * pixel lighter on top and a pixel heavier underneath, which shifts the text up
 * without changing the height of anything.
 *
 * The lift is a fixed amount rather than one measured per label on purpose.
 * Centring each label on its own ink would put "Setup" and "Saved" at different
 * heights in the same row of tabs. */
button {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1.2;
  background: #25313e; color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 14px 11px; font-weight: 500;
}

button:active { opacity: .7; }
.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.ghost { background: transparent; color: var(--muted); }
.ghost.danger { color: var(--red); border-color: var(--red); }
.big { width: 100%; padding: 14px 15px 16px; font-size: 17px; font-weight: 600; }
.wide { width: 100%; margin-top: 8px; }
button[disabled] { opacity: .45; }

input[type=text], textarea {
  width: 100%;
  background: var(--field); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 11px 12px;
}
textarea { resize: vertical; margin-bottom: 8px; }
input:focus, textarea:focus { outline: none; border-color: var(--blue-2); }

.adder { display: flex; gap: 8px; }
.adder input { flex: 1; min-width: 0; }

.row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.row button { flex: 1; }

/* A need is a count paired with what it is for, so the count stays narrow and
   the description takes whatever is left. */
.needs { display: grid; gap: 8px; }
.needRow { display: flex; gap: 8px; }
.needRow input { min-width: 0; }
.needRow input.needCount { width: 62px; flex: none; text-align: center; }
.needRow input:not(.needCount) { flex: 1; }
.needRow button { flex: none; width: 44px; padding: 0; font-size: 18px; line-height: 1; }

.stepper { display: flex; align-items: center; gap: 16px; justify-content: center; }
.stepper button { width: 52px; height: 44px; padding: 0; position: relative; }
/* Two bars centered on the box itself, so the symbol is exactly in the middle
   whatever the font does. */
.pm::before, .plus::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: currentColor; border-radius: 1px;
}
.pm::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.plus::after { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.stepper span { font-size: 22px; font-weight: 600; min-width: 44px; text-align: center; }

.check { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--muted); font-size: 14px; }
.check input { width: 20px; height: 20px; accent-color: var(--blue); }

/* ---------------------------------------------------------------- chips -- */

.chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.chips:empty { margin: 0; }
.chips li, .chips button {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--field); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px 8px; font-size: 13px; color: var(--text);
}
.chips li .x { color: var(--muted); font-size: 16px; line-height: 1; padding-left: 2px; }
.picker button.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* -------------------------------------------------------------- options -- */

.options { display: grid; gap: 8px; }
/* Stacked label over blurb, so these opt out of the base flex centering and
   stay block level with the text left aligned. */
.options button {
  display: block; text-align: left; padding: 11px 14px 13px; width: 100%;
  background: var(--field);
}
.options button.on { border-color: var(--blue-2); background: #17323c; }
.options b { display: block; font-size: 15px; font-weight: 600; }
.options small { color: var(--muted); font-size: 12.5px; }

/* ------------------------------------------------------------------ log -- */

.log {
  margin: 10px 0 0; padding: 10px;
  background: var(--field); border: 1px solid var(--border); border-radius: 9px;
  color: var(--muted); font-size: 12px; line-height: 1.5;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow-y: auto;
}

/* ------------------------------------------------------------ suggestion -- */

.sug { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.sug h3 { margin: 0; font-size: 16px; font-weight: 600; }
.sug .who { color: var(--blue-2); }
.sug .meta { margin: 5px 0 10px; color: var(--muted); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag { background: var(--field); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; }
.tag.ok { border-color: var(--green); color: #8fd39c; }
.tag.off { border-color: var(--gold); color: var(--gold); }
/* The quoted lyric, present only when a lyric or subject was asked for. It is
   the answer to the question in that case, so it leads. */
.sug .line {
  margin: 0 0 4px; padding: 8px 12px;
  border-left: 3px solid var(--gold);
  background: var(--field); border-radius: 0 8px 8px 0;
  font-size: 15px; font-style: italic; color: #f0e2c4;
}
.sug dl { margin: 0; }
.sug dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; margin-top: 9px; }
.sug dd { margin: 2px 0 0; font-size: 14px; }
.sug .row { margin-top: 12px; }
.sug .row button { padding: 9px; font-size: 14px; }

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

.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; }
/* A display rule beats the hidden attribute, so the sheet has to opt back out
   of it by hand or it sits open over the app on every load. */
.sheet[hidden] { display: none; }
.sheetBody {
  width: 100%; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}
.sheetBody h2 { margin: 0 0 14px; font-size: 18px; }
.sheetBody label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom) + 16px);
  z-index: 50;
  background: var(--blue); color: #fff;
  padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}

/* Suggestion chips. Every guide that has them shows them above its box, and
   tapping one is the same edit as typing the words in. Wrapped rather than
   scrolled, so nothing on offer is hidden off the right edge. */
.presets {
  display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 10px;
}
.presets button {
  flex: none;
  background: transparent; border: 1px dashed var(--border); border-radius: 999px;
  padding: 5px 12px 7px; font-size: 13px; color: var(--muted); font-weight: 400;
}
.presets button.on {
  background: var(--blue); border-color: var(--blue); border-style: solid;
  color: #fff; font-weight: 500;
}

/* The brief behind a kept song. Collapsed by default: the Kept tab is for the
   songs, and this is what you open weeks later to remember why one is here. */
.sug .brief { margin: 10px 0 0; }
.sug .brief summary {
  cursor: pointer; list-style: none;
  color: var(--muted); font-size: 12.5px;
  padding: 6px 0;
}
.sug .brief summary::-webkit-details-marker { display: none; }
/* Arrow after the label, pointing right when closed and down when open. */
/* 25B6 is the solid triangle that matches 25BC, not 25BA which is the thinner
   pointer glyph. FE0E forces text presentation: on iOS a bare 25B6 renders as
   the emoji play button. */
.sug .brief summary::after { content: ' \25B6\FE0E'; font-size: 10px; }
.sug .brief[open] summary::after { content: ' \25BC'; }
.sug .brief dl {
  margin: 2px 0 0; padding: 10px 12px;
  background: var(--field); border: 1px solid var(--border); border-radius: 9px;
}
.sug .brief dt { margin-top: 8px; }
.sug .brief dt:first-child { margin-top: 0; }
.sug .brief dd { font-size: 13px; color: var(--muted); }