/* Fieldfolio App . mobile-first . concrete / steel / copper */
:root {
  --bg: #EDEAE4;
  --ink: #121417;
  --steel: #2A3036;
  --panel: #FFFFFF;
  --muted: #5A6168;
  --accent: #C47A2C;
  --line: #C8C4BB;
  --btn-on-ink: #ffffff;
  --ok: #2F6B3A;
  --warn: #B42318;
  --radius: 8px;
  --shadow: 0 4px 16px rgba(18, 20, 23, 0.08);
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --tap: 48px;
  --finish-h: 0px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--finish-h) + var(--safe-bottom) + 12px);
}
body.share-open { overflow: hidden; }

.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}
body.sample-modal-open { overflow: hidden; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
label { display: block; font-weight: 700; font-size: 0.92rem; margin: 0.65rem 0 0.3rem; }
.opt { font-weight: 500; color: var(--muted); font-size: 0.85em; }
.hint { color: var(--muted); font-size: 0.88rem; margin: 0.35rem 0 0.6rem; }
.hint-inline { color: var(--muted); font-weight: 500; }

.wrap { width: min(1100px, 100%); margin: 0 auto; padding: 0.75rem 0.85rem 1rem; }

/* Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.65rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 800; text-decoration: none; color: var(--ink);
  font-size: 1.1rem; letter-spacing: -0.02em; min-height: var(--tap);
}
.brand img { border-radius: 6px; }
.topbar-actions { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; justify-content: flex-end; }
/* topbar Sample + Menu */
.topbar-actions #btn-sample,
.topbar-actions #btn-menu { display: inline-flex; flex-shrink: 0; }
.save-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--panel); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 0.35rem 0.7rem; font-size: 0.78rem;
  font-weight: 650; color: var(--steel); max-width: 46vw;
}
.save-pill.is-warn { border-color: var(--warn); color: var(--warn); }
.save-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); flex-shrink: 0;
}
.save-pill.is-warn .save-dot { background: var(--warn); }
#save-pill-text { white-space: normal; overflow-wrap: break-word; line-height: 1.2; }

/* Auth banner */
.auth-banner {
  background: var(--panel); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 0.7rem 0.85rem;
  margin-bottom: 0.75rem; font-size: 0.9rem;
}
.auth-banner strong { margin-right: 0.25rem; }
.auth-banner-text { color: var(--muted); }

/* Auth form (Pro/Crew cloud) */
.auth-form-wrap .auth-form { margin-top: 0.65rem; display: grid; gap: 0.45rem; }
.auth-label { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--muted); }
.auth-label input {
  font: inherit; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: 0.55rem 0.7rem; min-height: 44px;
}
.auth-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; }
.auth-msg { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--muted); min-height: 1.2em; }
.auth-msg.is-err { color: var(--warn, #b45309); }
.auth-upgrade-link { color: var(--accent, #C47A2C); font-weight: 600; }
.auth-connected .btn { margin-left: 0.35rem; vertical-align: middle; }

/* Panels */
.panel {
  background: var(--panel); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 0.95rem 0.95rem 1.1rem;
  box-shadow: var(--shadow); margin-bottom: 0.85rem;
}
.profile-panel {
  padding: 1.15rem 1.1rem 1.25rem;
  border-color: #d4d0c6;
  background: #faf9f6;
  box-shadow: 0 2px 10px rgba(18, 20, 23, 0.05);
}
.profile-heading { margin: 0; font-size: 1.15rem; letter-spacing: -0.01em; }
.profile-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  min-height: 44px;
}
.profile-head .btn { flex-shrink: 0; min-height: 44px; }
.profile-save-hint {
  margin: 0.15rem 0 0.35rem !important;
  font-size: 0.8rem; color: var(--muted); line-height: 1.4;
}
.profile-panel .profile-summary { margin-top: 0.35rem; }
.profile-panel .profile-form { margin-top: 0.35rem; }
.profile-summary { display: block; min-height: 0; }
.profile-line { margin: 0; color: var(--muted); font-size: 0.92rem; }
.profile-form > label { margin-top: 0.85rem; margin-bottom: 0.28rem; font-size: 0.88rem; }
.profile-form > label:first-of-type { margin-top: 0.15rem; }
.profile-form input[type="text"],
.profile-form input[type="tel"],
.profile-form input[type="email"] {
  border: 1.5px solid #c4c0b6;
  border-radius: 10px;
  background: #fff;
  min-height: 44px;
}
.profile-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; align-items: center; }
.profile-actions .btn { min-height: 44px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
@media (max-width: 520px) { .row-2 { grid-template-columns: 1fr; } }

input[type="text"], input[type="tel"], input[type="email"],
input[type="search"], input[type="date"], input[type="datetime-local"],
textarea {
  width: 100%; min-height: var(--tap); padding: 0.65rem 0.75rem;
  border: 2px solid var(--ink); border-radius: var(--radius);
  background: #fff; appearance: none;
}
textarea { min-height: 88px; resize: vertical; }
input:focus, textarea:focus, button:focus-visible {
  outline: 3px solid rgba(196, 122, 44, 0.45); outline-offset: 1px;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.35rem; min-height: var(--tap); padding: 0.7rem 1rem;
  border-radius: var(--radius); border: 2px solid var(--ink);
  background: var(--ink); color: var(--btn-on-ink); font-weight: 750;
  cursor: pointer; text-decoration: none; letter-spacing: -0.01em;
}
.btn:hover { background: var(--steel); border-color: var(--steel); }
.btn-ghost { background: var(--panel); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-sm { min-height: 40px; padding: 0.4rem 0.7rem; font-size: 0.88rem; }
.btn-lg { min-height: 54px; font-size: min(1.05rem, 6.4vw); flex: 1; }
.btn-link {
  background: none; border: none; color: var(--accent); font-weight: 700;
  cursor: pointer; padding: 0.5rem 0; min-height: 44px;
}
.btn-share { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-share:hover { filter: brightness(0.95); }
.btn-finish { background: var(--ink); }
.btn.is-active, .btn-ghost.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.layout { display: grid; grid-template-columns: 1fr; gap: 0.85rem; }
@media (min-width: 920px) {
  .layout { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
  .preview-toggle { display: none !important; }
  .preview-col { display: block !important; position: sticky; top: 0.5rem; }
}
.preview-toggle { width: 100%; margin-top: 0.75rem; }
.preview-col { display: none; }
.preview-col.is-open { display: block; }
.preview-banner { display: flex; align-items: baseline; gap: 0.25rem; flex-wrap: wrap; }

.section-gap { margin-top: 1.15rem; }
.check-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; flex-wrap: wrap;
}
.check-head h2, .form-panel h2 { margin: 0; font-size: 1.12rem; }
.check-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* Chips */
.chip-fieldset { border: 0; padding: 0; margin: 0.5rem 0 0.75rem; }
.chip-fieldset legend { font-weight: 800; font-size: 0.95rem; padding: 0; margin-bottom: 0.35rem; }
.trade-filter-label { margin-top: 0; display: block; font-weight: 700; font-size: 0.92rem; }
.chip-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0; }
.chip {
  min-height: 44px; padding: 0.45rem 0.75rem; border-radius: 999px;
  border: 2px solid var(--ink); background: #fff; font-weight: 700;
  cursor: pointer; font-size: 0.9rem;
}
.chip-sm { min-height: 38px; font-size: 0.82rem; padding: 0.3rem 0.65rem; }
.chip.is-active, .chip:active {
  background: var(--ink); color: var(--btn-on-ink);
}

/* Photos */
.photo-proof-check {
  list-style: none; padding: 0; margin: 0 0 0.55rem;
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.proof-item {
  font-size: 0.82rem; font-weight: 700; padding: 0.25rem 0.55rem;
  border-radius: 999px; border: 1.5px solid var(--line); color: var(--muted);
}
.proof-item.is-done { background: #e7f2ea; border-color: var(--ok); color: var(--ok); }
.photo-grid { display: grid; gap: 0.55rem; }
.photo-grid-3 { grid-template-columns: repeat(3, 1fr); }
.photo-grid-docs { grid-template-columns: repeat(3, 1fr); }
.snap-wrap { position: relative; }
.snap-input {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.snap-target {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.15rem; min-height: 88px; border: 2px dashed var(--ink);
  border-radius: var(--radius); background: #f7f5f0; cursor: pointer;
  text-align: center; padding: 0.5rem; margin: 0;
}
.snap-target-sm { min-height: 64px; }
.snap-icon { font-size: 1.35rem; }
.snap-title { font-weight: 800; font-size: 0.92rem; }
.snap-sub { font-size: 0.75rem; color: var(--muted); }
.photo-slot {
  margin-top: 0.35rem; border: 1.5px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #f0eeea; min-height: 72px;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.photo-slot .ph { color: var(--muted); font-size: 0.8rem; font-weight: 650; }
.photo-slot img { width: 100%; height: 100px; object-fit: cover; display: none; }
.photo-slot.has-photo img, .photo-slot img.has-photo { display: block; }
.photo-slot.has-photo .ph { display: none; }

/* Checklist */
.check-list { list-style: none; padding: 0; margin: 0.35rem 0; }
.check-item { margin: 0.3rem 0; }
.check-toggle {
  width: 100%; display: flex; align-items: flex-start; gap: 0.65rem;
  text-align: left; min-height: var(--tap); padding: 0.65rem 0.7rem;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer; font-weight: 650;
}
.check-item.is-done .check-toggle {
  border-color: var(--ok); background: #f3faf5;
}
.check-box {
  width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 5px;
  flex-shrink: 0; margin-top: 1px; position: relative;
}
.check-item.is-done .check-box {
  background: var(--ok); border-color: var(--ok);
}
.check-item.is-done .check-box::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Phases */
.phase-progress {
  font-weight: 800; font-size: 1.05rem; color: var(--accent);
  min-width: 3ch; text-align: right;
}
.phase-mode-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0.55rem; }
.phase-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.phase-chip {
  min-height: 44px; padding: 0.45rem 0.7rem; border-radius: var(--radius);
  border: 2px solid var(--ink); background: #fff; font-weight: 700;
  font-size: 0.85rem; cursor: pointer; max-width: 100%;
}
.phase-chip.status-done { background: #e7f2ea; border-color: var(--ok); color: var(--ok); }
.phase-chip.status-na { background: #f0eeea; border-color: var(--line); color: var(--muted); text-decoration: line-through; }

/* Advanced / docs */
.more-advanced {
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: #faf9f6; padding: 0.25rem 0.75rem 0.75rem;
}
.more-advanced-summary {
  cursor: pointer; font-weight: 800; min-height: var(--tap);
  display: flex; align-items: center; list-style: none;
}
.more-advanced-summary::-webkit-details-marker { display: none; }
.docs-block {
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 0.2rem 0.7rem 0.7rem; margin: 0.55rem 0; background: #fff;
}
.docs-block > summary {
  cursor: pointer; font-weight: 750; min-height: 44px;
  display: flex; align-items: center;
}
.note-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.25rem 0 0.45rem; }
.chip-add-row { display: flex; gap: 0.4rem; align-items: center; }
.chip-add-row input { flex: 1; }
.tag-list { list-style: none; padding: 0; margin: 0.4rem 0 0.7rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag-item {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: #f0eeea; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 0.25rem 0.35rem 0.25rem 0.65rem; font-size: 0.85rem; font-weight: 650;
}
.tag-x {
  border: none; background: transparent; cursor: pointer;
  font-size: 1.1rem; line-height: 1; min-width: 32px; min-height: 32px;
  color: var(--muted);
}
.check-inline {
  display: flex; align-items: center; gap: 0.5rem; font-weight: 650;
  min-height: 44px; margin: 0.4rem 0;
}
.check-inline input { width: 24px; height: 24px; margin: 10px; flex-shrink: 0; } /* 2026-10-10: 44px tap area (24 + 2 x 10) inside the label */
.check-inline { min-width: 44px; margin-left: -10px; }
.sig-canvas {
  width: 100%; max-width: 560px; height: 140px; touch-action: none;
  border: 2px solid var(--ink); border-radius: var(--radius); background: #fff;
  display: block;
}
.crew-invite-row { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: 0.4rem 0; }

.section-share-row { margin: 0.25rem 0 0.4rem; }

/* Notes / time */
.time-details { margin-top: 0.75rem; }
.time-details summary { cursor: pointer; font-weight: 700; min-height: 40px; display: flex; align-items: center; }

/* Folio preview */
#folio {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 1rem; box-shadow: var(--shadow);
}
.folio-head {
  display: flex; justify-content: space-between; gap: 1rem;
  border-bottom: 2px solid var(--line); padding-bottom: 0.75rem; margin-bottom: 0.85rem;
}
.folio-brand { font-weight: 800; letter-spacing: -0.02em; }
.folio-biz { text-align: right; font-size: 0.92rem; }
.folio-muted { color: var(--muted); font-size: 0.85rem; }
.folio-title { font-size: 1.35rem; margin: 0.15rem 0; letter-spacing: -0.02em; }
.folio-meta { color: var(--muted); margin: 0 0 0.85rem; }
.folio-photos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.55rem; margin: 0.75rem 0;
}
.folio-photos figure { margin: 0; }
.folio-photos img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 6px;
}
.folio-photos figcaption { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }
#folio h2 { font-size: 1.02rem; margin: 0.95rem 0 0.35rem; }
.folio-checks { list-style: none; padding: 0; margin: 0; }
.folio-checks li { padding: 0.15rem 0; }
.folio-checks li.done { color: var(--ok); }
.folio-phases { margin: 0; padding-left: 1.1rem; }
.folio-phases small { color: var(--muted); }
.folio-dl {
  display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.7rem; margin: 0;
}
.folio-dl dt { font-weight: 700; color: var(--muted); }
.folio-dl dd { margin: 0; }
.folio-sig { max-width: 260px; border: 1px solid var(--line); background: #fff; }
.folio-notes { white-space: pre-wrap; }
.folio-foot {
  margin-top: 1.15rem; font-size: 0.72rem; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 0.45rem;
}

/* Job action row: Save job, New job, Share proof. One compact row at the top of the job page (Oct 3).
   Same palette as the rest of the site: charcoal (ink) button, outlined button, copper (accent) Share. */
.finish-bar {
  position: static; display: flex; flex-wrap: nowrap; gap: 0.4rem; align-items: stretch;
  width: 100%; margin: 0 0 0.6rem; padding: 0; background: none; border: 0; backdrop-filter: none;
}
.finish-bar-primary, .finish-bar-secondary { display: contents; }
.finish-bar .btn {
  flex: 1 1 0; min-width: 0; min-height: 42px; padding: 0.3rem 0.4rem; font-size: 0.9rem; line-height: 1.15;
  white-space: nowrap; border-radius: var(--radius);
}
.finish-bar #btn-save-job { order: 1; }
.finish-bar #btn-new-job { order: 2; }
.finish-bar .finish-bar-primary .btn, .finish-bar #btn-share { order: 3; }
.finish-bar-hidden { display: none !important; }


/* Sample modal . folio preview mock */
.sample-modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-end; justify-content: center;
}
.sample-modal[hidden] { display: none !important; }
.sample-modal-backdrop {
  position: absolute; inset: 0; background: rgba(18, 20, 23, 0.5);
}
.sample-modal-panel {
  position: relative; width: min(440px, 100%);
  max-height: min(92vh, 780px); overflow: auto;
  background: var(--panel); border-radius: 16px 16px 0 0;
  padding: 1rem 1rem calc(1rem + var(--safe-bottom));
  box-shadow: 0 -8px 32px rgba(0,0,0,0.2);
}
@media (min-width: 640px) {
  .sample-modal { align-items: center; }
  .sample-modal-panel {
    border-radius: 16px; max-height: min(88vh, 760px);
  }
}
.sample-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.sample-modal-head h2 { margin: 0; font-size: 1.15rem; }
.sample-modal-lead { margin: 0.45rem 0 0.75rem; }
.sample-phone-frame {
  margin: 0 auto 0.9rem; width: min(280px, 100%);
  background: #1a1d21; border-radius: 28px; padding: 12px 10px 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.28); border: 2px solid #2e3338;
}
.sample-phone-notch {
  width: 88px; height: 8px; border-radius: 999px; background: #0d0f11;
  margin: 0 auto 10px;
}
.sample-folio-mock {
  background: #fff; border-radius: 12px; padding: 0.75rem 0.7rem 0.85rem;
  color: var(--ink); font-size: 0.82rem;
}
.sample-folio-head {
  display: flex; justify-content: space-between; gap: 0.5rem;
  border-bottom: 1.5px solid var(--line); padding-bottom: 0.5rem; margin-bottom: 0.55rem;
}
.sample-folio-brand { font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em; }
.sample-folio-biz { text-align: right; font-size: 0.72rem; line-height: 1.25; }
.sample-folio-muted { color: var(--muted); font-size: 0.68rem; }
.sample-folio-title { margin: 0; font-size: 1.05rem; letter-spacing: -0.02em; }
.sample-folio-meta { margin: 0.15rem 0 0.55rem; color: var(--muted); font-size: 0.75rem; }
.sample-folio-photos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 0.55rem;
}
.sample-folio-photos figure { margin: 0; }
.sample-folio-photos figcaption {
  font-size: 0.68rem; color: var(--muted); margin-top: 0.15rem; font-weight: 650;
}
.sample-photo {
  height: 72px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.72rem; color: var(--btn-on-ink); letter-spacing: 0.02em;
}
.sample-photo-img {
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 6px; display: block; background: #4a5056;
}
.sample-photo-before { background: linear-gradient(145deg, #6a7178, #4a5056); }
.sample-photo-after { background: linear-gradient(145deg, #3d8a4c, #2F6B3A); }
.sample-folio-h { margin: 0.35rem 0 0.25rem; font-size: 0.82rem; }
.sample-folio-checks { list-style: none; padding: 0; margin: 0 0 0.65rem; }
.sample-folio-checks > div { padding: 0.12rem 0; font-size: 0.78rem; }
.sample-folio-checks > div.done { color: var(--ok); font-weight: 650; }
.sample-folio-cta {
  width: 100%; min-height: 40px; font-size: 0.88rem; pointer-events: none;
}
.sample-modal-actions {
  display: flex; flex-direction: column; gap: 0.45rem;
}
.sample-modal-actions .btn { width: 100%; min-height: 48px; }

/* Share sheet */
.share-sheet {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-end; justify-content: center;
}
.share-sheet[hidden] { display: none !important; }
.share-sheet-backdrop {
  position: absolute; inset: 0; background: rgba(18, 20, 23, 0.45);
}
.share-sheet-panel {
  position: relative; width: min(520px, 100%);
  max-height: min(88vh, 720px); overflow: auto;
  background: var(--panel); border-radius: 16px 16px 0 0;
  padding: 1rem 1rem calc(1rem + var(--safe-bottom));
  box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
}
.share-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.share-sheet-head h2 { margin: 0; font-size: 1.15rem; }
.share-limits { color: var(--muted); font-size: 0.88rem; }
.share-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin: 0.75rem 0;
}
.share-grid .btn { width: 100%; font-size: 0.9rem; min-height: 48px; }
.share-compat { padding-left: 1.1rem; margin: 0.5rem 0 0; }
.share-compat code { font-size: 0.8em; }

@media (max-width: 420px) {
  .photo-grid-3 { grid-template-columns: 1fr; }
  .share-grid { grid-template-columns: 1fr; }
  .save-pill:not(.is-warn) { display: none; } /* 2026-10-10 F1: a save error still shows on phones */
}


/* App nav menu */
.app-menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-start; justify-content: flex-end;
}
.app-menu[hidden] { display: none !important; }
.app-menu-backdrop {
  position: absolute; inset: 0; background: rgba(18, 20, 23, 0.4);
}
.app-menu-panel {
  position: relative;
  width: min(320px, calc(100% - 1rem));
  margin: 0.5rem;
  margin-top: calc(0.5rem + env(safe-area-inset-top, 0px));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.85rem 0.85rem 1rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  max-height: min(90vh, 640px);
  overflow: auto;
}
.app-menu-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.app-menu-head h2 { margin: 0; font-size: 1.1rem; }
.app-menu-nav {
  display: flex; flex-direction: column; gap: 0.25rem;
}
.app-menu-nav a:not(.btn) {
  display: flex; align-items: center;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
}
.app-menu-nav a:not(.btn):hover,
.app-menu-nav a:not(.btn):focus-visible {
  background: var(--bg);
  outline: none;
}
.app-menu-nav a[aria-current="page"] {
  background: var(--bg);
  box-shadow: inset 3px 0 0 var(--accent, #C47A2C);
}
.app-menu-cta {
  margin-top: 0.55rem;
  width: 100%;
  text-align: center;
  justify-content: center;
}
@media (max-width: 420px) {
  .app-menu {
    align-items: flex-end; justify-content: center;
  }
  .app-menu-panel {
    width: 100%;
    margin: 0;
    border-radius: 16px 16px 0 0;
    max-height: min(88vh, 720px);
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Print */
@media print {
  body { background: #fff; padding: 0; }
  .no-print, .finish-bar, .share-sheet, .app-menu, .sample-modal, .topbar, .auth-banner,
  .profile-panel, .form-panel, .preview-banner { display: none !important; }
  .preview-col, #preview-col { display: block !important; position: static !important; }
  .layout { display: block; }
  #folio {
    border: none; box-shadow: none; padding: 0;
  }
  .folio-photos img { height: auto; max-height: 220px; }
}

/* Install / A2HS affordance - quiet, dismissible */
.install-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  margin: 0 0 0.75rem;
  box-shadow: var(--shadow);
}
.install-banner[hidden] { display: none !important; }
.install-banner-text {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--steel);
}
.install-banner-actions {
  display: inline-flex;
  gap: 0.4rem;
  flex-shrink: 0;
}


/* Synced light/dark with marketing site (ff-theme) */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] {
  --bg: #121417;
  --ink: #F2EFE8;
  --steel: #C5CBD1;
  --panel: #1C2128;
  --muted: #9AA3AB;
  --accent: #D4893A;
  --line: #3A424A;
  --btn-on-ink: #121417;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  --ok: #3D8F4A;
  --warn: #E24B3B;
}
.theme-toggle .theme-icon { font-size: 1rem; line-height: 1; }


/* Desktop: Sign up / Sign in as the page - not stacked on Create profile */
body.ff-auth-gate .profile-panel,
body.ff-auth-gate .layout {
  display: none !important;
}
body.ff-auth-gate #auth-root .auth-banner,
body.ff-auth-gate #auth-root .auth-form-wrap {
  max-width: 28rem;
  margin: 1.5rem auto;
  padding: 1.25rem 1.35rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
body.ff-auth-gate #auth-root .auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ===== Desktop tab: save, job types, phases, unsaved warning, crew roles ===== */
.btn-save { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 700; }
.btn-save:hover { filter: brightness(0.95); }
.btn-save.is-saved { background: var(--panel); color: var(--ok); border-color: var(--ok); }
.btn-save.is-flash { background: var(--ok); color: #fff; }
.btn-danger-text { color: var(--warn); }

#job-type-filter { width: 100%; margin: 0.25rem 0 0.5rem; }
.job-type-groups { display: flex; flex-direction: column; gap: 0.55rem; }
.job-group-title {
  font-size: 0.74rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.3rem;
}
.chip-other { border-style: dashed; }
.job-type-other { margin-top: 0.55rem; }
.job-type-other label { display: block; font-weight: 650; margin-bottom: 0.25rem; }

.phase-summary { margin: 0.35rem 0 0.4rem; }
.phase-bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.phase-bar-fill { display: block; height: 100%; width: 0; background: var(--ok); transition: width 0.2s var(--ff-ease); }
.phase-summary-text { margin: 0.35rem 0 0; font-size: 0.92rem; }
.phase-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.phase-card {
  border: 1.5px solid var(--line); border-radius: var(--radius, 12px);
  background: var(--panel); padding: 0.6rem 0.7rem;
}
.phase-card.status-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.phase-card.status-done { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--panel)); }
.phase-card.status-na { opacity: 0.7; }
.phase-card.status-na .phase-title span:first-child { text-decoration: line-through; }
.phase-top { display: flex; gap: 0.6rem; align-items: flex-start; }
.phase-num {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; border: 2px solid var(--line); color: var(--muted);
}
.status-active .phase-num { border-color: var(--accent); color: var(--accent); }
.status-done .phase-num { border-color: var(--ok); background: var(--ok); color: #fff; }
.phase-body { flex: 1; min-width: 0; }
.phase-title { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-weight: 700; }
.phase-pill {
  font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.status-active .phase-pill { border-color: var(--accent); color: var(--accent); }
.status-done .phase-pill { border-color: var(--ok); color: var(--ok); }
.phase-help { margin: 0.15rem 0 0; font-size: 0.86rem; color: var(--muted); }
.phase-times { margin: 0.2rem 0 0; font-size: 1rem; color: var(--ink); } /* 2026-10-10 F6: 16px */
.phase-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0.4rem 2.5rem; }
.phase-actions .btn { min-height: 38px; min-width: 64px; }
.phase-done-btn { background: var(--ok); border-color: var(--ok); color: #fff; }
.phase-note { box-sizing: border-box; display: block; width: calc(100% - 2.5rem); max-width: calc(100% - 2.5rem); margin-left: 2.5rem; font-size: 0.86rem; }
@media (max-width: 480px) {
  .phase-actions { margin-left: 0; }
  .phase-note { width: 100%; max-width: 100%; margin-left: 0; }
}

.unsaved-modal {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.unsaved-modal[hidden] { display: none !important; }
.unsaved-backdrop { position: absolute; inset: 0; background: rgba(18, 20, 23, 0.55); }
.unsaved-panel {
  position: relative; width: min(420px, 100%); background: var(--panel); color: var(--ink);
  border-radius: 16px; padding: 1.1rem; box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  border-top: 5px solid var(--warn);
}
.unsaved-panel h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.unsaved-panel p { margin: 0 0 0.9rem; }
.unsaved-actions { display: flex; flex-direction: column; gap: 0.45rem; }
.unsaved-actions .btn { width: 100%; min-height: 44px; }
body.modal-open { overflow: hidden; }

.crew-owner { border: 1.5px solid var(--accent); border-radius: var(--radius, 12px); padding: 0.55rem 0.7rem; margin: 0.5rem 0; }
.crew-role-pill {
  font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink); white-space: nowrap;
}
.crew-role-owner { background: var(--accent); border-color: var(--accent); color: #fff; }
.crew-add { border: 1px dashed var(--line); border-radius: var(--radius, 12px); padding: 0.6rem 0.7rem; margin: 0.5rem 0; }
.crew-add-grid, .crew-member-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.45rem; }
.crew-add-grid label, .crew-member-edit label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; font-weight: 650; }
.crew-list { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.crew-member { border: 1px solid var(--line); border-radius: var(--radius, 12px); padding: 0.55rem 0.7rem; background: var(--panel); }
.crew-member-top { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.35rem; }
.crew-contact { font-size: 0.8rem; color: var(--muted); }
.crew-can { margin: 0.35rem 0; }
.crew-member-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.crew-code { font-size: 0.8rem; color: var(--muted); margin-right: auto; }
@media print { .unsaved-modal, .crew-roles-wrap { display: none !important; } }

/* custom phases */
.phase-tools { display: inline-flex; gap: 0.35rem; margin-left: auto; }
.phase-actions .phase-tool { min-width: 2.4rem; }
.phase-tool:disabled { opacity: 0.35; cursor: default; }
.phase-remove { color: #b3261e; }
.phase-pill-custom { background: color-mix(in srgb, var(--accent, #c47a2c) 16%, transparent); border-color: color-mix(in srgb, var(--accent, #c47a2c) 45%, transparent); }
.phase-add { margin-top: 0.75rem; padding: 0.75rem; border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: 12px; }
.phase-add-title { margin: 0 0 0.5rem; }
.phase-add-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.phase-add-row input { flex: 1 1 12rem; min-width: 0; box-sizing: border-box; }
.phase-remove:hover, .phase-remove:focus-visible { color: #fff; background: #b3261e; border-color: #b3261e; }

/* Sign-in page: no install prompt, no bottom action bar until signed in */
body.ff-auth-gate .finish-bar,
body.ff-auth-gate #install-banner,
body.ff-auth-gate .install-banner {
  display: none !important;
}

/* Legal footer centered at the bottom */
.app-legal-footer {
  text-align: center;
  width: 100%;
  margin: 1.5rem auto 0;
  padding: 0.75rem 1rem calc(6rem + var(--safe-bottom, 0px));
  font-size: 0.85rem;
}
body.ff-auth-gate .app-legal-footer { padding-bottom: 1.5rem; }

/* ===== 2026-09-30 finish, upsell ===== */
.ff-finish-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; align-items: center; }
.ff-done-pill { display: inline-block; padding: 0.3rem 0.7rem; border: 1.5px solid var(--ok); color: var(--ok); border-radius: 999px; font-weight: 750; font-size: 0.85rem; }
.ff-brand { display: grid; gap: 0.5rem; margin: 0.5rem 0; }
.ff-brand label { font-weight: 650; font-size: 0.9rem; }
.ff-logo-prev { max-height: 48px; max-width: 160px; object-fit: contain; border: 1px solid var(--line); background: #fff; padding: 2px; border-radius: 4px; }
.ff-lock { border-left: 3px solid var(--accent); padding-left: 0.6rem; }
.ff-upsell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0 0 0.85rem; padding: 0.75rem 0.9rem; background: var(--panel); border: 1.5px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.ff-upsell-text { margin: 0; font-size: 0.92rem; }
.ff-upsell-actions { display: flex; gap: 0.4rem; }
.ff-stub-note { border-left: 3px solid var(--accent); padding-left: 0.6rem; }
@media print { .ff-finish, .ff-upsell { display: none !important; } }

/* ===== 2026-09-30 light/dark QA fixes (colors only, no wording) ===== */
/* Text on copper and on green needs dark ink to reach AA. */
.btn-share, .crew-role-owner { color: #121417; }
html[data-theme="dark"] {
  --ok: #55B064;
  --warn: #F0705F;
  --field: #232A32;
  --field-2: #1A2027;
  --soft: #20262D;
  --done-bg: #1D2E22;
}
html[data-theme="dark"] .btn-save,
html[data-theme="dark"] .btn-save.is-flash,
html[data-theme="dark"] .phase-done-btn,
html[data-theme="dark"] .status-done .phase-num { color: #121417; }
/* 2026-10-10 QA r1240 F1: saved state is green text on the panel, not dark ink on dark grey (was 1.14:1, now about 6:1). */
html[data-theme="dark"] .btn-save.is-saved:not(.is-flash) { color: var(--ok); background: var(--panel); border-color: var(--ok); }
html[data-theme="dark"] .auth-label input,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .profile-form input[type="text"],
html[data-theme="dark"] .profile-form input[type="tel"],
html[data-theme="dark"] .profile-form input[type="email"] { background: var(--field); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--muted); opacity: 1; }
html[data-theme="dark"] .profile-panel { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
html[data-theme="dark"] .chip,
html[data-theme="dark"] .phase-chip,
html[data-theme="dark"] .plan-tab,
html[data-theme="dark"] .check-toggle,
html[data-theme="dark"] .docs-block { background: var(--field); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .chip.is-active,
html[data-theme="dark"] .chip:active,
html[data-theme="dark"] .plan-tab.is-active { background: var(--ink); color: var(--btn-on-ink); }
html[data-theme="dark"] .more-advanced,
html[data-theme="dark"] .snap-target { background: var(--soft); }
html[data-theme="dark"] .photo-slot,
html[data-theme="dark"] .tag-item,
html[data-theme="dark"] .phase-chip.status-na { background: var(--field-2); }
html[data-theme="dark"] .proof-item.is-done,
html[data-theme="dark"] .phase-chip.status-done,
html[data-theme="dark"] .check-item.is-done .check-toggle { background: var(--done-bg); }
html[data-theme="dark"] .plan-canvas-wrap { background: var(--field-2); }
html[data-theme="dark"] .phase-remove { color: var(--warn); }
/* Signature pad, plan sheets and the folio preview are paper: keep them light, with dark text. */
html[data-theme="dark"] .sig-canvas { background: #fff; }
html[data-theme="dark"] #folio { background: #fff; color: #121417; border-color: var(--line); }
html[data-theme="dark"] #folio .folio-muted,
html[data-theme="dark"] #folio .folio-meta,
html[data-theme="dark"] #folio .folio-phases small,
html[data-theme="dark"] #folio .folio-foot,
html[data-theme="dark"] #folio .folio-dl dt,
html[data-theme="dark"] #folio figcaption { color: #5A6168; }
html[data-theme="dark"] #folio .folio-checks li.done { color: #2F6B3A; }
html[data-theme="dark"] #folio h1,
html[data-theme="dark"] #folio h2 { color: #121417; }
/* Visible focus rings in both modes */
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
html[data-theme="dark"] .ff-logo-prev { background: #fff; }
/* Copper used as TEXT on light surfaces is too pale (3.4 to 1). Use a deeper copper for text only. */
:root { --accent-text: #9A5A17; }
html[data-theme="dark"] { --accent-text: #D4893A; }
.auth-upgrade-link, .btn-link, .status-active .phase-num, .status-active .phase-pill { color: var(--accent-text); }
.sample-folio-mock { color: #121417; }
html[data-theme="dark"] .sample-folio-mock .sample-folio-muted { color: #5A6168; }
html[data-theme="dark"] .sample-folio-checks > div.done { color: #2F6B3A; }
html[data-theme="dark"] .sample-folio-meta, html[data-theme="dark"] .sample-folio-photos figcaption { color: #5A6168; }

/* ===== account pages, trade packs, store-app mode ===== */
.acct-panel h1 { margin: 0 0 0.4rem; font-size: min(1.35rem, 7.4vw); letter-spacing: -0.02em; }
.acct-panel .auth-form { max-width: 34rem; }
.acct-panel select, .acct-panel input[type="text"] {
  font: inherit; color: var(--ink); background: var(--panel);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 0.55rem 0.7rem; min-height: 44px; width: 100%;
}
.page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0; }
.ff-link-out a { }
.pack-view { margin-top: 1rem; }
.pack-title { font-size: 1.25rem; margin: 0 0 0.2rem; }
.pack-sub { color: var(--muted); margin: 0 0 1rem; }
.pack-group { margin: 1.4rem 0 0.6rem; font-size: 1.05rem; }
.pack-sheet { border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 0.8rem 1rem; margin: 0 0 0.85rem; break-inside: avoid; }
.pack-sheet h3, .pack-sheet h4 { margin: 0 0 0.3rem; font-size: 1rem; }
.pack-checks { list-style: none; padding: 0; margin: 0.3rem 0; }
.pack-checks li { padding: 0.25rem 0; }
.pack-box { display: inline-block; width: 0.95rem; height: 0.95rem; border: 1.5px solid var(--ink); border-radius: 3px; margin-right: 0.55rem; vertical-align: -0.15rem; }
.pack-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 0.75rem; margin-top: 0.7rem; font-size: 0.8rem; color: var(--muted); }
.pack-fields span { border-top: 1px solid var(--ink); padding-top: 0.2rem; min-height: 1.6rem; }
@media print {
  body:has(.pack-view) .topbar, body:has(.pack-view) .acct-panel > :not(.pack-view) { display: none !important; }
  body:has(.pack-view) .acct-panel { border: 0; box-shadow: none; padding: 0; }
  .pack-sheet { border-color: #C8C4BB; background: #fff; color: #121417; }
  .pack-box, .pack-fields span { border-color: #121417; }
  .pack-sub, .pack-fields { color: #5A6168; }
}
/* Store apps (iPhone and Android wrappers): no buy buttons, prices or upgrade links. See native.js. */
html.ff-native:not(.ff-iap) [data-ff-buy], html.ff-native:not(.ff-iap) [data-ff-buy] + .ff-buy-sep { display: none !important; }

/* Final changes: New job and My jobs only show once someone is signed in */
html:not(.ff-has-session) body:not(.ff-signed-in) #btn-new-job, html:not(.ff-has-session) body:not(.ff-signed-in) .app-menu-cta, html:not(.ff-has-session) body:not(.ff-signed-in) .jobs-head .btn, html:not(.ff-has-session) body:not(.ff-signed-in) .save-pill, html:not(.ff-has-session) body:not(.ff-signed-in) .jobs-new { display: none !important; }

/* Same hover rings as the site. Black gets a logo colored ring, white gets a black ring. */
:root { --hl: #D87F28; }
/* --hl is the exact accent from the FIELDFOLIO logo files (#D87F28). Same value in light and dark. */
html[data-theme="dark"] { --hl: #D87F28; }
/* Motion tokens, same values as the site. */
:root { --ff-ease: cubic-bezier(0.2, 0, 0, 1); --ff-dur: 0.2s; --ff-lift: 0px;
  --glow-box: 0 6px 18px rgba(18, 20, 23, 0.12), 0 0 0 1px rgba(18, 20, 23, 0.12);
  --glow-or: 0 6px 18px rgba(216, 127, 40, 0.22), 0 0 0 1px rgba(216, 127, 40, 0.34); }
html[data-theme="dark"] { --glow-box: 0 6px 18px rgba(216, 127, 40, 0.20), 0 0 0 1px rgba(216, 127, 40, 0.30); }
.btn, .btn-ghost { transition: box-shadow var(--ff-dur) var(--ff-ease), transform var(--ff-dur) var(--ff-ease), border-color var(--ff-dur) var(--ff-ease), background var(--ff-dur) var(--ff-ease); }
.btn:active { transform: translateY(0.5px); }
@media (hover: hover) {
  .btn-ghost:hover { box-shadow: var(--glow-box); }
  .btn:not(.btn-ghost):not(.btn-share):hover { box-shadow: var(--glow-or); }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:active { transform: none; }
}

/* ===== 2026-09-30 sample before sign in (read only) + delete account dialog ===== */
.sample-gate-note { display: none; }
body.ff-auth-gate .sample-gate-note { display: block; color: var(--ink); }
body.ff-auth-gate .sample-modal-lead:not(.sample-gate-note) { display: none; }
body.ff-auth-gate #btn-sample-use { display: none !important; }
.ff-del-modal { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ff-del-backdrop { position: absolute; inset: 0; background: rgba(18, 20, 23, 0.6); }
.ff-del-panel {
  position: relative; width: min(440px, 100%); max-height: 92vh; overflow: auto;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-top: 5px solid var(--warn); border-radius: 16px; padding: 1.1rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.ff-del-panel h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.ff-del-panel p { margin: 0 0 0.6rem; }
.ff-del-panel ul { margin: 0 0 0.7rem; padding-left: 1.2rem; }
.ff-del-panel li { margin: 0.15rem 0; }
.ff-del-label { font-weight: 700; margin: 0.4rem 0 0.25rem; display: block; }
.ff-del-panel input { width: 100%; min-height: 44px; }
.ff-del-panel .hint, .ff-del-panel .hint a { color: var(--ink); }
.ff-del-actions { display: flex; gap: 0.5rem; margin: 0.6rem 0; }
.ff-del-actions .btn { flex: 1; min-height: 44px; }
.ff-del-go:disabled { opacity: 0.55; cursor: not-allowed; }
.ff-del-done { max-width: 28rem; margin: 1rem auto 0; padding: 0.8rem 1rem; border: 2px solid var(--ok); border-radius: 12px; background: var(--panel); color: var(--ink); }
@media print { .ff-del-modal { display: none !important; } }

/* 2026-09-30k Menu button: label centered both ways */
.topbar-actions #btn-menu {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  line-height: 1; padding-top: 0; padding-bottom: 0; text-align: center; box-sizing: border-box;
}
.topbar-actions #btn-menu { padding-top: 2px; padding-bottom: 0; padding-left: 0.7rem; padding-right: calc(0.7rem + 0.67px); }

/* 2026-09-30 CSP: utility classes that replace inline style attributes (no visual change) */
.u-1386d5{margin:0 !important}
.u-48a4e4{background:#B42318 !important}
.u-722a5d{background:#C47A2C !important}
.u-746882{background:#2F6B3A !important}
.u-cde4b8{background:#121417 !important}
.u-ecf57f{margin-bottom:0.35rem !important}
.u-fad213{background:#1B6CA8 !important}

/* jobs page */
  body { padding-bottom: 2rem; }
  .jobs-panel { margin-top: 0.5rem; }
  .jobs-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
  .jobs-head h1 { margin: 0; font-size: min(1.35rem, 7.4vw); letter-spacing: -0.02em; }
  .jobs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
  .job-row {
    background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius);
    padding: 0.85rem 0.95rem; display: grid; gap: 0.35rem;
    box-shadow: var(--shadow);
  }
  .job-row.is-current { border-color: var(--ink); }
  .job-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
  .job-title { margin: 0; font-size: 1.05rem; font-weight: 800; }
  .job-meta { margin: 0; color: var(--muted); font-size: 0.88rem; }
  .job-badge {
    display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
    background: var(--ink); color: var(--btn-on-ink); border-radius: 999px; padding: 0.15rem 0.55rem;
  }
  .job-badge.cloud { background: var(--steel); }
  .jobs-empty {
    background: var(--panel); border: 1.5px dashed var(--line); border-radius: var(--radius);
    padding: 1.4rem 1rem; text-align: center;
  }
  .jobs-empty p { margin: 0 0 0.85rem; color: var(--muted); }

/* CSP: classes that replace inline style attributes and cssText (no visual change) */
.ff-legal-overlay{position:fixed;inset:0;z-index:9999;background:rgba(18,20,23,.55);display:flex;align-items:flex-end;justify-content:center;padding:1rem}
.ff-legal-card{background:#fff;color:#121417;max-width:28rem;width:100%;border-radius:12px;padding:1.1rem 1.15rem 1.2rem;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.ff-legal-h{margin:0 0 .5rem;font-size:1.05rem}
.ff-legal-p{margin:0 0 .75rem;font-size:.9rem;line-height:1.4}
.ff-legal-a{color:#121417;font-weight:700}
#ff-legal-ack-btn{width:100%}
.ff-auth-legal-row{display:flex;gap:.5rem;align-items:flex-start;font-size:.85rem;line-height:1.35}
.ff-auth-agree{margin-top:.2rem}
.ff-share-legal-note{font-size:.8rem;margin:.5rem 1rem 0;color:var(--muted)}
.ff-pay-h{margin-top:1rem}
.ff-print-frame{position:fixed;right:0;bottom:0;width:0;height:0;border:0;visibility:hidden}

/* ===== Account recovery (forgot password, forgot email, new password) ===== */
.auth-help-row { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin: -0.1rem 0 0.1rem; }
.auth-help-link {
  background: none; border: none; padding: 0.55rem 0; min-height: 44px;
  font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px;
}
.auth-help-link:hover { color: var(--ink); }
.auth-help-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.auth-panel {
  display: grid; gap: 0.45rem; padding: 0.7rem 0.8rem;
  background: var(--soft, var(--bg)); border: 1.5px solid var(--line); border-radius: 10px;
}
.auth-panel[hidden] { display: none !important; }
.auth-hint { margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--muted); }
.auth-hint a { color: var(--accent-text); font-weight: 600; }
.auth-panel .auth-label input { background: var(--panel); }
html[data-theme="dark"] .auth-panel .auth-label input { background: var(--field, #232A32); }
@media (min-width: 900px) {
  body.ff-auth-gate #auth-root .auth-help-row { justify-content: space-between; }
  body.ff-auth-gate #auth-root .auth-help-link { font-size: 0.92rem; }
  body.ff-auth-gate #auth-root .auth-panel { padding: 0.9rem 1rem; }
}

/* Underlines never cut through descenders (g, y, p, j, q) */
a:not(.btn):not(.logo):not(.app-logo), .auth-help-link, .hint a, .note a, .auth-msg a {
  text-decoration-skip-ink: auto; text-underline-offset: 0.2em; text-decoration-thickness: 1px;
}
.auth-help-link { line-height: 1.5; overflow: visible; height: auto; text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-skip-ink: auto; }

/* 2026-09-30m app header uses the exact site header (same markup and metrics) */
:root { --nav-bg: rgba(237, 234, 228, 0.96); }
html[data-theme="dark"] { --nav-bg: rgba(18, 20, 23, 0.96); }
.container { width: min(1080px, 92%); margin: 0 auto; }
.nav { position: sticky; top: 0; z-index: 40; background: var(--nav-bg); border-bottom: 2px solid var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; gap: 0.5rem; }
.logo { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; color: var(--ink); font-size: 1.15rem; text-decoration: none; letter-spacing: -0.02em; line-height: 1.5; }
.logo:hover { text-decoration: none; color: var(--ink); }
.logo-mark { width: 32px; height: 32px; flex-shrink: 0; border-radius: 6px; }
.nav-inner .theme-toggle { margin-left: auto; }
.nav-inner .nav-toggle { margin-left: 0.35rem; }
.nav-inner .logo { margin-right: 0; }
.save-row { display: flex; justify-content: flex-end; margin: 0 0 0.5rem; }

/* 2026-09-30m header controls: one soft style, no black border, no black hover fill.
   Hover is only the same soft glow every other button has. */
.nav-toggle, .theme-toggle, .nav-inner .nav-toggle {
  display: inline-flex !important; align-items: center; justify-content: center;
  box-sizing: border-box; height: 44px; min-height: 44px; min-width: 44px;
  padding: 2px 0.95rem 0; gap: 0.35rem; margin: 0;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink);
  font-family: inherit; font-size: 0.9rem; font-weight: 700; line-height: 1;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.theme-toggle { padding: 0 0.7rem; }
.nav-toggle { min-width: 66px; }
.nav-toggle:hover, .theme-toggle:hover, .nav-toggle:focus-visible, .theme-toggle:focus-visible {
  background: var(--panel); color: var(--ink); border-color: var(--line);
  box-shadow: var(--glow-box); text-decoration: none; transform: none;
}
.nav-toggle:focus-visible, .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle .theme-icon { font-size: 1rem; line-height: 1; }
.theme-toggle .theme-label { font-size: 0.9rem; letter-spacing: 0; }
@media (max-width: 720px) { .theme-toggle .theme-label { display: none; } .theme-toggle { min-width: 44px; width: 44px; padding: 0; } }

/* 2026-09-30m narrow phones: Sample / Desktop sit beside Menu without squeezing it */
.nav-inner .nav-toggle, .nav-inner .theme-toggle, .nav-inner .logo { flex-shrink: 0; }
@media (max-width: 420px) {
  .nav-inner { gap: 0.25rem; }
  .nav-inner .nav-toggle:not(#btn-menu) { padding-left: 0.4rem; padding-right: 0.4rem; min-width: 44px; }
}
@media (max-width: 420px) { .nav-inner { gap: 0.15rem; } .nav-inner .nav-toggle { margin-left: 0; } }

/* 2026-10-01 theme toggle: icon only. Sun shows in dark mode (switch to light), moon shows in light mode (switch to dark). */
.theme-toggle, .nav-inner .theme-toggle { width: 44px; min-width: 44px; padding: 0; gap: 0; }
.theme-toggle .theme-svg { display: block; width: 20px; height: 20px; flex: none; }
.theme-toggle .theme-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-moon { display: none; }

/* 2026-10-01 sample file preview is tappable */
.sample-folio-checks > div[role="checkbox"] { cursor: pointer; padding: 0.3rem 0; min-height: 28px; box-sizing: border-box; color: #5A6168; font-weight: 500; }
.sample-folio-checks > div[role="checkbox"].done { color: var(--ok); font-weight: 650; }
.sample-folio-checks > div[role="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sample-folio-count { margin: 0 0 0.5rem; font-size: 0.75rem; color: #5A6168; min-height: 1em; }
.sample-folio-cta { cursor: pointer; }
.sample-folio-cta { pointer-events: auto; }

/* Multi-photo thumbnails */
.photo-slot.has-photo { display: block; background: transparent; border-style: solid; padding: 0.35rem; }
.photo-slot .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.4rem; width: 100%; }
.photo-slot .thumbs:empty { display: none; }
.photo-slot .thumb { position: relative; }
.photo-slot .thumb img { display: block; width: 100%; height: 84px; object-fit: cover; border-radius: 6px; }
.thumb-del {
  position: absolute; top: 3px; right: 3px; width: 32px; height: 32px; min-height: 0; padding: 0;
  border: 0; border-radius: 50%; background: rgba(20,20,20,.85); color: #fff;
  font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.thumb-del:hover, .thumb-del:focus-visible { background: #b3261e; }

/* Saved jobs page: same thin cards and soft glow as the site */
:root { --card-rest: 0 1px 2px rgba(18, 20, 23, 0.05); }
html[data-theme="dark"] { --card-rest: none; }
.job-row, .jobs-empty { border-width: 1px; border-radius: 10px; box-shadow: var(--card-rest); transition: box-shadow var(--ff-dur) var(--ff-ease), border-color var(--ff-dur) var(--ff-ease); }
.job-row.is-current { border-color: var(--line); border-left: 3px solid var(--hl); }
.job-row:focus-within { box-shadow: var(--glow-box); }
@media (hover: hover) {
  .job-row:hover, .jobs-empty:hover { border-color: var(--line); box-shadow: var(--glow-box); }
}

/* PREVIEW: faint fixed logo behind the whole page */
html { background: var(--bg); }
body { position: relative; background: transparent !important; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/site/assets/bg-logo-ink.svg") center center / 100% 100% no-repeat; opacity: 0.05; }
html[data-theme="dark"] body::before { opacity: 0.026; background-image: url("/site/assets/bg-logo-light.svg"); }
.section, .section-alt, .page-band, .hero, main, footer, .site-footer { background-color: transparent !important; }

@media (max-aspect-ratio: 1/1) { body::before { inset: auto; top: 0; left: 50%; height: 100vh; height: 100dvh; width: calc(100vh * 3296 / 2300); width: calc(100dvh * 3296 / 2300); aspect-ratio: 3296 / 2300; transform: translateX(-50%); background-size: 100% 100%; } }

/* Store-wrapper mode (ff-native): self-contained app. No marketing links, no guest sample before sign in, no install banner. */
.ff-native-only { display: none; }
html.ff-native .ff-native-only { display: block; }
html.ff-native body:not(.ff-signed-in) .ff-signed-only { display: none; }
html.ff-native [data-ff-web] { display: none !important; }
html.ff-native body.ff-auth-gate #btn-sample { display: none !important; }
html.ff-native #install-banner, html.ff-native .install-banner { display: none !important; }
.acct-card { border: 1px solid var(--line, #C8C4BB); border-radius: 10px; padding: 0.8rem 1rem; margin: 0 0 0.9rem; }
.acct-card h2 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.acct-pkg { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.5rem 0; border-top: 1px solid var(--line, #C8C4BB); }
.acct-terms { margin-top: 0.7rem; }
.acct-subd { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.acct-subd h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 0 0 0.3rem; }
.acct-facts { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.acct-facts li { position: relative; padding-left: 0.9rem; }
.acct-facts li::before { content: ""; position: absolute; left: 1px; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent, #C47A2C); }
.acct-subd .hint { margin: 0.6rem 0 0; }
.acct-textrow { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 0.4rem; margin: 0.3rem 0 0.9rem; }
.acct-textbtn { background: none; border: 0; min-height: 44px; padding: 0 0.9rem; font: inherit; font-size: 0.9rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.acct-textbtn[disabled] { opacity: 0.5; }
.legal-doc h2 { margin-top: 1.4rem; }
.legal-doc .hint a, .legal-doc a { text-decoration: underline; }

/* Store app (ff-native): iOS zooms the whole page when a field smaller than 16px gets focus. Keep every field at 16px, and stop double tap zoom. */
html.ff-native input, html.ff-native select, html.ff-native textarea { font-size: max(16px, 1rem) !important; }
html.ff-native { touch-action: manipulation; }
/* Store app: the website pages that ship in the app show in the app menu (the rest of the website links stay hidden). */
html.ff-native a[data-ff-site] { display: block !important; }

/* ===== job setup folds away once picked ===== */
.setup-group[hidden] { display: none !important; }
.setup-bar { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.25rem 0 0.75rem; }
.setup-chips { display: flex; flex-direction: column; gap: 0.5rem; }
.setup-chips[hidden], .setup-bar[hidden] { display: none !important; }
.chip.chip-summary {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 52px;
  padding: 0.5rem 0.95rem; border-radius: 14px; text-align: left; font-size: 1rem;
  background: var(--panel); color: var(--ink); border: 2px solid var(--line);
}
.chip.chip-summary .cs-k { color: var(--muted); font-weight: 650; flex: none; }
.chip.chip-summary .cs-v { font-weight: 800; flex: 1; min-width: 0; overflow-wrap: break-word; }
.chip.chip-summary .cs-change {
  flex: none; font-size: 0.82rem; font-weight: 750; color: var(--accent-text, #9A5A17);
  padding: 0.25rem 0.6rem; border-radius: 999px; border: 1.5px solid currentColor;
}
.chip.chip-summary.is-open { border-color: var(--accent); }
.chip.chip-summary:active { background: var(--panel); color: var(--ink); opacity: 0.8; }
.setup-toggle { width: 100%; min-height: 48px; font-size: 1rem; }
.setup-toggle.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* bigger tap targets for the choices themselves */
.setup-group .chip { min-height: 48px; }
.setup-group .chip-grid { gap: 0.5rem; }
/* picker groups that sit inside the docs section */
#pay-chips .chip-summary { max-width: 28rem; }
/* once trade and job type are picked, only the current step shows */
body.jt-compact .jt-aux { display: none !important; }
body.jt-compact .phase-card:not(.is-current):not(.is-focus) .phase-actions,
body.jt-compact .phase-card:not(.is-current):not(.is-focus) .phase-help,
body.jt-compact .phase-card:not(.is-current):not(.is-focus) .phase-note { display: none; }
body.jt-compact .phase-card .phase-tools { display: none; }
body.jt-compact .phase-card.is-focus .phase-tools { display: inline-flex; }
body.jt-compact .phase-card { cursor: pointer; }
body.jt-compact .phase-card .phase-actions .btn { min-height: 44px; }
body.jt-compact .phase-card:not(.is-current):not(.is-focus) { padding-top: 0.45rem; padding-bottom: 0.45rem; }
html[data-theme="dark"] .chip.chip-summary { background: var(--field-2, var(--panel)); color: var(--ink); border-color: var(--line); }
.profile-form select, .app-select {
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; min-height: 48px; padding: 0.6rem 0.75rem; border: 1.5px solid #c4c0b6; border-radius: 10px;
  background: #fff; color: var(--ink); font: inherit;
}
.profile-form .hint { margin: 0.35rem 0 0; }
html[data-theme="dark"] .profile-form select, html[data-theme="dark"] .app-select { border-color: var(--line); }

/* ===== 2026-10-03 job action row colors (no green; charcoal, outline, copper) ===== */
html .finish-bar .btn.btn-save { background: var(--ink); border-color: var(--ink); color: var(--btn-on-ink); font-weight: 750; filter: none; }
html .finish-bar .btn.btn-save:hover { background: var(--steel); border-color: var(--steel); }
html .finish-bar .btn.btn-save.is-saved { background: var(--panel); border-color: var(--accent); color: var(--ink); }
html .finish-bar .btn.btn-save.is-flash { background: var(--ink); border-color: var(--ink); color: var(--btn-on-ink); }
html .finish-bar .btn.btn-ghost { background: var(--panel); border-color: var(--ink); color: var(--ink); }
html .finish-bar .btn.btn-ghost:hover { border-color: var(--accent); }
html .finish-bar .btn.btn-share { background: var(--accent); border-color: var(--accent); color: #121417; }
@media (max-width: 340px) { .finish-bar .btn { font-size: 0.82rem; padding: 0.3rem 0.2rem; } }

/* Sign in and Create account result line: always easy to see */
.auth-msg.is-ok { color: var(--ink); }
.auth-msg:not(:empty) { overflow-wrap: break-word; }
@media (min-width: 640px) { .finish-bar { max-width: 460px; } }

/* ===== Jobs as a stepped flow, every section its own card ===== */
.form-panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
.step-card, .sec-card {
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 16px;
  padding: 1rem 1rem 1.1rem; margin: 0 0 1.1rem; box-shadow: 0 2px 10px rgba(18, 20, 23, 0.06);
  scroll-margin-top: 76px;
}
.step-card:focus { outline: none; }
.step-card.is-current { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196, 122, 44, 0.18), 0 2px 10px rgba(18, 20, 23, 0.06); }
.step-card.is-locked { background: var(--soft, rgba(18, 20, 23, 0.04)); box-shadow: none; }
.step-card.is-locked .step-num { background: var(--muted); }
.step-card.is-locked .step-title { color: var(--muted); }
.step-head { display: flex; align-items: center; gap: 0.7rem; min-height: 40px; }
.step-num {
  flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--btn-on-ink, #fff);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem;
}
.acc-card.is-done .step-num, .step-card.is-done .step-num { background: var(--ok, #2F6B3A); color: transparent; font-size: 0; }
.acc-card.is-done .step-num::after { content: ""; width: 12px; height: 7px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.acc-card.is-done:not(.acc-open) { border-color: var(--ok, #2F6B3A); }
.acc-card.is-done:not(.acc-open) > .acc-head { background: rgba(47, 107, 58, 0.06); }
html[data-theme="dark"] .acc-card.is-done:not(.acc-open) > .acc-head { background: rgba(61, 143, 74, 0.12); }
.acc-card .step-done { margin-left: auto; }
/* check-off row inside a section: Skip this step / Mark as done */
.step-check { margin: 0.9rem 0 0; }
.step-check[hidden] { display: none !important; }
.step-check-btn {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 56px; padding: 0.55rem 0.85rem; text-align: left;
  font: inherit; color: var(--ink); background: transparent; border: 1.5px dashed var(--line-strong, var(--muted)); border-radius: 12px; cursor: pointer;
}
.step-check-btn:active { background: rgba(18, 20, 23, 0.05); }
.step-check-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.step-check-box { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--muted); background: var(--panel); position: relative; }
.step-check-btn.is-on { border-style: solid; border-color: var(--ok, #2F6B3A); background: rgba(47, 107, 58, 0.08); }
.step-check-btn.is-on .step-check-box { background: var(--ok, #2F6B3A); border-color: var(--ok, #2F6B3A); }
.step-check-btn.is-on .step-check-box::after { content: ""; position: absolute; left: 6px; top: 6px; width: 12px; height: 7px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg); }
.step-check-text { display: grid; gap: 0.1rem; min-width: 0; }
.step-check-label { font-weight: 750; font-size: 1rem; }
.step-check-sub { font-size: 0.85rem; color: var(--muted); line-height: 1.3; }
.step-check-sub:empty { display: none; }
html[data-theme="dark"] .step-check-btn.is-on { background: rgba(61, 143, 74, 0.16); }
@media print { .step-check { display: none !important; } }
.step-title, .form-panel .step-title { flex: 1; min-width: 0; margin: 0; font-size: 1.15rem; letter-spacing: -0.01em; }
.step-done { flex: none; font-size: 0.8rem; font-weight: 800; color: var(--ok, #2F6B3A); border: 1.5px solid currentColor; border-radius: 999px; padding: 0.15rem 0.6rem; }
.step-done[hidden], .step-edit[hidden] { display: none !important; }
.step-edit {
  flex: none; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--accent-text, #9A5A17);
  background: transparent; color: var(--accent-text, #9A5A17); font: inherit; font-weight: 750; font-size: 0.92rem; cursor: pointer;
}
html[data-theme="dark"] .step-edit { color: var(--accent); border-color: var(--accent); }
.step-lock { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.95rem; }
.step-sum { margin: 0.45rem 0 0; font-size: 1.02rem; font-weight: 700; overflow-wrap: break-word; }
.step-body { margin-top: 0.7rem; }
.step-body[hidden], .step-lock[hidden], .step-sum[hidden] { display: none !important; }
.step-next { width: 100%; min-height: 52px; margin-top: 1rem; font-size: 1.05rem; font-weight: 750; }
.step-next:disabled { opacity: 0.5; }
.step-pulse { animation: ffStepPulse 1.3s ease-out 1; }
@keyframes ffStepPulse { 0% { box-shadow: 0 0 0 0 rgba(196, 122, 44, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(196, 122, 44, 0); } }
@media (prefers-reduced-motion: reduce) { .step-pulse { animation: none; } }
/* the setup rows live inside step 1 now */
#step-1 .setup-bar { margin: 0.7rem 0 0; }
#step-1 .chip-fieldset { margin: 0.7rem 0 0; }
#step-1 .chip-fieldset + .chip-fieldset { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); }
/* checklist, phases and the rest only matter once the job has a type */
body:has(#step-1):not(.jt-s1) #sec-checklist, body:has(#step-1):not(.jt-s1) #phases-wrap { display: none; } /* F51: only the app layout with the step flow (#step-1) waits for step 1; the web app has no steps */
.sec-card .check-head h2, .sec-card > .check-head label { font-size: 1.15rem; font-weight: 800; }
.sec-card.more-advanced { padding-top: 0.2rem; padding-bottom: 0.2rem; }
.sec-card.phases-wrap { margin-top: 0; }
.sec-card.ff-finish { margin-top: 0; }
/* photos: three big, clear buttons, one under the other */
#step-4 .photo-grid-3 { grid-template-columns: 1fr; gap: 0.9rem; }
#step-4 .snap-wrap { display: grid; gap: 0.4rem; }
#step-4 .snap-target {
  flex-direction: row; justify-content: flex-start; gap: 0.9rem; min-height: 84px; padding: 0.7rem 1.1rem; text-align: left;
  border-width: 2.5px; border-radius: 16px; background: var(--ink); color: var(--btn-on-ink, #fff); border-style: solid;
}
#step-4 .snap-icon { font-size: 2.1rem; }
#step-4 .snap-title { font-size: 1.3rem; display: block; }
#step-4 .snap-sub { display: block; font-size: 0.9rem; color: inherit; opacity: 0.8; }
#step-4 .snap-target:active { opacity: 0.85; transform: scale(0.99); }
html[data-theme="dark"] #step-4 .snap-target { background: var(--accent); color: #121417; border-color: var(--accent); }
#step-4 .photo-slot { margin-top: 0; }
#step-4 .photo-slot:not(.has-photo) { min-height: 0; padding: 0.25rem 0; border-style: dashed; }
/* job actions: Save job and New job */
.finish-bar .btn { flex: 1 1 0; }
.job-row-actions { display: flex; flex-direction: column; gap: 0.4rem; flex: none; }
.job-row-actions .btn { white-space: nowrap; min-width: 112px; text-align: center; }

/* ===== setup cards are accordions. Tap anywhere on a header to open or close. ===== */
.acc-card { padding: 0; scroll-margin-top: calc(var(--ffs-top-h, 0px) + var(--ffs-st, 0px) + 10px); }
.acc-card[hidden] { display: none !important; }
.acc-head {
  display: flex; align-items: center; gap: 0.7rem; min-height: 64px; padding: 0.8rem 1rem;
  cursor: pointer; border-radius: 16px; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(196, 122, 44, 0.2);
}
.acc-head:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.acc-head:active { background: rgba(18, 20, 23, 0.05); }
.form-panel, .acc-card, .acc-head { min-width: 0; max-width: 100%; }
.acc-titles { flex: 1; min-width: 0; }
.acc-titles h2, .form-panel .acc-titles h2 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.acc-sum { margin: 0.12rem 0 0; font-size: 0.9rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-sum:empty { display: none; }
.acc-chev { flex: none; color: var(--muted); transition: transform 0.2s ease; }
.acc-open > .acc-head .acc-chev { transform: rotate(180deg); color: var(--accent); }
.acc-body { padding: 0 1rem 1.1rem; }
.acc-body.step-body { margin-top: 0; }
.acc-card:not(.acc-open) > .acc-body { display: none; }
.acc-card.acc-open { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196, 122, 44, 0.18), 0 2px 10px rgba(18, 20, 23, 0.06); }
.acc-card.acc-open > .acc-head { padding-bottom: 0.55rem; }
@media (prefers-reduced-motion: reduce) { .acc-chev { transition: none; } }
.sec-card.more-advanced { background: var(--panel); padding: 0; }
.sec-card.more-advanced .acc-body { padding-top: 0.2rem; }
.more-advanced-body > .job-docs-wrap > h2 { display: none; }
@media (max-width: 340px) { .acc-head { padding: 0.7rem 0.8rem; gap: 0.55rem; } .acc-body { padding: 0 0.8rem 1rem; } .acc-titles h2 { font-size: 1.05rem; } }

/* Plans step */
.plan-add-btn { display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 0.6rem 0 0; cursor: pointer; font-weight: 750; text-align: center; }
.plan-status { min-height: 1.25em; margin: 0.45rem 0; }
.plan-status.is-warn { color: var(--warn); }
.plan-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.45rem; }
.plan-tab {
  min-height: 40px; padding: 0.35rem 0.7rem; border-radius: var(--radius);
  border: 2px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 700; cursor: pointer; max-width: 100%;
}
.plan-tab.is-active { border-color: var(--ink); background: var(--ink); color: var(--btn-on-ink); }
.plan-stage { margin-top: 0.35rem; }
.plan-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin: 0.4rem 0; }
.plan-tool {
  min-height: 46px; padding: 0 0.15rem; border: 2px solid var(--line); border-radius: 10px; background: var(--panel);
  color: var(--ink); font-weight: 700; font-size: 0.88rem; cursor: pointer;
}
.plan-tool.is-active { background: var(--ink); color: var(--btn-on-ink); border-color: var(--ink); }
html[data-theme="dark"] .plan-tool.is-active { background: var(--accent); color: #121417; border-color: var(--accent); }
.color-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0.6rem; }
.color-swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--ink); cursor: pointer; padding: 0; }
.color-swatch.is-active { box-shadow: 0 0 0 4px var(--accent); }
.plan-sw-yellow { background: #E5B800; }
.plan-text-row input { width: 100%; min-height: 46px; padding: 0 0.7rem; border: 2px solid var(--line); border-radius: 10px; background: var(--field, #fff); color: var(--ink); }
.plan-text-row[hidden], .plan-stage[hidden], .plan-canvas-wrap[hidden] { display: none !important; }
.plan-canvas-wrap { position: relative; display: block; width: 100%; overflow: hidden; touch-action: none; border: 2px solid var(--ink); border-radius: var(--radius); background: #ddd; margin-top: 0.4rem; }
#plan-bg { display: block; width: 100%; height: auto; max-width: 100%; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#plan-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; }
.btn-danger-text { color: var(--warn); }
.folio-plans figure { margin: 0 0 0.7rem; }
.folio-plans img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
.folio-plans figcaption { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }
@media (max-width: 340px) { .plan-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media print { .acc-card:not(.acc-open) > .acc-body { display: block; } }

/* ===== Jobs page. Open jobs, Completed jobs, Photos, Shared ===== */
.jobs-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--soft, rgba(18, 20, 23, 0.07)); border-radius: 14px; margin: 0 0 0.8rem; }
.jobs-seg button {
  min-height: 52px; padding: 0.3rem 0.2rem; border: 0; border-radius: 10px; background: transparent; color: var(--muted);
  font: inherit; font-weight: 700; font-size: 0.86rem; line-height: 1.15; cursor: pointer; text-align: center; touch-action: manipulation;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.jobs-seg button.is-on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 4px rgba(18, 20, 23, 0.16); }
.jobs-seg .seg-n { font-weight: 600; font-size: 0.78rem; color: var(--muted); }
.jobs-seg .seg-n:empty { display: none; }
.jobs-seg .seg-n::before { content: "("; } .jobs-seg .seg-n::after { content: ")"; }
.jobs-new { display: flex; width: 100%; min-height: 52px; margin: 0 0 0.6rem; font-size: 1.05rem; font-weight: 800; align-items: center; justify-content: center; text-decoration: none; }
.job-row-main { min-width: 0; }
.job-row-actions.is-row { flex-direction: row; flex-wrap: wrap; margin-top: 0.6rem; }
.job-row-actions.is-row .btn { min-width: 0; flex: 1 1 auto; }
.photo-group { margin: 0 0 1.1rem; }
.photo-group-h { margin: 0 0 0.45rem; font-size: 1.02rem; line-height: 1.3; }
.photo-group-c, .photo-group-n { font-weight: 600; font-size: 0.85rem; color: var(--muted); }
.photo-grid-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.photo-tile { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); aspect-ratio: 1 / 1; cursor: pointer; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile-l { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.15rem 0.3rem; font-size: 0.72rem; font-weight: 700; color: #fff; background: rgba(18, 20, 23, 0.7); text-align: left; }
.share-log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.share-log-row { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem 0.85rem; }
.share-log-who { margin-top: 0.5rem; }
body.lb-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10, 11, 13, 0.94); display: flex; align-items: center; justify-content: center; padding: calc(var(--ffs-st, 0px) + 12px) 12px calc(var(--ffs-sb, 0px) + 12px); }
.lightbox[hidden] { display: none !important; }
.lightbox-in { width: 100%; max-width: 640px; display: grid; gap: 0.6rem; justify-items: center; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 190px); object-fit: contain; border-radius: 8px; }
.lightbox-cap { margin: 0; color: #F2EFE8; font-size: 0.9rem; text-align: center; }
.lightbox-bar { display: flex; gap: 0.5rem; width: 100%; }
.lightbox-bar .btn { flex: 1 1 0; min-height: 48px; }
.lightbox-bar .btn[hidden] { display: none; }
.lightbox .btn-ghost { background: transparent; color: #F2EFE8; border-color: rgba(242, 239, 232, 0.5); }
@media (max-width: 340px) { .jobs-seg button { font-size: 0.8rem; } .photo-grid-g { gap: 0.3rem; } }

/* ===== Accessibility (shared by the app and the website) ===== */
:root { --ff-edge: #737980; --ff-focus: #8A4F10; }
html[data-theme="dark"] { --ff-edge: #6F7A86; --ff-focus: #F0A24A; }
/* keyboard and switch control focus: a 3px ring, 3:1 or better in both themes, never removed */
html :is(a[href], button, input, select, textarea, summary, iframe, [role="button"], [role="checkbox"], [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 3px solid var(--ff-focus) !important; outline-offset: 2px !important; }
html :is(input, select, textarea):focus-visible { outline-offset: 1px !important; }
/* form field edges are 3:1 against the surface (WCAG 1.4.11) */
html .snap-input, html .profile-form input, html .auth-label input, html .ffs-form input, html .ffs-form select, html .ffs-form textarea, html .profile-form select, html .app-select,
html .form input, html .form select, html .form textarea, html .chip-add-row input, html .acct-panel input, html .acct-panel select { border-color: var(--ff-edge) !important; }
/* motion: respect Reduce Motion (animations, transitions and smooth scrolling all stop) */
@media (prefers-reduced-motion: reduce) {
  html, html * , html *::before, html *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
/* Increase Contrast */
@media (prefers-contrast: more) {
  :root { --muted: #3A4046; --line: #6B7075; --ff-edge: #4A4F55; }
  html[data-theme="dark"] { --muted: #D3D9DE; --line: #8D97A1; --ff-edge: #AEB7BF; }
  html .card, html .ffs-card, html .acc-card, html .step-card, html .job-row, html .ffs-rows { border: 1px solid var(--ff-edge) !important; }
  html a:not(.btn):not(.ffs-btn):not(.ffs-tab) { text-decoration: underline; }
}
/* Windows high contrast, forced colors */
@media (forced-colors: active) {
  html :is(.btn, .ffs-btn, button, input, select, textarea, .chip, .ffs-seg button, .ffs-seg a, .ffs-theme, .acc-head) { border: 1px solid ButtonText; forced-color-adjust: auto; }
  html .ffs-tab[aria-current="page"], html .ffs-seg .is-on { text-decoration: underline; border: 2px solid Highlight; }
  html :is(a[href], button, input, select, textarea, summary):focus-visible { outline: 3px solid Highlight !important; }
}

html .chip-sm { min-height: 44px; }
html .thumb-del { width: 44px; height: 44px; top: 0; right: 0; background: transparent !important; isolation: isolate; z-index: 1; }
html .thumb-del::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(20,20,20,.85); }
html .thumb-del:hover::before, html .thumb-del:focus-visible::before { background: #b3261e; }
html .sample-folio-checks > div[role="checkbox"] { min-height: 44px; display: flex; align-items: center; }
/* skip link (first stop on every page) and targets for touch */
.skip-link { position: absolute; left: 8px; top: -80px; z-index: 1000; background: #121417; color: #fff; padding: 12px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 8px; }
html main:focus, html [role="main"]:focus { outline: none; }
@media (pointer: coarse) {
  html .logo, html .footer-links a, html .app-legal-footer a, html .footer-inner a, html .legal-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  html .btn-sm { min-height: 44px; }
}

html[data-theme="dark"] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) { border-color: var(--ff-edge) !important; }

html .btn, html summary { min-height: 44px !important; }
@media (pointer: coarse) {
  html main p a:not(.btn), html main li a:not(.btn), html [role="main"] p a:not(.btn), html [role="main"] li a:not(.btn) { padding-block: 13px; }
}
@media (prefers-contrast: more) { html :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) { border: 2px solid var(--ff-edge) !important; } }
html .ff-legal-overlay .ff-legal-card :is(a, button):focus-visible { outline-color: #8A4F10 !important; }
/* large text: dialog buttons wrap instead of running off the screen */
.ff-del-actions { flex-wrap: wrap; }
.ff-del-actions .btn { white-space: normal; }

/* 2026-10-09: no saved session on /app/: show the sign in page from the first paint. Before this the job
   editor and the green Save job bar painted first and then switched, which flashed on quick clicks. */
html.ff-gate-early .profile-panel,
html.ff-gate-early .layout,
html.ff-gate-early .finish-bar,
html.ff-gate-early #install-banner,
html.ff-gate-early .install-banner { display: none !important; }

/* 2026-10-10 Delete job: plain secondary buttons with danger text, confirm shown in place */
.job-row-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.job-delete-host { margin-top: 0.75rem; }
.job-delete-confirm { border-top: 1px solid var(--line); padding-top: 0.75rem; }
.job-delete-confirm p { margin: 0 0 0.6rem; }
.job-delete-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.job-delete-msg { color: var(--warn); font-size: 0.9rem; margin-top: 0.6rem !important; margin-bottom: 0 !important; }
.app-menu-job { margin-top: 1rem; }
.btn.btn-danger-text, .btn.btn-danger-text:hover { color: var(--warn); }
.job-row-actions .btn.btn-danger-text:hover, .job-delete-actions .btn.btn-danger-text:hover, #btn-delete-job:hover { background: var(--panel); border-color: var(--warn); }
#btn-delete-job[hidden], [data-delete-job][hidden], .job-delete-host[hidden], .job-delete-msg[hidden] { display: none !important; }
html:not(.ff-has-session) body:not(.ff-signed-in) .app-menu-job { display: none !important; }

/* 2026-10-10 UX 1: sign in tabs, show password, menu items */
.auth-form [hidden], .auth-form-wrap [hidden] { display: none !important; }
.auth-tabs { display: flex; gap: 0.5rem; margin: 0.75rem 0 0.5rem; flex-wrap: wrap; }
.auth-tab { min-height: 44px; padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }
.auth-tab.is-on { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent, #C47A2C); }
.auth-pw-row { display: flex; gap: 0.5rem; align-items: stretch; }
.auth-pw-row input { flex: 1 1 auto; min-width: 0; }
.auth-pw-toggle { min-height: 44px; min-width: 64px; flex: 0 0 auto; }
.ff-auth-legal-row { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.ff-auth-agree { width: 24px; height: 24px; min-width: 24px; margin: 0.1rem 0 0; }
.app-menu-theme { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0.65rem 0.85rem; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: 0.98rem; text-align: left; cursor: pointer; }
.app-menu-theme:hover, .app-menu-theme:focus-visible { background: var(--bg); }
html:not(.ff-has-session) body:not(.ff-signed-in) .app-menu-nav .ff-signed-only { display: none !important; }
.auth-pw-row input { font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 0.55rem 0.7rem; min-height: 44px; }
html[data-theme="dark"] .auth-pw-row input { background: var(--field, #232A32); color: var(--ink); }

/* 2026-10-10 UX 2: job screen, share sheet, My jobs */
.job-steps { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; }
.job-steps a, .job-steps button { display: inline-flex; align-items: center; min-height: 44px; padding: 0.45rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; }
.job-steps a:hover, .job-steps button:hover, .job-steps a:focus-visible, .job-steps button:focus-visible { border-color: var(--ink); }
.step-anchor { scroll-margin-top: 0.75rem; }
#pick-lists[hidden], #pick-summary[hidden] { display: none !important; }
.pick-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; border: 1.5px solid var(--line); border-radius: 12px; padding: 0.6rem 0.8rem; margin: 0 0 1rem; background: var(--panel); }
.pick-summary-text { margin: 0; font-size: 1rem; }
.pick-summary-label { display: block; color: var(--muted); font-size: 0.9rem; }
.pick-summary .btn { min-height: 44px; }
.share-main { margin-bottom: 0.25rem; }
.share-status { min-height: 1.4em; margin: 0.25rem 0 0.5rem; font-weight: 600; color: var(--ink); }
.share-more { margin: 0.25rem 0 0.75rem; }
.share-more > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.share-sheet-panel { box-sizing: border-box; }
@media (max-width: 600px) { .share-sheet-panel { width: 100%; max-width: 100%; } }
.jobs-tools { display: grid; gap: 0.6rem; margin: 0.25rem 0 1rem; }
.jobs-tools[hidden] { display: none !important; }
.jobs-tools input[type="search"] { font: inherit; font-size: 1rem; min-height: 44px; padding: 0.5rem 0.75rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.jobs-filter { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.jobs-filter .chip { min-height: 44px; min-width: 64px; }
.crew-roles-preview { margin-top: 1rem; }
/* One save status: the Save button in the bottom bar. The top pill only shows warnings. */
.save-pill:not(.is-warn) { display: none; }
/* Preview button only where the preview is not already beside the form */
@media (min-width: 920px) {
  .finish-preview { display: none !important; }
  .finish-bar { flex-direction: row; justify-content: flex-end; align-items: center; }
  .finish-bar-primary, .finish-bar-secondary { width: auto; margin: 0; }
  .finish-bar-secondary .btn { flex: 0 0 auto; min-width: 8.5rem; }
}
.finish-bar-primary .btn { flex: 1; }
/* Short screens (laptop at 150% zoom): one compact row */
@media (max-height: 640px) and (min-width: 600px) {
  .finish-bar { flex-direction: row; justify-content: flex-end; align-items: center; padding-top: 0.35rem; padding-bottom: calc(0.35rem + var(--safe-bottom)); }
  .finish-bar-primary, .finish-bar-secondary { width: auto; margin: 0; }
  .finish-bar .btn, .finish-bar .btn-lg { min-height: 44px; padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .finish-bar-secondary .btn { flex: 0 0 auto; }
}

/* 2026-10-10 UX 3: readable text and big enough taps (ideas 14, 15, 16, 22).
   16 px for body text, labels and button text. 44 px tall taps. The report preview (#folio) keeps its own sizes. */
.btn, .btn-sm, .chip, .chip-sm, .nav-toggle, .auth-help-link, .auth-tab,
label, .hint, .opt, .auth-label, .auth-hint, .auth-msg, .auth-banner, .auth-banner-text,
.phase-help, .snap-title, .snap-sub, .crew-contact, .job-meta, .profile-line, .pick-summary-label,
.proof-item, .share-limits, .share-legal, .ff-share-legal-note, .app-legal-footer, .ph,
.app-menu-nav a:not(.btn), .app-menu-theme, .jobs-tools input, .job-delete-msg,
.form-panel input, .form-panel select, .form-panel textarea, .profile-form input, .auth-form input { font-size: min(1rem, 6.2vw); }
label .opt, .auth-label .opt { font-size: 0.9375rem; }
.job-group-title { font-size: 0.9375rem; }
.phase-pill, .job-badge { font-size: 0.875rem; font-weight: 700; }
#folio .opt, #folio .hint, #folio label { font-size: inherit; }
.btn, .btn-sm, .chip, .chip-sm, .nav-toggle, .theme-toggle, .auth-help-link { min-height: 44px; }
.btn-sm, .chip-sm, .theme-toggle { min-width: 44px; }
.auth-help-link { display: inline-flex; align-items: center; padding-left: 0.25rem; padding-right: 0.25rem; }
.logo { min-height: 44px; }
.app-legal-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.3rem; }
/* Photo remove: a labeled button under the photo, away from the picture itself */
.photo-slot .thumb { display: grid; gap: 0.3rem; }
.thumb-del { position: static; width: 100%; height: auto; min-height: 44px; border-radius: 8px; font-size: 1rem; font-weight: 700; padding: 0 0.4rem; }
.photo-slot .thumbs { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
/* Larger text settings: the header wraps instead of pushing Menu off the screen */
.nav-inner { flex-wrap: wrap; row-gap: 0.4rem; }
.nav-inner .logo { min-width: 0; }
html, body { max-width: 100%; }
.phase-actions .btn, .phase-tools .btn, .time-details summary { min-height: 44px; }
.nav-inner .nav-toggle, .nav-inner a.nav-toggle { font-size: 1rem; min-width: 44px; }
.plan-tab { min-height: 44px; }
.color-swatch { width: 44px; height: 44px; }
#signed-on-site, .check-list input[type="checkbox"] { width: 24px; height: 24px; }

/* 2026-10-10 claims: photo markup (home says "Mark it up") */
.thumb-mark { width: 100%; min-height: 44px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 1rem; font-weight: 700; padding: 0 0.4rem; cursor: pointer; }
.thumb-mark:hover, .thumb-mark:focus-visible { border-color: var(--accent); }
html.pm-open, html.pm-open body { overflow: hidden; }
.pm-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(10, 12, 14, 0.82); display: flex; align-items: center; justify-content: center; padding: 0.75rem; }
.pm-panel { background: var(--panel); color: var(--ink); border-radius: 12px; width: 100%; max-width: 900px; max-height: 100%; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem; box-sizing: border-box; }
.pm-title { margin: 0; font-size: 1.15rem; font-weight: 800; }
.pm-hint { margin: 0; font-size: 1rem; color: var(--muted); }
.pm-tools, .pm-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pm-tools .btn, .pm-actions .btn { min-height: 44px; font-size: 1rem; }
.pm-color.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.pm-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-right: 0.4rem; border: 1px solid #555; vertical-align: -2px; }
.pm-dot-0 { background: #d32f2f; } .pm-dot-1 { background: #ffd400; } .pm-dot-2 { background: #ffffff; }
.pm-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pm-canvas { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; touch-action: none; border-radius: 6px; cursor: crosshair; }

/* 2026-10-10 claims: GC inbox code, crew tags, crew job view */
.gc-code-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 1rem; margin: 0 0 1rem; background: var(--panel); }
.gc-code { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.06em; margin: 0.2rem 0 0.4rem; font-family: ui-monospace, Menlo, Consolas, monospace; }
.crew-tag-list { display: grid; gap: 0.25rem; margin: 0.4rem 0 0.6rem; }
.crew-tag-item { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; font-size: 1rem; font-weight: 600; cursor: pointer; }
.crew-tag-item input[type="checkbox"] { width: 24px; height: 24px; flex: 0 0 24px; margin: 0; }
.crew-seats .hint { font-weight: 700; color: var(--ink); }
.cj-overlay { align-items: flex-start; overflow-y: auto; }
.cj-panel { background: var(--panel); color: var(--ink); border-radius: 12px; width: 100%; max-width: 760px; padding: 1rem 1.1rem; box-sizing: border-box; font-size: 1rem; margin: auto 0; }
.cj-panel h2 { margin: 0.2rem 0 0.3rem; font-size: 1.3rem; }
.cj-panel h3 { margin: 1rem 0 0.3rem; font-size: 1.05rem; }
.cj-panel ol, .cj-panel ul { margin: 0.2rem 0; padding-left: 1.3rem; }
.cj-checks { list-style: none; padding-left: 0 !important; }
.cj-ro { margin: 0; font-weight: 700; color: var(--muted); }
.cj-notes { white-space: pre-wrap; }
.cj-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; }
.cj-photos figure { margin: 0; }
.cj-photos img { display: block; width: 100%; height: auto; border-radius: 6px; }
.cj-photos figcaption { font-size: 0.875rem; color: var(--muted); }
.cj-panel .btn { min-height: 44px; }
/* 2026-10-10 seats by acceptance */
.crew-seats .hint { margin: 0.15rem 0; }
.crew-seats .hint + .hint { font-weight: 600; }
.crew-seat-pill { font-size: 1rem; background: var(--panel); border: 1px solid var(--line); color: var(--ink); }

/* 2026-10-10 QA r1240: job screen text under 16 px brought up to 16 px (labels, optional tags, section titles, phase badges, phase summary).
   Left as is: the small Before/During/After name inside an empty photo tile (.ph), and the report preview (#folio). */
.profile-form label, .ff-brand label, label .opt, .auth-label .opt, .job-group-title,
.phase-pill, .job-badge, .phase-summary-text, #phase-progress, #phase-next { font-size: 1rem; }

/* 2026-10-10 F2: save error message inside the bottom bar, right by the Save button */
.finish-bar { flex-wrap: wrap; }
.save-bar-msg { flex: 1 1 100%; width: min(1100px, 100%); margin: 0 auto; font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--warn); }
.save-bar-msg[hidden] { display: none !important; }

/* 2026-10-10 one menu everywhere: the site menu drawer on app pages, and the Job page drawer in the same style */
body.site-menu-open { overflow: hidden; }
.site-menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-start; justify-content: flex-end;
}
.site-menu[hidden] { display: none !important; }
.site-menu-backdrop {
  position: absolute; inset: 0; background: rgba(18, 20, 23, 0.4);
}
.site-menu-panel {
  position: relative;
  width: min(320px, calc(100% - 1rem));
  margin: 0.5rem;
  background: var(--panel); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 1rem; box-shadow: var(--shadow);
  max-height: min(90vh, 640px); overflow: auto;
}
.site-menu-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.site-menu-head h2 { margin: 0; font-size: 1.1rem; }
.site-menu-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.site-menu-nav a:not(.btn) {
  display: flex; align-items: center; min-height: 44px;
  padding: 0.65rem 0.85rem; border-radius: 4px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem;
}
.site-menu-nav a:not(.btn):hover,
.site-menu-nav a:not(.btn):focus-visible {
  background: var(--bg); outline: none;
}
.site-menu-nav a[aria-current="page"] {
  background: var(--bg); box-shadow: inset 3px 0 0 var(--accent);
}
.site-menu-cta { margin-top: 0.55rem; width: 100%; text-align: center; justify-content: center; }
@media (max-width: 420px) {
  .site-menu { align-items: flex-end; justify-content: center; }
  .site-menu-panel { width: 100%; margin: 0; border-radius: 16px 16px 0 0; }
}

.app-menu-panel { border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; }
.app-menu-nav a:not(.btn) { border-radius: 4px; font-size: 1rem; }
.app-menu-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); }
@media (max-width: 420px) { .app-menu-panel { border-radius: 16px 16px 0 0; } }

/* 2026-10-10 one menu everywhere: account group at the end, signed in only */
.menu-group { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 2px solid var(--line); }
.menu-signout {
  display: flex; align-items: center; min-height: 44px; width: 100%;
  padding: 0.65rem 0.85rem; border: 0; border-radius: 4px; background: none;
  color: var(--ink); font: inherit; font-weight: 600; font-size: 1rem; text-align: left; cursor: pointer;
}
.menu-signout:hover, .menu-signout:focus-visible { background: var(--bg); outline: none; }
html:not(.ff-native) .site-menu-nav a.ff-native-only { display: none; }
html.ff-native .site-menu-nav [data-ff-web] { display: none !important; }

/* 2026-10-10 QA r1630: the bottom bar stays light in dark mode, so the save message uses a dark red there in both themes */
.finish-bar .save-bar-msg, html[data-theme="dark"] .finish-bar .save-bar-msg { color: #8F1D14; }

/* 2026-10-10 E7: way back to My jobs from the job screen (signed in), and the My account page */
.back-jobs { display: none; min-height: 44px; font-size: 1rem; align-items: center; margin-right: auto; }
html.ff-has-session .back-jobs, body.ff-signed-in .back-jobs { display: inline-flex; }
body.ff-auth-gate .back-jobs { display: none !important; }
.save-row:has(.back-jobs) { align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.acct-panel { font-size: 1rem; }
.acct-panel p, .acct-panel .hint, .acct-panel li { font-size: min(1rem, 6.2vw); }
.acct-panel .btn { min-height: 44px; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; }
.acct-who { margin: 0 0 0.9rem; }
.acct-card p { margin: 0 0 0.5rem; }
.acct-card p:last-child { margin-bottom: 0; }
.acct-more > summary { list-style: none; cursor: pointer; margin: 0.2rem 0 0.6rem; }
.acct-more > summary::-webkit-details-marker { display: none; }
.acct-more[open] > summary { margin-bottom: 0.9rem; }
.acct-signout { margin: 0 0 0.9rem; }
.acct-danger { border-color: var(--warn, #B42318); }

/* store app: the app frame has its own Back, so the job screen does not repeat it */
html.ff-native .back-jobs { display: none !important; }
#acct-msg:empty { display: none; }

/* 2026-10-11 QA r0025 ideas 1, 14, 15, 22 */
/* 2026-10-11 E13 (Ty 7:59 PM CT): the light/dark switch is an icon only (sun in dark mode, moon in light mode), 44px square, no words */
.theme-toggle .theme-label { display: none !important; }
.theme-toggle, .nav-inner .theme-toggle { width: 44px; min-width: 44px; padding: 0 !important; gap: 0; justify-content: center; }
@media (max-width: 440px) { .nav-inner .nav-toggle { padding-left: 0.45rem !important; padding-right: 0.45rem !important; } .nav-inner { gap: 0.2rem; } .nav-inner .nav-toggle { margin-left: 0 !important; } }
/* 1: signed in, the job comes first; the account bar and Your profile card sit below it */
html.ff-has-session body:not(.ff-auth-gate) .wrap, body.ff-signed-in:not(.ff-auth-gate) .wrap { display: flex; flex-direction: column; }
html.ff-has-session body:not(.ff-auth-gate) .wrap > .layout, body.ff-signed-in:not(.ff-auth-gate) .wrap > .layout { order: 1; }
html.ff-has-session body:not(.ff-auth-gate) .wrap > #auth-root, body.ff-signed-in:not(.ff-auth-gate) .wrap > #auth-root,
html.ff-has-session body:not(.ff-auth-gate) .wrap > #profile-panel, body.ff-signed-in:not(.ff-auth-gate) .wrap > #profile-panel { order: 2; margin-top: 0.85rem; }
/* 14: text on the job screen at least 16px */
.save-pill, .save-pill #save-pill-text, .photo-slot .ph, .trade-filter-label, .chip-fieldset legend, .form-panel label { font-size: 1rem; }
/* 15: taps at least 44px */
.auth-upgrade-link { display: inline-flex; align-items: center; min-height: 44px; }
.check-inline input[type="checkbox"], .check-inline #signed-on-site { width: 44px; height: 44px; min-width: 44px; margin: 0; flex-shrink: 0; }
/* 10: My jobs photo thumbnail */
.job-row-top { align-items: flex-start; }
.job-row-main { display: flex; gap: 0.75rem; align-items: flex-start; min-width: 0; flex: 1 1 auto; }
.job-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; background: var(--bg); }
/* 10: room for the thumbnail on phones; buttons drop under the job when space runs out */
.job-row-top { flex-wrap: wrap; }
.job-row-main { flex: 1 1 220px; }
.job-row-main > div { min-width: 0; }

/* 2026-10-11 E12: no sideways scroll on narrow phones (320 to 360). The sign-in form grid grew to its content width; let it shrink. */
.auth-form-wrap .auth-form, .auth-label { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.auth-form-wrap .auth-form > *, .auth-label > *, .auth-pw-row > input { min-width: 0; max-width: 100%; }
.auth-pw-row > input { flex: 1 1 auto; width: auto; }
.auth-pw-row > button { flex: 0 0 auto; }
/* the /app/ header (logo, light/dark, Sample, Menu) on one row down to 320 */
@media (max-width: 380px) {
  .nav-inner .logo { gap: 0.35rem; font-size: 0.95rem; letter-spacing: 0; }
  .nav-inner .logo .logo-mark, .nav-inner .logo img { width: 26px; height: 26px; }
  .nav-inner .nav-toggle, .nav-inner .theme-toggle { padding-left: 0.4rem !important; padding-right: 0.4rem !important; min-width: 44px; }
  .nav-inner .nav-toggle { min-width: 44px !important; }
  .nav-inner { gap: 0.15rem; }
}
@media (max-width: 340px) {
  /* very narrow phones: the logo mark stays, the word next to it is drawn at 0 size (still read out by screen readers) */
  .nav-inner .logo { font-size: 0; gap: 0; min-width: 44px; min-height: 44px; }
  .nav-inner .logo .logo-mark, .nav-inner .logo img { width: 32px; height: 32px; }
}

/* 2026-10-11 QA 0823 (a): job from another device note (Basic) */
.job-elsewhere { font-size: 1rem; margin: 0.5rem 0 0.75rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card, transparent); color: var(--ink, inherit); }
/* 2026-10-11 store extra people (flag OFF) */
.crew-extra-buy { margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.crew-extra-buy .hint { flex-basis: 100%; margin: 0; }
.crew-extra-buy .btn { min-height: 44px; font-size: 1rem; }

/* 2026-10-12 idea 28: the photo name shows once (on the tile), not again inside the empty slot */
.photo-slot .ph:empty { display: none; }
.photo-slot:not(.has-photo) { display: none; }
/* 2026-10-12 idea 29: proof preview captions at 16px */
#folio figcaption, .folio-photos figcaption { font-size: 1rem; }
/* 2026-10-12 idea 30: the job action bar stays on one row, every tap 44px tall */
.finish-bar .btn, .finish-bar .btn-lg { min-height: 44px; min-width: 44px; white-space: nowrap; }
/* 2026-10-12 E15: 320px phones keep the bottom bar on one row too (text stays 16px, taps stay 44px) */
@media (max-width: 340px) {
  .finish-bar { padding-left: 0.15rem; padding-right: 0.15rem; gap: 0.1rem; }
  .finish-bar-primary, .finish-bar-secondary { gap: 0.1rem; }
  .finish-bar .btn, .finish-bar .btn-lg { padding-left: 0.1rem; padding-right: 0.1rem; letter-spacing: -0.03em; }
}
/* 2026-10-12 E16: text box borders at least 3:1 against the page and the box, light and dark */
:root { --input-line: #7A756C; }
html[data-theme="dark"] { --input-line: #77818C; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="color"]):not(:focus),
textarea:not(:focus), select:not(:focus) { border-color: var(--input-line) !important; }

/* E19 (F12): nothing on the job screen may push the page wider than a 320px phone. */
.layout > *, .panel, .photo-grid > *, .row-2 > *, .docs-block, .more-advanced-body { min-width: 0; }
.photo-grid-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 400px) { .photo-grid-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* E19b (F13): whole words on the tiles, and color chips wrap instead of shrinking below 44x44. */
.photo-grid-docs .snap-title { overflow-wrap: normal; word-break: normal; hyphens: none; }
.color-row { flex-wrap: wrap; }
.color-row .color-swatch { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
input[type="date"], input[type="datetime-local"] { min-width: 0; max-width: 100%; }
input[type="date"], input[type="datetime-local"] { min-width: 0; max-width: 100%; }
.ff-brand label, .ff-brand input[type="file"] { max-width: 100%; min-width: 0; }
.ff-brand input[type="file"] { width: 100%; }

/* Q1 2026-10-14 F14: while the page builds (chips, sign-in form, account data) keep it invisible so nothing visibly jumps; theme-init.js clears this once the height settles */
html.ff-booting body > main, html.ff-booting body > .wrap, html.ff-booting body > footer { visibility: hidden; }

/* Q1 2026-10-14 F14: while the page builds (chips, sign-in form, account data) keep it invisible so nothing visibly jumps; theme-init.js clears this once the height settles */
html.ff-booting body > main, html.ff-booting body > .wrap, html.ff-booting body > footer { visibility: hidden; }
/* Q1 2026-10-14 idea 65: on-page field errors, 16px, readable in both themes */
.auth-field-err { margin: 0.3rem 0 0.4rem; font-size: 1rem; line-height: 1.4; font-weight: 600; color: var(--warn); padding-left: 0.6rem; border-left: 3px solid var(--warn); }
[aria-invalid="true"] { border-color: var(--warn) !important; }
/* Q2 2026-10-14 F17 / idea 66: at large text sizes, text scales down to the screen width instead of breaking words. Each min() keeps the original size first, so normal size is unchanged. */
:where(.wrap, main, footer) :where(p, li, dd, dt, label, summary, td, th) { font-size: min(1em, 6.2vw); }
:where(.legal-doc) h2 { font-size: min(1.5em, 7.6vw); }
#s-bot { width: 1px; }
.job-group-title { font-size: min(1rem, 5.8vw); }
.ff-pay-h { font-size: min(1rem, 6vw); }
.wrap input:not([type=checkbox]):not([type=radio]) { max-width: 100%; }
.crew-member, .crew-member * { min-width: 0; }
/* nested indents stop growing past the screen width at large text (min(original, same px at 320)) */
main.wrap { padding-left: min(0.85rem, 4.25vw); padding-right: min(0.85rem, 4.25vw); }
main.wrap section.form-panel { padding-left: min(0.95rem, 4.75vw); padding-right: min(0.95rem, 4.75vw); }
main.wrap details.more-advanced { padding-left: min(0.75rem, 3.75vw); }
main.wrap details.docs-block { padding-left: min(0.7rem, 3.5vw); }
main.wrap .check-toggle { padding-left: min(0.7rem, 3.5vw); }
/* F18: Terms checkbox keeps a real box; the whole label row is a 44px tap area */
.ff-auth-legal-row { min-height: 44px; align-items: flex-start; }
.ff-auth-legal-row input.ff-auth-agree { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; min-width: 1.4rem; min-height: 1.4rem; max-height: 1.4rem; margin: 0.6rem 0 0; padding: 0; appearance: auto; -webkit-appearance: checkbox; accent-color: #1f6feb; border: 2px solid currentColor; cursor: pointer; }
.ff-auth-legal-row span { padding: 0.5rem 0; }
/* Q1 2026-10-14 idea 65: on-page field errors, 16px, readable in both themes */
.auth-field-err { margin: 0.3rem 0 0.4rem; font-size: 1rem; line-height: 1.4; font-weight: 600; color: var(--warn); padding-left: 0.6rem; border-left: 3px solid var(--warn); }
[aria-invalid="true"] { border-color: var(--warn) !important; }
@media (max-width: 919px) { .finish-bar .btn, .finish-bar .btn-lg { font-size: min(1rem, 5.6vw); } }
/* F169 (t440): Save job, Share proof and New job stay 16px on tablet landscape and desktop too */
@media (min-width: 920px) { .finish-bar .btn, .finish-bar .btn-lg { font-size: 1rem; } }
/* Q4 2026-10-14: Unsaved changes bar (uses the theme variables, so light and dark match) */
.unsaved-bar { position: fixed; left: 0.5rem; right: 0.5rem; bottom: calc(var(--finish-h) + var(--safe-bottom) + 0.5rem); z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.5rem 0.75rem; background: var(--panel); color: var(--ink); border: 2px solid var(--warn); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 640px; margin: 0 auto; }
.unsaved-bar[hidden] { display: none; }
.unsaved-bar-text { font-weight: 700; font-size: min(1rem, 5.6vw); }
.unsaved-bar .btn { min-height: 44px; }
body.ff-unsaved { padding-bottom: calc(var(--finish-h) + var(--safe-bottom) + 76px); }
/* Q4 2026-10-14: account page opens with an instant outline instead of a blank wait */
.acct-skel-line { height: 1rem; margin: 0.5rem 0; border-radius: 4px; background: var(--line); opacity: 0.55; width: 70%; }
.acct-skel-card { min-height: 6.5rem; }
.acct-skel-card .acct-skel-line:first-child { width: 40%; }
@media (prefers-reduced-motion: no-preference) { .acct-skel-line { animation: acctSkel 1.4s ease-in-out infinite; } }
@keyframes acctSkel { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.6; } }
/* Q4 item 5: mic button at the bottom edge of the notes field (like Messages / Google search) */
.notes-field { position: relative; }
.notes-field textarea { padding-right: 3.5rem; padding-bottom: 3rem; width: 100%; }
.mic-btn { position: absolute; right: 0.4rem; bottom: 0.4rem; width: 44px; height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
.mic-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mic-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mic-btn.is-active { background: var(--warn); border-color: var(--warn); color: #fff; box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.25); }
@media (prefers-reduced-motion: no-preference) { .mic-btn.is-active { animation: micPulse 1.2s ease-in-out infinite; } }
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.25); } 50% { box-shadow: 0 0 0 9px rgba(180, 35, 24, 0.12); } }
/* Q4 item 6: each file's title sits above its picture */
.folio-photos figcaption, #folio figcaption, .cj-photos figcaption, .sample-folio-photos figcaption, .folio-plans figcaption { margin: 0 0 0.25rem; }
/* Q4 item 4: markup toolset (zoom, sizes, colors, delete page) */
.plan-viewport { position: relative; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; border: 2px solid var(--ink); border-radius: var(--radius); background: #ddd; width: 100%; }
html[data-theme="dark"] .plan-viewport { background: var(--field-2); }
.plan-viewport .plan-canvas-wrap { margin-top: 0; border: 0; border-radius: 0; overflow: visible; transform-origin: 0 0; will-change: transform; }
.plan-tools .plan-tool, .plan-tool { min-height: 46px; }
.plans-toolbar .btn, .plan-zoom-row .btn, .plan-size-row .btn, .plan-toast .btn { min-height: 44px; min-width: 44px; }
.tool-btn[aria-pressed="true"], .tool-btn.is-active { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
.plan-size-row, .plan-zoom-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.4rem 0; }
.plan-size-row[hidden] { display: none; }
.plan-size { flex: 1 1 8rem; min-width: 6rem; min-height: 44px; accent-color: var(--accent); touch-action: pan-y; }
.plan-size-prev { width: 120px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.plan-size-label, .plan-zoom-label { font-weight: 700; font-size: min(1rem, 5.6vw); }
.color-custom { position: relative; display: inline-flex; border-radius: 50%; overflow: hidden; background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); border: 2px solid var(--line); cursor: pointer; }
.color-custom .plan-color-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.color-custom:focus-within { box-shadow: 0 0 0 3px var(--accent); }
.plan-toast { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.4rem 0.6rem; margin: 0.3rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-weight: 700; }
.plan-toast[hidden] { display: none; }
@media print { .plan-viewport { height: auto !important; overflow: visible; border: 0; } .plan-viewport .plan-canvas-wrap { transform: none !important; } }
/* Q4 item 3 (iOS bundle): the Unsaved changes bar sits above the tab bar */
html.ffs .unsaved-bar { bottom: calc(var(--ffs-tab-h, 58px) + var(--ffs-sb, 0px) + 0.5rem); z-index: 71; }
html.ffs body.ff-unsaved { padding-bottom: calc(var(--ffs-tab-h, 58px) + var(--ffs-sb, 0px) + 84px); }
/* 2026-10-15 Pan/Draw toggle for plan markup */
.plan-pan { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; min-width: 44px; font-weight: 700; }
.plan-pan .plan-pan-ico { flex: none; }
.plan-pan[aria-pressed="true"], .plan-pan.is-active { background: var(--accent); border-color: var(--ink); color: #121417; box-shadow: inset 0 -3px 0 var(--ink); }
.plan-mode-label { font-size: min(0.9rem, 4.6vw); font-weight: 600; flex: 1 1 10rem; }
.plan-viewport, .plan-viewport .plan-canvas-wrap, .plan-viewport canvas { touch-action: none; overscroll-behavior: contain; }

/* 2026-10-15 sharp zoom + continuous pages: all pages in one column, scroll through them, the page in view is drawn again at screen size */
.plan-viewport .plan-canvas-wrap, html[data-theme="dark"] .plan-viewport .plan-canvas-wrap { position: absolute; left: 0; top: 0; width: auto; margin: 0; background: transparent; }
.ps-page { position: absolute; left: 0; background: #fff; overflow: hidden; }
.ps-bg { display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ps-marks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.ps-hi { position: absolute; display: none; pointer-events: none; z-index: 2; }
.ps-missing { position: absolute; inset: 0; margin: 0; padding: 1rem; display: flex; align-items: center; justify-content: center; text-align: center; color: #121417; font-size: 0.9rem; font-weight: 600; }
.plan-page-badge { position: absolute; top: 8px; right: 8px; z-index: 3; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(18, 20, 23, 0.86); color: #fff; font-weight: 700; font-size: 0.875rem; line-height: 1.2; pointer-events: none; }
.plan-page-badge[hidden] { display: none; }
.plan-viewport:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 2026-10-15 compact markup toolbar (Ty t303u): 10 icon buttons (12 on wider phones), popovers for color, size, shapes, zoom and More */
.plan-bar { position: sticky; top: calc(var(--ffs-top-h, 0px) + var(--ffs-st, 0px)); z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px; margin: 0 -6px 6px; }
.plan-bar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 3px; }

.plan-bar .plan-tools.plan-tools-row { display: contents; margin: 0; }
.plan-bar .plan-ibtn, .plan-pop .plan-ibtn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; height: 44px; padding: 0; margin: 0; border: 2px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; box-sizing: border-box; }
.plan-bar .plan-ibtn .plan-ic, .plan-pop .plan-ibtn .plan-ic { display: block; flex: none; }
.plan-bar .plan-ibtn.is-active, .plan-bar .plan-ibtn[aria-pressed="true"] { background: var(--ink); color: var(--btn-on-ink); border-color: var(--ink); }
html[data-theme="dark"] .plan-bar .plan-ibtn.is-active, html[data-theme="dark"] .plan-bar .plan-ibtn[aria-pressed="true"] { background: var(--accent); color: #121417; border-color: var(--accent); }
.plan-bar .plan-ibtn.plan-pan[aria-pressed="true"] { background: var(--accent); color: #121417; border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
.plan-bar .plan-ibtn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.plan-bar .plan-ibtn:disabled { opacity: 0.4; cursor: default; }
.plan-bar .plan-ibtn:focus-visible, .plan-pop button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.plan-color-dot { display: block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--ink); background: #C47A2C; }
.plan-zoom-pct { font-weight: 800; font-size: min(0.8125rem, 3.6vw); line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-pop { position: absolute; z-index: 40; background: var(--panel); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; padding: 8px; box-shadow: var(--shadow); max-width: calc(100vw - 16px); box-sizing: border-box; }
.plan-pop[hidden], .plan-narrow-only[hidden] { display: none !important; }
.plan-pop-shapes { display: grid; grid-template-columns: repeat(3, 72px); gap: 6px; }
.plan-pop .plan-shape { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; min-width: 44px; padding: 4px 2px; border: 2px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer; font-weight: 700; font-size: min(0.8125rem, 3.6vw); line-height: 1.3; white-space: nowrap; overflow-wrap: normal; word-break: normal; box-sizing: border-box; }
.plan-pop .plan-shape.is-active { background: var(--ink); color: var(--btn-on-ink); border-color: var(--ink); }
html[data-theme="dark"] .plan-pop .plan-shape.is-active { background: var(--accent); color: #121417; border-color: var(--accent); }
.plan-pop-color .color-row { display: grid; grid-template-columns: repeat(5, 44px); gap: 6px; margin: 0; }
.plan-pop-color .color-swatch { margin: 0; width: 44px; height: 44px; box-sizing: border-box; position: relative; overflow: hidden; }
.plan-pop-size { width: 300px; }
.plan-pop-size .plan-size-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.plan-pop-size .plan-size { flex: 1 1 100%; min-width: 0; }
.plan-pop-zoom { display: flex; gap: 6px; }
.plan-pop .plan-ibtn.plan-txt, .plan-bar .plan-ibtn.plan-txt { width: auto; min-width: 56px; padding: 0 12px; font-weight: 800; font-size: min(0.9375rem, 4vw); white-space: nowrap; }
.plan-pop-more { width: 280px; display: flex; flex-direction: column; gap: 2px; }
.plan-mi { display: block; width: 100%; min-height: 44px; margin: 0; padding: 0.5rem 0.75rem; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; font: inherit; font-weight: 700; font-size: min(1rem, 4.8vw); line-height: 1.2; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; cursor: pointer; box-sizing: border-box; }
.plan-mi:hover { background: var(--field-2, rgba(128, 128, 128, 0.15)); }
.plan-mi:disabled { opacity: 0.4; }
.plan-mi.btn-danger-text { color: var(--warn); }
.plan-mi-share { margin: 0; padding: 0; }
.plan-mi-share[hidden] { display: none !important; }
.plan-mi-zoom { display: flex; align-items: center; gap: 6px; padding: 2px 4px 6px; }
.plan-mi-zoom .plan-zoom-pct { min-width: 3.2em; text-align: center; font-size: min(0.9375rem, 4vw); }
.plan-narrow-only { display: none; }

.plan-bar .plan-toast { margin: 4px 0 0; padding: 0.3rem 0.5rem; font-size: min(0.9375rem, 4.4vw); }
.plan-pop-color .color-custom .plan-color-input { min-height: 0; min-width: 0; box-sizing: border-box; width: 100%; height: 100%; }

/* 2026-10-15 t308u: icon + tiny word under it on every toolbar button. Text is sized by min(rem, vw) so it never grows past its box at any text size. */
.plan-bar .plan-ibtn, .plan-pop .plan-ibtn { flex-direction: column; gap: 1px; height: auto; min-height: 54px; padding: 3px 0 2px; border-width: 1.5px; min-width: 0; overflow: hidden; }
.plan-bar .plan-ibtn .plan-ic, .plan-pop .plan-ibtn .plan-ic { width: 22px; height: 22px; }
.plan-lbl { display: block; max-width: 100%; font-size: min(0.6875rem, 2.8vw); line-height: 1.15; font-weight: 700; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.plan-bar .plan-ibtn .plan-color-dot { width: 22px; height: 22px; }
.plan-pop-zoom .plan-ibtn { min-width: 64px; }
.plan-pop-zoom .plan-ibtn.plan-txt { min-width: 64px; padding: 3px 4px 2px; }
.plan-pop-zoom .plan-zoom-pct { font-size: min(0.8125rem, 3.4vw); line-height: 22px; }
.plan-mi svg.plan-ic { width: 20px; height: 20px; vertical-align: -4px; margin-right: 8px; }
/* 2026-10-15 t308u: on iOS the Save bar sits in the page flow at the top. Its "Not saved yet" line appeared and vanished with every edit, so the whole page moved 22px (Undo made it jump). The Save pill right under it says the same, so the line is now screen-reader only and never changes the page height. */
.finish-bar .save-bar-msg, .finish-bar .save-bar-msg[hidden] { display: block !important; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* F23: the Undo toast floats over the top of the picture and takes no room, so showing, tapping or timing out never moves the picture; Undo/Redo take no focus */
.plan-viewport .plan-toast.plan-toast-float { position: absolute; left: 8px; right: 8px; top: 8px; margin: 0; z-index: 50; touch-action: manipulation; box-shadow: var(--shadow); -webkit-user-select: none; user-select: none; }
.plan-bar .plan-ibtn, .plan-pop .plan-ibtn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* F24 (Ty t311u): the save row above the plan keeps ONE fixed height. Before, on a saved job every stroke flipped the pill between hidden and
   shown, and on narrow phones the pill wrapped under "Back to My jobs", so the whole plan jumped down and up by a line. */
html.ff-has-session .save-row, body.ff-signed-in .save-row { min-height: 44px; flex-wrap: nowrap !important; align-items: center; overflow: hidden; }
.save-row .back-jobs { flex: 0 0 auto; }
.save-row .save-pill { flex: 0 1 auto; min-width: 0; max-width: 100%; border-radius: 18px; }
.plan-status { min-height: 1.25em; }
.plan-zoom-pct { white-space: nowrap; }

/* F25 (Ty t313u): one item per uploaded file. Tap a file to open it; its pages scroll inside, with a pager for a long PDF. */
.plan-tabs { display: block; margin-bottom: 0.45rem; }
.plan-file { display: grid; grid-template-columns: 1fr 44px; gap: 6px; align-items: stretch; margin: 0 0 0.4rem; }
.plan-file-head { display: flex; align-items: center; gap: 0.5rem; min-height: 52px; min-width: 0; padding: 0.4rem 0.75rem; text-align: left; border-radius: var(--radius); border: 2px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.plan-file.is-active .plan-file-head { border-color: var(--ink); }
.plan-file-head .pf-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-file-head .pf-meta { flex: 0 0 auto; font-weight: 600; font-size: min(0.875rem, 3.6vw); opacity: 0.75; white-space: nowrap; }
.plan-file-head .pf-chev { flex: 0 0 auto; width: 1em; text-align: center; }
.plan-file .pf-del { min-height: 44px; min-width: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); border: 2px solid var(--line); background: #fff; color: var(--warn); cursor: pointer; }
.plan-file .pf-pager { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; }
.plan-file .pf-pg-btn { min-height: 44px; min-width: 88px; padding: 0 0.6rem; border-radius: var(--radius); border: 2px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.plan-file .pf-pg-btn:disabled { opacity: 0.4; cursor: default; }
.plan-file .pf-pg-label { flex: 1 1 auto; text-align: center; font-weight: 700; white-space: nowrap; font-size: min(1rem, 4vw); }
.plan-tabs > .plan-stage { margin-top: 0.1rem; margin-bottom: 0.6rem; }
html[data-theme="dark"] .plan-file-head, html[data-theme="dark"] .plan-file .pf-del, html[data-theme="dark"] .plan-file .pf-pg-btn { background: var(--field); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .plan-file .pf-del { color: #ff8a80; }
html[data-theme="dark"] .plan-file.is-active .plan-file-head { border-color: var(--ink); }
/* Reminders and crew notifications (1.0.2). Lives here, not in a script: the site CSP is style-src 'self', so a <style> element injected by script is blocked (QA-F22). */
.ffr{margin-top:1.15rem}
.ffr h2{margin:0 0 .25rem}
.ffr-list{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.ffr-item{border:1.5px solid var(--line,#C8C4BB);border-radius:var(--radius,12px);padding:.6rem .7rem;background:var(--panel,#fff);overflow-wrap: break-word;min-width:0}
.ffr-item.is-over{border-color:var(--warn,#B3261E)}
.ffr-item.is-done{border-color:var(--ok,#2F6B3A);background:color-mix(in srgb,var(--ok,#2F6B3A) 8%,var(--panel,#fff))}
.ffr-name{font-weight:700;margin:0}
.ffr-meta{margin:.15rem 0 0;color:var(--muted,#5A6168);font-size:.88rem}
.ffr-tag{display:inline-block;font-size:.78rem;font-weight:700;padding:.05rem .45rem;border-radius:999px;border:1px solid currentColor;margin-left:.35rem}
.ffr-tag.over{color:var(--warn,#B3261E)}
.ffr-tag.done{color:var(--ok,#2F6B3A)}
.ffr-acts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.ffr-group{margin:.8rem 0 0;font-size:.9rem;font-weight:700;color:var(--muted,#5A6168)}
.ffr-form{margin-top:.2rem}
.ffr-form select,.ffr-form input[type=time]{display:block;width:100%;max-width:100%;box-sizing:border-box;min-height:48px;padding:.6rem .75rem;border:1.5px solid #c4c0b6;border-radius:10px;background:#fff;color:var(--ink,#121417);font:inherit}
html[data-theme=dark] .ffr-form select,html[data-theme=dark] .ffr-form input[type=time]{background:var(--field,var(--panel));color:var(--ink);border-color:var(--line)}
.ffr-form input[type=date],.ffr-form input[type=text]{box-sizing:border-box;max-width:100%}
.ffr-form label[hidden]{display:none}
.ffr [hidden],.ffr-sub[hidden],.ffr-jcard[hidden],.ffr-banner[hidden]{display:none !important}
.ffr-quick{display:flex;flex-wrap:wrap;gap:.4rem;margin:.45rem 0 0}
.ffr-err{color:var(--warn,#B3261E);margin:.5rem 0 0;font-size:.88rem}
.ffr-box{margin-top:.75rem;padding:.75rem;border:1px dashed color-mix(in srgb,currentColor 25%,transparent);border-radius:12px}
.ffr-box-title{margin:0 0 .35rem}
.ffr-box .ffr-acts:first-child{margin-top:0}
.ffr-sub{margin-top:1.1rem;padding-top:.9rem;border-top:1.5px solid var(--line,#C8C4BB)}
.ffr-sub:empty,.ffr-sub[hidden]{display:none}
.ffr-subh{margin:0;font-size:1rem;font-weight:800}
.ffr-jcard{margin:0 0 .8rem;border:1px solid var(--line,#C8C4BB);border-radius:10px;background:var(--panel,#fff);box-shadow:var(--card-rest,0 2px 10px rgba(18,20,23,.06))}
.ffr-jcard[hidden]{display:none}
.ffr-jsum{display:flex;align-items:center;gap:.7rem;min-height:56px;padding:.6rem 1rem;cursor:pointer;list-style:none;border-radius:10px}
.ffr-jsum::-webkit-details-marker{display:none}
.ffr-jt{flex:1;min-width:0;display:block}
.ffr-jh{display:block;font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.ffr-js{display:block;margin-top:.1rem;font-size:.9rem;color:var(--muted,#5A6168)}
.ffr-jchev{flex:none;color:var(--muted,#5A6168);transition:transform .2s ease}
.ffr-jcard[open] .ffr-jchev{transform:rotate(180deg);color:var(--accent,#C47A2C)}
.ffr-jbody{padding:0 1rem 1rem}
.ffr-jbody .ffr-group:first-child{margin-top:.2rem}
@media (prefers-reduced-motion:reduce){.ffr-jchev{transition:none}
}
.ffr.ffr-pcard{margin:0 0 .8rem;padding:.9rem 1rem 1rem;border:1px solid var(--line,#C8C4BB);border-radius:10px;background:var(--panel,#fff);box-shadow:var(--card-rest,0 2px 10px rgba(18,20,23,.06))}
.ffr-pcard[hidden]{display:none}
.ffr-pcard h2{margin:0 0 .25rem;font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.ffc-pref{display:flex;align-items:center;gap:.5rem;font-weight:600}
.ffc-pref input{width:auto;min-height:0;flex:none}
.ffr-banner{position:fixed;left:.6rem;right:.6rem;top:calc(env(safe-area-inset-top,0px) + .6rem);z-index:2147483000;display:flex;gap:.6rem;align-items:center;justify-content:space-between;background:var(--panel,#fff);border:2px solid var(--ok,#2F6B3A);border-radius:10px;padding:.6rem .8rem;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.ffr-banner[hidden]{display:none}

/* 1.0.2 idea 69: language choice inside the first-open box; the card scrolls instead of growing past the screen, words stay whole */
.ff-legal-card{box-sizing:border-box;max-height:100%;overflow-y:auto;overflow-wrap:normal;word-break:normal;hyphens:manual;padding:16px 14px 16px}
.ff-legal-card .ff-legal-lang{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:44px;margin:0 0 .75rem;padding:8px 6px;overflow-wrap:normal;word-break:normal;font-size:1rem;line-height:1.25;white-space:normal;text-align:center;box-sizing:border-box}
.ff-legal-card .ff-legal-lang-name{min-width:0}
.ff-legal-card #ff-legal-ack-btn{min-height:44px;padding:8px 6px;overflow-wrap:normal;word-break:normal;white-space:normal;line-height:1.25;box-sizing:border-box}
.ff-legal-h{overflow-wrap:normal}
.ff-legal-overlay{padding:10px}
.ff-legal-card .ff-legal-p{font-size:clamp(.78rem,4.4vw,.9rem)}
.ff-legal-card .ff-legal-lang{font-size:.95rem}
.ff-legal-card .ff-legal-lang>span:first-child{font-size:.8em}
html body .ff-legal-card button.ff-legal-lang, html body .ff-legal-card button#ff-legal-ack-btn{padding:8px 6px;overflow-wrap:normal;word-break:normal;font-size:.95rem;min-height:44px}
/* F23: first-open box text at least 16px at 100% text; link and buttons are real tap targets */
.ff-legal-card .ff-legal-p{font-size:1rem;line-height:1.45}
html body .ff-legal-card button.ff-legal-lang, html body .ff-legal-card button#ff-legal-ack-btn{font-size:1rem;min-height:44px}
.ff-legal-card .ff-legal-lang>span:first-child{font-size:1rem;line-height:1}
.ff-legal-card .ff-legal-a{display:inline-block;min-height:24px;line-height:24px;padding:0;vertical-align:baseline}
.ff-legal-h{font-size:1.15rem}
/* F27 (2026-10-18): help links are 16px or larger */
.auth-help-link, body.ff-auth-gate #auth-root .auth-help-link { font-size: 1rem; }

/* F30c: sign-in screen keeps room for whole words when text is enlarged on narrow phones */
@media (max-width: 480px) {
  body.ff-auth-gate #auth-root .auth-banner,
  body.ff-auth-gate #auth-root .auth-form-wrap { padding-left: min(1.35rem, 4vw); padding-right: min(1.35rem, 4vw); }
  .auth-help-link { font-size: min(0.88rem, 5.2vw); padding-left: 0; padding-right: 0; }
  .auth-label { font-size: min(0.85rem, 5.2vw); }
  html .app-legal-footer a, html .footer-links a { font-size: min(1rem, 5.2vw); }
}

/* ===== Say-It Cards (1.0.2) ===== */
.ffs h2{margin:0 0 .25rem}
.ffs-lead{margin:0 0 .6rem;color:var(--muted,#555);font-size:1rem}
.ffs-lab{display:block;font-weight:700;font-size:1rem;margin:.6rem 0 .25rem}
.ffs-sel,.ffs-new{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;padding:.55rem .6rem;border:2px solid var(--line,#C8C4BB);border-radius:var(--radius,8px);background:var(--panel,#fff);color:var(--ink,#111);min-height:44px}
.ffs-list,.ffs-acks{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.45rem}
.ffs-card{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;width:100%;text-align:start;font:inherit;font-size:1rem;padding:.7rem .8rem;min-height:44px;border:2px solid var(--line,#C8C4BB);border-radius:var(--radius,8px);background:var(--panel,#fff);color:var(--ink,#111);cursor:pointer;overflow-wrap:break-word}
.ffs-card-t{font-weight:700}
.ffs-card-go{font-size:1rem;font-weight:700;color:var(--accent-text,#8a4b0f);text-decoration:underline;text-underline-offset:3px}
.ffs-note{margin:.7rem 0 0;color:var(--muted,#555);font-size:1rem}
.ffs-subh{margin:1rem 0 0;font-size:1rem;font-weight:800}
.ffs-acks li{display:grid;gap:.1rem;padding:.5rem .6rem;border:1.5px solid var(--line,#C8C4BB);border-radius:var(--radius,8px);overflow-wrap:break-word}
.ffs-ack-m{font-size:1rem;color:var(--muted,#555)}
.ffs-add,#ffs-add{margin-top:.4rem}
body.ffs-lock{overflow:hidden}
.ffs-over{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--bg,#fff);overflow:auto}
.ffs-sheet{width:100%;max-width:32rem;margin:auto;display:grid;gap:1rem;text-align:center}
.ffs-big{margin:0;font-size:1.75rem;line-height:1.3;font-weight:800;overflow-wrap:break-word;color:var(--ink,#111)}
.ffs-orig{margin:0;font-size:1.1rem;color:var(--muted,#555);overflow-wrap:break-word}
.ffs-thanks{margin:0;font-size:1.2rem;font-weight:800}
.ffs-orig[hidden],.ffs-thanks[hidden]{display:none}
.ffs-btns{display:grid;gap:.5rem}
.ffs-btns .btn{width:100%;min-height:52px;font-size:1.1rem}
@media (max-width:480px){.ffs-big{font-size:min(1.75rem,7vw)}.ffs-card,.ffs-sel,.ffs-new,.ffs-lead,.ffs-note{font-size:min(1rem,5.2vw)}}

/* ===== Warranty (1.0.2, t433) ===== */
.wty h2{margin:0 0 .25rem}
.wty-lead,.wty-note{margin:0 0 .6rem;color:var(--muted,#555);font-size:1rem}
.wty-lab{display:block;font-weight:700;font-size:1rem;margin:.6rem 0 .25rem}
.wty-sel{width:100%;box-sizing:border-box;font:inherit;font-size:max(1rem,16px);min-height:44px;padding:.55rem .6rem;border:2px solid var(--line,#C8C4BB);border-radius:var(--radius,8px);background:var(--panel,#fff);color:var(--ink,#111)}
.wty-custom[hidden]{display:none}
.wty .btn{margin-top:.6rem;min-height:44px}
.wty-clock{margin:.2rem 0 .3rem;display:flex;flex-wrap:wrap;gap:.2rem .7rem;font-weight:700;overflow-wrap:anywhere}
.wty-left{color:var(--muted,#555);font-weight:600}
.wty-msg{margin:.6rem 0 0;font-size:1rem;font-weight:700}
.wty-msg.is-err{color:#b3261e}
.wty-sec{margin:1rem 0}

/* ===== Customer Proof Link options (1.0.2) ===== */
.ff-link-opts{display:grid;grid-template-columns:1fr;gap:.25rem;margin:.25rem 0 .5rem;max-width:28rem}
.ff-link-lab{font-weight:700;font-size:1rem;margin-top:.35rem}
.ff-link-sel{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;min-height:44px;padding:.45rem .6rem;border:2px solid var(--line,#C8C4BB);border-radius:var(--radius,8px);background:var(--panel,#fff);color:var(--ink,#111)}
.link-ok{font-weight:700}
@media (max-width:480px){.ff-link-lab,.ff-link-sel{font-size:min(1rem,5.2vw)}}
.ff-link-out{overflow-wrap: break-word;word-break:break-word}

/* ===== Crew Handoff Link (1.0.2) ===== */
.cho h2{margin:0 0 .25rem}
.cho-lead,.cho-note-plan{margin:0 0 .6rem;color:var(--muted,#555);font-size:1rem}
.cho .btn{min-height:44px;margin-top:.5rem}
.cho-pick{border:2px solid var(--line,#C8C4BB);border-radius:var(--radius,8px);padding:.5rem .7rem;margin:.5rem 0;min-width:0}
.cho-pick legend{font-weight:800;padding:0 .3rem}
.cho-check{display:flex;gap:.5rem;align-items:flex-start;padding:.3rem 0;font-size:1rem;overflow-wrap: break-word}
.cho-check input{width:22px;height:22px;flex:0 0 auto;margin-top:.1rem}
.cho-lab{display:block;font-weight:700;font-size:1rem;margin:.6rem 0 .25rem}
.cho-sel{width:100%;max-width:20rem;box-sizing:border-box;font:inherit;font-size:1rem;min-height:44px;padding:.45rem .6rem;border:2px solid var(--line,#C8C4BB);border-radius:var(--radius,8px);background:var(--panel,#fff);color:var(--ink,#111)}
.cho-link,.cho-msg{margin:.6rem 0 0;font-size:1rem;overflow-wrap: break-word;word-break:break-word}
.cho-msg{font-weight:700}
.cho-msg.is-err{color:#b3261e}
.cho-subh{margin:1rem 0 .3rem;font-size:1rem;font-weight:800}
.cho-list,.cho-items{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.cho-card{border:2px solid var(--line,#C8C4BB);border-radius:var(--radius,8px);padding:.6rem .7rem}
.cho-status{margin:0;font-weight:800;display:flex;flex-wrap:wrap;gap:.2rem .7rem;overflow-wrap: break-word}
.cho-meta{margin:.2rem 0 .5rem;color:var(--muted,#555);display:flex;flex-wrap:wrap;gap:.2rem .7rem;font-size:1rem}
.cho-item{display:flex;gap:.5rem;align-items:flex-start}
.cho-mark{font-weight:800;min-width:1.2rem}
.cho-item.is-done .cho-mark{color:#1b6e3a}
.cho-body{min-width:0;flex:1}
.cho-label{overflow-wrap: break-word}
.cho-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cho-note{margin:.2rem 0 0;overflow-wrap: break-word}
.cho-their{font-weight:700;color:var(--muted,#555)}
.cho-photo,.ho-photo{display:block;max-width:100%;max-height:220px;height:auto;margin-top:.4rem;border-radius:var(--radius,8px)}
.cho-acts{display:flex;flex-wrap:wrap;gap:.5rem}
.ho-langrow{margin:.5rem 0 1rem}
.ho-lab{display:block;font-weight:700;font-size:1rem;margin:.6rem 0 .25rem}
.ho-sel{width:100%;max-width:20rem;box-sizing:border-box;font:inherit;font-size:1rem;min-height:44px;padding:.45rem .6rem;border:2px solid var(--line,#C8C4BB);border-radius:var(--radius,8px);background:var(--panel,#fff);color:var(--ink,#111)}
.ho-items{margin:0;padding:0 0 0 1.4rem;display:grid;gap:1rem}
.ho-item{border-bottom:1px solid var(--line,#C8C4BB);padding-bottom:.8rem;min-width:0}
.ho-done{display:flex;gap:.6rem;align-items:flex-start;font-size:1.1rem;font-weight:700;overflow-wrap: break-word}
.ho-done input{width:26px;height:26px;flex:0 0 auto}
.ho-note{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;padding:.5rem .6rem;border:2px solid var(--line,#C8C4BB);border-radius:var(--radius,8px);background:var(--panel,#fff);color:var(--ink,#111)}
.ho-pick{position:relative;overflow:hidden;margin-top:.5rem;min-height:44px;display:inline-flex;align-items:center}
.ho-file{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
#ho-save{margin-top:1rem;width:100%;min-height:52px;font-size:1.1rem;max-width:28rem}
@media (max-width:480px){.cho-lead,.cho-note-plan,.cho-check,.cho-lab,.cho-meta,.ho-lab,.ho-note{font-size:min(1rem,5.2vw)}.ho-done{font-size:min(1.1rem,5.6vw)}}

/* F43 (2026-10-19): 44px targets on every screen, not only touch screens (the mouse and keyboard rules had dropped them) */
html .logo, html .footer-links a, html .app-legal-footer a, html .footer-inner a, html .legal-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
html .btn-sm { min-height: 44px; }
main li > a[href^="#"]:only-child { display: inline-flex; align-items: center; min-height: 44px; }
.crew-add-grid select, .crew-member-edit select, .crew-roles-wrap select { min-height: 44px; }
.cho-check { min-height: 44px; align-items: center; }
.cho-check input { width: 24px; height: 24px; margin-top: 0; }
.ff-brand input[type="file"] { min-height: 44px; }
.ff-brand input[type="color"] { min-width: 44px; min-height: 44px; }
/* F48 (2026-10-19): 16px minimum for sign-in labels, pills, invite code, proof pack footer and notes, GC label, "Nothing due", legal note */
html .auth-label, html .gc-form .auth-label { font-size: 1rem; }
html .crew-role-pill, html .crew-code, html .crew-code code, html .ff-done-pill { font-size: 1rem; }
html .folio-foot, html .folio-muted, html .folio-biz { font-size: 1rem; }
html .ffr-js { font-size: 1rem; }
/* F40 (2026-10-19): the save pill keeps room for whole words; "Back to My jobs" gives up width first and wraps by words */
.save-pill > #save-pill-text { min-width: 0; flex: 0 1 auto; }
html .save-row .back-jobs { flex: 0 1 auto; min-width: 0; }
html .save-row .save-pill.is-warn { flex: 0 1 auto; min-width: min(8rem, 50%); }
/* F40 (2026-10-19): Save / Preview / Share keep whole words; when the three labels do not fit on one row (ru, de, fi), the row wraps */
html .finish-bar { flex-wrap: wrap; }
html .finish-bar .btn, html .finish-bar .btn-lg { flex: 1 1 auto; min-width: min(100%, max-content); }
/* F40 (2026-10-19): role pills wrap inside their row at big text instead of pushing the Crew box sideways */
html .crew-role-pill { white-space: normal; max-width: 100%; }
html .crew-owner-top, html .crew-member-top { flex-wrap: wrap; min-width: 0; }
/* F40 (2026-10-19): proof pack header wraps the business name under FIELDFOLIO at big text */
html .folio-head { flex-wrap: wrap; gap: 0.25rem 0.75rem; }

/* Idea 74: turned off and ended links */
.links-h2 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.cho-off { margin: 0 0 0.25rem; }
.job-row.is-off .job-title, .cho-card.is-off .cho-status { color: var(--muted); }
.jobs-list > li { min-width: 0; }
html.ff-tw-xs .jobs-list > .job-row { padding-inline: 0.5rem; }
html.ff-tw-xs .job-row .page-actions .btn { min-width: 0; max-width: 100%; }
/* Idea 75 combine jobs */
.jc-bar { margin: 0 0 0.9rem; display: grid; gap: 0.6rem; }
.jc-bar[hidden] { display: none; }
.jc-bar p { margin: 0; font-size: 1rem; }
.jc-btn { min-height: 44px; font-size: 1rem; }
.jc-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jc-done { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.jc-msg { color: var(--accent); font-weight: 600; }
.jc-confirm { border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem; display: grid; gap: 0.7rem; min-width: 0; }
.jc-h { font-size: 1.15rem; margin: 0; }
.jc-keep { border: 0; margin: 0; padding: 0; display: grid; gap: 0.4rem; min-width: 0; }
.jc-keep legend { font-weight: 600; margin-bottom: 0.4rem; font-size: 1rem; padding: 0; }
.jc-opt { display: flex; align-items: flex-start; gap: 0.6rem; min-height: 44px; padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 1rem; }
.jc-opt input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; flex: none; }
.jc-opt > span { display: grid; gap: 0.15rem; min-width: 0; }
.jc-opt-t { font-weight: 600; }
.jc-opt-m { color: var(--muted); }
.jc-pick { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; font-size: 1rem; font-weight: 600; cursor: pointer; margin-bottom: 0.3rem; }
.jc-pick input { width: 1.4rem; height: 1.4rem; margin: 0; flex: none; }
.job-row.jc-picked { outline: 2px solid var(--accent); outline-offset: -2px; }
.jc-from { display: inline-block; font-size: 1rem; color: var(--muted); font-weight: 500; }
.phase-title .jc-from { margin-inline-start: 0.4rem; }
.thumb .thumb-from { display: block; font-size: 1rem; line-height: 1.3; }
.ffr-name .jc-from { margin-inline-start: 0.4rem; }
.jc-note { font-size: 1rem; margin: 0 0 0.6rem; }
html.ff-tw-xs .jc-confirm, html.ff-tw-s .jc-confirm { padding: 0.4rem; border-radius: 8px; }
html.ff-tw-xs .jc-opt, html.ff-tw-s .jc-opt { padding: 0.3rem 0.35rem; gap: 0.4rem; }
.jc-keep { min-inline-size: 0; }
.jc-opt-t, .jc-opt-m { overflow-wrap: anywhere; }
.jc-bar, .jc-bar > *, .jc-acts > * { min-width: 0; max-width: 100%; }
.jc-btn { white-space: normal; }
html.ff-tw-xs .jc-btn, html.ff-tw-s .jc-btn { padding-inline: 0.6rem; }

/* QA retest 2 (2026-10-19) */
/* F43: numbered contents links on legal pages are standalone list links: at least 24px tall */
.legal-doc li > a[href^="#"]:only-child, .legal-card li > a[href^="#"]:only-child { display: flex; align-items: center; min-height: 44px; padding-block: 0.25rem; } /* F43: 44px tall contents links */
/* F40: the Crew section sits in a closed details block, so it has to fit at big text sizes without waiting for the word fit */
html.ff-tw-s .crew-add-grid, html.ff-tw-s .crew-member-edit, html.ff-tw-m .crew-add-grid, html.ff-tw-m .crew-member-edit { grid-template-columns: minmax(0, 1fr); }
html.ff-tw-s .crew-add { padding-inline: 0.4rem; }
html.ff-tw-s .crew-add label, html.ff-tw-s .crew-add label .opt, html.ff-tw-s .crew-add .opt, html.ff-tw-s .crew-role-pill, html.ff-tw-m .crew-add label .opt { font-size: max(0.72rem, 16px); }
html.ff-tw-s .crew-role-pill { flex-shrink: 0; }
/* F50: long eyebrow words (et "KONTROLLNIMEKIRJAD") at big text on a narrow screen: drop the rule line and most of the letter spacing */
html.ff-tw-xs .eyebrow::before { display: none; }
html.ff-tw-xs .eyebrow { letter-spacing: 0.02em; gap: 0; max-width: 100%; flex-wrap: wrap; }
html.ff-tw-s .crew-code, html.ff-tw-s .crew-code code { font-size: max(0.72rem, 16px); }

/* Stage 3 (2026-10-19) known gap: proof doc photo buttons and checklist rows at big text (inside closed details, so no waiting for the word fit) */
html.ff-tw-s .photo-grid-docs, html.ff-tw-m .photo-grid-docs { grid-template-columns: minmax(0, 1fr); }
html.ff-tw-s .snap-target-sm .snap-title { overflow-wrap: normal; }
html.ff-tw-xs .check-toggle, html.ff-tw-xs .check-inline { font-size: max(0.8rem, 16px); }
html.ff-tw-xs .check-toggle { padding-inline: 0.45rem; gap: 0.45rem; }
html.ff-tw-xs .check-inline { gap: 0.3rem; }
.check-toggle > .check-text, .check-inline > span { min-width: 0; }
/* checklist rows at big text on a narrow screen: give the words the room the nested boxes were taking */
html.ff-tw-xs main.wrap { padding-inline: 0.3rem; }
html.ff-tw-xs .form-panel { padding-inline: 0.3rem; }
html.ff-tw-xs .more-advanced, html.ff-tw-xs .docs-block { padding-inline: 0.25rem; }
html.ff-tw-xs .check-toggle { padding-inline: 0.25rem; gap: 0.25rem; }

/* F53/F54 (2026-10-19): moved clocks and Say-It records say where they came from */
.csh-clock .jc-from, .ffs-acks .jc-from { display: block; }
.tag-item .tag-from { margin-inline-start: 0.3rem; }

/* F58 (2026-10-19): the combine confirm stays inside its card at 320px 200%; long job types fit without splitting */
.jc-confirm { grid-template-columns: minmax(0, 1fr); }
.jc-confirm > *, .jc-opt > span { min-width: 0; }
html.ff-tw-xs .jc-opt-m, html.ff-tw-s .jc-opt-m { font-size: max(0.6rem, 16px); }
html.ff-tw-xs .jc-confirm p, html.ff-tw-s .jc-confirm p, html.ff-tw-xs .jc-keep legend, html.ff-tw-s .jc-keep legend { font-size: max(0.72rem, 16px); }
html.ff-tw-xs .jc-opt, html.ff-tw-s .jc-opt { gap: 0.25rem; }
/* Idea 77 */
.job-missing { display: grid; gap: 0.5rem; padding: 0.9rem; border-width: 2px; }
.job-missing p { margin: 0; font-size: 1rem; }
.job-missing .job-missing-h { font-weight: 700; font-size: 1.15rem; }
.job-missing .btn { min-height: 44px; justify-self: start; }
/* Idea 76 */
.jc-dup .jc-h { font-size: 1.2rem; }
.jc-dup-list { margin: 0; padding-inline-start: 1.2rem; font-size: 1.05rem; display: grid; gap: 0.3rem; }
.jc-date .hint { margin: 0 0 0.4rem; }

/* Trade pack sheets at 320px with big text (2026-10-19): one column of sign-off fields, less padding, words stay whole */
.pack-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pack-fields span, .pack-checks li { min-width: 0; }
html.ff-tw-xs .pack-fields, html.ff-tw-s .pack-fields { grid-template-columns: minmax(0, 1fr); font-size: max(0.72rem, 16px); }
html.ff-tw-xs .pack-sheet, html.ff-tw-s .pack-sheet { padding: 0.4rem 0.35rem; }
html.ff-tw-xs .pack-checks li, html.ff-tw-s .pack-checks li { font-size: max(0.72rem, 16px); }
html.ff-tw-xs .pack-box, html.ff-tw-s .pack-box { margin-right: 0.3rem; }
/* iPhone top bar title at big text: one line, cut with an ellipsis instead of breaking a word (the page heading below has the full title) */
html.ff-tw-xs .ffs-title, html.ff-tw-s .ffs-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal; min-width: 0; }
/* Upsell card at 320px with big text: the two buttons wrap instead of running off the side */
.ff-upsell-actions { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.ff-upsell-actions .btn { max-width: 100%; }
html.ff-tw-xs .ff-upsell, html.ff-tw-s .ff-upsell { padding: 0.4rem 0.35rem; }

/* F64 (2026-10-19): checklist card tools (Move, Remove, Up, Down) wrap inside the card at narrow widths and large text */
.phase-tools { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.phase-tools .btn { max-width: 100%; } /* idea 81: labels stay on one line (i18n.css), the row wraps instead */
/* F62: the checklist note is a textarea that grows with its text */
textarea.phase-note { resize: none; overflow: hidden; min-height: 44px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: break-word; font-family: inherit; }
/* 2026-10-19 QA Garantieunterlagen: on very narrow or zoomed screens the checklist text gets the full card width */
html.ff-tw-xs .phase-top { flex-wrap: wrap; }
html.ff-tw-xs .phase-body { flex: 1 1 100%; }
/* 2026-10-19 F69/F70: My jobs tabs are whole tabs that wrap into rows (never split, never overlap); label and count are 16px or larger */
.jobs-seg { display: flex; flex-wrap: wrap; }
.jobs-seg button { flex: 1 1 auto; flex-direction: row; gap: 0.35em; padding: 0.3rem 0.7rem; min-height: 44px; font-size: max(1rem, 16px); white-space: nowrap; min-width: 0; }
.jobs-seg .seg-n { font-size: max(1rem, 16px); }
html.ff-tw-xs .jobs-seg, html.ff-tw-s .jobs-seg { display: flex; }
@media (max-width: 340px) { .jobs-seg button { font-size: max(1rem, 16px); } }
/* 2026-10-19 bundle layout pass: photo buttons never push the page sideways at large text */
#step-4 .snap-target { flex-wrap: wrap; min-width: 0; max-width: 100%; }
#step-4 .snap-target > * { min-width: 0; }
/* 2026-10-19 QA F73/F75/F77/F74: photo buttons on their own row, 44px; step chips and My jobs rows never push sideways */
html .photo-slot .thumb { display: flex; flex-wrap: wrap; gap: 4px; }
html .photo-slot .thumb img { flex: 1 1 100%; }
html .photo-slot .thumb .thumb-mark, html .photo-slot .thumb .thumb-del { position: static; flex: 1 1 100%; width: auto; height: auto; min-height: 44px; min-width: 44px; white-space: nowrap; padding: 0 6px; border-radius: 6px; background: rgba(20,20,20,.85) !important; color: #fff; font-size: 1rem; }
html .photo-slot .thumb .thumb-del::before { display: none; }
html .photo-slot .thumb .thumb-del:hover, html .photo-slot .thumb .thumb-del:focus-visible { background: #b3261e !important; }
.job-row-main, .job-row-top { min-width: 0; overflow-wrap: break-word; }
.job-row-top { flex-wrap: wrap; }
.job-row-actions.is-row .btn { max-width: 100%; }
.auth-help-link { display: block; width: 100%; text-align: left; min-height: 44px; }
.job-steps { flex-wrap: wrap; } .job-steps > a, .job-steps > button { white-space: nowrap; }
/* F68: lightbox placeholder while an account photo loads */
#jobs-lightbox.is-loading #lb-img { min-width: 200px; min-height: 200px; background: rgba(255,255,255,.08); border-radius: 8px; }

/* F78: long words in legal prose hyphenate (prose only, never buttons or labels) */
.ffl-legal-prose p, .ffl-legal-prose li, .ffl-legal-prose dd, .ffl-legal-prose td { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.ffl-legal-prose .btn, .ffl-legal-prose button, .ffl-legal-prose label, .ffl-legal-prose a.btn { -webkit-hyphens: manual; hyphens: manual; }
/* F73 v2: photo buttons take the full card width; at large text each photo gets its own row */
.photo-slot .thumbs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9em), 1fr)) !important; min-width: 0; }
.photo-slot .thumb { min-width: 0; overflow: visible; }
html .photo-slot .thumb .thumb-mark, html .photo-slot .thumb .thumb-del { width: 100%; box-sizing: border-box; max-width: none; overflow: visible; }

/* F74b: each recovery link on its own full-width line, never wraps */

/* F81: never show a broken image while loading */
#jobs-lightbox.is-loading #lb-img,.photo-tile.is-loading img{visibility:hidden}
.photo-tile.is-loading{background:var(--soft,#e8e4dc)}
#lb-img:not([src]){visibility:hidden}

/* F101: forgot links stack, one full-width row each, full label at 16px or larger. A long label may wrap between words, never clips. */
.auth-help-row, body.ff-auth-gate #auth-root .auth-help-row { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; }
.auth-help-link, body.ff-auth-gate #auth-root .auth-help-link { display: block; width: 100%; max-width: 100%; text-align: start; font-size: clamp(16px, 1rem, 6vw); white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: manual; min-height: 44px; overflow: visible; text-overflow: clip; padding-inline: 0; }

/* F92: Say-It cards: one short title per button, one line, fit by the shared button fit (16px floor) */
.ffs-list li > .ffs-card { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; white-space: nowrap; text-align: start; overflow-wrap: normal; font-size: max(1rem, 16px); }
.ffs-card .ffs-card-t { white-space: nowrap; font-weight: 700; }
/* F92: safety and checklist rows are checkboxes with labels; the box keeps its look, the real input sits under it */
.check-toggle { position: relative; box-sizing: border-box; min-height: 44px; }
.check-input { position: absolute; inset-inline-start: 0.7rem; top: 0.65rem; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.check-input:checked ~ .check-box { background: var(--ok); border-color: var(--ok); }
.check-input:focus-visible ~ .check-box { outline: 3px solid var(--accent); outline-offset: 2px; }
.check-toggle .check-text { font-size: max(1rem, 16px); line-height: 1.4; white-space: normal; overflow-wrap: normal; hyphens: manual; }

/* F95: every tap target is at least 44px wide, even a short label like "Menu" in Hindi or Thai */
.nav-toggle, #btn-menu, .btn, .chip, .chip-sm, .tracker-tab, [role=tab], .auth-tab { min-width: 44px; box-sizing: border-box; }
/* F98: no mid-word splits: the Current badge stays one word on one line; the GC code heading is not forced to capitals */
.job-badge { white-space: nowrap; overflow-wrap: normal; word-break: normal; hyphens: manual; max-width: 100%; flex: none; display: inline-block; font-size: clamp(16px, 1rem, 5.6vw); }
.gc-code-box .job-group-title { text-transform: none; letter-spacing: 0; overflow-wrap: normal; word-break: normal; font-size: clamp(16px, 1rem, 5.2vw); }

/* F92: safety rows: one short label per row on one line */
#safety-list .check-toggle { align-items: center; white-space: nowrap; max-width: 100%; }
#safety-list .check-text { white-space: nowrap; overflow-wrap: normal; }

/* F95: the menu button stays 44px wide in every language */
html .nav-inner .nav-toggle, html .nav-toggle { min-width: 44px; }
/* q35: job-type chips stay on one line from 320px up. The grid uses the panel's side padding, chips use tight padding and 600 weight. */
.chip-grid-jobs .chip { font-weight: 600; }
@media (max-width: 480px) {
  main.wrap section.form-panel .chip-grid-jobs { margin-inline: calc(-1 * min(0.95rem, 4.75vw)); }
  html.ff-tw-xs main.wrap section.form-panel .chip-grid-jobs { margin-inline: 0; }
  .chip-grid-jobs .chip { padding-left: 8px; padding-right: 8px; }
}
/* F105: every Say card centers its title the same way */
.ffs-list li > .ffs-card { justify-content: center; text-align: center; }
/* Refer a friend (2026-10-20): buttons stay on one line, 16px+ text */
.ref-btn { white-space: nowrap; font-size: 1rem; min-height: 44px; }
.ref-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ref-code { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.12em; margin: 0.25rem 0; }
.ref-link { font-size: 1rem; word-break: break-all; }
.ref-code-in { font-size: 1rem; min-height: 44px; text-transform: uppercase; letter-spacing: 0.1em; max-width: 12rem; }
/* t433 (Ty 9:40 PM): summary card text wraps, the Change/Close pill never sits on the value */
html .chip.chip-summary { white-space: normal !important; flex-wrap: wrap; row-gap: 0.35rem; height: auto; }
html .chip.chip-summary .cs-k, html .chip.chip-summary .cs-v { white-space: normal !important; overflow-wrap: anywhere; }
html .chip.chip-summary .cs-v { flex: 1 1 8rem; }
html .chip.chip-summary .cs-change { white-space: nowrap !important; margin-inline-start: auto; position: static; flex: 0 0 auto; }
/* F134: a gap before the plan badge in every language, wraps to its own line instead of running together */
#crew-roles-heading .opt, summary .opt { margin-inline-start: 0.4em; display: inline-block; white-space: normal; }
/* t433: Say-It Cards fold (collapsed by default) and the custom card translation */
.ffs .ffs-h2 { margin: 0; font-size: inherit; }
.ffs-fold { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; min-height: 48px; padding: 0.4rem 0; background: none; border: 0; color: var(--ink); font: inherit; font-size: max(1.25rem, 16px); font-weight: 800; text-align: start; cursor: pointer; }
.ffs-fold-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.ffs-fold-i { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 2px solid var(--line); border-radius: 999px; font-size: 1.25rem; line-height: 1; }
.ffs-body[hidden] { display: none !important; }
.ffs-trade { margin: 0.2rem 0 0.4rem; font-weight: 700; color: var(--muted); font-size: 1rem; overflow-wrap: anywhere; }
.ffs-trout { margin: 0.5rem 0; font-size: max(1rem, 16px); overflow-wrap: anywhere; }
.ffs-trout.is-err, .ffs-na { color: #b3261e; font-weight: 700; font-size: max(1rem, 16px); }
.ffs-trlab { display: block; max-width: 100%; font-weight: 800; font-size: max(1rem, 16px); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffs-trsrc { display: block; max-width: 100%; font-size: max(1rem, 16px); }
#ffs-tr, #ffs-add { margin-top: 0.5rem; min-height: 44px; min-width: 44px; font-size: max(1rem, 16px); white-space: nowrap; }

/* F139 (t433): no visible text under 16px anywhere. Small headings, tags, notes, labels, the Sample preview and the tab bar get a 16px floor that still grows with the text size. */
html :is(.eyebrow, .tier-tag, .status-tag, .ffr-group, .lede, .home-sync, .ffs-note, .ffs-alt, .tag, .auth-label, .ffs-pill, .acc-sum, .step-done, .snap-sub, label, .hint, .opt, small, .pill, .badge, [class^="sample-folio"], [class*=" sample-folio"], [class^="sample-folio"] *, [class*=" sample-folio"] *, .sample-folio-mock *, .seg button, [role=tab]) { font-size: max(1rem, 16px) !important; }
html .ffs-tab > span { font-size: max(1rem, 16px) !important; }
html :is(.step-check-sub) { font-size: max(1rem, 16px) !important; }
html :is(.ffs-textbtn, .textbtn, .link-btn) { font-size: max(1rem, 16px) !important; }

/* t433: while the header re-fits after a text-size change the menu button can sit past the edge for a moment; never let that scroll the page sideways */
html header.nav { overflow-x: clip; }

/* F144: Korean wraps between words, not inside them */
:lang(ko), :lang(ko) * { word-break: keep-all; overflow-wrap: anywhere; }

.ffs-trnote { display: block; margin-top: 6px; max-width: 100%; font-size: max(1rem, 16px); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffs-trout.is-unchecked .ffs-trnote { color: var(--ink, #121417); font-weight: 700; }
#ffs-tredit { outline: 1px dashed currentColor; outline-offset: 2px; padding: 10px 12px; min-height: 44px; min-width: 44px; display: block; width: 100%; box-sizing: border-box; font-size: max(1rem, 16px); }

/* t436 F148: inline Terms and Conditions links get a 44px tap target; the hit area grows, the layout does not */
a[href*="/site/terms"]:not(.btn) { position: relative; }
a[href*="/site/terms"]:not(.btn)::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; min-width: 44px; transform: translateY(-50%); }

/* F151 (t438): the Sample sheet sits below the header (and the notch) and scrolls inside, so its title and top Close are always in view on short screens */
.sample-modal { box-sizing: border-box; padding-top: max(var(--sample-top, 0px), env(safe-area-inset-top, 0px)); }
.sample-modal-panel {
  max-height: calc(100vh - max(var(--sample-top, 0px), env(safe-area-inset-top, 0px)) - var(--safe-bottom) - 8px);
  max-height: calc(100dvh - max(var(--sample-top, 0px), env(safe-area-inset-top, 0px)) - var(--safe-bottom) - 8px);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
  .sample-modal-panel {
    max-height: min(760px, calc(100vh - max(var(--sample-top, 0px), env(safe-area-inset-top, 0px)) - var(--safe-bottom) - 16px));
    max-height: min(760px, calc(100dvh - max(var(--sample-top, 0px), env(safe-area-inset-top, 0px)) - var(--safe-bottom) - 16px));
  }
}

/* F148 (t439): inline Terms, Privacy and Billing links get a 44px tall tap area; inline padding grows the hit box, not the line */
:is(p, label, li, span, small) > a:is([href*="terms"], [href*="privacy"], [href*="billing"], [href*="manage-plan"], [href^="mailto:"]):not(.btn):not(.ffs-btn),
[data-ff-legal] a, .ff-legal-p a { display: inline; padding-top: 13px; padding-bottom: 13px; }
/* t440 audit fix 11: other in-sentence links get the same 44px tap height; zero specificity so styled links keep their own look */
:where(p > a[href]:not(.btn, .ffs-btn, [class*="btn"], [role="button"])) { display: inline; padding-top: 13px; padding-bottom: 13px; }
/* F156 (t439): step titles and FAQ questions wrap evenly, never mid-word */
.step-title, details > summary, .faq summary { text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* F159 (t439): Open Crew lands with the Crew box below the bar */
#crew-roles-details { scroll-margin-top: max(80px, calc(var(--ffs-top-h, 0px) + var(--ffs-st, 0px) + 10px)); } /* F159 (t441): clears the 70px sticky web header */

/* F175/F156 (t441): nested section toggles and chips get a little more room on phones so their labels stay on one line at 16px;
   step titles and group labels that must wrap do it evenly, and "(optional)" moves to the next line whole */
@media (max-width: 480px) {
  main.wrap details.more-advanced { padding-left: 0.25rem; padding-right: 0.25rem; }
  main.wrap .more-advanced-body details.docs-block { padding-left: 0.25rem; padding-right: 0.25rem; }
  .job-group-title { letter-spacing: 0; }
}
.phase-title > span:first-child { text-wrap: balance; min-width: 0; }
.job-group-title .opt { white-space: nowrap; }
/* F159 native (t442): Open Crew scrolls the whole Crew section; its heading clears the web header and the 52px native header plus the notch */
#crew-roles-wrap { scroll-margin-top: max(80px, calc(var(--ffs-top-h, 0px) + var(--ffs-st, 0px) + 10px), calc(52px + env(safe-area-inset-top, 0px) + 12px)); }
/* F181 (t444): a short inline legal link (de "AGB") gets a 44px wide tap area too; the padding grows the hit box and the negative margin keeps the line as it was */
:is(p, label, li, span, small) > a:is([href*="terms"], [href*="privacy"], [href*="billing"], [href*="manage-plan"]):not(.btn):not(.ffs-btn), [data-ff-legal] a, .ff-legal-p a, a.ff-legal-a { padding-inline: 6px; margin-inline: -6px; }

/* t444 F156: a step title gets its own full-width row so it has room to stay on one line; its status pill sits on the row below */
.phase-title > span:first-child { flex: 1 1 100%; }
/* t444 F156 native: the setup card header puts the title on its own full-width row; the number, Done pill and chevron share the row above */
.acc-head:has(> .acc-titles) { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "num done . chev" "titles titles titles titles"; column-gap: 0.6rem; row-gap: 0.3rem; align-items: center; }
.acc-head:has(> .acc-titles) > .step-num { grid-area: num; }
.acc-head:has(> .acc-titles) > .step-done { grid-area: done; margin: 0; justify-self: start; }
.acc-head:has(> .acc-titles) > .acc-chev { grid-area: chev; }
.acc-head:has(> .acc-titles) > .acc-titles { grid-area: titles; min-width: 0; }
/* t444 F175: on phones group labels drop the capitals and letter spacing, so they fit on one line */
@media (max-width: 600px) { .job-group-title { text-transform: none; letter-spacing: 0; } }
/* t444 F156 (320px): on phones a step's number and status pill share the top row and its title gets the full card width on the row below,
   so "6. Clean up & show the customer" stays on one line at 16px (the title alone had 198px at 320 next to the number) */
@media (max-width: 480px) {
  .phase-top { display: grid; grid-template-columns: auto auto 1fr; column-gap: 0.6rem; row-gap: 0.35rem; align-items: center; }
  .phase-top > .phase-body, .phase-top .phase-title { display: contents; }
  .phase-top > .phase-num { grid-row: 1; grid-column: 1; }
  .phase-top .phase-pill { grid-row: 1; justify-self: start; }
  .phase-top .phase-title > span:first-child { grid-row: 2; grid-column: 1 / -1; }
  .phase-top .phase-title > .jc-from, .phase-top .phase-body > :not(.phase-title) { grid-column: 1 / -1; }
}

/* t445 (Ty 3:23 PM Oct 23): one shared footer, the same look on app pages as on the site. Links stay on ONE row from 1024px up. */
.footer { border-top: 2px solid var(--line); padding: 1.5rem 0; margin-top: 1.5rem; color: var(--muted); font-size: 1rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; justify-content: space-between; align-items: center; }
.footer a { color: var(--ink); font-weight: 650; text-decoration: none; }
.footer a:hover { color: var(--accent); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; justify-content: flex-end; margin-left: auto; max-width: 100%; }
@media (max-width: 720px) { .footer-inner { flex-direction: column; align-items: stretch; } .footer-links { margin-left: 0; } .footer-inner > span { text-align: right; } }
/* Container query, not a media query: rem here follows the page text size, so 200% text gets room to wrap instead of overlapping. 56rem = 896px at 100% (a 1024px screen gives 942px). */
.footer-inner { container-type: inline-size; container-name: fffoot; }
@container fffoot (min-width: 56rem) {
  .footer-links { flex-wrap: nowrap; white-space: nowrap; margin-left: auto; }
  .footer-links a { white-space: nowrap; flex-shrink: 0; }
}

/* ===== F175 one line (b-site-oneline) =====
   Invite labels and the join sheet title stay on one line.
   Job step titles are not changed here. */
html #crew-accept-form > .job-group-title,
html .ff-pay-h,
html #ff-join-h {
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: max(1rem, 16px) !important;
  line-height: 1.2;
}
html #ff-join-sheet .share-sheet-head { flex-wrap: wrap; row-gap: 0.35rem; }
html #ff-join-h { flex: 1 0 100%; min-height: 44px; display: flex; align-items: center; }
/* F180: header and language-button rules also live here so they apply with the first stylesheet.
   i18n.css repeats them. Chromium can paint before i18n.css, and these controls must not move. */
.ffl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-width: 44px; min-height: 44px; padding: 0 0.55rem; margin: 0; border: 1.5px solid var(--line, #c8c4bb); border-radius: 999px; background: var(--panel, #fff); color: var(--ink, #121417); font: inherit; font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; flex: none; -webkit-tap-highlight-color: rgba(196, 122, 44, 0.2); }
.ffl-ico { flex: none; }
@media (max-width: 380px) { .ffl-code { display: none; } .ffl-btn { padding: 0 0.5rem; } }
/* 2026-10-20 header (Ty): language, light/dark and Menu sit together at the right edge in that order on every page, never centered.
   Sample (login page only) sits to the left of language, so the other three never move. */
.nav-inner { flex-wrap: wrap; position: relative; gap: 0 !important; row-gap: 0.4rem !important; }
.nav > .container.nav-inner { width: min(1080px, 92%) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; }
.nav-inner > .ffl-btn { margin-inline-start: auto !important; margin-inline-end: 0 !important; }
.nav-inner > .theme-toggle, .nav-inner > .nav-toggle { margin-inline-start: 0.4rem !important; margin-inline-end: 0 !important; flex-shrink: 0; }
.nav-inner > .ffl-btn ~ .theme-toggle { margin-inline-start: 0.4rem !important; }
.nav-inner > .logo { min-width: 0; flex-shrink: 1; }
.nav-inner > #btn-sample { margin-inline-start: auto !important; }
.nav-inner > #btn-sample ~ .ffl-btn { margin-inline-start: 0.4rem !important; }
@media (max-width: 380px) {
  .nav-inner > .logo { gap: 0.35rem; font-size: 0.95rem; letter-spacing: 0; }
  .nav-inner > .logo .logo-mark { width: 26px; height: 26px; }
  .nav-inner > .theme-toggle, .nav-inner > .nav-toggle, .nav-inner > .ffl-btn ~ .theme-toggle, .nav-inner > #btn-sample ~ .ffl-btn { margin-inline-start: 0.15rem !important; }
  .nav-inner > .nav-toggle { padding-left: 0.4rem !important; padding-right: 0.4rem !important; min-width: 44px !important; }
}
@media (max-width: 340px) { .nav-inner > .logo { font-size: 0; gap: 0; min-width: 44px; min-height: 44px; } .nav-inner > .logo .logo-mark { width: 32px; height: 32px; } }
@media (max-width: 440px) { .nav-inner:has(> #btn-sample:not([hidden])) > .logo { font-size: 0; gap: 0; min-width: 44px; min-height: 44px; } .nav-inner:has(> #btn-sample:not([hidden])) > .logo .logo-mark { width: 32px; height: 32px; } }
/* same spacing between the right side controls on every page (beats older page rules) */
header.nav > .nav-inner > .ffl-btn ~ .theme-toggle, header.nav > .nav-inner > .theme-toggle ~ .nav-toggle, header.nav > .nav-inner > #btn-sample ~ .ffl-btn { margin-inline-start: 0.4rem !important; margin-inline-end: 0 !important; }
@media (max-width: 380px) { header.nav > .nav-inner > .ffl-btn ~ .theme-toggle, header.nav > .nav-inner > .theme-toggle ~ .nav-toggle, header.nav > .nav-inner > #btn-sample ~ .ffl-btn { margin-inline-start: 0.15rem !important; } }
/* very narrow phones in long languages: only the logo mark shows so the controls stay on one row */
@media (max-width: 380px) { header.nav > .nav-inner > .logo { font-size: 0 !important; gap: 0 !important; min-width: 44px; min-height: 44px; } header.nav > .nav-inner > .logo .logo-mark { width: 32px; height: 32px; } }
/* login page on 320px phones in long languages: the logo steps aside so Sample, language, light/dark and Menu stay on one row */
@media (max-width: 340px) { header.nav > .nav-inner:has(> #btn-sample:not([hidden])) > .logo { display: none !important; } }
/* F125 (2026-10-21): header one row at 100% and 200% text, every page. i18n.js steps up ff-nav-t1..t4 until it fits:
   t1 hides the logo word, t2 compacts the language pill to its code (no globe), t3 hides the logo mark, t4 tightens gaps. Tap targets stay 44px. */
.nav-inner { flex-wrap: nowrap !important; }
.nav-inner > * { flex-shrink: 0; }
.nav-inner > .logo { min-width: 0; flex-shrink: 1; overflow: hidden; }
.nav-inner.ff-nav-t1 > .logo { font-size: 0 !important; gap: 0 !important; }
.nav-inner.ff-nav-t2 .ffl-btn svg { display: none !important; }
.nav-inner.ff-nav-t2 .ffl-code { display: inline !important; }
.nav-inner.ff-nav-t3 > .logo { display: none !important; }
.nav-inner.ff-nav-t3 > :nth-child(2) { margin-inline-start: auto !important; }
.nav-inner.ff-nav-t4 { gap: 0.2rem !important; padding-inline: 0.4rem !important; }
.nav-inner.ff-nav-t4 > button { padding-inline: 0.45rem !important; margin-inline: 0 !important; }
/* t5, t6: last steps before wrapping at 200% text. Labels shrink but never below 16px. */
.nav-inner.ff-nav-t5 > button, .nav-inner.ff-nav-t5 .ffl-code { font-size: max(16px, 0.75rem) !important; }
.nav-inner.ff-nav-t6 > button, .nav-inner.ff-nav-t6 .ffl-code { font-size: max(16px, 1rem) !important; padding-inline: 0.35rem !important; }
.nav-inner.ff-nav-t6 { gap: 4px !important; padding-inline: 6px !important; }
.nav-inner.ff-nav-t6 > * { margin-inline: 0 !important; }
.nav-inner.ff-nav-t6 > :first-child:not(.logo), .nav-inner.ff-nav-t6 > .logo + * { margin-inline-start: auto !important; }
.nav-inner.ff-nav-t6 > button { padding-inline: 6px !important; min-width: 44px !important; gap: 0 !important; }
/* audit fix 13 (t442): until the language button is inserted, the theme button keeps its place, so Sample and the logo do not jump */
.nav-inner:not(:has(> .ffl-btn)) > #btn-theme { margin-inline-start: calc(0.8rem + 64px) !important; }
@media (max-width: 380px) { .nav-inner:not(:has(> .ffl-btn)) > #btn-theme { margin-inline-start: 46px !important; } }
/* F180: the site theme button is added by script. Hold its 44px slot so language and Menu do not jump when it arrives. */
header.nav .nav-inner > .ffl-btn:not(:has(~ .theme-toggle)) { margin-inline-end: calc(44px + 0.4rem) !important; }
@media (max-width: 380px) { header.nav .nav-inner > .ffl-btn:not(:has(~ .theme-toggle)) { margin-inline-end: calc(44px + 0.15rem) !important; } }

/* F185: Copy link and Copy code keep one width while the label says Copied, so the row does not move.
   Both words share one grid cell. The wider word sets the button. The label stays on one line. */
html body .ref-btns > button.ref-btn[data-ref-act="copy"],
html body .ref-btns > button.ref-btn[data-ref-act="copycode"] {
  display: inline-grid;
  justify-items: center;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  font-size: max(1rem, 16px);
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
}
html body .ref-btns > button.ref-btn[data-ref-act="copy"] > span,
html body .ref-btns > button.ref-btn[data-ref-act="copycode"] > span {
  grid-area: 1 / 1;
  white-space: nowrap;
}
html body .ref-btns > button.ref-btn[data-ref-act="copy"]:not(.is-copied) > .ref-copied,
html body .ref-btns > button.ref-btn[data-ref-act="copycode"]:not(.is-copied) > .ref-copied,
html body .ref-btns > button.ref-btn.is-copied > .ref-idle {
  visibility: hidden;
}
/* F183 footer links on one row, F184 one tagline.
   Below 768px the tagline wraps in the row, fully visible, and does not stick out.
   From 768px up it stays one line. Its size stays at 16px.
   The seven links are one row from 1024px up. At 320 and 390 the short labels,
   the same seven links in fewer letters, stay on one row.
   Container queries use rem, so 200% text lets the links wrap instead of overlapping. */
html body .footer > .container.footer-inner {
  width: min(1080px, 100%);
  max-width: 1080px;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  container-type: inline-size;
  container-name: fffoot;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.15rem;
}
html body .footer .footer-brand {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: visible;
  text-align: center;
  font-size: 16px;
  line-height: 1.35;
  flex: none;
}
@media (min-width: 768px) {
  html body .footer .footer-brand {
    white-space: nowrap;
  }
}
html body .footer .footer-links {
  margin-left: 0;
  max-width: none;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.35rem;
}
html body .footer .footer-links .ff-short { display: none; }
html body .footer .footer-links .ff-full { display: inline; }
@container fffoot (min-width: 64rem) {
  html body .footer .footer-links {
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: center;
    gap: 0 0.75rem;
  }
  html body .footer .footer-links a {
    white-space: nowrap !important;
    max-width: none !important;
    flex-shrink: 0;
  }
}
@container fffoot (min-width: 16rem) and (max-width: 30rem) {
  html body .footer .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 6px;
    width: 100%;
  }
  html body .footer .footer-links .ff-full { display: none; }
  html body .footer .footer-links .ff-short { display: inline; }
  html body .footer .footer-links a {
    white-space: nowrap !important;
    max-width: none !important;
    flex: 0 0 auto;
    letter-spacing: 0;
    padding-left: 0;
    padding-right: 0;
    min-width: 44px;
    min-height: 44px;
  }
}
/* t446: at 481px to 800px the full footer labels wrap to 2 rows in ms, ru and uk, so those three use the same short labels as small widths. */
@media (min-width: 481px) and (max-width: 800px) {
  html:is([lang="ms"], [lang="ru"], [lang="uk"]) body .footer .footer-links .ff-full { display: none; }
  html:is([lang="ms"], [lang="ru"], [lang="uk"]) body .footer .footer-links .ff-short { display: inline; }
}
/* t446 (Ty 7:49 PM Oct 23): the footer tagline stays on ONE line. Below 768px it is the short line, from 768px up the full line. */
html body .footer .footer-brand { white-space: nowrap; text-wrap: nowrap; }
html body .footer .footer-brand .ff-tag-short { display: none; }
@media (max-width: 767.98px) {
  html body .footer .footer-brand .ff-tag-full { display: none; }
  html body .footer .footer-brand .ff-tag-short { display: inline; }
}

/* F187 F188: footer links keep their natural letter-spacing and natural width.
   One row comes from the short labels and a tight gap, not from squeezing glyphs.
   Below 480px the Home link is hidden. The logo still goes home.
   Each link is at least 44 by 44. Weight 400 selects the regular face.
   Noto Sans is named so the width stays the one these labels were measured with.
   Big text (ff-tw-xs, ff-tw-s, ff-tw-m) may wrap so nothing overlaps or scrolls sideways. */
html body .footer .footer-links {
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
}
html body .footer .footer-links a {
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  font-stretch: normal !important;
  font-weight: 400;
  font-family: "Noto Sans", "Segoe UI", system-ui, sans-serif;
  font-size: max(16px, 1rem);
  line-height: 1.2;
  flex: 0 0 auto !important;
  min-width: 44px;
  min-height: 44px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  white-space: nowrap !important;
  max-width: none !important;
}
@media (max-width: 767.98px) {
  html body .footer .footer-links .ff-full { display: none !important; }
  html body .footer .footer-links .ff-short { display: inline !important; }
}
@media (min-width: 768px) {
  html body .footer .footer-links { gap: 0 0.25rem; }
  html body .footer .footer-links .ff-full { display: inline !important; }
  html body .footer .footer-links .ff-short { display: none !important; }
  html:is([lang="ms"], [lang="ru"], [lang="uk"]) body .footer .footer-links .ff-full { display: inline !important; }
  html:is([lang="ms"], [lang="ru"], [lang="uk"]) body .footer .footer-links .ff-short { display: none !important; }
}
@media (min-width: 1024px) {
  html body .footer .footer-links { gap: 0 0.75rem; }
}
@media (max-width: 479.98px) {
  html body .footer .footer-links { gap: 0 6px; flex-wrap: wrap; justify-content: center; }
  html body .footer .footer-links a[href="/site/"] { display: none !important; }
  html body .footer .footer-brand { letter-spacing: 0; word-spacing: normal; }
}
html.ff-tw-xs body .footer .footer-links,
html.ff-tw-s body .footer .footer-links,
html.ff-tw-m body .footer .footer-links {
  flex-wrap: wrap !important;
}
html.ff-tw-xs body .footer .footer-links a,
html.ff-tw-s body .footer .footer-links a,
html.ff-tw-m body .footer .footer-links a {
  white-space: normal !important;
}
/* F193 / F298: at 768px and below, short labels stay on one row when they fit.
   The gap is 8px, and 6px from 480px down, so a 320px row does not need
   negative letter-spacing. If a language is still wider, the row wraps.
   Each link stays at least 44px tall and the type stays 16px. */
@media (max-width: 768px) {
  html body .footer .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    justify-content: safe center;
    align-items: center;
    gap: 0 8px;
    width: 100%;
    max-width: 100%;
  }
  html body .footer .footer-links .ff-full { display: none !important; }
  html body .footer .footer-links .ff-short { display: inline !important; }
  html:is([lang="ms"], [lang="ru"], [lang="uk"]) body .footer .footer-links .ff-full { display: none !important; }
  html:is([lang="ms"], [lang="ru"], [lang="uk"]) body .footer .footer-links .ff-short { display: inline !important; }
  html body .footer .footer-links a {
    box-sizing: border-box;
    padding-inline: 0;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto !important;
    font-size: max(16px, 1rem);
  }
}
@media (max-width: 479.98px) {
  /* F203: Home and Pricing hide by href. Those addresses are not rewritten.
     The app link hides by class. storelink.js rewrites its href on iPhone, so an href selector would miss it.
     About, How it works, Contact and Legal stay. */
  html body .footer .footer-links a[href="/site/pricing"],
  html body .footer .footer-links a.ff-foot-app { display: none !important; }
  html body .footer .footer-links { flex-wrap: wrap; justify-content: center; gap: 0 6px; }
  html body .footer .footer-links a { padding-inline: 0; letter-spacing: 0; word-spacing: normal; }
}
/* F191: the job title stays on one line. At phone width the Sample, language
   and theme controls become 44px icons so a long word is not split. */
html.ffs #ffs-title {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
html.ffs:not(.ff-tw-xs):not(.ff-tw-s) #ffs-title {
  white-space: nowrap;
}
@media (max-width: 420px) {
  html.ffs .ffs-top-in {
    gap: 2px;
    padding-left: 2px;
    padding-right: 2px;
  }
  html.ffs .ffs-top-r { gap: 2px; }
  html.ffs .ffs-back {
    margin-left: 0;
    padding: 0;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    justify-content: center;
  }
  html.ffs .ffs-back span { display: none; }
  html.ffs:not(.ff-tw-xs):not(.ff-tw-s) #ffs-title {
    font-size: max(1rem, 16px);
    line-height: 1.2;
  }
  html.ffs .ffs-top #ffs-sample {
    font-size: 0 !important;
    line-height: 0;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    gap: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  html.ffs .ffs-top #ffs-sample::before {
    content: "";
    width: 16px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-radius: 2px;
    background:
      linear-gradient(currentColor, currentColor) 3px 4px / 8px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 3px 8px / 8px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 3px 12px / 6px 2px no-repeat;
  }
  html.ffs .ffs-theme {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-right: 0;
  }
  html.ffs .ffs-top-r .ffl-code { display: none; }
  html.ffs .ffs-top-r .ffl-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    gap: 0;
  }
}

/* F192: the skip helper and the save pill stay on one line. */
.form-panel .step-check-btn {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-areas: "box label" "sub sub";
  align-items: center;
  column-gap: 0.4rem;
  row-gap: 0.1rem;
  padding: 0.4rem;
}
.form-panel .step-check-box { grid-area: box; }
.form-panel .step-check-text { display: contents; }
.form-panel .step-check-label,
.form-panel .step-check-sub {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.form-panel .step-check-label { grid-area: label; }
.form-panel .step-check-sub { grid-area: sub; }
@media (max-width: 420px) {
  .form-panel .step-check { margin-left: -0.45rem; margin-right: -0.45rem; }
  .form-panel .step-check-btn { padding-left: 0.35rem; padding-right: 0.35rem; }
}
html #save-pill-text {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
@media (max-width: 420px) {
  html .save-row,
  html.ff-has-session .save-row,
  body.ff-signed-in .save-row {
    flex-wrap: wrap !important;
    align-items: stretch;
    row-gap: 0.35rem;
  }
  html .save-row .back-jobs {
    flex: 1 0 100%;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  html .save-row .save-pill,
  html .save-row .save-pill.is-warn {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
}