/* Companion setup page — phones and laptops, normal responsive rules.
   Momentum-themed to match what a new board looks like (new boards default
   to the Momentum theme): pure-black canvas, #121212 surfaces, white-alpha
   tiles/hairlines, pill controls with the white-alpha ring. */
:root {
  --bg: #000;
  --bg-card: #121212;
  --bg-card-2: rgba(255, 255, 255, 0.11);
  --ink: rgba(255, 255, 255, 0.95);
  --ink-dim: rgba(255, 255, 255, 0.72);
  --accent: #64b4fa;
  --ring: rgba(255, 255, 255, 0.3);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
.setup { max-width: 640px; margin: 0 auto; padding: 28px 20px 80px; display: flex; flex-direction: column; gap: 28px; }
#step-1:not([hidden]), #step-2:not([hidden]) { display: flex; flex-direction: column; gap: 28px; }
.step__label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); margin: 0; }
.step__head { display: flex; align-items: center; gap: 14px; }
.step__nav { display: flex; justify-content: flex-end; }
#to-step-1 { background: none; }
.setup__head h1 { font-size: 1.7rem; margin-bottom: 8px; }
.setup__head p, .hint { color: var(--ink-dim); font-size: 1rem; }
h2 { font-size: 1.15rem; margin-bottom: 10px; }
small { color: var(--ink-dim); font-weight: 400; }
label { display: block; margin: 10px 0 6px; font-weight: 600; }

input, select, button {
  font: inherit; color: var(--ink);
  background: var(--bg-card); border: 2px solid var(--ring);
  border-radius: 12px; padding: 12px 14px; width: 100%;
  min-height: 48px;
}
button { cursor: pointer; width: auto; background: none; border-radius: 999px; }
button.primary { background: rgba(255, 255, 255, 0.95); color: rgba(0, 0, 0, 0.95); font-weight: 400; padding: 14px 28px; }
/* Separate the non-touch action from the setup-code block above it (the footer
   has no gap, so this button otherwise butts against the revealed code-out). */
#get-signage-url { margin-top: 24px; }

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.checks label {
  display: flex; align-items: center; gap: 10px; margin: 0;
  background: var(--bg-card-2); border-radius: 12px; padding: 12px 14px; font-weight: 400;
}
.checks input { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); }

#widgets { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.wpick__group { display: flex; flex-direction: column; gap: 8px; }
.wpick__title {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0;
}
.setup__group {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim); border-top: 1px solid var(--bg-card-2); padding-top: 22px; margin-bottom: -12px;
}

.pickrow, .ziprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pickrow select { flex: 1 1 140px; }
.ziprow input { flex: 1; }
.segmented { display: inline-flex; border: 2px solid var(--ring); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.seg { min-height: 48px; padding: 0 20px; border: none; border-radius: 0; background: none; color: var(--ink-dim); cursor: pointer; width: auto; }
.seg.is-active { background: rgba(255, 255, 255, 0.95); color: rgba(0, 0, 0, 0.95); font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
/* Station search results already on the card: visible but inert. */
.picklist__item--added { opacity: 0.45; pointer-events: none; }
.chips button {
  background: var(--bg-card-2); border: none; border-radius: 999px; font-size: 0.95rem;
}

/* Ordered ticker list — the SAME component as the board's Markets pane
   (site/js/settings/reorder.js), skinned for 390px. Two deliberate
   differences from the board: rows go two-line (symbol over name — three 44px
   controls plus "CBG.L · Close Brothers" truncates on one line here), and
   controls drop from 56px to the 44px touch floor. */
.tk-list { display: flex; flex-direction: column; gap: 8px; position: relative; margin-bottom: 6px; }
.tk-row {
  display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 8px 10px;
  background: var(--bg-card-2); border: 1px solid transparent; border-radius: 12px; flex: none;
  -webkit-user-select: none; user-select: none;
}
.tk-row--below { background: transparent; border-color: rgba(147, 160, 180, 0.18); }
.tk-pos { width: 20px; flex: none; font-size: 0.875rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; text-align: right; }
.tk-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tk-lead { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-sub { font-size: 0.875rem; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* touch-action:none is on the handle ALONE. Anywhere else and a drag would
   fight the page scroll, which is the classic touch-list failure. */
.tk-grip {
  width: 44px; height: 44px; min-height: 44px; flex: none; padding: 0; border: none;
  border-radius: 10px; background: rgba(255, 255, 255, 0.09); color: var(--ink-dim);
  touch-action: none; display: inline-flex; align-items: center; justify-content: center;
}
.tk-grip svg { width: 24px; height: 24px; pointer-events: none; }
.tk-grip:active { background: rgba(100, 180, 250, 0.35); color: var(--ink); }
.tk-rm {
  width: 44px; height: 44px; min-height: 44px; flex: none; margin-left: 8px; padding: 0;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.09);
  color: var(--ink); font-size: 1.05rem;
}
.tk-row--drag {
  position: absolute; left: 0; right: 0; z-index: 4;
  background: #232323; border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.85);
}
.tk-slot { background: transparent; border: 2px dashed rgba(100, 180, 250, 0.55); }
.tk-fold { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.tk-fold__rule { flex: 1 1 auto; height: 1px; background: rgba(100, 180, 250, 0.45); }
.tk-fold__label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.tk-fold--below .tk-fold__rule { background: rgba(147, 160, 180, 0.3); }
.tk-fold--below .tk-fold__label { color: var(--ink-dim); }
#sym-note:empty { display: none; }

/* TfL line picker — /setup loads only setup.css, so these mirror main.css's
   .tflchip rules (were missing here: no gap → chips overlapped; no --off dim →
   selection looked like it did nothing; no dot size → invisible dots). */
.setup__subhead { font-size: 0.8rem; color: var(--ink-dim); margin: 16px 0 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.tflchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tflchip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: none; background: var(--bg-card-2); color: var(--ink); font-size: 1rem; min-height: 44px; }
.tflchip__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); }
.tflchip--off { opacity: 0.4; }

/* photo-setup walkthrough steps (open, not folded — the steps are the point). */
.steps { margin: 6px 0 14px; padding-left: 24px; color: var(--ink-dim); display: flex; flex-direction: column; gap: 9px; }
.steps li::marker { color: var(--ink-dim); }
.steps b, .steps code { color: var(--ink); font-weight: 600; }
.steps code { font-size: 0.95em; }
.ps-ok { color: #5ec27a; }
.ps-bad { color: #e8737a; }
.code-out__label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; }
/* The mint button breathes: air above the hint and roomier pill padding; a
   dimmed disabled state so "nothing validated yet" is visible, not a dead tap. */
#ps-getcode { margin-top: 12px; padding: 16px 36px; }
button:disabled { opacity: 0.45; cursor: default; }
/* Inline glyphs matching the Photos app's buttons: circled-ellipsis More and
   square-and-pencil Edit. */
.ic-more, .ic-edit { width: 1.15em; height: 1.15em; vertical-align: -0.22em; color: var(--ink); }
/* The privacy paragraph stands apart from the intro sentence. */
.setup__head-note { margin-top: 14px; }

/* Scheduled-mode window rows (native time inputs). */
#schedule-editor { margin-top: 10px; }
#schedule-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.sched-row { display: flex; align-items: center; gap: 10px; }
.sched-row input[type="time"] { width: auto; }

/* Required-field affordance. Calm at rest (the page's uppercase micro style, in
   the same dim as every other label), and it takes the accent only while the
   field is still empty, which is the one moment it has anything to say. The
   word, not an asterisk: an asterisk is a legend nobody reads. */
.req {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim); margin-left: 8px; white-space: nowrap;
}
.req--unmet { color: var(--accent); }
/* The line above a greyed-out output button. It wears the SAME accent as the
   unmet Required badges, so the sentence and the fields it sends you to read
   as one thing. */
.hint--guard { color: var(--accent); margin-bottom: 12px; }

.code-out { margin-top: 18px; background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; padding: 20px; }
.code-out output { font-size: 2.6rem; letter-spacing: 0.3em; font-weight: 700; display: block; }
.code-out p { color: var(--ink-dim); }
/* Code and its Copy button on one line where there is room; on a narrow phone
   the six tracked characters take the width and the button wraps under them
   whole, which is why the button is never allowed to shrink. */
.code-out__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 10px; }
#copy-code { flex: none; padding: 12px 24px; }
#copy-code.is-copied { border-color: var(--accent); color: var(--accent); }
#code-summary { margin-top: 10px; }
#code-summary:empty { display: none; }
#code-help, #code-error, #code-copied { margin-top: 10px; }
.alertcheck { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 400; }
.alertcheck input { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); }

/* MTA line bullets (mirrors the board settings) */
.linechips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.bullet {
  width: 40px; height: 40px; min-height: 0; padding: 0; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff; background: #808183; cursor: pointer;
}
.linechip--off { opacity: 0.25; }
.bullet--1, .bullet--2, .bullet--3 { background: #ee352e; }
.bullet--4, .bullet--5, .bullet--6 { background: #00933c; }
.bullet--7 { background: #b933ad; }
.bullet--A, .bullet--C, .bullet--E { background: #0039a6; }
.bullet--B, .bullet--D, .bullet--F, .bullet--M { background: #ff6319; }
.bullet--G { background: #6cbe45; }
.bullet--J, .bullet--Z { background: #996633; }
.bullet--L { background: #a7a9ac; }
.bullet--N, .bullet--Q, .bullet--R, .bullet--W { background: #fccc0a; color: #111; }
.bullet--S { background: #808183; }
.bullet--SI { background: #0f3d92; }

/* In-app notice (replaces browser alert() — the native "…says" dialog broke
   the theme). Bottom-pinned toast; tap or wait to dismiss. */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  /* Explicit width: a fixed element at left:50% shrink-fits into HALF the
     viewport, which collapsed the toast into a skinny tower on phones. */
  width: max-content; max-width: min(92vw, 560px); padding: 14px 22px;
  background: var(--bg-card); border: 2px solid var(--ring); border-radius: 16px;
  color: var(--ink); font-size: 1rem; line-height: 1.4; text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); cursor: pointer; z-index: 10;
}