:root {
  --bg: #f2f6fc;
  --surface: #ffffff;
  --text: #0e1a2b;
  --muted: #4f6078;
  --border: #d2deec;
  --accent: #0a63e0;
  --chrome: #07142a;
  --chrome-text: #e8f2ff;
  --chrome-link: #7fd0ff;
  --accent-text: #ffffff;
  --ok-bg: #e6f4ea;  --ok-text: #1d5b2c;
  --err-bg: #fdecea; --err-text: #8a1c14;
  --warn-bg: #fff4d6; --warn-text: #6b4b00;
  --radius: 10px;
  --band-top: #d3e5fb;
  --band-bottom: #f2f6fc;
  /* Accent text on accent-tinted backgrounds (info banners, initials, selected chips): darker in light mode, lighter in dark,
     so it stays readable (WCAG 4.5:1) on the tint. */
  --accent-strong: color-mix(in srgb, var(--accent) 80%, var(--text));
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1829; --surface: #13243b; --text: #edf4fd; --muted: #a8bad3;
    --border: #243c5e; --accent: #38b6ff; --accent-text: #061a30;
    --ok-bg: #16311f; --ok-text: #a8e0b5; --err-bg: #3a1714; --err-text: #f4b3ab;
    --warn-bg: #362a0b; --warn-text: #f2d48a;
    --band-top: #103a70; --band-bottom: #0b1829;
  }
}
/* Paper is white: a phone / computer in dark mode printed light text on dark cards (or, with backgrounds off, pale grey text on white).
   Printing always uses the light colours. (UI check 2026-10-06; print pages: owner report, log book, job sheet, QR card, shares.) */
@media print {
  :root:root {   /* (doubled: beats css/brand.css's dark --accent, which loads after this file) */
    --bg: #fff; --surface: #fff; --text: #0e1a2b; --muted: #4f6078; --border: #d2deec; --accent: #0a63e0; --accent-text: #fff;
    --ok-bg: #e6f4ea; --ok-text: #1d5b2c; --err-bg: #fdecea; --err-text: #8a1c14; --warn-bg: #fff4d6; --warn-text: #6b4b00;
    --band-top: #fff; --band-bottom: #fff; color-scheme: light;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100svh; background: var(--bg); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* App pages share the homepage's sea-toned fade at the top */
body:not(.landing-page) { background:
  linear-gradient(180deg, var(--band-top) 0, color-mix(in srgb, var(--band-top) 45%, var(--bg)) 220px, var(--bg) 480px)
  no-repeat, var(--bg); }
/* Header: always the logo's navy, so the white-and-blue wordmark reads in both themes */
header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--chrome); color: var(--chrome-text);
  border-bottom: 1px solid color-mix(in srgb, #38b6ff 22%, var(--chrome));
  position: sticky; top: 0; z-index: 40;   /* stays at the top while you scroll; --hdr-h = its height (js/app.js) */
}
/* Jump links and scrollIntoView stop below the header (and the shop tab bar) */
html { scroll-padding-top: calc(var(--hdr-h, 0px) + var(--tabs-h, 0px) + 8px); }
body.has-app-tabs { --tabs-h: 58px; }
header.top a, header.top button.link { color: var(--chrome-link); }
header.top a.brand { display: inline-flex; align-items: center; text-decoration: none; }
header.top a.brand img { height: 22px; width: auto; display: block; }
@media (max-width: 420px) { header.top a.brand img { height: 18px; } }
main { max-width: 760px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; margin: 8px 0 16px; }
h2 { font-size: 1.15rem; margin: 24px 0 8px; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
}
.card.removed { opacity: 0.65; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.list { list-style: none; margin: 0; padding: 0; }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--accent); }
.badge {
  display: inline-block; font-size: 0.75rem; padding: 1px 8px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.badge.verified { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.badge.warn { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
/* engine hours filled in on a trip after its 24 hours (migration 20261002800000): they count, labelled */
.badge.late-hours { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.hr-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
form { display: grid; gap: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .grid2 { grid-template-columns: 1fr; } }
label { display: grid; gap: 4px; font-size: 0.9rem; color: var(--muted); }
input, select, textarea, button {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; width: 100%;
}
textarea { min-height: 80px; }
input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; }
button, .button {
  background: linear-gradient(135deg, var(--brand-from, var(--accent)), var(--brand-to, var(--accent)));
  color: #ffffff; border: none; font-weight: 600;
  cursor: pointer; width: auto; padding: 10px 16px; border-radius: 8px; text-decoration: none;
  display: inline-block;
}
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--border); }
button.link { background: none; color: var(--accent); padding: 0; font-weight: 500; }
details.card > summary { cursor: pointer; font-weight: 600; }
details.card[open] > summary { margin-bottom: 12px; }
.notice { padding: 10px 14px; border-radius: 8px; margin: 0 0 12px; }
.notice.ok { background: var(--ok-bg); color: var(--ok-text); }
.notice.error { background: var(--err-bg); color: var(--err-text); }
.hero { padding: 40px 0 24px; }
.hero h1 { font-size: 2rem; line-height: 1.2; }

/* Search-or-add field */
.combo { position: relative; }
.combo-list {
  position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px 0; list-style: none; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.15);
}
.combo-list li { padding: 8px 12px; cursor: pointer; color: var(--text); }
.combo-list li.active, .combo-list li:hover { background: var(--bg); }
input.combo-picked { border-color: var(--accent); }
/* Trip place fields (js/place-field.js): icon · name + where · distance; rows are full tap targets */
.place-list { max-height: 300px; }
.place-list li.place-opt { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; }
.place-ic { flex: none; width: 1.5em; text-align: center; font-size: 1.1rem; }
.place-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.place-txt strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-txt small { font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-d { flex: none; white-space: nowrap; }
.place-note { margin: 6px 0 0; font-weight: 400; }

/* Boat layout: one card per engine position */
h3.group-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 8px; }
li > h3.group-title { margin: 16px 0 8px; }
.slot + .slot { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.slot.empty { color: var(--muted); }

/* App pages share the homepage's sea-toned fade at the top */
body:not(.landing-page) { background:
  linear-gradient(180deg, var(--band-top) 0, color-mix(in srgb, var(--band-top) 45%, var(--bg)) 220px, var(--bg) 480px)
  no-repeat, var(--bg); }
header.top { flex-wrap: wrap; }
header.top > :first-child { margin-right: auto; }

/* Landing page */
.landing { max-width: 960px; padding-bottom: 32px; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.button.big { padding: 14px 22px; font-size: 1.05rem; }
.button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--border); }
.button.ghost { background: rgb(255 255 255 / 0.12); color: #fff; border: 1px solid rgb(255 255 255 / 0.6);
  backdrop-filter: blur(4px); }
.button.ghost:hover { background: rgb(255 255 255 / 0.22); }

/* Full-bleed photo sections: the photo covers the section; text sits on a dark fade */
/* <picture> wrappers must not take up layout space; the img is positioned itself */
.hero-photo picture, .photo-band picture, .auth-photo picture { display: contents; }
.photo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-photo, .photo-band { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
.hero-photo::after, .photo-band::after { content: ""; position: absolute; inset: 0; z-index: -1; }


.hero-photo { min-height: clamp(460px, 62vh, 640px); display: flex; align-items: center; }
/* Desktop photo is pre-cropped to the water; keep the boat level with the text */
.hero-photo .photo-bg { object-position: 62% 60%; }
/* Desktop: text on the left over open water, boat visible bottom-right */
.hero-photo::after { background:
  linear-gradient(90deg, rgb(8 24 38 / 0.6) 0%, rgb(8 24 38 / 0.35) 38%, rgb(8 24 38 / 0) 68%); }
.hero-content { width: 100%; max-width: 1200px; margin: 0 auto; padding: 48px 32px; text-align: left; }
.hero-content > * { max-width: 560px; }
.hero-content h1 { font-size: clamp(2rem, 4.8vw, 3.4rem); line-height: 1.1; margin: 0 0 16px;
  text-shadow: 0 2px 20px rgb(0 0 0 / 0.3); }
.hero-content .lead { font-size: clamp(1rem, 2vw, 1.2rem); margin: 0 0 28px; color: rgb(255 255 255 / 0.93); }
.hero-content .cta-row { justify-content: flex-start; max-width: none; }
/* Phones: text on top, boat right underneath. The hero is only as tall as the
   text plus room for the boat, and the photo is anchored to its bottom edge. */
@media (max-width: 720px) {
  .hero-photo { align-items: flex-start; min-height: 0; }
  .hero-photo .photo-bg { object-position: 68% 100%; }
  .hero-photo::after { background: linear-gradient(180deg, rgb(8 24 38 / 0.85) 0%,
    rgb(8 24 38 / 0.65) 55%, rgb(8 24 38 / 0) 75%); }
  .hero-content { padding: 22px 18px 168px; text-align: center; }
  .hero-content h1 { font-size: 1.85rem; margin-bottom: 10px; }
  .hero-content .lead { font-size: 0.98rem; line-height: 1.45; margin-bottom: 18px; }
  .hero-content .cta-row { gap: 10px; }
  .hero-content .button.big { padding: 12px 20px; font-size: 1rem; }
  .hero-content > * { margin-left: auto; margin-right: auto; }
  .hero-content .cta-row { justify-content: center; }
}

/* Band under the hero: continues the water with a wave edge and a sea-toned fade */
/* The sea-toned fade runs from the wave to about the middle of the lookup card */
.sea-fade { background: linear-gradient(180deg, var(--band-top) 0,
  color-mix(in srgb, var(--band-top) 55%, var(--band-bottom)) 280px, var(--band-bottom) 620px); }
.features-band { position: relative; padding: 16px 16px 40px; }
.features-band .wave { position: absolute; left: 0; top: -47px; width: 100%; height: 48px; display: block; }
.features-band .wave path { fill: var(--band-top); }
@media (max-width: 720px) { .features-band .wave { height: 26px; top: -25px; } }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 960px; margin: 0 auto; }
@media (max-width: 720px) { .features { grid-template-columns: 1fr; } }
.feature { box-shadow: 0 10px 30px rgb(0 0 0 / 0.10); padding: 20px; }
.feature h2 { margin: 12px 0 8px; }
.feature p { margin: 0; color: var(--muted); }
.feature-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.landing > section:first-child { margin-top: 8px; }
.lookup { padding: 20px; }
.lookup h2 { margin-top: 0; }
.how { margin: 32px 0 48px; }
.steps { padding-left: 1.2rem; display: grid; gap: 10px; }

.photo-band { padding: 96px 16px; }
.photo-band::after { background: linear-gradient(90deg, rgb(10 36 56 / 0.72) 0%, rgb(10 36 56 / 0.4) 60%, rgb(10 36 56 / 0.15) 100%); }
.band-content { max-width: 960px; margin: 0 auto; }
.band-content h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.2; max-width: 20ch; margin: 0 0 12px; }
.band-content p { max-width: 52ch; color: rgb(255 255 255 / 0.9); margin: 0 0 24px; }

.site-footer { text-align: center; padding: 24px 16px 40px; font-size: 0.9rem; }
.site-footer a { color: inherit; }

/* Sign-in page: photo backdrop with the card on top */
body.auth-page { background: var(--bg); }
main.auth-photo { max-width: none; margin: 0; }
.auth-photo { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100svh - 57px);
  display: grid; align-items: center; justify-items: start; padding: 32px max(16px, calc((100% - 1200px) / 2 + 32px)); }
.auth-photo .photo-bg { object-position: 70% 50%; }
.auth-photo::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(8 24 38 / 0.5) 0%, rgb(8 24 38 / 0.2) 45%, rgb(8 24 38 / 0) 70%); }
.auth-card { width: 100%; max-width: 420px; padding: 24px; box-shadow: 0 20px 50px rgb(0 0 0 / 0.25); }
.auth-card h1 { margin-top: 0; }
@media (max-width: 720px) {
  /* Phones: the photo becomes a banner (the whole boat fits), card overlaps its bottom */
  .auth-photo { display: block; min-height: 0; padding: 0 16px 32px; overflow: visible; }
  .auth-photo::after { display: none; }
  .auth-photo .photo-bg { position: static; display: block; width: calc(100% + 32px); height: 250px;
    margin: 0 -16px -48px; object-position: 72% 50%; }
  .auth-card { position: relative; margin: 0 auto; }
}

/* Extra header links (Shop portal, Admin) */
nav.top-links { display: flex; gap: 14px; margin-right: auto; margin-left: 12px; font-size: 0.95rem; }
nav.top-links a { text-decoration: none; }
header.top > :first-child { margin-right: 0; }
header.top > nav.top-links + * { margin-left: auto; }
.badge.pending { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.stack { display: grid; gap: 8px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.inline-form label { flex: 1 1 200px; }
.banner { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 12px; }
.banner.warn { background: var(--warn-bg); color: var(--warn-text); }
.banner.info { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.banner.info > * { --accent: var(--accent-strong); }
.banner.ok { background: var(--ok-bg); color: var(--ok-text); }
.banner.ok a { color: inherit; font-weight: 700; }

/* Tabs (shop lookup) */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: -4px 0 14px; }
.tab { background: none; color: var(--muted); border-radius: 8px 8px 0 0; padding: 10px 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.lookup-card { padding: 18px 20px; margin-top: 8px; }

/* History report */
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.report-head h1 { margin: 2px 0 4px; }
.eyebrow { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-strong); font-weight: 700; }   /* --accent-strong: ≥ 4.5:1 on the page's tinted top band (was 4.2–4.4:1; UI check 2026-10-06) */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
@media (max-width: 560px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; display: grid; gap: 2px; }
.tile-num { font-size: 1.35rem; font-weight: 700; }
.tile-label { font-size: 0.85rem; color: var(--muted); }
.table-wrap { overflow-x: auto; padding: 8px 12px; }
table.readings { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.readings th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
table.readings td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
table.readings tr:last-child td { border-bottom: none; }
table.readings tr.flag td { background: var(--warn-bg); color: var(--warn-text); }
.report-foot { font-size: 0.85rem; margin-top: 24px; }
@media print {
  header.top, .no-print, #flash { display: none !important; }
  body { background: #fff !important; color: #000; }
  .card, .tile { box-shadow: none; break-inside: avoid; }
}
.teaser { border-style: dashed; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Shop sign-up */
main.signup { max-width: 1080px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: start; padding-top: 32px; }
@media (max-width: 820px) { main.signup { grid-template-columns: 1fr; gap: 8px; padding-top: 16px; } }
.signup-pitch h1 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.15; margin: 4px 0 16px; }
.pitch-list { padding-left: 1.1rem; display: grid; gap: 10px; margin: 0 0 16px; }
.signup-form { padding: 22px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.08); }
.grid3 { display: grid; grid-template-columns: 2fr 0.8fr 1.2fr; gap: 10px; }
@media (max-width: 480px) { .grid3 { grid-template-columns: 1fr 1fr; } .grid3 > :first-child { grid-column: 1 / -1; } }
header.top a.nav-shops { margin-left: auto; margin-right: 14px; }

/* Shop logos */
.shop-logo { border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--border); flex: none; vertical-align: middle; }
.shop-logo.initials { display: inline-grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent-strong); font-weight: 700; font-size: 0.8rem; }
.with-logo { display: inline-flex; align-items: center; gap: 10px; }
h1.with-logo { display: flex; margin: 8px 0; }

/* Service visit lines */
.lines { display: grid; gap: 8px; }
.line { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: end; padding: 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.line-part { grid-template-columns: auto 1fr 1.2fr 0.45fr minmax(130px, 0.8fr) auto; }
.line-labor, .line-other { grid-template-columns: auto 1fr minmax(140px, 0.6fr) auto; }
@media (max-width: 640px) { .line, .line-part, .line-labor, .line-other { grid-template-columns: 1fr 1fr; } .line-main { grid-column: 1 / -1; } }
.line-kind { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); align-self: center; }
.remove-line { align-self: center; }
.line-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.line-buttons button { padding: 8px 12px; }
.needs-review { outline: 2px solid var(--warn-text); outline-offset: 1px; }
.file-button { cursor: pointer; }
.visit-lines { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.visit-lines .line-kind { display: inline-block; min-width: 4.5rem; }
.visit-lines code { font-size: 0.85em; }

/* Photos */
.boat-hero { display: flex; gap: 16px; align-items: center; margin: 8px 0 4px; }
.boat-photo { width: 120px; height: 90px; border-radius: 10px; object-fit: cover; flex: none;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--muted); font-size: 0.8rem; text-align: center; overflow: hidden; }
.boat-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 480px) { .boat-photo { width: 88px; height: 66px; } }
.boat-thumb { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; border: 1px solid var(--border); }
.thumb-row, a.card.thumb-row { display: flex; gap: 12px; align-items: center; }
.visit-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.visit-photos img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

/* Invoice/receipt "scanning" animation */
.scan-wrap { display: flex; gap: 18px; align-items: center; padding: 14px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid var(--border); }
.scan-page { position: relative; width: 116px; height: 150px; flex: none; border-radius: 6px; overflow: hidden;
  background: #fff; box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); }
.scan-page img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.scan-lines { position: absolute; inset: 14px 10px; display: grid; align-content: start; gap: 8px; }
.scan-lines span { display: block; height: 5px; border-radius: 3px; width: var(--w);
  background: #c9d6df; transform-origin: left; animation: scan-line 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.3s); }
.scan-page.has-photo .scan-lines span { background: rgb(255 255 255 / 0.5); }
@keyframes scan-line {
  0%, 8% { background: #c9d6df; transform: scaleX(0.35); opacity: 0.6; }
  18%, 70% { background: var(--accent); transform: scaleX(1); opacity: 1; }
  100% { background: #c9d6df; transform: scaleX(1); opacity: 0.6; }
}
.scan-beam { position: absolute; left: -10%; right: -10%; height: 26px; top: -26px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent) 60%, var(--accent) 88%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 70%, transparent);
  animation: scan-beam 2.7s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes scan-beam { 0% { top: -26px; } 100% { top: 150px; } }
.scan-text { display: grid; gap: 4px; }
.scan-step { font-size: 1rem; }
@media (prefers-reduced-motion: reduce) {
  .scan-beam { animation: none; top: 45%; }
  .scan-lines span { animation: none; background: var(--accent); }
}

/* My boats: card grid with per-card menus */
.boat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 16px; }
.boat-card { position: relative; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: visible; }
.boat-card-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; border-radius: var(--radius); }
.boat-card-link:hover { box-shadow: 0 0 0 2px var(--accent); }
.boat-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.boat-card-photo { aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
  display: grid; place-items: center; font-size: 2.4rem; color: var(--muted);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), color-mix(in srgb, var(--accent) 6%, var(--surface))); }
.boat-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.boat-card-body { display: grid; gap: 2px; padding: 12px 14px 14px; }
.boat-card-body .small { font-size: 0.85rem; }
.boat-card-body .badge { justify-self: start; margin-top: 6px; }
.card-menu { position: absolute; top: 8px; right: 8px; }
.menu-button { width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 1.3rem; line-height: 1;
  background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); border: 1px solid var(--border);
  backdrop-filter: blur(4px); }
.menu { position: absolute; right: 0; top: 42px; z-index: 20; min-width: 200px; padding: 6px; display: grid;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / 0.18); }
.menu button { background: none; color: var(--text); text-align: left; font-weight: 500; padding: 9px 10px; border-radius: 6px; width: 100%; }
.menu button:hover, .menu button:focus-visible { background: var(--bg); outline: none; }
.menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.danger-text { color: var(--err-text) !important; }
.add-tile { min-height: 200px; display: grid; place-content: center; gap: 6px; text-align: center; cursor: pointer;
  background: transparent; color: var(--accent); border: 2px dashed var(--border); font: inherit; }
.add-tile:hover { border-color: var(--accent); }
.add-plus { font-size: 2rem; line-height: 1; }
dialog.sheet { border: 1px solid var(--border); border-radius: 14px; padding: 20px; max-width: min(520px, calc(100% - 32px));
  background: var(--surface); color: var(--text); }
dialog.sheet::backdrop { background: rgb(8 24 38 / 0.5); }
dialog.sheet form { display: grid; gap: 12px; }
button.danger { background: var(--err-text); color: #fff; }

/* Wide overlay (Add a boat) */
dialog.sheet.wide { width: min(640px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  overflow-y: auto; padding: 0; }
dialog.sheet.wide form { padding: 0 20px 20px; }
.sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 20px 12px; background: var(--surface); border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.sheet-head h2 { margin: 0; }
.icon-close { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: transparent; color: var(--text);
  border: 1px solid var(--border); font-size: 1rem; }
.boat-grid:has(> .add-tile:only-child) .add-tile { min-height: 260px; }

/* Header actions as buttons (pills on the navy bar) */
header.top a:not(.brand), header.top button.link, nav.top-links a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  color: var(--chrome-text); background: rgb(255 255 255 / 0.06);
  border: 1px solid color-mix(in srgb, #38b6ff 45%, transparent);
  transition: background 0.15s, border-color 0.15s;
}
header.top a:not(.brand):hover, header.top button.link:hover, nav.top-links a:hover {
  background: rgb(56 182 255 / 0.16); border-color: #38b6ff;
}
header.top a:not(.brand):focus-visible, header.top button.link:focus-visible {
  outline: 2px solid #38b6ff; outline-offset: 2px;
}
/* The main action: Sign in */
header.top a[href^="/login"] {
  background: linear-gradient(135deg, var(--brand-from, #0a7cf0), var(--brand-to, #0a47d0));
  border-color: transparent; color: #fff;
}
header.top a[href^="/login"]:hover { filter: brightness(1.1); border-color: transparent; }
nav.top-links { gap: 8px; }
header.top { gap: 8px; }
header.top a.nav-shops { margin-right: 0; }
@media (max-width: 480px) {
  header.top a:not(.brand), header.top button.link, nav.top-links a { padding: 6px 11px; font-size: 0.85rem; }
}

/* Email code entry */
.code-entry { display: grid; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.code-entry label { color: var(--text); font-weight: 600; }
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; min-width: 0; font-size: 1.5rem; letter-spacing: 0.25em; text-align: center;
  font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, monospace; padding: 10px; }
.code-entry .small { font-size: 0.85rem; margin: 0; }

/* ---------------- NautHelp: chat app layout (sidebar + conversation) ---------------- */
body.help-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); }
body.help-page header.top { flex: none; }
.help-app { flex: 1; min-height: 0; display: flex; position: relative; }
.small { font-size: 0.82rem; }
.icon-btn { width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; flex: none;
  background: transparent; color: var(--muted); border: none; border-radius: 10px; }
.icon-btn:hover { background: var(--bg); color: var(--text); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Sidebar */
.help-side { width: 280px; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px;
  background: var(--bg); border-right: 1px solid var(--border); min-height: 0; transition: margin-left 0.22s ease, transform 0.22s ease; }
body.side-closed .help-side { margin-left: -281px; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 4px 8px; }
.side-title { font-weight: 800; font-size: 1.1rem; background: linear-gradient(90deg, var(--accent), var(--brand-to, var(--accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.side-new, .side-pro { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px;
  font-weight: 600; text-align: left; }
.side-pro { background: transparent; color: var(--text); border: 1px solid var(--border); }
.side-pro:hover { background: var(--surface); }
.side-filters { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 4px; }
.side-filters input, .side-filters select { padding: 8px 10px; font-size: 0.9rem; border-radius: 8px; }
.side-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; display: flex; flex-direction: column; gap: 1px; }
.side-group { margin: 14px 8px 4px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 700; }
.side-item { display: grid; gap: 1px; min-height: 44px; align-content: center; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px;
  background: transparent; color: var(--text); font-weight: 500; border: none; }
.side-item:hover { background: var(--surface); }
.side-item.active { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.side-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.93rem; }
.side-item-boat { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-empty { padding: 12px 8px; }
.side-foot { border-top: 1px solid var(--border); padding-top: 8px; display: grid; gap: 4px; }
.side-foot p { margin: 0 4px; }
.side-link { padding: 6px 4px; font-size: 0.9rem; text-decoration: none; }
.side-scrim { display: none; }

/* Conversation */
.help-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; background: var(--surface); }
.main-bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
body.side-open .main-bar #open-side { visibility: hidden; }
.main-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.main-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.thread-scroll > .notice { max-width: 760px; margin: 12px auto 0; }
.thread { max-width: 760px; margin: 0 auto; padding: 24px 20px 12px; display: flex; flex-direction: column; gap: 22px; }
body.empty-chat .thread { min-height: 100%; justify-content: center; }
.welcome { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 20px 0; }
.welcome img { border-radius: 14px; }
.welcome h2 { margin: 6px 0 0; font-size: clamp(1.3rem, 3.4vw, 1.7rem); }
.welcome > p { margin: 0 0 10px; max-width: 46ch; }
.suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 640px; }
.suggestion { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 12px; font-weight: 500;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.suggestion:hover { border-color: var(--accent); background: var(--bg); }
.suggestion strong { font-size: 0.93rem; }
.suggestion span { font-size: 0.82rem; color: var(--muted); }
.msg { display: flex; gap: 12px; align-items: flex-start; }
.msg.user { justify-content: flex-end; }
.msg.user .msg-body { background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 18px 18px 4px 18px; padding: 10px 15px; max-width: min(620px, 85%); overflow-wrap: anywhere; }
.msg-avatar { border-radius: 8px; flex: none; margin-top: 2px; }
.msg-col { min-width: 0; flex: 1; }
.msg.assistant .msg-body { line-height: 1.6; overflow-wrap: anywhere; }
.msg.assistant .msg-body p { margin: 0 0 12px; }
.msg.assistant .msg-body p:last-child { margin-bottom: 0; }
.msg.assistant .msg-body ul, .msg.assistant .msg-body ol { margin: 0 0 12px; padding-left: 1.3rem; display: grid; gap: 5px; }
.msg.assistant .msg-body h4 { margin: 14px 0 6px; }
.msg.assistant .msg-body code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
.msg-tools { margin-top: 6px; display: flex; gap: 6px; }
.copy-btn { background: transparent; color: var(--muted); border: 1px solid transparent; padding: 3px 8px; font-size: 0.8rem; font-weight: 600; border-radius: 6px; }
.copy-btn:hover { border-color: var(--border); color: var(--text); }
.msg-status { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted); }
.typing { display: inline-flex; gap: 4px; padding: 8px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; } .typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.to-bottom { position: absolute; left: 50%; transform: translateX(-50%); bottom: 150px; width: 36px; height: 36px; padding: 0;
  border-radius: 50%; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.15); font-size: 1.1rem; }

/* Composer */
.composer { padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
.composer-box { max-width: 760px; margin: 0 auto; display: grid; gap: 6px; padding: 10px 10px 8px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 4px 18px rgb(0 0 0 / 0.06); }
.composer-box:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.composer-about { display: flex; align-items: center; gap: 6px; }
.composer-about label { color: var(--muted); font-size: 0.82rem; }
.composer-about select { width: auto; max-width: 100%; padding: 4px 8px; font-size: 0.85rem; border-radius: 999px; }
.composer-box textarea { border: none; background: transparent; padding: 4px 0; min-height: 26px; max-height: 220px; resize: none;
  font-size: 1rem; line-height: 1.5; box-shadow: none; }
.composer-box textarea:focus { outline: none; }
.composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.send { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; }
.send.stop { background: var(--text); color: var(--surface); }
.composer-note { max-width: 760px; margin: 6px auto 0; text-align: center; font-size: 0.75rem; color: var(--muted); }

/* Phones: sidebar becomes a slide-over drawer */
@media (max-width: 820px) {
  body.help-page nav.top-links { display: none; }
  .help-side { position: absolute; inset: 0 auto 0 0; z-index: 30; width: min(86vw, 320px); margin-left: 0 !important;
    transform: translateX(-102%); box-shadow: 0 0 40px rgb(0 0 0 / 0.35); }
  body.side-open .help-side { transform: none; }
  .side-scrim { display: block; position: absolute; inset: 0; z-index: 25; background: rgb(8 24 38 / 0.5); }
  .side-scrim[hidden] { display: none; }
  body.side-open .main-bar #open-side { visibility: visible; }
  .thread { padding: 16px 14px 8px; gap: 18px; }
  .suggestions { grid-template-columns: 1fr; }
  .msg { gap: 8px; }
  .msg-avatar { width: 24px; height: 24px; }
  .composer { padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .composer-note { display: none; }
  .composer-box textarea { font-size: 16px; } /* keeps iOS from zooming in */
  .to-bottom { bottom: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .typing i { animation: none; opacity: 0.6; }
  .help-side { transition: none; }
}

/* In-page links glide instead of jumping (unless the person prefers less motion) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
#lookup { scroll-margin-top: 16px; }
/* NautHelp overrides of the generic page styles */
main.help-main { max-width: none; margin: 0; padding: 0; }
.composer { display: block; }
.composer-box { width: 100%; }

/* Pro Call: when works */
fieldset.when { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 10px; }
fieldset.when legend { padding: 0 6px; color: var(--muted); font-size: 0.9rem; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg label, .toggles label { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; color: var(--text);
  font-weight: 600; font-size: 0.9rem; text-align: center; background: var(--surface); }
.seg input, .toggles input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked), .toggles label:has(input:checked) { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.seg label:has(input:focus-visible), .toggles label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggles { display: flex; flex-wrap: wrap; gap: 6px; }
#days label { flex: 1 0 44px; }
#times label { flex: 1 1 100px; flex-direction: column; gap: 0; }
#times small { font-weight: 500; color: var(--muted); font-size: 0.75rem; }
.when-pick { display: grid; gap: 6px; }
.when-label { font-size: 0.82rem; color: var(--muted); font-weight: 600; }

/* Your Pro Calls (NautHelp) */
.side-calls { position: relative; }
.side-calls .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: auto; }
.calls { padding: 0 20px 20px; display: grid; gap: 10px; }
details.call { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
details.call > summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  align-items: center; padding: 12px 14px; }
details.call > summary::-webkit-details-marker { display: none; }
details.call > summary:hover { background: var(--bg); border-radius: var(--radius); }
.call-topic { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.call-date { grid-column: 1 / -1; }
.call-body { padding: 0 14px 14px; display: grid; gap: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.call-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 0.92rem; }
.call-facts dt { color: var(--muted); }
.call-facts dd { margin: 0; overflow-wrap: anywhere; }
.call-details { margin: 0; white-space: pre-wrap; color: var(--muted); }
.call-notes { background: var(--ok-bg); color: var(--ok-text); border-radius: 10px; padding: 10px 12px; }
.call-notes p { margin: 4px 0 0; white-space: pre-wrap; color: var(--text); }
.call-thread { display: grid; gap: 8px; }
.call-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.call-msg.me { justify-self: end; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: transparent; }
.call-msg p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
dialog.sheet.wide form.followup { display: grid; gap: 8px; padding: 0; }
.followup .row { align-items: center; }
.call-body button.link { justify-self: start; font-size: 0.85rem; border: none; }

/* Pro portal */
main.pro-main { max-width: 980px; }
.pro-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 6px; }
.pro-tile { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--surface);
  color: var(--text); border: 1px solid var(--border); font-weight: 600; }
.pro-tile .n { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--muted); }
.pro-tile.alert .n { color: var(--accent); }
.pro-tile.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pro-tile:hover { border-color: var(--accent); }
#past-search { margin-bottom: 10px; }
.pro-call { cursor: pointer; }
.pro-call:hover { border-color: var(--accent); }
.pro-call .take { padding: 8px 14px; }
.call-sheet { padding: 0 20px 20px; display: grid; gap: 16px; }
dialog.sheet.wide .call-sheet form { padding: 0; }
.engine-list { margin: 4px 0 0; padding-left: 18px; }
.reply-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.reply-form textarea { flex: 1; }
label.check { display: inline-flex; gap: 6px; align-items: center; font-size: 0.9rem; }
label.check input { width: auto; }
@media (max-width: 640px) {
  .pro-tiles { grid-template-columns: 1fr 1fr; }
  .call-facts { grid-template-columns: 1fr; gap: 0; }
  .call-facts dd { margin-bottom: 6px; }
}
.grant-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.grant-row .muted { flex-basis: 100%; }
.small-btn { padding: 4px 12px; font-size: 0.85rem; }

/* Pro Call video page: full screen, works upright or sideways */
body.call-page { margin: 0; height: 100dvh; overflow: hidden; background: #000; color: #fff; }
.vc { position: fixed; inset: 0; background: #000; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.vc-big { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.vc-big.contain { object-fit: contain; }
.mirror { transform: scaleX(-1); }
.vc-small { position: absolute; right: calc(12px + env(safe-area-inset-right)); bottom: calc(104px + env(safe-area-inset-bottom));
  width: 124px; height: 220px; padding: 0; border: 2px solid rgb(255 255 255 / 0.85); border-radius: 14px;
  overflow: hidden; background: #111; box-shadow: 0 6px 24px rgb(0 0 0 / 0.5); z-index: 3; }
.vc-small video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-small { touch-action: none; cursor: grab; }
.vc-small.settle { transition: transform 0.28s cubic-bezier(.2,.8,.2,1), top 0.25s, bottom 0.25s; }
.vc-small[data-corner^="t"] { bottom: auto; top: calc(76px + env(safe-area-inset-top)); }
.vc-small[data-corner$="l"] { right: auto; left: calc(12px + env(safe-area-inset-left)); }
.vc.calm .vc-small[data-corner^="b"] { bottom: calc(16px + env(safe-area-inset-bottom)); }
.vc.calm .vc-small[data-corner^="t"] { top: calc(16px + env(safe-area-inset-top)); }
/* Lens buttons move out of the way when the small video is in the bottom left */
.vc:has(.vc-small[data-corner="bl"]:not([hidden])) .vc-lenses { left: auto; right: calc(12px + env(safe-area-inset-right)); }
.vc-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center;
  padding: 24px; color: rgb(255 255 255 / 0.85); z-index: 1; pointer-events: none; }
.vc-wait p { margin: 0; font-size: 1.05rem; }
.vc-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgb(255 255 255 / 0.2); border-top-color: #fff; animation: vc-spin 0.9s linear infinite; }
@keyframes vc-spin { to { transform: rotate(360deg); } }
.vc[data-phase="call"] .vc-spinner { display: none; }
.vc[data-phase="call"] .vc-wait:has(#wait-text:empty) { display: none; }
.vc-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; z-index: 4;
  padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 24px calc(14px + env(safe-area-inset-left));
  background: linear-gradient(rgb(0 0 0 / 0.55), transparent); transition: opacity 0.3s; }
.vc-back { color: #fff; text-decoration: none; font-size: 2rem; line-height: 1; padding: 0 0 4px; margin-left: -12px;   /* a 44 px tap target (UI check 2026-10-06) */
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; flex: none; }
.vc-title { display: grid; min-width: 0; text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); }
.vc-title strong, .vc-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-title span { font-size: 0.85rem; opacity: 0.85; }
.vc-ring { position: absolute; top: calc(64px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; gap: 10px; align-items: center; padding: 8px 10px 8px 16px; border-radius: 999px; background: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(8px); font-weight: 600; white-space: nowrap; max-width: calc(100% - 24px); }
.vc-chip { padding: 6px 12px; border-radius: 999px; background: #fff; color: #000; border: none; font-weight: 700; font-size: 0.85rem; }
.vc-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: center; gap: 18px;
  padding: 28px 16px calc(20px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgb(0 0 0 / 0.55));
  transition: opacity 0.3s, transform 0.3s; }
.vc.calm .vc-controls, .vc.calm .vc-top { opacity: 0; pointer-events: none; }
.vc.calm .vc-controls { transform: translateY(20px); }
.vc-btn { width: 58px; height: 58px; padding: 0; border-radius: 50%; display: grid; place-items: center; border: none;
  background: rgb(255 255 255 / 0.18); backdrop-filter: blur(10px); color: #fff; }
.vc-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vc-btn .off { display: none; }
.vc-btn[aria-pressed="true"] { background: #fff; color: #000; }
.vc-btn[aria-pressed="true"] .off { display: inline; }
.vc-end { background: #e5352b; }
.vc-end svg { width: 30px; height: 30px; }
.vc-join { position: absolute; left: 0; right: 0; bottom: calc(108px + env(safe-area-inset-bottom)); z-index: 4; display: grid;
  justify-items: center; gap: 10px; padding: 0 16px; text-shadow: 0 1px 3px rgb(0 0 0 / 0.7); }
.vc-join p { margin: 0; }
.vc-join-btn { min-width: 220px; padding: 15px 28px; border-radius: 999px; font-size: 1.1rem; font-weight: 700; border: none; color: #fff;
  background: #15803d; box-shadow: 0 6px 20px rgb(0 0 0 / 0.4); }   /* white on it ≥ 4.5:1 (was #1fa34a, 3.3:1; UI check 2026-10-06) */
.vc[data-phase="call"] .vc-join, .vc[data-phase="error"] .vc-join, .vc[data-phase="loading"] .vc-join,
.vc[data-phase="setup"] .vc-end, .vc[data-phase="loading"] .vc-controls { display: none; }
.vc[data-phase="error"] .vc-controls { display: none; }
.vc-error { position: absolute; left: 16px; right: 16px; top: 40%; z-index: 5; margin: 0; padding: 14px; border-radius: 12px;
  background: var(--err-bg); color: var(--err-text); text-align: center; }
/* Sideways phones: keep the controls clear of the small video */
@media (orientation: landscape) and (max-height: 500px) {
  .vc-small { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .vc-controls { padding-top: 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .vc-btn { width: 50px; height: 50px; }
  .vc-join { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* "Your pro is ready" popup (any signed-in page) */
dialog.ring-pop { border: none; border-radius: 20px; padding: 28px 24px 22px; width: min(420px, calc(100% - 32px));
  text-align: center; background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgb(0 0 0 / 0.35); }
dialog.ring-pop::backdrop { background: rgb(4 14 30 / 0.6); backdrop-filter: blur(2px); }
.ring-icon { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-from, #0a7cf0), var(--brand-to, #0a47d0)); animation: ring-pulse 1.4s ease-out infinite; }
@keyframes ring-pulse { 0% { box-shadow: 0 0 0 0 rgb(10 124 240 / 0.55); } 100% { box-shadow: 0 0 0 22px rgb(10 124 240 / 0); } }
@media (prefers-reduced-motion: reduce) { .ring-icon { animation: none; } }
dialog.ring-pop h2 { margin: 0 0 6px; font-size: 1.35rem; }
dialog.ring-pop p { margin: 0 0 18px; }
.ring-join { width: 100%; padding: 14px; font-size: 1.1rem; }
.ring-later { display: flex; gap: 8px; margin-top: 8px; }
.ring-later button { flex: 1; }
.ring-start { display: grid; gap: 6px; justify-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.call-body a.button { justify-self: start; text-decoration: none; }
.call-debug { position: fixed; left: 8px; right: 8px; top: 70px; z-index: 99999; margin: 0; padding: 8px; max-height: 40vh;
  overflow: auto; font: 11px/1.35 ui-monospace, monospace; background: rgb(0 0 0 / 0.78); color: #9ef; border-radius: 8px;
  white-space: pre-wrap; pointer-events: none; }
.vc-wait p { text-shadow: 0 1px 4px rgb(0 0 0 / 0.8); }
.vc[data-phase="call"] .vc-wait p { background: rgb(0 0 0 / 0.55); padding: 8px 16px; border-radius: 999px; }
.vc-lenses { position: absolute; left: calc(12px + env(safe-area-inset-left)); bottom: calc(104px + env(safe-area-inset-bottom)); z-index: 4;
  display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgb(0 0 0 / 0.45); backdrop-filter: blur(8px); transition: opacity 0.3s; }
.vc-lens { min-width: 44px; height: 36px; padding: 0 10px; border-radius: 999px; border: none; background: transparent; color: #fff;
  font-weight: 700; font-size: 0.85rem; }
.vc-lens[aria-pressed="true"] { background: rgb(255 255 255 / 0.9); color: #000; }
.vc.calm .vc-lenses { opacity: 0; pointer-events: none; }
.vc[data-phase="setup"] .vc-lenses { bottom: calc(215px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }
@media (orientation: landscape) and (max-height: 500px) { .vc-lenses { bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* ---------------- Pro portal: chat layout (shares NautHelp's sidebar + thread styles) ---------------- */
.pro-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pro-filters button { display: grid; gap: 0; text-align: left; padding: 8px 10px; border-radius: 10px; font-weight: 600; font-size: 0.82rem;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.pro-filters .n { font-size: 1.25rem; font-weight: 800; color: var(--muted); line-height: 1.15; }
.pro-filters button.alert .n { color: var(--accent); }
.pro-filters button.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.call-item { gap: 2px; }
.call-item-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.call-item-top > :first-child { flex: 1; min-width: 0; }
.call-item-top > .shop-logo:first-child { flex: none; } /* Messages: the shop's logo before its name stays square; the name takes the room */
.call-item-top > .shop-logo:first-child + .side-item-title { flex: 1; min-width: 0; }
.call-item-time { font-size: 0.72rem; color: var(--muted); flex: none; }
.call-item .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.mini { flex: none; font-size: 0.66rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; letter-spacing: 0.03em; }
.mini.asap { background: var(--warn-bg); color: var(--warn-text); }
.mini.live { background: #18843b; color: #fff; }
.mini.match { background: var(--ok-bg); color: var(--ok-text); }
/* Pro portal: available now + my skills */
.avail-btn { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 8px; background: var(--bg); color: var(--muted); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 10px; font-size: 0.88rem; font-weight: 600; text-align: left; }
.avail-btn .avail-dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa8ba; flex: none; }
.avail-btn.on { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.avail-btn.on .avail-dot { background: #1fa34a; box-shadow: 0 0 0 3px rgb(31 163 74 / 0.25); }
.avail-choices { display: grid; gap: 8px; }
.pros-now { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 10px; border-radius: 999px; justify-self: start;
  background: var(--ok-bg); color: var(--ok-text); font-weight: 600; }
.pros-now .avail-dot { width: 8px; height: 8px; border-radius: 50%; background: #1fa34a; }

.video-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 0.9rem; flex: none; }
.call-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 0.9rem; flex: none; }
.call-btn[disabled] { opacity: 0.6; }
.call-btn.off .ci { display: none; }
.video-btn.live { background: #1fa34a; animation: ring-pulse 1.6s ease-out infinite; }
.pro-body { flex: 1; min-height: 0; display: flex; }
.pro-convo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pro-convo .thread-scroll { flex: 1; }
.tl-call svg { flex: none; }
.pro-details { width: 330px; flex: none; overflow-y: auto; border-left: 1px solid var(--border); padding: 14px 16px 20px;
  display: grid; align-content: start; gap: 14px; background: var(--bg); }
.pro-details .work-form { gap: 10px; }
.pro-details .call-facts { grid-template-columns: max-content 1fr; font-size: 0.9rem; }
.pro-bottom { flex: none; }
.take-bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
/* Timeline */
.timeline { gap: 12px; }
.tl-day { text-align: center; margin: 8px 0 2px; }
.tl-day span { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.tl-msg { display: grid; gap: 3px; max-width: min(78%, 560px); }
.tl-msg.theirs { align-self: flex-start; }
.tl-msg.mine { align-self: flex-end; }
.tl-msg.mine .tl-who { text-align: right; }
.tl-who { font-size: 0.75rem; color: var(--muted); }
.tl-bubble { padding: 10px 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); overflow-wrap: anywhere; }
.tl-bubble p { margin: 4px 0 0; white-space: pre-wrap; }
.tl-msg.theirs .tl-bubble { border-top-left-radius: 6px; }
.tl-msg.mine .tl-bubble { border-top-right-radius: 6px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: transparent; }
.tl-msg.request .tl-bubble { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.tl-facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 8px 0 0; font-size: 0.85rem; }
.tl-facts dt { color: var(--muted); }
.tl-facts dd { margin: 0; }
.tl-event { text-align: center; align-self: center; }
.tl-event span { display: inline-block; font-size: 0.8rem; color: var(--muted); padding: 3px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
.tl-event.ring.declined span, .tl-event.ring.snoozed span { color: var(--warn-text); background: var(--warn-bg); border-color: transparent; }
.tl-call { align-self: center; display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 14px;
  background: var(--ok-bg); color: var(--ok-text); max-width: 100%; }
.tl-call .muted { color: inherit; opacity: 0.8; }
/* Call requests in a shop conversation (js/call-requests.js) */
.tl-callreq { align-self: center; width: min(520px, 100%); display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--surface); }
.tl-callreq.done, .tl-callreq.cancelled { opacity: 0.7; }
.tl-callreq .tl-facts { margin: 0; }
.cr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-head strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cr-chip { font-size: 0.75rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-text); }
.tl-callreq.scheduled .cr-chip { background: var(--ok-bg); color: var(--ok-text); }
.tl-callreq.done .cr-chip, .tl-callreq.cancelled .cr-chip { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.cr-actions, .cr-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-actions .button, .cr-actions button { padding: 8px 14px; font-size: 0.9rem; }
.cr-form label:not(.check) { display: grid; gap: 4px; }
.cr-seg { border: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cr-seg label { display: flex; align-items: center; gap: 8px; padding: 10px 12px; min-height: 44px; color: var(--text); border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.cr-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
label.cr-save[hidden] { display: none; }
@media (max-width: 1100px) {
  .pro-details { position: absolute; top: 55px; right: 0; bottom: 0; z-index: 20; box-shadow: -10px 0 30px rgb(0 0 0 / 0.2); width: min(360px, 100%); }
}
@media (max-width: 820px) {
  .video-btn span { display: none; }
  .video-btn { padding: 8px 10px; }
  .call-btn { padding: 8px 10px; }
  .call-btn .cl { display: none; }
  .call-btn.off .cl { display: inline; font-size: 0.8rem; max-width: 150px; text-align: left; line-height: 1.15; }
  .tl-msg { max-width: 88%; }
}

/* NautHelp: First Mate AI | Pro Help */
.mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--border); }
.mode-toggle button { position: relative; padding: 8px 6px; border-radius: 9px; border: none; background: transparent; color: var(--muted);
  font-weight: 700; font-size: 0.88rem; }
.mode-toggle button.active { background: linear-gradient(135deg, var(--brand-from, #0a7cf0), var(--brand-to, #0a47d0)); color: #fff; }
.mode-toggle .dot { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #e5352b; }
.side-mode { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.side-mode[hidden] { display: none; }
main.help-main[hidden] { display: none; }
.pro-banner { flex: none; display: grid; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg); font-size: 0.92rem; }
.pb-notes { background: var(--ok-bg); color: var(--ok-text); border-radius: 10px; padding: 8px 12px; }
.pb-notes summary { cursor: pointer; font-weight: 700; }
.pb-notes p { margin: 6px 0 0; color: var(--text); white-space: pre-wrap; }
.pro-note { margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border);
  text-align: center; color: var(--muted); font-size: 0.9rem; }
a.video-btn { text-decoration: none; color: #fff; }
body.side-open .main-bar .open-side-btn { visibility: hidden; }
@media (max-width: 820px) { body.side-open .main-bar .open-side-btn { visibility: visible; } }
.vc[data-phase="done"] .vc-controls, .vc[data-phase="done"] .vc-join, .vc[data-phase="done"] .vc-small, .vc[data-phase="done"] .vc-lenses,
.vc[data-phase="done"] .vc-wait, .vc[data-phase="done"] .vc-big { display: none; }
.vc-done { position: absolute; inset: 0; z-index: 6; margin: auto; width: min(460px, calc(100% - 32px)); height: fit-content; max-height: calc(100% - 32px);
  overflow-y: auto; display: grid; gap: 12px; padding: 22px; border-radius: 18px; background: #16202e; color: #fff; }
.vc-done[hidden] { display: none; }
.vc-done h2 { margin: 0; font-size: 1.35rem; }
.vc-done p { margin: 0; color: rgb(255 255 255 / 0.75); }
.vc-done label { display: grid; gap: 6px; font-weight: 600; }
.vc-done label span { font-weight: 400; font-size: 0.85rem; color: rgb(255 255 255 / 0.6); }
.vc-done textarea { background: #0b121c; color: #fff; border: 1px solid #2d3b50; border-radius: 10px; padding: 10px; font: inherit; }
.vc-done .vc-join-btn { width: 100%; }
.vc-done-later { background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 999px; padding: 12px; font-weight: 600; }
.done-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 auto; max-width: 760px;
  padding: 10px 14px; border-radius: 12px; background: var(--warn-bg); color: var(--warn-text); font-size: 0.9rem; }
.done-bar[hidden] { display: none; }
.pro-bottom .done-bar { margin: 8px 16px 0; }
@media (min-width: 821px) { .pro-bottom .done-bar { margin: 8px auto 0; } }

/* Photos in Pro Call messages */
.tl-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.tl-photos.one { grid-template-columns: 1fr; }
.tl-photos a { display: block; border-radius: 10px; overflow: hidden; background: var(--bg); }
.tl-photos img { display: block; width: 100%; height: 100%; max-height: 320px; object-fit: cover; }
.tl-photos.one img { max-height: 420px; object-fit: contain; background: #000; }
.tl-photo-missing { display: grid; place-items: center; min-height: 80px; border-radius: 10px; background: var(--bg); color: var(--muted); font-size: 0.8rem; }
.attach { width: 36px; height: 36px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: transparent; color: var(--muted); border: 1px solid var(--border); }
.attach:hover { color: var(--accent); border-color: var(--accent); }
.picks { display: flex; gap: 6px; flex-wrap: wrap; }
.picks[hidden] { display: none; }
.pick { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; }
.pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick button { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: 0.7rem;
  background: rgb(0 0 0 / 0.65); color: #fff; border: none; }
.composer-actions { justify-content: flex-start; }
.composer-actions > .muted { flex: 1; }
.pick.converting { display: grid; place-items: center; background: var(--bg); color: var(--muted); font-weight: 700; }
.pick-spin { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgb(255 255 255 / 0.35); border-top-color: #fff; animation: vc-spin 0.8s linear infinite; }
.pick.uploading img { filter: brightness(0.55); }
.pick-err { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--err-text); color: #fff; font-weight: 800; }
.pick.uploading:not(:has(img)) { background: var(--bg); }
.send:disabled { opacity: 0.45; cursor: not-allowed; }
.name-gate { width: min(460px, calc(100% - 32px)); }
dialog.name-gate::backdrop { background: rgb(4 14 30 / 0.7); }

/* Pictures in First Mate chats */
.msg-user-col { display: grid; gap: 6px; justify-items: end; max-width: 80%; }
.msg.user .msg-user-col .msg-body { max-width: 100%; }
.chat-pics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.msg-user-col .chat-pics { justify-content: flex-end; margin-top: 0; }
.chat-pic { margin: 0; max-width: min(320px, 100%); display: grid; gap: 4px; }
.msg-user-col .chat-pic { max-width: 220px; }
.chat-pic a:has(img) { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); }
.chat-pic img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.chat-pic figcaption { font-size: 0.82rem; color: var(--muted); }
.chat-pic figcaption a { white-space: nowrap; }
.msg-pics:empty { display: none; }

/* Support / Terms / Privacy */
main.doc { max-width: 760px; padding-bottom: 40px; }
main.doc h2 { margin-top: 28px; }
main.doc ul { padding-left: 1.2rem; display: grid; gap: 6px; }
main.doc p, main.doc li { line-height: 1.6; }
details.faq { border-bottom: 1px solid var(--border); padding: 10px 0; }
details.faq summary { cursor: pointer; font-weight: 600; }
details.faq p { margin: 8px 0 4px; }
.notice.warn { background: var(--warn-bg); color: var(--warn-text); }
.side-legal { font-size: 0.78rem; color: var(--muted); padding: 0 4px; } .side-legal a { color: var(--muted); }

/* Home dashboard: to-dos → boats → help → work */
main.dash { max-width: 900px; padding-top: 24px; }
main.dash h1 { margin-bottom: 4px; font-size: 1.8rem; }
.dash-section { margin-top: 26px; }
.dash-section h2 { font-size: 1.05rem; margin: 0 0 10px; }
.dash-head { display: flex; align-items: baseline; justify-content: space-between; }
.dash-head a { font-weight: 600; font-size: 0.9rem; text-decoration: none; }
/* Needs your attention */
.todo-list { display: grid; gap: 8px; }
.todo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; text-align: left;
  font: inherit; color: var(--text); text-decoration: none; cursor: pointer;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); }
.todo:hover { border-color: var(--accent); }
.todo-icon { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.todo-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.todo-text span { color: var(--muted); font-size: 0.86rem; }
.todo-go { flex: none; padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 0.88rem; color: #fff;
  background: linear-gradient(135deg, var(--brand-from, #0a7cf0), var(--brand-to, #0a47d0)); }
.todo.invite { cursor: default; }
.todo-btns { flex: none; display: flex; align-items: center; gap: 6px; }
.todo-btns .todo-go { border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.88rem; }
.todo.live { border-color: #1fa34a; }
.todo.live .todo-icon { color: #fff; background: #1fa34a; animation: ring-pulse 1.4s infinite; }
.todo.live .todo-go { background: #1fa34a; }
@keyframes ring-pulse { 50% { box-shadow: 0 0 0 7px rgb(31 163 74 / 0.18); } }
/* Boats */
.dash-boats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.dash-boat { display: grid; grid-template-rows: auto 1fr; border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); transition: transform 0.12s, border-color 0.12s; }
.dash-boat:hover { border-color: var(--accent); transform: translateY(-2px); }
.dash-boat img, .dash-boat-ph { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: grid; place-items: center; font-size: 2.2rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.dash-boat-name { display: grid; gap: 1px; padding: 10px 14px 12px; }
.dash-boat-name span { color: var(--muted); font-size: 0.85rem; }
.dash-boat.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px; text-align: center; min-height: 120px;
  background: transparent; border: 2px dashed var(--border); color: var(--accent); }
.dash-boat.add .add-plus { font-size: 1.8rem; line-height: 1; }
.dash-boat.add .muted { font-size: 0.85rem; max-width: 26ch; }
.todo-more { justify-self: center; font-weight: 600; padding: 6px 12px; }
.dash-boat.skeleton { min-height: 170px; opacity: 0.5; }
.dash-boats:has(> .dash-boat:only-child) .dash-boat.add { min-height: 170px; }
/* Help cards */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-card { display: grid; grid-template-columns: auto 1fr; align-content: start; column-gap: 14px; row-gap: 4px; padding: 18px;
  border-radius: 16px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 4px 18px rgb(8 24 38 / 0.06); transition: transform 0.12s, border-color 0.12s; }
.dash-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.dash-card > :not(.dash-icon) { grid-column: 2; }
.dash-icon { grid-row: span 3; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-from, #0a7cf0), var(--brand-to, #0a47d0)); }
.dash-icon.pro { background: linear-gradient(135deg, #16a37a, #0b7a8a); }
.dash-title { font-size: 1.15rem; font-weight: 800; }
.dash-text { color: var(--muted); line-height: 1.45; font-size: 0.92rem; }
.dash-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.85rem; color: var(--muted); margin-top: 4px; }
.dash-meta:empty { display: none; }
.dash-pill { padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 0.8rem; background: var(--warn-bg); color: var(--warn-text); }
.dash-pill.live { background: #18843b; color: #fff; }
/* Work (shops, pros, admins) */
.dash-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.dash-link { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); }
.dash-link > span { font-size: 0.85rem; color: var(--muted); }
.dash-link:has(> .dash-link-icon) { display: flex; align-items: center; gap: 12px; }
.dash-link:has(> .dash-link-icon) > span { font-size: inherit; color: inherit; }
.dash-link:hover { border-color: var(--accent); }
.dash-link > span:last-child { display: grid; gap: 1px; }
.dash-link > span:last-child span { font-size: 0.85rem; color: var(--muted); }
.dash-link-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dash-account { margin-top: 30px; text-align: center; font-size: 0.88rem; }
@media (max-width: 640px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-boats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dash-boat-name { padding: 8px 10px 10px; }
  .todo-go { padding: 6px 11px; }
}

/* Boat page: actions, tabs (hull → each engine), log book */
.boat-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.boat-actions button { padding: 11px 18px; }
.boat-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); margin: 0 0 14px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.boat-tabs::-webkit-scrollbar { display: none; }
.boat-tabs button { flex: none; background: none; color: var(--muted); border: none; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 10px 12px; font-weight: 600; white-space: nowrap; }
.boat-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel.panel-off { display: none !important; }
.tab-panel > h2:first-child { margin-top: 4px; }
.hours-list { display: grid; gap: 0; }
.hours-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 4px;
  border-bottom: 1px solid var(--border); }
.hours-row:last-child { border-bottom: none; }
.fuel-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.fuel-stats > div { display: grid; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.fuel-stats strong { font-size: 1.3rem; }
.fuel-stats span { color: var(--muted); font-size: 0.85rem; }
.trip-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 0.88rem; }
.trip-actions:empty { display: none; }
.trip-actions.roomy { row-gap: 26px; margin: 14px 0 6px; }   /* log book + My trips: wrapped rows of link buttons (and the photos above) keep their 44 px hit areas apart */
fieldset.trip-hours { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 10px; }
fieldset.trip-hours legend { padding: 0 6px; color: var(--muted); font-size: 0.9rem; }
.trip-engine { display: grid; gap: 4px; }
.trip-done { padding: 4px 20px 22px; }
.trip-done-title { font-size: 1.2rem; font-weight: 800; color: var(--ok-text); margin: 0 0 4px; }

/* Reports: at a glance, hull → engines, share */
.rpt-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rpt-tiles { margin: 14px 0 6px; }
.rpt-view { display: inline-flex; gap: 4px; padding: 4px; margin: 10px 0 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.rpt-view button { background: transparent; color: var(--muted); border: none; padding: 6px 14px; border-radius: 7px; font-weight: 700; }
.rpt-view button.active { background: var(--accent); color: var(--accent-text); }
.rpt-comp { margin-top: 18px; padding-top: 12px; border-top: 2px solid var(--border); }
.rpt-comp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rpt-comp-head h3 { margin: 0 0 2px; font-size: 1.15rem; }
.rpt-hours { font-size: 1.4rem; font-weight: 800; white-space: nowrap; }
.rpt-trust { margin: 8px 0 10px; font-size: 0.9rem; color: var(--muted); }
.hours-warn { color: var(--warn-text); background: var(--warn-bg); padding: 1px 6px; border-radius: 6px; }
.share-box { margin-top: 24px; }
.share-url { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.share-url input { flex: 1; min-width: 0; font-size: 0.85rem; }
@media print {
  .rpt-comp { break-inside: avoid-page; }
  .rpt-entry { break-inside: avoid; }
}

/* Shop jobs */
main.wide-main { max-width: 980px; }
main.job-main { max-width: 820px; }
.shop-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 10px 0 16px; }
a.job-card { display: grid; gap: 4px; }
.job-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.job-head h1 { margin: 2px 0 2px; }
.job-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.job-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.checklist h2 { margin-top: 0; }
.ci-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ci { padding: 12px 0; border-bottom: 1px solid var(--border); display: grid; gap: 8px; }
.ci:last-child { border-bottom: none; }
.ci-label { font-weight: 600; }
.ci-attention { background: linear-gradient(90deg, var(--warn-bg), transparent 70%); }
.ci-failed { background: linear-gradient(90deg, var(--err-bg), transparent 70%); }
.res-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.res { padding: 10px 4px; font-size: 0.85rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); font-weight: 700; }
.res.on.res-ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-text); }
.res.on.res-attention { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-text); }
.res.on.res-failed { background: var(--err-bg); color: var(--err-text); border-color: var(--err-text); }
.res.on.res-na { background: var(--bg); border-color: var(--muted); }
.reading { display: flex; gap: 8px; align-items: center; max-width: 240px; }
.ci-photos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ci-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.ci-add { width: 64px; height: 64px; border-radius: 8px; border: 1px dashed var(--border); display: grid; place-items: center; cursor: pointer; font-size: 1.3rem; }
.line-row { padding: 6px 0; }
.line-form { display: grid; grid-template-columns: 110px 1fr 120px 80px auto auto; gap: 6px; margin-top: 10px; }
.internal { background: var(--bg); }
.send-box { border-color: var(--accent); }
.tpl-items { padding-left: 1.2rem; display: grid; gap: 8px; }
.tpl-item { display: grid; grid-template-columns: 140px 1fr 200px 110px auto auto; gap: 6px; align-items: center; }
.tpl-move button { padding: 2px 6px; }
.badge.fail { background: var(--err-bg); color: var(--err-text); border-color: transparent; }
.svc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--border); margin-bottom: 14px; }
.svc-shop { display: flex; gap: 12px; align-items: center; }
.svc-meta { text-align: right; }
.svc-findings { border-color: var(--warn-text); }
.svc-find { padding: 8px 0; border-bottom: 1px solid var(--border); }
.svc-find:last-child { border-bottom: none; }
.svc-items { list-style: none; padding: 0; margin: 0; }
.svc-items li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.svc-items li:last-child { border-bottom: none; }
@media (max-width: 700px) {
  .job-meta { grid-template-columns: 1fr; }
  .res-btns { grid-template-columns: 1fr 1fr; }
  .line-form, .tpl-item { grid-template-columns: 1fr 1fr; }
  .line-form input[name=description], .tpl-item .lab { grid-column: 1 / -1; }
}
/* Job page tabs + one at a time */
.job-prog { margin: 0 0 4px; }
.job-prog:empty { display: none; }
.prog-text { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; margin: 0 0 5px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.prog-find { color: var(--warn-text); }
.prog-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.prog-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.25s ease; }
.prog-bar.full > span { background: #1fa34a; }
.job-tabs { position: relative; margin: 0; }
.job-tabs button { display: inline-flex; align-items: center; gap: 6px; max-width: 18em; }
/* Computers: one row (a job with many sheets scrolls sideways instead of wrapping onto a second line). */
@media (min-width: 701px) { .job-tabs { flex-wrap: nowrap; overflow-x: auto; } .job-tabs button { padding: 8px 12px; max-width: 24em; min-height: 44px; flex: none; } }   /* scrolling rows squeezed them to 43 px: keep the 44 px tap size */
.job-tabs .tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.job-tabs .tab-name:has(.tab-suf) { display: flex; }
.tab-base { flex: 0 1 auto; min-width: 9ch; overflow: hidden; text-overflow: ellipsis; }
.tab-suf { flex: none; max-width: calc(100% - 3.5em); overflow: hidden; text-overflow: ellipsis; white-space: pre; }
/* phones: a long copy name ("· Port MerCruiser 5.7L") shares the room with the form's name ("Annual s · P" before; UI check 2026-10-06) */
@media (max-width: 700px) { .tab-base { min-width: 5ch; max-width: 45%; } .tab-suf { flex: 0 1 auto; min-width: 0; max-width: none; } }
.tab-count { flex: none; padding: 0 7px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; line-height: 1.6;
  background: var(--bg); border: 1px solid var(--border); color: var(--muted); }
.tab-count.done { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.tab-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e8a317; }
.tab-dot.failed { background: #e5322d; }
.checklist h2.sheet-name { margin: 0 0 10px; overflow-wrap: break-word; }
.sheet-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.sheet-count { min-width: 0; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.view-seg { margin: 0; flex: none; }
.view-seg button { padding: 5px 12px; font-size: 0.85rem; }
.sheet-prog { margin: 0 0 8px; }
.sheet-panel .ci-list + h3.group-title, .sheet-prog + h3.group-title { margin-top: 14px; }
.sheet-prog + .ci-list { margin-top: 4px; }
.sheet-hdr-fold { margin: 0 0 10px; }
.sheet-hdr-fold > summary { cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.sheet-hdr-fold[open] > summary { margin-bottom: 8px; }
.sheet-hdr-fold .sheet-hdr { margin: 0; }
.one-sec { margin: 14px 0 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ci-one .ci { padding: 10px 0 6px; gap: 12px; border-bottom: none; }
.one-sec + .ci-one .ci:not(.ci-attention):not(.ci-failed) { padding-top: 4px; }
.ci-one .ci-attention, .ci-one .ci-failed { margin: 4px -10px 0; padding: 12px 10px 8px; border-radius: 10px; }
.ci-one .ci-label { font-size: 1.12rem; line-height: 1.35; }
/* Which engine a line is for, on a sheet that mixes engines. */
.ci-eng { display: block; margin-top: 2px; font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: var(--muted); }
.ci-one .res { padding: 14px 6px; font-size: 0.95rem; }
/* Previous / Next stay on screen (stuck to the bottom while the sheet is in view). */
.one-nav { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px -16px -14px;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface);
  border-radius: 0 0 var(--radius) var(--radius); }
.one-nav > button:not(.link) { flex: 1 1 0; min-width: 0; padding: 13px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.one-nav > button[data-go="-1"] { flex: none; }
.one-done, .one-left { flex-basis: 100%; margin: 0; font-weight: 700; }
.one-done { color: var(--ok-text); }
.one-left { color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.one-nav > .one-more { flex-basis: 100%; padding: 4px 0; }
.add-hint { margin: 0; }
.send-box h2 { margin-top: 0; }
.job-meta-line { display: grid; gap: 4px; margin: 10px 0 14px; }
.job-meta-line p { margin: 0; }
.job-meta-line strong { color: var(--text); }
@media (max-width: 700px) {
  .job-meta { grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 10px 0; }
  .job-tabs button { max-width: 14em; padding: 10px; }
  .checklist h2.sheet-name { font-size: 1.05rem; }
  .view-seg button { padding: 5px 9px; font-size: 0.8rem; }
}
.alerts-card { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); margin: 12px 0; }
.alerts-card > span { color: var(--muted); font-size: 0.9rem; }
.alerts-card > button { justify-self: start; }
.alerts-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.side-foot .alerts-card { margin: 0 0 8px; font-size: 0.88rem; }

/* Boat page: hero, at a glance, actions, tidy engine cards */
.hero2 { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; margin: 8px 0 12px; }
.boat-photo-btn { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border-radius: 16px; overflow: hidden; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.boat-photo-btn:disabled { cursor: default; }
.boat-photo-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.boat-photo-btn.empty { border: 2px dashed var(--border); }
.boat-photo-btn:not(:disabled):hover { border-color: var(--accent); }
.boat-photo-btn-empty { display: grid; place-items: center; height: 100%; font-weight: 700; font-size: 1rem; line-height: 1.6; }
.boat-photo-btn-edit { position: absolute; right: 10px; bottom: 10px; padding: 5px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
  background: rgb(0 0 0 / 0.6); color: #fff; }
.boat-photo-btn-busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 0.45); }
.hero-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hero-title-row h1 { margin: 0; font-size: 1.8rem; overflow-wrap: anywhere; }
.hero-sub { margin: 4px 0 8px; color: var(--muted); font-size: 1.05rem; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 3px 10px; border-radius: 999px; font-size: 0.82rem; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.menu-wrap { position: relative; flex: none; }
.menu a { display: block; color: var(--text); text-decoration: none; font-weight: 500; padding: 9px 10px; border-radius: 6px; }
.menu a:hover { background: var(--bg); }
.menu #edit-links { display: grid; }
.menu #edit-links[hidden] { display: none; }
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 14px 0 4px; }
.glance-tile { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.glance-tile:hover { border-color: var(--accent); }
.glance-num { font-size: 1.35rem; font-weight: 800; }
.glance-label { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.boat-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px; margin: 0 0 12px; }
.boat-actions[hidden] { display: none; }
.boat-actions .act { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 12px; margin: 0; width: auto;
  border-radius: 12px; text-align: center; text-decoration: none; font: inherit; font-weight: 700; font-size: 0.95rem; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); cursor: pointer; }
.boat-actions .act span { font-size: 1.2rem; line-height: 1; }
.boat-actions .act b { font-weight: 700; }
.boat-actions .act:hover { border-color: var(--accent); }
.boat-actions .act[hidden] { display: none; }
.act-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 0.75rem; font-weight: 800; line-height: 20px;
  background: var(--warn-text, #b45309); color: #fff; }
.act-badge.bad { background: #d33; }
/* the boat's tabs: one row, never wraps; the current one underlined */
.boat-tabs.bt-main { margin: 0 0 12px; }
.boat-tabs.bt-main button { min-height: 44px; padding: 10px 14px; font-weight: 700; font-size: 0.95rem; width: auto; border-radius: 0; }
.boat-tabs.bt-main button[hidden] { display: none; }
.boat-tabs.bt-main button.active { border-bottom-width: 3px; }
.boat-attn { display: grid; gap: 8px; margin: 12px 0 0; }
.boat-attn:empty { display: none; }
.attn-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px; margin: 0;
  border-radius: 12px; text-align: left; font: inherit; font-weight: 700; background: var(--surface); color: var(--text); border: 1px solid var(--border); cursor: pointer; }
.attn-chip.bad { background: var(--err-bg); color: var(--err-text); border-color: transparent; }
.attn-chip.warn { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.attn-chip > span { font-size: 1.3rem; opacity: 0.7; }
.ov-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 0; }
.ov-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.ov-links a[hidden] { display: none; }
.tab-panel[data-panel="overview"] .glance { margin-top: 0; }
.tab-panel[data-panel="people"] #bookings [data-book] { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); font-weight: 700; text-decoration: none; }
.access-req { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.card-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.more-actions { position: relative; }
.more-actions summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; list-style: none; }
.more-actions summary::-webkit-details-marker { display: none; }
.more-actions summary::after { content: ' ▾'; }
.more-actions[open] > span { position: absolute; right: 0; top: 22px; z-index: 5; display: grid; gap: 2px; min-width: 150px; padding: 6px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgb(8 24 38 / 0.18); }
.more-actions[open] > span button { text-align: left; padding: 6px 0; }
.slot.empty { padding: 4px 0; }
.slot.empty .add-slot { font-size: 0.9rem; opacity: 0.85; }
@media (min-width: 701px) { .hero2 { grid-template-columns: 240px minmax(0, 1fr); } }
@media (max-width: 700px) {
  /* phones: a small photo beside the name, so the actions and tabs are on the first screen */
  .hero2 { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; margin: 4px 0 12px; }
  .boat-photo-btn { aspect-ratio: 1 / 1; border-radius: 14px; }
  .boat-photo-btn-empty { font-size: 0.72rem; line-height: 1.3; padding: 4px; }
  .boat-photo-btn-edit { display: none; }
  .hero-title-row h1 { font-size: 1.35rem; }
  .hero-sub { font-size: 0.92rem; margin: 2px 0 6px; }
  /* 4 icons with their words under them */
  .boat-actions .act { flex-direction: column; gap: 4px; padding: 8px 2px; font-size: 0.74rem; line-height: 1.15; min-height: 64px; }
  .boat-actions .act span { font-size: 1.35rem; }
  .act-badge { position: absolute; top: 4px; right: 6px; }
  .boat-tabs.bt-main { gap: 0; }
  .boat-tabs.bt-main button { padding: 10px 8px; font-size: 0.88rem; }
  .boat-tabs.bt-main .bt-long { display: none; }
  .tab-panel[data-panel="overview"] .glance { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tab-panel[data-panel="overview"] .glance-tile { padding: 9px 10px; }
  .tab-panel[data-panel="overview"] .glance-num { font-size: 0.95rem; }
  .tab-panel[data-panel="overview"] .glance-label { font-size: 0.74rem; }
}
.boat-tabs.bt-main .bt-short { display: none; }
@media (max-width: 700px) { .boat-tabs.bt-main .bt-short { display: inline; } }
/* Header links wrap instead of pushing the page wider on phones */
header.top { flex-wrap: wrap; }
nav.top-links { flex-wrap: wrap; min-width: 0; }
/* Alerts setup guide */
dialog.alerts-guide { width: min(440px, calc(100% - 32px)); }
.alerts-guide h2 { margin: 6px 0 8px; }
.alerts-guide p { margin: 0 0 10px; line-height: 1.5; }
.ag-head { display: flex; align-items: center; gap: 10px; }
.ag-head .icon-close { margin-left: auto; }
.ag-bell { font-size: 1.6rem; }
.ag-steps { padding-left: 1.3rem; display: grid; gap: 8px; margin: 4px 0 14px; line-height: 1.5; }
.ag-btns { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Header navigation: the logo on the left, one centered button (Home one step from the
   dashboard, Back deeper in). */
header.top:has(> .nav-center) { display: grid; grid-template-columns: 1fr auto 1fr; }
header.top a.nav-center { grid-column: 2; gap: 6px; }
header.top a.nav-center svg { flex: none; }
header.top a.nav-back { padding-left: 10px; }
@media (max-width: 480px) { header.top a.nav-back { padding-left: 8px; } }

/* Shop staff list */
.staff-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.staff-who { display: grid; gap: 1px; min-width: 0; }
.staff-who .small { overflow-wrap: anywhere; }
.staff-actions { display: flex; align-items: center; gap: 10px; }
.staff-row.invite { border-style: dashed; }
.leave-shop { margin-top: 28px; text-align: center; }

/* ---------------- Photos & videos (js/media.js) ---------------- */
dialog.media-sheet { margin: auto auto 0; width: min(440px, 100%); max-width: none; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  border: none; border-radius: 18px 18px 0 0; background: var(--surface); color: var(--text); display: grid; gap: 6px; }
@media (min-width: 700px) { dialog.media-sheet { margin: auto; border-radius: 18px; } }
dialog.media-sheet::backdrop, dialog.media-prep::backdrop { background: rgb(8 24 38 / 0.55); }
.media-sheet-title { margin: 6px 8px 4px; font-weight: 700; text-align: center; color: var(--muted); font-size: 0.9rem; }
dialog.media-sheet button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 16px; border-radius: 12px; font: inherit;
  font-weight: 600; font-size: 1.02rem; text-align: left; color: var(--text); background: var(--bg); border: 1px solid var(--border); cursor: pointer; }
dialog.media-sheet button:hover { border-color: var(--accent); }
dialog.media-sheet button > span:first-child:not(.rec-dot) { width: 26px; display: inline-grid; place-items: center; font-size: 1.2rem; }
dialog.media-sheet button small { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 0.82rem; }
dialog.media-sheet .media-cancel { justify-content: center; background: transparent; border-color: transparent; color: var(--accent); margin-top: 2px; }
.rec-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #e5322d; box-shadow: 0 0 0 3px rgb(229 50 45 / 0.25); flex: none; }
dialog.media-sheet .rec-dot { width: 16px; height: 16px; margin: 0 5px; flex: none; }

/* Camera screen */
dialog.cam { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: none; background: #000; color: #fff; overflow: hidden; }
dialog.cam::backdrop { background: #000; }
.cam-live, .cam-review > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.cam-live.mirror { transform: scaleX(-1); }
.cam-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px; background: linear-gradient(rgb(0 0 0 / 0.55), transparent); z-index: 2; }
.cam-round { width: 42px; height: 42px; border-radius: 50%; border: none; background: rgb(0 0 0 / 0.5); color: #fff; font-size: 1.2rem; cursor: pointer;
  display: grid; place-items: center; padding: 0; }
.cam-rec { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #e5322d; font-variant-numeric: tabular-nums;
  font-size: 1.05rem; box-shadow: 0 2px 12px rgb(0 0 0 / 0.4); }
.cam-rec .rec-dot { background: #fff; box-shadow: none; width: 11px; height: 11px; animation: rec-blink 1s infinite; }
@keyframes rec-blink { 50% { opacity: 0.2; } }
dialog.cam.ending .cam-rec { animation: rec-warn 0.5s infinite alternate; }
@keyframes rec-warn { to { background: #ff7a00; } }
.cam-bar { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: rgb(255 255 255 / 0.15); z-index: 3; display: none; }
dialog.cam.recording .cam-bar { display: block; }
.cam-bar-fill { height: 100%; width: 0; background: #e5322d; transition: width 0.25s linear; }
dialog.cam.recording::before { content: ''; position: absolute; inset: 0; border: 4px solid #e5322d; z-index: 1; pointer-events: none; }
.cam-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgb(0 0 0 / 0.65)); z-index: 2; display: grid; gap: 12px; justify-items: center; }
.cam-modes { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgb(0 0 0 / 0.5); }
.cam-modes button { border: none; background: transparent; color: #fff; font: inherit; font-weight: 700; font-size: 0.9rem; padding: 6px 16px; border-radius: 999px; cursor: pointer; }
.cam-modes button.active { background: #fff; color: #000; }
dialog.cam[data-mode="video"] .cam-modes button.active { background: #e5322d; color: #fff; }
dialog.cam.recording .cam-modes { visibility: hidden; }
.cam-controls { width: 100%; max-width: 420px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.cam-hint { justify-self: start; padding-left: 16px; font-size: 0.85rem; opacity: 0.85; }
.cam-shutter { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: transparent; padding: 5px; cursor: pointer; display: grid; place-items: center; }
.cam-shutter span { width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: all 0.15s; }
dialog.cam[data-mode="video"] .cam-shutter span { background: #e5322d; }
dialog.cam.recording .cam-shutter span { width: 34px; height: 34px; border-radius: 8px; }
dialog.cam.flash::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0.7; z-index: 5; }
.cam-after { display: flex; gap: 12px; width: 100%; max-width: 420px; }
.cam-after button { flex: 1; padding: 14px; font-size: 1.05rem; }
.cam-after .secondary { background: rgb(255 255 255 / 0.12); color: #fff; border-color: rgb(255 255 255 / 0.4); }
.cam-error { position: absolute; left: 16px; right: 16px; top: 40%; text-align: center; z-index: 3; display: grid; gap: 12px; justify-items: center; }
.cam-review[hidden], .cam-live[hidden] { display: none; }

/* Preparing a library video */
.media-prog { height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; margin: 8px 0 4px; }
.media-prog-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.2s linear; }

/* Thumbnails */
.media-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.media-grid img, .media-vid { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; display: block; }
.media-vid { position: relative; padding: 0; border: none; background: #000; cursor: pointer; overflow: hidden; }
.media-vid video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.media-play { position: absolute; inset: 0; margin: auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(0 0 0 / 0.55); color: #fff; font-size: 0.95rem; padding-left: 3px; pointer-events: none; }
.media-play.small { width: 26px; height: 26px; font-size: 0.7rem; }
.media-missing { width: 96px; height: 96px; border-radius: 10px; display: grid; place-items: center; background: var(--bg); color: var(--muted); font-size: 0.8rem; }
dialog.media-player { padding: 0; border: none; background: #000; width: min(900px, 100%); max-width: none; max-height: 100dvh; overflow: visible; }
dialog.media-player::backdrop { background: rgb(0 0 0 / 0.85); }
dialog.media-player video { display: block; width: 100%; max-height: 90dvh; }
dialog.media-player img { display: block; width: 100%; max-height: 90dvh; object-fit: contain; }
button.media-img { padding: 0; border: 0; background: none; min-height: 0; width: auto; cursor: zoom-in; }   /* mediaHtml inPage photos */
button.media-img img { display: block; }
dialog.media-player .cam-round { position: absolute; top: 8px; right: 8px; z-index: 2; }
.pick video { width: 100%; height: 100%; object-fit: cover; }
.pick .media-play { z-index: 1; }
.ci-media { display: contents; }
.ci-media img, .ci-media .media-vid, .ci-media .media-missing { width: 64px; height: 64px; border-radius: 8px; }
.ci-add { display: grid; place-items: center; align-content: center; gap: 0; width: 64px; height: 64px; padding: 0; border-radius: 8px;
  border: 1px dashed var(--border); background: transparent; color: var(--accent); cursor: pointer; font: inherit; }
.ci-add span { font-size: 1.2rem; line-height: 1.1; }
.ci-add small { font-size: 0.62rem; font-weight: 600; line-height: 1.1; text-align: center; }
.svc-media img, .svc-media .media-vid { width: 120px; height: 120px; }
.trip-media { display: grid; gap: 6px; }
.trip-media-label { font-weight: 600; font-size: 0.92rem; }
.trip-picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.trip-picks-list { display: contents; }
.trip-picks .pick { width: 64px; height: 64px; }

/* Photo markup (js/markup.js) */
dialog.markup { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: none;
  background: #0b0f14; color: #fff; display: grid; grid-template-rows: auto 1fr auto auto; }
dialog.markup::backdrop { background: #000; }
.mk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
.mk-title { font-weight: 700; }
.mk-btn { border: none; border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 700; background: rgb(255 255 255 / 0.12); color: #fff; cursor: pointer; }
.mk-btn.primary { background: #0a7cf0; }
.mk-stage { min-height: 0; display: grid; place-items: center; padding: 6px; }
.mk-stage canvas { max-width: 100%; max-height: 100%; touch-action: none; border-radius: 6px; cursor: crosshair; }
.mk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 10px 12px 4px; }
.mk-tools, .mk-colors { display: flex; gap: 6px; align-items: center; }
.mk-tools button { display: grid; justify-items: center; gap: 2px; min-width: 58px; padding: 7px 8px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 0.15);
  background: transparent; color: #fff; font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.mk-tools button.on { background: #fff; color: #000; }
.mk-colors button[data-color] { width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 3px solid rgb(255 255 255 / 0.25); cursor: pointer; padding: 0; }
.mk-colors button[data-color].on { border-color: #fff; box-shadow: 0 0 0 2px #0a7cf0; }
.mk-undo { width: 42px; height: 38px; border-radius: 10px; border: 1px solid rgb(255 255 255 / 0.2); background: transparent; color: #fff; font-size: 1.3rem; cursor: pointer; margin-left: 6px; }
.mk-undo:disabled { opacity: 0.35; }
.mk-hint { margin: 2px 0 calc(10px + env(safe-area-inset-bottom)); text-align: center; font-size: 0.8rem; opacity: 0.6; }
.cam-after .cam-markup { flex: 0 1 auto; }
/* Checklist photos: options, Before/After labels, ready-made notes */
.ci-thumb { position: relative; width: 64px; height: 64px; padding: 0; border: none; border-radius: 8px; overflow: hidden; background: #000; cursor: pointer; display: block; }
.ci-thumb img, .ci-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
span.ci-thumb { cursor: default; background: none; }
.ci-tag { position: absolute; left: 3px; bottom: 3px; padding: 1px 6px; border-radius: 999px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em;
  text-transform: uppercase; color: #fff; background: #6b7c93; z-index: 1; }
.ci-tag.before { background: #b45f12; }
.ci-tag.after { background: #18843b; }
.ci-canned { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip.canned { cursor: pointer; color: var(--text); text-align: left; font: inherit; font-size: 0.82rem; line-height: 1.3; padding: 5px 10px; }
.chip.canned::before { content: '+ '; color: var(--accent); font-weight: 700; }
.chip.canned:hover { border-color: var(--accent); }
dialog.media-sheet button.on { border-color: var(--accent); }
dialog.media-sheet button.danger-text { color: var(--danger, #d23b3b); }
/* Customer report: before | after */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.ba > div { background: var(--bg); border-radius: 12px; padding: 8px; }
.ba-label { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: #fff; background: #b45f12; }
.ba-label.after { background: #18843b; }
.ba .svc-media img, .ba .svc-media .media-vid { width: 100%; height: auto; aspect-ratio: 4 / 3; max-width: 260px; }
.ba .media-grid { margin-top: 6px; }
.tpl-notes { grid-column: 1 / -1; font-size: 0.88rem; } .tpl-notes textarea { width: 100%; margin-top: 6px; }
/* Recommended work: shop editor + customer approve/decline */
.rec-edit { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 10px; }
.rec-row { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.rec-main { display: flex; gap: 8px; align-items: center; }
.rec-main .rec-title { flex: 1; min-width: 0; font-weight: 600; }
.rec-price-wrap { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.rec-price-wrap input { width: 130px; }
.rec-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 520px) { .rec-main { flex-wrap: wrap; } .rec-price-wrap, .rec-price-wrap input { width: 100%; } }
.open-recs .rec-open { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-open-btns { display: flex; align-items: center; gap: 10px; }
.rec-price-tag { font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.rec-choice { display: flex; gap: 8px; margin-top: 10px; }
.rec-choice button { flex: 1; max-width: 200px; padding: 10px 14px; font-weight: 700; border-radius: 10px; background: var(--surface); color: var(--text); border: 2px solid var(--border); }
.rec-choice .rec-yes.on { background: #18843b; border-color: #18843b; color: #fff; }
.rec-choice .rec-no.on { background: var(--bg); border-color: var(--muted); color: var(--muted); }
.svc-find.rec.approved { border-left: 4px solid #1fa34a; padding-left: 10px; }
.svc-find.rec.declined { opacity: 0.75; }
.rec-total { margin: 12px 0 4px; font-size: 1.05rem; }
@media print { .rec-choice button:not(.on) { display: none; } }
.ci-before { display: grid; gap: 4px; margin: 6px 0; padding: 8px; border-radius: 10px; background: var(--bg); border: 1px dashed var(--border); }
.ci-before .ba-label { justify-self: start; }
.ci-before-media { margin-top: 2px; }
.ci-before-media img, .ci-before-media .media-vid { width: 64px; height: 64px; }
.ba-from { margin-left: 4px; }
.add-lines { display: grid; gap: 10px; }
.add-line-form { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; }
.add-line-form input[name=unit] { width: 90px; }
.add-checklist { display: flex; gap: 8px; flex-wrap: wrap; }
.add-checklist select { flex: 1; min-width: 0; }
@media (max-width: 560px) { .add-line-form { grid-template-columns: 1fr 1fr; } .add-line-form input[name=label] { grid-column: 1 / -1; } }
@media (max-width: 560px) { .add-checklist select { flex: 1 1 100%; } .add-checklist button { flex: 1; } }
/* Messages (shops ↔ owners) */
.msg-page .mode-toggle { margin: 0 10px 8px; }
.mode-toggle button.alert::after { content: ''; position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #e5352b; }
.convo-item .shop-logo { width: 26px; height: 26px; font-size: 0.65rem; }
.main-title #convo-sub { display: block; }
.start-opt { display: grid; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--text); }
.start-opt:hover { border-color: var(--accent); }
#start-list { display: grid; gap: 8px; }
.dash-msgs { margin-top: 12px; }
/* Share an inspection with a buyer */
.share-dlg form { display: grid; gap: 12px; }
.share-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; max-height: 320px; overflow: auto; }
.share-pick { position: relative; display: grid; gap: 4px; cursor: pointer; }
.share-pick input { position: absolute; top: 6px; left: 6px; z-index: 2; width: 20px; height: 20px; }
.share-pick .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.share-thumb { display: block; }
.share-thumb img, .share-thumb .media-vid { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; display: block; }
.share-pick:has(input:not(:checked)) .share-thumb { opacity: 0.4; }
.share-live { padding: 0 20px 20px; }
.share-dlg input[readonly] { width: 100%; }
.summary-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; font-size: 0.92rem; flex-wrap: wrap; }
.shop-stats { display: grid; gap: 12px; margin-top: 12px; }
.shop-stats .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.stats-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.stats-table th, .stats-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.stats-table th { color: var(--muted); font-weight: 600; font-size: 0.8rem; }
.shop-stats .tiles { margin: 0; }
.sms-consent { align-items: flex-start; font-size: 0.88rem; line-height: 1.45; } .sms-consent input { margin-top: 3px; flex: none; }
/* Notification center */
.notif-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 16px; }
.notif-ch { display: grid; gap: 2px; font-size: 0.9rem; }
.notif-ch span { color: var(--muted); overflow-wrap: anywhere; }
.notif-table { display: grid; }
.notif-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 4), 64px); align-items: center; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.notif-row > span:not(.notif-what) { justify-self: center; }
.notif-row.head { padding-top: 0; font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.notif-row.head > span { text-align: center; }
.notif-what { display: grid; gap: 2px; min-width: 0; }
.notif-what span { font-size: 0.84rem; color: var(--muted); }
.notif-na { font-size: 0.9rem; }
@media (max-width: 560px) { .notif-row { grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 4), 46px); gap: 4px; } .notif-row.head { font-size: 0.62rem; } }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch .knob { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: background 0.15s; }
.switch .knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); }
.switch input:checked + .knob { background: #1fa34a; }
.switch input:checked + .knob::after { transform: translateX(18px); }
.switch input:focus-visible + .knob { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch.off { opacity: 0.4; cursor: not-allowed; }
.notif-link { margin-bottom: 16px; }
.call-setup { grid-column: 1 / -1; display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.call-code { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.call-code label { flex: 1; min-width: 160px; }
label.check.sms-consent { align-items: flex-start; }
/* Tank gauges (js/gauge.js) */
.gauges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gauge { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 8px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); }
.gauge svg { width: 100%; max-width: 170px; overflow: visible; touch-action: none; }
.gauge.edit svg { cursor: grab; }
.g-track { fill: none; stroke: var(--border); stroke-width: 2; }
.g-zone { fill: none; stroke-width: 9; opacity: 0.85; }
.g-bad { stroke: #e5484d; } .g-warn { stroke: #f5a524; } .g-ok { stroke: #1fa34a; }
.g-tick { stroke: var(--muted); stroke-width: 1.4; }
.g-end { font-size: 9px; font-weight: 700; fill: var(--muted); }
.g-needle { stroke: var(--text); stroke-width: 3.2; stroke-linecap: round; transition: all 0.08s; }
.g-hub { fill: var(--text); }
.g-read { display: grid; justify-items: center; gap: 1px; text-align: center; }
.g-num { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
button.g-num { background: none; border: 1px dashed var(--border); border-radius: 8px; padding: 1px 10px; color: var(--text); cursor: text; font-family: inherit; }
.g-name { font-size: 0.82rem; color: var(--muted); }
.g-sub { font-size: 0.75rem; font-weight: 600; }
.g-sub { color: var(--muted); font-weight: 500; } .g-sub.alert { font-weight: 700; } .gauge.tone-bad .g-sub.alert { color: #c62a2f; } .gauge.tone-warn .g-sub.alert { color: #8f5d00; }
@media (prefers-color-scheme: dark) { .gauge.tone-bad .g-sub.alert { color: #ff6b6f; } .gauge.tone-warn .g-sub.alert { color: #f5a524; } }
.g-range { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gauge[data-empty] .g-num { color: var(--muted); }
/* Trip: start / underway / finish */
.trip-form { display: grid; gap: 14px; }
.trip-block { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 8px; margin: 0; }
.trip-block legend, .trip-block summary { font-weight: 700; padding: 0 4px; cursor: pointer; }
.trip-engine { display: grid; gap: 4px; }
.check-list { display: grid; gap: 6px; margin: 6px 0; }
.tseg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); margin: 4px 0 12px; }
.tseg button { border: none; background: transparent; color: var(--text); padding: 8px 14px; border-radius: 9px; font: inherit; font-weight: 600; cursor: pointer; }
.tseg.small button { padding: 6px 12px; font-size: 0.88rem; }
.trip-form .tseg button, .tseg#when button { min-height: 44px; }
.tseg button.active { background: linear-gradient(135deg, var(--brand-from, #0a7cf0), var(--brand-to, #0a47d0)); color: #fff; }
.track-toggle { align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
.grid-3eq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .grid-3eq { grid-template-columns: 1fr 1fr; } }
.uw-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.uw-dash { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 8px; }
.uw-dash > div { display: grid; align-content: center; justify-items: center; padding: 12px 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: center; }
.uw-dash em { font-style: normal; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.uw-big span { font-size: 3.2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.uw-big small { font-weight: 700; color: var(--muted); }
.uw-stat strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .uw-dash { grid-template-columns: 1fr 1fr 1fr; } .uw-big { grid-column: 1 / -1; } .uw-big span { font-size: 4rem; } }
.uw-note { margin: 8px 0 0; }
.uw-note a { display: inline-flex; align-items: center; min-height: 44px; }
.uw-track { margin: 10px 0; font-size: 0.88rem; display: flex; align-items: center; gap: 8px; }
.uw-track.on { color: #1fa34a; font-weight: 600; }
.uw-track.on .rec-dot { background: #1fa34a; box-shadow: 0 0 0 3px rgb(31 163 74 / 0.25); animation: rec-blink 1.4s infinite; width: 10px; height: 10px; }
.uw-track.off { color: #e5484d; }
.uw-map { height: 320px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); }
@media (max-width: 560px) { .uw-map { height: 260px; } }
.uw-actions { display: grid; gap: 16px; justify-items: center; margin-top: 14px; }
.uw-actions #finish { width: 100%; max-width: 420px; padding: 14px; font-size: 1.05rem; }
#tanks-section { margin-bottom: 18px; }
#tanks-section .row { margin-bottom: 10px; }
.tank-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tank-row { display: grid; grid-template-columns: 1.3fr 1.3fr 0.8fr auto; gap: 6px; align-items: center; }
@media (max-width: 520px) { .tank-row { grid-template-columns: 1fr 1fr; } }
.lb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.lvl-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lvl { font-size: 0.8rem; padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
.trip-stats { margin-top: 6px; font-weight: 600; }
.open-trip { border-color: #1fa34a; }
.act.underway { border-color: #1fa34a; background: color-mix(in srgb, #1fa34a 14%, var(--surface)); }
.route-map { height: min(60vh, 460px); border-radius: 12px; overflow: hidden; margin: 0 20px 20px; }
.flash-in { animation: flash-in 1.6s ease-out; }
@keyframes flash-in { from { box-shadow: 0 0 0 3px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
/* Printable log book */
.logbook-print { max-width: 1200px; }
.lb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.lb-table th, .lb-table td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
.lb-table th { background: var(--bg); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.lb-notes { max-width: 260px; white-space: pre-wrap; }
.logbook-print .rpt-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
@media (max-width: 800px) { .lb-table { display: block; overflow-x: auto; } }
@media print { .lb-table { font-size: 9pt; } .lb-table th { background: #eee !important; color: #000; } }
.tank-row { grid-template-columns: 1.3fr 1.3fr 0.8fr auto; }
.tank-warn { grid-column: 1 / 3; font-size: 0.85rem; }
.tank-warn-pct { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; }
.tank-warn-pct input { width: 70px; }
.tank-row { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.g-none { stroke: var(--border); }
/* Log book screen */
.lb-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lb-top-btns { display: flex; gap: 8px; }
.lb-tanks { margin: 6px 0 14px; }
.lb-tanks .row { margin-bottom: 10px; }
.lb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 6px 0 18px; }
.underway-banner { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none; color: var(--text); border-color: #1fa34a; margin-bottom: 14px; }
.underway-banner > span:first-child { display: grid; }
.sheet-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); text-decoration: none; color: var(--text); }
.sheet-opt:hover { border-color: var(--accent); }
.sheet-opt > span:first-child { font-size: 1.4rem; }
.sheet-opt > span:last-child { display: grid; gap: 2px; }
.sheet-opt small { color: var(--muted); font-size: 0.82rem; }
.trip-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
/* Engine cards (boat page) */
.eng-grid { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.eng-card { display: grid; gap: 12px; align-content: start; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgb(8 24 38 / 0.05); }
.eng-top { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; }
.eng-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-from, #0a7cf0), var(--brand-to, #0a47d0)); }
.eng-icon.eng-drive { background: linear-gradient(135deg, #16a37a, #0b7a8a); }
.eng-icon.eng-power { background: linear-gradient(135deg, #f5a524, #d9822b); }
.eng-icon.eng-gear { background: linear-gradient(135deg, #6b6ff0, #4a3fc4); }
.eng-id { display: grid; gap: 1px; min-width: 0; }
.eng-id strong { font-size: 1.02rem; line-height: 1.25; }
.eng-pos { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.eng-more summary { font-size: 1.2rem; padding: 0 6px; line-height: 1; }
.eng-more summary::after { content: ''; }
.eng-stats { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; }
.eng-stats > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.eng-num { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.eng-num.sm { font-size: 1rem; padding-top: 4px; }
.eng-lbl { font-size: 0.75rem; color: var(--muted); }
.eng-warn { margin: 0; font-size: 0.82rem; color: var(--warn-text); background: var(--warn-bg); padding: 6px 10px; border-radius: 10px; }
.eng-foot { display: flex; gap: 8px; flex-wrap: wrap; }
.eng-foot .small-btn { flex: 1; }
.eng-card.add { place-content: center; min-height: 120px; background: transparent; border: 2px dashed var(--border); box-shadow: none; }
.eng-card.add .add-slot { display: grid; justify-items: center; gap: 4px; background: none; border: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.eng-card.add .add-slot span { font-size: 1.5rem; line-height: 1; }
.eng-card form { border-top: 1px solid var(--border); padding-top: 10px; }
details.earlier > summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 6px 0; }
@media (max-width: 560px) { .eng-card.add { min-height: 64px; padding: 10px; } .eng-card.add .add-slot { grid-auto-flow: column; gap: 8px; } }
a.glance-tile { text-decoration: none; } .glance-num { overflow-wrap: anywhere; }
.eng-grid.single { grid-template-columns: minmax(0, 520px); }
.section-head { margin: 22px 0 10px; align-items: center; }
.hist-filter { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; width: max-content; margin-top: 0; }
.hist-filter::-webkit-scrollbar { display: none; }
.hist-filter button { flex: none; }
/* Boat page: connect a shop */
.shop-connect { display: grid; gap: 12px; padding: 0 20px 20px; }
.shop-connect > .link { justify-self: start; }
.shop-results:empty { display: none; }
.shop-results li.row { align-items: center; }
dialog.sheet.wide form.shop-invite { padding: 14px; gap: 10px; }
/* Connect to any shop (connect-shop.js): NautFix shops + directory listings, add one that isn't listed */
.shop-connect[hidden] { display: none; }
.cs-search-row { display: flex; gap: 8px; align-items: flex-end; }
.cs-search-row .cs-q { flex: 1 1 auto; min-width: 0; }
.cs-near { flex: none; min-height: 44px; white-space: nowrap; }
.cs-where { margin: -4px 0 0; }
.shop-results { max-height: min(48vh, 420px); overflow-y: auto; }
.cs-row { align-items: center; gap: 10px; flex-wrap: nowrap; }
.cs-row > .with-logo { min-width: 0; flex: 1 1 auto; align-items: center; }
.cs-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cs-text strong { overflow-wrap: anywhere; }
.cs-text .badge { justify-self: start; }
.cs-row button.connect { flex: none; min-height: 44px; }
.cs-pin { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); flex: none; }
.cs-actions { justify-content: flex-end; gap: 8px; }
.shop-connect.cs-add { gap: 10px; }
.lc-wait .row { align-items: center; }
.shop-empty { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.shop-empty-icon { font-size: 1.6rem; }
.shop-empty-text { flex: 1 1 240px; display: grid; gap: 2px; }
.dash-nudge { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px;
  border-radius: 14px; background: var(--surface); border: 1px dashed var(--border); }
.dash-nudge[hidden] { display: none; }
.dash-nudge-icon { font-size: 1.4rem; }
.dash-nudge-text { flex: 1 1 220px; display: grid; gap: 2px; }
.dash-nudge-text span { color: var(--muted); font-size: 0.9rem; }
.dash-nudge-btns { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Service screen + engine page's recent service */
.svc-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 12px; }
.svc-filters .tseg { margin: 0; }
.svc-filters select { width: auto; }
/* Search box on a list screen (Service & repairs, Log book, Jobs): filters what's already on the phone */
.list-search { width: 100%; flex: 1 1 100%; margin: 0; }
.jobs-filters select { flex: 1 1 0; min-width: 0; }
.job-found { margin-top: 4px; padding: 4px 8px; border-radius: 8px; background: var(--bg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-count { display: flex; gap: 8px; align-items: center; }
.svc-rows { gap: 0; }
.svc-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.svc-row strong { flex: 1; min-width: 0; }
.svc-row .muted { flex: none; font-size: 0.88rem; }
.hours-note { display: block; padding: 2px 8px; font-size: 0.86rem; color: var(--muted); line-height: 1.45; }
.hours-note b { color: var(--text); font-weight: 600; }
.head-btns { display: flex; gap: 16px; align-items: center; }
.hours-rows { display: grid; gap: 12px; }
.hours-row-in { display: grid; gap: 4px; font-weight: 600; }
.hours-in { display: flex; align-items: center; gap: 8px; }
.hours-in input { flex: 1; font-size: 1.15rem; }
.hours-hint { font-weight: 400; }
.hours-hint.warn-text { color: var(--warn-text); }
/* Parts & specs */
.specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 16px; margin: 0; }
.specs div { display: grid; gap: 1px; }
.specs dt { font-size: 0.78rem; color: var(--muted); }
.specs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.spec-custom { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
dialog.sheet.wide form .grid2 { gap: 10px 12px; }
.tpl-item .spec-pick { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tpl-item .spec-pick[hidden] { display: none; }
.tpl-item .spec-pick select { width: auto; max-width: 100%; }
/* Service forms: done + type + qty, yes/no, per-engine sheet header */
.res-btns.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 260px; }
.res.on.res-yn { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }   /* --accent-text: white on light blue failed contrast in dark (UI check 2026-10-06) */
.qty-row { display: grid; grid-template-columns: 200px 1fr 140px; gap: 8px; align-items: center; }
.qty-row .res-btns.two { max-width: none; }
.qty-in { display: flex; align-items: center; gap: 6px; }
.qty-in input { min-width: 0; }
@media (max-width: 700px) { .qty-row { grid-template-columns: 1fr 1fr; } .qty-row .res-btns { grid-column: 1 / -1; } }
.sheet-hdr { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 14px; padding: 10px 12px; margin: 0 0 12px;
  border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.sheet-hdr div { display: grid; gap: 1px; }
.sheet-hdr span { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sheet-hdr strong { overflow-wrap: anywhere; }
/* Printable service checklist (paper-style) */
.sf-sheet { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.sf-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 2px solid var(--text); padding-bottom: 8px; margin-bottom: 10px; }
.sf-shop { font-size: 1.1rem; }
.sf-title { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; text-align: right; }
.sf-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.sf-table th { text-align: left; font-size: 0.74rem; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); padding: 4px 6px; }
.sf-table td { border-bottom: 1px solid var(--border); padding: 6px; vertical-align: top; }
.sf-mark { width: 44px; }
.sf-type { width: 30%; font-weight: 600; }
.sf-qty { width: 90px; font-weight: 600; }
.sf-box { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 3px; border: 1.5px solid var(--text); border-radius: 3px; font-size: 0.72rem; font-weight: 800; }
.sf-sec td { font-weight: 800; background: var(--bg); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.04em; }
.sf-yn { margin-left: 10px; font-weight: 700; font-size: 0.82rem; }
.sf-yn span { padding: 1px 6px; border-radius: 999px; border: 1.5px solid transparent; }
.sf-yn .circ { border-color: var(--text); }
.sf-note { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
.sf-lbl { font-weight: 700; font-size: 0.85rem; }
.sf-write { min-height: 2.4em; border-bottom: 1px solid var(--border); white-space: pre-wrap; padding: 4px 0; }
.sf-sign { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin: 30px 0 10px; }
.sf-sign span { border-top: 1px solid var(--text); padding-top: 4px; font-size: 0.8rem; color: var(--muted); }
.sf-lines h2 { margin-top: 0; }
@media print {
  .sf-sheet { border: none; padding: 0; break-after: page; }
  .sf-sheet:last-of-type { break-after: auto; }
  .sf-table { font-size: 9.5pt; }
  .sheet-hdr { background: #fff !important; }
}
/* "Get the app" popup */
dialog.install-pop { text-align: center; max-width: min(380px, calc(100% - 32px)); position: fixed; }
dialog.install-pop .icon-close { position: absolute; top: 10px; right: 10px; }
dialog.install-pop h2 { margin: 8px 0 6px; }
dialog.install-pop > button:not(.icon-close) { width: 100%; margin-top: 10px; }
.install-icon { border-radius: 14px; margin-top: 6px; }
.install-steps { text-align: left; padding-left: 1.2rem; display: grid; gap: 6px; }
/* Personal / shop switcher (shop staff only) */
.ctx { position: relative; justify-self: end; grid-column: 3; }
header.top:not(:has(> .nav-center)) .ctx { margin-left: auto; }
.ctx-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; font: inherit; font-size: 0.85rem;
  font-weight: 700; background: color-mix(in srgb, #fff 10%, var(--chrome)); color: var(--chrome-text); border: 1px solid color-mix(in srgb, #fff 22%, var(--chrome)); cursor: pointer; }
.ctx-btn .shop-logo, .ctx-btn img { width: 22px; height: 22px; border-radius: 6px; }
.ctx-btn .shop-logo.initials { font-size: 0.6rem; letter-spacing: -0.02em; }
.ctx-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .ctx-name { max-width: 88px; } }
.ctx-caret { font-size: 0.7rem; opacity: 0.8; }
.ctx-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 260px; max-width: calc(100vw - 24px); padding: 6px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgb(0 0 0 / 0.25); }
.ctx-head { margin: 4px 10px 6px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ctx-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px;
  background: none; border: none; color: var(--text); font: inherit; cursor: pointer; }
.ctx-menu button:hover { background: var(--bg); }
.ctx-menu button.on { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.ctx-menu button.on::after { content: '✓'; margin-left: auto; color: var(--accent); font-weight: 800; }
.ctx-menu button span { display: grid; }
.ctx-menu small { color: var(--muted); font-size: 0.8rem; }
/* Shop mode: the header turns amber-edged and the switcher amber, so you always know which side you're on */
body.mode-shop header.top { border-bottom: 3px solid #f5a524; }
body.mode-shop .ctx-btn { background: #f5a524; color: #1c1300; border-color: #f5a524; }
/* Chooser after sign-in */
dialog.ctx-chooser { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: none; background: var(--bg); color: var(--text); }
dialog.ctx-chooser::backdrop { background: var(--bg); }
.ctx-chooser-in { max-width: 640px; margin: 0 auto; padding: 32px 16px; text-align: center; }
.ctx-logo { background: var(--chrome); padding: 10px 14px; border-radius: 12px; box-sizing: content-box; }
.ctx-chooser h1 { margin: 22px 0 4px; font-size: 1.8rem; }
.ctx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 22px; }
.ctx-card { display: grid; justify-items: center; gap: 6px; padding: 24px 16px; border-radius: 18px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); font: inherit; cursor: pointer; }
.ctx-card:hover { border-color: var(--accent); }
.ctx-card strong { font-size: 1.1rem; }
.ctx-card .shop-logo, .ctx-card img { width: 48px; height: 48px; border-radius: 12px; }
.ctx-card-icon { font-size: 2.4rem; line-height: 48px; }
.grid-form { display: grid; gap: 10px; }
.admin-staff { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.past-staff summary { cursor: pointer; font-weight: 700; }
.tech-hist { grid-column: 1 / -1; font-size: 0.88rem; }
.combo-list li.combo-attr { cursor: default; font-size: 0.72rem; padding: 4px 12px; }
.combo-list li.combo-attr:hover { background: none; }
/* Shop side navigation (js/shop-nav.js, 2026-10-05): five tabs (Home · Jobs · Customers · Inbox / Team · More). Computers: a bar under
   the header. Phones (< 900 px): the same five at the BOTTOM (thumb reach), above the iPhone home indicator, out of the way while typing. */
nav.app-tabs { display: flex; position: sticky; top: var(--hdr-h, 0px); z-index: 30; background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.06); }
nav.app-tabs > a, nav.app-tabs > button { flex: 1 1 0; min-width: 44px; min-height: 48px; display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 8px; margin: 0; color: var(--muted); background: none; border: none; border-radius: 0; border-bottom: 3px solid transparent;
  text-decoration: none; font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; width: auto; }
nav.app-tabs .tl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
nav.app-tabs > a:hover, nav.app-tabs > button:hover { color: var(--text); background: var(--bg); }
nav.app-tabs > .on { color: var(--accent); border-bottom-color: #f5a524; }
nav.app-tabs > :focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* the current tab's underline is its own element so it can slide to the next tab in a page-to-page view transition (below) */
nav.app-tabs > a, nav.app-tabs > button { position: relative; }
nav.app-tabs > .on:has(> .tab-ink) { border-bottom-color: transparent; }
nav.app-tabs .tab-ink { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; max-width: none; background: #f5a524; pointer-events: none; }
@media (max-width: 899px) {
  body.has-app-tabs { --tabs-h: 0px; --bnav-h: 62px; }
  nav.app-tabs { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 32; border-bottom: none; border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgb(0 0 0 / 0.08); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
  nav.app-tabs > a, nav.app-tabs > button { flex-direction: column; gap: 3px; min-height: var(--bnav-h); padding: 7px 2px 6px; font-size: 0.74rem;
    border-bottom: none; border-top: 3px solid transparent; }
  nav.app-tabs > .on { border-top-color: #f5a524; background: color-mix(in srgb, var(--accent) 8%, transparent); }
  nav.app-tabs > .on:has(> .tab-ink) { border-top-color: transparent; }
  nav.app-tabs .tab-ink { top: -1px; bottom: auto; }
  html:not([data-nf-workspace]) body.has-app-tabs:not(.help-page) { padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px)); }
  body.has-app-tabs.kbd-open nav.app-tabs { display: none; }
  /* Messages (a full-height app screen): the bar sits in the page's own column, under the composer */
  body.help-page.has-app-tabs nav.app-tabs { position: static; order: 99; flex: none; }
  /* --app-bottom = how much of the screen's bottom the bar takes right now (0 while typing, in the tech workspace, on full-height screens) */
  html:not([data-nf-workspace]) body.has-app-tabs:not(.kbd-open):not(.help-page) { --app-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px)); }
}
/* A page's own bottom bar (sticky or fixed: the estimate builder's footer, the customer estimate's "Sign & approve" bar, the job page's
   Send row, one-at-a-time nav, the status bar, toasts, and any new one: give it the class .above-tabs) sits ON TOP of the app's tab bar
   (2026-10-05). The page's padding-bottom already clears the bar; the safe area is the bar's to pad then. */
body.has-app-tabs :is(.one-nav, .send-box .send-row, .est-bar, .estb-foot, .above-tabs) { bottom: var(--app-bottom, 0px); }
@media (max-width: 899px) {
  html:not([data-nf-workspace]) body.has-app-tabs:not(.kbd-open):not(.help-page) .st-bar,
  html:not([data-nf-workspace]) body.has-app-tabs:not(.kbd-open):not(.help-page) > .toast { bottom: calc(10px + var(--app-bottom)); }
  html:not([data-nf-workspace]) body.has-app-tabs:not(.kbd-open):not(.help-page) :is(.est-bar, .estb-foot, .send-box .send-row, .above-tabs) { padding-bottom: 10px; }
}
/* the personal side's bar: the same component, blue for the person (the shop side's edge and underline are amber) */
nav.personal-tabs > .on { border-bottom-color: var(--accent); }
nav.personal-tabs .tab-ink { background: var(--accent); }
@media (max-width: 899px) { nav.personal-tabs > .on { border-top-color: var(--accent); } }
/* Jobs: My work · All jobs · Board */
nav.jobs-sub { display: flex; gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
nav.jobs-sub a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px; border-radius: 9px;
  color: var(--muted); font-weight: 600; font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
nav.jobs-sub a.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgb(0 0 0 / 0.12); }
nav.jobs-sub a:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
/* More: a bottom sheet on phones, a drop-down on computers */
dialog.shop-more { margin: auto 0 0; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 85dvh; padding: 0 0 env(safe-area-inset-bottom, 0px);
  border: 1px solid var(--border); border-radius: 16px 16px 0 0; background: var(--surface); color: var(--text); overflow-y: auto; }
dialog.shop-more::backdrop { background: rgb(0 0 0 / 0.35); }
@media (min-width: 900px) {
  dialog.shop-more { position: fixed; inset: var(--sm-top, 120px) var(--sm-right, 16px) auto auto; margin: 0; width: 340px; border-radius: 14px;
    max-height: calc(100dvh - var(--sm-top, 120px) - 16px); box-shadow: 0 12px 32px rgb(0 0 0 / 0.25); }
  dialog.shop-more::backdrop { background: transparent; }
}
.sm-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 4px 18px; }
.sm-list { list-style: none; margin: 0; padding: 4px 8px 10px; display: grid; gap: 2px; }
.sm-list a, .sm-list button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 10px; border-radius: 10px; border: none;
  background: none; color: var(--text); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.sm-list a:hover, .sm-list button:hover:not(:disabled) { background: var(--bg); }
.sm-list .on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sm-list button:disabled { opacity: 0.55; cursor: default; }
.sm-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--bg); color: var(--accent); }
.sm-t { display: grid; min-width: 0; }
.sm-t small { color: var(--muted); font-size: 0.8rem; }
.sm-t .sm-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: #e5484d; vertical-align: middle; }
.sm-t small.sm-why { color: var(--text); font-weight: 600; }   /* what the More dot is about (js/shop-nav.js setMoreDot) */
/* Shop dashboard (tabs, no long pages) */
main.shop-main { max-width: 900px; }
.shop-title { margin: 6px 0 12px; font-size: 1.35rem; }
.quick-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.todo.all-clear { cursor: default; }
.todo.all-clear .todo-icon { background: var(--ok-bg); color: var(--ok-text); }
.boats-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.boats-bar input { flex: 1 1 220px; margin: 0; }
.find-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#find-result { display: grid; gap: 8px; }
.steps-dots { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps-dots li { flex: 1; text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--muted); padding-top: 6px; border-top: 3px solid var(--border); counter-increment: s; }
.steps-dots li::before { content: counter(s) ". "; }
.steps-dots li.on { color: var(--accent); border-top-color: var(--accent); }
.steps-dots li.done { border-top-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.step-btns { display: flex; gap: 8px; justify-content: flex-end; }
.step-btns button { min-width: 110px; }
/* New job steps */
#new-dialog { overflow-wrap: anywhere; }   /* long unbroken names wrap instead of widening the dialog */
#new-dialog .steps-dots li { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { #new-dialog .steps-dots li { font-size: 0.72rem; } }
/* Shop step dots on phones: no "1." numbers, so "Boat & request" / "Customer" fit on one line (the bar shows the order; UI check 2026-10-06). */
@media (max-width: 480px) { #new-dialog .steps-dots li::before, #add-dialog .steps-dots li::before { content: none; }
  #add-dialog .steps-dots li { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.72rem; } }
#new-dialog .card { margin: 0; }
#boat-results:empty { display: none; }
#new-dialog .pick-boat { width: 100%; display: grid; gap: 2px; text-align: left; padding: 10px 14px; color: var(--text); }
#new-dialog .step-btns { position: sticky; bottom: 0; z-index: 2; margin: 0 -20px -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border); }
#new-dialog .notice { margin: 0; }
.nj-boat { display: grid; gap: 1px; min-width: 0; }
#boat-picked:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#change-boat { flex: none; }
.nj-lead { margin: 0; }
.nj-tpls { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nj-tpl { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.nj-tpl:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.nj-tpl:has(input:disabled) { opacity: 0.6; }
.nj-tpl > label { display: flex; align-items: center; gap: 10px; color: var(--text); cursor: pointer; min-width: 0; font-size: 0.95rem; }
.nj-tpl > label input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }
.nj-tpl > label span { display: grid; min-width: 0; }
.nj-tpl strong { font-weight: 600; }
.nj-tpl small { color: var(--muted); font-size: 0.8rem; }
.nj-copies { width: auto; padding: 5px 8px; font-size: 0.88rem; }
.nj-hint { font-size: 0.82rem; font-weight: 600; color: var(--accent); }
.nj-hint.none { color: var(--warn-text); }
@media (max-width: 480px) {
  .nj-tpl { grid-template-columns: 1fr; }
  .nj-copies, .nj-hint { margin-left: 30px; justify-self: start; }
}
h3.nj-own-title { margin: 6px 0 0; }
.nj-line-add { display: flex; flex-wrap: wrap; gap: 8px; }
.nj-line-add #line-label { flex: 1 1 200px; }
.nj-line-add select { flex: 1 1 110px; width: auto; min-width: 0; }
.nj-line-add #line-unit { flex: 0 0 64px; }
.nj-line-add button { flex: none; padding: 10px 12px; }
@media (max-width: 560px) { .nj-line-add #line-label { flex-basis: 100%; } }
.nj-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nj-lines:empty { display: none; }
.nj-lines li { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border: 1px solid var(--border); border-radius: 10px; line-height: 1.3; }
.nj-lines li > span { flex: 1; min-width: 0; display: grid; }
.nj-lines small { color: var(--muted); font-size: 0.8rem; }
.nj-x { flex: none; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: transparent; color: var(--muted); border: 1px solid var(--border); }
.nj-summary { display: grid; gap: 4px; }
.nj-summary p { margin: 4px 0 0; font-size: 0.92rem; }
.nj-chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.nj-chips li { padding: 3px 9px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-size: 0.82rem; }
.stats-more summary { cursor: pointer; font-weight: 700; margin: 6px 0; }
.small-help summary { cursor: pointer; font-weight: 700; }
/* Shop sign-up: "already on NautFix?" matches */
.shop-matches { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn-text) 30%, transparent); }
.match-row { display: flex; align-items: center; gap: 10px; }
.match-text { flex: 1; min-width: 0; display: grid; }
/* iPhone Safari: date/time inputs otherwise grow past their box */
input[type=date], input[type=time], input[type=datetime-local] { min-width: 0; max-width: 100%; width: 100%; -webkit-appearance: none; appearance: none; min-height: 44px; text-align: left; }
input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value, input[type=datetime-local]::-webkit-date-and-time-value { text-align: left; }
/* Toast: "✓ Saved" / errors float near the bottom, visible wherever you're scrolled */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 1000; transform: translate(-50%, 140%);
  opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: min(520px, calc(100vw - 32px)); padding: 12px 12px 12px 16px; border-radius: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.3); pointer-events: none; }
.toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast.ok { background: #0f7b4f; color: #fff; }
.toast.error { background: #b3261e; color: #fff; }
.toast button { background: none; border: none; color: inherit; font: inherit; padding: 2px 6px; cursor: pointer; opacity: 0.8; }
@media print { .toast { display: none; } }
button.sheet-opt { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.hours-note.flash-in { border-radius: 8px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.fuel-used { display: grid; gap: 4px; }
.fuel-ask { margin: 4px 0 0; }
.trip-sum-body { display: grid; gap: 12px; padding: 0 20px 20px; }
.trip-sum-body .lb-tiles { margin: 0; }
.sum-fuel { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.sum-fuel label { flex: 1 1 200px; }
dialog.sheet.wide form.sum-fuel { display: flex; padding: 0; }
.trip-summary .lb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.trip-summary .tile { padding: 8px 10px; min-height: 0; }
.trip-summary .tile-num { font-size: 1.15rem; }
.trip-summary .tile-label { font-size: 0.72rem; line-height: 1.25; }
.trip-summary .lvl-row { gap: 4px; }
.trip-summary .lvl { font-size: 0.75rem; }
.trip-sum-body { gap: 10px; }
.engine-nudge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
/* Edit trip overlay: keep pairs side by side on phones so each tab fits without scrolling */
.trip-edit .grid2 { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.trip-edit .grid-3eq { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trip-edit label { font-size: 0.86rem; }
.trip-edit .grid-form { gap: 10px; }
/* Place suggestions in the two-column edit sheet: as wide as the form (not the narrow box), right column opens leftwards */
.trip-edit .place-list { right: auto; width: max(100%, min(340px, calc(100vw - 72px))); }
.trip-edit .grid2 > label:nth-child(2) .place-list { left: auto; right: 0; }
/* Service records: corrected / entered by mistake (shown, not hidden) */
.in-error > .row strong, .in-error > .muted:first-of-type { text-decoration: line-through; opacity: 0.7; }
.in-error { opacity: 0.8; }
.rec-corrected, .rec-error { margin: 6px 0 0; }
.rec-revs .rev { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--bg); border: 1px dashed var(--border); }
.rec-edit-row { margin: 8px 0 0; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.visit-photos .vp { position: relative; display: inline-block; }
.vp-rm, .tm-rm { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  background: rgb(0 0 0 / 0.65); color: #fff; font-size: 0.8rem; display: grid; place-items: center; padding: 0; }

/* Maintenance (public/js/maintenance.js) */
.maint-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer; text-align: left; }
.maint-chip span { color: var(--muted); }
.maint-chip.bad { background: var(--err-bg); color: var(--err-text); border-color: transparent; }
.maint-chip.warn { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.maint-chip.ok { color: var(--ok-text); }
.maint-chip.bad span, .maint-chip.warn span { color: inherit; }
.maint-sheet { display: flex; flex-direction: column; }
.maint-sheet .sheet-head { margin-bottom: 0; }
.maint-body { padding: 12px 20px 16px; display: grid; gap: 10px; }
.maint-parts, .maint-views { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.maint-parts { flex-wrap: wrap; } /* every engine visible at once (how it has looked so far) */
.maint-parts button, .maint-views button { flex: none; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px;
  padding: 7px 12px; font: inherit; font-size: 0.9rem; cursor: pointer; white-space: nowrap; }
.maint-parts button.on, .maint-views button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-strong); font-weight: 600; }
.maint-views button { border-radius: 8px; padding: 6px 10px; font-size: 0.85rem; }
.maint-parts .dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 0.72rem; font-weight: 700; }
.maint-parts .dot.bad { background: var(--err-text); color: var(--surface); }   /* like .warn: white on the dark theme's light red was 1.8:1 (UI check 2026-10-06) */
.maint-parts .dot.warn { background: var(--warn-text); color: var(--surface); }
.maint-sched { margin: 0; line-height: 1.45; }
.sched-who { font-weight: 700; }
.sched-who.shop { color: #b86e00; }
.sched-who.mfr { color: var(--accent); }
.maint-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.maint-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 4px 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.maint-row .maint-main { display: grid; gap: 2px; min-width: 0; }
.maint-row:not(:has(.maint-check)) .maint-main { grid-column: 1 / 3; }
.maint-row.s-overdue { border-left: 4px solid var(--err-text); }
.maint-row.s-due_soon { border-left: 4px solid var(--warn-text); }
.maint-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.maint-pill { font-size: 0.8rem; font-weight: 600; padding: 4px 8px; border-radius: 8px; background: var(--bg); color: var(--muted); text-align: right; }
.maint-pill.bad { background: var(--err-bg); color: var(--err-text); }
.maint-pill.warn { background: var(--warn-bg); color: var(--warn-text); }
.maint-pill.ok { color: var(--ok-text); }
@media (max-width: 520px) {
  .maint-row { grid-template-columns: auto 1fr auto; }
  .maint-row .maint-pill { grid-column: 2 / 4; justify-self: start; }
  .maint-row:not(:has(.maint-check)) .maint-pill { grid-column: 1 / -1; }
}
.maint-group { margin: 6px 0 2px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.maint-empty { margin: 8px 0; padding: 16px; text-align: center; border-radius: 12px; background: var(--ok-bg); color: var(--ok-text); font-weight: 600; }
.maint-add summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.maint-add form { display: grid; gap: 10px; margin-top: 10px; padding: 0 !important; }
.maint-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border); }
.maint-foot span { margin-right: auto; font-weight: 600; }
.radio-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.radio-card > span { display: grid; gap: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.maint-due-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.glance-tile.bad { background: var(--err-bg); color: var(--err-text); border-color: transparent; }
.glance-tile.warn { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.glance-tile.bad .glance-label, .glance-tile.warn .glance-label { color: inherit; }
.sched-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sched-item { display: grid; grid-template-columns: 1fr repeat(3, 84px) auto; gap: 6px 8px; align-items: end; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
.sched-item .lab { grid-column: 1 / -1; }
.sched-item label { font-size: 0.8rem; }
.sched-item .note { grid-column: 1 / 5; }
.sched-item .at { grid-column: span 2; }
.sched-item .only { grid-column: 1 / -1; }
.sched-item .check:has(.exp) { grid-column: span 2; }
.sched-item .tpl-move { justify-self: end; }
@media (max-width: 560px) { .sched-item { grid-template-columns: repeat(3, 1fr); } .sched-item .note { grid-column: 1 / -1; } .sched-item .check { grid-column: 1 / 3; } }

/* Combining two boats (js/merge-boats.js) and "logged twice?" (Service & repairs) */
.merge-list { display: grid; gap: 8px; }
.merge-boat { align-items: center; }
.merge-boat input[type=radio] { width: auto; flex: none; margin: 0; }
.merge-boat > span:not(.boat-thumb) { flex: 1; min-width: 0; }
.merge-boat .boat-thumb { width: 56px; height: 42px; }
.merge-boat .boat-thumb.none { display: grid; place-content: center; font-size: 1.4rem; background: var(--bg); }
.merge-field { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px 10px; margin: 0; display: grid; gap: 6px; }
.merge-field legend { font-weight: 700; font-size: 0.85rem; padding: 0 4px; }
.dup-pair { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.dup-pair > .row { grid-column: 1 / -1; }
@media (max-width: 520px) { .dup-pair { grid-template-columns: 1fr; } }

/* Own schedules and shop recommendations (js/maintenance.js) */
.sched-who.mine { color: var(--ok-text); }
.maint-rec { display: block; }
.maint-rec-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.sched-own { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; }
.sched-pick .radio-card input[type=radio] { width: auto; flex: none; }

/* Admin: combine duplicate boats (js/admin-combine.js; steps 3-4 come from js/merge-boats.js) */
.admin-tool { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.admin-tool p { margin: 2px 0 0; }
.admin-tool .tool-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-tool .tool-btns button { width: auto; }
/* Admin: fold-outs ("Create a shop listing", the deletions overlay's lists) are a 44 px tap target (UI check 2026-10-06). */
#create-shop > summary, .plans-dialog details > summary, .admin-deletions details > summary { padding-block: 10px; }
.combine-body { display: grid; gap: 12px; padding: 0 20px 20px; }
.combine-body .banner { margin: 0; }
.combine-tabs { margin: 0; }
.combine-tabs .tab { width: auto; }
.combine-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.combine-dialog .steps-dots li { font-size: 0.72rem; }
.combine-slot { display: grid; gap: 1px; align-content: start; min-width: 0; min-height: 58px; padding: 7px 10px; border: 1px dashed var(--border); border-radius: 12px; }
.combine-slot.filled { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.combine-slot > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.slot-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.combine-slot button.link { width: auto; font-size: 0.82rem; }
.combine-foot { position: sticky; bottom: 0; z-index: 1; margin: 0 -20px -20px; padding: 10px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border); }
dialog.sheet.wide form.combine-search { display: flex; gap: 8px; padding: 0; }
.combine-search input { flex: 1; min-width: 0; }
.combine-search button { width: auto; flex: none; }
.combine-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: min(44vh, 440px); overflow-y: auto; }
.combine-hint { padding: 6px 2px; }
.combine-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 12px; }
.combine-row.picked { border-color: var(--accent); }
.combine-row.merged { opacity: 0.8; }
.combine-row .boat-thumb { width: 48px; height: 36px; }
.combine-dialog .boat-thumb.none { display: grid; place-content: center; background: var(--bg); font-size: 1.2rem; }
.combine-main { display: grid; gap: 1px; min-width: 0; }
.combine-main > * { overflow-wrap: anywhere; }
.combine-act { max-width: 104px; text-align: right; }
.combine-act button { width: auto; }
.combine-act button.link { font-size: 0.82rem; text-align: right; }
.combine-problems ul { margin: 6px 0 0; padding-left: 18px; }
.combine-problems li + li { margin-top: 4px; }
.combine-table-wrap { overflow-x: auto; }
.combine-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.84rem; line-height: 1.35; }
.combine-table th, .combine-table td { text-align: left; vertical-align: top; padding: 4px 6px; border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere; white-space: pre-line; }
.combine-table thead th { font-weight: 400; white-space: normal; border-bottom-width: 2px; }
.combine-table thead th:first-child { width: 25%; }
.combine-table thead th > * { display: block; }
.combine-table thead th .badge { display: inline-block; margin: 4px 0 1px; }
.combine-table thead th .boat-thumb { width: 56px; height: 40px; }
.combine-table tbody th { color: var(--muted); font-weight: 600; font-size: 0.78rem; overflow-wrap: normal; }
.combine-table td.diff { background: var(--warn-bg); color: var(--warn-text); }
.combine-notes { margin: 0; padding-left: 18px; }
.combine-owners { display: grid; gap: 8px; margin: 0; padding: 8px 12px 12px; border: 1px solid var(--border); border-radius: 12px; }
.combine-owners legend { font-weight: 700; font-size: 0.9rem; padding: 0 4px; }
.combine-owners label.owner-pick { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 0.92rem; }
.combine-owners label.owner-pick input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.combine-owners label.owner-pick > span { display: grid; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.owners-after { padding: 8px 10px; border-radius: 8px; background: var(--ok-bg); color: var(--ok-text); }
.owners-after.err { background: var(--err-bg); color: var(--err-text); font-weight: 600; }
.combine-log { display: grid; gap: 8px; max-height: min(62vh, 600px); overflow-y: auto; }
.combine-log-row { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.combine-note { font-style: italic; }
/* "Verify with your dealer" under manufacturer intervals */
.dealer-note { margin: 4px 0 8px; padding: 6px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); font-size: 0.82rem; line-height: 1.35; }
/* Offline mode */
@keyframes nf-pulse { 50% { opacity: 0.55; } }
.offline-ready { margin: 4px 0 0; font-size: 0.85rem; color: var(--muted); }
.nf-ready-dot { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: #2e9d5b; vertical-align: 1px; }
.nf-ready-dot.none { background: var(--border); }
.nf-ready-dot.busy { background: var(--accent); animation: nf-pulse 1.2s ease-in-out infinite; }
/* Offline: service records */
.svc-waiting { display: inline-flex; margin: 8px 0 0; padding: 3px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-text);
  font-size: 0.8rem; font-weight: 600; }
.svc-waiting.failed { display: block; border-radius: 8px; padding: 6px 10px; background: var(--err-bg); color: var(--err-text); font-weight: 500; }
.card.svc-pending { border-style: dashed; }
.card.svc-deleting { opacity: 0.6; }
.card.svc-deleting > .row strong { text-decoration: line-through; }
.visit-photos .vp-waiting img { opacity: 0.85; outline: 2px dashed color-mix(in srgb, var(--warn-text) 55%, transparent); outline-offset: -2px; }
.file-button.svc-no-signal { opacity: 0.5; cursor: not-allowed; }
.svc-signal-note { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); font-size: 0.85rem; }
/* Offline: job page */
.nf-waitbox:empty { display: none; }
.nf-wait { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg);
  color: var(--muted); font-size: 0.72rem; font-weight: 600; line-height: 1.5; letter-spacing: 0; text-transform: none; white-space: nowrap;
  vertical-align: 2px; cursor: pointer; }
.nf-wait.bad { background: var(--err-bg); color: var(--err-text); border-color: transparent; }
.job-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.job-badge .nf-wait { margin-left: 0; }
.ci-thumb.ci-local { outline: 2px dashed color-mix(in srgb, var(--warn-text) 60%, transparent); outline-offset: -2px; }
.ci-thumb-wait { position: absolute; right: 3px; bottom: 3px; min-width: 18px; padding: 0 4px; border-radius: 999px; background: var(--warn-bg);
  color: var(--warn-text); font-size: 0.72rem; font-weight: 700; line-height: 18px; text-align: center; pointer-events: none; }
.ci-thumb-wait.bad { background: var(--err-bg); color: var(--err-text); }
.media-sheet-note { margin: 0 8px 6px; text-align: center; }
.line-row.line-local > span:first-child { opacity: 0.9; }
.net-note { display: none; margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); font-size: 0.85rem; line-height: 1.35; }
.job-offline .net-note { display: block; }
.job-offline a.net-off { opacity: 0.5; pointer-events: none; }
.job-offline [data-net]:disabled { cursor: not-allowed; }

/* Offline: trips + hours */
.nf-wait { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  background: var(--warn-bg); color: var(--warn-text); white-space: nowrap; vertical-align: 1px; }
.card.trip > div > .nf-wait { margin-top: 4px; }
.map-off { margin: 0; padding: 16px; color: var(--muted); font-size: 0.92rem; text-align: center; }
.uw-map.off, .route-map.off { display: grid; place-items: center; height: auto; min-height: 90px;
  background: repeating-linear-gradient(135deg, var(--bg), var(--bg) 10px, var(--surface) 10px, var(--surface) 20px); }
#uw-wait .nf-wait { margin-top: 4px; }

/* Equipment (boat page) and "only if" items */
.equip-icon { font-size: 1.3rem; display: grid; place-content: center; }
.equip-empty { grid-column: 1 / -1; }
.maint-only { display: block; margin-top: 2px; color: var(--muted); font-style: italic; }
.maint-only .link { font-style: normal; }
.maint-hidden summary { cursor: pointer; margin: 8px 0; }

/* Reports: equipment */
.rpt-equip { display: grid; gap: 2px; }
.rpt-expired { color: var(--err-text); font-weight: 600; }
.recall-banner ul { margin: 6px 0 0; padding-left: 18px; }
.recall-banner li { margin: 4px 0; }

/* Shop: due for service */
.due-body { padding: 0 20px 20px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }   /* one column no wider than the sheet (the customer panel's tabs pushed it 20 px past the edge; UI check 2026-10-06) */
.due-boat { display: grid; gap: 4px; }
.due-boat .row { flex-wrap: wrap; gap: 6px; }
.due-boat .maint-pill { white-space: nowrap; display: inline-block; margin: 2px 0; }
/* Shop side tap targets ≥ 44 px (UI check 2026-10-06): Due for service / bookings / claims rows, "Show N more", staff invites, Find any boat's
   result buttons, a form's ＋ Add row / ✍ Sign. */
.due-body .small-btn, .due-body .link.small, .due-body a.small-btn, #find-result .small-btn, .invite-cancel, .ci-part [data-row-add], .ci-part [data-sign],
.fi-sig .small-btn, .summary-head .small-btn, .summary-head .link.small { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.summary-head { margin-bottom: 4px; }
.todo-more, .staff-remove, #quick-update { min-height: 44px; }
.staff-remove, #quick-update { display: inline-flex; align-items: center; }
.sheet-head .head-actions { display: flex; align-items: center; gap: 8px; }

/* Seasonal question (Maintenance, the boat itself) */
.season-ask { display: grid; gap: 8px; margin: 8px 0; }
.season-row { display: grid; grid-template-columns: 1fr 150px; gap: 8px; align-items: center; }
/* (span: the parts line under a due item; div.maint-parts is the engine strip at the top of the sheet) */
span.maint-parts { display: block; margin-top: 2px; color: var(--text); opacity: 0.85; }

/* Bookings (js/appointments.js) */
.bookings { display: grid; gap: 8px; margin: 8px 0; }
.booking { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.booking.proposed { border-color: var(--warn-text); }
.booking.confirmed { border-color: var(--ok-text); }
.booking-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.shop-bookings { display: grid; gap: 8px; margin-top: 12px; }
.shop-bookings .card { display: grid; gap: 6px; }
.shop-bookings .card .booking { border: 0; padding: 0; }

/* QR landing pages (/s/, /c/) */
.qr-page { max-width: 560px; }
.qr-shop, .qr-step { display: grid; gap: 10px; }
.qr-boat { align-items: center; }
.qr-boat input[type=checkbox] { width: auto; flex: none; margin: 0; }
.qr-boat .boat-thumb.none { display: grid; place-content: center; font-size: 1.4rem; }
.qr-card { display: grid; gap: 10px; }
.qr-row { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: center; }
.qr-img svg { width: 140px; height: 140px; background: #fff; border-radius: 8px; }
@media (max-width: 480px) { .qr-row { grid-template-columns: 1fr; } .qr-img { justify-self: center; } }

/* Header status (js/status.js): connection + changes waiting, beside the Personal / shop switcher */
.hdr-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 6px; min-width: 0; }
header.top:not(:has(> .nav-center:not([hidden]))) .hdr-end { margin-left: auto; }
/* Never a second row: the switcher's name gives way (ellipsis) before anything wraps */
header.top:has(> .hdr-end) { flex-wrap: nowrap; }
header.top:has(> .nav-center[hidden]) { display: flex; }
header.top:has(> .hdr-end) > a.brand { flex: none; }
.hdr-end { flex: 0 1 auto; }
.hdr-end .ctx { grid-column: auto; min-width: 0; }
.hdr-end .ctx-btn { max-width: 100%; min-width: 0; }
.hdr-end .ctx-name { min-width: 0; }
.hdr-end .ctx-btn > :not(.ctx-name) { flex: none; }
.nf-status { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 10px; border-radius: 999px; flex: none;
  font: inherit; font-size: 0.8rem; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer;
  color: var(--chrome-text); background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.2); }
.nf-status:hover { background: rgb(56 182 255 / 0.16); border-color: #38b6ff; }
.nf-status:focus-visible { outline: 2px solid #38b6ff; outline-offset: 2px; }
/* The dot: filled green = online, hollow ring = offline (shape, not only colour) */
.nf-dot { flex: none; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; background: #3ecf74; box-shadow: 0 0 0 3px rgb(62 207 116 / 0.22); }
.is-off .nf-dot, .nf-st-now.off .nf-dot { background: transparent; border: 2px solid currentColor; box-shadow: none; opacity: 0.85; }
.nf-status.is-off { color: #c3d0de; border-style: dashed; }
.nf-status.old { background: #f5b83d; color: #3a2600; border: 1px solid #f5b83d; }
.nf-status.bad { background: #ffd9d4; color: #7a140c; border: 1px solid #ffd9d4; }
.nf-status.old .nf-dot, .nf-status.bad .nf-dot { box-shadow: none; }
.nf-status.old.is-on .nf-dot, .nf-status.bad.is-on .nf-dot { background: #1d7a3e; }
.nf-status.busy .nf-dot { animation: nf-pulse 1.2s ease-in-out infinite; }
.nf-st-short { display: none; }
/* Phones: dot + short word + short count; tight headers (a centre button too) and the narrowest: dot + count only.
   The row never wraps: with a centre button the switcher shows just its icon (the amber edge still says "shop"). */
@media (max-width: 560px) {
  .nf-status { padding: 5px 9px; gap: 5px; }
  .nf-st-count { display: none; }
  .nf-st-short { display: inline; }
  header.top:has(> .nav-center:not([hidden])) { grid-template-columns: auto 1fr auto; gap: 6px; }
  header.top:has(> .nav-center:not([hidden])) a.nav-center { justify-self: center; }
}
@media (max-width: 480px) {
  header.top:has(> .nav-center:not([hidden])) .ctx-name { display: none; }
  header.top:has(> .nav-center:not([hidden])) .ctx-btn { padding: 4px 7px 4px 5px; gap: 3px; }
}
@media (max-width: 440px) {
  header.top:has(> .nav-center:not([hidden])) .nf-status .nf-st-word { display: none; }
}
@media (max-width: 400px) {
  .nf-status.has-count .nf-st-word, header.top:has(.ctx) .nf-status .nf-st-word { display: none; }
}
@media (max-width: 359px) {
  .nf-status .nf-st-word { display: none; }
  header.top { padding-left: 12px; padding-right: 12px; }
  header.top a.brand img { height: 16px; }
  header.top:has(> .hdr-end .nf-status) a.nav-center { font-size: 0; gap: 0; padding: 7px 9px; }
  header.top:has(> .hdr-end .nf-status) a.nav-center svg { width: 18px; height: 18px; }
}
/* The sheet: a dropdown under the header on wide screens, a bottom sheet on phones */
dialog.nf-sync { position: fixed; inset: var(--nf-top, 64px) var(--nf-right, 16px) auto auto; margin: 0; padding: 0;
  width: min(420px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - var(--nf-top, 64px) - 12px);
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 16px 40px rgb(0 0 0 / 0.3); overflow: hidden; }
dialog.nf-sync[open] { display: flex; flex-direction: column; }
dialog.nf-sync::backdrop { background: rgb(8 24 38 / 0.25); }
.nf-st-in { display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; }   /* not flex: 1 (Safari sized the sheet as its title only) */
.nf-sync .sheet-head { padding: 12px 16px 10px; margin: 0; }
.nf-sync .sheet-head h2 { font-size: 1.05rem; }
.nf-sync .icon-close { width: 34px; height: 34px; }
.nf-st-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px 16px; display: grid; gap: 12px; }
.nf-st-now { display: grid; gap: 2px; }
.nf-st-big { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 1rem; }
.nf-st-big .nf-dot { width: 12px; height: 12px; }
.nf-st-now.off .nf-dot { color: var(--muted); }
.nf-st-note { margin: 0; line-height: 1.4; }
.nf-st-line { margin: 0; font-size: 0.9rem; }
.nf-st-line.ok { color: var(--ok-text); }
.nf-st-sec { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.nf-st-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nf-st-sec h3 { margin: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.nf-sync .nf-refresh { font-size: 0.88rem; font-weight: 600; }
.nf-sync .nf-send { width: 100%; }
.nf-sync .notice { margin: 0; padding: 8px 10px; font-size: 0.85rem; line-height: 1.4; }
.nf-spin { display: inline-block; animation: nf-spin 1.2s linear infinite; }
@keyframes nf-spin { to { transform: rotate(360deg); } }
.nf-groups { display: grid; gap: 6px; }
.nf-group { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.nf-group.bad { border-color: color-mix(in srgb, var(--err-text) 40%, var(--border)); }
.nf-group > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; }
.nf-group > summary::-webkit-details-marker { display: none; }
.nf-group > summary::before { content: '▸'; color: var(--muted); margin-right: -4px; }
.nf-group[open] > summary::before { content: '▾'; }
.nf-group-title { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-group-n { flex: none; font-size: 0.8rem; color: var(--muted); }
.nf-group.bad .nf-group-n { color: var(--err-text); font-weight: 600; }
.nf-group > .nf-ops { padding: 0 8px 8px; }
.nf-group > .nf-saved { padding: 0 12px 10px; }
.nf-group[data-g="saved"] > summary { flex-wrap: wrap; }
.nf-group[data-g="saved"] .nf-group-title { flex: 0 1 auto; }
.nf-group[data-g="saved"] .nf-group-n { margin-left: auto; }
.nf-op-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 22px; }
.nf-group .nf-op { background: var(--surface); }
.nf-saved { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.9rem; }
.nf-saved li { display: flex; justify-content: space-between; gap: 10px; }
.nf-saved li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-saved li > span:last-child { flex: none; font-size: 0.82rem; }
.nf-kept { color: var(--ok-text); }
.nf-ops { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nf-op { display: grid; gap: 3px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.nf-op.failed { border-color: color-mix(in srgb, var(--err-text) 40%, var(--border)); }
.nf-op.conflict { border-color: color-mix(in srgb, var(--warn-text) 50%, var(--border)); }
.nf-op-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.nf-op-head strong { overflow-wrap: anywhere; font-size: 0.92rem; }
.nf-op-status { flex: none; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.nf-op.failed .nf-op-status { color: var(--err-text); }
.nf-op.conflict .nf-op-status { color: var(--warn-text); }
.nf-op-error { margin: 2px 0 0; padding: 6px 8px; border-radius: 8px; background: var(--err-bg); color: var(--err-text); font-size: 0.85rem; }
.nf-conflict { display: grid; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); font-size: 0.9rem; }
.nf-conflict .muted { color: inherit; opacity: 0.8; }
.nf-op-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }
.nf-op-btns button:not(.nf-discard) { padding: 7px 14px; font-size: 0.88rem; }
.nf-op-btns .nf-discard { margin-left: auto; }
.nf-sync .nf-discard { flex: none; padding: 2px; border: none; background: none; color: var(--err-text); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.nf-op-btns .nf-discard { padding: 4px 2px; border: none; background: none; color: var(--err-text); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
@media (max-width: 640px) {
  /* Bottom sheet. Plain block layout, no flex: Safari on iPhone sized the flex version as just its title row, so the rest sat
     below the screen. Its height = its content; only the body scrolls, capped so the sheet stays under 88% of the screen. */
  dialog.nf-sync { inset: auto 0 0 0; margin: 0; width: 100%; height: auto; max-height: none;
    border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  dialog.nf-sync[open], .nf-sync .nf-st-in { display: block; }
  .nf-sync .nf-st-body { max-height: calc(88vh - 60px - env(safe-area-inset-bottom));
    max-height: calc(88dvh - 60px - env(safe-area-inset-bottom)); }
  dialog.nf-sync::backdrop { background: rgb(8 24 38 / 0.5); }
}
@media (prefers-reduced-motion: reduce) { .nf-status.busy .nf-dot, .nf-spin { animation: none; } }
/* Notification bell (js/bell.js): 🔔 beside the status and the switcher in .hdr-end; a red count for this side, a red dot on the
   switcher for the other side(s); tap → a dropdown under the header on wide screens, a bottom sheet on phones (like the status panel). */
.nf-bell { position: relative; display: inline-grid; place-items: center; flex: none; width: 34px; height: 32px; padding: 0; margin: 0;
  border-radius: 999px; cursor: pointer; font: inherit; color: var(--chrome-text); background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.2); }
.nf-bell:hover { background: rgb(56 182 255 / 0.16); border-color: #38b6ff; }
.nf-bell:focus-visible { outline: 2px solid #38b6ff; outline-offset: 2px; }
.nf-bell svg { display: block; }
.nf-bell-n { position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
  background: #e5484d; color: #fff; font-size: 0.68rem; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--chrome); pointer-events: none; }
.nf-bell-n[hidden] { display: none; }
.ctx-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px var(--chrome); pointer-events: none; }
.ctx-dot[hidden] { display: none; }
.ctx-menu .ctx-n { margin-left: auto; flex: none; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px;
  background: #e5484d; color: #fff; font-size: 0.72rem; font-weight: 800; line-height: 20px; text-align: center; }
.ctx-menu .ctx-n[hidden] { display: none; }
.ctx-menu button.on:has(.ctx-n:not([hidden]))::after { margin-left: 8px; }
@media (max-width: 400px) {
  .nf-bell { width: 30px; }
  header.top:has(> .nav-center:not([hidden])) .nf-bell { width: 28px; }
  .nf-bell svg { width: 18px; height: 18px; }
}
dialog.nf-bell-pop { position: fixed; inset: var(--nf-top, 64px) var(--nf-right, 16px) auto auto; margin: 0; padding: 0;
  width: min(400px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - var(--nf-top, 64px) - 12px);
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 16px 40px rgb(0 0 0 / 0.3); overflow: hidden; }
dialog.nf-bell-pop[open] { display: flex; flex-direction: column; }
dialog.nf-bell-pop::backdrop { background: rgb(8 24 38 / 0.25); }
.nf-bell-in { display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; }
.nf-bell-pop .sheet-head { padding: 12px 16px 6px; margin: 0; }
.nf-bell-pop .sheet-head h2 { font-size: 1.05rem; }
.nf-bell-pop .icon-close { width: 34px; height: 34px; }
.nf-bell-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 16px 4px; font-size: 0.9rem; }
.nf-bell-tools .link { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.nf-bell-note { margin: 0 16px 8px; }
.nf-bell-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 10px; }
.nf-bell-empty { margin: 8px 8px 14px; }
.nf-bell-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nf-bell-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 9px 10px; border: 0; border-radius: 10px;
  background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box; }
.nf-bell-row:hover, .nf-bell-row:focus-visible { background: var(--bg); }
.nf-bell-item.unread .nf-bell-row { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.nf-bell-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); font-size: 1rem; line-height: 1; }
.nf-bell-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.nf-bell-t { font-weight: 500; font-size: 0.93rem; overflow-wrap: anywhere; }
.nf-bell-item.unread .nf-bell-t { font-weight: 800; }
.nf-bell-b { color: var(--muted); font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.nf-bell-when { color: var(--muted); font-size: 0.78rem; }
.nf-bell-dot { flex: none; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
@media (max-width: 640px) {
  dialog.nf-bell-pop { inset: auto 0 0 0; margin: 0; width: 100%; height: auto; max-height: none;
    border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  dialog.nf-bell-pop[open], .nf-bell-pop .nf-bell-in { display: block; }
  .nf-bell-pop .nf-bell-body { max-height: calc(80vh - 96px - env(safe-area-inset-bottom)); max-height: calc(80dvh - 96px - env(safe-area-inset-bottom)); }
  .nf-bell-pop .nf-bell-body { padding-bottom: 76px; }   /* the last row scrolls clear of the First Mate button */
  dialog.nf-bell-pop::backdrop { background: rgb(8 24 38 / 0.5); }
}
/* /notifications/inbox/ */
.inbox-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.inbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.inbox-card { padding: 6px; }
/* Quiet jobs (js/quiet-jobs.js): "Boat at shop: 12 days", "Quiet for 4 days", the settings card */
.qj-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.82rem; color: var(--muted); }
.qj-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  background: var(--warn-bg); color: var(--warn-text); border: 1px solid color-mix(in srgb, var(--warn-text) 35%, transparent); }
.job-quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 10px; }
.job-quiet .button, .job-quiet button { padding: 6px 12px; font-size: 0.88rem; }
.wip-card .qj-line, .bd-job .qj-line { margin-top: 2px; }
.qj-form { display: grid; gap: 10px; }
.qj-form .qj-row { display: grid; gap: 4px; }
.qj-form select, .qj-form input[type=number] { max-width: 280px; }
.qj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qj-list li { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.qj-list .qj-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* Shop directory (/shops/) */
/* Shop directory: a full-screen map with search floating over it (/shops/). */
body.dir-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.dir-stage { flex: 1; position: relative; min-height: 0; padding: 0; max-width: none; margin: 0; }
.dir-stage > .dir-fullmap { position: absolute; inset: 0; }   /* beats maplibregl-map's position: relative */
.dir-top { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); z-index: 3; }
.dir-bar2 { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 6px 4px 14px; box-shadow: 0 4px 18px rgb(0 0 0 / 0.18); }
.dir-bar2 .dir-glass { color: var(--muted); flex: none; }
.dir-bar2 input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 4px; font-size: 1rem; box-shadow: none; outline: none; }
.dir-bar2 select { flex: none; width: auto; max-width: 42%; border: 0; border-left: 1px solid var(--border); border-radius: 0; background-color: transparent;
  padding: 8px 6px; font-size: 0.9rem; color: var(--muted); }
.dir-drop { list-style: none; margin: 6px 0 0; padding: 4px 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.22); max-height: calc(100dvh - 150px); overflow-y: auto; }
.dir-drop li[data-i] { display: flex; gap: 10px; align-items: flex-start; padding: 8px 14px; cursor: pointer; line-height: 1.3; }
.dir-drop li[data-i].active, .dir-drop li[data-i]:hover { background: var(--bg); }
.dir-drop .dir-sec { padding: 6px 14px 2px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.dir-drop .dir-sec.none { text-transform: none; font-weight: 400; font-size: 0.9rem; letter-spacing: 0; padding: 10px 14px; }
.dir-ico { flex: none; width: 22px; text-align: center; }
.dir-ico.on { filter: hue-rotate(80deg); }
.dir-chips { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.dir-drop:not([hidden]) + .dir-chips { display: none; }
.dir-chip { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 0.88rem;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.15); min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.dir-chip:hover { border-color: var(--accent); }
.dir-panel { position: absolute; z-index: 2; left: 12px; top: 120px; bottom: 12px; width: 340px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 28px rgb(0 0 0 / 0.22); }
.dir-panel-head { justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.dir-panel-body { overflow-y: auto; padding: 4px 0; }
.dir-panel-body p { padding: 0 14px; }
.dir-row { display: grid; gap: 2px; width: 100%; text-align: left; background: none; color: var(--text); border: 0; border-radius: 0; padding: 9px 14px;
  font: inherit; cursor: pointer; }
.dir-row:hover { background: var(--bg); }
.dir-card2 { position: absolute; z-index: 3; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(460px, calc(100% - 24px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 40px 14px 16px; box-shadow: 0 8px 28px rgb(0 0 0 / 0.25); }
.dir-card2 .dir-x { position: absolute; top: 8px; right: 12px; font-size: 1.1rem; }
.dir-card2 .dir-card-name { font-size: 1.05rem; margin-right: 6px; }
.dir-facts { display: grid; gap: 4px; margin-top: 8px; }
.dir-facts > span { overflow-wrap: anywhere; }
.dir-card-actions { margin-top: 10px; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.dir-card-actions .button { padding: 8px 14px; text-decoration: none; }
.dir-info { position: absolute; z-index: 1; left: 10px; bottom: 8px; background: var(--surface); padding: 3px 8px; border-radius: 6px; opacity: 0.9; }
.dir-card2:not([hidden]) ~ .dir-info, .dir-panel:not([hidden]) ~ .dir-info { display: none; }
/* Phones and tablets: the map's credits line runs along the bottom; the shop card and the list sit above it, never over it (UI check 2026-10-06). */
@media (max-width: 899px) { .dir-card2 { bottom: 40px; } }
/* Phones: the shop card covers the bottom of the map, where the zoom buttons are: they step aside while it's open (pinch still zooms). */
@media (max-width: 640px) { .dir-stage:has(> :is(.dir-card2, .dir-panel):not([hidden])) .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: none; } }
@media (max-width: 640px) { .dir-info { bottom: 40px; } } /* above the map's attribution line, which spans the bottom on phones */
/* Map hover blurb (directory map) */
.map-tip .maplibregl-popup-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; font-size: 0.85rem; line-height: 1.4; box-shadow: 0 4px 16px rgb(0 0 0 / 0.2); pointer-events: none; }
.map-tip { pointer-events: none; }
.map-tip.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--surface); }
.map-tip.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--surface); }
.map-tip.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
.map-tip.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
.map-tip-on { color: #16a34a; font-weight: 600; }
.map-tip-hint { color: var(--muted); font-size: 0.78rem; }
.map-me { width: 16px; height: 16px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
  position: relative; }
.map-me::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: rgb(26 115 232 / 0.45);
  animation: map-me-pulse 2s ease-out infinite; z-index: -1; }
@keyframes map-me-pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(3.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-me::before { animation: none; transform: scale(2); opacity: 0.35; } }
.map-picked { width: 22px; height: 22px; border-radius: 50%; border: 4px solid #f59e0b; background: rgb(245 158 11 / 0.25); }
@media (max-width: 640px) {
  .dir-top { top: 8px; }
  .dir-bar2 select { max-width: 38%; font-size: 0.82rem; }
  .dir-panel { left: 8px; right: 8px; width: auto; top: auto; bottom: 40px; max-height: 55%; }   /* (above the map's credits line) */
  .dir-panel:not([hidden]) ~ .dir-card2 { bottom: calc(55% + 16px); }
}
.listing-facts { display: grid; gap: 6px; }
/* Directory card + listing page: the phone number and website lines are 44 px tap targets (UI check 2026-10-06). */
:is(.dir-facts, .listing-facts) > span:has(> a:is([href^="tel:"], [rel~="nofollow"])) { display: flex; align-items: center; gap: 4px; min-height: 44px; }
:is(.dir-facts, .listing-facts) > span > a:is([href^="tel:"], [rel~="nofollow"]) { display: inline-flex; align-items: center; min-height: 44px; }
:is(.dir-facts, .listing-facts):has(> span > a[href^="tel:"]) { row-gap: 0; }
.listing-waiting { margin: 0 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--ok-bg); color: var(--ok-text); }
.listing-waiting .muted { color: inherit; opacity: .85; }
.listing-map { height: 260px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }

/* Map zoom buttons: no white box around our blue buttons (MapLibre's control group background); one rounded block with a thin divider. */
.maplibregl-map .maplibregl-ctrl-group:not(:empty) { background: transparent; box-shadow: 0 2px 8px rgb(0 0 0 / 0.25); border-radius: 10px; overflow: hidden; }
.maplibregl-map .maplibregl-ctrl-group button { border-radius: 0; margin: 0; }
.maplibregl-map .maplibregl-ctrl-group button + button { border-top: 1px solid #0a3fa8; }
.maplibregl-map .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: brightness(0) invert(1); }   /* white icons on the blue */

/* Start screen (signed-in pages, web + installed app): the inline script in each page's brand head (scripts/brand.mjs) adds
   html.nf-boot before the first paint; js/app.js removes it once the page knows where you belong and has its first content
   (or the "Where to?" chooser opens); 1.5 s at most. Logo + small spinner on the page background (light/dark).
   It never covers the header or the shop tab bar (drawn before the first paint, js/steady-head.js): only the page under them is
   hidden, and the cover sits below them (header z 40, tab bar z 30). */
html.nf-boot { background: var(--bg); }
html.nf-boot body > :not(header.top):not(nav.app-tabs) { visibility: hidden; }
html.nf-boot::before {
  content: ''; position: fixed; inset: 0; z-index: 29;
  background: var(--bg) url(/icons/logo-128.png) center calc(50% - 26px) / 84px 84px no-repeat;
}
html.nf-boot::after {
  content: ''; position: fixed; left: 50%; top: calc(50% + 44px); z-index: 29;
  width: 22px; height: 22px; margin: -11px 0 0 -11px; box-sizing: border-box; border-radius: 50%;
  border: 2.5px solid rgba(128, 140, 160, .3); border-top-color: var(--accent);
  animation: nf-boot-spin .8s linear infinite;
}
@keyframes nf-boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.nf-boot::after { animation-duration: 2.4s; } }

/* Parts & specs editor: less-common parts folded */
details.spec-more { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
details.spec-more summary { cursor: pointer; font-weight: 600; }
details.spec-more[open] summary { margin-bottom: 10px; }

/* Nearby shops box (Pro portal call details) */
.near-shops { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.near-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.near-form input { grid-column: 1 / -1; min-width: 0; }
.near-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.near-list li { display: grid; gap: 1px; }
.near-list li .badge { justify-self: start; }

/* Something this phone has no saved copy of, shown instead of an empty or wrong state (offline) */
.offline-note { margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px dashed var(--border); color: var(--muted);
  font-size: 0.88rem; line-height: 1.4; }
.offline-note::before { content: '📶 '; }

/* Plans & features (js/features.js featureNote): a feature that isn't part of this plan says so instead of vanishing */
.lock-note { display: grid; gap: 4px; margin: 8px 0; padding: 12px 14px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--accent); line-height: 1.4; font-size: 0.95rem; }
.lock-note > strong:first-child { color: var(--accent-strong); }
.lock-note.compact { display: block; padding: 8px 12px; font-size: 0.88rem; color: var(--muted); }
.lock-note > .small > a { display: inline-flex; align-items: center; min-height: 44px; }   /* "Ask us about NautFix Pro" stands alone on its line: a 44 px tap (UI check 2026-10-06) */
.plan-card .plan-name { font-size: 1.15rem; font-weight: 700; }
.plan-card ul { margin: 6px 0 0; padding-left: 20px; }
.plan-card li { margin: 2px 0; }
.plan-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  background: var(--bg); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.plan-pill.paid { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.lookup-line { display: flex; gap: 12px; align-items: center; margin: 10px 0 0; }
.lookup-count { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.plan-card details > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.plans-dialog .plans-body { display: grid; gap: 10px; padding: 12px 20px 20px; }
.plans-dialog .plans-body > .tabs { margin: 0; }
.plans-dialog .plans-body h3 { margin: 6px 0 0; }
.plans-dialog .plan-row { display: grid; gap: 2px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.plans-dialog .plan-grant { display: grid; gap: 2px; }

/* ---------------- Tap targets: at least 44 px tall (user decision 2026-10-01; test: scripts/tests/browser/tap-targets.cjs) ----------------
   Compact buttons, link-style actions ("✎ Edit", "Remove", "＋ Add"), chips, switches and the header pills keep their look: an
   invisible hit area (::after, centred on the element, only as big as needed: 44 px tall, and 44 px wide for tiny "✕"s) takes the
   taps around them, so rows and lists don't get longer. Form fields get real height. Zero specificity (:where), so a page rule that
   positions one of these elements itself still wins. Elements that draw their own ::after (✓ in the switcher menu, red dots, the ▾
   on "More actions") are left out or use ::before. Things inside sideways-scrolling bars need the bar's padding to fit the 44 px. */
:where(button, a.button, a.link, [role=button], [role=tab], summary, label:has(input[type=checkbox], input[type=radio]), header.top a,
  .dash-head a, .staff-actions a, .job-head p > a, #shops > li.card > div > a:only-child, .hit) { position: relative; }
:where(button:not(.ctx-menu button.on, .mode-toggle button.alert, .maplibregl-ctrl button), a.button, a.link, [role=button]:not(button),
  [role=tab]:not(button), summary:not(.more-actions summary, .eng-more summary, .maplibregl-ctrl summary),
  header.top a, .dash-head a, .staff-actions a, .job-head p > a, #shops > li.card > div > a:only-child, .hit,
  label:has(input[type=checkbox], input[type=radio]):not(:has(a, button, select, textarea, input:not([type=checkbox], [type=radio]))))::after,
:where(.more-actions summary, .eng-more summary)::before {
  content: ''; position: absolute; pointer-events: auto;
  top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px));
  left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px));
}
select { min-height: 44px; }
label.check { min-height: 24px; }   /* its hit area then reaches 10 px out: the usual gap to the next control */
/* Spots where a neighbour sat closer than the hit area reaches: a little more room (a few px), so taps aren't shared. */
.tank-row { row-gap: 12px; }
.maint-parts { row-gap: 8px; }
.line-row { padding: 10px 0; }   /* job "Work & parts" lines: one "Remove" per 44 px row */
/* Menus: items stack with no gap, so each item is a real 44 px (a couple of px more than before). */
.menu button, .menu a, .more-actions[open] > span button { min-height: 44px; }
/* A tick box whose sentence holds links (agree to the Terms): the links keep their taps, so the row itself is 44 px. */
label:has(> input[type=checkbox], > span > input[type=checkbox]):has(a) { min-height: 44px; align-content: center; }
.side-foot > button.link, .side-foot > label.check { min-height: 40px; }
.lb-tanks .row { margin-bottom: 12px; }
.dir-info { bottom: 12px; }
@media (max-width: 640px) { .dir-info { bottom: 48px; } }
/* Sideways-scrolling chip / segment bars clip anything outside their box: give them room for the hit areas (same look). */
.hist-filter.tseg.small button { min-height: 36px; }
.maint-views, .maint-parts { padding-block: 5px; margin-block: 0 -5px; }   /* clear of the overlay's sticky title */
/* Job page tabs: a tab is never narrower than its label (no flex shrinking, no wrapping). Only a very long name (> 28 characters) is
   cut with an ellipsis (the full name is the tab's tooltip + the sheet's heading). When the row is wider than the screen it scrolls sideways:
   fade edges + ‹ › buttons (job page script) show there's more, and the open tab is scrolled into view. */
.job-tabs button { flex: none; white-space: nowrap; }
.job-tabs .tab-name { max-width: 36ch; white-space: nowrap; }
.job-tabs-wrap { position: relative; margin: 10px 0 12px; }
.job-tabs-wrap .job-tabs { margin: 0; scrollbar-width: none; }
.job-tabs-wrap::before, .job-tabs-wrap::after { content: ""; position: absolute; top: 0; bottom: 1px; width: 36px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1; }
.job-tabs-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.job-tabs-wrap::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.job-tabs-wrap.can-l::before, .job-tabs-wrap.can-r::after { opacity: 1; }
.tabs-more { display: none; position: absolute; top: 0; bottom: 1px; width: 32px; z-index: 2; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border);
  border-radius: 8px; background: var(--card, var(--bg)); color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; min-height: 44px; }
.tabs-more.l { left: 0; } .tabs-more.r { right: 0; }
@media (min-width: 701px) { .job-tabs-wrap.can-l .tabs-more.l, .job-tabs-wrap.can-r .tabs-more.r { display: flex; } }
/* Admin → Waiting for review (js/admin-review.js): shop changes, disputes, directory requests. */
.review-dialog .review-row { display: grid; gap: 6px; }
.review-dialog .tabs { overflow-x: auto; scrollbar-width: none; position: relative; }
.review-dialog .tab { flex: none; }
.review-dialog .tab-short { display: none; }
/* Phones: the six tabs sit in two rows of three (no sideways scrolling to find one); 421-560 px keeps one row, scrolled to the open tab (JS). */
@media (max-width: 420px) {
  .review-dialog .tabs { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; row-gap: 2px; }
  .review-dialog .tab { flex: none; min-width: 0; min-height: 44px; text-align: center; padding: 10px 2px; font-size: 0.95rem; }
}
/* The overlay is ~640 px wide on a computer: tighter tabs so all six full labels fit in one row. */
@media (min-width: 561px) { .review-dialog .tabs { gap: 0; } .review-dialog .tab { padding: 10px 8px; font-size: 0.94rem; } }
@media (max-width: 560px) { .review-dialog .tabs { gap: 0; } .review-dialog .tab { padding: 10px 6px; } .review-dialog .tab-long { display: none; } .review-dialog .tab-short { display: inline; } }
.review-similar { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: var(--bg); }
.review-similar .list { margin: 0; }
.review-similar li.row { align-items: center; gap: 8px; }
.review-dialog .review-row .specs { margin: 0; }
.review-dialog .review-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--border); background: var(--bg); border-radius: 6px; }
.review-dialog .review-actions { justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.review-dialog .review-actions button { width: auto; flex: 1 1 auto; }
#review-tool .count { font-weight: 600; }

/* First Mate bubble (js/first-mate-bubble.js): a round button at the bottom right of signed-in screens; it lifts above bottom
   panels / bars (--fm-lift, measured by the script) and the chart's attribution. Phones: a bottom sheet (~70% high); computers:
   a panel on the right under the header. Fields First Mate filled in glow until touched (.fm-filled). */
.fm-launch { position: fixed; z-index: 35; right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--fm-lift, 0px)); width: 56px; height: 56px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--chrome); color: var(--chrome-text); border: 2px solid color-mix(in srgb, #38b6ff 55%, var(--chrome));
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.28); transition: transform 0.12s ease; }
.fm-launch .fm-ico { width: 38px; height: 38px; display: block; }
.fm-head > .fm-ico { width: 30px; height: 30px; flex: none; }
.fm-launch:hover { transform: translateY(-2px); }
.fm-launch:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.fm-launch.fm-shop { border-color: #f5a524; }
.fm-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e5484d; color: #fff; font: 700 12px/20px system-ui, sans-serif; text-align: center; border: 2px solid var(--chrome); box-sizing: content-box; }
.fm-badge[hidden] { display: none; }
.fm-dot { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #f5a524; border: 2px solid var(--chrome); }
@media (prefers-reduced-motion: reduce) { .fm-launch { transition: none; } .fm-launch:hover { transform: none; } }
.fm-root[hidden], .fm-root.fm-squeeze { display: none; }
/* NautPlot: never over the MOB / map buttons (top right) and above the attribution + bottom panels (lifted by the script). */
.plot-page .fm-launch { bottom: calc(30px + env(safe-area-inset-bottom, 0px) + var(--fm-lift, 0px)); }
/* …and on phones, when a tall top pushes the map buttons down to it, it moves to the bottom left (plot/index.html ctrlUnder). */
.plot-page.pp-fm-left .fm-launch { right: auto; left: calc(16px + env(safe-area-inset-left, 0px)); }

dialog.fm-sheet { position: fixed; margin: 0; padding: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  display: none; flex-direction: column; overflow: hidden; z-index: 45; box-shadow: 0 -8px 30px rgb(0 0 0 / 0.25); }
dialog.fm-sheet[open] { display: flex; }
dialog.fm-sheet::backdrop { background: rgb(8 24 38 / 0.45); }
/* phones: bottom sheet */
dialog.fm-sheet { inset: auto 0 0 0; width: 100%; max-width: none; height: min(70dvh, 640px); max-height: calc(100dvh - 24px);
  border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
/* computers: a panel on the right, under the header */
@media (min-width: 900px) {
  dialog.fm-sheet { inset: calc(var(--hdr-h, 64px) + 12px) 16px 16px auto; width: 400px; height: auto; max-height: none; border-radius: 16px;
    box-shadow: 0 10px 34px rgb(0 0 0 / 0.28); }
}
dialog.fm-sheet.fm-shop { border-top: 3px solid #f5a524; }
.fm-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--border); }
.fm-head > img { border-radius: 8px; flex: none; }
.fm-head-text { flex: 1; min-width: 0; display: grid; }
.fm-head h2 { margin: 0; font-size: 1.02rem; }
.fm-sub { font-size: 0.8rem; line-height: 1.3; color: var(--muted); display: grid; min-width: 0; }
.fm-sub > span { min-width: 0; }
.fm-sub-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* a long shop name ends in … (full text on hover) */
.fm-sub-left { overflow-wrap: anywhere; }                                          /* the allowance wraps, never cut off */
/* Long pages: room under the last line for the First Mate button (js/first-mate-bubble.js padPage; not on full-height screens). */
html.fm-pad { padding-bottom: 84px; }
.fm-icon { width: 44px; height: 44px; padding: 0; flex: none; display: inline-grid; place-items: center; border-radius: 50%;
  background: transparent; color: var(--text); border: none; text-decoration: none; }
.fm-icon:hover { background: var(--bg); }
.fm-icon:focus-visible, .fm-send:focus-visible, .fm-chip:focus-visible, .fm-act:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.fm-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.fm-thread { display: flex; flex-direction: column; gap: 14px; padding: 14px; }
.fm-msg { max-width: 100%; }
.fm-msg.user { align-self: flex-end; max-width: 85%; }
.fm-msg.user .fm-body { background: var(--bg); border: 1px solid var(--border); border-radius: 16px 16px 4px 16px; padding: 8px 12px; overflow-wrap: anywhere; }
.fm-msg.assistant .fm-body { line-height: 1.55; overflow-wrap: anywhere; }
.fm-msg.assistant .fm-body p { margin: 0 0 10px; }
.fm-msg.assistant .fm-body p:last-child { margin-bottom: 0; }
.fm-msg.assistant .fm-body ul, .fm-msg.assistant .fm-body ol { margin: 0 0 10px; padding-left: 1.2rem; display: grid; gap: 4px; }
.fm-msg.assistant .fm-body h4 { margin: 10px 0 4px; }
.fm-err { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-text); }
.fm-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fm-act { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--accent);
  color: var(--accent-text); font-weight: 600; text-decoration: none; }
.fm-filled-note { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--ok-bg); color: var(--ok-text); font-size: 0.9rem; }
.fm-welcome p { margin: 0 0 12px; }
.fm-suggest { display: grid; gap: 8px; }
.fm-chip { min-height: 44px; text-align: left; padding: 8px 14px; border-radius: 14px; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  font-weight: 500; }
.fm-offline { margin: 0 12px 6px; }
.fm-composer { padding: 8px 10px 10px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.fm-row { display: flex; align-items: flex-end; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 22px; padding: 2px 4px; }
.fm-row:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.fm-row textarea { flex: 1; min-width: 0; border: none; background: transparent; padding: 11px 4px; min-height: 44px; max-height: 140px; resize: none;
  font-size: 16px; line-height: 1.4; box-shadow: none; }
.fm-row textarea:focus { outline: none; }
.fm-send { width: 44px; height: 44px; padding: 0; flex: none; border-radius: 50%; display: inline-grid; place-items: center; }
.fm-send.fm-stop { background: var(--text); color: var(--surface); }
.fm-note { margin: 0; text-align: center; font-size: 0.72rem; color: var(--muted); }
.fm-filled { outline: 3px solid #f5a524 !important; outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in srgb, #f5a524 25%, transparent) !important;
  transition: outline-color 0.3s; }
.fm-thread:focus { outline: none; }
/* Combined chat (js/chat-hub.js): tabs by side and role under the header, one pane each (First Mate keeps its own). */
.fm-tabs { display: flex; gap: 4px; padding: 6px 8px 0; border-bottom: 1px solid var(--border); flex: none; overflow-x: auto; scrollbar-width: none; }
.fm-tabs[hidden] { display: none; }
.fm-tab { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: var(--muted); border: none; border-bottom: 3px solid transparent; border-radius: 10px 10px 0 0; font-weight: 600; white-space: nowrap; }
.fm-tab:hover { background: var(--bg); color: var(--text); }
.fm-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.fm-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.fm-tab-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e5484d; color: #fff; font: 700 12px/20px system-ui, sans-serif; text-align: center; }
.fm-tab-n[hidden] { display: none; }
.fm-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fm-pane[hidden], .fm-icon[hidden] { display: none; }
.ch-pane .ch-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ch-pad { padding: 12px 14px; margin: 0; }
.ch-tools { padding: 8px 10px; flex: none; }
.ch-search, .fm-hsearch { width: 100%; min-height: 44px; margin: 0; }
.ch-note { margin: 0 10px 6px; flex: none; }
.ch-list { list-style: none; margin: 0; padding: 0 4px 8px; }
.ch-row { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; background: transparent; color: var(--text);
  border: none; border-radius: 12px; }
.ch-row:hover { background: var(--bg); }
.ch-row:focus-visible, .ch-back:focus-visible, .ch-more:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }
.ch-ic { flex: none; width: 32px; height: 32px; display: inline-grid; place-items: center; font-size: 1.15rem; }
.ch-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ch-top { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.ch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-time { flex: none; font-size: 0.75rem; color: var(--muted); }
.ch-last { font-size: 0.85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-last.unread { color: var(--text); font-weight: 600; }
.ch-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #e5484d; }
.ch-n { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #e5484d; color: #fff; font: 700 12px/22px system-ui, sans-serif; text-align: center; }
.ch-more { display: block; margin: 4px auto 12px; min-height: 44px; }
.ch-bar { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--border); flex: none; min-width: 0; }
.ch-back { min-height: 44px; padding: 0 10px; background: transparent; color: var(--accent); border: none; font-weight: 600; flex: none; }
.ch-full { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; font-size: 0.85rem; color: var(--muted); }
.ch-tl, .ch-sc { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.ch-tl .tl-msg { max-width: 88%; }
.ch-closed { margin: 0; padding: 8px 14px; text-align: center; border-top: 1px solid var(--border); flex: none; }
.ch-composer { padding: 8px 10px 10px; border-top: 1px solid var(--border); display: grid; gap: 6px; flex: none; }
.ch-composer .offline-note { margin: 0; }
.ch-staff { margin: 6px 2px 0; }
.fm-composer[hidden], .fm-scroll[hidden], .fm-history[hidden], .fm-offline[hidden] { display: none; }
.fm-bar { justify-content: space-between; }
.fm-history { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fm-history .ch-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ch-new { min-height: 44px; width: 100%; margin: 0 0 8px; }
.ch-join { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: #18843b; color: #fff; font-weight: 700; text-decoration: none; }
.ch-banner { padding: 8px 14px; border-bottom: 1px solid var(--border); flex: none; display: grid; gap: 4px; font-size: 0.9rem; }
.ch-banner details summary { min-height: 32px; cursor: pointer; }
.ch-step { margin-left: auto; padding-right: 8px; }
.ch-form { display: grid; gap: 12px; }
.ch-form label { display: grid; gap: 4px; }
.ch-form fieldset { border: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ch-tog { display: flex !important; align-items: center; gap: 8px; min-height: 44px; }
.ch-tog input { width: auto; min-height: 0; margin: 0; flex: none; }
.fm-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-togs { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ch-when { display: grid; gap: 4px; }
.ch-when[hidden] { display: none; }
.ch-photos { display: grid; gap: 4px; }
.ch-photos button { min-height: 44px; }
.ch-steps { display: flex; justify-content: space-between; gap: 8px; }
.ch-steps button { min-height: 44px; min-width: 96px; }
.ch-closed .link { min-height: 44px; }
.ch-req { flex: 1; min-height: 0; overflow-y: auto; }

/* No accidental UI zoom on phones (user rule 2026-10-02: only maps zoom). Double-tap no longer zooms the page (pinch and pan
   still work; MapLibre handles its own gestures), and text boxes are 16 px on phones so iPhones don't zoom in when one is tapped.
   The viewport tag on every page also says maximum-scale=1. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { font-size: max(16px, 1em); }
}

/* AI receipt check (js/receipt-check.js): a receipt waits here before it unlocks a shop job. */
.rc-box { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); flex-basis: 100%; }
.rc-checking { flex-direction: row; align-items: flex-start; gap: 10px; }
.rc-failed { background: var(--warn-bg); color: var(--warn-text); border-color: color-mix(in srgb, var(--warn-text) 25%, transparent); }
.rc-failed .muted { color: inherit; opacity: 0.85; }
.rc-review-box { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.rc-reasons { margin: 2px 0; padding-left: 18px; }
.rc-actions { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.rc-actions .link { min-height: 44px; }
.rc-spin { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent);
  animation: vc-spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .rc-spin { animation: none; } }
.rc-prices { width: 100%; max-width: 420px; border-collapse: collapse; margin-top: 6px; font-size: 0.92em; }
.rc-prices td { padding: 3px 0; border-bottom: 1px solid var(--border); }
.rc-prices td.num { text-align: right; white-space: nowrap; padding-left: 12px; }
.locked-list li.row { flex-wrap: wrap; }

/* Tech change review (js/tech-changes.js): added = green, removed = struck through, edits = old → new; waiting for a service writer. */
.tc-added { background: linear-gradient(90deg, var(--ok-bg), transparent 75%); border-left: 3px solid var(--ok-text); padding-left: 8px; }
.tc-removed .ci-label, .tc-removed .line-desc { text-decoration: line-through; text-decoration-thickness: 2px; }   /* no fading: the struck-through words stay readable (3.4:1 faded; UI check 2026-10-06) */
.tc-removed { border-left: 3px solid var(--err-text); padding-left: 8px; }
.tc-who { margin: 2px 0 6px; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.tc-who-add { color: var(--ok-text); }
.tc-who-rm { color: var(--err-text); }
.line-row .tc-who { display: block; margin: 2px 0 0; }
.tc-box { margin: 4px 0 8px; padding: 6px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); }
.tc-box .tc-who { color: inherit; margin: 0 0 2px; }
.tc-diff { margin: 2px 0 0; padding-left: 18px; font-size: 0.9rem; }
.tc-diff .tc-f { font-weight: 600; margin-right: 4px; }
.tc-diff .tc-old { text-decoration: line-through; opacity: 0.8; }
.tc-diff .tc-new { font-weight: 600; }
.tc-banner { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); font-size: 0.92rem; }
.tc-block { margin: 8px 0; color: var(--err-text); font-weight: 600; }
.tc-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.tc-item { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px 8px 12px; background: var(--surface); }
.tc-item.tc-add { border-left: 4px solid var(--ok-text); }
.tc-item.tc-remove { border-left: 4px solid var(--err-text); }
.tc-item.tc-remove .tc-name { text-decoration: line-through; }
.tc-item.tc-edit { border-left: 4px solid var(--warn-text); }
.tc-item.tc-denied { opacity: 0.85; }
.tc-head { display: flex; gap: 8px; align-items: flex-start; }
.tc-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: var(--bg); color: var(--muted); }
.tc-add .tc-icon { background: var(--ok-bg); color: var(--ok-text); }
.tc-remove .tc-icon { background: var(--err-bg); color: var(--err-text); }
.tc-edit .tc-icon { background: var(--warn-bg); color: var(--warn-text); }
.tc-title { display: grid; min-width: 0; }
.tc-what { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.tc-name { overflow-wrap: anywhere; }
.tc-item .tc-who { margin: 4px 0 0; }
.tc-denied .tc-who { color: var(--err-text); }
.tc-note { margin: 4px 0 0; font-style: italic; }
.tc-btns { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 8px; }
.tc-btns .small-btn, .tc-btns .link, .tc-btns a, .tc-all button, .tc-who .link { min-height: 44px; }
.tc-btns .small-btn { min-width: 88px; }
.tc-all { margin-top: 10px; }
.tc-mine summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-height: 44px; align-content: center; }
.tc-note-dlg textarea { width: 100%; }
.tc-boat-chg { margin-top: 6px; }

/* Crew + co-owners (js/crew.js): the boat page's People card, crew banner, invite cards */
.people-list .people-row { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.people-ico { width: 28px; text-align: center; flex: none; }
.people-main { display: grid; gap: 1px; flex: 1; min-width: 0; }
.people-main strong { overflow-wrap: anywhere; }
.people-row .link.small, .crew-banner .link.small { min-height: 44px; padding: 0 6px; }
.people-actions { margin-bottom: 8px; }
.people-action { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.people-action > span:first-child { display: grid; gap: 2px; flex: 1 1 260px; }
.people-btns { gap: 8px; flex-wrap: wrap; }
.people-btns button { min-height: 44px; }
.crew-perms { border: 0; padding: 0; margin: 0; display: grid; gap: 2px; }
.crew-perms legend { padding: 0; margin-bottom: 4px; color: var(--muted); }
.crew-perms label.check { min-height: 44px; }
.people-add, .crew-banner { display: grid; gap: 10px; }
.crew-banner { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between; }
.crew-banner > span { display: grid; gap: 2px; }
.card.boat-invite, a.card.boat-invite { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; color: inherit; text-decoration: none; }
.boat-invite > span:first-child { flex: 1 1 260px; }
.boat-invite button, .boat-invite .button { min-height: 44px; }
.as-crew #add-comp-btn, .as-crew #add-equip-btn, .as-crew .eng-card.add { display: none; }
.boat-card .badge.crew, .dash-boat .badge.crew { justify-self: start; }
.people-add .radio-card input[type=radio] { width: auto; flex: none; margin-top: 3px; }
/* "This is my boat" ownership claims (js/ownership-claim.js; admin tab in js/admin-review.js). */
.claim-dialog .claim-form > p { margin: 0; }
.claim-types { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.claim-types legend { padding: 0 0 6px; }
.claim-types .toggles label { min-height: 44px; flex: 1 1 140px; }
.claim-files { display: grid; gap: 6px; }
.claim-file-list { margin: 0; }
.claim-file-list:empty { display: none; }
.claim-file { display: flex; align-items: center; gap: 8px; padding: 2px 0 2px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.claim-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.claim-file .icon-close { width: 44px; height: 44px; }
label.button.claim-add { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; justify-self: start; }
label.button.claim-add:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.claim-proof-btn { margin-top: 8px; min-height: 44px; }
.claim-card { display: grid; gap: 6px; }
.claim-card .banner { margin: 0; padding: 8px 12px; }
.claim-card .claim-actions { justify-content: flex-end; gap: 8px; }
.claim-card .claim-actions button { min-height: 44px; }
.proof-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.proof-grid img { width: 120px; height: 120px; border-radius: 10px; object-fit: cover; display: block; border: 1px solid var(--border); }
.proof-pdf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.claim-row .claim-log summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.claim-row .claim-log ul { margin: 0; padding-left: 18px; }

/* Tech board + dispatch (migration 20261003900000): status chips, field-job card, /shop/board/, dispatch map */
.check-row { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check-row input { width: 22px; height: 22px; flex: none; }
.ts-bar { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.ts-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ts-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-chips { scrollbar-width: thin; }
/* Phones: all 7 status chips wrap onto 2 lines (never a sideways scroll with chips cut off; UX review 2026-10-04). */
@media (max-width: 560px) { .ts-chips { gap: 6px; } .ts-chips .ts-chip { padding: 6px 10px; font-size: 0.88rem; } }
.ts-chip { min-height: 44px; min-width: 44px; padding: 6px 12px; border-radius: 22px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ts-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-strong); font-weight: 600; }
.ts-chip:disabled { opacity: .6; }
/* the derived status (migration 20261007200000): read-only, not a button */
.ts-now { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.ts-now .ts-label { flex-basis: 100%; }
.ts-chip.ts-ro { cursor: default; min-height: 36px; border-color: transparent; }   /* read-only: no outline, so it doesn't look like a button (UI check 2026-10-06) */
.ts-now .ts-start { min-height: 44px; display: inline-flex; align-items: center; }
.ts-now .ts-how { flex-basis: 100%; margin: 0; }
.dispatch-card { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.dispatch-card:empty { display: none; }
.fj-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.fj-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.fj-btns .button, .fj-btns button, .fj-share button { min-height: 44px; }
.fj-share { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; flex-wrap: wrap; }
.fj-share.off { background: var(--warn-bg); color: var(--warn-text); }
.fj-wait { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fj-travel { margin: 0; }

/* The board */
main.wide-main.board-main { max-width: 1400px; }
.bd-views { display: inline-flex; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; background: var(--surface); }
.bd-views button { min-height: 44px; min-width: 80px; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; padding: 0 16px; border-radius: 0; }
.bd-views button.on { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.bd-techs { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; margin-bottom: 4px; scroll-snap-type: x proximity; }
.bd-tech { flex: 0 0 auto; width: 232px; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.bd-tech.st-available { border-left-color: #2f9e57; }
.bd-tech.st-on_job, .bd-tech.st-on_site { border-left-color: var(--accent); }
.bd-tech.st-driving { border-left-color: #f5a524; }
.bd-tech.st-waiting_parts { border-left-color: #d9480f; }
.bd-tech.st-break, .bd-tech.st-off { border-left-color: var(--muted); opacity: .9; }
.bd-tech.drop-over { outline: 3px dashed var(--accent); outline-offset: 2px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.bd-tech .row { align-items: center; }
.bd-cur { display: block; min-height: 44px; padding: 12px 0; line-height: 20px; box-sizing: border-box; text-decoration: none; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* block, so the "…" shows (a flex box cut the words mid-letter; UI check 2026-10-06) */
.bd-curmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-prog { display: inline-block; width: 70px; height: 7px; border-radius: 4px; background: var(--border); overflow: hidden; }
.bd-prog > span { display: block; height: 100%; background: #2f9e57; }
.bd-coltabs { display: flex; }
.bd-cols { display: block; }
.bd-col { display: none; }
.bd-col.cur { display: block; }
.bd-col h2 { font-size: 1rem; margin: 0 0 8px; }
.bd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: calc(100svh - 360px); min-height: 120px; overflow-y: auto; }
.bd-job { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; cursor: grab; }
.bd-job.unassigned { border-left: 5px solid #d9480f; }
.bd-job.dragging { opacity: .5; }
.bd-title { color: var(--text); text-decoration: none; display: flex; align-items: center; min-height: 44px; }
.bd-tech a.badge { display: inline-flex; align-items: center; min-height: 44px; }
.dm-side .small-btn { min-height: 44px; }
.dm-job a { display: inline-flex; align-items: center; min-height: 44px; }
.bd-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.bd-who.none { color: var(--err-text); font-weight: 600; }   /* theme colour: #b4380a was 2.6:1 on the dark card (UI check 2026-10-06) */
.bd-over { color: var(--err-text); font-weight: 600; }
.bd-note { background: var(--warn-bg); color: var(--warn-text); border-radius: 6px; padding: 2px 8px; }
.bd-assign { min-height: 44px; align-self: flex-start; }
.bd-empty { padding: 8px 2px; }
.bd-hint { margin: 8px 0 0; }
@media (min-width: 900px) {
  .bd-coltabs { display: none; }
  .bd-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .bd-col { display: block; background: color-mix(in srgb, var(--surface) 55%, var(--bg)); border-radius: var(--radius); padding: 10px; }
  .bd-list { max-height: calc(100svh - 390px); }
  .bd-tech { width: 250px; }
}
#assign-list .as-tech { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; min-height: 56px; cursor: pointer; font: inherit; color: var(--text); }
#assign-list .as-tech.on { border-color: var(--accent); }
#assign-list .as-none { min-height: 44px; width: 100%; }

/* The dispatch map */
.dm-wrap { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dm-map { height: 46svh; min-height: 260px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; background: #cfe3f5; }
.dm-side { max-height: 32svh; overflow-y: auto; }
.dm-list { display: flex; flex-direction: column; gap: 8px; }
.dm-job { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; }
.dm-job.unassigned { border-left: 5px solid #d9480f; }
.dm-job button { min-height: 44px; }
@media (min-width: 900px) {
  .dm-wrap { grid-template-columns: 1fr 360px; }
  .dm-map { height: calc(100svh - 230px); }
  .dm-side { max-height: calc(100svh - 230px); }
}
.dm-pin { border: 0; padding: 0; font: inherit; cursor: pointer; }
.dm-job-pin, button.dm-job { min-width: 44px; min-height: 44px; border-radius: 22px; padding: 0 10px; background: #2f9e57; color: #fff; font-weight: 700; font-size: 0.85rem;
  border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.35); }
button.dm-job.dm-unassigned { background: #d9480f; animation: dm-pulse 1.6s ease-out infinite; }
@keyframes dm-pulse { 0% { box-shadow: 0 0 0 0 rgba(217,72,15,.55); } 100% { box-shadow: 0 0 0 16px rgba(217,72,15,0); } }
@media (prefers-reduced-motion: reduce) { button.dm-job.dm-unassigned { animation: none; } }
button.dm-last { width: 44px; height: 44px; background: transparent; position: relative; }
button.dm-last::after { content: ''; position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: #7b8794; border: 2px solid #fff; }
.dm-tech { display: flex; align-items: center; gap: 4px; min-height: 44px; }
.dm-tech .dm-dot { width: 18px; height: 18px; border-radius: 50%; background: #0a63e0; border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(10,99,224,.3); flex: none; }
.dm-tech .dm-name { background: #fff; color: #0e1a2b; border-radius: 10px; padding: 1px 7px; font-size: 0.75rem; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.dm-pop { color: #0e1a2b; display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.dm-pop .muted { color: #4f6078; }
.dm-pop .dm-assign { min-height: 44px; margin-top: 4px; }

/* Form drafts (js/drafts.js): "You have an unsaved draft from … · Restore / Discard" */
.draft-bar { margin: 0 0 12px; padding: 6px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-text);
  font-size: 0.92rem; line-height: 1.35; }
.draft-bar button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; vertical-align: middle; margin: 0 2px; }
.draft-bar .link { color: inherit; text-decoration: underline; }

/* "NautFix was updated · Reload" (js/build-check.js): small, never in the way */
.nf-build-bar { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); top: calc(var(--hdr-h, 56px) + 8px); max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 8px; width: max-content; white-space: nowrap; padding: 6px 8px 6px 14px; border-radius: 999px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); font-size: .92rem; }
.nf-build-bar button { min-height: 32px; padding: 2px 12px; border-radius: 999px; }
.nf-build-bar .nf-build-x { background: transparent; color: var(--muted); border: 0; padding: 2px 8px; }

/* Notifications: per-shop choices */
.notif-shop { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--border); }
.notif-shop:first-child { border-top: 0; }
.notif-shop .check-row { min-height: 44px; display: flex; align-items: center; gap: 10px; }

/* Owner Home: notes from shops (js/shop-notes.js) */
.shop-note { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--card, var(--bg)); }
.shop-note.new { border-color: var(--accent); }
.shop-note-head { display: grid; gap: 2px; }
.shop-note-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.shop-note-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shop-note-actions .small-btn, .shop-note-actions .link { min-height: 44px; display: inline-flex; align-items: center; }

/* Light CRM (js/shop-crm.js), campaigns (js/shop-campaigns.js), follow-up settings (js/shop-outreach.js) */
li.card.cust { display: grid; gap: 8px; padding: 0; }
.cust-main { display: block; padding: 12px 14px 0; color: inherit; text-decoration: none; }
.cust-main:hover strong { color: var(--accent); }
.cust-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 0 14px 12px; }
.cust-foot .small-btn, .crm-panel .small-btn, .camp-dialog .small-btn { min-height: 44px; display: inline-flex; align-items: center; }
.crm-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.crm-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.82rem; background: var(--surface, var(--bg)); border: 1px solid var(--border); }
.crm-tag-x { border: 0; background: none; color: var(--muted); cursor: pointer; min-width: 44px; min-height: 44px; margin: -12px -14px -12px -8px; font: inherit; }
.crm-tag-form { display: flex; gap: 8px; margin-top: 8px; }
.crm-tag-form input { flex: 1; margin: 0; }
/* forms inside the customer panel sheet: no sheet-form padding / grid (the tag box was indented and Add stacked under it; UI check 2026-10-06) */
dialog.sheet.wide .crm-body form { padding: 0; }
dialog.sheet.wide form.crm-tag-form { display: flex; }
.tag-filter { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.tag-filter select { width: auto; min-height: 44px; }
.crm-panel .tseg.crm-tabs { margin-bottom: 10px; }
.crm-panel .tseg button { min-height: 44px; }
.crm-body { display: grid; gap: 10px; }
.crm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crm-small { font-size: 1rem; }
.crm-h { margin: 6px 0 0; font-size: 0.95rem; }
.crm-list { display: grid; gap: 8px; max-height: 42dvh; overflow-y: auto; }
.crm-note-form textarea, .outreach-form textarea, .camp-body textarea { width: 100%; }
.crm-task-form { display: grid; gap: 8px; }
.crm-task-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.crm-task-row label { flex: 1 1 130px; }
.crm-task.done strong { text-decoration: line-through; color: var(--muted); }
.crm-links { margin-top: 4px; }
.crm-del { min-height: 44px; }
.outreach-form { display: grid; gap: 14px; }
.out-sec { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px 14px; display: grid; gap: 8px; margin: 0; min-width: 0; }
.out-sec legend { font-weight: 700; padding: 0 6px; }
.out-days { display: flex; flex-wrap: wrap; gap: 10px; }
.out-num { display: inline-flex; align-items: center; gap: 6px; }
.out-num input { width: 5.5rem; margin: 0; min-height: 44px; }
.camp-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.camp-kind { min-height: 48px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; padding: 6px 10px; }
.camp-kind.on { background: linear-gradient(135deg, var(--brand-from, #0a7cf0), var(--brand-to, #0a47d0)); border-color: transparent; color: #fff; }
.camp-preview { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--surface, var(--bg)); border: 1px solid var(--border); }
.camp-preview.none { border-color: var(--warn, #b45309); }
.camp-body { display: grid; gap: 10px; }
.camp-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0; }
.camp-sample { pointer-events: none; }

.crm-panel .tseg.crm-tabs { display: flex; flex-wrap: nowrap; width: 100%; }
.crm-panel .tseg.crm-tabs button { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 6px 4px; font-size: 0.82rem; white-space: nowrap; }   /* min-width 0: Follow-ups ran past the strip (UI check 2026-10-06) */
.crm-tiles .tile { padding: 8px 10px; }
.crm-tiles .tile-num { font-size: 1.15rem; }
.crm-recs { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.crm-recs li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); padding: 4px 0; }
/* Time clock, job workspace and hours (migration 20261004830000): js/time-clock.js, js/job-clock.js, /shop/hours/ */
.tc-card { margin: 0 0 12px; }
.tc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tc-dot { width: 12px; height: 12px; border-radius: 50%; background: #8a94a6; flex: none; }
.tc-dot.tc-in { background: #2fa66a; }
.tc-dot.tc-break { background: #e0a21b; }
.tc-job { margin: 8px 0 0; }
.tc-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.tc-btn, .tc-btns .button { min-height: 52px; flex: 1 1 140px; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.tc-hours { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; }
.job-start { margin-top: 8px; min-height: 48px; width: 100%; display: flex; align-items: center; justify-content: center; }
.start-big { min-height: 52px; font-size: 1.05rem; }
.tc-btn.danger { background: transparent; color: var(--err-text); border: 2px solid var(--err-text); }
.tc-btn.danger:disabled { opacity: .5; }
.ws-slot { position: sticky; top: var(--hdr-h, 0px); z-index: 30; padding-top: 6px; background: linear-gradient(var(--bg) 70%, transparent); }
html[data-nf-workspace] { scroll-padding-top: calc(var(--hdr-h, 0px) + 72px); }
.ws-slot:empty { display: none; }
.ws-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0 0 10px; border-radius: 12px; border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.ws-dot { width: 10px; height: 10px; border-radius: 50%; background: #2fa66a; flex: none; animation: ws-pulse 1.6s ease-in-out infinite; }
@keyframes ws-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ws-dot { animation: none; } }
.ws-text { flex: 1; min-width: 0; }
.ws-timer { font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 600; margin-left: 4px; }
.ws-leave { min-height: 44px; min-width: 44px; padding: 6px 18px; }
/* The closed workspace: no tabs bar, no Home / Back, no switcher; the logo isn't a link. */
html[data-nf-workspace] nav.app-tabs, html[data-nf-workspace] header.top .nav-center, html[data-nf-workspace] header.top .ctx { display: none !important; }
html[data-nf-workspace] header.top .brand { pointer-events: none; }
.leave-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .leave-grid { grid-template-columns: 1fr 1fr; } }
.leave-btn { min-height: 64px; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; font: inherit; cursor: pointer; }
.leave-btn:hover, .leave-btn:focus-visible { border-color: var(--accent); }
.bd-clock, .bd-injob { margin-top: 2px; }
.bd-injob { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.bd-injob button { min-height: 44px; }
.bd-injob.warn { color: var(--warn-text); }
/* Hours */
main.wide-main.hours-main { max-width: 1000px; }
.hr-period { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.hr-label { display: flex; flex-direction: column; flex: 1 1 160px; text-align: center; }
.hr-nav { min-width: 44px; min-height: 44px; }
.hr-tabs { margin-bottom: 10px; }
.hr-who { display: block; max-width: 280px; margin-bottom: 8px; }
.hr-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.hr-row { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); align-items: center; font-size: .95rem; }
.hr-row:first-child { border-top: 0; }
.hr-head { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.hr-total { font-weight: 600; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
@media (max-width: 560px) { .hr-row { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); padding: 10px 8px; font-size: .85rem; gap: 4px; } }
.hr-shift { padding: 10px 0; }
.fix-ctl { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.fix-ctl button { min-height: 44px; min-width: 44px; }
.fix-ctl input[type="datetime-local"] { width: auto; min-width: 190px; margin: 0; }
.fix-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.fix-add select, .fix-add input { width: auto; margin: 0; }

/* Task list (the job's front page), finishing a checklist and the boat & engine info form (migration 20261004840000) */
.tk-card { margin: 0 0 12px; }
.tk-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tk-row { display: flex; align-items: stretch; gap: 6px; }
.tk { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; text-align: left; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; font: inherit; cursor: pointer; }
.tk:hover, .tk:focus-visible { border-color: var(--accent); }
.tk:disabled { opacity: .85; cursor: default; }
.tk-mark { flex: none; width: 30px; text-align: center; font-size: 1.5rem; line-height: 1; color: var(--muted); }
.tk-mark.done { color: #2fa66a; font-weight: 700; }
.tk-mark.part { color: var(--accent); }
.tk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-text .prog-bar { margin-top: 4px; }
.tk-go { flex: none; font-size: 1.4rem; color: var(--muted); }
.tk-x { flex: none; min-width: 44px; min-height: 44px; align-self: center; background: transparent; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); cursor: pointer; }
.tk-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tk-add input { flex: 1 1 200px; margin: 0; }
.tk-back { min-height: 44px; margin: 0 0 4px -4px; }
.tk-finish { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tk-finish button { min-height: 52px; font-size: 1.05rem; }
.tk-fin { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.bi-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bi-grid { grid-template-columns: 1fr 1fr; } }
.bi-f { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; margin: 0; }
.bi-f input, .bi-f select, .bi-f textarea { margin: 0; }
.bi-f.miss input, .bi-f.miss select { border-color: var(--warn-text); }
.bi-f .req { color: var(--err-text); }
.bi-comp { margin: 0 0 12px; padding: 12px 14px; }
.bi-comp legend { font-weight: 600; padding: 0 6px; }
.bi-more { margin-top: 10px; }
.bi-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.bi-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.bi-btns button { min-height: 52px; flex: 1 1 140px; font-size: 1.05rem; }
.bi-diffs .row { align-items: center; gap: 10px; }

/* The tech's WIP card screen (migration 20261004850000) */
.wip-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 8px 0 12px; }
@media (min-width: 760px) { .wip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .wip-grid { grid-template-columns: repeat(3, 1fr); } }
.wip-card { display: flex; flex-direction: column; gap: 6px; text-align: left; min-height: 120px; padding: 14px 16px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px; font: inherit; cursor: pointer; }
.wip-card:hover, .wip-card:focus-visible { border-color: var(--accent); }
.wip-card.mine { border-left: 4px solid var(--accent); }
.wc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wc-boat { font-size: 1.1rem; }
.wc-req { display: block; font-size: .92rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; justify-content: space-between; }
.wc-avs { display: inline-flex; gap: 4px; }
.av { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent-strong, var(--accent)); font-size: .72rem; font-weight: 700; border: 1px solid var(--border); }
.av.me { background: var(--accent); color: var(--accent-text); }
.wc-in { color: var(--ok-text, #2fa66a); font-weight: 600; }
.wc-prog { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.wip-empty { grid-column: 1 / -1; }
.card-actions { display: flex; flex-direction: column; gap: 10px; }
.card-actions .button, .card-actions button { min-height: 52px; justify-content: center; text-align: center; }

.assign-box { display: flex; flex-direction: column; gap: 6px; }
.as-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.as-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 12px; min-height: 44px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.as-chip button { min-width: 44px; min-height: 44px; background: transparent; border: 0; color: var(--muted); cursor: pointer; border-radius: 50%; }
.prev-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.prev-banner .button, .prev-banner button { min-height: 44px; }

.ci-thumb.ci-internal { position: relative; outline: 2px solid var(--warn-text); outline-offset: -2px; }
.ci-lock { position: absolute; right: 2px; bottom: 2px; font-size: .8rem; background: rgba(0, 0, 0, .65); color: #fff; border-radius: 6px; padding: 0 3px; line-height: 1.3; }

.parts-card .part-row { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.part-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.part-end button { min-height: 44px; }
.part-form { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.part-form input[name="part"], .part-form input[name="note"], .part-form button { grid-column: 1 / -1; }
.part-form button { min-height: 48px; }
@media (min-width: 700px) { .part-form { grid-template-columns: 2fr 1fr 80px; } .part-form input[name="note"] { grid-column: 1 / 3; } .part-form button { grid-column: 3; } }

/* Staff chat, dictation */
dialog.staff-chat { max-width: 640px; width: calc(100vw - 24px); }
.sc-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; min-height: 160px; overflow-y: auto; padding: 4px 2px; }
.sc-msg { display: flex; flex-direction: column; gap: 2px; max-width: 85%; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); align-self: flex-start; }
.sc-msg.me { align-self: flex-end; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.sc-who { font-size: .8rem; font-weight: 600; }
.sc-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.sc-form textarea { flex: 1; margin: 0; }
.sc-form button { min-height: 48px; }
.tm-list { display: flex; flex-direction: column; gap: 8px; }
.tm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; min-height: 64px; color: var(--text); font-weight: 400; }   /* a button: its white text was invisible on the light card (UI check 2026-10-06) */
.tm-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.dict-btn { min-width: 44px; min-height: 44px; margin: 2px 0 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 22px; cursor: pointer; font-size: 1.1rem; }
.dict-btn.on { background: var(--err-text); color: #fff; border-color: var(--err-text); }

.vc-add { position: absolute; z-index: 6; top: 56px; right: 12px; left: 12px; max-width: 360px; margin-left: auto; padding: 14px; border-radius: 14px; background: rgba(10, 20, 40, .95); color: #fff; display: flex; flex-direction: column; gap: 10px; }
.vc-add[hidden] { display: none; }
.vc-add #add-list { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-add .vc-chip { min-height: 44px; }
#add-tech { min-height: 44px; margin-left: auto; }

/* Sea trial */
.st-card .st-row { padding: 6px 0; }
.st-bar { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 36; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px;
  border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); max-width: 560px; margin: 0 auto; }
.st-bar .st-text { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.st-bar button { min-height: 44px; min-width: 64px; }

/* ---- Live job collaboration (shop/job, js/job-live.js): who's here, who did what, someone typing ---- */
.ci-part { display: contents; }
.ci-by { margin: -2px 0 0; display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.by-av, .lp-av { --hue: 210; display: inline-grid; place-items: center; flex: none; border-radius: 50%; font-weight: 700; color: #fff;
  background: hsl(var(--hue) 55% 40%); }
.by-av { width: 20px; height: 20px; font-size: .58rem; }
.ci-thumb-by { position: absolute; left: 2px; top: 2px; max-width: calc(100% - 4px); padding: 1px 4px; border-radius: 6px; background: rgba(0, 0, 0, .66);
  color: #fff; font-size: .6rem; font-weight: 600; line-height: 1.25; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.ci-thumb-at { display: block; font-weight: 400; opacity: .9; }
.line-by { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
#by-hours .ci-by, #by-tech_notes .ci-by, #by-requested_work .ci-by { margin-top: 6px; }
.live-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 4px; }
.lp-title { font-size: .78rem; color: var(--muted); font-weight: 600; margin-right: 2px; }
.lp { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; max-width: 100%;
  border: 1px solid color-mix(in srgb, hsl(var(--hue) 55% 45%) 45%, var(--border)); background: color-mix(in srgb, hsl(var(--hue) 55% 45%) 10%, var(--surface)); }
.lp-av { width: 28px; height: 28px; font-size: .72rem; box-shadow: 0 0 0 2px var(--surface); }
.lp-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.lp-txt strong { font-size: .82rem; }
.lp-where { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16ch; }
.lp-typing { color: var(--accent); font-weight: 600; }
.lp-me { opacity: .75; }
@media (max-width: 640px) { .lp-me { display: none; } }
.tk-here { display: block; font-size: .78rem; font-weight: 600; color: var(--accent); }
.tk-here:empty { display: none; }
textarea.live-locked, input.live-locked { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-style: dashed; cursor: not-allowed; }
.live-lock { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--accent); }
.live-dots { width: 18px; height: 6px; background: radial-gradient(circle, currentColor 2px, transparent 2.5px) 0 0 / 6px 6px repeat-x; animation: live-dots 1s steps(3) infinite; }
@keyframes live-dots { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.live-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 4px 10px; border-radius: 10px; font-size: .82rem;
  background: var(--warn-bg); color: var(--warn-text); }
.live-chip .link { color: inherit; text-decoration: underline; min-height: 32px; }
.live-theirs { display: grid; gap: 4px; width: 100%; }
.live-theirs-text { white-space: pre-wrap; font-size: .88rem; color: var(--text); background: var(--surface); border-radius: 6px; padding: 4px 8px; }
.live-theirs-btns { display: flex; gap: 10px; align-items: center; }
.live-theirs-btns button { min-height: 36px; }
.ci.live-hit, .line-row.live-hit { animation: live-hit 1.6s ease-out; }
@keyframes live-hit { from { background: color-mix(in srgb, var(--accent) 18%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .ci.live-hit, .line-row.live-hit, .live-dots { animation: none; } }

/* Google reviews box (js/google-reviews.js): set apart from our own content, as Google's attribution rules ask. */
.g-box { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface); display: grid; gap: 10px; }
.g-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.g-num { font-size: 1.3rem; }
.g-stars { color: #e7a100; letter-spacing: 1px; white-space: nowrap; }
.g-stars .g-off { color: var(--border); }
.g-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.g-review { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.g-who { display: flex; gap: 10px; align-items: center; }
.g-who img, .g-noimg { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); flex: none; display: inline-block; }
.g-text { margin: 0; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.g-foot { margin: 0; }
.g-attr { font-weight: 600; }
.nf-stat { justify-self: start; }

/* Delete my account (js/account-delete.js): Account card, the overlay's two lists + blockers, the "will be deleted" banner. */
.acct-del-card .row { gap: 12px; flex-wrap: wrap; }
dialog.acct-del .steps-dots { margin: 0 0 14px; }
dialog.acct-del h3 { margin: 0 0 4px; font-size: 1rem; }
dialog.acct-del ul.small { margin: 0; padding-left: 1.1rem; display: grid; gap: 4px; }
.acct-del-blockers { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.acct-del-blockers .card { margin: 0; padding: 12px; }
.acct-choice { display: grid; gap: 10px; }
.acct-opt { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-weight: 400; min-height: 44px; }
.acct-opt strong { font-size: 1.02rem; }
.acct-opt span { color: var(--muted); font-size: 0.9rem; }
.acct-opt.danger-opt strong { color: var(--err-text); }
.acct-opt:disabled { opacity: .75; }
.acct-keep { margin: 0 0 10px; }
.acct-del-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---- Forms: reports, print, share ---- */
.rpt-text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rpt-form .svc-items li > .row strong { text-align: right; overflow-wrap: anywhere; }
.rpt-table-scroll { overflow-x: auto; margin: 6px 0 2px; -webkit-overflow-scrolling: touch; }
.report .fi-table-ro { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.report .fi-table-ro th, .report .fi-table-ro td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; vertical-align: top; white-space: nowrap; }
.report .fi-table-ro thead th { background: var(--bg); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.report .fi-table-ro tbody th { font-weight: 600; background: var(--bg); }
.rpt-sig { display: grid; gap: 4px; justify-items: start; margin: 6px 0 2px; }
.rpt-sig-img { display: block; width: auto; max-width: min(260px, 100%); max-height: 90px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; }
.rpt-sig-cap { font-size: 0.85rem; color: var(--muted); }
/* the printed form */
.rpt-controls .sf-int-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; min-height: 44px; cursor: pointer; }
.rpt-controls .sf-int-opt[hidden] { display: none; }
.rpt-controls .sf-int-opt { white-space: nowrap; }
.rpt-controls .sf-int-opt input { width: auto; min-height: 0; margin: 0; }
.sf-lay-two_column .sf-one { table-layout: auto; }
.sf-lay-two_column .sf-one td:empty:not(.sf-mark) { display: none; }
.sf-lay-two_column .sf-one .sf-type, .sf-lay-two_column .sf-one .sf-qty { width: auto; }
.sf-int { font-size: 0.75rem; font-weight: 700; color: var(--muted); font-style: italic; }
.sf-info td { font-style: italic; font-size: 0.82rem; color: var(--muted); }
.sf-write-long { min-height: 6em; }
.sf-fill { border-bottom: 1px solid var(--text); min-height: 1.6em; }
.sf-opts { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 0.88rem; }
.sf-opt { padding: 1px 9px; border-radius: 999px; border: 1.5px solid transparent; font-weight: 600; }
.sf-opt.circ { border-color: var(--text); }
.sf-opt2 { white-space: nowrap; }
.sf-tbl td { padding-bottom: 10px; }
.sf-fi { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 0.85rem; }
.sf-fi th, .sf-fi td { border: 1px solid var(--text); padding: 4px 6px; text-align: left; height: 1.9em; vertical-align: top; text-transform: none; letter-spacing: 0; color: var(--text); font-size: inherit; }
.sf-fi thead th { background: var(--bg); font-weight: 700; font-size: 0.78rem; }
.sf-fi tbody th { font-weight: 600; width: 1%; white-space: nowrap; }
.sf-sigbox { height: 84px; border: 1px solid var(--text); border-radius: 4px; margin-top: 4px; background: #fff; display: flex; align-items: center; justify-content: center; max-width: 360px; }
.sf-sigbox img { max-height: 76px; max-width: 100%; object-fit: contain; }
.sf-sigcap { display: flex; gap: 24px; max-width: 360px; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.sf-lay-compact .sf-table { font-size: 0.82rem; }
.sf-lay-compact .sf-table td, .sf-lay-compact .sf-table th { padding: 2px 5px; }
.sf-lay-compact .sheet-hdr { padding: 6px 10px; gap: 4px 10px; }
.sf-lay-two_column .sf-cols { column-count: 2; column-gap: 22px; }
.sf-lay-two_column .sf-one { break-inside: avoid; margin: 0; }
.sf-lay-two_column .sf-one .sf-type { width: 38%; }
@media (max-width: 640px) { .sf-lay-two_column .sf-cols { column-count: 1; } }
@media print {
  .sf-sigbox, .rpt-sig-img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sf-lay-compact .sf-table { font-size: 8pt; }
  .sf-lay-compact .sf-table td, .sf-lay-compact .sf-table th { padding: 1px 4px; }
  .sf-lay-two_column .sf-cols { column-count: 2; }
  .sf-lay-two_column .sf-table { font-size: 8.5pt; }
  .sf-fi { font-size: 8.5pt; }
  .sf-fi th, .sf-fi td { border-color: #000; color: #000; }
  .sf-opt.circ { border-color: #000; }
  .sf-tbl, .sf-sigrow { break-inside: avoid; }
}

/* ---- Forms: fields (job page + builder preview; js/forms.js controlHtml, migration 20261005950000) ---- */
.ci-headrow { padding: 14px 0 2px; border-bottom: none; }
.ci-headrow h3.group-title { margin: 0; }
.ci-list > .ci-headrow:first-child { padding-top: 0; }
.ci-info { padding: 10px 12px; margin: 8px 0; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); }
.ci-info-title { margin: 0; font-weight: 700; }
.ci-info .ci-help { margin-top: 4px; }
.ci-help { margin: -4px 0 0; color: var(--muted); font-size: 0.86rem; line-height: 1.4; white-space: pre-wrap; }
.fi-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; vertical-align: 1px;
  color: var(--muted); background: var(--bg); border: 1px solid var(--border); }
.fi-tag.fi-int { color: var(--warn-text); background: var(--warn-bg); border-color: transparent; }
.ci-need { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--err-text); }
.ci.ci-missing { box-shadow: inset 3px 0 0 var(--err-text); padding-left: 10px; }
.ci-count { margin: 2px 0 0; }
/* single choice as buttons (6 or fewer), multiple choice as chips */
.res-btns.fi-opts { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.res-btns.fi-opts .res { white-space: normal; line-height: 1.25; }
.fi-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.fi-chip { cursor: pointer; color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 600; padding: 9px 14px; min-height: 40px; }
.chip.fi-chip.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.fi-when { max-width: 260px; }
.fi-lim { white-space: nowrap; }
/* tables: scroll sideways on a phone, never the page */
.fi-table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.fi-table { border-collapse: collapse; width: auto; max-width: none; font-size: 0.9rem; }
.fi-table th, .fi-table td { border: 1px solid var(--border); padding: 4px 6px; text-align: left; vertical-align: middle; }
.fi-table thead th { background: var(--bg); color: var(--muted); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.fi-table tbody th { font-weight: 600; white-space: nowrap; background: var(--bg); }
.fi-table td input, .fi-table td select { width: 10em; min-width: 0; min-height: 44px; padding: 6px 8px; border-radius: 6px; }
.fi-table td input[type=number] { width: 7.5em; }
.fi-table td select { width: 9em; }
.fi-table .fi-rn { color: var(--muted); font-weight: 600; text-align: center; }
.fi-table .fi-rx { width: 44px; text-align: center; }
.fi-req { color: var(--err-text); margin-left: 2px; }
.ci-k-table [data-row-add] { margin-top: 8px; }
/* signatures: dark ink on white in both schemes */
.fi-sig { display: grid; gap: 8px; justify-items: start; }
.fi-sig-img { display: block; width: min(320px, 100%); height: auto; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.fi-sig-empty { margin: 0; padding: 18px 14px; border: 1px dashed var(--border); border-radius: 8px; width: min(320px, 100%); }
.fi-sig input { max-width: 320px; }
.sig-sheet { width: min(680px, calc(100% - 24px)); max-width: none; }
.sig-say { margin: 0 0 8px; }
.sig-pad { position: relative; width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #fff; touch-action: none; }
.sig-pad canvas { display: block; touch-action: none; cursor: crosshair; }
.sig-line { position: absolute; left: 14px; right: 14px; bottom: 34px; border-bottom: 1.5px solid #9aa6b8; color: #9aa6b8; font-size: 0.9rem; line-height: 1; pointer-events: none; padding-bottom: 2px; }
.sig-sheet .step-btns { margin-top: 12px; flex-wrap: wrap; }
/* "Still needed": the sheet's Finish, the job's card and the dialog */
.fi-left { display: grid; gap: 4px; }
.fi-left-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fi-left-items .link { min-height: 32px; text-align: left; }
.fi-left-card { border-color: color-mix(in srgb, var(--warn-text) 35%, var(--border)); }
.fi-left-card h3.group-title { color: var(--warn-text); }
.fi-left-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fi-jump { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; width: 100%; text-align: left; min-height: 48px; padding: 8px 12px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font-weight: 600; }
.fi-jump .muted { grid-column: 1; font-weight: 500; }
.fi-jump .tk-go { grid-column: 2; grid-row: 1 / span 2; }
.fi-left-dlg .step-btns { margin-top: 14px; }
.ci-part > .dict-btn { width: auto; justify-self: start; }

/* The shop job page uses the whole screen on computers (user decision 2026-10-04); phones are unchanged. Long forms flow in two
   columns on wide screens: short fields side by side; headings, instructions, tables, long text, photos, signatures and findings full width. */
@media (min-width: 900px) {
  main.job-main { max-width: none; padding-inline: clamp(16px, 2.5vw, 40px); }
}
@media (min-width: 1100px) {
  .sheet-panel .ci-list:not(.ci-one) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .sheet-panel .ci-list:not(.ci-one) > :is(.ci-headrow, .ci-info, .ci-k-table, .ci-k-longtext, .ci-k-signature, .ci-k-photo, .ci-k-video,
    .ci-attention, .ci-failed, .ci-k-qty, .tc-added, .tc-removed, :has(.tc-box)) { grid-column: 1 / -1; }
  .sheet-panel .ci-list:not(.ci-one) > .ci { align-content: start; }
  .sheet-panel .ci-list:not(.ci-one) > .ci:not(:last-child) { border-bottom: 1px solid var(--border); }
  .sheet-panel .ci-one, .sheet-panel .sheet-sub { max-width: 820px; }
  /* the Previous / Next bar spans the card (a bar cut at 820 px left a stub of the card showing beside it; UI check 2026-10-06); its buttons stay in the 820 px column */
  .sheet-panel .one-nav { padding-right: max(16px, calc(100% - 836px)); }
  .tk-card { max-width: none; }
}

/* ---- Forms: the builder (/shop/forms/) ---- */
.fb-top { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.fb-form { align-items: center; }
.fb-form-main { min-width: 0; flex: 1 1 220px; }
.fb-form-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-form-acts button { padding: 8px 12px; }
html.fb-open { overflow: hidden; }
/* The editor is a full-screen overlay: a bar, tabs, then the panes. */
dialog.fb-ed { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: none;
  background: var(--bg); color: var(--text); overflow: hidden; }
dialog.fb-ed::backdrop { background: var(--bg); }
dialog.fb-ed[open] { display: flex; flex-direction: column; }
.fb-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); background: var(--surface); border-bottom: 1px solid var(--border); }
.fb-bar button { padding: 8px 14px; }
.fb-title { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.fb-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog.fb-ed > .offline-note { margin: 8px 12px 0; flex: none; }
.fb-draftbar { flex: none; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; margin: 0; border-radius: 0; font-size: 0.9rem; }
.fb-draft-btns { display: inline-flex; gap: 12px; align-items: center; }
.fb-tabs { flex: none; margin: 0; padding: 0 8px; background: var(--surface); }
.fb-tabs .tab { flex: 1; text-align: center; padding: 10px 6px; white-space: nowrap; }   /* "Form settings" on one line (UI check 2026-10-06) */
.fb-body { flex: 1; min-height: 0; display: flex; }
.fb-pane { flex: 1; min-width: 0; overflow-y: auto; padding: 12px; display: grid; align-content: start; gap: 12px; }
.fb-pane[hidden] { display: none; }
.fb-pane > * { min-width: 0; }
.fb-hint { margin: 0; }
@media (min-width: 900px) {
  .fb-tab-pv { display: none; }
  .fb-tabs .tab { flex: none; padding: 10px 18px; }
  .fb-body { display: grid; grid-template-columns: minmax(0, 1fr) 460px; }
  .fb-pane:not(.fb-pv-pane) { padding: 16px 24px; }
  .fb-pane:not(.fb-pv-pane) > * { max-width: 760px; width: 100%; justify-self: center; }
  .fb-pv-pane { border-left: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 90%, var(--text)); padding: 16px 20px; }
}
/* The list of fields */
.fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; position: relative; }
.fb-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px 4px 3px 0; position: relative; }
.fb-row.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fb-row.bad { border-color: var(--err-text); background: color-mix(in srgb, var(--err-bg) 50%, var(--surface)); }
.fb-row.fb-t-heading { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); border-left: 4px solid var(--accent); margin-top: 8px; }
.fb-row.fb-t-heading .fb-lab { font-size: 1.02rem; letter-spacing: 0.01em; }
.fb-row.fb-t-info { border-style: dashed; }
.fb-row.fb-t-info .fb-lab { font-weight: 500; font-style: italic; }
.fb-grip { width: 40px; height: 44px; padding: 0; background: none; color: var(--muted); border: none; cursor: grab; touch-action: none; display: grid; place-items: center; border-radius: 8px; }
.fb-grip:active, .fb-row.dragging .fb-grip { cursor: grabbing; color: var(--accent); }
.fb-main { display: flex; gap: 8px; align-items: center; text-align: left; background: none; color: var(--text); border: none; padding: 5px 4px; min-height: 44px; font-weight: 400; width: 100%; min-width: 0; }
.fb-ic { width: 26px; height: 26px; flex: none; display: inline-grid; place-items: center; border-radius: 7px; background: var(--bg); font-size: 0.95rem; line-height: 1; }
.fb-txt { display: grid; gap: 1px; min-width: 0; flex: 1; }
.fb-lab { display: block; font-weight: 600; overflow-wrap: anywhere; line-height: 1.3; }
.fb-meta { display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; font-size: 0.76rem; color: var(--muted); }
.fb-meta code { font-size: 0.72rem; opacity: 0.85; background: none; padding: 0; }
.fb-chip { padding: 0 7px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); white-space: nowrap; }
.fb-chip.int { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.fb-chip.cond { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-strong); border-color: transparent; }
.fb-chip.bad { background: var(--err-bg); color: var(--err-text); border-color: transparent; }
.fb-acts { display: flex; }
.fb-act { width: 34px; height: 44px; padding: 0; background: none; color: var(--muted); border: none; font-size: 1.05rem; font-weight: 600; border-radius: 8px; }
.fb-act:disabled { opacity: 0.3; }
.fb-act.fb-del { color: var(--err-text); }
.fb-row .fb-warn { grid-column: 1 / -1; margin: 2px 8px 6px 12px; font-size: 0.84rem; color: var(--err-text); }
.fb-row.dragging { z-index: 3; box-shadow: 0 8px 22px rgb(0 0 0 / 0.3); cursor: grabbing; }
.fb-list.is-dragging { user-select: none; -webkit-user-select: none; }
.fb-dropline { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--accent); z-index: 4; pointer-events: none; }
.fb-empty { list-style: none; text-align: center; padding: 28px 12px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface); }
.fb-addbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 -12px -12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--border); }
@media (min-width: 900px) { .fb-addbar { margin: 0; padding: 10px 0; max-width: 760px; } }
/* Sheets: the field editor, the type picker, import */
dialog.sheet.fb-field, dialog.sheet.fb-picker, dialog.sheet.fb-import { width: min(640px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; }
dialog.sheet.fb-field[open], dialog.sheet.fb-picker[open], dialog.sheet.fb-import[open] { display: flex; flex-direction: column; }
dialog.sheet.fb-field .sheet-head, dialog.sheet.fb-picker .sheet-head, dialog.sheet.fb-import .sheet-head { flex: none; margin-bottom: 0; }
dialog.sheet.fb-field .sheet-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.fb-fbody { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 12px; display: grid; gap: 14px; align-content: start; }
.fb-fbody > * { min-width: 0; }
.fb-picker .fb-fbody { padding-bottom: 76px; }   /* clear of the First Mate button */
.fb-foot { flex: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.fb-foot-gap { flex: 1; }
.fb-foot button { padding: 10px 16px; }
.danger-text { color: var(--err-text); }
button.secondary.danger-text { color: var(--err-text); }
/* Import a paper form (js/form-import.js) + the AI draft banner and the paper beside the builder */
.fi-pick { display: flex; flex-wrap: wrap; gap: 8px; }
label.button.fi-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; }
label.button.fi-btn:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
label.button.fi-btn.disabled { opacity: 0.5; pointer-events: none; }
.fi-import .icon-close { width: 44px; height: 44px; }
.fi-import .fb-fbody { padding-bottom: 76px; }   /* clear of the First Mate button */
.fi-import .fb-foot button { min-height: 44px; }
.fi-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fi-page { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px 4px 4px 6px; }
.fi-page img, .fi-pdf { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; background: var(--bg); }
.fi-pdf { display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; color: var(--err-text); border: 1px solid var(--border); }
.fi-page-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fi-rm { width: 44px; height: 44px; padding: 0; background: none; color: var(--err-text); border: none; font-size: 1.05rem; border-radius: 8px; }
.fi-busy { display: flex; align-items: center; gap: 10px; margin: 0; }
.fi-spin { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: fi-spin 0.9s linear infinite; }
@keyframes fi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fi-spin { animation-duration: 3s; } }
.fb-ai { flex: none; margin: 0; border-radius: 0; font-size: 0.9rem; max-height: 34dvh; overflow-y: auto; }
.fb-ai strong { display: block; }
.fb-ai ul { margin: 6px 0 0; padding-left: 20px; }
.fb-ai li { margin: 2px 0; }
.fb-ai-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.fb-ai-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fb-ai-acts button { min-height: 44px; }
.fb-side { display: flex; gap: 6px; }
.fb-side[hidden] { display: none; }
@media (max-width: 899px) { .fb-side { display: none; } }
.fb-side button { min-height: 44px; padding: 6px 12px; }
.fb-paper { display: grid; gap: 10px; }
.fb-paper img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.fb-paper a { display: block; }
.fb-paper-pdf { padding: 12px; border: 1px dashed var(--border); border-radius: 8px; }
.fb-tab-paper[hidden] { display: none; }
@media (min-width: 900px) { .fb-tab-paper { display: none; } }
@media (max-width: 700px) {
  dialog.sheet.fb-field, dialog.sheet.fb-picker, dialog.sheet.fb-import { width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; border-bottom: none; }
}
.fb-f { display: grid; gap: 4px; }
label.check.fb-check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; color: var(--text); font-size: 0.95rem; }
.fb-check input { margin-top: 3px; flex: none; }
.fb-check .muted { display: block; }
.fb-set { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 12px; display: grid; gap: 10px; margin: 0; min-width: 0; }
.fb-set legend { font-weight: 600; padding: 0 6px; font-size: 0.95rem; }
.fb-adv summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.fb-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fb-type { display: flex; gap: 10px; align-items: center; text-align: left; background: var(--surface); color: var(--text); border: 1px solid var(--border); padding: 8px 10px; min-height: 56px; font-weight: 400; width: 100%; }
.fb-type:hover, .fb-type:focus-visible { border-color: var(--accent); }
.fb-type > span:last-child { display: grid; gap: 1px; min-width: 0; }
.fb-type strong { font-size: 0.9rem; line-height: 1.25; }
.fb-type .muted { font-size: 0.74rem; line-height: 1.25; }
@media (max-width: 520px) { .fb-type .muted { display: none; } .fb-types { gap: 6px; } }
.fb-rule { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fb-rule select, .fb-rule input { flex: 1 1 130px; min-width: 0; }
.fb-rule { row-gap: 8px; }
.fb-rule button { flex: none; min-height: 44px; }
.fb-rt { margin: 0; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-strong); font-size: 0.88rem; }
.fb-col { border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 8px; background: var(--bg); }
.fb-col-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.fb-col-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fb-seg { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.fb-seg label.check { min-height: 44px; }
.fb-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fb-preset { cursor: pointer; color: var(--text); font: inherit; font-size: 0.85rem; padding: 6px 12px; min-height: 44px; }
.fb-preset:hover { border-color: var(--accent); }
.fb-bad-in { outline: 2px solid var(--err-text); outline-offset: 1px; }
/* Preview: the tech's screen */
.fb-pv-head { display: grid; gap: 2px; }
.fb-phone { box-sizing: border-box; width: min(390px, 100%); margin: 0 auto; background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 12px 14px 16px; box-shadow: 0 2px 10px rgb(0 0 0 / 0.08); }
@media (min-width: 900px) { .fb-phone { border: 9px solid #1c2736; border-radius: 30px; box-shadow: 0 8px 28px rgb(0 0 0 / 0.25); padding: 14px 14px 18px; } }
.fb-phone-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.fb-prog { display: grid; gap: 4px; margin: 6px 0; }
.fb-phone .ci-list { margin-top: 4px; }
.fb-ph-head { list-style: none; border-bottom: 2px solid var(--border); padding-top: 10px; }
.fb-ph-head h3 { margin: 6px 0 4px; font-size: 1rem; color: var(--accent-strong); }
.fb-ph-info { list-style: none; display: flex; gap: 8px; padding: 10px; margin: 8px 0; border-radius: 10px; background: var(--surface); border: 1px dashed var(--border); }
.fb-pv-help { margin: 0; }
.fb-fake { display: grid; place-items: center; background: var(--bg); color: var(--text); font-size: 1.4rem; border: 1px dashed var(--border); }
.fb-pv-empty, .fb-pv-hidden { margin: 8px 0 0; }
.fb-phone .fi-table td input, .fb-phone .fi-table td select { min-height: 44px; }   /* a tap target in the preview, as on the job page */

/* Page-to-page view transitions (2026-10-04, user: "make it seem more like an app"): every tab is a page load, so the header and the
   shop tab bar keep a name and stay put (no animation, the new one shows at once) while the page under them cross-fades quickly; the
   current tab's underline slides to the new tab. Same-origin navigations only (the browser's rule); a reload never animates. With
   reduced motion there is no transition at all; browsers without cross-document view transitions just load the page. */
/* The opt-in itself (@view-transition) is in each page's brand head (scripts/brand-head.mjs), next to the steady-header script that
   quiets the browser's rejection when a transition is aborted: a page without that script (tests' fixtures, pages with no app head)
   never opts in. */
header.top { view-transition-name: nf-header; }
nav.app-tabs { view-transition-name: nf-tabs; }
nav.app-tabs .tab-ink { view-transition-name: nf-tab-ink; }
::view-transition-group(root) { animation-duration: 140ms; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; animation-timing-function: ease-out; }
::view-transition-group(nf-header), ::view-transition-group(nf-tabs) { animation: none; }
/* the header: the old picture stays for the 140 ms and the new header takes over at the end (its logo image may need a moment to load
   on the new page, so it would blink if shown at once); the tab bar (inline icons, nothing to load) switches at once */
::view-transition-old(nf-header) { animation: none; }
::view-transition-new(nf-header) { animation: nf-vt-late 140ms step-end both; }
@keyframes nf-vt-late { from { opacity: 0; } to { opacity: 1; } }
::view-transition-old(nf-tabs) { display: none; }
::view-transition-new(nf-tabs) { animation: none; }
::view-transition-group(nf-tab-ink) { animation-duration: 180ms; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
::view-transition-old(nf-tab-ink), ::view-transition-new(nf-tab-ink) { animation-duration: 180ms; }
@media print { header.top, nav.app-tabs, nav.app-tabs .tab-ink { view-transition-name: none; } }

/* Two-way texting per shop (js/shop-texting.js): the strip above a conversation's composer; "by text" tags in timeline.js */
.tl-sms { font-weight: 600; }
.tl-sms.warn { color: var(--danger, #b42318); }
.texting-row { padding: 6px 16px 0; }
.texting-row .check-row { margin: 0; gap: 6px; }
.texting-row .texting-note, .texting-row p { margin: 0 0 4px; }
.texting-phone { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin: 6px 0; }
.texting-phone input { min-width: 0; max-width: 220px; }
/* UX fixes 2026-10-05: example text in an empty field is lighter than a typed value, so "e.g. Reel Therapy" never looks filled in. */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.7; }
/* Service & repairs: "＋ Add a record" is the one button; the history report is a plain link beside it. */
.lb-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-weight: 600; }
.lb-link[hidden] { display: none; }
/* Service report (/job/): Share / Print under one ⋯ menu; "Message <shop>" beside the shop's name. */
.rpt-more { position: relative; }
.rpt-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius); font-weight: 600; background: var(--surface); }
.rpt-more > summary::-webkit-details-marker { display: none; }
.rpt-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: grid; gap: 6px; padding: 8px; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 0.18); }
.rpt-menu button { width: 100%; }
.svc-msg { margin-top: 6px; display: inline-flex; }
/* Boat page Engine hours tile with 2+ engines: one line per engine ("Port 412.5 h"). */
.glance-lines { display: grid; gap: 1px; font-size: 1rem; line-height: 1.25; }
/* New job: the form is one column that never grows past the dialog (step 2 ran off the right edge at 390 px and hid Next). */
#new-form { grid-template-columns: minmax(0, 1fr); }
#new-form > * { min-width: 0; }
/* Hours on phones (UX review 2026-10-04): the table's headers wrap in plain case instead of running into each other
   ("CLOCKEDBREAKS"), and the tabs wrap so Settings is never off the screen. */
@media (max-width: 560px) {
  .hr-head { font-size: .72rem; letter-spacing: 0; text-transform: none; line-height: 1.2; }
  .hr-head > span { min-width: 0; overflow-wrap: anywhere; }
  .hr-tabs { flex-wrap: wrap; overflow-x: visible; }
  .hours-main .row:has(> #export) { flex-wrap: wrap; }
}
/* Messages thread header on phones: the call button is a normal-height "📞 Call" pill (it was a tall icon-only capsule squeezed
   against the edge); offline it says why instead. */
.call-btn .cl-short { display: none; }
.call-btn .ci { display: inline; padding: 0; border: 0; line-height: 1; font-size: 1rem; }   /* .ci is also the checklist item class (padding + border) */
.main-bar .call-btn, .main-bar .video-btn { align-self: center; line-height: 1.2; min-height: 40px; }
@media (max-width: 820px) {
  .call-btn:not(.off) .cl-short { display: inline; }
}
/* First Mate inside a dialog (UX review 2026-10-04: the floating button covered form fields / footers in nearly every dialog):
   where the browser supports CSS anchor positioning, a dialog with a header (.sheet-head + ✕) docks the button into that header,
   small, just left of the ✕, so it never sits on a field. Elsewhere it stays at the bottom right, lifted above the dialog's footer
   (js/first-mate-bubble.js LIFT_SEL). Only selectors and position here; the bubble's own behaviour is unchanged. */
@supports (anchor-name: --a) and (top: anchor(top)) {
  dialog[open] .sheet-head > .icon-close { anchor-name: --nf-dlg-x; }
  dialog[open]:has(> .fm-root:not([hidden])) .sheet-head > .icon-close { margin-left: 54px; }
  dialog[open]:has(.sheet-head > .icon-close) > .fm-root .fm-launch {
    position: fixed; position-anchor: --nf-dlg-x; top: calc(anchor(top) - 4px); right: calc(anchor(left) + 6px); bottom: auto;
    width: 44px; height: 44px; border-width: 1.5px; box-shadow: none; }
  dialog[open]:has(.sheet-head > .icon-close) > .fm-root .fm-launch img { width: 24px; height: 24px; border-radius: 6px; }
  dialog[open]:has(.sheet-head > .icon-close) > .fm-root .fm-dot { width: 10px; height: 10px; top: 0; right: 0; }
}
/* Tech workspace bar: a solid band (the card under it no longer shows through the fade) that names the boat and job. */
.ws-slot { background: var(--bg); padding-bottom: 2px; }
.ws-slot .ws-bar { margin-bottom: 8px; }
.ws-text { display: grid; gap: 1px; }
.ws-line { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.ws-what { font-size: 0.85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Shop job page header (UX fixes 2026-10-05): one line "#1042 100-hour service" + boat, the status, ONE primary button for
   the job's state and a ⋯ menu (Message customer, Team chat, Print, Send back to tech, Reopen, Cancel). */
.job-head-slim { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.job-head-slim .jh-main { min-width: 0; }
.job-head-slim h1 { font-size: 1.35rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-head-slim .jh-no { color: var(--muted); font-weight: 700; }
.job-head-slim .jh-sub { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }
.job-head-slim .job-actions { grid-column: 1 / -1; margin: 6px 0 4px; flex-wrap: nowrap; }
.job-head-slim .job-actions > button, .job-head-slim .job-actions > a { flex: 1 1 auto; min-height: 44px; }
@media (min-width: 701px) { .job-head-slim .job-actions > button, .job-head-slim .job-actions > a { flex: 0 1 auto; } }
.job-more { position: relative; flex: none; margin-left: auto; }
.job-more > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid var(--border); font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--accent); }
.job-more > summary::-webkit-details-marker { display: none; }
.job-more[open] > summary { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.job-more-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; display: grid; gap: 2px; padding: 6px; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 28px rgb(0 0 0 / 0.22); }
.job-more-menu > button, .job-more-menu > a { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left;
  background: transparent; color: var(--text); border: 0; border-radius: 8px; font-weight: 600; text-decoration: none; }
.job-more-menu > button:hover, .job-more-menu > a:hover { background: var(--bg); }
.job-more-menu > .danger-text { color: var(--err-text); }
/* computers: the ⋯ sits left, beside the main button, so its menu opens to the right (it ran off the left edge at 1024 px; UI check 2026-10-06) */
@media (min-width: 701px) { .job-head-slim .job-more-menu { right: auto; left: 0; } }
/* The tab strip is never cut off mid-word: phones get the same ‹ › buttons as computers, tabs snap to a whole tab, and the full
   name is in each tab's title. Computers show a sheet's whole name. */
.job-tabs-wrap .job-tabs { scroll-snap-type: x proximity; scroll-padding-inline: 40px; }
.job-tabs-wrap .job-tabs > button { scroll-snap-align: start; }
@media (max-width: 700px) {
  .job-tabs-wrap.can-l .tabs-more.l, .job-tabs-wrap.can-r .tabs-more.r { display: flex; }
  .tabs-more { width: 36px; }
}
@media (min-width: 701px) { .job-tabs-wrap .job-tabs button { max-width: none; } .job-tabs-wrap .job-tabs .tab-name { max-width: none; } .job-tabs-wrap .tab-base { min-width: 0; } }
/* Review & send: "Send to customer" stays in reach while the summary scrolls (sticky at the bottom of the screen). */
.send-box .send-row { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--border); margin-top: 8px; }
/* (the title gets the whole first line; boat · WO and the status share the second) */
.job-head-slim .jh-main { display: contents; }
.job-head-slim h1 { grid-column: 1 / -1; }
.job-head-slim .jh-sub { grid-column: 1; }
.job-head-slim .job-badge { grid-column: 2; flex-direction: row; align-items: center; }
@media (min-width: 701px) { .job-head-slim .job-more { margin-left: 0; } }
/* Shop tab sub-tabs (Team · Customers · Details & plan · Settings): they wrap rather than scroll on phones, so none is cut off. */
.shop-sub { flex-wrap: wrap; overflow-x: visible; margin: 4px 0 14px; }
.shop-sub button { min-height: 44px; }
.shop-sub button[hidden] { display: none; }
.shop-subpanel > .card:first-child, .shop-subpanel > section:first-child > h2:first-child { margin-top: 0; }
/* Customers (Boats) tab: Due for service + Bookings sit with the filters. */
#boat-filter { flex-wrap: wrap; }
#boat-filter button { min-height: 44px; }
#boat-filter [hidden] { display: none; }
@media (max-width: 440px) { .shop-sub { gap: 0; } .shop-sub button { padding: 10px 7px; font-size: 0.9rem; } }
@media (max-width: 440px) { .shop-sub { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .shop-sub button { white-space: normal; text-align: center; line-height: 1.15; padding: 8px 4px; } }
/* NautHelp Pro Help / Messages on phones: with nothing open, the list is the first screen at full width. */
@media (max-width: 820px) {
  body.side-full .help-side { width: 100%; box-shadow: none; }
  body.side-full .help-side #collapse { visibility: hidden; }
}
.boat-data-row { margin: 18px 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.boat-data-row .link { min-height: 44px; font-weight: 600; }
.boat-data-row[hidden] { display: none; }
/* Phones: the Jobs list filters and the Yard's tabs wrap onto a second row instead of scrolling sideways with "My job…" / "Sprin…"
   cut off at the edge (UX review 2026-10-04). */
@media (max-width: 560px) {
  #filters.boat-tabs, .yd-tabs.boat-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
  #filters.boat-tabs button, .yd-tabs.boat-tabs button, .yd-tabs.boat-tabs a { padding: 10px 9px; }
}
.text-slot { margin-top: 6px; }
/* Home (2026-10-05): boats first, then what needs you, then a row of shortcuts (Charts · First Mate · Pro Help · Find a shop) */
@media (max-width: 700px) {
  .dash-grid.dash-shortcuts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dash-shortcuts .dash-card { grid-template-columns: auto 1fr; align-items: center; padding: 12px; column-gap: 10px; }
  .dash-shortcuts .dash-card .dash-text { display: none; }
  .dash-shortcuts .dash-card .dash-icon svg { width: 24px; height: 24px; }
  .dash-shortcuts .dash-card .dash-meta { grid-column: 1 / -1; }
}
.dash-boats:has(> .dash-boat.add:only-child) .dash-boat.add { grid-column: 1 / -1; min-height: 150px; border-style: solid; border-color: var(--accent); }

/* Getting started (js/getting-started.js, 2026-10-05): a checklist card on Home until it's done or hidden */
.gs-card { margin: 0 0 18px; padding: 14px 16px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--accent); }
.gs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gs-head h2 { margin: 0; font-size: 1.1rem; }
.gs-count { color: var(--muted); font-weight: 600; font-size: 0.92rem; margin-left: 6px; }
.gs-bar { height: 6px; border-radius: 999px; background: var(--bg); margin: 8px 0 6px; overflow: hidden; }
.gs-bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.gs-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.gs-steps li { display: flex; align-items: center; gap: 8px; min-height: 44px; border-top: 1px solid var(--border); }
.gs-steps li:first-child { border-top: none; }
.gs-steps li.done { color: var(--muted); padding: 0 2px; }
.gs-go { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 2px; margin: 0; background: none; border: none; color: var(--text);
  text-align: left; text-decoration: none; font: inherit; cursor: pointer; width: auto; }
.gs-tick { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--border); font-size: 0.8rem; font-weight: 800; }
.gs-steps li.done .gs-tick { background: #1fa34a; border-color: #1fa34a; color: #fff; }
.gs-steps li.next .gs-tick { border-color: var(--accent); }
.gs-t { display: grid; min-width: 0; }
.gs-t small { color: var(--muted); font-size: 0.82rem; font-weight: 400; }
.gs-steps li.next .gs-t strong { color: var(--accent); }
.gs-tour { flex: none; min-height: 44px; padding: 0 6px; }
.gs-hidden { margin: 0 0 12px; }
.gs-done { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; color: var(--muted); }
.gs-done .gs-tick { width: 18px; height: 18px; font-size: 0.7rem; background: #1fa34a; border-color: #1fa34a; color: #fff; }
@media (min-width: 701px) { .tab-panel[data-panel="overview"] .glance { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .tab-panel[data-panel="overview"] .glance-num { font-size: 1.2rem; } }
/* More: a dot when something inside it needs you (js/shop-nav.js setMoreDot) */
nav.app-tabs [data-tab="more"] .more-dot { position: absolute; top: 8px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: #e5484d;
  border: 2px solid var(--surface); }
@media (min-width: 900px) { nav.app-tabs [data-tab="more"] .more-dot { top: 12px; left: auto; right: calc(50% - 46px); } }

/* The boat's drivetrain (2026-10-05): one column per main engine, port → starboard (≤ 3 a row), the drive paired to it right under it with a
   short coupling between; phones: one column, the same order. Generators & other in their own row below. */
.eng-grid.dt { grid-template-columns: repeat(var(--dt-cols, 2), minmax(0, 1fr)); align-items: start; }
.dt-col { min-width: 0; }
.dt-stack { list-style: none; margin: 0; padding: 0; display: grid; }
.dt-link { display: grid; justify-items: center; height: 22px; }
.dt-link span { position: relative; width: 4px; height: 100%; border-radius: 2px; background: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.dt-link span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 8px; transform: translate(-50%, -50%); border-radius: 3px;
  background: var(--surface); border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border)); }
.dt-stack > .eng-card.add { min-height: 72px; }
.dt-gear small { font-weight: 500; }
.dt-other-title { margin: 6px 0 8px; }
@media (max-width: 700px) { .eng-grid.dt { grid-template-columns: minmax(0, 1fr); } }
#layout-other { align-items: start; }
#layout-other > .eng-card.add { min-height: 72px; }

/* Personal Home as a dashboard (2026-10-05): Now · Needs your attention · Coming up · Quick actions · Recent · Your boats (a slim strip) */
.dash2 .dash-section { margin-bottom: 18px; }
.dash2 .dash-section > h2 { margin: 0 0 8px; font-size: 1.05rem; }
.hd-now .todo { border-color: color-mix(in srgb, #1fa34a 60%, var(--border)); }
.hd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hd-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.hd-row:hover { border-color: var(--accent); }
.hd-main { display: grid; min-width: 0; flex: 1; }
.hd-main strong { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-main span { color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-left { flex: none; font-size: 0.8rem; font-weight: 700; text-align: right; max-width: 34%; line-height: 1.2; }
.hd-main strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hd-row.bad .hd-left { color: var(--err-text); }
.hd-row.warn .hd-left { color: var(--warn-text); }
.hd-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--border); }
.hd-row.bad .hd-dot { background: #d33; }
.hd-row.warn .hd-dot { background: #e0a100; }
.hd-ic { flex: none; color: var(--accent); display: grid; }
.hd-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.hd-quick button { display: grid; justify-items: center; gap: 4px; min-height: 64px; padding: 8px 4px; margin: 0; width: auto; border-radius: 12px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); font: inherit; font-size: 0.8rem; font-weight: 700; line-height: 1.15; cursor: pointer; }
.hd-quick button span { font-size: 1.3rem; line-height: 1; }
.hd-quick button:hover { border-color: var(--accent); }
.hd-quick button[hidden] { display: none; }
@media (max-width: 420px) { .hd-quick { gap: 6px; } .hd-quick button { font-size: 0.72rem; padding: 8px 2px; } }
.hb-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.hb-boat { flex: none; width: 92px; display: grid; justify-items: center; gap: 4px; text-decoration: none; color: var(--text); min-height: 44px; }
.hb-ph, .hb-boat img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; display: grid; place-items: center; font-size: 1.6rem;
  background: var(--surface); border: 1px solid var(--border); }
.hb-name { font-size: 0.8rem; font-weight: 600; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-add .hb-ph { border-style: dashed; color: var(--accent); }
.hb-boat.skeleton { width: 72px; height: 92px; border-radius: 14px; background: var(--surface); }
#boats-wrap.hd-first .hb-strip { display: block; }
.hd-add-first { display: grid; justify-items: center; gap: 6px; padding: 24px 16px; min-height: 150px; text-align: center; border: 2px solid var(--accent); }
.hd-links { display: grid; gap: 8px; margin-bottom: 14px; }
.hd-links .dash-link { margin: 0; }
dialog.hd-which .hd-which-list { display: grid; gap: 6px; padding: 4px 0 8px; }
.hd-which-boat { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 10px; border-radius: 12px; color: var(--text); text-decoration: none; border: 1px solid var(--border); }
.hd-which-boat:hover { border-color: var(--accent); }
.hd-which-boat .hb-ph, .hd-which-boat img { width: 44px; height: 44px; border-radius: 10px; font-size: 1.1rem; object-fit: cover; }
.hd-which-boat span { display: grid; }
.hd-which-boat small { color: var(--muted); }
.dash2 .todo { padding: 8px 12px; min-height: 56px; }
.dash2 .todo-text strong { font-size: 0.95rem; }
.dash2 .todo-text > span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.84rem; }
.dash2 .todo-icon { width: 36px; height: 36px; }
.dash2 h1 { margin: 6px 0 12px; font-size: 1.6rem; }
.menu a[hidden] { display: none; }

/* Edit tabs (js/shop-nav.js openEditTabs, 2026-10-05) */
.sm-foot { padding: 4px 18px 12px; border-top: 1px solid var(--border); }
.sm-foot .link { min-height: 44px; font-weight: 700; }
dialog.edit-tabs .et-help { margin: 0 0 4px; }
dialog.edit-tabs .et-count { margin: 0 0 6px; font-weight: 700; font-size: 0.9rem; }
.et-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.et-row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.et-row.on { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.et-row.dragging { opacity: 0.6; box-shadow: 0 6px 18px rgb(0 0 0 / 0.2); }
.et-grip { width: 28px; min-height: 44px; display: grid; place-items: center; cursor: grab; color: var(--muted); touch-action: none; user-select: none; letter-spacing: -2px; }
.et-ic { color: var(--accent); display: grid; }
.et-name { flex: 1; display: grid; min-width: 0; }
.et-name small { color: var(--muted); }
.et-row.on .et-name small { color: var(--accent); }
.et-sw { position: relative; display: inline-grid; place-items: center; width: 52px; min-height: 44px; margin: 0; }
.et-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.et-sw span { width: 40px; height: 24px; border-radius: 999px; background: var(--border); position: relative; transition: background .15s; pointer-events: none; }
.et-sw span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.et-sw input:checked + span { background: var(--accent); }
.et-sw input:checked + span::after { transform: translateX(16px); }
.et-sw input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.et-mv { width: 44px; min-height: 44px; padding: 0; margin: 0; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 1.1rem; }
.et-mv:disabled { opacity: 0.35; }
.et-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; position: sticky; bottom: 0; background: var(--surface); padding: 8px 0; }
.et-foot .link { min-height: 44px; }
@media (max-width: 420px) { .et-row { gap: 4px; } .et-mv { width: 40px; } }
/* A thread keyed to a phone (js/shop-texting.js mountTextThreadBar): /messages/ above the thread, the chat panel under its bar */
.text-thread-bar, .ch-textbar { padding: 8px 16px; border-bottom: 1px solid var(--line, #e3e6ea); background: var(--card, transparent); }
.tt-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; font-size: 0.9rem; }
.tt-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-acts button { min-height: 44px; }
.tt-form { display: grid; gap: 10px; }
.tt-picks { max-height: 40vh; overflow: auto; margin: 0; padding: 0; }
.tt-picks li { padding: 4px 0; }
.tt-picks [aria-selected="true"] { font-weight: 700; text-decoration: underline; }
.tt-err { color: var(--danger, #b42318); margin: 0; }
/* ---- Personal-side UI check (2026-10-06, scripts/tests/browser/ui-personal.cjs) ----------------------------------------------------
   Count badges (bell, switcher menu, chat button / tabs / rows) carry white numbers: #e5484d gave 3.9:1, this red gives 5:1.
   Green buttons with white words ("Open" on a trip underway, live video) likewise (#1fa34a 3.3:1 → 4.8:1). Dots keep their colour. */
.nf-bell-n, .ctx-menu .ctx-n, .fm-badge, .fm-tab-n, .ch-n { background: #d32f35; }
.todo.live .todo-go, .video-btn.live, .vc-join-btn { background: #16843c; }
/* Home's boats strip: a name gets two lines before it's cut ("Reel Thera…" → "Reel Therapy") */
/* Tanks editor: every row the same columns (the phone rule was overridden, so "Fresh wa…" / "Fresh wate" were cut), the size says "gal" */
#tank-rows .tank-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.9fr) 44px; grid-template-areas: "kind name cap rm" "warn warn pct pct"; }
#tank-rows .tank-row > select { grid-area: kind; } #tank-rows .tank-row > input[data-f=name] { grid-area: name; }
#tank-rows .tank-cap { grid-area: cap; display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 0.85rem; color: var(--muted); }
#tank-rows .tank-cap input { min-width: 0; flex: 1; }
#tank-rows [data-rm] { grid-area: rm; min-width: 44px; min-height: 44px; } #tank-rows .tank-warn { grid-area: warn; } #tank-rows .tank-warn-pct { grid-area: pct; }
@media (max-width: 520px) { #tank-rows .tank-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "kind name rm" "cap warn warn" ". pct pct"; }
  #tank-rows .tank-row:has(.tank-warn-pct[hidden]) { grid-template-areas: "kind name rm" "cap warn warn"; } }
/* Service report head on a phone: the shop, then the job line under it (three squeezed columns put "Message Dockside Marine" on 3 lines) */
@media (max-width: 600px) { .svc-head { flex-direction: column; gap: 8px; } .svc-meta { text-align: left; } }
/* /messages/ thread head: the shop on one line, the boat under it (side by side, "Dockside Mari…" was cut while the boat took 2 lines) */
.main-title:has(> #convo-sub:not(:empty)) { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.main-title:has(> #convo-sub:not(:empty)) > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tap targets the hit-area rule couldn't reach (a neighbour or the dialog's scroll box cut it): real 44 px.
   Stacked "Logged twice?" answers, the edit-trip tabs (When & where · Engine hours…), the maintenance views + tick boxes (the tick's
   label takes the row's full height), an engine card's ⋯ */
.dup-pair .small-btn, .tseg button, .maint-views button, .maint-parts button { min-height: 44px; }
.maint-check { align-self: stretch; display: grid; place-items: center; min-width: 44px; min-height: 44px; margin: -10px 0 -10px -12px; padding-left: 12px; }
.eng-more summary { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
.eng-more[open] > span { top: 44px; }
/* The crew / co-owner sheets (js/crew.js), Pause or delete my account, Export, the estimate Sign & approve / Decline / Ask for a quote, Account → Password, Dispute, Home's "Which boat?" and Edit tabs start with a .sheet-head: the head goes edge to edge like in
   the wide sheets, instead of sitting inside the dialog's own 20 px padding (the title was indented twice) */
dialog.sheet:is(.crew-sheet, .acct-del, .boat-export, .est-sign-sheet, .est-dlg, .hd-which, .edit-tabs, #pw-dialog, #dispute-dialog, .staff-chat, .leave-sheet) > .sheet-head:first-child { margin: -20px -20px 12px; }
dialog.sheet:is(.crew-sheet, .part-order-dlg, .tc-note-dlg) > form:first-child > .sheet-head:first-child { margin: -20px -20px 0; }   /* shop sheets added by the shop UI check */
/* The boat page's yard card: "Where it's been" is a small link beside the yard's name (it was a big button above the status it explains) */
.yo-head { flex-wrap: nowrap; align-items: center; } .yo-head .link { flex: none; }
/* Video call card in a chat (shared, timeline.js): its times / who-joined line was 4.47:1 in light mode at 80% opacity */
.tl-call .muted { opacity: 0.9; }
/* A finished / cancelled call request in a chat (shared, call-requests.js): faded to 70% its labels fell to 3.1:1; a dashed edge says "over" */
.tl-callreq.done, .tl-callreq.cancelled { opacity: 1; border-style: dashed; }
/* A picked segment ("As soon as possible" in Request Pro Help): the stronger accent for its words on the tinted fill (4.4:1 → 5:1+) */
.seg label:has(input:checked), .toggles label:has(input:checked) { color: var(--accent-strong); }
/* Help / Messages side list on a short screen (a phone turned sideways): its parts were squeezed onto each other ("All chats" under the
   allowance line); now nothing shrinks and the side list scrolls as one */
@media (max-height: 520px) and (min-width: 821px) {
  .help-side { overflow-y: auto; }
  .help-side > *, .help-side .side-mode > * { flex-shrink: 0; }
  .help-side > .side-mode { flex: none; min-height: 0; }
  .help-side .side-list { flex: none; min-height: 132px; overflow: visible; }
}
/* The chat panel on a computer starts under the tab bar too (it covered the bar's right end: More / Pro) */
@media (min-width: 900px) { dialog.fm-sheet { top: calc(var(--hdr-h, 64px) + var(--tabs-h, 0px) + 12px); } }
/* Edit tabs (shared, js/shop-nav.js): the sticky Reset · Save bar covers the sheet's bottom padding too, so list rows don't show under it */
dialog.edit-tabs .et-foot { bottom: -20px; margin: 12px -20px -20px; padding: 10px 20px 20px; }
/* "✓ Trip saved" tiles on a phone: a number stays on one line ("≈ 108.2" broke after the ≈) */
.trip-summary .tile-num { white-space: nowrap; font-size: clamp(0.95rem, 4vw, 1.15rem); }
/* Yard request / spring pick steps: Back · Next sat right on the last field */
#yo-dialog .step-btns { margin-top: 14px; }
/* Sign & approve: the white signature pad keeps its "Draw your signature" button readable in dark mode (light blue on white was 2.3:1) */
.est-sign-sheet .sig-preview button.secondary { background: var(--surface); }
/* Log book trip card: its link-actions ("Add to Service & repairs", "Ask First Mate") look like the button-actions beside them (no underline) */
.trip-actions a.link { text-decoration: none; }
/* Home: an invite row has no page to open for the rest, so its line ("As Technician · from Rick …") gets two lines before it's cut */
.dash2 .todo.invite .todo-text > span { -webkit-line-clamp: 2; }
/* Red "danger" buttons ("Remove from my boats", deletes): white on dark mode's pink error text was 1.8:1; one solid red in both schemes (5:1) */
button.danger { background: #d32f35; color: #fff; }
/* Maintenance engine chips: the overdue count's number in the surface colour like the due-soon one (white on dark mode's pink was 1.8:1) */
.maint-parts .dot.bad { color: var(--surface); }
/* ⋯ menus (My boats cards, the boat page): the keyboard focus shows as a ring, not only a faint background */
.menu button:focus-visible, .menu a:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
/* Boat page at a glance on tablets / computers: all five tiles in one row (at 150 px the fifth sat alone on a second row) */
@media (min-width: 701px) { .tab-panel[data-panel="overview"] .glance { grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); } }
/* Boat page "Engine hours" tile: one engine per line, never "405 / h" broken over two */
.glance-lines > span { white-space: nowrap; }
.hb-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-align: center; line-height: 1.2; overflow-wrap: anywhere; }