:root {
  /* Navy is the app's main color and crimson its accent. Both are dark enough to read in full sun
     with white text on them. Green is kept only where it means "go" or "good": the Start button,
     a lawn in progress, and Paid. */
  --navy: #0b2545;
  --navy-dark: #061a33;
  --navy-tint: #e2e9f3;
  --crimson: #b3122f;
  --crimson-dark: #8a0d24;
  --crimson-tint: #fbe1e5;
  --green: #1b6e2d;
  --green-dark: #124d1f;
  --green-tint: #e4f1e6;
  --ink: #0a1220;
  --muted: #3b4658;
  --bg: #f2f4f8;
  --card: #fff;
  --line: #c5ccd8;
  --edge: #5d6878;
  --danger: var(--crimson);
  --warn-bg: #fff3c4;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 18px; line-height: 1.35; color: var(--ink); background: var(--bg);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

#app { height: 100%; display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; position: relative; }

#topbar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  background: var(--navy); color: #fff; padding: 8px 8px 8px 16px; min-height: 56px;
  border-bottom: 4px solid var(--crimson);
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
}
#topbar h1 { font-size: 24px; margin: 0; }
.icon-btn { background: none; border: 0; color: inherit; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; }
.icon-btn:active { background: rgba(255, 255, 255, .2); }
.icon-btn.spin svg { animation: spin .8s linear infinite; }

#main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px 96px; }

#tabs { flex: none; display: flex; background: var(--card); border-top: 2px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
#tabs button {
  flex: 1; background: none; border: 0; padding: 8px 2px 6px; min-height: 62px; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 14px; font-weight: 600;
}
#tabs svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#tabs button.on { color: var(--navy); box-shadow: inset 0 4px 0 var(--crimson); }

.auth { max-width: 460px; margin: 0 auto; padding: 40px 18px; }
.brand { font-size: 38px; margin: 0 0 4px; text-align: center; color: var(--navy); }
.brand span { color: var(--crimson); }
.center { text-align: center; }
.small { font-size: 15px; }
.link-btn.wide { display: block; width: 100%; }
.auth a { color: var(--navy); font-weight: 600; }

.card {
  display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; margin: 0 0 10px;
}
button.card:active { background: var(--navy-tint); }
.card-title { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-sub { color: var(--muted); margin-top: 2px; }
.card-meta { margin-top: 6px; font-weight: 600; }
.badge { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e3e3e3; color: #333; text-transform: uppercase; letter-spacing: .03em; }
.badge.owner { background: var(--navy-tint); color: var(--navy-dark); }
.badge.manager { background: var(--crimson-tint); color: var(--crimson-dark); }
.section-title { font-size: 15px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 18px 4px 8px; }
.big { font-size: 24px; font-weight: 700; margin: 0 0 2px; }
.muted { color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 28px 12px; }

.input, select.input, textarea.input {
  width: 100%; min-height: 52px; padding: 12px 14px; font-size: 18px; background: #fff;
  border: 2px solid var(--edge); border-radius: 12px; -webkit-appearance: none; appearance: none;
}
textarea.input { min-height: 96px; resize: vertical; }
.input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-tint); }
label.field { display: block; margin-bottom: 14px; font-weight: 700; }
label.field .input { margin-top: 6px; font-weight: 400; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 52px; font-weight: 700; margin-bottom: 14px; }
.check input { width: 28px; height: 28px; accent-color: var(--navy); }

.segmented { display: flex; margin: 10px 0 14px; border: 2px solid var(--navy); border-radius: 12px; overflow: hidden; }
.segmented button { flex: 1; min-height: 46px; padding: 0 2px; border: 0; background: #fff; font-size: 16px; font-weight: 700; color: var(--navy); }
.segmented button.on { background: var(--navy); color: #fff; }

.btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 12px 16px;
  border-radius: 14px; border: 2px solid var(--navy); background: var(--navy); color: #fff;
  font-size: 19px; font-weight: 700; text-decoration: none; margin-bottom: 10px;
}
.btn:active { background: var(--navy-dark); }
.btn.secondary { background: #fff; color: var(--navy); }
.btn.secondary:active { background: var(--navy-tint); }
.btn.danger { background: #fff; color: var(--danger); border-color: var(--danger); }
.btn[disabled] { opacity: .55; }
.btn-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.link-btn { background: none; border: 0; color: var(--navy); font-weight: 700; min-height: 48px; min-width: 64px; padding: 0 8px; }

.fab {
  position: absolute; right: 14px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); min-height: 56px; padding: 0 22px;
  border-radius: 999px; border: 0; background: var(--navy); color: #fff; font-size: 19px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.fab:active { background: var(--navy-dark); }

.info { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; }
.info > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line); }
.info > div:first-child { border-top: 0; }
.info .k { color: var(--muted); flex: none; }
.info .v { font-weight: 600; text-align: right; word-break: break-word; }
.gate { background: var(--warn-bg); border: 2px solid #c79a00; border-radius: 14px; padding: 12px 16px; margin-bottom: 12px; white-space: pre-wrap; }
.gate b { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }

.stop { padding: 0; overflow: hidden; border-left: 8px solid var(--edge); }
.stop.started { border-color: var(--green); background: var(--green-tint); border-left-width: 8px; }
/* Finished lawns are grayed out so the eye skips to what is left, but they still open when tapped. */
.stop.done { border-left-color: #98a1ae; background: #e3e6eb; border-color: #cfd4dc; border-left-color: #98a1ae; }
.stop.done .card-title { color: var(--muted); font-weight: 600; }
.stop.done .badge { background: #cfd4dc; }
.stop.done .badge.paid { background: var(--green-tint); }
.stop.done .badge.unpaid { background: var(--crimson-tint); }
.stop-head { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 14px 16px; }
.stop-head:active { background: var(--navy-tint); }
/* Full width, so Start and Finish are easy to hit with a thumb or a gloved hand. */
.stop .btn { width: calc(100% - 24px); margin: 0 12px 12px; }
.btn.start { background: var(--green); border-color: var(--green); }
.btn.start:active { background: var(--green-dark); }
.btn.finish { background: var(--crimson); border-color: var(--crimson); }
.btn.finish:active { background: var(--crimson-dark); }
.badge.paid { background: var(--green-tint); color: var(--green-dark); }
.badge.unpaid { background: var(--crimson-tint); color: var(--crimson-dark); }
.pick { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; margin-bottom: 8px; font-weight: 400; }
.pick input { flex: none; }
.pick b { display: block; }
.line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 0; margin-top: 8px; border-top: 1px solid var(--line); }
.line .btn { width: auto; min-height: 46px; margin: 0; padding: 6px 16px; font-size: 17px; }
.total { font-size: 34px; font-weight: 800; margin: 0; }
.link-box { margin-bottom: 10px; }
.spread { justify-content: space-between; flex-wrap: nowrap; }
.daynav { display: flex; align-items: center; gap: 10px; }
.daynav .btn { flex: none; width: 56px; margin: 0; padding: 0; font-size: 30px; line-height: 1; }
.daynav-date { flex: 1; text-align: center; }
.daynav-date .big { font-size: 21px; }
.btn.in-note { margin: 10px 0 0; }
.stop { position: relative; }
.stop.planned .stop-head { padding-right: 64px; }
/* touch-action: none lets a finger on the handle drag the card instead of scrolling the page. */
.drag-handle {
  position: absolute; top: 6px; right: 6px; width: 52px; height: 52px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 12px; color: var(--muted); cursor: grab; touch-action: none;
}
.drag-handle svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.stop.dragging { outline: 3px solid var(--navy); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); z-index: 2; }
.stop.dragging .drag-handle { cursor: grabbing; color: var(--navy); }
.badge.waiting { background: var(--warn-bg); color: #6b5200; }
.gate.problem { background: var(--crimson-tint); border-color: var(--crimson); }
.preview { display: block; max-width: 100%; max-height: 260px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 10px; }
label.btn { cursor: pointer; }
.top-gap { margin-top: 12px; }
.info > .stack { display: block; }
.info .v.left { display: block; text-align: left; margin-bottom: 2px; }
.two .btn { margin-bottom: 10px; }

.modal { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; z-index: 10; }
.modal-head {
  flex: none; display: flex; align-items: center; background: #fff; border-bottom: 2px solid var(--line);
  padding: 4px 8px; min-height: 56px; padding-top: calc(4px + env(safe-area-inset-top, 0px));
}
.modal-head h2 { flex: 1; margin: 0; font-size: 20px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-spacer { width: 64px; }
.modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 14px 40px; width: 100%; max-width: 760px; margin: 0 auto; }

.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 20; max-width: 90%;
  background: #111; color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; text-align: center;
}
.toast.error { background: var(--danger); }

.loading { position: fixed; inset: 0; z-index: 30; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-weight: 600; }
.spinner { width: 44px; height: 44px; border: 5px solid var(--navy-tint); border-top-color: var(--navy); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Routes: one small button in the middle showing the route picked; tapping it lists the others. */
.route-pick { display: flex; flex-direction: column; align-items: center; margin: 0 0 12px; }
.route-current {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px 0 20px;
  background: var(--navy); color: #fff; border: 2px solid var(--navy); border-radius: 999px; font-size: 17px; font-weight: 700;
}
.route-current svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.route-current.open svg { transform: rotate(180deg); }
.route-menu { width: min(100%, 300px); margin-top: 8px; background: var(--card); border: 2px solid var(--navy); border-radius: 14px; overflow: hidden; }
.route-menu button {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px;
  background: none; border: 0; border-top: 1px solid var(--line); font-size: 17px; font-weight: 700; color: var(--navy); text-align: left;
}
.route-menu button:first-child { border-top: 0; }
.route-menu button span:last-child { font-weight: 400; color: var(--muted); }
.route-menu button.on { background: var(--navy-tint); }
.route-menu button:active { background: var(--navy-tint); }
.badge.route { background: var(--navy-tint); color: var(--navy-dark); }

/* The Planning heading on Today, which opens and closes the buttons beneath it. */
.fold {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px;
  margin: 14px 0 8px; padding: 0 6px; background: none; border: 0; border-top: 2px solid var(--line);
  font-size: 16px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .05em;
}
.fold svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.fold.open svg { transform: rotate(180deg); }

/* The lawn's number in the day's order, on lawns still to do. */
.stop-number {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px;
  border-radius: 999px; background: var(--navy); color: #fff; font-size: 18px; font-weight: 700;
}

/* A lawn tapped open on Today, showing its Start button. */
.stop.planned:has(.btn) { border-color: var(--navy); border-left-color: var(--navy); }

/* Extra services on the Finish form: tap to tick, tap again to untick. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
div.field { font-weight: 700; }
.chip {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border: 2px solid var(--navy); border-radius: 999px;
  background: #fff; color: var(--navy); font-size: 17px; font-weight: 700;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--navy); color: #fff; }
.chip:has(input:checked)::before { content: "✓"; margin-right: 6px; }

/* The owner's week view: seven columns on a computer or wide tablet, one day under another on a phone. */
.top-btn {
  margin-left: auto; margin-right: 6px; min-height: 40px; padding: 0 16px; background: none; color: #fff;
  border: 2px solid rgba(255, 255, 255, .7); border-radius: 999px; font-size: 16px; font-weight: 700;
}
.top-btn:active { background: rgba(255, 255, 255, .2); }
#app.wide { max-width: 1500px; }
.week { display: grid; grid-template-columns: 1fr; gap: 10px; }
.week-day { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; min-width: 0; }
.week-day.today { border: 2px solid var(--navy); }
.week-day.past { background: #e9ecf1; }
.week-day.drop { background: var(--navy-tint); border-color: var(--navy); }
.week-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; padding: 6px 6px 10px; background: none; border: 0; text-align: left; color: var(--navy); }
.week-head b { font-size: 18px; }
.week-head span { color: var(--muted); font-size: 15px; }
.week-stop {
  display: flex; align-items: stretch; width: 100%; margin-top: 6px;
  background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--edge); border-radius: 10px; font-size: 16px;
}
.week-main { flex: 1; min-width: 0; padding: 8px 4px 8px 10px; background: none; border: 0; text-align: left; line-height: 1.5; }
/* touch-action: none lets a finger drag the lawn by its arrows instead of scrolling the page. */
.week-handle { flex: none; width: 38px; display: grid; place-items: center; background: none; border: 0; color: var(--edge); cursor: grab; touch-action: none; }
.week-handle svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.week-ghost .week-handle { color: var(--navy); }
.week-stop b { overflow-wrap: anywhere; }
.week-stop span { color: var(--muted); font-size: 15px; }
/* The street stays in one piece: beside the name when there is room, otherwise as a whole on the next line. */
.week-main > span:not(.badge) { white-space: nowrap; }
.week-stop .badge { font-size: 11px; color: #333; }
.week-stop .badge.route { color: var(--navy-dark); }
.week-stop.planned { cursor: grab; user-select: none; -webkit-user-select: none; }
.week-stop.started { border-left-color: var(--green); background: var(--green-tint); }
.week-stop.done { background: #e3e6eb; border-left-color: #98a1ae; }
.week-stop.done b { color: var(--muted); font-weight: 600; }
.week-stop.lifting { opacity: .35; }
.week-ghost { position: fixed; z-index: 30; pointer-events: none; margin: 0; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); border-color: var(--navy); }
.week-empty { padding: 10px 6px; color: var(--muted); font-size: 15px; }
@media (min-width: 900px) {
  .week { grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: start; }
  .week-head { flex-direction: column; gap: 0; }
}

/* Clocking in and out, on Today (crew only). */
.clock { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.clock.on { justify-content: space-between; padding: 8px 8px 8px 16px; background: var(--green-tint); border: 2px solid var(--green); border-radius: 14px; font-weight: 700; }
.clock-btn { min-height: 46px; padding: 0 22px; background: #fff; color: var(--navy); border: 2px solid var(--navy); border-radius: 999px; font-size: 17px; font-weight: 700; }
.clock-btn:active { background: var(--navy-tint); }
button.line.tap { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; min-height: 46px; }
button.line.tap:active { background: var(--navy-tint); }

.line.first:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* The More tab: a short menu of rows. A row either goes straight to its screen or opens in place. */
.more-name { margin: 4px 4px 12px; font-size: 22px; font-weight: 700; color: var(--navy); }
.menu { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.menu-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 0 14px 0 16px;
  background: none; border: 0; border-top: 1px solid var(--line); text-align: left; color: var(--ink);
}
.menu-row:first-child { border-top: 0; }
.menu-row b { font-size: 19px; flex: 1; }
.menu-row span { color: var(--muted); font-size: 16px; text-align: right; }
.menu-row svg { flex: none; fill: none; stroke: var(--navy); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.menu-row.open { background: var(--navy-tint); }
.menu-row.open svg { transform: rotate(180deg); }
.menu-row:active { background: var(--navy-tint); }
.menu-body { padding: 12px 12px 4px; background: var(--bg); border-top: 1px solid var(--line); }