/* Light Ops Crew: the installers' phone app (decided with Brendan 2026-09-27, docs/CREW-APP-PLAN.md).
   Follows the phone's light or dark setting. Light is the ChatGPT app's look (Brendan 2026-09-27: "very professional"):
   white, near-black text, soft greys, black primary buttons, color only where it means something (done, in progress,
   repair). Dark is the Light Guys' navy and gold. Phone first: 44px+ targets, 16px fields, safe areas, one scroll area
   per tab, bottom sheets that swipe down to close. The --gold* names are the primary accent in either look.
   The redesign (Brendan's designer, 2026-09-28, "Direction 1"): rows sit on the page with hairlines instead of cards,
   one line of tags per row, 56px main buttons under the thumb, the bulb string does the progress work, and every
   screen fits 320–430px. */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  /* Sheets (a job's page, the form sheets). */
  --sheet: #ffffff;
  --surface-2: #f4f4f4;
  --surface-3: #e6e6e6;
  --line: #efefef;
  --line-strong: #dcdcdc;
  --ink: #0d0d0d;
  --text: #1f1f1f;
  --muted: #5d5d5d;
  --faint: #9a9a9a;
  --gold: #0d0d0d;
  --gold-2: #0d0d0d;
  --gold-ink: #ffffff;
  --gold-text: #0d0d0d;
  --gold-tint: #f4f4f4;
  /* Small uppercase labels (eyebrows, group headings). */
  --label: #5d5d5d;
  --green: #0a7d61;
  --green-tint: #e7f6f2;
  --green-fill: #10a37f;
  --orange: #b54708;
  --orange-tint: #fef4e6;
  --orange-fill: #f08c00;
  --blue: #0169cc;
  --blue-tint: #e6f2ff;
  --blue-fill: #0285ff;
  --red: #d92d20;
  --red-tint: #fdecec;
  --red-fill: #e02e2a;
  --bulb-wire: #d4d4d4;
  --focus-line: #d9ad4f;
  --bulb-cap: #a3a3a3;
  --bulb-off: #e6e6e6;
  --bulb-edge: inset 0 0 0 .5px rgba(0, 0, 0, .14);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, .12);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, .10);
  /* The big card on Today: a hairline ring and a soft drop. */
  --card-shadow: 0 0 0 1px #ececec, 0 12px 32px -16px rgba(0, 0, 0, .18);
  --primary-shadow: none;
  --go-shadow: none;
  --scrim: rgba(0, 0, 0, .28);
  --bar: rgba(255, 255, 255, .94);
  --toast: #0d0d0d;
  --toast-text: #ffffff;
  --toast-accent: #ffffff;
  --behind: #1c1c1e;
  --radius: 18px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.2, .9, .25, 1.12);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  color-scheme: light;
}

/* Dark: chosen in Me → Appearance, or the phone is dark and they left it on Automatic. */
:root[data-theme="dark"] {
  --bg: #060a14;
  --surface: #0f1829;
  --sheet: #0c1424;
  --surface-2: #151f34;
  --surface-3: #22304c;
  --line: #18223a;
  --line-strong: #2b3853;
  --ink: #f4efe4;
  --text: #cdd5e1;
  --muted: #9fb0c8;
  --faint: #6d7f99;
  --gold: #f3d28a;
  --gold-2: #ebc063;
  --gold-ink: #2a1d05;
  --gold-text: #f3d28a;
  --gold-tint: #2a2413;
  --label: #f3d28a;
  --green: #52c790;
  --green-tint: #0f2e1f;
  --green-fill: #23a468;
  --orange: #f2a65d;
  --orange-tint: #33220d;
  --orange-fill: #df862f;
  --blue: #86b5ff;
  --blue-tint: #13254a;
  --blue-fill: #3576dd;
  --red: #ff8077;
  --red-tint: #3a1513;
  --red-fill: #e5534b;
  --bulb-wire: #2b3853;
  --focus-line: #f3d28a;
  --bulb-cap: #3a4866;
  --bulb-off: #22304c;
  --bulb-edge: inset 0 0 0 0 transparent;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, .55);
  --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, .55);
  --card-shadow: 0 0 0 1px #1f2a40, 0 20px 40px -24px rgba(0, 0, 0, .8);
  --primary-shadow: 0 10px 26px -12px rgba(255, 207, 118, .55);
  --go-shadow: 0 6px 18px -6px rgba(31, 157, 99, .55);
  --scrim: rgba(0, 0, 0, .55);
  --bar: rgba(8, 13, 26, .9);
  --toast: #1c2842;
  --toast-text: #f4efe4;
  --toast-accent: #f3d28a;
  --behind: #000;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #060a14;
    --surface: #0f1829;
    --sheet: #0c1424;
    --surface-2: #151f34;
    --surface-3: #22304c;
    --line: #18223a;
    --line-strong: #2b3853;
    --ink: #f4efe4;
    --text: #cdd5e1;
    --muted: #9fb0c8;
    --faint: #6d7f99;
    --gold: #f3d28a;
    --gold-2: #ebc063;
    --gold-ink: #2a1d05;
    --gold-text: #f3d28a;
    --gold-tint: #2a2413;
    --label: #f3d28a;
    --green: #52c790;
    --green-tint: #0f2e1f;
    --green-fill: #23a468;
    --orange: #f2a65d;
    --orange-tint: #33220d;
    --orange-fill: #df862f;
    --blue: #86b5ff;
    --blue-tint: #13254a;
    --blue-fill: #3576dd;
    --red: #ff8077;
    --red-tint: #3a1513;
    --red-fill: #e5534b;
    --bulb-wire: #2b3853;
    --focus-line: #f3d28a;
    --bulb-cap: #3a4866;
    --bulb-off: #22304c;
    --bulb-edge: inset 0 0 0 0 transparent;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, .55);
    --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, .55);
    --card-shadow: 0 0 0 1px #1f2a40, 0 20px 40px -24px rgba(0, 0, 0, .8);
    --primary-shadow: 0 10px 26px -12px rgba(255, 207, 118, .55);
    --go-shadow: 0 6px 18px -6px rgba(31, 157, 99, .55);
    --scrim: rgba(0, 0, 0, .55);
    --bar: rgba(8, 13, 26, .9);
    --toast: #1c2842;
    --toast-text: #f4efe4;
    --toast-accent: #f3d28a;
    --behind: #000;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body.is-behind { background: var(--behind); }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
svg { flex: none; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2.5px solid var(--gold-2); outline-offset: 2px; border-radius: 10px; }
/* Fields (decided with Brendan 2026-09-27): tapping one turns its own border gold. One border: no outline, ring or
   glow on the field or around it (Safari's own focus ring included), and nothing moves or resizes. */
input:is(:focus, :focus-visible), textarea:is(:focus, :focus-visible), select:is(:focus, :focus-visible) { outline: none; box-shadow: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ frame */

.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transform-origin: 50% 0;
  transition: transform .5s var(--ease), border-radius .5s var(--ease);
  overflow: hidden;
}
.app.is-back {
  transform: translateY(calc(var(--sat) + 6px)) scale(.93);
  border-radius: 14px;
}
.panels { position: relative; flex: 1; min-height: 0; }
/* --gut is the page's side margin; lists run edge to edge by pulling out by it. */
.panel {
  --gut: 16px;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--sat) + 14px) calc(var(--sar) + var(--gut)) calc(var(--sab) + 108px) calc(var(--sal) + var(--gut));
  scroll-padding-top: calc(var(--sat) + 64px);
}
.panel-inner { max-width: 640px; margin: 0 auto; }

/* The compact bar that appears once the big title scrolls away (like iOS). */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 15;
  padding: calc(var(--sat) + 10px) 16px 10px;
  text-align: center;
  font: 700 16px/1.25 var(--sans);
  color: var(--ink);
  background: var(--bar);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.topbar.is-on { opacity: 1; transform: none; }

/* Five equal tabs; the open one gets a pill behind its icon, a heavier line and a bold label. */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 8px calc(var(--sar) + 6px) max(var(--sab), 10px) calc(var(--sal) + 6px);
  background: var(--bar);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-top: 1px solid var(--line);
}
.tabbar > .hxw { min-width: 0; }
.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 46px;
  font: 600 11px/1.2 var(--sans);
  color: var(--faint);
  transition: color .15s ease;
}
.tab-ic { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background-color .2s ease, transform .25s var(--spring); }
.tab svg { width: 23px; height: 23px; }
.tab-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.tab[aria-selected="true"] .tab-ic { background: var(--surface-2); }
.tab[aria-selected="true"] svg { stroke-width: 2.2; }
.tab:active .tab-ic { transform: scale(.9); }
.tab .badge {
  position: absolute;
  top: -3px;
  left: 50%;
  margin-left: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--orange-fill);
  color: #fff;
  font: 700 11px/18px var(--sans);
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}

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

.hd { display: grid; padding: 0 4px; }
/* Small caps labels: eyebrows, group headings, counts. */
.eyebrow {
  font: 700 11.5px/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label);
}
.title {
  margin: 0;
  font: 500 40px/1 var(--serif);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.hd .eyebrow + .title { margin-top: 6px; }
.sub { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.35; }
.hd-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hd-row > div { min-width: 0; display: grid; }
.hd-row .sub { margin-top: 6px; }

.netbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
}
.netbar svg { width: 18px; height: 18px; color: var(--orange); }
.netbar b { color: var(--ink); }
.netbar .go { margin: -6px 0 -6px auto; min-height: 44px; padding: 0 6px; font-weight: 700; color: var(--gold-text); }

.preview-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--gold-tint);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.4;
}
.preview-note b { color: var(--ink); }
.preview-note svg { width: 18px; height: 18px; color: var(--gold-text); margin-top: 1px; }

/* ------------------------------------------------------------------ cards and buttons */

.card {
  background: var(--surface);
  border-radius: 24px;
  box-shadow: var(--card-shadow);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 18px;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--ink);
  font: 700 16px/1 var(--sans);
  letter-spacing: .005em;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform .14s ease, background-color .2s ease, opacity .2s ease;
  user-select: none;
  -webkit-user-select: none;
}
.btn svg { width: 19px; height: 19px; }
.btn:active { transform: scale(.965); }
.btn.primary { background: var(--gold); color: var(--gold-ink); box-shadow: var(--primary-shadow); }
.btn.go { background: var(--green-fill); color: #fff; box-shadow: var(--go-shadow); }
.btn.soft { background: var(--surface-2); color: var(--ink); }
.btn.warn { background: var(--orange-tint); color: var(--orange); }
.btn.small { height: 44px; padding: 0 14px; border-radius: 12px; font-size: 14.5px; }
.btn.small svg { width: 17px; height: 17px; }
.btn.add { height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; gap: 6px; }
.btn.add svg { width: 16px; height: 16px; stroke-width: 2.6; }
.btn .bl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* Haptic overlay (iPhone): an invisible switch over the button; tapping it gives the phone's own tick. */
.hxw { position: relative; display: grid; }
.hxw > .btn, .hxw > .tab, .hxw > .fc { width: 100%; }
.hx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: .001;
  z-index: 2;
  cursor: pointer;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 27px;
  padding: 0 10px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  font: 600 12.5px/1 var(--sans);
  white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; color: var(--muted); }
.chip.code { font: 700 12.5px/1 var(--mono); letter-spacing: .05em; }
.chip.mine { background: var(--gold-tint); color: var(--gold-text); }
.chip.warn { background: var(--orange-tint); color: var(--orange); }
.chip.live { background: var(--blue-tint); color: var(--blue); }
.chip.done { background: var(--green-tint); color: var(--green); }
.chip.lnchip { gap: 4px; background: var(--green-tint); color: var(--green); font: 700 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.chip.lnchip svg { width: 12px; height: 12px; stroke-width: 3; color: var(--green); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 25px;
  padding: 0 9px;
  border-radius: 13px;
  font: 700 11.5px/1 var(--sans);
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--muted);
}
.pill svg { width: 13px; height: 13px; }
.pill.live { background: var(--blue-tint); color: var(--blue); }
.pill.done { background: var(--green-tint); color: var(--green); }
.pill.warn { background: var(--orange-tint); color: var(--orange); }
.pill.working { background: var(--green-tint); color: var(--green); }
.pill.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* The kind of job (decided with Brendan 2026-09-27): a colored tag with its own icon, in Light Ops' words. */
.kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  font: 700 10.5px/1 var(--sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kind svg { width: 12.5px; height: 12.5px; flex: none; }
.kind { max-width: 100%; min-width: 0; }
.kind > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kind.k-install { background: var(--blue-tint); color: var(--blue); }
.kind.k-notdone { background: var(--orange-tint); color: var(--orange); }
.kind.k-repair { background: var(--red-tint); color: var(--red); }
.sheet-head .kind, .hero-top .kind { height: 27px; padding: 0 9px; border-radius: 8px; font-size: 11px; }

/* Schedule's filter: chips that scroll sideways; the one you picked is solid. */
.kinds { display: flex; gap: 6px; overflow-x: auto; margin: 8px calc(-1 * var(--gut)) -4px; padding: 6px var(--gut); scrollbar-width: none; }
.kinds::-webkit-scrollbar { display: none; }
.kinds button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
  font: 600 13px/1 var(--sans);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.kinds button[data-kind="all"] { padding: 0 12px; }
.kinds button[class]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.kinds .k-install::before { background: var(--blue-fill); }
.kinds .k-notdone::before { background: var(--orange-fill); }
.kinds .k-repair::before { background: var(--red-fill); }
.kinds button[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); box-shadow: none; font-weight: 700; }

/* A person's round picture (a photo, else their initials). Yours is in the primary color. */
.av {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface-3);
  color: var(--text);
  font: 700 10.5px/1 var(--sans);
}
.av.me { background: var(--gold); color: var(--gold-ink); }
.av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.av.has-photo { background: var(--surface-3); }
.av.md { width: 38px; height: 38px; font-size: 13.5px; }
.av.big { width: 84px; height: 84px; font-size: 28px; }
/* The crew on a job: up to five faces side by side, then "Luis + 4". */
.crewchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 34px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: 600 13.5px/1 var(--sans);
  white-space: nowrap;
}
.crewchip { max-width: 100%; }
.crewchip .faces { display: flex; gap: 4px; }
.crewchip .cc-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ Today */

.hero { display: grid; margin-top: 20px; padding: 20px; }
.hero-open { display: grid; width: 100%; min-width: 0; text-align: left; }
.hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; min-width: 0; }
.hero-kicker { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 11.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero-name { margin: 12px 0 0; font: 700 28px/1.1 var(--sans); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.hero-addr { margin-top: 4px; font-size: 16px; line-height: 1.35; color: var(--muted); }
.hero .chips { margin-top: 14px; gap: 8px; }
.hero .chip.code { height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; }
.hero .pill.working { height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; gap: 7px; }
.hero .note-line { display: flex; gap: 7px; align-items: flex-start; margin-top: 14px; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.hero .note-line svg { width: 16px; height: 16px; margin-top: 2px; color: var(--faint); }
.hero-prog { display: grid; gap: 12px; width: 100%; margin-top: 14px; padding: 14px 14px 12px; border-radius: 16px; background: var(--surface-2); text-align: left; }
.hero-prog-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hero-prog-hd .eyebrow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-prog-hd b { flex: none; font: 700 12.5px/1 var(--mono); color: var(--green); }
.hero-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 10px; margin-top: 18px; }
.hero-actions > .hxw, .sheet-foot > .hxw, .fsheet .foot > *, .btnrow > * { min-width: 0; }
.hero-actions .btn, .sheet-foot .btn, .fsheet .foot .btn { height: 56px; padding: 0 10px; font-size: 16px; }
.hero-actions .btn.warn, .sheet-foot .btn.warn { font-size: 15.5px; }
.hero-actions .btn svg, .sheet-foot .btn svg { width: 18px; height: 18px; }
.btn.warn svg { width: 16px; height: 16px; }

.empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 34px 18px 30px;
}
.card.empty { margin-top: 20px; }
.empty .bulbs { margin: 4px auto 16px; }
.empty h3 { margin: 0; font: 500 28px/1.1 var(--serif); color: var(--ink); }
.empty p { margin: 0; color: var(--muted); font-size: 15px; max-width: 32ch; }

.group { margin-top: 26px; }
.group-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px 6px; }
.group-hd h3 { margin: 0; font: 700 11.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.group-hd .count { font: 700 11.5px/1 var(--mono); letter-spacing: .08em; color: var(--faint); }
/* A folded group ("Other crews today", "No date yet", "Ordered"): a bar, and its rows under it once opened. */
.group.fold { margin-top: 18px; }
.group-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  background: var(--surface-2);
  font: 600 15px/1.25 var(--sans);
  color: var(--muted);
  text-align: left;
}
.group-toggle > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-toggle:active { background: var(--surface-3); }
.group-toggle svg { width: 18px; height: 18px; color: var(--muted); transition: transform .25s var(--ease); }
.group-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.group.fold .list { margin-top: 6px; }

/* ------------------------------------------------------------------ lists and swipe rows */

/* Rows sit on the page, edge to edge, with a hairline under each that starts at the text. */
.list { margin: 0 calc(-1 * var(--gut)); }
.sw { position: relative; overflow: hidden; background: var(--row-bg, var(--bg)); }
.sw::after {
  content: "";
  position: absolute;
  left: 74px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  z-index: 3;
  pointer-events: none;
}
.sw-acts { position: absolute; inset: 0; display: flex; justify-content: space-between; pointer-events: none; }
.sw:not(.is-sw) > .sw-acts { visibility: hidden; }
.sw-lead, .sw-trail { display: flex; align-items: stretch; pointer-events: auto; }
.sw-lead { flex: 1; justify-content: flex-start; }
.sw-trail { justify-content: flex-end; }
.sw-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 86px;
  padding: 0 12px;
  color: #fff;
  font: 700 12.5px/1 var(--sans);
}
.sw-btn svg { width: 22px; height: 22px; transition: transform .2s var(--spring); }
.sw-lead .sw-btn { flex-direction: row; justify-content: flex-start; gap: 8px; padding-left: 22px; font-size: 15px; width: 100%; }
.sw.is-armed .sw-lead .sw-btn svg { transform: scale(1.18); }
.sw-btn.go { background: var(--green-fill); }
.sw-btn.gold { background: var(--gold-2); color: var(--gold-ink); }
.sw-btn.blue { background: var(--blue-fill); }
.sw-btn.warn { background: var(--orange-fill); }
.sw-btn.grey { background: #7d8799; }
.sw-btn.red { background: var(--red-fill); }

.row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 12px 20px;
  background: var(--row-bg, var(--bg));
  text-align: left;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
/* Its own layer only while it's being swiped (a layer per row costs a long list memory and smoothness). */
.sw.is-sw > .row { will-change: transform; }
.row.is-anim { transition: transform .38s var(--ease); }
.row:active { background: color-mix(in srgb, var(--surface-2) 75%, var(--row-bg, var(--bg))); }
.num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 15px/1 var(--mono);
  background: var(--surface-2);
  color: var(--ink);
}
.num svg { width: 19px; height: 19px; }
/* The circle's color is the kind of job (decided with Brendan 2026-09-27): Install blue, Started · not completed orange,
   Repair red; solid for your own, an outline for another crew's; green with a check once it's done. */
.row.is-mine.k-install .num { background: var(--blue-fill); color: #fff; }
.row.is-mine.k-notdone .num { background: var(--orange-fill); color: #fff; }
.row.is-mine.k-repair .num { background: var(--red-fill); color: #fff; }
.row.is-other .num { background: transparent; }
.row.is-other.k-install .num { color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue-fill); }
.row.is-other.k-notdone .num { color: var(--orange); box-shadow: inset 0 0 0 2px var(--orange-fill); }
.row.is-other.k-repair .num { color: var(--red); box-shadow: inset 0 0 0 2px var(--red-fill); }
.row.is-done:is(.is-mine, .is-other) .num { background: var(--green-fill); color: #fff; box-shadow: none; }
.row.is-done .num svg { width: 20px; height: 20px; stroke-width: 3; }
.row.is-done > * { opacity: .72; }
.row-main { min-width: 0; display: grid; }
.row-name { font: 600 17px/1.25 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-line { margin-top: 2px; font-size: 14.5px; line-height: 1.3; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-line.two { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* One line of tags: the kind, the gate code, lines done, another crew's names (it wraps only on the narrowest phones). */
.row-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; min-width: 0; font: 600 13px/1.2 var(--sans); }
.row-tags .chip { height: 22px; padding: 0 8px; border-radius: 11px; }
.row-tags .chip.code { gap: 5px; font-size: 12px; }
.row-tags .chip.code svg { width: 13px; height: 13px; }
/* A long gate code ends in "…" in a row (the job's page shows all of it). */
.row-tags .chip { max-width: 100%; min-width: 0; }
.row-tags .chip.code > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row-crew { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 500; }
.row-side { display: grid; justify-items: end; }
.row-chev { display: grid; color: var(--faint); }
.row-chev svg { width: 18px; height: 18px; }
.row-side .pill { height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; gap: 6px; }
.row-side .pill.dot::before { width: 6px; height: 6px; box-shadow: 0 0 0 3px var(--green-tint), 0 0 8px currentColor; }

/* A two-way switch (Upcoming / Done, Language, Appearance): the picked half is a raised card. */
.seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  padding: 3px;
  border-radius: 12px;
  background: var(--surface-2);
}
.seg.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg button {
  min-width: 0;
  height: 38px;
  padding: 0 6px;
  border-radius: 10px;
  font: 600 15px/1 var(--sans);
  color: var(--muted);
  white-space: nowrap;
  text-align: center;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.hd + .seg { margin-top: 16px; }

/* Schedule's days: sticky, with "4 yours · 6" on the right. */
.day-hd {
  position: sticky;
  top: 26px;
  z-index: 5;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px calc(-1 * var(--gut)) 0;
  padding: 10px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.day-hd h3 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 19px/1.2 var(--sans); color: var(--ink); }
.day-hd h3 small { margin-left: 8px; font: 400 14px/1 var(--sans); color: var(--muted); }
.day-hd .count { flex: none; font: 700 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }

/* ------------------------------------------------------------------ Me */

.me-head { display: grid; justify-items: center; text-align: center; padding: 12px 0 0; }
.me-photo { position: relative; border-radius: 50%; }
.me-photo.is-busy .av { opacity: .45; }
.me-photo.is-busy::after {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  border-right-color: transparent;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.me-name { margin: 14px 0 0; font: 500 34px/1 var(--serif); color: var(--ink); }
.me-sub { margin-top: 6px; color: var(--muted); font-size: 14.5px; }
.me-change { margin-top: 10px; min-height: 36px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font: 600 14px/1 var(--sans); }
.me-change:active { background: var(--surface-2); }
.set { margin-top: 20px; }
.set:has(> .set-list) + .set:has(> .set-list) { margin-top: 12px; }
.set h3 { margin: 0; padding: 4px 4px 8px; font: 700 11.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.set .seg button { height: 40px; }
.set-list { background: var(--surface-2); border-radius: 16px; overflow: hidden; }
.set-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 16px;
  font: 600 16px/1.3 var(--sans);
  color: var(--ink);
  text-align: left;
}
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-row:active { background: color-mix(in srgb, var(--surface-3) 55%, var(--surface-2)); }
.set-row .val { margin-left: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); font: 400 15px/1 var(--sans); }
.set-row .val svg { width: 16px; height: 16px; }
.set-row .grow { flex: 1; min-width: 0; }
.set-row .grow small { display: block; margin-top: 3px; color: var(--muted); font: 400 13px/1.35 var(--sans); }
.set-row.danger { justify-content: center; color: var(--red); font-weight: 700; }
.set-row.center { justify-content: center; }
.set-note { margin: 18px 0 0; padding: 0 6px; color: var(--faint); font-size: 12.5px; line-height: 1.4; text-align: center; }

.switch {
  position: relative;
  width: 51px;
  height: 31px;
  flex: none;
  border-radius: 16px;
  background: var(--surface-3);
  transition: background .25s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  transition: transform .28s var(--spring);
}
[aria-checked="true"] > .switch, .switch.on { background: var(--green-fill); }
[aria-checked="true"] > .switch::after, .switch.on::after { transform: translateX(20px); }

.install {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  margin: 0 0 16px;
}
.install img, .install .appicon { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.install b { color: var(--ink); display: block; font-size: 15.5px; }
.install p { margin: 2px 0 0; font-size: 14px; color: var(--muted); line-height: 1.4; }
.install .row-btns { display: flex; gap: 8px; margin-top: 10px; }

/* ------------------------------------------------------------------ sheet (a job's page) */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--scrim);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.scrim.is-on { opacity: 1; }
.sheet {
  --row-bg: var(--sheet);
  --gut: 20px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  max-width: 720px;
  margin: 0 auto;
  height: calc(100% - var(--sat) - 8px);
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border-radius: 28px 28px 0 0;
  box-shadow: var(--shadow-sheet);
  transform: translateY(105%);
  transition: transform .5s var(--ease);
  will-change: transform;
  overflow: hidden;
}
.sheet.is-open { transform: translateY(0); }
.sheet.is-drag { transition: none; }
.sheet-grab { display: flex; justify-content: center; height: 18px; padding-top: 8px; flex: none; touch-action: none; cursor: grab; }
.sheet-grab::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 0 20px;
  flex: none;
  touch-action: none;
}
.sheet-head .grow { flex: 1; min-width: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.xbtn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--muted);
  flex: none;
}
.xbtn svg { width: 16px; height: 16px; }
.sheet-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px 20px 28px;
}
/* The buttons along the bottom, under the thumb. */
.sheet-foot {
  flex: none;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  padding: 12px 16px calc(var(--sab) + 12px);
  border-top: 1px solid var(--line);
  background: var(--bar);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
}
.sheet-foot.one { grid-template-columns: 1fr; }
.sheet-foot .hint { grid-column: 1 / -1; margin: -2px 2px 2px; font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.sheet-foot .hint svg { width: 15px; height: 15px; color: var(--gold-text); }

.job-title { margin: 0; font: 500 38px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.job-sub { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.4; }
.flag {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--orange-tint);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.4;
}
.flag b { color: var(--orange); font: 700 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.flag.blue { background: var(--blue-tint); }
.flag.blue b { color: var(--blue); }
.flag.green { background: var(--green-tint); }
.flag.green b { color: var(--green); }

.blk { margin-top: 16px; border-radius: 16px; background: var(--surface-2); }
/* Where: the address, with Directions inside the block. */
.addr-blk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 14px 14px 16px; }
.addr-blk > button { display: flex; flex-direction: column; justify-content: center; align-self: stretch; min-width: 0; min-height: 44px; text-align: left; }
.addr-blk strong { display: block; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.addr-blk > button > span { display: block; margin-top: 1px; color: var(--muted); font-size: 14px; line-height: 1.35; }
.addr-blk .btn { height: 44px; padding: 0 14px; border-radius: 12px; font-size: 14.5px; gap: 7px; }
.addr-blk .btn svg { width: 16px; height: 16px; }
.gate-blk { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 12px 14px 12px 16px; text-align: left; }
.gate-blk .lbl { font: 700 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gate-blk > span:first-child { flex: 1; min-width: 0; }
.gate-blk .code { font: 700 24px/1.1 var(--mono); letter-spacing: .08em; color: var(--ink); overflow-wrap: anywhere; }
.gate-blk .copy { margin-left: auto; font: 700 14px/1 var(--sans); color: var(--gold-text); display: flex; gap: 6px; align-items: center; }
.gate-blk .copy svg { width: 16px; height: 16px; }

/* Call, Text, On my way: three outlined tiles, icon over label. */
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.qa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 60px;
  padding: 0 4px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  font: 600 13px/1.1 var(--sans);
  text-align: center;
  transition: transform .14s ease, background-color .15s ease;
}
.qa:active { transform: scale(.96); background: var(--surface-2); }
.qa svg { width: 19px; height: 19px; }
.qa[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.sec { margin-top: 24px; }
.sec-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sec-hd h3 { margin: 0; min-width: 0; font: 700 11.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.sec-hd .count { flex: none; font: 700 12.5px/1 var(--mono); color: var(--faint); }
.sec-hd .count.ok { color: var(--green); }
.scope { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--text); white-space: pre-line; }

/* What we're installing: each line and how many (never a price). */
.lines { display: grid; margin: 0 calc(-1 * var(--gut)); }
.ln.ln-h { display: block; min-height: 0; padding: 14px 20px 4px; font: 700 13px/1.3 var(--sans); color: var(--muted); }
.ln { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 56px; padding: 10px 20px; }
.ln:not(.ln-h)::after { content: ""; position: absolute; left: 20px; right: 0; bottom: 0; height: 1px; background: var(--line); }
.ln.has-mark { grid-template-columns: 22px minmax(0, 1fr) auto; }
.ln.has-mark::after { left: 56px; }
.ln-main { min-width: 0; }
.ln-main b { display: block; color: var(--ink); font-weight: 600; font-size: 16px; line-height: 1.3; }
.ln-main small { display: block; margin-top: 1px; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.ln-main small.ln-by { color: var(--green); font-weight: 600; }
/* A quantity keeps to one line up to 12 characters ("1,250 ft"); only a longer one wraps. (A percent width here sized
   the column to one digit in Chromium, 2026-09-28.) */
.q { max-width: 12ch; font: 700 15px/1.2 var(--mono); color: var(--text); text-align: right; overflow-wrap: anywhere; }
.lnmark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: transparent; }
.lnmark svg { width: 13px; height: 13px; stroke-width: 3; }
.lnmark.is-on { background: var(--green-fill); box-shadow: none; color: #fff; }

.shots { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); margin: 0 calc(-1 * var(--gut)); padding: 2px var(--gut) 4px; scrollbar-width: none; }
.shots::-webkit-scrollbar { display: none; }
.shot {
  position: relative;
  flex: none;
  width: 44%;
  max-width: 220px;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-3);
  scroll-snap-align: start;
}
.shot:first-child.is-design { width: 70%; max-width: 360px; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot .tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(6, 10, 20, .62);
  color: #fff;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.crew { display: grid; gap: 2px; }
.crew-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; width: 100%; text-align: left; }
.crew-row b { color: var(--ink); font-weight: 600; }
.crew-row small { display: block; color: var(--muted); font-size: 13px; }
.crew-row .act { margin-left: auto; display: flex; gap: 8px; }
.icb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
}
.icb:active { background: var(--surface-2); }
.icb svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------------ notes */

.composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: end;
  padding: 6px;
  border-radius: 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.composer textarea {
  display: block;
  width: 100%;
  min-height: 40px;
  max-height: 180px;
  padding: 9px 4px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--ink);
  font: 16px/1.4 var(--sans);
}
.composer textarea::placeholder { color: var(--faint); }
.composer .cam, .composer .send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.composer .cam svg { width: 22px; height: 22px; }
.composer .send { background: var(--gold); color: var(--gold-ink); transition: transform .2s var(--spring), opacity .2s; }
.composer .send svg { width: 19px; height: 19px; }
.composer .send[disabled] { opacity: .35; transform: scale(.9); }
.picked { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 6px 2px; grid-column: 1 / -1; }
.picked span { position: relative; width: 58px; height: 58px; border-radius: 11px; overflow: hidden; background: var(--surface-3); }
.picked img { width: 100%; height: 100%; object-fit: cover; }
.picked button { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; }
.picked button svg { width: 11px; height: 11px; }
.notes { display: grid; gap: 4px; margin-top: 12px; }
.note { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; padding: 10px 0; }
.note + .note { border-top: 1px solid var(--line); }
.note-hd { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.note-hd b { color: var(--ink); font-weight: 700; font-size: 15px; }
.note-hd time { color: var(--faint); font-size: 13px; }
.note-hd .more { margin-left: auto; width: 36px; height: 32px; display: grid; place-items: center; color: var(--faint); border-radius: 8px; }
.note-hd .more svg { width: 18px; height: 18px; }
.note-body { margin-top: 2px; font-size: 15.5px; line-height: 1.45; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.note-files { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.note-files button { width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--surface-3); }
.note-files img { width: 100%; height: 100%; object-fit: cover; }
.note-files a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; color: var(--ink); }
.note-files a svg { width: 16px; height: 16px; color: var(--muted); }
.note.is-sending { opacity: .55; }
.note .sending { font-size: 12.5px; color: var(--faint); margin-top: 4px; }
.notes-empty { color: var(--muted); font-size: 14.5px; padding: 6px 2px; }

.history { display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.history div { display: flex; gap: 8px; align-items: center; }
.history svg { width: 15px; height: 15px; color: var(--faint); }

/* ------------------------------------------------------------------ action sheet, form sheet */

.asheet-scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); opacity: 0; transition: opacity .3s ease; }
.asheet-scrim.is-on { opacity: 1; }
.asheet {
  position: fixed;
  left: calc(var(--sal) + 8px);
  right: calc(var(--sar) + 8px);
  bottom: calc(var(--sab) + 8px);
  z-index: 61;
  max-width: 520px;
  margin: 0 auto;
  display: grid;
  gap: 8px;
  transform: translateY(calc(100% + 24px));
  transition: transform .42s var(--ease);
}
.asheet.is-on { transform: none; }
.asheet-grp { background: color-mix(in srgb, var(--sheet) 94%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-radius: 16px; overflow: hidden; }
.asheet-title { padding: 14px 18px 12px; text-align: center; font-size: 13.5px; line-height: 1.35; color: var(--muted); border-bottom: 1px solid var(--line); }
.asheet-title b { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 2px; }
.asheet-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  font: 500 19px/1.2 var(--sans);
  color: var(--blue);
  text-align: center;
}
.asheet-opt + .asheet-opt { border-top: 1px solid var(--line); }
.asheet-opt:active { background: var(--surface-2); }
.asheet-opt svg { width: 20px; height: 20px; }
.asheet-opt.bad { color: var(--red); }
.asheet-opt.cancel { font-weight: 700; color: var(--blue); }
.asheet-opt.on::after { content: "✓"; margin-left: 6px; font-weight: 700; }

.fsheet {
  --row-bg: var(--sheet);
  --gut: 20px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - var(--sat) - 24px);
  background: var(--sheet);
  border-radius: 28px 28px 0 0;
  box-shadow: var(--shadow-sheet);
  transform: translateY(105%);
  transition: transform .45s var(--ease);
}
.fsheet.is-on { transform: none; }
.fsheet .inner { overflow-y: auto; padding: 6px 20px 16px; }
.fsheet h2 { margin: 12px 0 0; font: 500 34px/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.fsheet p.lead { margin: 6px 0 14px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.reasons button {
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 600 14.5px/1 var(--sans);
  color: var(--ink);
  transition: background .15s, box-shadow .15s, color .15s;
}
.reasons button[aria-pressed="true"] { background: var(--orange-tint); box-shadow: inset 0 0 0 1.5px var(--orange); color: var(--orange); }
.field {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  font: 16px/1.4 var(--sans);
  resize: none;
}
.field::placeholder { color: var(--faint); }
.field:focus { border-color: var(--focus-line); }
.composer:focus-within { border-color: var(--focus-line); }
.fsheet .foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 10px; padding: 12px 16px calc(var(--sab) + 12px); border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ toast */

.toast {
  position: fixed;
  left: calc(var(--sal) + 12px);
  right: calc(var(--sar) + 12px);
  bottom: calc(max(var(--sab), 10px) + 70px);
  z-index: 90;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 10px 10px 16px;
  border-radius: 16px;
  background: var(--toast);
  color: var(--toast-text);
  box-shadow: var(--shadow-2);
  font-size: 15px;
  line-height: 1.3;
  overflow: hidden;
  transform: translateY(18px) scale(.98);
  opacity: 0;
  transition: transform .38s var(--spring), opacity .25s ease;
  pointer-events: none;
}
.toast.is-on { transform: none; opacity: 1; pointer-events: auto; }
.toast.is-high { bottom: calc(var(--sab) + 96px); }
.toast.is-low { bottom: calc(max(var(--sab), 10px) + 10px); }
.toast.is-top { top: calc(var(--sat) + 10px); bottom: auto; transform: translateY(-18px) scale(.98); }
.toast.is-top.is-on { transform: none; }
.toast svg.ok { width: 22px; height: 22px; color: #6fdca4; flex: none; }
.toast svg.bad { width: 22px; height: 22px; color: #ffb27a; flex: none; }
.toast .t { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.toast .undo { flex: none; min-height: 44px; padding: 0 12px; border-radius: 10px; font-weight: 700; color: var(--toast-accent); }
.toast .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--toast-accent); opacity: .8; transform-origin: 0 50%; }
.toast.is-timing .bar { animation: shrink var(--toast-ms, 6000ms) linear forwards; }
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ------------------------------------------------------------------ photo viewer */

.viewer { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; opacity: 0; transition: opacity .25s ease; touch-action: none; }
.viewer.is-on { opacity: 1; }
.viewer-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--sat) + 10px) 14px 10px;
  color: #fff;
  background: linear-gradient(rgba(0, 0, 0, .55), transparent);
  font: 600 15px/1 var(--sans);
}
.viewer-top .xbtn { background: rgba(255, 255, 255, .16); color: #fff; }
.viewer-track { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-track.is-zoomed { overflow-x: hidden; }
.viewer .slide { flex: none; width: 100%; height: 100%; display: grid; place-items: center; scroll-snap-align: center; overflow: hidden; }
.viewer .slide img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.viewer-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px calc(var(--sab) + 18px); color: rgba(255, 255, 255, .86); font-size: 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); text-align: center; }

/* ------------------------------------------------------------------ skeleton */

.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 10px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ------------------------------------------------------------------ the sign-in screens (Brendan's design, 2026-09-27) */

/* Always navy, whatever the phone's setting, like the Light Guys emails: bulbs along the top, the logo, "Light Ops
   Crew", then the email (or the six code boxes, read back in threes). The iPhone Add to Home Screen steps and the
   notices match. */
html:has(.gate), body:has(.gate) { background: #070b16; color-scheme: dark; }
.gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #070b16;
  color: #f4efe4;
  -webkit-font-smoothing: antialiased;
}
/* Twelve C9 bulbs hanging from one wire, just under the status bar. */
.gate-bulbs { position: relative; width: 100%; max-width: 520px; padding: max(var(--sat), 12px) 14px 0; }
.gate-bulbs > span { position: relative; display: flex; justify-content: space-between; }
.gate-bulbs > span::before { content: ""; position: absolute; left: -14px; right: -14px; top: 3px; height: 2px; background: #1f2940; }
.gate-bulbs i { position: relative; display: flex; flex-direction: column; align-items: center; }
.gate-bulbs i::before { content: ""; width: 6px; height: 9px; border-radius: 1px; background: #2b3550; }
.gate-bulbs i::after { content: ""; width: 11px; height: 16px; border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%; background: var(--c); box-shadow: 0 0 12px 2px var(--g); }
.gate-main { width: 100%; max-width: 420px; padding: 56px 28px calc(var(--sab) + 40px); display: flex; flex-direction: column; align-items: center; }
.gate-logo { display: block; width: 120px; height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); }
.gate h1 { margin: 24px 0 0; font: 500 46px/1 var(--serif); letter-spacing: -.01em; color: #f7f2e8; text-align: center; text-wrap: balance; }
.gate-lead { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: #8e9db4; text-align: center; text-wrap: pretty; }
.gate-lead b { color: #f4efe4; font-weight: 600; overflow-wrap: anywhere; }
.gate form { width: 100%; margin-top: 36px; display: flex; flex-direction: column; }
.gate label { align-self: flex-start; margin-bottom: 8px; font: 700 11px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #8fa0bb; }
.gate-in {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border-radius: 13px;
  border: 1px solid rgba(120, 150, 200, .22);
  background: #111a2c;
  color: #f4efe4;
  font: 16px var(--sans);
  outline: none;
  transition: border-color .15s ease;
}
.gate-in::placeholder { color: #5f6f88; }
.gate-in:focus { border-color: #f3d28a; }
.gate .hxw { width: 100%; margin-top: 12px; }
.gate-btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 54px;
  text-align: center;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffe9bd, #f3d28a);
  color: #2a1d05;
  font: 700 16px var(--sans);
  box-shadow: 0 10px 28px -12px rgba(255, 207, 118, .55);
  transition: transform .12s ease, opacity .15s ease, background .2s ease, color .2s ease;
}
.gate-btn:active { transform: translateY(1px); }
.gate-btn[disabled] { opacity: .55; }
/* A problem, in a red strip under the field it's about; the notices in the same strip in gold. */
.gate-msg { width: 100%; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #111a2c; color: #8e9db4; font: 600 13.5px/1.45 var(--sans); text-align: left; }
.gate-msg.bad { background: #3a1513; color: #ff8077; }
.gate-note { width: 100%; margin-top: 22px; padding: 12px 14px; border-radius: 12px; background: #2a2413; color: #f3d28a; font: 500 13.5px/1.45 var(--sans); text-align: left; }
.gate-note b { display: block; margin-bottom: 2px; font-weight: 700; }
.gate-hint { margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: #6d7f99; text-align: center; }
.gate-link { align-self: center; margin-top: 14px; min-height: 44px; padding: 0 12px; color: #f3d28a; font: 600 15px/1 var(--sans); text-decoration: none; }
/* The code step: a smaller logo, "Check your email", and "Sign in" stays quiet until all six are in. */
.gate.is-code .gate-main { padding-top: 40px; padding-left: 24px; padding-right: 24px; }
.gate.is-code .gate-logo { width: 84px; }
.gate.is-code h1 { margin-top: 20px; font-size: 40px; }
.gate.is-code .gate-lead { margin-top: 12px; }
.gate.is-code form { margin-top: 28px; align-items: center; }
.gate.is-code .gate-msg { margin-top: 14px; }
.gate.is-code .hxw { margin-top: 22px; }
.gate.is-code .gate-btn:not(.is-ready) { background: #1a2438; color: #6d7f99; box-shadow: none; }

/* The code: six boxes (3 + 3) drawn over one real field, so pasting and the phone's code autofill both work. */
.otp { position: relative; width: 100%; max-width: 300px; }
.otp-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 10px repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; }
.otp-boxes span {
  display: grid;
  place-items: center;
  height: 50px;
  border-radius: 11px;
  border: 1px solid rgba(120, 150, 200, .22);
  background: #111a2c;
  color: #f4efe4;
  font: 700 21px/1 var(--mono);
  transition: border-color .15s ease, color .15s ease;
}
.otp-dash { height: 2px; border-radius: 1px; background: #2b3853; }
.otp-boxes span.is-on { border-color: #f3d28a; }
.otp-boxes span.is-on:empty::after { content: ""; width: 2px; height: 22px; background: #f3d28a; animation: otpblink 1s steps(1) infinite; }
@keyframes otpblink { 50% { opacity: 0; } }
.otp.is-bad .otp-boxes span { border-color: #ff8077; color: #ff8077; }
.otp-in {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: .01;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
}

/* An invite opened in iPhone Safari: the three steps to the Home Screen. */
.gate .steps { display: grid; gap: 10px; counter-reset: step; width: 100%; margin-top: 30px; }
.gate .step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border-radius: 13px;
  background: #111a2c;
  border: 1px solid rgba(120, 150, 200, .18);
  color: #c9d2df;
  font-size: 15px;
}
.gate .step::before {
  content: counter(step);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffe9bd, #f3d28a);
  color: #2a1d05;
  font: 700 15px/1 var(--mono);
}
.gate .step b { color: #f7f2e8; }
.gate .step span { display: block; line-height: 1.45; }
.gate .step svg { display: inline-block; width: 20px; height: 20px; margin: 0 2px; vertical-align: -4px; color: #5cc8ff; }
.point {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sab) + 6px);
  transform: translateX(-50%);
  color: #f3d28a;
  animation: nudge 1.4s ease-in-out infinite;
}
.point svg { width: 30px; height: 30px; }
@keyframes nudge { 50% { transform: translate(-50%, 6px); } }
.point { pointer-events: none; }
/* On a short screen the arrow would sit on the last link; the steps already say where Share is. */
@media (max-height: 700px) { .point { display: none; } }

@media (min-width: 700px) {
  .panel { --gut: 28px; }
  .shot { width: 30%; }
}

/* Spanish labels run longer ("Cómo llegar", "Terminar trabajo"): below 414px the Today card's buttons split more evenly. */
@media (max-width: 413px) {
  html[lang="es"] .hero-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
/* Phones narrower than 390px (320–389: SE, mini, most Androids): the two big buttons share the width more evenly, a
   little smaller, so the longer Spanish labels still fit; at 320 the buttons drop their icons and the tab labels tighten. */
@media (max-width: 389px) {
  .hero-actions, .sheet-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .hero-actions .btn, .sheet-foot .btn, .hero-actions .btn.warn, .sheet-foot .btn.warn { gap: 6px; padding: 0 8px; font-size: 15px; }
  .hero-actions .btn svg, .sheet-foot .btn svg { width: 16px; height: 16px; }
}
@media (max-width: 340px) {
  .hero { padding: 18px 16px; }
  .hero-actions .btn svg, .sheet-foot .btn svg { display: none; }
  .tabbar { padding-left: calc(var(--sal) + 2px); padding-right: calc(var(--sar) + 2px); }
  .tab { font-size: 10.5px; letter-spacing: -.02em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .app.is-back { transform: none; border-radius: 0; filter: none; }
}

/* ------------------------------------------------------------------ the bulb string (decided with Brendan 2026-09-27) */

/* The same C9 bulbs as the top of every Light Guys email (lib/email.ts): bulbs on one straight wire, each with its
   socket, a highlight and a glow. A bulb that's off (a line not checked yet) is unlit. */
.bulbs {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 290px;
  margin: 0 auto;
  border-top: 2px solid var(--bulb-wire);
}
.bulbs i {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 11px;
  padding-top: 2px;
  background: linear-gradient(var(--bulb-wire), var(--bulb-wire)) center top / 1px 2px no-repeat;
}
.bulbs i::before { content: ""; width: 6px; height: 5px; border-radius: 2px 2px 1px 1px; background: var(--bulb-cap); }
.bulbs i::after {
  content: "";
  width: 11px;
  height: 16px;
  border-radius: 50% 50% 52% 52% / 42% 42% 64% 64%;
  background-color: var(--c);
  background-image: radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, 0) 42%);
  box-shadow: var(--bulb-edge), 0 0 7px 2px var(--g1), 0 0 16px 4px var(--g2);
  transition: background-color .35s ease, box-shadow .35s ease;
}
.bulbs i.off::after { background-color: var(--bulb-off); background-image: none; box-shadow: var(--bulb-edge); }

/* A job's progress (its page and the Today card): bigger bulbs clipped onto the wire, the full width. */
.lnprog { margin: 2px 0 10px; }
.lnprog .bulbs, .hero-prog .bulbs { position: relative; max-width: none; padding: 0 8px; border-top: 0; }
.lnprog .bulbs::before, .hero-prog .bulbs::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; border-radius: 1px; background: var(--bulb-wire); }
.lnprog .bulbs i, .hero-prog .bulbs i { position: relative; width: 14px; padding-top: 0; background: none; }
.lnprog .bulbs i::before, .hero-prog .bulbs i::before { width: 7px; height: 8px; border-radius: 1.5px; }
.lnprog .bulbs i::after, .hero-prog .bulbs i::after { width: 14px; height: 20px; border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%; box-shadow: var(--bulb-edge), 0 0 12px 2px var(--g1); }
.lnprog .bulbs i.off::after, .hero-prog .bulbs i.off::after { box-shadow: var(--bulb-edge); }
.hero-prog .bulbs i { width: 12px; }
.hero-prog .bulbs i::after { width: 12px; height: 17px; }

/* ------------------------------------------------------------------ To order (decided with Brendan 2026-09-27) */

.hd-row > .hxw { flex: none; margin-bottom: 2px; }
/* The quantity leads, so the list reads like a shopping list. */
.orow {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 12px 20px;
  background: var(--row-bg, var(--bg));
  text-align: left;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.row.orow { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 72px; }
.orow:active { background: color-mix(in srgb, var(--surface-2) 75%, var(--row-bg, var(--bg))); }
.osw::after { left: 82px; }
.oq {
  display: block;
  min-width: 48px;
  max-width: 84px;
  height: 48px;
  padding: 0 6px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  font: 700 16px/48px var(--mono);
  text-align: center;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oq svg { width: 20px; height: 20px; stroke-width: 3; vertical-align: middle; margin-top: -3px; }
.orow .row-name { font-size: 16.5px; }
.orow .row-line { font-size: 14px; }
.orow.is-done .oq { background: var(--green-tint); color: var(--green); }
.orow.is-done .row-name { color: var(--muted); }
.orow.is-sending > * { opacity: .62; }
.oq.big { min-width: 56px; height: 52px; font-size: 17px; line-height: 52px; border-radius: 14px; flex: none; }
.row-meta { margin-top: 3px; font-size: 12.5px; line-height: 1.3; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.othumb { width: 44px; height: 44px; border-radius: 11px; overflow: hidden; background: var(--surface-2); }
.othumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.olist { margin-bottom: 10px; }
.oask {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px dashed var(--line-strong);
  color: var(--ink);
  font: 600 15px/1.25 var(--sans);
  text-align: left;
}
.oask span { flex: 1; }
.oask svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.oask:active { background: var(--surface-2); }

/* The add / change sheet. */
.flabel { display: block; margin: 14px 2px 6px; font: 700 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.oform .lead { margin-bottom: 4px; }
.oform select.field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8f8f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}
.oform #o-other { margin-top: 8px; }
.sugs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; }
.sugs:empty { display: none; }
.sugs button {
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  font: 600 13.5px/1 var(--sans);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sugs button:active { background: var(--surface-2); }
.stepper { display: grid; grid-template-columns: 52px minmax(0, 150px) 52px; gap: 8px; align-items: center; }
.stepper button {
  display: grid;
  place-items: center;
  height: 48px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  font: 600 24px/1 var(--sans);
}
.stepper button:active { background: var(--surface-3); transform: scale(.96); }
.stepper .field { text-align: center; font: 700 18px/1.4 var(--mono); }
.ophoto-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  border-radius: 14px;
  border: 1px dashed var(--line-strong);
  color: var(--ink);
  font: 600 15px/1 var(--sans);
}
.ophoto-add svg { width: 21px; height: 21px; color: var(--muted); }
.ophoto-img { position: relative; display: block; width: 132px; height: 132px; border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.ophoto-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ophoto-img button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
}
.ophoto-img button svg { width: 15px; height: 15px; }
.link.bad {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 18px 0 2px;
  min-height: 44px;
  padding: 0 2px;
  color: var(--red);
  font: 600 15px/1 var(--sans);
}
.link.bad svg { width: 18px; height: 18px; }
.fsheet .foot.one { grid-template-columns: 1fr; }
.oview-top { display: flex; align-items: center; gap: 12px; margin: 12px 0 8px; }
.oview-top h2 { margin: 0; }
.oview-photo { display: block; width: 100%; max-height: 300px; margin: 6px 0 10px; border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.oview-photo img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.oview-meta { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.oview-meta b { color: var(--green); }
.fsheet .hint { display: flex; gap: 6px; align-items: center; margin: 12px 0 0; color: var(--muted); font-size: 13.5px; }
.fsheet .hint svg { width: 16px; height: 16px; flex: none; color: var(--gold-text); }

/* ------------------------------------------------------------------ checking off lines (decided with Brendan 2026-09-27) */

.lnhint { display: flex; gap: 7px; align-items: center; margin: 10px 2px 4px; color: var(--muted); font-size: 13.5px; }
.lnhint svg { width: 16px; height: 16px; flex: none; color: var(--gold-text); }
/* A line being worked on: a 36px circle (in a 44px target, for gloves), the item, who and when, how many. */
.row.lnrow { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; min-height: 60px; padding: 8px 20px 8px 16px; }
.lnsw::after { left: 70px; }
.lnchk-w { width: 44px; height: 44px; }
.lnchk {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: transparent;
}
.lnchk::before { content: ""; position: absolute; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); transition: background .2s ease, box-shadow .2s ease, transform .2s var(--spring); }
.lnchk svg { position: relative; width: 17px; height: 17px; stroke-width: 3; transition: transform .25s var(--spring), color .15s ease; transform: scale(.4); }
.lnchk.is-on::before { background: var(--green-fill); box-shadow: none; }
.lnchk.is-on svg { color: #fff; transform: none; }
.lnchk:active::before { transform: scale(.88); }
.lnchk.pop::before { animation: lnpop .42s var(--spring); }
@keyframes lnpop { 0% { transform: scale(.7); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* A bulb lights as its line is checked; when all are lit the string twinkles. */
.bulbs i.flash::after { animation: bulbflash .7s ease; }
@keyframes bulbflash { 0% { transform: scale(.6); filter: brightness(1.8); } 60% { transform: scale(1.25); } 100% { transform: none; } }
.bulbs.twinkle i::after { animation: twinkle 1.1s ease-in-out 2; }
.bulbs.twinkle i:nth-child(3n + 1)::after { animation-delay: .12s; }
.bulbs.twinkle i:nth-child(3n + 2)::after { animation-delay: .26s; }
@keyframes twinkle { 0%, 100% { filter: none; transform: none; } 45% { filter: brightness(1.7) saturate(1.2); transform: scale(1.18); } }

/* ------------------------------------------------------------------ Before you leave (Brendan's words) */

/* Five checks, each its colored icon on a tint of it; the whole row is the tap target. Then Slide to finish. */
.fcheck h2 { font-size: 36px; }
.fcheck .lead { margin-bottom: 0; }
.fc-left {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--orange-tint);
  color: var(--orange);
  font: 600 13.5px/1.35 var(--sans);
  text-align: left;
  min-height: 44px;
}
.fc-left > span { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-left svg { width: 16px; height: 16px; flex: none; }
.fc-list { display: flex; flex-direction: column; margin-top: 12px; }
.fc {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-align: left;
}
.fc-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--ic); background: var(--ict); }
.fc-ic svg { width: 21px; height: 21px; stroke-width: 1.8; }
.fc-lights { --ic: #d99a00; --ict: rgba(255, 207, 118, .18); }
.fc-timer { --ic: var(--blue-fill); --ict: rgba(2, 133, 255, .13); }
.fc-tools { --ic: var(--orange-fill); --ict: rgba(240, 140, 0, .14); }
.fc-clean { --ic: #9b6bff; --ict: rgba(155, 107, 255, .15); }
.fc-customer { --ic: var(--green-fill); --ict: rgba(16, 163, 127, .14); }
.fc-t { flex: 1; min-width: 0; }
.fc-t b { display: block; font: 700 16px/1.25 var(--sans); color: var(--ink); }
.fc-t small { display: block; margin-top: 1px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.fc-box { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; box-shadow: inset 0 0 0 2px var(--line-strong); color: transparent; transition: background .2s ease, box-shadow .2s ease, transform .15s ease; }
.fc-box svg { width: 16px; height: 16px; stroke-width: 3; transform: scale(.4); transition: transform .25s var(--spring); }
.fc.is-on .fc-box { background: var(--green-fill); box-shadow: none; color: #fff; }
.fc.is-on .fc-box svg { transform: none; }
.fc.pop .fc-box { animation: lnpop .42s var(--spring); }
.fc:active .fc-box { transform: scale(.9); }
.fc-text { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin-top: 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font: 700 15px/1 var(--sans); text-decoration: none; }
.fc-text svg { width: 17px; height: 17px; }
.fc-text:active { background: var(--surface-2); }
.fsheet .foot.fc-foot { grid-template-columns: 1fr; gap: 4px; padding: 10px 20px calc(var(--sab) + 10px); border-top: 0; }
[data-slide] {
  position: relative;
  height: 60px;
  border-radius: 30px;
  background: var(--surface-2);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
[data-slide] .slide-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 30px; background: var(--green-fill); opacity: .9; transition: width .35s var(--ease); }
[data-slide].is-drag .slide-fill, [data-slide].is-drag .slide-thumb { transition: none; }
[data-slide] .slide-label { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 16px 0 60px; font: 600 15px/1.2 var(--sans); color: var(--faint); text-align: center; pointer-events: none; transition: opacity .2s ease; }
[data-slide][aria-disabled="false"] .slide-label { font-weight: 700; color: var(--ink); background: linear-gradient(90deg, var(--ink) 0, var(--ink) 40%, var(--faint) 50%, var(--ink) 60%, var(--ink) 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: slideshine 2.6s linear infinite; }
@keyframes slideshine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.slide-thumb {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--faint);
  cursor: grab;
  transition: transform .45s var(--spring), background .2s ease, color .2s ease;
  touch-action: none;
}
.slide-thumb svg { width: 20px; height: 20px; }
[data-slide][aria-disabled="false"] .slide-thumb { background: var(--green-fill); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
[data-slide].nudge { animation: slidenudge .38s ease; }
@keyframes slidenudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.fc-finish { display: grid; place-items: center; width: 100%; height: 50px; border-radius: 14px; font: 700 15.5px/1 var(--sans); color: var(--muted); transition: color .2s ease; }
.fc-finish.is-ready { color: var(--ink); }
.fc-finish:not([disabled]):active { background: var(--surface-2); }

/* Job done! */
.joy { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .3s ease; }
.joy.is-on { opacity: 1; }
.joy-in { display: grid; justify-items: center; gap: 14px; text-align: center; transform: scale(.92); transition: transform .5s var(--spring); }
.joy.is-on .joy-in { transform: none; }
.joy .bulbs { width: min(72vw, 290px); max-width: none; transform: scale(1.2); margin-bottom: 18px; }
.joy .bulbs i::after { transition: background-color .25s ease, box-shadow .35s ease, transform .35s var(--spring); }
.joy .bulbs i:not(.off)::after { transform: scale(1.12); }
.joy h2 { margin: 0; font: 500 52px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.joy p { margin: 0; color: var(--muted); font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  .bulbs.twinkle i::after, .bulbs i.flash::after, .lnchk.pop::before, .fc.pop .fc-box, [data-slide].nudge { animation: none; }
  [data-slide][aria-disabled="false"] .slide-label { animation: none; }
}

/* ------------------------------------------------------------------ tap areas and the even split (beta, 2026-09-28) */

/* 44px tap areas for the controls that look smaller (chips, the segmented pickers, close, Change photo, the note
   menu, the composer's buttons, the Today card's gate code), without changing how they look. */
.kinds button, .seg button, .xbtn, .me-change, .reasons button, .composer .cam, .composer .send, .note-hd .more, .hero .chip.code { position: relative; }
.kinds button::after, .seg button::after, .xbtn::after, .me-change::after, .reasons button::after, .composer .cam::after,
.composer .send::after, .note-hd .more::after, .hero .chip.code::after { content: ""; position: absolute; }
.kinds button::after { inset: -6px -3px; }
.seg button::after { inset: -3px 0; }
.xbtn::after { inset: -5px; }
.me-change::after { inset: -4px -2px; }
.reasons button::after { inset: -2px; }
.composer .cam::after, .composer .send::after { inset: -4px; }
.note-hd .more::after { inset: -6px -4px; }
.hero .chip.code::after { inset: -5px 0; }

/* While a job is being worked on, Couldn't finish and Finish job share the width evenly (Couldn't finish is the
   longer label, in both languages). */
html .hero-actions.even, html .sheet-foot.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Keyboard focus on a row shows inside it (the row's wrapper clips anything outside). */
.row:focus-visible, .orow:focus-visible { outline-offset: -3px; }

/* The two big buttons, split evenly, are a little smaller below 414px so both languages fit. */
@media (max-width: 413px) {
  html .hero-actions.even .btn, html .sheet-foot.even .btn { gap: 6px; padding: 0 8px; font-size: 15px; }
  html .hero-actions.even .btn svg, html .sheet-foot.even .btn svg { width: 16px; height: 16px; }
}
/* The narrowest phones (and Spanish below 390px, where the words run longer): a row's "Working" keeps its pulsing dot
   and drops the word, and the Today card's two even buttons drop their icons in Spanish. */
@media (max-width: 374px) {
  .row-side .pill.working { padding: 0 9px; gap: 0; }
  .row-side .pill .pl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 389px) {
  html[lang="es"] .row-side .pill.working { padding: 0 9px; gap: 0; }
  html[lang="es"] .row-side .pill .pl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html[lang="es"] .hero-actions.even .btn svg { display: none; }
}

/* ------------------------------------------------------------------ the map (decided with Brendan 2026-09-27) */

/* Its buttons: Map at the end of Today's "4 stops today" line, and a map icon on each Schedule day. */
.hd-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.hd-sub .sub { margin-top: 0; min-width: 0; }
.hd-sub > .hxw { flex: none; }
.btn.hd-map { height: 36px; padding: 0 13px; border-radius: 999px; gap: 6px; font-size: 14.5px; overflow: visible; }
.btn.hd-map svg { width: 17px; height: 17px; }
.btn.hd-map::after { content: ""; position: absolute; inset: -4px -2px; }
.day-side { flex: none; display: flex; align-items: center; gap: 2px; }
.day-map { position: relative; display: grid; place-items: center; width: 36px; height: 30px; margin: -6px -10px -6px 0; border-radius: 10px; color: var(--muted); }
.day-map::after { content: ""; position: absolute; inset: -7px -4px; }
.day-map svg { width: 19px; height: 19px; }
.day-map:active { background: var(--surface-2); }

/* The day's map: the map on top, your stops in a panel under it (the panel's list scrolls; the map stays). */
.route {
  --pin-ring: #ffffff;
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .25s ease, transform .4s var(--ease);
}
.route.is-on { opacity: 1; transform: none; }
:root[data-theme="dark"] .route { --pin-ring: #0a1120; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .route { --pin-ring: #0a1120; } }
.route-map { position: relative; flex: 1 1 auto; min-height: 180px; background: var(--surface-2); overflow: hidden; }
.route-map .maplibregl-canvas { outline: none; }
.route-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: calc(var(--sat) + 6px) calc(var(--sar) + 16px) 8px calc(var(--sal) + 6px);
  background: var(--bar);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--line);
}
.route-back { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }
.route-back svg { width: 24px; height: 24px; }
.route-back:active { background: var(--surface-2); }
.route-title { min-width: 0; display: grid; }
.route-title b { font: 700 17px/1.2 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-title small { margin-top: 1px; font: 500 13.5px/1.25 var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-msg {
  position: absolute;
  z-index: 3;
  top: calc(var(--sat) + 78px);
  left: calc(var(--sal) + 16px);
  right: calc(var(--sar) + 16px);
  max-width: 420px;
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.4;
  text-align: center;
}
.route-msg.is-soft { color: var(--muted); box-shadow: var(--shadow-1); }
.route-panel {
  position: relative;
  z-index: 2;
  flex: 0 1 auto;
  max-height: 50%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: -22px;
  background: var(--sheet);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-sheet);
}
.route-body {
  --gut: 16px;
  --row-bg: var(--sheet);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px calc(var(--sar) + 16px) calc(var(--sab) + 18px) calc(var(--sal) + 16px);
}
.route-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; max-width: 560px; margin: 0 auto; }
.route-btns .btn { width: 100%; }
.route-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; max-width: 560px; margin: 20px auto 2px; padding: 0 4px; }
.route-hd .eyebrow { flex: none; white-space: nowrap; }
.route-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.route-none { max-width: 560px; margin: 18px auto 0; padding: 0 4px; color: var(--muted); font-size: 15px; }
.route-body .group.fold { max-width: 560px; margin-left: auto; margin-right: auto; }

/* A stop in the map's list: its circle (the same colors as everywhere), name and address, and the handle to drag. */
.rlist { margin: 0 calc(-1 * var(--gut)); }
@media (min-width: 624px) { .rlist { max-width: 592px; margin: 0 auto; } }
.rrow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: var(--row-bg); transition: background-color .5s ease; }
.rrow::after { content: ""; position: absolute; left: 66px; right: 0; bottom: 0; height: 1px; background: var(--line); pointer-events: none; }
.rrow:last-child::after { display: none; }
.rrow-open { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: center; min-width: 0; min-height: 66px; padding: 10px 6px 10px 16px; text-align: left; }
.rrow-open:active { background: color-mix(in srgb, var(--surface-2) 75%, var(--row-bg)); }
.rrow .num { width: 36px; height: 36px; font-size: 14px; }
.rrow .num svg { width: 17px; height: 17px; }
.rrow.is-mine.k-install .num { background: var(--blue-fill); color: #fff; }
.rrow.is-mine.k-notdone .num { background: var(--orange-fill); color: #fff; }
.rrow.is-mine.k-repair .num { background: var(--red-fill); color: #fff; }
.rrow.is-other .num { background: transparent; }
.rrow.is-other.k-install .num { color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue-fill); }
.rrow.is-other.k-notdone .num { color: var(--orange); box-shadow: inset 0 0 0 2px var(--orange-fill); }
.rrow.is-other.k-repair .num { color: var(--red); box-shadow: inset 0 0 0 2px var(--red-fill); }
.rrow.is-done:is(.is-mine, .is-other) .num { background: var(--green-fill); color: #fff; box-shadow: none; }
.rrow.is-done .rrow-open > * { opacity: .72; }
.rrow .row-name { font-size: 16.5px; }
.rrow .row-line { font-size: 14px; }
.rrow-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; min-width: 0; font: 600 13px/1.2 var(--sans); }
.rrow-tags .pill { height: 22px; font-size: 11.5px; }
.rtag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font: 600 11.5px/1 var(--sans); }
.rgrip { flex: none; display: grid; place-items: center; width: 54px; min-height: 66px; align-self: stretch; color: var(--faint); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.rgrip svg { width: 22px; height: 22px; }
.rgrip:focus-visible { outline-offset: -8px; }
.rrow.is-drag { z-index: 5; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-2); }
.rrow.is-drag::after { display: none; }
.rrow.is-drag .rgrip { color: var(--ink); cursor: grabbing; }
.rrow.is-picked, .rrow.is-flash { background: color-mix(in srgb, var(--gold-tint) 80%, var(--row-bg)); }
:root[data-theme="dark"] .rrow.is-picked, :root[data-theme="dark"] .rrow.is-flash { background: #16213a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rrow.is-picked, :root:not([data-theme="light"]) .rrow.is-flash { background: #16213a; } }

/* Pins: your stops solid in their kind's color with the stop number, another crew's small and faded, done ones
   green with a check, the one being worked on pulsing, and the shop as a small house. */
.pinw { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.pinw.is-mine { z-index: 2; }
.pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font: 700 13px/1 var(--mono);
  color: #fff;
  box-shadow: 0 0 0 2.5px var(--pin-ring), 0 3px 10px rgba(0, 0, 0, .35);
  transition: transform .22s var(--spring);
}
.pin svg { width: 15px; height: 15px; }
.pin.k-install { background: var(--blue-fill); }
.pin.k-notdone { background: var(--orange-fill); }
.pin.k-repair { background: var(--red-fill); }
.pin.is-done { background: var(--green-fill); }
.pin.is-other { width: 24px; height: 24px; font-size: 11px; background: var(--pin-ring); opacity: .72; }
.pin.is-other.k-install { color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue-fill), 0 2px 6px rgba(0, 0, 0, .25); }
.pin.is-other.k-notdone { color: var(--orange); box-shadow: inset 0 0 0 2px var(--orange-fill), 0 2px 6px rgba(0, 0, 0, .25); }
.pin.is-other.k-repair { color: var(--red); box-shadow: inset 0 0 0 2px var(--red-fill), 0 2px 6px rgba(0, 0, 0, .25); }
.pin.is-other.is-done { color: #fff; background: var(--green-fill); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.pin.is-other svg { width: 12px; height: 12px; }
.pin.is-picked { transform: scale(1.28); opacity: 1; }
.pin.is-live::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--green-fill); animation: pinpulse 1.8s ease-out infinite; }
@keyframes pinpulse { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
.pin-shopw { cursor: default; }
.pin-shop { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ink); color: var(--bg); box-shadow: 0 0 0 2.5px var(--pin-ring), 0 3px 10px rgba(0, 0, 0, .3); }
.pin-shop svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .pin.is-live::before { animation: none; } }

/* The map's credits: one small "ⓘ © OpenStreetMap" tag in the map's bottom-left corner, just above the panel (always
   there, as OpenStreetMap asks); tapping it lists every credit with links. Its tap area is 44px tall. */
.map-credit {
  position: absolute;
  left: calc(var(--sal) + 10px);
  bottom: calc(100% + 8px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px 0 5px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--ink) 14%, transparent), 0 1px 3px rgba(0, 0, 0, .12);
  color: var(--muted);
  font: 600 11px/1 var(--sans);
  letter-spacing: .01em;
  white-space: nowrap;
}
.map-credit svg { width: 13px; height: 13px; }
.map-credit::after { content: ""; position: absolute; inset: -11px -6px; }
.map-credit:active { background: var(--surface); }

/* Narrow phones: Best order and Start route share the width evenly; at 340px and below they drop their icons (as the
   Today card's buttons do), so both words fit in English and Spanish. */
@media (max-width: 389px) {
  .route-btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .route-btns .btn { gap: 6px; padding: 0 10px; font-size: 15px; }
  .route-btns .btn svg { width: 17px; height: 17px; }
}
@media (max-width: 340px) { .route-btns .btn svg { display: none; } }

/* Short phones: the map keeps at least a third of the screen. */
@media (max-height: 700px) { .route-panel { max-height: 58%; } .route-map { min-height: 150px; } }

/* Where you are (decided with Brendan 2026-09-28): the blue dot with its accuracy halo (drawn on the map), and the
   locate button across from the credit tag. */
.me-dot { position: relative; display: block; width: 18px; height: 18px; border-radius: 50%; background: #0a84ff; box-shadow: 0 0 0 3px #ffffff, 0 1px 6px rgba(0, 0, 0, .35); }
.me-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid #0a84ff; opacity: 0; animation: mepulse 2.4s ease-out infinite; }
@keyframes mepulse { from { transform: scale(1); opacity: .45; } to { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .me-dot::after { animation: none; } }
.map-locate {
  position: absolute;
  right: calc(var(--sar) + 10px);
  bottom: calc(100% + 8px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--ink) 14%, transparent), 0 2px 8px rgba(0, 0, 0, .16);
  color: var(--ink);
}
.map-locate svg { width: 22px; height: 22px; }
.map-locate::after { content: ""; position: absolute; inset: -2px; }
.map-locate:active { transform: scale(.94); }
.map-locate.is-on { color: #0a84ff; }
.map-locate.is-off { color: var(--faint); }

/* The one-time note before the phone asks for location, and Me's location line (not a switch). */
.loc-note > svg { width: 30px; height: 30px; margin-top: 12px; color: #0a84ff; }
.fsheet .foot.one { grid-template-columns: minmax(0, 1fr); }
.set-row.static { cursor: default; }
.set-row.static:active { background: none; }