:root {
--blue: #1E90FF;
--grass: #5CDB3A;
--red: #E23B2F;
--orange: #F08A24;
--ink: #111111;
--paper: #F2F3F5;
--line: #D9DBDE;
--muted: #6A6E74;
--navy: #163A5F;
--teal: #1E90FF;
--bg: #F2F3F5;
--card: #fff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.45 "Segoe UI", system-ui, sans-serif; background: var(--paper); color: var(--ink); -webkit-tap-highlight-color: transparent; }
a { color: var(--blue); text-decoration: none; }
/* Links (RULES UI-03): no default underline; hover and keyboard focus underline. Any link class that sets its own text-decoration wins. */
a:where(:hover, :focus-visible) { text-decoration: underline; }
.side {
width: 220px;
background: var(--ink);
color: #fff;
display: flex;
flex-direction: column;
position: fixed;
top: 0; left: 0; bottom: 0;
z-index: 5;
overflow: auto;
overscroll-behavior: contain;
padding-bottom: env(safe-area-inset-bottom, 0px); /* keep Log out + version above the iPhone home indicator */
border-right: 3px solid var(--grass);
}
.brand-row { display: flex; align-items: center; justify-content: space-between; }
.brand { color: #fff; font-weight: 650; text-decoration: none; font-size: 1.05rem; padding: 16px 8px 12px 18px; letter-spacing: -.02em; }
.gear { color: #c8c8c8; display: flex; align-items: center; padding: 16px 14px 12px 8px; }
.gear:hover, .gear.active { color: var(--blue); }
.settings-jump { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 8px; background: var(--paper); padding: 4px 0 12px; }
.settings-jump a { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; text-decoration: none; color: var(--ink); font-weight: 600; }
.hint { margin: 4px 0 0; font-size: .75rem; }
.hint.bad { color: var(--red); }
.hint.bad a { color: inherit; font-weight: 600; }
.hint.bad a:hover { text-decoration: underline; }
.brand .twisted { color: var(--blue); }
.brand span { color: var(--grass); }
/* Menu brand with the mascot: mascot on top, the name on its own line under it (one line; long names a size smaller, then an ellipsis). The gear stays beside the mascot. */
.brand.brand-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1 1 auto; min-width: 0; padding: 14px 8px 12px 18px; }
.brand-stack .ttm.ttm-logo { --ttm-size: 30px; margin: 0; }
.brand-stack .brand-name { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.brand-stack .brand-name span { color: var(--grass); }
.brand-stack .brand-name .twisted { color: var(--blue); }
.brand-name.long { font-size: .92rem; }
.brand-name.xlong { font-size: .8rem; }
.brand-stack + .gear { align-self: flex-start; padding-top: 21px; }
.ico { width: 16px; height: 16px; flex: none; }
.side nav a, .logout { display: flex; align-items: center; gap: 8px; }
.top h1 { display: flex; align-items: center; gap: 8px; }
.stat span:not(.badge), .profit-top h2 { display: flex; align-items: center; gap: 6px; }
.calc-label { margin: 18px 0 4px; font-size: 1rem; }
.menu-btn { display: none; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--ink); }
.menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-shade { display: none; }
.nav-fold { margin: 2px 0 0; }
.nav-fold summary {
list-style: none; cursor: pointer; color: #9a9a9a; margin: 0; padding: 10px 12px; border-radius: 8px;
font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
display: flex; align-items: center; justify-content: space-between; line-height: 1.2;
}
.nav-fold summary::-webkit-details-marker { display: none; }
.nav-fold summary::after {
content: ""; width: 6px; height: 6px; border-right: 2px solid #888; border-bottom: 2px solid #888;
transform: rotate(45deg) translateY(-2px); flex: none;
}
.nav-fold[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.nav-fold summary:hover { background: rgba(255,255,255,.06); color: #fff; }
.phone-dock { display: none; }
.side > * { flex-shrink: 0; } /* scroll the menu instead of squashing items */
.side nav { display: flex; flex-direction: column; padding: 8px; gap: 2px; }
.side nav a { color: #eee; text-decoration: none; padding: 10px 12px; border-radius: 8px; }
.side nav a:hover { background: rgba(255,255,255,.06); }
.side nav a.active { background: var(--navy); color: #fff; box-shadow: inset 3px 0 0 var(--blue); }
.side nav a.sub {
margin: 0 8px; padding: 4px 8px 4px 22px;
font-size: 12px; line-height: 1.25; color: #c8c8c8;
box-shadow: none;
}
.side nav a.sub.active { background: rgba(30, 144, 255, .18); color: #fff; box-shadow: none; }
.logout { margin: auto 8px 0; padding: 10px 12px; border-radius: 8px; color: #c8c8c8; text-decoration: none; font-size: .68rem; font-weight: 700; line-height: 1.2; }
.logout:hover { background: rgba(255,255,255,.06); color: #fff; }
.logout.logout-all { margin-top: 0; padding: 4px 12px 8px 34px; color: #8a8a8a; font-weight: 600; }
.version { margin: 0 8px 12px; padding: 4px 12px; color: #c8c8c8; font-size: 12px; line-height: 1.25; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.version:hover { color: #fff; }
.content { margin-left: 220px; min-width: 0; }
/* Toasts keep their spot under the top bar but float over the page, so one arriving or leaving never shoves the page.
Sticky: a toast stays in view wherever the page is scrolled (a save that returns to #card far down the page still shows it). */
.notices { position: sticky; top: 0; z-index: 40; display: flow-root; height: 0; padding: 0 22px; }
.notices > .toast { box-shadow: 0 8px 24px rgba(16, 24, 40, .12); }
.notices > .toast:first-child { margin-top: 12px; }
.notices:empty { display: none; }
.top {
padding: 0 22px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
background: #fff; border-bottom: 1px solid var(--line);
}
.top-title { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.top h1 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; letter-spacing: 0; min-width: 0; }
.top h1 span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-title.has-back h1 {
height: 32px; padding: 0 12px; border-radius: 999px;
background: var(--paper); border: 1px solid var(--line); font-size: 13px; font-weight: 650;
}
.back-link {
display: inline-flex; align-items: center; gap: 2px; height: 32px;
padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--blue);
text-decoration: none; font-size: 13px; font-weight: 650; white-space: nowrap;
}
.gear-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.gear-link:hover { text-decoration: underline; color: var(--ink); }
.back-link svg { width: 16px; height: 16px; }
.back-phone .back-link { display: none; } /* phone-only back (an open email/text conversation); desktop shows the list beside it */
.top-action { margin-left: auto; height: 32px; min-height: 32px; }
.back-link:hover { color: var(--ink); }
.live-clock { color: var(--muted); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
main { padding: 16px 22px 48px; }
.stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 16px; }
.stats:has(+ p.muted) { margin-bottom: 0; }
.stat, .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
.stat { padding: 14px 16px; min-width: 140px; }
.stat b { display: block; font-size: 1.35rem; min-height: 1.2em; font-weight: 650; }
/* A whole tile that is a link (Invoices, Estimates): same tile, no underline, blue border on hover (as in the portal). */
a.stat { color: var(--ink); text-decoration: none; }
a.stat:hover { border-color: var(--blue); }
.stat b a { text-decoration: none; }
.stat b a:hover { text-decoration: underline; }
.stat span:not(.badge), .muted, th { color: var(--muted); }
.card { padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(17, 17, 17, .04); }
h2 { font-size: .95rem; margin: 18px 0 10px; }
.card > h2:first-child { margin-top: 0; }
.card > .stats:first-child { margin-top: 0; }
.toast {
position: relative; z-index: 40;
display: flex; align-items: center; gap: 12px;
margin: 0 0 10px; padding: 12px 12px 12px 16px;
border-radius: 12px; font-weight: 650;
border: 1px solid var(--line); overflow: hidden;
animation: toast-in .22s ease; background: #fff; color: var(--ink);
}
.toast span { flex: 1; min-width: 0; }
.toast::before {
content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
}
.toast::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
transform-origin: left; animation: toast-life var(--toast-life, 6s) linear forwards;
}
.toast:hover::after { animation-play-state: paused; }
.toast.ok::before, .toast.ok::after { background: var(--grass); }
.toast.bad { background: var(--red); color: #fff; border-color: var(--red); }
.toast.bad::before, .toast.bad::after { background: #fff; }
.toast.warn { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.toast.warn::before, .toast.warn::after { background: var(--ink); }
/* Persistent warning (overdue steps): in normal flow above the card, one line with ellipsis, never floating. */
.alert-banner {
display: block; margin: 0 0 12px; padding: 12px 16px; border-radius: 12px;
background: var(--orange); color: var(--ink); border: 0;
font-weight: 650; text-decoration: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.alert-banner:hover { background: #d97706; color: var(--ink); }
.toast-x {
background: transparent; color: inherit; border: 0; min-height: 32px; width: 32px; padding: 0;
font-size: 1.25rem; line-height: 1; box-shadow: none; border-radius: 8px;
}
.toast-x:hover { background: rgba(0, 0, 0, .06); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
tbody tr:hover td, table tr:hover td { background: var(--paper); }
th a { color: var(--muted); text-decoration: none; }
th a:hover { color: var(--ink); }
label { display: block; margin: 0 0 6px; color: var(--muted); font-size: .8rem; font-weight: 650; }
input:not([type="hidden"]) + label,
select + label,
textarea + label,
p + label,
select + button,
textarea + button,
p + button { margin-top: 14px; }
p + button.note-add { margin-top: 0; }
input, select, textarea {
width: 100%;
padding: 9px 11px;
border: 1px solid #d5deea;
border-radius: 8px;
font: inherit;
color: var(--ink);
background: #fff;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(30, 144, 255, .16);
}
.stat b, td.num, .profit-figure, .list-count { font-variant-numeric: tabular-nums; }
button, .btn, .back-link, .side nav a { transition: background .15s ease, color .15s ease, border-color .15s ease; }
[hidden] { display: none !important; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: start; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.split > div { display: grid; gap: 14px; align-content: start; }
.form-grid > div { min-width: 0; }
.tbc-line { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
#tbc-switch { margin: 0; }
.tbc-dates { display: flex; align-items: center; gap: 14px; }
.tbc-dates label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: .85rem; font-weight: 650; }
.tbc-dates input { width: 64px; min-width: 64px; max-width: 64px; height: 36px; margin: 0; flex: none; }
.span-2 { grid-column: 1 / -1; }
.kpi-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.kpi-tile { display: flex; gap: 12px; align-items: center; min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: linear-gradient(180deg, var(--paper), #fff); }
.kpi-tile > div { min-width: 0; }
.kpi-tile b { display: block; font-size: 1.15rem; }
.kpi-tile span, .kpi-tile em { display: block; color: var(--muted); font-style: normal; font-size: .8rem; }
.kpi-tile .badge { display: inline-block; margin-top: 6px; white-space: normal; }
.ring { width: 72px; height: 72px; flex: none; display: block; }
.chart-box { max-width: 100%; }
.chart-box svg { width: 100%; height: auto; display: block; overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 8px; font-weight: 650; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 99px; margin-right: 6px; }
.hbar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 8px 0 16px; }
.hbar-grid h3 { margin: 0 0 10px; font-size: .95rem; }
.hbar { display: grid; grid-template-columns: minmax(90px, 1.2fr) 2fr auto; gap: 10px; align-items: center; margin: 8px 0; }
.hbar span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { display: block; height: 12px; background: var(--paper); border-radius: 99px; overflow: hidden; }
.hbar-track span { display: block; height: 100%; border-radius: 99px; }
.stand-head { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.rank-ring { width: 88px; height: 88px; flex: none; }
.rank-ring text:first-of-type { font-size: 18px; font-weight: 750; fill: var(--ink); }
.rank-ring text:last-of-type { font-size: 10px; fill: var(--muted); }
.split-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--paper); margin: 8px 0; }
.split-bar span { display: block; height: 100%; }
@media (max-width: 800px) {
.kpi-tiles, .hbar-grid, .property-views { grid-template-columns: 1fr; }
}
a.lock, button.lock, .btn.lock { color: var(--red) !important; }
button.danger, .btn.danger { background: var(--red); color: #fff !important; border: 1px solid var(--red); }
button.danger:hover, .btn.danger:hover { background: #c42f24; color: #fff !important; border-color: #c42f24; }
.override-block {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
background: linear-gradient(180deg, var(--paper), #fff);
}
.override-block h4 { margin: 0 0 2px; font-size: .95rem; }
.bill-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.bill-switch span { font-size: .85rem; font-weight: 700; }
.override-field { display: flex; align-items: center; gap: 8px; }
.override-field span { font-weight: 750; color: var(--muted); }
.override-field input { width: 120px; height: 40px; margin: 0; }
.override-field button { height: 40px; }
.override-note { color: var(--muted); font-size: .75rem; font-weight: 650; }
table.roster td { vertical-align: middle; }
.list-bar {
display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap;
background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 8px;
}
.list-results { transition: opacity .15s ease; }
.list-results.is-loading, .sheet.is-loading { opacity: .45; }
.list-bar label, .list-bar p { margin: 0; }
.list-bar input[type="month"] {
height: 42px; border-radius: 999px; background: #fff; border: 1px solid transparent; padding: 0 14px; font: inherit; width: auto;
}
.sheet tr.due-total td { font-weight: 750; background: var(--paper); }
.list-search, .list-size { position: relative; margin: 0; display: flex; align-items: center; }
.list-search { flex: 1; min-width: 180px; }
.status-filter { position: relative; }
.status-filter summary {
list-style: none; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--paper);
display: flex; align-items: center; cursor: pointer; font-weight: 650; white-space: nowrap; max-width: 280px; overflow: hidden;
}
.status-filter summary::-webkit-details-marker { display: none; }
.status-filter[open] summary { background: #fff; box-shadow: inset 0 0 0 1px var(--teal); }
.status-menu {
position: absolute; z-index: 6; top: 48px; left: 0; min-width: 230px; padding: 10px 12px;
background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 30px rgba(11, 42, 69, .12);
}
.status-menu .check { display: flex; margin: 6px 0; }
.status-menu { max-width: calc(100vw - 24px); max-height: min(70vh, 520px); overflow-y: auto; box-sizing: border-box; }
.status-menu.is-right { left: auto; right: 0; }
.list-search span, .list-size span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.list-search input, .list-size select {
height: 42px; margin: 0; border-radius: 999px; background: var(--paper); border: 1px solid transparent;
}
.list-search input { padding-left: 16px; }
.list-search input:focus, .list-size select:focus { background: #fff; border-color: var(--teal); outline: none; }
.list-size select { width: 118px; }
.command .list-bar:not(.lb) select {
width: auto; height: 42px; margin: 0; padding: 0 32px 0 16px;
border-radius: 999px; background: var(--paper); border: 1px solid transparent; font-weight: 650; text-align: left;
}
.command .list-bar:not(.lb) select:focus { background: #fff; border-color: var(--teal); outline: none; }
.list-count { margin: 0 0 0 auto; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pager { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }
.pager a, .pager .gap {
min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 650;
}
.pager a.on { background: var(--blue); color: #fff; }
.pager a:hover { background: #e5eef6; }
.profile h2, .profile h3 { margin: 0 0 4px; }
.badge { display: inline-block; background: var(--paper); color: var(--ink); border-radius: 99px; padding: 3px 10px; font-size: .8rem; font-weight: 650; }
a.badge { text-decoration: none; color: var(--ink); }
p.muted {
margin: 4px 0 12px;
font-size: .75rem;
line-height: 1.35;
}
.card > h2 + p.muted,
.card > h3 + p.muted { margin-top: -2px; margin-bottom: 8px; }
.badge.overdue { background: var(--red); color: #fff; }
.badge.waiting, .badge.lump { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.badge.planned, .badge.next, .badge.monthly { background: var(--blue); color: #fff; }
.badge.done { background: var(--grass); color: var(--ink); }
.badge.each { background: var(--grass); color: var(--ink); }
.when-overdue { color: var(--red); font-weight: 700; }
.tabs { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; margin: 0 0 14px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; }
.tabs a.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.week-picks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.week-picks .check { margin: 0; }
.rank-medal, .rank-plain {
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; height: 26px; padding: 0 8px; border-radius: 999px;
font-size: 12px; font-weight: 750; line-height: 1; letter-spacing: 0;
}
.rank-medal.m1 { background: var(--grass); color: var(--ink); }
.rank-medal.m2 { background: var(--blue); color: #fff; }
.rank-medal.m3 { background: var(--navy); color: #fff; }
.rank-plain { background: transparent; color: var(--muted); font-weight: 700; }
table.standings th:first-child, table.standings td:first-child { width: 78px; text-align: center; }
td.spark { width: 140px; }
td.spark span { display: block; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--line), var(--blue)); }
.assign-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 12px 0; background: #fbfcfe; }
.assign-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.assign-head h3 { margin: 0 0 8px; }
.assign-head form { margin: 0; flex: none; display: flex; align-items: center; gap: 8px; }
.assign-head .btn { height: 28px; min-height: 28px; padding: 0 12px; font-size: .78rem; }
select.reason {
width: 112px; min-width: 112px; height: 30px; min-height: 30px; margin: 0; padding: 0 26px 0 12px;
flex: none; font-size: .78rem; font-weight: 650; line-height: 1; border-radius: 999px;
appearance: none; -webkit-appearance: none;
background-color: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 8px center; background-size: 12px 12px;
}
.form-grid select.reason { width: 100%; min-width: 0; margin-top: 8px; }
.assign-head select.reason { width: 112px; height: 28px; min-height: 28px; }
form.drop { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; vertical-align: middle; }
p + form.drop { margin-top: 8px; }
select.reason + button,
select.reason + .btn,
form.drop select.reason + button,
.row select.reason + button,
.assign-head select.reason + button { margin-top: 0; }
table.log td { vertical-align: middle; }
tr.undone td { color: var(--muted); }
.badge.name { background: var(--navy); color: #fff; font-weight: 750; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.assign-form { margin-top: 8px; }
.assign-form .form-grid { margin-bottom: 4px; }
.property-views { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.property-views .card { margin-bottom: 0; }
.property-views iframe, #lot-map { width: 100%; height: 320px; border: 0; border-radius: 10px; background: var(--paper); }
.lot-note { margin: 8px 0 0; font-size: .8rem; }
#pin-map { height: 380px; border-radius: 10px; border: 1px solid var(--line); }
.map-hold { position: relative; z-index: 0; border-radius: 10px; }
.map-hold > .leaflet-container,
.map-hold > iframe { position: relative; z-index: 1; display: block; }
.map-hold:not(.is-live) > .leaflet-container { pointer-events: none !important; touch-action: auto !important; }
.map-hold:not(.is-live) > iframe { pointer-events: none; }
.map-hold.is-live > iframe { pointer-events: auto; }
.map-shield {
position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0;
border: 0; border-radius: inherit; background: transparent; cursor: pointer;
}
.map-hold.is-live .map-shield { display: none; }
.req { color: #b42318; margin-left: 3px; }
.one { color: var(--blue); margin-left: 3px; }
.use-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.stack { display: block; width: 100%; margin-top: 16px; clear: both; }
input.rate-in { max-width: 110px; }
.rate-box { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 16px; background: var(--paper); }
.rate-box h3 { margin: 0 0 12px; font-size: .95rem; }
.rate-box[hidden] { display: none; }
.rate-box .form-grid { grid-template-columns: 1fr 1fr 1fr; }
.checks { display: grid; gap: 8px; margin: 14px 0; }
input[type="checkbox"] { width: auto; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; margin: 0; }
button, .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
background: var(--blue); color: #fff; border: 1px solid var(--blue); border-radius: 999px;
height: 36px; min-height: 36px; padding: 0 16px; line-height: 1;
text-decoration: none; cursor: pointer; font: inherit; font-weight: 650;
font-variant-numeric: lining-nums proportional-nums;
-webkit-appearance: none; appearance: none;
}
.btn.quiet, button.quiet {
background: #fff; color: var(--ink); border: 1px solid var(--line);
}
button:not(.quiet):not(.danger):not(.nudge):not(.pick):not(.toast-x):not(.act):not(.note-add):not(.pic-shot):not(.pic-nav):not(.pic-x):not(.pic-del):not(.sort):not(.tag-x):not(.top-more-item):hover,
.btn:not(.quiet):not(.danger):hover {
background: #1873cc;
color: #fff;
border-color: #1873cc;
}
.btn.quiet:hover, button.quiet:hover {
background: var(--paper);
color: var(--ink);
border-color: var(--blue);
}
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.row.section-end { margin-bottom: 16px; }
.row.preview-size { margin-top: 10px; align-items: end; }
.row.preview-size input { width: 140px; }
.pill { display: inline-block; background: var(--paper); color: var(--ink); border-radius: 999px; padding: 3px 10px; font-size: .8rem; font-weight: 650; }
.pill.on { background: var(--ink); color: #fff; }
.review-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.review-bar form { display: flex; margin: 0; }
.review-bar input[type="month"] {
width: 170px; height: 36px; margin: 0; text-align: center; background: #fff;
border: 1px solid var(--line); border-radius: 999px; font-weight: 700; padding: 0 12px;
}
.review-views { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.review-bar .review-views:first-child:last-child { margin-left: 0; }
.review-views a {
display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px;
border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink);
text-decoration: none; font-weight: 700; font-size: .85rem;
}
.review-views a.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.card > .review-sheet { margin: 0; }
.review-sheet table { width: 100%; }
.review-sheet th, .review-sheet td { text-align: left; }
.review-sheet th:first-child, .review-sheet td:first-child { width: auto; text-align: left; }
.review-sheet th + th, .review-sheet td + td { padding-left: 22px; }
@media (max-width: 800px) {
.review-bar { display: grid; grid-template-columns: 1fr 1fr; }
.review-bar form, .review-views { grid-column: 1 / -1; }
.review-bar input[type="month"] { width: 100%; }
.review-views { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
}
.error { color: var(--ink); }
.login {
min-height: 100dvh; display: grid; place-items: center; background: var(--ink);
padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
}
.login h1 { margin: 0 0 8px; color: var(--blue); }
.login h1 span { color: var(--grass); }
.login .card { width: min(420px, 100%); }
.lost {
min-height: 100dvh; display: grid; place-items: center; background: var(--ink); color: #fff;
padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.lost main { width: min(560px, 100%); }
.lost-brand { display: inline-block; margin: 0 0 14px; color: var(--blue); font-weight: 750; font-size: 1.15rem; letter-spacing: -.02em; text-decoration: none; }
.lost-brand span { color: var(--grass); }
.lost-card { background: #fff; color: var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); }
.lost-art svg { display: block; width: 100%; height: auto; }
.lost-card h1 { margin: 0 16px 8px; font-size: 1.55rem; letter-spacing: -.03em; line-height: 1.15; }
.lost-kicker { margin: 14px 16px 4px; color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.lost-line { margin: 0 16px 12px; color: var(--muted); }
.lost-card .row { margin: 8px 16px 18px; }
.lost-pin { transform-origin: 392px 176px; animation: lost-bob 2.4s ease-in-out infinite; }
.lost-mower { animation: lost-roll 3.6s ease-in-out infinite; }
@keyframes lost-bob { 50% { transform: translateY(6px); } }
@keyframes lost-roll { 50% { transform: translateX(10px); } }
.address-wrap { position: relative; }
.picks {
position: absolute; z-index: 8; left: 0; right: 0; top: calc(100% - 4px);
background: #fff; border: 1px solid var(--line); border-radius: 8px;
box-shadow: 0 8px 24px rgba(12, 35, 64, .12);
}
.pick {
display: block; width: 100%; text-align: left; background: #fff; color: var(--ink);
border: 0; border-radius: 0; border-bottom: 1px solid var(--line);
padding: 10px 12px; font-weight: 500;
}
.pick:hover { background: var(--paper); }
@media (max-width: 800px) {
html, body { width: 100%; max-width: 100%; }
.shell, .content, main { width: 100%; max-width: 100%; min-width: 0; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; }
.side { transform: none; left: -320px; transition: left .2s ease; width: min(280px, 86%); z-index: 30; padding-top: max(47px, env(safe-area-inset-top, 0px)); padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); /* clear the phone dock so Log out + version scroll into view */ }
body.nav-open .side { left: 0; transform: none; }
body.nav-open .nav-shade { display: block; position: fixed; inset: 0; background: rgba(8, 20, 32, .45); z-index: 20; }
.content { margin-left: 0; max-width: 100%; overflow-x: clip; }
/* Keep the menu under the iPhone clock and island. Do not set this padding back to 0. */
.top { position: sticky; top: 0; z-index: 8; width: 100%; max-width: 100%; min-width: 0; overflow: visible; /* not hidden: the ⋯ menu drops below the header; .content clips sideways */ justify-content: flex-start; gap: 10px; padding-top: env(safe-area-inset-top, 0px); /* exactly the status bar in a home-screen install, none in Safari */ background: #fff; }
.top-title, .top h1 { flex: 1 1 auto; min-width: 0; overflow: hidden; }
/* Phone: Back is the round chevron only so the title pill keeps the room to read on one line. */
.back-phone .back-link { display: inline-flex; }
.back-link { flex: none; width: 32px; padding: 0; justify-content: center; }
.back-link span { display: none; }
.top-title { gap: 6px; }
.top-title.back-phone h1 { height: 32px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; font-weight: 650; }
.top-title.has-back h1, .top-title.back-phone h1 { padding: 0 10px; }
.top-title.has-back h1 > svg, .top-title.has-back h1 > .ico, .top-title.back-phone h1 > svg, .top-title.back-phone h1 > .ico { display: none; }
/* Reports: the All Reports icon repeats Back to Reports, so the phone drops it. */
.top-title.has-back ~ .top-actions a.top-ico[href="reports.php"] { display: none; }
.live-clock { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.form-grid, .split, .rate-box .form-grid { grid-template-columns: 1fr; }
.override-block { flex-direction: column; align-items: stretch; }
.span-2 { grid-column: auto; }
main, .top { padding-left: 16px; padding-right: 16px; }
.content > .notices { top: calc(48px + env(safe-area-inset-top, 0px)); padding: 0 16px; } /* just under the sticky phone header */
main { max-width: 100%; min-width: 0; padding-bottom: 120px; padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
.property-views { grid-template-columns: 1fr; }
.profit-top { flex-wrap: wrap; align-items: flex-start; }
.profit-year { width: 100%; align-items: flex-start; }
.command { max-width: 100%; min-width: 0; }
input, select, textarea { min-width: 0; max-width: 100%; font-size: 16px; }
/* iOS zooms into any field under 16px: same rule, made to win over smaller field styles (Help Ask box, pills, tag box, editors). */
input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
/* Date and time fields: iOS Safari gives them their own width and height (wider than the box, taller or collapsed when empty). Same size as the other fields. Phone only. */
input[type=date], input[type=time], input[type=datetime-local], input[type=month] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; min-height: 43px; }
input::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
.phone-dock {
display: grid; grid-template-columns: repeat(var(--tabs, 4), minmax(0, 1fr));
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
width: 100%; max-width: 100%; box-sizing: border-box; touch-action: manipulation;
background: var(--ink); border-top: 3px solid var(--grass); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.phone-dock a, .phone-dock button {
display: flex; flex-direction: column; align-items: center; gap: 2px; background: transparent; border: 0;
color: #c8c8c8; font-size: .68rem; text-decoration: none; padding: 4px 0; box-shadow: none;
-webkit-tap-highlight-color: transparent;
}
.phone-dock button:hover, .phone-dock button:focus, .phone-dock button:active {
background: transparent !important; border-color: transparent !important; color: #c8c8c8 !important; box-shadow: none !important;
}
body.nav-open .phone-dock #dock-menu,
body.nav-open .phone-dock #dock-menu:hover,
body.nav-open .phone-dock #dock-menu:focus,
body.nav-open .phone-dock #dock-menu:active { color: #fff !important; background: transparent !important; }
.phone-dock .on, .phone-dock a.on, .phone-dock a:hover { color: #fff; }
.phone-dock .ico { width: 18px; height: 18px; }
.assign-head { flex-direction: column; align-items: stretch; gap: 10px; }
.assign-head .pills { min-width: 0; }
.assign-head form { justify-content: flex-end; flex-wrap: wrap; }
.badge.name { border-radius: 12px; line-height: 1.25; max-width: 100%; white-space: normal; }
.visit summary { flex-direction: column; align-items: stretch; gap: 6px; }
.visit summary > span { min-width: 0; }
}
.profit-card { display: block; color: inherit; text-decoration: none; }
.profit-card:hover { border-color: var(--line); }
.profit-card h2 { margin: 0; }
.profit-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.profit-figure { font-size: 1.7rem; line-height: 1; }
.profit-year { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.profit-top > div:first-child { min-width: 0; }
.profit-year div { display: grid; grid-template-columns: auto 4.6rem; align-items: center; gap: 8px; }
.profit-year b { justify-self: end; text-align: right; }
.profit-year span, .profit-col em { color: var(--muted); font-style: normal; font-size: .72rem; }
.profit-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 86px; margin-top: 14px; }
.profit-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.profit-col span { display: block; width: 100%; max-width: 18px; min-height: 3px; border-radius: 5px 5px 2px 2px; background: var(--line); }
.profit-col.real span { background: var(--blue); }
.profit-col.predict span { background: var(--grass); }
.profit-col.now em { color: var(--ink); font-weight: 750; }
.visit { border: 1px solid var(--line); border-radius: 12px; background: #fff; margin: 8px 0; }
.visit summary { cursor: pointer; list-style: none; padding: 12px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.visit summary::-webkit-details-marker { display: none; }
.visit .body { padding: 0 14px 14px; }
.visit .body > p.visit-when { margin: 0 0 12px; text-align: left; text-align-last: left; word-spacing: normal; letter-spacing: 0; white-space: normal; }
.wx { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.wx span { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: .8rem; }
.chem-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 8px 0 16px; }
.chem-place { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--paper); }
.chem-place h4 { margin: 0 0 8px; }
.chem-place ul { list-style: none; margin: 0; padding: 0; }
.chem-place li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.chem-place li:last-child { border-bottom: 0; }
.chem-place li span { min-width: 0; flex: 1; }
.chem-place li b { white-space: nowrap; flex: none; text-align: right; font-weight: 650; }
table.chem { width: 100%; border-collapse: collapse; }
table.chem th, table.chem td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.chem tr.due-total td { font-weight: 750; background: var(--paper); }
table.chem-log { table-layout: fixed; }
table.chem-log col.where { width: 96px; }
table.chem-log col.used { width: 190px; }
table.chem-log col.rate { width: 24%; }
table.chem-log col.how { width: 16%; }
table.chem-log th:nth-child(2), table.chem-log td:nth-child(2) { white-space: nowrap; }
table.chem-log td:nth-child(3) { white-space: normal; }
table.chem-log td:first-child { overflow-wrap: anywhere; }
table.chem-log .ing { display: grid; gap: 2px; margin-top: 4px; }
table.chem-log .ing span { display: block; }
.sheet { padding: 18px; }
/* Table cards: the card's own padding is the only side inset; a results wrapper inside it adds none (Billing had doubled sides). */
.card > .list-results { padding: 0; }
.command { margin: 0 0 8px; color: var(--ink); }
.command .board-top { display: flex; justify-content: flex-start; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; min-width: 0; }
.command .week-jumps { display: contents; }
.command .jump-today { order: 0; }
.command .jump-today.today-here { display: none; }
.command .jump-wait { order: 1; }
.command .week-days { order: 2; }
.command .jump-next { order: 4; }
.command .board-range { order: 5; margin-left: auto; }
.command .board-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.command .board-range { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.command .board-range a.btn,
.command .board-range input[type="date"],
.command .week-days a,
.command .week-jump {
height: 54px; min-height: 54px; border-radius: 12px; box-sizing: border-box;
}
.command .board-range a.btn {
min-width: 64px; padding: 0 12px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 700;
}
.command .board-range input[type="date"] {
width: 154px; text-align: center; padding: 0 8px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 700;
}
.command .board-range input[type="date"]::-webkit-datetime-edit { text-align: center; padding: 0; }
.command .board-range span { color: var(--muted); font-size: .85rem; align-self: center; }
.command .week-days { display: flex; gap: 6px; align-items: stretch; }
.command .week-days a {
min-width: 54px; padding: 6px 8px; text-align: center; font-weight: 700;
color: var(--ink); background: #fff; border: 1px solid var(--line);
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.command .week-days a span, .command .week-days a b { display: block; }
.command .week-days a span { color: var(--muted); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.command .week-days a em { display: block; font-style: normal; font-size: .68rem; color: var(--muted); }
.command .week-days a.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.command .week-days a.on span, .command .week-days a.on em { color: #fff; }
.command .week-days a.week-jump,
.command .week-jump {
flex-direction: row; min-width: 0; padding: 0 12px;
text-align: center; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.command .week-jump.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.command .board-cap { margin: -4px 0 12px; color: var(--muted); font-size: .85rem; }
.command .actions-menu { position: relative; }
.command .actions-menu summary { list-style: none; }
.command .actions-menu summary::-webkit-details-marker { display: none; }
.command .actions-menu .status-menu { min-width: 280px; padding: 8px; display: block; }
.command .actions-menu .status-menu > .act {
width: 100%; display: flex; align-items: center; gap: 10px; justify-content: flex-start;
height: 36px; min-height: 36px; padding: 0 10px; margin: 0;
background: transparent; color: var(--ink); font-size: .82rem; font-weight: 650; border-radius: 10px; border: 0;
}
.command .actions-menu .act-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.command .actions-menu .act-grid button {
width: 100%; height: auto; min-height: 0; margin: 0; padding: 6px 2px 5px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
background: transparent; color: var(--ink); border: 0; border-radius: 10px;
font-size: .62rem; font-weight: 650; line-height: 1.15; text-align: center;
}
.command .actions-menu .status-menu button:hover { background: var(--paper); color: var(--ink); }
.command .actions-menu .act-grid .st { width: 32px; height: 32px; border-radius: 8px; }
.command .actions-menu svg, .command .st-cell svg { width: 16px; height: 16px; }
.command .st-cell { white-space: nowrap; }
.command .st-cell .st { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; }
.command .st.call { color: var(--blue); background: var(--paper); }
.command .card { background: #fff; color: var(--ink); border: 0; border-radius: 16px; box-shadow: none; }
.command table.board { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; }
.command .card:has(table.board) { overflow-x: auto; }
.command table.board td.pay .bhr { white-space: nowrap; }
.command table.board th,
.command table.board td { white-space: normal; }
.command table.board th { background: var(--paper); color: var(--muted); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; border-top: 0; border-bottom: 1px solid var(--line); box-shadow: none; }
.command table.board tr:first-child th:first-child { border-top-left-radius: 12px; border-left: 1px dashed var(--line); }
.command table.board tr:first-child th:last-child { border-top-right-radius: 12px; border-right: 1px dashed var(--line); }
.command table.board td { vertical-align: middle; padding: 10px 8px; background: #fff; border-bottom: 12px solid var(--paper); }
.command table.board tr.job-row td:first-child,
.command table.board tr.job-note-row td:first-child { border-left: 1px dashed var(--line); }
.command table.board tr.job-row td:last-child,
.command table.board tr.job-note-row td:last-child { border-right: 1px dashed var(--line); }
.command table.board tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.command table.board tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.command table.board tr.job-row:hover td,
.command table.board tr.job-row:hover + tr.job-note-row td,
.command table.board tr.job-row:has(+ tr.job-note-row:hover) td,
.command table.board tr.job-note-row:hover td { background: var(--paper); }
.command table.board tr.job-row:has(+ tr.job-note-row) td { border-bottom: 0; padding-bottom: 2px; }
.command table.board tr.job-note-row td { background: #fff; padding-top: 0; padding-bottom: 8px; border-top: 0; border-bottom: 12px solid var(--paper); white-space: normal; }
.command table.board tr:last-child > td { border-bottom: 1px solid var(--line); }
.command table.board th:first-child,
.command table.board td:first-child,
.command table.board th:nth-child(2),
.command table.board td.stop-order,
.command table.board th:nth-child(3),
.command table.board td.st-cell,
.command table.board th:nth-child(6),
.command table.board td.when,
.command table.board th.note-col,
.command table.board td.note-col,
.command table.board th.file-col,
.command table.board td.file-col { width: 1%; }
.command table.board th:first-child,
.command table.board td:first-child { padding-left: 10px; padding-right: 4px; }
.command table.board th:nth-child(2),
.command table.board td.stop-order { padding-left: 12px; padding-right: 8px; text-align: center; }
.command table.board th:nth-child(3),
.command table.board td.st-cell { padding-left: 14px; padding-right: 14px; text-align: center; }
.command table.board td.st-cell .st { margin-inline: auto; }
.command table.board th:nth-child(4),
.command table.board td.who { padding-left: 22px; }
.command table.board th:nth-child(7),
.command table.board td.pay { width: 1%; white-space: nowrap; padding-left: 36px; }
.command table.board td.pay .bhrs,
.command table.board td.pay .bhrs b,
.command table.board td.pay .bhr { display: inline; white-space: nowrap; }
.command table.board td.pay .bhr + .bhr::before { content: " · "; color: var(--muted); font-weight: 500; }
.command table.board td.pay .bhr.bid { color: var(--muted); }
.command table.board td.pay .bhr.under { color: var(--grass); }
.command table.board td.pay .bhr.over { color: var(--red); }
.command table.board th .sort,
.command table.board th .sort:hover {
background: transparent; color: var(--muted); border: 0; height: auto; min-height: 0; padding: 0;
border-radius: 0; box-shadow: none; font: inherit; font-size: inherit; letter-spacing: inherit;
text-transform: inherit; font-weight: 650; cursor: pointer;
}
.command table.board th .sort:hover { color: var(--ink); }
.command table.board th .sort.on::after { content: " ↑"; }
.command table.board th .sort.desc::after { content: " ↓"; }
.command table.board th.what-head .sort { margin-right: 8px; }
/* Compact "by" dropdown in a table header (same pill look as list-bar filters, header size). */
.command table.board th .th-pick {
display: inline-block; width: auto; height: 24px; min-height: 24px; margin: 0; padding: 0 24px 0 10px; vertical-align: middle;
border: 1px solid var(--line); border-radius: 999px; background-color: #fff; background-position: right 8px center;
color: var(--ink); font: inherit; font-size: .75rem; font-weight: 650; letter-spacing: 0; text-transform: none; cursor: pointer;
}
.command table.board th .th-pick:hover { border-color: var(--muted); }
.command table.board th .th-pick:focus { background-color: #fff; border-color: var(--teal); outline: none; }
.command table.board th.what-head { white-space: nowrap; }
.command table.board td.who,
.command table.board td.what { min-width: 0; }
.command table.board td.when,
.command table.board td.pay,
.command table.board td.last,
.command table.board td.stop-order,
.command table.board td.st-cell { white-space: nowrap; }
.when-clock { display: block; }
.command table.board td.who .muted,
.command table.board td.what .muted,
.command table.board td.when .muted { display: block; margin-top: 1px; font-size: .75rem; font-weight: 500; line-height: 1.25; color: var(--muted); }
.command table.board td.when .pause-pill { margin-top: 4px; }
.command table.board td.pay .pay-amt { display: block; font-variant-numeric: tabular-nums; font-weight: 750; }
.command .job-note b { color: var(--ink); font-weight: 750; }
.pause-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--orange); color: var(--ink); font-size: .72rem; font-weight: 750; white-space: nowrap; }
.command .stop-order { white-space: nowrap; cursor: grab; }
.command .stop-order .nudge {
width: 22px; height: 22px; min-height: 22px; padding: 0; border-radius: 7px;
background: var(--paper); color: var(--ink); border: 0; font-size: .85rem;
}
.command .order-num {
width: 40px; height: 32px; min-height: 32px; margin: 0 2px; padding: 0;
text-align: center; font-size: 14px; font-weight: 650; line-height: 32px; color: var(--ink);
border: 1px solid var(--line); border-radius: 8px; background: #fff;
-moz-appearance: textfield;
}
.command .order-num::-webkit-outer-spin-button,
.command .order-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.route-pin-wrap { background: none !important; border: 0 !important; }
.leaflet-marker-icon.route-pin-wrap { overflow: visible; }
.route-pin {
width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: var(--blue); color: #fff;
transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.28);
}
.route-pin span { transform: rotate(45deg); font-size: 12px; font-weight: 800; line-height: 1; }
.command tr.job-row:target td { background: #E8F3FF; }
.command .job-note { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; background: none; font-size: 12px; line-height: 1.3; color: var(--muted); }
.command .job-note + .job-note { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.command .job-note .ico { width: 14px; height: 14px; flex: none; }
.command .job-note-text { min-width: 0; }
.command .note-tools { margin-left: auto; display: flex; gap: 2px; flex: none; }
.command .note-tools button { width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--muted); }
.command .note-tools button:hover { background: transparent; color: var(--ink); }
.command .note-tools .note-trash, .command .note-tools .note-trash:hover { color: var(--red); }
.command .job-note-row td { background: #fff; padding-top: 0; padding-bottom: 12px; border-top: 0; border-bottom: 12px solid var(--paper); }
.command table.board tr.job-row:last-child > td,
.command table.board tr.job-note-row:last-child > td { border-bottom: 1px solid var(--line); }
.command #dispatch-map { height: 380px; border-radius: 12px; }
.command table.board th.note-col,
.command table.board td.note-col { white-space: nowrap; text-align: center; width: 1%; padding-left: 22px; padding-right: 10px; }
.command table.board th.file-col,
.command table.board td.file-col { white-space: nowrap; text-align: center; width: 1%; padding-left: 16px; padding-right: 18px; }
.command table.board td.note-col button,
.command table.board td.file-col button { display: inline-flex; align-items: center; gap: 4px; height: 30px; min-height: 30px; padding: 0 8px; font-size: .78rem; }
.command table.board td.note-col .ico,
.command table.board td.file-col .ico { width: 16px; height: 16px; }
.command table.board td.note-col b,
.command table.board td.file-col b { font-size: .75rem; font-weight: 750; }
dialog h2 { margin: 0 0 6px; }
dialog p { margin: 0 0 12px; }
dialog select { width: 100%; margin: 0 0 14px; }
dialog::backdrop { background: rgba(8, 20, 32, .45); }
dialog textarea { width: 100%; }
.st { display: inline-grid; place-items: center; }
.st svg { width: 16px; height: 16px; display: block; }
.st.pending { color: var(--muted); background: var(--paper); }
.st.dispatched, .st.driving { color: var(--blue); background: var(--paper); }
.st.onsite { color: var(--ink); background: var(--grass); }
.st.paused { color: var(--ink); background: var(--orange); }
.st.done { color: #248C34; background: var(--paper); }
.st.skipped { color: var(--red); background: var(--paper); }
.st.cancelled { color: #fff; background: var(--red); }
.sky {
display: grid;
grid-template-columns: minmax(160px, 200px) minmax(0, 1fr) minmax(300px, 420px);
grid-template-areas: "now days radar" "meters meters meters";
gap: 14px 18px;
margin: 0 0 16px;
padding: 18px;
border-radius: 18px;
color: #f4fbff;
background:
radial-gradient(900px 280px at 0% 0%, rgba(82, 196, 214, .35), transparent 60%),
linear-gradient(145deg, #0b2944 0%, #0c3c4c 48%, #0d5c58 100%);
box-shadow: 0 16px 40px rgba(8, 28, 48, .18);
}
.sky-now { grid-area: now; }
.sky-place { font-weight: 750; letter-spacing: .02em; }
.sky-read { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; }
.sky-icon { font-size: 2rem; line-height: 1; }
.sky-temp { font-size: 3rem; font-weight: 750; line-height: .9; letter-spacing: -.04em; }
.sky-temp sup { font-size: 1.15rem; }
.sky-meta { color: rgba(244, 251, 255, .78); }
.sky-days { grid-area: days; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 8px; height: 100%; min-width: 0; }
.sky-day {
display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 2px;
min-width: 0; height: 100%; text-align: center; padding: 8px 6px;
background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px;
}
.sky-when { color: rgba(244, 251, 255, .7); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.sky-when b { color: #fff; font-size: .95rem; letter-spacing: 0; }
.sky-ico { font-size: 1.15rem; line-height: 1; }
.sky-temps { display: flex; gap: 6px; align-items: baseline; }
.sky-temps strong { font-weight: 750; }
.sky-temps em, .sky-extra { color: rgba(244, 251, 255, .72); font-style: normal; font-size: .68rem; }
.sky-extra { display: grid; gap: 1px; line-height: 1.25; }
.sky-radar { grid-area: radar; display: flex; min-width: 0; min-height: 0; }
.radar-stage {
position: relative; flex: 1; width: 100%; min-height: 180px; border-radius: 12px; overflow: hidden; isolation: isolate;
clip-path: inset(0 round 12px); background: #1a1d22; border: 1px solid rgba(255, 255, 255, .08);
}
.radar-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.radar-echo { z-index: 2; }
.radar-labels { z-index: 1; }
.radar-live {
position: absolute; left: 10px; top: 10px; z-index: 3; padding: 3px 8px; border-radius: 999px;
background: rgba(6, 16, 24, .72); color: #d7fff4; font-size: .72rem; font-weight: 750; letter-spacing: .04em;
}
.radar-live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 99px; background: #3dffb0; box-shadow: 0 0 8px #3dffb0; }
.sky-soil { grid-area: meters; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.sky-soil > div {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08);
border-radius: 14px; padding: 12px 16px;
}
.sky-soil span { display: block; color: #fff; font-weight: 750; letter-spacing: .01em; }
.sky-soil em { display: block; margin-top: 2px; color: rgba(244, 251, 255, .68); font-style: normal; font-size: .75rem; }
.sky-soil b { font-size: 1.85rem; line-height: 1; letter-spacing: -.03em; }
.sky-soil .soil-dry { color: #ffb4a8; }
.sky-soil .soil-fair { color: #ffd08a; }
.sky-soil .soil-good { color: #9cf0df; }
.sky-soil .soil-wet { color: #b9d4ff; }
.sky-soil .soil-humid { color: #9cf0df; }
.sky-soil .soil-heavy { color: #b9d4ff; }
.dash { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .9fr); gap: 16px; align-items: stretch; }
.dash-main { display: contents; }
.dash .stats { grid-column: 1; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dash .stat { min-width: 0; }
.dash .profit-card { grid-column: 2; margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
@media (max-width: 900px) {
.sky { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "now" "days" "radar" "meters"; }
.sky-days { width: auto; min-width: 0; height: auto; grid-template-rows: auto auto; align-items: stretch; }
.sky-day { height: auto; justify-content: flex-start; gap: 3px; padding: 8px 4px; }
.sky-temps { justify-content: center; font-size: .8rem; }
.sky-soil { grid-template-columns: minmax(0, 1fr); }
.radar-stage { min-height: 180px; min-width: 0; aspect-ratio: 16 / 9; flex: none; }
.dash { grid-template-columns: minmax(0, 1fr); }
.dash .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash .profit-card, .dash .stats { grid-column: 1; height: auto; }
}
.card > .list-results { margin: 0; }
.card > .list-results:has(.visit) { margin: 4px 0 0; overflow: visible; }
.list-results > .visit { margin: 0 0 10px; }
.list-results { overflow-x: auto; }
.list-results table { min-width: 720px; }
.list-results th, .list-results td { white-space: nowrap; vertical-align: middle; }
.list-results td.num { font-variant-numeric: tabular-nums; }
.list-results td:nth-child(2), .list-results td:nth-child(3), .list-results td.wrap { white-space: normal; }
.card > table:not(.board),
.list-results table,
.review-sheet table,
table.roster { border-collapse: separate; border-spacing: 0; }
.card > table:not(.board) th,
.list-results table th,
.review-sheet table th,
table.roster th { position: sticky; top: 0; z-index: 1; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: none; }
.card > table:not(.board) th:first-child,
.list-results table th:first-child,
.review-sheet table th:first-child,
table.roster th:first-child { border-top-left-radius: 12px; border-left: 1px dashed var(--line); }
.card > table:not(.board) th:last-child,
.list-results table th:last-child,
.review-sheet table th:last-child,
table.roster th:last-child { border-top-right-radius: 12px; border-right: 1px dashed var(--line); }
.card > table:not(.board) tr:last-child td:first-child,
.list-results table tr:last-child td:first-child,
.review-sheet table tr:last-child td:first-child,
table.roster tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.card > table:not(.board) tr:last-child td:last-child,
.list-results table tr:last-child td:last-child,
.review-sheet table tr:last-child td:last-child,
table.roster tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.card > table:not(.board) td:first-child,
.card > table:not(.board) th:first-child,
.list-results table td:first-child, .list-results table th:first-child,
.review-sheet table td:first-child, .review-sheet table th:first-child,
table.roster td:first-child, table.roster th:first-child { border-left: 1px dashed var(--line); }
.card > table:not(.board) td:last-child,
.card > table:not(.board) th:last-child,
.list-results table td:last-child, .list-results table th:last-child,
.review-sheet table td:last-child, .review-sheet table th:last-child,
table.roster td:last-child, table.roster th:last-child { border-right: 1px dashed var(--line); }
.card > table:not(.board) tr:hover td,
.list-results tr:hover td,
table.roster tr:hover td,
.review-sheet tr:hover td { background: var(--paper); }
td:last-child:has(button), td:last-child:has(form) { text-align: right; }
td:last-child form { display: inline; margin: 0; }
td:last-child form.drop { display: inline-flex; align-items: center; vertical-align: middle; }
td:last-child button, td:last-child .btn { height: 30px; min-height: 30px; padding: 0 12px; font-size: .78rem; line-height: 1; border-radius: 999px; }
input, select, textarea {
border-color: #d5e0ec;
border-radius: 10px;
transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(15, 159, 147, .16);
}
button, .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 36px; min-height: 36px; padding: 0 16px; line-height: 1; border-radius: 999px;
}
select.reason + button,
select.reason + .btn {
height: 30px; min-height: 30px; padding: 0 14px; font-size: .78rem; margin-top: 0;
}
.assign-head select.reason + button,
.assign-head select.reason + .btn { height: 28px; min-height: 28px; padding: 0 12px; }
.stat.predict { background: #eefbe6; }
.stat.predict b, .stat.predict span { color: var(--ink); }
.predict-pill { display: inline-block; background: var(--grass); color: var(--ink); border-radius: 999px; padding: 2px 8px; }
td, .list-count, .pager { font-variant-numeric: tabular-nums; }
.side nav a { padding: 9px 12px; }
.side nav > a { padding: 10px 12px; font-size: .68rem; font-weight: 700; line-height: 1.2; }
.top-pills { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.top-pills .pill {
display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px;
background: var(--blue); color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap;
}
.top-pills .pill.money { background: var(--grass); color: var(--ink); }
.top-actions .top-action { margin-left: 0; }
/* Page title toolbar (docs/ui-patterns.md): icon buttons, then one primary on the right. */
.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; flex-wrap: nowrap; }
.top-ico { width: 32px; height: 32px; min-height: 32px; padding: 0; flex: none; }
.top-ico .ico, .top-primary .ico, .top-more-item .ico { width: 18px; height: 18px; }
.top-primary .ta-ico { display: none; }
.top-more { position: relative; }
.top-more summary { list-style: none; }
.top-more summary::-webkit-details-marker { display: none; }
.top-more .status-menu { top: 40px; min-width: 200px; padding: 6px; }
.top-more-item {
display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; min-height: 36px; padding: 0 10px; justify-content: flex-start;
background: none; border: 0; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600;
}
.top-more-item:hover { background: var(--paper); }
.print-only { display: none; }
/* Print view (?print=1): the printed page on screen, with only the header Back pill and Print button. */
.print-view .side, .print-view .phone-dock, .print-view .no-print, .print-view .list-bar, .print-view .menu-btn, .print-view #hc-fab, .print-view .hc-fab { display: none !important; }
.print-view .content { margin-left: 0; }
.print-view .print-only { display: block; }
.print-view { background: #fff; }
@media print {
.side, .top, .no-print, .phone-dock { display: none !important; }
.print-only { display: block; }
.content { margin: 0 !important; }
body { background: #fff; }
}
.assign-card, .visit, .chem-place, .rate-box { box-shadow: none; }
.ledger-hero { display: grid; gap: 14px; }
.ledger-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.ledger-bars { display: grid; gap: 8px; }
.ledger-bars div { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 10px; }
.ledger-bars .bar { display: block; height: 12px; border-radius: 99px; min-width: 0; }
.ledger-bars .bar.paid { background: var(--blue); }
.ledger-bars .bar.got { background: var(--grass); }
.ledger-month-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ledger-month-head h2 { margin: 0; }
.ledger-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ledger-cols.one { grid-template-columns: 1fr; }
.ledger-cols h3 { margin: 12px 0 0; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ledger-line { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ledger-line time { color: var(--muted); font-variant-numeric: tabular-nums; }
.ledger-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ledger-cost { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; color: var(--muted); font-size: .8rem; }
.badge.due { background: var(--orange); color: var(--ink); }
.phone-picks { display: none; }
@media (max-width: 800px) {
.ledger-cols { grid-template-columns: 1fr; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { min-width: 0; }
.stat span:not(.badge) { min-width: 0; white-space: normal; }
.phone-pick {
display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
background: #fff; color: var(--ink); text-decoration: none;
}
.phone-pick b { display: block; }
.phone-pick span { display: block; margin-top: 2px; color: var(--muted); font-size: .8rem; }
.phone-list .list-results { overflow: clip; max-width: 100%; }
.phone-list .list-results table { display: none !important; min-width: 0 !important; }
.phone-list .list-search { width: 100%; min-width: 0; max-width: 100%; }
.phone-list .phone-picks { display: grid; gap: 8px; }
.phone-list .list-bar { display: grid; grid-template-columns: 1fr; }
.phone-list .status-filter summary { max-width: none; }
.card.ref-list > .list-results { margin: 0; }
.card.ref-list .phone-picks { margin: 0 8px; }
.ref-list .ref-key { margin: 0 0 10px; font-size: .75rem; line-height: 1.35; }
.ref-list .phone-pick,
.ref-list .phone-pick span,
.ref-list .phone-pick p {
max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.ref-list .phone-pick p { margin: 8px 0 0; font-size: .8rem; line-height: 1.35; }
.ref-list .phone-pick i {
display: block; margin-bottom: 2px; font-style: normal; color: var(--muted);
font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 650;
}
table.phone-sheet, table.phone-sheet tbody, table.phone-sheet tr {
display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
table.phone-sheet tr:first-child { display: none; }
table.phone-sheet tr {
margin: 0 0 8px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
table.phone-sheet td, table.phone-sheet td:first-child, table.phone-sheet td:last-child {
display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: center;
width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; border: 0; padding: 4px 0;
text-align: left; white-space: normal; background: transparent;
}
.slim-list > table td, .slim-list > table th { border-left: 0; border-right: 0; border-radius: 0; }
table.phone-sheet td::before {
content: attr(data-label); color: var(--muted); font-size: .68rem; letter-spacing: .04em;
text-transform: uppercase; font-weight: 650;
}
table.phone-sheet td:not([data-label]),
table.phone-sheet td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
table.phone-sheet td:not([data-label])::before,
table.phone-sheet td[data-label=""]::before { content: none; }
table.phone-sheet td[data-label=""] { font-weight: 650; }
table.phone-sheet td:empty { display: none; }
table.phone-sheet .override-note { grid-column: 2; margin: 2px 0 0; }
table.phone-sheet tr:hover td { background: transparent; }
table.phone-sheet form.row, table.phone-sheet form.drop {
display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px;
width: 100%; min-width: 0; margin: 0;
}
table.phone-sheet form.row input, table.phone-sheet input.rate-in { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; }
table.phone-sheet select.reason { width: auto; min-width: 0; flex: 1 1 120px; }
.row.preview-size { align-items: center; }
.row.preview-size label { width: 100%; }
.row.preview-size input { flex: 1; width: auto; min-width: 0; }
.slim-list { overflow-x: visible; }
.slim-list > table, .slim-list > table tbody { display: block; width: 100%; max-width: 100%; min-width: 0; }
.slim-list > table tr { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; max-width: 100%; box-sizing: border-box; border-bottom: 1px solid var(--line); }
.slim-list > table tr:first-child { display: none; }
.slim-list > table td { border: 0; padding: 12px 0; white-space: normal; }
.slim-list > table td:not(:first-child) { display: none; }
.slim-list > table td:first-child { flex: 1; min-width: 0; }
.slim-list > table td:last-child:not(:has(form)):not(:has(button)) { display: block; flex: none; }
.slim-list > table tr:hover td { background: transparent; }
.ref-key { line-height: 1.45; }
#ref-q { width: 100%; max-width: 100%; min-width: 0; }
.command, .command .card { overflow-x: visible; max-width: 100%; }
.command .card:has(table.board) { overflow-x: visible; }
.command .board-top {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
width: 100%; max-width: 100%; min-width: 0; gap: 8px;
}
.command .week-jumps { display: contents; }
.command .jump-wait { order: 1; grid-column: 1; width: 100%; min-width: 0; }
.command .jump-next { order: 2; grid-column: 2; width: 100%; min-width: 0; }
.command .jump-today,
.command .jump-today.today-here { order: 3; grid-column: 1 / -1; width: 100%; min-width: 0; display: flex; }
.command .week-days {
grid-column: 1 / -1; order: 4;
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
max-width: 100%; overflow: visible; gap: 4px;
}
.command .week-days a { min-width: 0; width: auto; padding: 4px 0; flex: none; }
.command .board-range {
grid-column: 1 / -1; order: 5; margin-left: 0;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: 100%; min-width: 0;
}
.command .board-range > .range-prev { grid-column: 1; grid-row: 1; }
.command .board-range > .range-next { grid-column: 2; grid-row: 1; }
.command .board-range > input[type="date"] {
grid-column: 1 / -1; width: 100%; min-width: 0; max-width: 100%;
}
.command .board-range > input[name="start"] { grid-row: 2; }
.command .board-range > input[name="end"] { grid-row: 3; }
.command .board-range > span { display: none; }
.command .list-bar:not(.lb) { display: grid; grid-template-columns: 1fr; }
.command .list-bar:not(.lb) select { width: 100%; }
.command table.board,
.command table.board tbody { display: block; width: 100%; min-width: 0; }
.command table.board tr:first-child { display: flex; align-items: center; gap: 8px; padding: 0 2px 8px; }
.command table.board tr:first-child th { display: none; position: static; border: 0; padding: 0; background: transparent; box-shadow: none; }
.command table.board tr:first-child th:first-child { display: flex; align-items: center; gap: 8px; }
.command table.board tr:first-child th:first-child::after { content: "Select all"; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 650; font-size: .8rem; }
.command table.board tr.job-row {
display: grid;
width: 100%;
box-sizing: border-box;
grid-template-columns: 28px 34px minmax(0, 1fr) 36px 36px;
grid-template-areas:
"check status who note files"
"service service service service service"
"when when pay pay pay"
"order order order order order";
gap: 4px 8px;
align-items: center;
margin: 0 0 10px;
padding: 12px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
max-width: 100%;
overflow: hidden;
}
.command table.board tr.job-row td { display: block; min-width: 0; border: 0; padding: 0; white-space: normal; background: transparent; }
.command table.board tr.job-row td:nth-child(1) { grid-area: check; width: 28px; justify-self: center; }
.command table.board tr.job-row td:nth-child(2) { grid-area: order; justify-self: start; }
.command table.board tr.job-row td:nth-child(3) { grid-area: status; }
.command table.board tr.job-row td.st-cell {
width: 34px; min-width: 34px; max-width: 34px; padding: 0;
display: flex; align-items: center; justify-content: flex-start; gap: 4px; text-align: left;
}
.command table.board tr.job-row td.st-cell .st { width: 34px; height: 34px; flex: none; margin: 0; }
.command table.board tr.job-row td:nth-child(4) { grid-area: who; }
.command table.board tr.job-row td:nth-child(4) a,
.command table.board tr.job-row td:nth-child(4) .muted,
.command table.board tr.job-row td:nth-child(5) a,
.command table.board tr.job-row td:nth-child(5) .muted {
display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.command table.board tr.job-row td:nth-child(5) { grid-area: service; }
.command table.board tr.job-row td:nth-child(6) { grid-area: when; }
.command table.board tr.job-row td:nth-child(7) { grid-area: pay; justify-self: end; text-align: right; }
.command table.board tr.job-row td.when,
.command table.board tr.job-row td.pay,
.command table.board tr.job-row td.stop-order { width: auto; max-width: none; }
.command table.board tr.job-row td.when .muted,
.command table.board tr.job-row .when-clock { white-space: nowrap; }
.command table.board tr.job-row td.pay,
.command table.board tr.job-row td.pay .bhrs { white-space: nowrap; }
.command table.board tr.job-row td.stop-order { display: flex; align-items: center; gap: 4px; justify-self: start; }
.command table.board tr.job-row .order-num { width: 44px; flex: none; }
.command table.board tr.job-row td:nth-child(8) { grid-area: note; }
.command table.board tr.job-row td:nth-child(9) { grid-area: files; }
.command table.board tr.job-row > td,
.command table.board tr.job-row:last-child > td,
.command table.board tr.job-note-row > td,
.command table.board tr.job-note-row:last-child > td { border: 0; border-radius: 0; }
.command table.board tr.job-row td.note-col,
.command table.board tr.job-row td.file-col {
width: auto; max-width: 40px; justify-self: end;
}
.command table.board tr.job-row td.note-col { grid-area: note; }
.command table.board tr.job-row td.file-col { grid-area: files; }
.command table.board tr.job-row td.note-col button,
.command table.board tr.job-row td.file-col button {
width: 34px; min-width: 34px; max-width: 34px; height: 34px; min-height: 34px;
padding: 0; gap: 0; border-radius: 50%; justify-content: center; position: relative;
}
.command table.board tr.job-row td.note-col b,
.command table.board tr.job-row td.file-col b {
position: absolute; top: 1px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px;
border-radius: 99px; background: var(--ink); color: #fff; font-size: .6rem; line-height: 14px; text-align: center;
}
.command table.board tr.job-note-row { display: block; margin: -10px 0 10px; padding: 0 12px 8px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; background: #fff; }
.command table.board tr.job-note-row td { display: block; border: 0; padding: 0; white-space: normal; background: transparent; }
.command table.board tr.job-note-row td:first-child { display: none; }
.command #dispatch-map { height: 240px; }
}
.field-body { margin: 0; background: var(--ink); }
.field-app { max-width: 480px; min-height: 100dvh; margin: 0 auto; background: var(--paper); display: flex; flex-direction: column; }
.field-top { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; min-height: 56px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; background: var(--ink); color: #fff; }
.field-top b { font-size: 1.05rem; }
.field-top span { color: #c8c8c8; font-size: .85rem; }
.field-burger { width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: #fff; }
.field-burger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.field-top:has(.field-gear) { grid-template-columns: 44px 1fr auto 40px; }
.field-gear { display: grid; place-items: center; }
.field-when { display: flex; align-items: center; background: #fff; border-bottom: 1px solid var(--line); }
.field-back { flex: none; margin: 0 0 0 10px; height: 58px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); display: flex; align-items: center; background: #fff; color: var(--blue); font-weight: 750; font-size: .78rem; text-decoration: none; }
.field-days { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; padding: 10px 12px; background: #fff; scrollbar-width: none; }
.field-days::-webkit-scrollbar { display: none; }
.field-day { flex: none; width: 48px; height: 58px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); }
.field-day span { font-size: .7rem; color: var(--muted); font-weight: 650; }
.field-day b { font-size: 1.05rem; }
.field-day.today span, .field-day.today b { color: var(--blue); }
.field-day.on { background: var(--grass); }
.field-day.on span, .field-day.on b { color: var(--ink); }
.field-tally { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 10px 8px; background: #fff; border-bottom: 1px solid var(--line); text-align: center; align-items: end; }
.field-tally > div { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; }
.field-tally > div > b { height: 36px; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-variant-numeric: tabular-nums; text-align: center; }
.field-tally span { display: block; color: var(--muted); font-size: .68rem; text-align: center; }
.field-tally .over b { color: var(--orange); }
.field-score .score-dial { position: relative; width: 36px; height: 36px; margin: 0 auto; }
.field-score svg { width: 36px; height: 36px; display: block; }
.field-score circle { fill: none; stroke-width: 3.4; }
.field-score .track { stroke: var(--line); }
.field-score .fill { stroke: var(--grass); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 18px 18px; stroke-dasharray: calc(var(--p) * 97.39 / 100) 97.39; }
.field-score .score-dial b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .68rem; line-height: 1; }
.field-crew { display: flex; gap: 14px; overflow-x: auto; padding: 12px; background: #fff; border-bottom: 1px solid var(--line); }
.field-look { display: block; padding: 10px 12px 0; }
.field-look .map-hold { z-index: 0; isolation: isolate; }
.field-look .leaflet-container { z-index: 0; }
.field-look .map-hold:not(.is-live) .leaflet-container { pointer-events: none !important; touch-action: pan-y; }
.field-look .map-hold:not(.is-live) .leaflet-marker-icon { pointer-events: auto !important; }
.map-move { position: absolute; z-index: 4; right: 8px; bottom: 8px; height: 30px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: .72rem; }
.map-move.on, .map-move.on:hover { background: var(--blue); color: #fff; }
.field-look #field-stops { height: 220px; border: 1px solid var(--line); border-radius: 12px; }
.field-house { position: relative; height: 210px; margin: 12px 12px 0; overflow: hidden; border-radius: 16px; background: #d5d8dc; }
.field-house img { display: block; width: 100%; height: 100%; object-fit: cover; }
.field-house.later { background: #d5d8dc linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) 0 0 / 250% 100% no-repeat; animation: house-wait 1.4s linear infinite; transition: height .25s ease, margin .25s ease; }
.field-house.later img { opacity: 0; transition: opacity .4s ease; }
.field-house.later.loaded { animation: none; background-image: none; }
.field-house.later.loaded img { opacity: 1; }
.field-house.later.gone { height: 0; margin-top: 0; animation: none; }
@keyframes house-wait { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { .field-house.later { animation: none; } .field-house.later img { transition: none; } }
.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sheet-top a { margin: 0; width: 36px; height: 36px; }
.sheet-line { display: flex; align-items: center; gap: 10px; }
.sheet-line b { flex: 1; min-width: 0; }
.field-look > span { display: block; margin-top: 4px; color: var(--muted); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 650; }
.route-pin.on { background: var(--grass); color: var(--ink); animation: status-pulse 1.6s ease-out infinite; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field-ask label span { color: var(--muted); font-weight: 500; }
.field-ask form { max-height: 70dvh; overflow: auto; }
.bhrs b { display: block; font-variant-numeric: tabular-nums; font-weight: 750; }
.bhr { display: block; margin-top: 1px; font-size: .72rem; font-weight: 650; white-space: nowrap; }
.bhr.over { color: var(--orange); }
.bhr.under, .bhr.bid { color: var(--muted); font-weight: 600; }
.field-person { flex: none; width: 72px; text-align: center; color: var(--muted); }
.field-person b { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 4px; border-radius: 50%; background: var(--paper); color: var(--ink); }
.field-person.on b { background: var(--navy); color: #fff; }
.field-person span, .field-person em { display: block; font-style: normal; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-person em { color: var(--grass); font-weight: 650; }
.field-crew .field-team { align-self: center; margin-left: auto; flex: none; white-space: nowrap; }
.field-toast { margin: 10px 12px 0; padding: 10px 12px; border-radius: 12px; font-weight: 650; }
/* My Day has no header: the shared toasts float at the top, over the Service sheet, below the iPhone notch. */
.field-body .notices { position: fixed; z-index: 60; top: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; height: 0; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 0; pointer-events: none; }
/* Taps go through to the sheet's tabs underneath; only × and Undo take them. */
.field-body .notices > .toast { pointer-events: none; margin-top: 0; box-shadow: 0 8px 24px rgba(16, 24, 40, .22); }
.field-body .notices .toast-x, .field-body .notices .geo-undo { pointer-events: auto; }
.field-body .notices > .toast span { overflow-wrap: anywhere; }
.field-body .notices .geo-undo { display: inline-flex; margin: 0; }
.field-toast.ok { background: var(--grass); color: var(--ink); }
.field-toast.bad { background: var(--red); color: #fff; }
.field-alert { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; }
.field-alert span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-list { flex: 1; padding: 12px 12px 24px; }
@media (max-width: 800px) {
.field-list { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
body.has-job .phone-dock { display: none; }
}
.field-month { margin: 0; padding: 8px 12px 0; background: #fff; color: var(--muted); font-size: .75rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.field-mo { flex: none; align-self: center; color: var(--muted); font-style: normal; font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
body.has-job { overflow: hidden; }
.field-sheet { position: fixed; z-index: 25; inset: 0; max-width: 480px; margin: 0 auto; background: var(--navy); display: flex; flex-direction: column; }
.field-sheet.driving { background: var(--blue); }
.field-sheet.onsite { background: var(--navy); }
.field-sheet.paused { background: var(--orange); }
.field-sheet-bar { background: transparent; box-shadow: none; }
.field-sheet-bar { display: flex; align-items: flex-start; gap: 8px; min-height: 92px; padding: calc(env(safe-area-inset-top, 0px) + 14px) 8px 18px 16px; background: transparent; color: #fff; box-shadow: none; }
.field-sheet-bar div { min-width: 0; flex: 1; }
.field-sheet-bar a { margin-left: 4px; width: 44px; height: 44px; display: grid; place-items: center; color: #fff; text-decoration: none; font-size: 2rem; line-height: 1; }
.field-sheet-bar small, .field-sheet-bar .who, .field-sheet-bar em { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-sheet-bar small { display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: calc(100% - 52px); margin-top: 4px; padding: 4px 10px 4px 8px; border-radius: 999px; background: #fff; color: var(--ink); font-size: .62rem; letter-spacing: .03em; text-transform: uppercase; font-weight: 750; }
.field-sheet-bar small i { width: 8px; height: 8px; border-radius: 50%; background: var(--grass); animation: status-pulse 1.6s ease-out infinite; }
@keyframes status-pulse { 70% { box-shadow: 0 0 0 6px transparent; } }
.field-sheet-bar small.ready i { background: #c8c8c8; animation: none; }
.field-sheet-bar small.done i { background: var(--grass); animation: none; }
.field-sheet-bar small.skipped i { background: var(--red); animation: none; }
.field-sheet-bar small.over i { background: var(--orange); }
.field-sheet.driving .field-sheet-bar small { background: #fff; color: var(--blue); }
.field-sheet.driving .field-sheet-bar small i { background: var(--blue); }
.field-sheet.paused .field-sheet-bar small { background: var(--navy); color: #fff; }
.field-sheet.paused .field-sheet-bar small i { background: #fff; animation: none; }
.field-sheet-bar .who { margin-top: 4px; color: rgba(255,255,255,.9); font-size: .85rem; }
.field-sheet-bar div b { display: block; margin-top: 2px; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.02em; white-space: normal; }
.field-sheet-bar em { margin-top: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-style: normal; font-size: .72rem; font-weight: 650; width: fit-content; max-width: 100%; }
.sheet-line em { margin-top: 0; align-self: center; }
.sheet-line em { margin: 0; flex: none; max-width: 46%; }
.field-sheet-body { flex: 1; overflow: auto; padding-bottom: 12px; background: var(--paper); border-radius: 22px; margin: 0 12px; }
.field-sheet.stepping .job-tabs,
.field-sheet.stepping .field-sheet-body,
.field-sheet.stepping .job-dock { display: none; }
.sheet-step { flex: 1; overflow: auto; margin: 0 12px 12px; padding: 16px; background: var(--paper); color: var(--ink); border-radius: 22px; }
.sheet-step[hidden] { display: none; }
.sheet-step h2 { margin: 0 0 6px; }
.sheet-step p { margin: 0 0 14px; color: var(--muted); }
.sheet-step form { display: flex; flex-direction: column; gap: 8px; }
.sheet-step button { width: 100%; }
.field-where { margin: 8px 12px 0; color: var(--muted); font-size: .75rem; }
.field-house.short { height: 160px; margin: 0; }
dialog.field-ask.screen { position: fixed; inset: 0; width: min(480px, 100%); height: 100dvh; max-height: none; margin: 0 auto; border: 0; border-radius: 0; padding: calc(8px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); overflow: auto; }
.field-ask .sheet-x { width: 44px; height: 44px; min-height: 0; margin: 0 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 2rem; line-height: 1; }
.field-empty { color: var(--muted); text-align: center; padding: 32px 12px; }
.field-job { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 0 0 10px; text-decoration: none; color: inherit; }
.field-job.on { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(30, 144, 255, .25); }
.field-job i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grass); color: var(--ink); font-style: normal; font-weight: 750; }
.field-job strong, .field-job span, .field-job em, .field-job small { display: block; }
.field-job span, .field-job em, .field-job small { color: var(--muted); font-style: normal; }
.field-job strong { font-size: .85rem; }
.field-job em, .field-job small { font-size: .75rem; }
.field-job .st { width: 28px; height: 28px; border-radius: 8px; flex: none; display: inline-grid; place-items: center; align-self: center; }
.field-job .st svg { width: 15px; height: 15px; display: block; }
.field-drive { align-self: center; height: 36px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--grass); color: var(--ink); text-decoration: none; font-size: .75rem; font-weight: 750; display: inline-flex; align-items: center; }
.field-drive:hover { background: var(--grass); color: var(--ink); border-color: transparent; }
.field-acts { display: flex; align-items: center; gap: 6px; }
.field-acts form { margin: 0; }
.field-skip, .field-skip:hover { height: 36px; min-height: 36px; padding: 0 10px; border-radius: 10px; background: #fff; color: var(--ink); border: 1px solid var(--line); font-size: .75rem; }
.job-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: transparent; border-bottom: 0; padding: 0 8px 10px; }
.job-tabs button, .job-tabs button:hover { height: 48px; min-height: 48px; border: 0; border-radius: 12px; background: transparent; color: rgba(255,255,255,.72); border-bottom: 0; box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .62rem; padding: 0; }
.job-tabs button svg { width: 18px; height: 18px; }
.job-tabs button.on, .job-tabs button.on:hover { color: #fff; background: rgba(255,255,255,.16); border-bottom: 0; }
.field-sheet.driving .field-sheet-bar,
.field-sheet.onsite .field-sheet-bar,
.field-sheet.paused .field-sheet-bar { background: transparent; }
.field-now { display: flex; align-items: center; gap: 8px; margin: 10px 12px 0; padding: 10px 12px; background: var(--ink); color: #fff; border-radius: 16px; }
.field-now div { min-width: 0; flex: 1; }
.field-now b, .field-now span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-now span { color: #c8c8c8; font-size: .75rem; }
.field-now form { margin: 0; }
.note-when { display: block; margin: 2px 0 8px; color: var(--muted); font-style: normal; font-size: .72rem; font-weight: 650; }
.command .job-note .note-when { display: inline; margin: 0 0 0 8px; white-space: nowrap; font-size: 12px; font-weight: 500; font-style: normal; letter-spacing: 0; color: var(--muted); }
.note-block { margin: 0 0 18px; }
.note-block label { display: inline-flex; align-items: center; width: auto; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; background: var(--grass); color: var(--ink); font-size: .75rem; font-weight: 750; letter-spacing: 0; text-transform: none; }
.note-block label a, .visit-note a.pill, .visit-note span.pill { color: var(--ink); background: var(--grass); text-decoration: none; }
.note-block label a { background: transparent; color: inherit; }
.note-block label:has(a):hover, .visit-note a.pill:hover { background: var(--ink); color: #fff; }
.note-block .note-when { margin: 6px 0 0; }
.visit-notes { display: flex; flex-direction: column; gap: 8px; }
.visit-note { padding: 10px 12px; background: var(--paper); border-radius: 14px; }
.visit-note-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.visit-note-top .note-when { margin: 0; }
.visit-note p { margin: 6px 0 0; }
.note-tools { margin-left: auto; display: inline-flex; gap: 2px; flex: none; }
.note-tools button { width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.note-tools button:hover { color: var(--ink); background: transparent; }
.note-tools .note-trash, .note-tools .note-trash:hover { color: var(--red); }
.note-pill { position: relative; margin: 8px 12px 0; padding: 8px 12px; background: #fff; border-radius: 14px; font-size: .78rem; }
.note-pill .note-when { margin: 4px 0 0; }
.note-pill:has(.note-add) { padding-right: 40px; }
.note-pill span { display: block; color: var(--muted); font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.note-pill p { margin: 4px 0 0; }
.note-add, .note-add:hover { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 28px; height: 28px; min-height: 28px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: none; display: flex; align-items: center; justify-content: center; line-height: 0; }
.note-add svg { width: 14px; height: 14px; display: block; }
.wx-grid { margin: 10px 12px 0; }
.wx-save { margin: 12px 12px 0; }
.job-rows { margin: 12px; background: #fff; border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 24px rgba(16, 24, 40, .12); }
.job-rows div { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 12px 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.job-rows div:first-child { border-top: 0; }
.job-dock { position: relative; left: auto; bottom: auto; transform: none; width: auto; display: block; margin: 10px 12px calc(12px + env(safe-area-inset-bottom)); padding: 0; background: transparent; border: 0; }
.job-dock-card { display: flex; align-items: center; gap: 8px; padding: 8px 4px 8px 16px; background: #1c1c1c; color: #fff; border-radius: 22px; }
.dock-end { display: flex; align-items: center; gap: 36px; margin-left: auto; flex: none; }
.job-dock-card > .dock-end { margin-left: auto; flex: 0 0 auto; }
.dock-slot { width: 40px; height: 40px; flex: none; }
.dock-tools { display: flex; align-items: center; gap: 10px; margin-left: 0; flex: none; }
.job-dock-card > div { min-width: 0; flex: 1; }
.job-dock-card > div b, .job-dock-card > div span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-dock-card > div:has(.sheet-clock),
.dock-status {
flex: 0 1 9.5rem; width: 9.5rem; min-width: 4.5rem; text-align: center;
}
@media (max-width: 430px) { .dock-end { gap: 16px; } .dock-tools { gap: 6px; } }
.job-dock-card > .dock-status b,
.job-dock-card > .dock-status span {
width: 100%; text-align: center; overflow: visible; text-overflow: clip;
}
.job-dock .sheet-clock { display: block; width: 100%; font-size: 1rem; font-variant-numeric: tabular-nums; text-align: center; overflow: visible; }
.job-dock-card > div span { color: #c8c8c8; font-size: .72rem; font-weight: 650; }
.job-dock .tech-dot { display: inline-grid; place-items: center; width: 34px; height: 34px; margin: 0; overflow: visible; color: var(--ink); background: var(--grass); font-size: .85rem; line-height: 1; }
.dock-mini svg, .dock-mini .ico { width: 28px; height: 28px; display: block; }
.dock-mini#field-reach svg { width: 22px; height: 22px; }
.dock-mini#field-map svg { transform: translateY(-2px); }
.dock-mini.start .ico { width: 34px; height: 34px; }
.dock-mini.go:not(.start), .dock-mini.go:not(.start):hover { color: var(--grass); }
.dock-mini.pause, .dock-mini.pause:hover { color: var(--orange); }
.dock-mini.stop, .dock-mini.stop:hover { color: var(--red); }
.job-meter { display: block; height: 8px; margin: 4px 14px 0; padding: 0 !important; border: 0 !important; border-radius: 99px; background: var(--paper); overflow: hidden; }
.job-meter b { display: block; height: 8px; background: var(--grass); border-radius: 99px; }
.job-used { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 6px 14px 14px; border: 0; }
.job-used .used { color: var(--grass); font-weight: 750; }
.job-used .left { color: var(--ink); }
.job-dock button, .job-dock button:hover { border: 0; color: #fff; background: transparent; box-shadow: none; }
.dock-mini, .dock-mini:hover { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 12px; color: #fff; background: transparent; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.job-rows span { color: var(--muted); font-size: .75rem; }
.job-rows b { font-size: .9rem; }
.job-rows .job-meter { display: block; height: 8px; margin: 4px 14px 0; padding: 0; border: 0; border-radius: 99px; background: var(--paper); overflow: hidden; }
.job-rows .job-meter b { display: block; height: 8px; background: var(--grass); border-radius: 99px; }
.job-rows.over .job-meter b { background: var(--orange); }
.job-rows .job-used { display: flex; justify-content: space-between; border: 0; padding: 6px 14px 14px; }
.job-rows .job-used .used,
.job-rows .job-used .left { color: var(--ink); font-size: .75rem; font-weight: 750; }
.job-rows .job-used .used { color: var(--grass); }
.job-rows .job-used .left.over { color: var(--orange); }
.job-dock-card > div span.over, #dock-state.over { color: var(--orange); }
.job-rows p { margin: 0; padding: 8px 12px 12px; font-size: .78rem; font-weight: 650; }
.job-rows.over p { color: var(--orange); }
.tech-dot { width: 32px; height: 32px; margin: 0; border-radius: 50%; background: var(--grass); color: var(--ink); display: inline-grid; place-items: center; font-size: .8rem; font-weight: 750; flex: none; }
.prop-pics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.prop-pics img { width: 100%; height: 92px; object-fit: cover; border-radius: 12px; background: var(--paper); }
.job-files-card { margin: 12px; padding: 12px; background: #fff; border-radius: 16px; box-shadow: 0 10px 24px rgba(16, 24, 40, .12); }
.job-files-card > p { margin: 0 0 12px; color: var(--muted); font-size: .78rem; }
.pic-open { display: inline-flex; align-items: center; gap: 4px; height: 32px; min-height: 32px; padding: 0 8px; }
.pic-open .ico { width: 16px; height: 16px; }
.pic-open b { font-size: .75rem; font-weight: 750; }
.pic-tile { position: relative; }
.pic-share { margin: 4px 0 0; }
.pic-share .check { font-size: .75rem; color: var(--muted); }
.pic-shot, .pic-shot:hover { display: block; width: 100%; height: auto; min-height: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; overflow: hidden; box-shadow: none; }
.pic-del, .pic-del:hover { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-height: 22px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--red); color: #fff; line-height: 0; box-shadow: none; }
.pic-del svg { width: 12px; height: 12px; display: block; }
a.photo-place { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; height: auto; min-height: 36px; margin: 0 0 12px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; line-height: 1.15; }
a.photo-place:hover { border-color: var(--blue); background: var(--paper); color: var(--ink); }
a.photo-place b, a.photo-place span { display: block; }
a.photo-place b { font-size: .85rem; font-weight: 750; }
a.photo-place span { color: var(--muted); font-size: .72rem; font-weight: 500; }
.job-files { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.job-files img, .prop-pics img { width: 100%; height: 96px; object-fit: cover; display: block; background: var(--paper); }
#pic-view { position: fixed; inset: 0; z-index: 90; background: rgba(17, 17, 17, .94); display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(8px + env(safe-area-inset-top)) 0 calc(12px + env(safe-area-inset-bottom)); }
#pic-view[hidden] { display: none; }
#pic-view img { grid-column: 2; grid-row: 2; width: 100%; height: 100%; object-fit: contain; background: transparent; z-index: 1; }
#pic-view img[hidden], #pic-view .pic-empty[hidden], #pic-view .pic-nav[hidden], #pic-view form[hidden] { display: none; }
.pic-empty { grid-column: 2; grid-row: 2; margin: 0; color: #fff; text-align: center; z-index: 1; }
.pic-x, .pic-x:hover { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 8px; z-index: 3; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 2rem; line-height: 1; box-shadow: none; }
.pic-nav, .pic-nav:hover { width: 44px; height: 44px; min-height: 44px; margin: 0 auto; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 2rem; line-height: 1; grid-row: 2; box-shadow: none; z-index: 2; }
.pic-nav.prev { grid-column: 1; }
.pic-nav.next { grid-column: 3; }
.pic-bar { grid-column: 1 / -1; grid-row: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 16px 0; }
.pic-count { color: #fff; font-weight: 650; }
#pic-view .file-pick { width: auto; }
.file-pick { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 36px; min-height: 36px; padding: 0 16px; border: 1px solid var(--blue); border-radius: 999px; background: var(--blue); color: #fff; font: inherit; font-weight: 650; font-size: .85rem; cursor: pointer; overflow: hidden; }
.file-pick:hover { background: #1873cc; border-color: #1873cc; }
.file-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.photo-add { margin-top: 12px; }
.job-past { margin: 0 12px; }
.job-past article { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.job-past b, .job-past span, .job-past em { display: block; }
.job-past span, .job-past em, .job-past p { color: var(--muted); font-size: .75rem; font-style: normal; margin: 0; }
.job-past p { text-align: right; }
.field-burger:hover { background: transparent; color: inherit; border-color: transparent; }
.field-shade { position: fixed; inset: 0; background: rgba(17, 17, 17, .45); z-index: 80; }
.field-menu { width: min(300px, 82vw); height: 100%; background: var(--ink); color: #fff; padding: calc(18px + env(safe-area-inset-top)) 12px 24px; display: flex; flex-direction: column; gap: 4px; border-right: 3px solid var(--grass); }
.field-menu p { margin: 14px 8px 4px; color: #9a9a9a; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.field-menu a, .field-menu button { display: block; width: 100%; text-align: left; background: transparent; color: #eee; border: 0; border-radius: 8px; padding: 12px; text-decoration: none; font: inherit; font-weight: 650; height: auto; min-height: 0; }
.field-menu a.on, .field-menu button.on, .field-menu a:hover, .field-menu button:hover { background: var(--navy); color: #fff; }
.field-ask { border: 0; border-radius: 16px; padding: 18px; width: min(360px, calc(100% - 32px)); }
.field-ask[open] { display: flex; flex-direction: column; gap: 8px; }
.field-ask h2 { margin: 0 0 6px; }
.field-ask p { margin: 0 0 14px; color: var(--muted); }
.field-ask form { display: flex; flex-direction: column; gap: 8px; }
.field-ask button, .field-ask a.btn { width: 100%; }
.field-ask::backdrop { background: rgba(17, 17, 17, .45); }
@media (max-width: 800px) {
input, select, textarea { font-size: 16px; }
}
/* Emails (emails.php) and the shared editor (assets/editor.js) */
.nav-count { margin-left: auto; padding: 1px 8px; }
.mail-toast span { cursor: pointer; }
.mail-new td { font-weight: 700; }
.mail-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.mail-bar { margin-bottom: 16px; }
.mail-split .mail-list { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overflow-x: hidden; }
.mail-avatar { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 750; }
.mail-avatar.ours { background: var(--ink); }
.mail-msg { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 12px; }
.mail-msg.focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30, 144, 255, .16); scroll-margin: 80px; }
.mail-msg > summary { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; cursor: pointer; list-style: none; }
.mail-msg > summary::-webkit-details-marker { display: none; }
.mail-msg.ours > summary { background: var(--paper); border-radius: 12px; }
.mail-who { flex: 1; min-width: 0; }
.mail-line { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.mail-cut { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-date { margin-left: auto; flex: none; white-space: nowrap; }
.mail-stack { display: grid; }
.mail-item { display: flex; gap: 10px; min-width: 0; max-width: 100%; box-sizing: border-box; align-items: flex-start; padding: 10px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.mail-item:hover, .mail-item.on { background: var(--paper); }
.mail-item.on { box-shadow: inset 3px 0 0 var(--blue); }
.mail-item.mail-new .mail-cut { font-weight: 700; }
.mail-item .pills { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.mail-item .mail-line > .mail-cut { flex: 1 1 auto; }
.mail-item .mail-who > .mail-cut { font-size: .85rem; margin-top: 2px; }
.mail-item .mail-date { font-size: .78rem; }
.mail-peek { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-msg[open] .mail-peek { display: none; }
.mail-body { padding: 12px 14px 14px 60px; }
.mail-actions { margin: 0 0 16px; }
.mail-text { overflow-wrap: anywhere; }
.mail-frame { width: 100%; min-height: 80px; border: 0; display: block; }
.mail-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.mail-thumb { display: block; max-width: 240px; max-height: 180px; border-radius: 12px; border: 1px solid var(--line); }
.mail-fields { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
.mail-fields label { margin: 0; }
.editor { border: 1px solid #d5deea; border-radius: 8px; background: #fff; }
.editor:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30, 144, 255, .16); }
.editor-bar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px; border-bottom: 1px solid var(--line); background: var(--paper); border-radius: 8px 8px 0 0; }
.editor-group { display: inline-flex; flex-wrap: nowrap; gap: 2px; align-items: center; }
.editor-bar button, .editor-bar select { height: 32px; min-height: 32px; margin: 0; border-radius: 8px; font-size: .85rem; line-height: 1; }
.editor-bar button { min-width: 32px; width: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.editor-bar button.on { background: var(--ink); color: #fff; }
.editor-bar select { width: 7.2rem; padding: 0 24px 0 10px; }
.editor-area { padding: 12px; outline: none; overflow-wrap: anywhere; max-height: 70vh; overflow-y: auto; }
.editor-area img { max-width: 100%; height: auto; }
.editor-area blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--line); color: var(--muted); }
.editor-source { border: 0; border-radius: 0 0 8px 8px; }
pre.editor-source, textarea.editor-source { display:block; width:100%; max-width:100%; overflow:auto; white-space:pre-wrap; word-break:break-word; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:12px; font-family:Consolas,monospace; font-size:.85rem; }
textarea.editor-source { min-height:180px; resize:vertical; background:var(--ink); color:#fff; border-color:var(--ink); }
@media (max-width: 800px) {
.mail-split { display: block; }
.mail-split.is-open .mail-list { display: none; }
.mail-split:not(.is-open) .mail-pane { display: none; }
.mail-body { padding: 12px; }
.mail-fields { grid-template-columns: 1fr; }
}
/* Messages (messages.php): iPhone-style thread. Header and compose bar stay put; only .mt-scroll scrolls. */
.chat { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; padding: 12px 0; margin: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chat-day { align-self: center; margin: 10px 0 2px; font-size: .75rem; font-weight: 600; }
.bubble { max-width: 78%; align-self: flex-start; background: var(--paper); border-radius: 18px 18px 18px 4px; padding: 8px 12px; overflow-wrap: anywhere; }
.bubble.ours { align-self: flex-end; background: var(--blue); color: #fff; border-radius: 18px 18px 4px 18px; }
.bubble.same { margin-top: -3px; }
.bubble a { color: inherit; }
.bubble img { display: block; max-width: 100%; max-height: 320px; border-radius: 14px; }
.bubble a + a, .bubble a + div { margin-top: 6px; display: block; }
.bubble.pic-only { background: none; padding: 0; }
.chat-meta { color: var(--muted); font-size: .75rem; margin-top: -2px; align-self: flex-start; }
.chat-meta.ours { align-self: flex-end; }
.chat-meta.bad { color: var(--red); }
.mt-thread { display: flex; flex-direction: column; padding: 0; overflow: hidden; position: relative; }
.mt-head { flex: none; display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.mt-head label { margin: 0; }
.mt-head input { flex: 1; min-width: 0; }
.mt-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mt-who a.muted { color: var(--muted); font-size: .85rem; text-decoration: none; }
/* Few texts sit at the bottom by the compose bar, like the iPhone; the space is above them (margin-top:auto keeps scrolling intact). */
.mt-scroll > :first-child { margin-top: auto; }
.mt-scroll { flex: 1 1 auto; min-height: 0; overflow-anchor: none; max-height: none; margin: 0; padding: 8px 16px 12px; border: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mt-compose { flex: none; position: relative; padding: 8px 12px; border-top: 1px solid var(--line); background: #fff; }
.mt-bar { display: flex; align-items: flex-end; gap: 6px; }
button.mt-ico { flex: none; width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; color: var(--muted); }
button.mt-ico svg { width: 20px; height: 20px; display: block; }
.mt-field { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 6px; border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 2px 2px 2px 12px; }
.mt-field:focus-within { border-color: var(--blue); }
.mt-field textarea { flex: 1; min-width: 0; width: auto; height: 30px; min-height: 30px; margin: 0; padding: 5px 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; resize: none; background: transparent; line-height: 1.4; overflow-y: auto; }
.mt-field textarea:focus { box-shadow: none; border: 0; }
button.mt-send { flex: none; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 50%; }
button.mt-send svg { width: 18px; height: 18px; }
button.mt-send:disabled { opacity: .5; }
.mt-count { display: block; text-align: right; margin-top: 4px; }
.mt-count:empty { display: none; }
.mt-pic { position: relative; display: inline-block; margin: 0 0 8px 80px; }
.mt-pic img { display: block; max-height: 120px; max-width: 200px; border-radius: 14px; border: 1px solid var(--line); }
button.mt-pic-x { position: absolute; top: -8px; right: -8px; width: 26px; min-width: 26px; height: 26px; min-height: 26px; padding: 0; border-radius: 50%; }
.mt-pic[hidden], .mt-menu[hidden], .mt-emoji[hidden], .mt-new[hidden] { display: none; }
.mt-compose .status-menu { top: auto; bottom: calc(100% + 6px); left: 12px; }
.mt-menu { display: grid; gap: 6px; width: 300px; }
.mt-menu select { width: 100%; }
.mt-menu .hint { margin: 2px 4px 4px; }
.mt-emoji { display: grid; grid-template-columns: repeat(8, 36px); gap: 2px; padding: 8px; min-width: 0; }
.mt-emoji button { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 10px; font-size: 22px; line-height: 1; background: none; }
.mt-emoji button:hover { background: var(--paper); }
button.mt-new { position: absolute; z-index: 2; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); height: 30px; min-height: 30px; padding: 0 14px; box-shadow: 0 6px 16px rgba(11, 42, 69, .18); }
body:has(.mt-thread) .hc-fab { display: none; }
@media (max-width: 800px) {
html.mt-lock, html.mt-lock body { overflow: hidden; overscroll-behavior: none; }
body:has(.mail-split.is-open) .mail-bar { display: none; }
.mt-thread { position: fixed; left: 0; right: 0; z-index: 9; margin: 0; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
html.mt-kb .phone-dock { display: none; }
.mt-scroll { padding: 8px 12px 12px; }
.mt-compose { padding: 6px 8px; }
.mt-pic { margin-left: 76px; }
.mt-menu { width: calc(100vw - 24px); left: 4px; }
.mt-compose .mt-emoji { left: 4px; right: 4px; grid-template-columns: repeat(auto-fill, 40px); justify-content: center; max-height: 240px; }
.mt-emoji button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
}
/* Files — tree + editor only (everything else uses shared list/card/tabs styles) */
.fm { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.fm-tree { position: sticky; top: 12px; max-height: calc(100vh - 160px); overflow: auto; padding-right: 12px; border-right: 1px solid var(--line); }
.fm-tree h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .95rem; }
.fm-tree h2 + h2, .fm-tree #fm-tree + h2 { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.fm-tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
#fm-tree > ul { padding-left: 0; }
.fm-tree li > ul { display: none; }
.fm-tree li.open > ul { display: block; }
.fm-tree-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fm-tw { padding: 0 !important; min-height: 0 !important; height: 22px !important; width: 22px; color: var(--muted) !important; display: inline-flex !important; align-items: center; justify-content: center; flex: none; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 4px !important; }
.fm-tw:hover { background: var(--paper) !important; color: var(--ink) !important; }
.fm-tw .ico { width: 14px; height: 14px; transition: transform .15s ease; }
.fm-tree li.open > .fm-tree-row > .fm-tw .ico { transform: rotate(90deg); }
.fm-tree li > a, .fm-tree-row > a { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; color: var(--ink); text-decoration: none; padding: 3px 6px; border-radius: 6px; font-size: .85rem; }
.fm-tree li > a:hover, .fm-tree-row > a:hover, .fm-tree a.on { background: var(--paper); color: var(--blue); }
.fm-tree-row .fm-ico { color: var(--muted); flex: none; }
.fm-tree-name { min-width: 0; word-break: break-all; }
.fm-recent li { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 4px 0; font-size: .85rem; word-break: break-all; }
.fm-recent a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); font-weight: 600; }
.fm-recent a:hover { color: var(--blue); }
.fm-recent .fm-ico { color: var(--muted); flex: none; }
.fm-main .list-results table a { text-decoration: none !important; }
.fm-main .list-results td { vertical-align: middle; }
.fm-recent { list-style: none; margin: 0; padding: 0; }
.fm-main { min-width: 0; overflow: hidden; }
.fm-name { vertical-align: middle; }
.fm-name .fm-ico { display: inline-block; vertical-align: middle; margin-right: 8px; color: var(--muted); line-height: 0; }
.fm-name .fm-ico .ico { width: 16px; height: 16px; }
.fm-name a { color: var(--ink); text-decoration: none; font-weight: 600; word-break: break-all; vertical-align: middle; }
.fm-name a:hover { color: var(--blue); text-decoration: none; }
.fm-ico { color: var(--muted); }
.fm-ico .ico { width: 16px; height: 16px; display: block; }
.fm-crumbs { font-weight: 650; word-break: break-all; margin: 0 0 10px; }
.fm-crumbs a { text-decoration: none; }
.fm-drop { transition: background .15s ease; max-width: 100%; overflow-x: auto; }
.fm-drop.on { background: #E8F3FF; outline: 2px dashed var(--blue); outline-offset: -6px; }
.fm-drop-target, .fm-tree a.fm-drop-target { outline: 2px dashed var(--blue); background: #E8F3FF; }
.fm-editor { position: fixed; inset: 0; z-index: 2000; background: var(--ink); display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.fm-editor[hidden] { display: none; }
.fm-ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.fm-ed-gap { flex: 1; }
.fm-ed-host { flex: 1; min-height: 0; }
.fm-tabs { max-width: min(70vw, 900px); }
.fm-menu { position: fixed; z-index: 2100; margin: 0; padding: 6px; list-style: none; min-width: 160px; box-shadow: 0 10px 28px rgba(16, 24, 40, .12); }
.fm-menu[hidden] { display: none; }
.fm-menu button { width: 100%; text-align: left; }
body.fm-editing { overflow: hidden; }
@media (max-width: 800px) {
.fm { grid-template-columns: minmax(0, 1fr); }
.fm-tree { position: static; max-height: 200px; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 10px; }
}
.role-grid th:not(:first-child), .role-grid td:not(:first-child) { text-align: center; }
.role-grid th input { max-width: 140px; text-align: center; }
.role-grid input[type=checkbox] { width: 18px; height: 18px; }
/* Automations builder */
.af-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.af-panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.af-panel h2 { margin: 0 0 8px; font-size: 1.05rem; }
.af-field { margin-bottom: 10px; }
.af-field label { display: block; }
.af-flow { display: flex; flex-direction: column; align-items: center; padding: 8px 0 24px; }
.af-list { display: flex; flex-direction: column; align-items: center; width: 100%; }
.af-card { width: min(360px, 100%); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 12px; padding: 10px 14px; cursor: pointer; box-shadow: 0 1px 2px rgba(17, 17, 17, .04); }
.af-card.is-on { box-shadow: 0 0 0 2px var(--blue); }
.af-card.is-off { opacity: .55; }
.af-kind { display: block; font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.af-sub { display: block; font-weight: 600; overflow-wrap: anywhere; }
.af-trigger, .af-end { border-left-color: var(--navy); }
.af-cond, .af-if { border-left-color: var(--orange); }
.af-wait { border-left-color: var(--muted); }
.af-email, .af-text, .af-notify { border-left-color: var(--grass); }
.af-stop { border-left-color: var(--red); }
.af-join { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 0; }
.af-join::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px solid var(--line); }
.af-plus { position: relative; width: 26px; height: 26px; min-height: 26px; padding: 0; border-radius: 50%; line-height: 1; font-weight: 750; }
.af-add-menu { position: absolute; top: 34px; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); width: 280px; }
.af-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; border-top: 2px solid var(--line); margin-top: 6px; padding-top: 8px; }
.af-branch { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.af-rule { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.af-rule > * { min-width: 0; flex: 1; }
.af-rule > button { flex: 0 0 auto; }
.af-days { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.af-steps { padding-left: 20px; }
.af-steps li { margin-bottom: 8px; }
.af-preview { width: 100%; height: 200px; border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; }
@media (max-width: 900px) { .af-wrap { grid-template-columns: 1fr; } .af-panel { position: static; max-height: none; } .af-branches { grid-template-columns: 1fr; } }
.af-line { height: 16px; padding: 0; }
.af-end { margin-top: 0; }
/* Tags */
.tag-chip { background: color-mix(in srgb, var(--tag, var(--blue)) 16%, #fff); color: color-mix(in srgb, var(--tag, var(--blue)) 70%, var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag, var(--blue)) 35%, #fff); margin: 2px 4px 2px 0; }
.tag-x { border: 0; border-radius: 0; background: none; padding: 0 0 0 6px; color: inherit; font: inherit; font-size: .9em; cursor: pointer; height: auto; min-height: 0; width: auto; line-height: inherit; box-shadow: none; }
.tag-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 6px 0; }
.tag-add { position: relative; }
.tag-input { width: 110px; max-width: 100%; padding: 3px 10px; border-radius: 99px; font-size: .8rem; min-height: 0; }
.tag-menu { position: absolute; z-index: 30; top: 100%; left: 0; min-width: 220px; margin-top: 4px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 4px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); }
.tag-menu button { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; color: var(--muted); }
.tag-menu button.on { background: var(--paper); }
.tag-row { margin-top: 2px; }
.tag-row .tag-chip, .tag-filter .tag-chip { font-size: .72rem; padding: 1px 8px; }
.tag-group { font-size: .72rem; text-transform: uppercase; margin: 6px 0 2px; }
.tag-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.tag-color { position: relative; }
.tag-color input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.tag-color span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--tag); cursor: pointer; }
.tag-color input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tag); }
.bulk-bar { align-items: center; padding: 8px 0; }
/* Tasks */
.task-wrap:has(> #task-panel[hidden]) { grid-template-columns: minmax(0, 1fr); }
.task-quick { display: flex; gap: 8px; }
.task-quick input { flex: 1; }
.task-wrap .task-quick { margin-bottom: 14px; } /* Tasks: same gap as list bar → table */
.qa-anchor { position: relative; }
.qa-help { position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; right: 0; padding: 10px 16px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(11, 42, 69, .16); font-size: .8rem; max-height: min(70vh, 560px); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s; }
.qa-help.qa-open { opacity: 1; visibility: visible; transform: none; transition: opacity .14s ease, transform .14s ease; }
.qa-help code { font: inherit; background: var(--paper); border-radius: 6px; padding: 1px 6px; color: var(--ink); }
.qa-guide { height: 30px; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-bottom: 10px; }
.qa-guide::-webkit-scrollbar { display: none; }
.qa-guide > * { flex: none; }
.qa-idle { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.qa-idle svg { color: var(--grass); }
.qa-bit { --tag: var(--muted); display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; padding: 2px 9px; border-radius: 999px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
background: color-mix(in srgb, var(--tag) 12%, #fff); color: color-mix(in srgb, var(--tag) 70%, var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag) 30%, #fff); animation: qa-pop .16s ease-out; }
.qa-bit .qa-k { font-weight: 500; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.qa-bit[data-kind="task"] { --tag: var(--ink); }
.qa-bit[data-kind="customer"] { --tag: var(--blue); }
.qa-bit[data-kind="person"] { --tag: var(--navy); }
.qa-bit[data-kind="due"] { --tag: var(--orange); }
.qa-bit[data-kind="template"] { --tag: var(--grass); }
.qa-bit[data-kind="priority"] { --tag: var(--red); }
.qa-warn { color: var(--red); font-weight: 600; animation: qa-pop .16s ease-out; }
.qa-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.25fr); border-top: 1px dashed var(--line); padding-top: 10px; }
.qa-cols > section { padding: 0 14px; min-width: 0; }
.qa-cols > section:first-child { padding-left: 0; }
.qa-cols > section + section { border-left: 1px dashed var(--line); }
.qa-h { margin: 0 0 8px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.qa-exs { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.qa-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--muted); }
.qa-keys li { display: flex; align-items: center; gap: 8px; }
.qa-keys b { flex: none; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 7px; background: var(--paper); color: var(--ink); font-size: .8rem; }
.qa-order { margin: 8px 0 0; display: grid; gap: 4px; justify-items: start; }
.qa-order code { white-space: nowrap; }
.qa-tpls { display: grid; gap: 8px; }
.qa-tpls > div { display: grid; gap: 3px; justify-items: start; }
.qa-cols p { margin: 0; }
button.qa-ex { margin: 0; height: auto; min-height: 0; padding: 2px 10px; text-align: left; line-height: 1.5; border-radius: 999px; font: inherit; font-weight: 600; background: #fff; color: var(--blue); border: 1px solid var(--line); box-shadow: none; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
button.qa-ex:hover, button.qa-ex:focus-visible { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, #fff); }
button.qa-ex:active { transform: scale(.97); }
.qa-sug { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(11, 42, 69, .12); padding: 4px; animation: qa-drop .14s ease-out; }
.qa-opt { padding: 7px 10px; border-radius: 8px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.qa-opt span:first-child { font-weight: 600; white-space: nowrap; }
.qa-opt .muted { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-opt[aria-selected="true"], .qa-opt:hover { background: var(--paper); }
.qa-note { padding: 7px 10px; }
@keyframes qa-pop { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@keyframes qa-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qa-bit, .qa-warn, .qa-sug { animation: none; } button.qa-ex, .qa-help { transition: none; } }
@media (max-width: 800px) { .qa-cols { grid-template-columns: 1fr; gap: 10px; } .qa-cols > section { padding: 0; } .qa-cols > section + section { border-left: 0; border-top: 1px dashed var(--line); padding-top: 10px; } .qa-exs { flex-direction: row; flex-wrap: wrap; } }
.check-col { width: 34px; }
.check-col input { width: 18px; height: 18px; }
.task-row.is-done .task-open { text-decoration: line-through; color: var(--muted); }
.task-row.is-sel td { background: var(--paper); }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; font-size: .8rem; }
.task-meta .badge { font-size: .72rem; padding: 1px 8px; }
.task-late { color: var(--red); font-weight: 650; }
.task-title { font-size: 1.15rem; font-weight: 700; margin: 8px 0 12px; width: 100%; }
.task-panel-top { justify-content: space-between; align-items: center; }
.task-checklist { list-style: none; padding: 0; margin: 0 0 6px; }
.task-checklist li { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.task-checklist li button { margin-left: auto; min-height: 0; padding: 0 8px; }
.task-comments p { margin: 0 0 10px; }
.dash-tasks h2 { margin: 0; }
.dash-tasks .row { align-items: center; }
.dash-tasks > .row { margin-bottom: 14px; } /* header row to first task: same 14px as the Monthly Profit header to its chart */
.task-wrap:not(:has(> #task-panel[hidden])) .task-table tr > :nth-child(3) { display: none; }
.dash .dash-tasks { grid-column: 1 / -1; margin: 0; }
@media (max-width: 800px) {
/* Page title toolbar stays on the title row; the primary shows just its icon */
.top-actions { gap: 6px; }
.top-primary.has-ico { width: 32px; padding: 0; }
.top-primary.has-ico .ta-ico { display: inline-flex; }
.top-primary.has-ico .ta-label { display: none; }
/* Task side panel opens full screen */
#task-panel:not([hidden]) { position: fixed; inset: 0; z-index: 60; max-height: none; border-radius: 0; margin: 0; padding-top: max(24px, env(safe-area-inset-top, 0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
.fm-ed-bar .list-size { margin: 0; }
@media (max-width: 600px) {
.editor-bar .editor-group:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex: 1 1 100%; }
.editor-bar .editor-group:last-child select { width: 100%; min-width: 0; max-width: 100%; }
}
/* Selects inside a button row (bulk tag bar, Enroll, pickers) size to their text and sit on the row like the buttons. */
.row > select { width: auto; max-width: 100%; height: 36px; min-height: 36px; margin: 0; padding: 0 12px; border-radius: 999px; }
.row > select + button, .row > select + .btn, .row > input + button { margin-top: 0; }
.bulk-bar { margin-top: 0; }
.bulk-bar b { margin-right: 4px; }
.task-quick input { height: 36px; padding: 0 12px; margin: 0; }
/* Task panel actions: one even 2×2 grid instead of 3 + a lone Delete. */
#task-panel .row:not(.task-panel-top) { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) {
.list-bar .list-size { flex: 1 1 calc(50% - 10px); }
.list-bar .list-size select { width: 100%; }
.phone-list .list-size { display: none; }
.bulk-bar { display: grid; grid-template-columns: 1fr 1fr; }
.bulk-bar b { grid-column: 1 / -1; }
.bulk-bar select { width: 100%; }
}
.tag-picker > .badge:not(.tag-chip) { margin: 2px 6px 2px 0; }
.tag-chip.tag-status { border-radius: 8px; }
/* Smart quick add: "Usually Ryan · Tab" hints and the gentle duplicate note (live guide line) */
button.qa-hint.quiet { flex: none; height: 24px; min-height: 0; padding: 0 9px; gap: 5px; border-radius: 999px; font: inherit; font-weight: 600; color: var(--navy); background: color-mix(in srgb, var(--navy) 6%, #fff); border: 1px dashed color-mix(in srgb, var(--navy) 35%, #fff); box-shadow: none; animation: qa-pop .16s ease-out; }
button.qa-hint.quiet:hover, button.qa-hint.quiet:focus-visible { border-style: solid; border-color: var(--navy); background: color-mix(in srgb, var(--navy) 10%, #fff); color: var(--navy); }
.qa-hint kbd { font: inherit; font-size: .7rem; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: #fff; color: var(--muted); }
.qa-warn.qa-dup { color: var(--orange); }
@media (prefers-reduced-motion: reduce) { button.qa-hint.quiet { animation: none; } }
/* Site-wide picture viewer (assets/viewer.js) */
html.ttv-lock, html.ttv-lock body { overflow: hidden; }
.ttv { position: fixed; inset: 0; z-index: 1500; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); background: color-mix(in srgb, var(--ink) 94%, transparent); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); touch-action: none; user-select: none; }
.ttv[hidden] { display: none; }
.ttv.is-open { animation: ttv-fade .2s ease-out; }
.ttv-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 18px; background: linear-gradient(color-mix(in srgb, var(--ink) 80%, transparent), transparent); }
.ttv-count { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .9; min-width: 0; }
.ttv-cap { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: baseline; overflow: hidden; white-space: nowrap; }
.ttv-cap b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ttv-cap span { opacity: .65; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; }
.ttv-tools { flex: none; display: flex; gap: 6px; }
.ttv .ttv-btn, .ttv .ttv-nav { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; box-shadow: none; cursor: pointer; text-decoration: none; transition: background .15s, transform .1s; }
.ttv .ttv-btn:hover, .ttv .ttv-nav:hover, .ttv .ttv-btn:focus-visible, .ttv .ttv-nav:focus-visible { background: rgba(255, 255, 255, .2); color: #fff; outline: none; border-color: rgba(255, 255, 255, .45); }
.ttv .ttv-btn:active, .ttv .ttv-nav:active { transform: scale(.94); }
.ttv .ttv-act { width: auto; padding: 0 14px 0 10px; font-weight: 650; background: var(--blue); border-color: var(--blue); }
.ttv .ttv-act:hover { background: var(--blue); filter: brightness(1.08); }
.ttv-stage { position: relative; display: grid; place-items: center; overflow: hidden; padding: 0 64px 24px; cursor: zoom-out; }
.ttv-img { max-width: 100%; max-height: calc(100dvh - 90px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); cursor: zoom-in; transform-origin: center; transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .2s; will-change: transform; }
.ttv.is-zoomed .ttv-img { cursor: grab; border-radius: 0; }
.ttv.is-zoomed .ttv-img:active { cursor: grabbing; }
.ttv.is-open .ttv-img.ttv-in { animation: ttv-zoom .28s cubic-bezier(.2, .8, .2, 1); transform-origin: var(--ttv-ox) var(--ttv-oy); }
.ttv-img.ttv-in { animation: ttv-step .2s ease-out; }
.ttv.is-loading .ttv-img { opacity: .25; }
.ttv.is-broken .ttv-img { visibility: hidden; }
.ttv.is-broken .ttv-stage::after { content: "Could not load this picture"; position: absolute; opacity: .75; }
.ttv-cap .ttv-err { flex: none; color: #ffb4a8; opacity: 1; }
.ttv-spin { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff; animation: ttv-spin .8s linear infinite; display: none; }
.ttv.is-loading .ttv-spin { display: block; }
.ttv .ttv-nav { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -4px; }
.ttv-prev { left: 12px; }
.ttv-next { right: 12px; }
.ttv-nav[hidden] { display: none !important; }
@keyframes ttv-fade { from { background: transparent; } }
@keyframes ttv-zoom { from { opacity: 0; transform: scale(.4); } }
@keyframes ttv-step { from { opacity: .3; } }
@keyframes ttv-spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
.ttv-top { padding: calc(8px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) 8px calc(14px + env(safe-area-inset-left, 0px)); gap: 8px; }
.ttv-cap b + span { display: none; }
.ttv-cap .ttv-err { display: none; } /* the picture area says it */
.ttv .ttv-btn { width: 36px; height: 36px; }
.ttv .ttv-zoom { display: none; }
.ttv .ttv-act { width: 36px; padding: 0; }
.ttv .ttv-act span { display: none; }
.ttv-stage { padding: 0 6px calc(70px + env(safe-area-inset-bottom, 0px)); }
.ttv-img { max-height: calc(100dvh - 140px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.ttv .ttv-nav { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); margin: 0; }
.ttv-prev { left: calc(50% - 60px); }
.ttv-next { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) { .ttv, .ttv-img, .ttv.is-open .ttv-img.ttv-in, .ttv-img.ttv-in { animation: none !important; transition: none !important; } }
/* Pictures that open in the viewer */
[data-view] { cursor: zoom-in; }
/* Tasks: Examples gallery button lives in the top actions */
/* List bar (docs/ui-patterns.md): one shared search + filter row, upgraded by assets/listbar.js (not Dispatch). */
form.list-bar:not(.lb):not(.command .list-bar) { flex-wrap: nowrap; overflow: hidden; background: none; border: 0; border-radius: 0; padding: 0; }
form.list-bar:not(.lb):not(.command .list-bar) .list-search input { height: 38px; }
.list-bar.lb { flex-wrap: nowrap; gap: 10px; background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 14px; }
.lb .list-search { flex: 1 1 200px; min-width: 150px; position: relative; }
.lb .list-search input {
height: 38px; padding: 0 64px 0 38px; background: var(--paper); border: 1px solid transparent; border-radius: 999px;
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lb .list-search input:focus { background: #fff; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15, 159, 147, .16); outline: none; }
.lb-mag { position: absolute; z-index: 1; left: 13px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--muted); pointer-events: none; }
.lb-mag .ico { width: 16px; height: 16px; }
.lb .list-search .lb-mag { width: 16px; height: 16px; margin: 0; padding: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
.lb-clear {
position: absolute; z-index: 1; right: 8px; top: 50%; transform: translateY(-50%) scale(.8); width: 24px; height: 24px; min-height: 24px; padding: 0;
border-radius: 50%; background: var(--line); border: 0; color: var(--ink); font-size: 1rem; line-height: 1;
opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.lb.has-q .lb-clear { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.lb .lb-clear:hover { background: var(--muted); color: #fff; border-color: transparent; }
.lb-kbd {
position: absolute; z-index: 1; right: 12px; top: 50%; transform: translateY(-50%); min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); font: inherit; font-size: .75rem; line-height: 18px; text-align: center;
pointer-events: none; transition: opacity .15s ease;
}
.lb.has-q .lb-kbd, .lb .list-search:focus-within .lb-kbd { opacity: 0; }
.lb-filters { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; padding: 2px 0 2px 10px; border-left: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.lb-filters::-webkit-scrollbar { display: none; }
.lb-filters.is-empty { display: none; }
/* A bar with no search box starts with its filters: no divider line in front of them. */
.lb-filters:first-child { padding-left: 0; border-left: 0; }
/* Buttons (Show, Find) and older labelled inputs sit on the same 38 px line as the filter pills. */
.lb-filters > button, .lb-filters > .btn { height: 38px; min-height: 38px; margin: 0; }
.lb-filters > label:not(.list-size):not(.check):not(.month-pick) { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: .85rem; font-weight: 650; white-space: nowrap; }
.lb-filters > label:not(.list-size):not(.check) > input { height: 38px; width: auto; margin: 0; border-radius: 999px; }
/* A bar sitting on the page background (not in a card): white pills so they show, like the tabs above. */
:not(.card):not(.command) > .list-bar.lb .list-search input, :not(.card):not(.command) > .list-bar.lb .lb-filters select, :not(.card):not(.command) > .list-bar.lb .lb-filters input, :not(.card):not(.command) > .list-bar.lb .lb-filters .status-filter summary { background-color: #fff; border-color: var(--line); }
@media (max-width: 800px) {
/* Filters with their own Show/Find button wrap on a phone, so the button never scrolls out of sight. */
.lb-filters:has(> button[type="submit"]) { flex-wrap: wrap; overflow: visible; }
.lb-filters:has(> button[type="submit"]) > * { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.lb-filters:has(> button[type="submit"]) select { max-width: 100%; }
}
.lb-filters > * { flex: none; }
.lb-filters select, .lb-filters .status-filter summary, .lb-filters input[type="month"], .lb-filters input[type="date"] {
width: auto; height: 34px; min-height: 34px; margin: 0; padding: 0 28px 0 12px; border-radius: 999px; background-color: var(--paper);
border: 1px solid transparent; font-weight: 650; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.lb-filters .status-filter summary { padding: 0 16px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; justify-content: center; gap: 6px; }
.lb-filters input[type="month"], .lb-filters input[type="date"] { padding: 0 12px; }
.lb-filters select:hover, .lb-filters .status-filter summary:hover { border-color: var(--line); }
.lb-filters select.is-active, .lb-filters .status-filter.is-active > summary { background-color: rgba(15, 159, 147, .1); border-color: var(--teal); color: var(--teal); }
.lb-filters .status-filter summary[data-n]::after {
content: attr(data-n); display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
border-radius: 999px; background: var(--teal); color: #fff; font-size: .7rem; font-weight: 750;
}
.lb .lb-reset {
height: 34px; min-height: 34px; padding: 0 16px; border-radius: 999px; background: none; border: 1px solid transparent;
color: var(--teal); font-weight: 650; text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.lb .lb-reset:hover { background: var(--paper); color: var(--ink); border-color: transparent; text-decoration: none; }
.lb-reset[hidden] { display: none; }
.lb-tail { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; color: var(--muted); }
.lb-tail .list-size select {
width: auto; height: 34px; min-height: 34px; margin: 0; padding: 0 26px 0 10px; background-color: transparent; border: 1px solid transparent;
border-radius: 999px; color: var(--muted); font-weight: 600;
}
.lb-tail .list-size select:hover, .lb-tail .list-size select:focus { border-color: var(--line); background-color: #fff; outline: none; }
.lb .list-count { margin: 0; }
/* Narrow places (phone, the Emails/Messages list pane): search on its own row, then one scrollable pill row. */
@media (max-width: 800px) {
.list-bar.lb, form.list-bar:not(.lb):not(.command .list-bar) { flex-wrap: wrap; }
form.list-bar:not(.lb) .list-search { flex-basis: 100%; }
.lb .list-search { flex-basis: 100%; }
.lb-filters { padding-left: 0; border-left: 0; min-width: 0; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
.lb-tail { flex: 1 1 100%; justify-content: flex-end; font-size: .85rem; }
.lb-filters::-webkit-scrollbar { display: none; }
.lb-kbd { display: none; }
.lb .list-search input { padding-right: 40px; }
}
/* Month picker (assets/listbar.js, docs/ui-patterns.md "List bar") */
.month-pick { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.month-pick .mp-pill {
height: 34px; min-height: 34px; margin: 0; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
background: #fff; color: var(--ink); font: inherit; font-weight: 650; white-space: nowrap; min-width: 136px;
}
.month-pick .mp-pill:hover, .month-pick.is-open .mp-pill { border-color: var(--teal); color: var(--teal); background: #fff; }
.month-pick .mp-step, .mp-pop .mp-yr {
width: 30px; height: 30px; min-height: 30px; margin: 0; padding: 0; display: inline-grid; place-items: center;
border-radius: 999px; border: 0; background: none; color: var(--muted);
}
.month-pick .mp-step:hover, .mp-pop .mp-yr:hover { background: var(--paper); color: var(--ink); }
.month-pick .mp-step .ico, .mp-pop .mp-yr .ico { width: 16px; height: 16px; }
.mp-pop {
position: fixed; z-index: 60; width: 248px; padding: 10px; box-sizing: border-box; background: #fff;
border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}
.mp-pop[hidden] { display: none; }
.mp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mp-head .mp-year { font-weight: 750; color: var(--ink); }
.mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mp-pop .mp-m {
height: 36px; min-height: 36px; margin: 0; padding: 0; border-radius: 999px; border: 1px solid transparent;
background: none; color: var(--ink); font: inherit; font-weight: 600;
}
.mp-pop .mp-m:hover { background: var(--paper); }
.mp-pop .mp-m.is-now { border-color: var(--teal); color: var(--teal); }
.mp-pop .mp-m.is-picked, .mp-pop .mp-m.is-picked:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.mp-foot { display: flex; justify-content: center; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.mp-pop .mp-now { height: 30px; min-height: 30px; margin: 0; padding: 0 14px; border-radius: 999px; border: 0; background: none; color: var(--teal); font: inherit; font-weight: 650; }
.mp-pop .mp-now:hover { background: var(--paper); }
.lb .list-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.lb-filters .list-size { flex: none; width: auto; min-width: 0; }
.lb-filters select { min-width: 0; max-width: 200px; flex: none; }
/* A bar that is a small form (picks + its own Find/Show button): selects show their whole choice, and the button
matches the 34 px pills beside it (a button alone after the search box keeps the search box's 38 px). */
.lb-filters:has(> button[type="submit"]) select { max-width: 100%; }
.lb-filters > :is(.list-size, label, select, input) ~ button, .lb-filters > :is(.list-size, label, select, input) ~ .btn { height: 34px; min-height: 34px; }
.card.mail-bar { padding-top: 14px; padding-bottom: 14px; }
.mail-bar .list-bar { margin-bottom: 0; }
.login .login-keep { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-weight: 600; }
.login .login-note { margin: 0 0 8px; }
.login .login-note a:hover { color: var(--ink); }
@media (max-width: 800px) {
table.roster td:first-child, table.roster th:first-child, table.roster td:last-child, table.roster th:last-child { border-left: 0; border-right: 0; }
}
.mail-item .mail-date-top { display: block; margin: 0 0 1px; line-height: 1.2; }
.mail-item .mail-who > .mail-date-top + .mail-cut { font-size: inherit; margin-top: 0; }
/* Login / privacy backdrop: animated turf scene with a stand-on spray rig (includes/turf_scene.php). */
.login { position: relative; overflow: hidden; isolation: isolate; }
.login > :not(.turf-scene) { position: relative; z-index: 1; }
.login .card { box-shadow: 0 18px 50px rgba(17, 17, 17, .45); }
.login > .hint { background: rgba(17, 17, 17, .72); color: var(--line); padding: 6px 12px; border-radius: 999px; text-align: center; }
.login > .hint a { color: #fff; }
.turf-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.turf-scene .ts-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.ts-cloud { fill: var(--paper); fill-opacity: .12; animation: ts-cloud 70s linear infinite; }
.ts-cloud.c2 { animation-duration: 95s; animation-delay: -40s; }
.ts-cloud.c3 { animation-duration: 120s; animation-delay: -80s; }
@keyframes ts-cloud { from { transform: translateX(-30%); } to { transform: translateX(110%); } }
.ts-grass .blade { fill: none; stroke: var(--grass); stroke-opacity: .55; stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: ts-sway 4s ease-in-out infinite alternate; }
.ts-grass .b1 { animation-delay: -1s; } .ts-grass .b2 { animation-delay: -2s; } .ts-grass .b3 { animation-delay: -3s; }
@keyframes ts-sway { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
.ts-trail { position: absolute; right: 30%; bottom: 0; height: clamp(14px, 2.2vw, 30px); width: 130vw; background: linear-gradient(90deg, rgba(30, 144, 255, 0), rgba(30, 144, 255, .08) 40%, rgba(30, 144, 255, .3)); border-radius: 0 999px 999px 0; pointer-events: none; animation: ts-trail 16s linear infinite; }
@keyframes ts-trail { 0%, 86% { opacity: 1; } 100% { opacity: 0; } }
.ts-drive { position: absolute; left: 0; bottom: max(4vh, 18px); width: clamp(220px, 26vw, 400px); aspect-ratio: 400 / 260; animation: ts-drive 16s linear infinite; }
.ts-drive .ts-rig { position: absolute; inset: 0; width: 100%; height: 100%; animation: ts-bob .5s ease-in-out infinite alternate; }
.ts-drive .ts-mist { position: absolute; left: 0; bottom: 0; width: 650%; height: calc(100% * 320 / 260); pointer-events: none; }
@keyframes ts-drive { from { transform: translateX(-110%); } to { transform: translateX(100vw); } }
@keyframes ts-bob { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
.ts-wheel { animation: ts-spin 1.1s linear infinite; }
.ts-spinner-vanes { stroke-dasharray: 4 5; animation: ts-spinner .35s linear infinite; }
@keyframes ts-spinner { to { stroke-dashoffset: -18; } }
@keyframes ts-spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .ts-drive { width: 190px; bottom: 10px; } .ts-trail { height: 12px; } }
@media (prefers-reduced-motion: reduce) {
.ts-cloud, .ts-grass .blade, .ts-wheel, .ts-spinner-vanes, .ts-drive .ts-rig { animation: none; }
.ts-drive { animation: none; transform: translateX(8vw); }
.ts-trail { animation: none; }
.ts-mist { display: none; }
}
/* Login footer: never wraps mid-item. One line when it fits, otherwise one item per line. */
.login > .login-foot { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; white-space: nowrap; max-width: calc(100vw - 32px); }
.login-foot > span { white-space: nowrap; }
.login-foot .sep { padding: 0 .4em; }
@media (max-width: 760px) {
.login > .login-foot { flex-direction: column; gap: 2px; padding: 10px 18px; border-radius: 14px; line-height: 1.5; }
.login-foot .sep { display: none; }
}
/* Login: Sign in full width, Forgot password centered under it; Keep me signed in aligned to the field edge. */
.login .login-keep { margin: 14px 0 12px; line-height: 1.3; }
.login .login-keep input { margin: 0; flex: none; width: 16px; height: 16px; }
.login .login-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.login .login-actions button { width: 100%; }
.login .login-actions a { align-self: center; text-align: center; }
/* v334 golden-hour scene: sun glow, parallax layers, sky birds, perching bird on the login card */
.ts-sun { animation: ts-glow 9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes ts-glow { from { opacity: .85; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
.ts-bird { fill: none; stroke: var(--ink); stroke-opacity: .7; stroke-width: 2.2; stroke-linecap: round; animation: ts-birdfly 38s linear infinite; }
.ts-bird.g2 { animation-duration: 46s; animation-delay: -20s; }
@keyframes ts-birdfly { 0% { transform: translate(-60px, 300px) scaleY(1); } 25% { transform: translate(400px, 270px) scaleY(.4); } 50% { transform: translate(800px, 250px) scaleY(1); } 75% { transform: translate(1200px, 280px) scaleY(.5); } 100% { transform: translate(1700px, 240px) scaleY(1); } }
.ts-perch { position: absolute; bottom: calc(100% - 3px); right: 28px; width: 50px; height: 38px; pointer-events: none; opacity: 0; z-index: 2; }
.ts-perch.is-on { opacity: 1; }
.ts-perch svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ts-perch .pb-wing { transform-box: fill-box; transform-origin: 30% 100%; }
.ts-perch.is-flying .pb-wing { animation: pb-flap .16s ease-in-out infinite alternate; }
@keyframes pb-flap { from { transform: scaleY(1); } to { transform: scaleY(-1.4); } }
.ts-perch .pb-head { transform-box: fill-box; transform-origin: 30% 80%; }
.ts-perch.do-look .pb-head { animation: pb-look 1.2s ease-in-out; }
@keyframes pb-look { 30% { transform: rotate(-14deg); } 65% { transform: rotate(10deg) translateX(-1px); } }
.ts-perch.do-hop svg { animation: pb-hop .5s ease-out 2; }
.ts-perch.face-left > svg { scale: -1 1; }
.ts-perch.face-left .pb-chirp { left: -6px; }
.ts-pelican { position: fixed; left: 0; top: 10vh; width: clamp(70px, 7vw, 110px); pointer-events: none; z-index: 0; opacity: 0; }
.ts-pelican svg { display: block; width: 100%; }
.ts-pelican.face-left svg { scale: -1 1; }
@keyframes pp-flap { 0%, 60%, 100% { transform: scaleY(1); } 75% { transform: scaleY(.45); } 88% { transform: scaleY(1.1); } }
@keyframes pb-hop { 40% { transform: translateY(-7px); } }
.pb-chirp { position: absolute; left: 34px; top: -14px; color: var(--orange); font-size: 14px; font-weight: 700; opacity: 0; }
.ts-perch.do-chirp .pb-chirp { animation: pb-chirp .9s ease-out; }
.ts-perch.do-chirp .pb-head { animation: pb-look .5s ease-in-out; }
@keyframes pb-chirp { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -10px); } }
@media (max-width: 700px) { .ts-perch { right: 18px; width: 32px; height: 24px; } }
@media (prefers-reduced-motion: reduce) { .ts-sun, .ts-layer, .ts-bird { animation: none; } .ts-bird { display: none; } .ts-perch, .ts-pelican { display: none; } }
/* v336 lawn story: dull patchy turf ahead of the spray greens up behind it; weeds wilt after treatment */
.ts-ahead { position: absolute; left: 72%; bottom: calc(-1 * max(4vh, 18px)); width: 110vw; height: max(29vh, 16.3vw); pointer-events: none;
background: radial-gradient(ellipse 9vw 3vh at 30% 70%, rgba(106, 110, 116, .22), transparent 70%), radial-gradient(ellipse 12vw 4vh at 65% 40%, rgba(240, 138, 36, .16), transparent 70%), radial-gradient(ellipse 8vw 3vh at 85% 80%, rgba(106, 110, 116, .2), transparent 70%), linear-gradient(90deg, transparent, rgba(240, 138, 36, .26) 22vw), linear-gradient(90deg, transparent, rgba(106, 110, 116, .26) 22vw);
-webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); animation: ts-regrow 16s linear infinite; }
/* after a loop the whole lawn is healthy; patchy turf fades back in ahead of the returning rig (no pop) */
@keyframes ts-regrow { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 1; } }
.ts-weeds { position: absolute; inset: 0; pointer-events: none; }
.ts-weed { position: absolute; width: clamp(18px, 2vw, 30px); height: clamp(18px, 2vw, 30px); transform-origin: 50% 100%; transition: transform 2.4s ease-out var(--d, 0s), opacity 2.4s ease-out var(--d, 0s), filter 2.4s var(--d, 0s); }
.ts-weed.is-wilted { transform: scale(.35) rotate(18deg); opacity: 0; filter: grayscale(1); transition: transform 1.8s ease-in .4s, opacity 1.8s ease-in .4s, filter 1.8s .4s; }
@media (max-width: 700px) { .ts-ahead { bottom: -10px; } }
@media (prefers-reduced-motion: reduce) { .ts-ahead, .ts-weeds { display: none; animation: none; } }
/* public home page on the turf scene: card stays readable, footer matches login */
.login.welcome { gap: 14px; align-content: center; }
.login.welcome .card { width: min(560px, 100%); background: rgba(255, 255, 255, .97); }
/* v339 wow layer: time of day, weather, parallax, extras, easter eggs */
.ts-night { opacity: 0; transition: opacity 2s; pointer-events: none; }
.ts-stars { opacity: 0; transition: opacity 2s; }
.ts-moon { opacity: .35; }
.ts-stars .st { animation: ts-twinkle 3s ease-in-out infinite alternate; } .ts-stars .s1 { animation-delay: -1s; } .ts-stars .s2 { animation-delay: -2s; }
@keyframes ts-twinkle { from { opacity: .35; } to { opacity: 1; } }
#tsSky stop { transition: stop-color 2s, stop-opacity 2s; }
.ts-sunhit, .turf-scene .ts-moon, .turf-scene .ts-rig { pointer-events: auto; cursor: pointer; }
.ts-sunpos { transition: transform 2.4s cubic-bezier(.4, 0, .2, 1), opacity 2s; }
.tod-dawn .ts-sunpos { transform: translate(-900px, 30px); }
.tod-day .ts-sunpos { transform: translate(160px, -380px); }
.tod-dusk .ts-sunpos { transform: translate(120px, 110px); }
.tod-night .ts-sunpos { transform: translate(200px, 260px); opacity: 0; pointer-events: none; }
.tod-day #tsHaze stop { stop-opacity: .06; }
.ts-todtag { position: fixed; left: 50%; top: 14px; z-index: 2; translate: -50% 0; pointer-events: none; font: 700 13px/1 "Segoe UI", system-ui, sans-serif; color: var(--paper); background: rgba(17, 17, 17, .6); padding: 6px 12px; border-radius: 999px; opacity: 0; }
.ts-todtag.is-on { animation: ts-todtag 2.2s ease-out; }
@keyframes ts-todtag { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }
.tod-dawn #tsSky stop:nth-child(1) { stop-color: var(--navy); } .tod-dawn #tsSky stop:nth-child(3) { stop-color: var(--blue); stop-opacity: .6; } .tod-dawn #tsSky stop:nth-child(4) { stop-color: var(--red); stop-opacity: .45; }
.tod-day #tsSky stop:nth-child(1) { stop-color: var(--navy); } .tod-day #tsSky stop:nth-child(2) { stop-color: var(--blue); } .tod-day #tsSky stop:nth-child(3) { stop-color: var(--blue); stop-opacity: .8; } .tod-day #tsSky stop:nth-child(4) { stop-color: var(--line); stop-opacity: .85; }
.tod-dusk #tsSky stop:nth-child(2) { stop-color: var(--ink); } .tod-dusk #tsSky stop:nth-child(3) { stop-color: var(--navy); stop-opacity: 1; } .tod-dusk #tsSky stop:nth-child(4) { stop-color: var(--red); stop-opacity: .45; }
.tod-night #tsSky stop:nth-child(2) { stop-color: var(--ink); } .tod-night #tsSky stop:nth-child(3) { stop-color: var(--navy); stop-opacity: .8; } .tod-night #tsSky stop:nth-child(4) { stop-color: var(--navy); stop-opacity: .9; }
.tod-dawn .ts-night { opacity: .12; } .tod-dusk .ts-night { opacity: .3; } .tod-night .ts-night { opacity: .5; }
.tod-dusk .ts-stars { opacity: .5; } .tod-night .ts-stars, .tod-night .ts-moon { opacity: 1; } .tod-dusk .ts-moon { opacity: .6; }
.tod-day .ts-cloud { fill-opacity: .3; }
.wx-cloudy .ts-cloud { fill-opacity: .35; } .wx-cloudy .ts-sun { opacity: .45 !important; }
.ts-rain { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: repeating-linear-gradient(105deg, transparent 0 14px, rgba(217, 219, 222, .22) 14px 15px, transparent 15px 31px); background-size: 120px 120px; animation: ts-rain .5s linear infinite; }
.wx-rain .ts-rain { opacity: 1; }
@keyframes ts-rain { to { background-position: -32px 120px; } }
.ts-moon { transition: opacity 2s; }
/* fireflies at dusk/night */
.ts-fireflies { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 2s; }
.tod-night .ts-fireflies, .tod-dusk .ts-fireflies { opacity: 1; }
.ts-fireflies i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px 3px rgba(240, 138, 36, .55); animation: ts-ff-drift 9s ease-in-out infinite alternate, ts-ff-blink 2.6s ease-in-out infinite; }
@keyframes ts-ff-drift { 0% { transform: translate(0, 0); } 50% { transform: translate(24px, -18px); } 100% { transform: translate(-16px, -6px); } }
@keyframes ts-ff-blink { 0%, 60%, 100% { opacity: .1; } 75% { opacity: 1; } }
/* butterflies and bees appear over freshly treated turf (daytime) */
.ts-bugs { position: absolute; inset: 0; pointer-events: none; }
.ts-bug { position: absolute; width: clamp(14px, 1.4vw, 20px); opacity: 0; transition: opacity 1.5s; animation: ts-bug-path 7s ease-in-out infinite; }
.ts-bug svg { display: block; width: 100%; }
.ts-bug.is-out { opacity: 1; }
.tod-night .ts-bug, .wx-rain .ts-bug { opacity: 0; }
.ts-bug .w { transform-box: fill-box; transform-origin: 50% 60%; animation: ts-flutter .18s ease-in-out infinite alternate; }
@keyframes ts-flutter { to { transform: scaleY(.3); } }
@keyframes ts-bug-path { 0% { transform: translate(0, 0); } 25% { transform: translate(30px, -16px); } 50% { transform: translate(54px, 4px); } 75% { transform: translate(20px, -24px); } 100% { transform: translate(0, 0); } }
/* fall leaves (Sep-Nov) */
.ts-leaves { position: absolute; inset: 0; pointer-events: none; display: none; }
.season-fall .ts-leaves { display: block; }
.ts-leaves i { position: absolute; top: -20px; width: 10px; height: 7px; border-radius: 0 70% 0 70%; background: var(--orange); opacity: .85; animation-name: ts-leaf-fall, ts-leaf-sway; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite; animation-direction: normal, alternate; }
.ts-leaves i.l1 { background: var(--red); } .ts-leaves i.l2 { background: var(--muted); }
@keyframes ts-leaf-fall { from { top: -20px; } to { top: 102vh; } }
@keyframes ts-leaf-sway { from { transform: translateX(-22px) rotate(-40deg); } to { transform: translateX(22px) rotate(50deg); } }
/* sprayer easter egg */
.ts-drive .ts-rig { transform-origin: 29.5% 83%; transition: rotate .35s cubic-bezier(.3, 1.6, .5, 1); }
.ts-drive .ts-rig.is-wheelie { rotate: -9deg; }
.ts-honk { position: fixed; z-index: 2; pointer-events: none; font: 800 14px/1 "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--paper); padding: 4px 8px; border-radius: 10px; opacity: 0; translate: -50% -100%; }
.ts-honk.is-on { animation: ts-honk 1.1s ease-out; }
@keyframes ts-honk { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1.12); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-12px); } }
@media (max-width: 700px) { .ts-fireflies i:nth-child(n+8), .ts-leaves i:nth-child(n+6) { display: none; } }
@media (prefers-reduced-motion: reduce) {
.ts-fireflies, .ts-bugs, .ts-leaves, .ts-rain { display: none; }
.ts-honk.is-on { animation: none; opacity: 1; }
}
/* v340: birds notice typing (turn toward the field, head tilt, hop); small birds on the Forgot password line; pelican; critters */
.ts-perch .pb-front { opacity: 0; transform-box: fill-box; transform-origin: 50% 90%; }
.ts-perch.do-notice svg { animation: pb-hop .45s ease-out 1; }
.ts-perch.do-notice .pb-head { opacity: 0; }
.ts-perch.do-notice .pb-front { opacity: 1; animation: pb-curious 1.8s ease-in-out; }
.ts-perch .pb-eyes { transform-box: fill-box; transform-origin: 50% 50%; }
.ts-perch.do-notice .pb-eyes { animation: pb-blink 1.8s linear; }
/* front head is symmetric, so it reads as looking straight at the viewer whichever way the body faces */
@keyframes pb-curious { 0% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 60% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 100% { transform: rotate(0); } }
@keyframes pb-blink { 0%, 34%, 42%, 74%, 82%, 100% { transform: scaleY(1); } 38%, 78% { transform: scaleY(.1); } }
@keyframes pb-notice { 0% { transform: rotate(0); } 25% { transform: rotate(26deg) translateY(1px); } 70% { transform: rotate(22deg) translateY(1px); } 100% { transform: rotate(0); } }
.login .login-actions { position: relative; }
.ts-perch.on-line { z-index: 2; }
.ts-perch.on-line .pb-chirp { font-size: 11px; top: -10px; }
.ts-pelican { width: clamp(150px, 15vw, 240px); }
/* one group per wing (feathers + black primaries), hinged at the shoulder in SVG coords so the tips never detach */
.ts-pelican .pp-wing { transform-box: view-box; transform-origin: 98px 50px; animation: pp-beat 6.5s ease-in-out infinite; }
@keyframes pp-beat { 0%, 100% { transform: scaleY(1); } 7% { transform: scaleY(-.55); } 14% { transform: scaleY(1); } 21% { transform: scaleY(-.55); } 28% { transform: scaleY(1); } 35% { transform: scaleY(-.5); } 42%, 99% { transform: scaleY(.92); } }
/* always-visible time-of-day toggle (top-right corner, clear of the card) */
.ts-todbtn { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 32px; min-width: 32px; padding: 0 7px; line-height: 1; margin: 0; border: 1px solid rgba(242, 243, 245, .25); border-radius: 999px; background: rgba(17, 17, 17, .45); color: var(--paper); font: 600 12px/1 "Segoe UI", system-ui, sans-serif; cursor: pointer; opacity: .7; transition: opacity .2s, background .2s; width: auto; }
.ts-todbtn svg { width: 16px; height: 16px; flex: none; }
.ts-todbtn span { max-width: 0; margin-left: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease, margin-left .3s ease; }
.ts-todbtn:hover, .ts-todbtn:focus-visible { opacity: 1; background: rgba(17, 17, 17, .7); }
.ts-todbtn:hover span, .ts-todbtn:focus-visible span { max-width: 140px; margin-left: 6px; }
.ts-todbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ts-critter { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .6s; }
.ts-critter svg { display: block; width: 100%; height: auto; }
.ts-critter.face-left svg { scale: -1 1; }
.ts-squirrel { width: 34px; }
.ts-squirrel .sq-tail { transform-box: fill-box; transform-origin: 90% 90%; animation: sq-run .22s ease-in-out infinite alternate; }
.ts-squirrel.is-sitting .sq-tail { animation: sq-flick .7s ease-in-out infinite alternate; }
@keyframes sq-run { to { transform: rotate(-8deg); } }
@keyframes sq-flick { 0%, 60% { transform: rotate(0); } 100% { transform: rotate(18deg); } }
.ts-rabbit { top: auto; bottom: 2vh; width: 46px; height: 44px; opacity: 1; overflow: hidden; pointer-events: auto; cursor: pointer; }
.ts-rabbit .rb-pop { position: absolute; left: 7px; bottom: -36px; width: 30px; transition: bottom .5s cubic-bezier(.3, 1.4, .6, 1); }
.ts-rabbit.is-up .rb-pop { bottom: 0; }
.ts-rabbit:not(.is-up) { pointer-events: none; }
.ts-rabbit.is-up .rb-ear.r { transform-box: fill-box; transform-origin: 50% 100%; animation: rb-twitch 1.4s ease-in-out infinite; }
@keyframes rb-twitch { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(14deg); } }
.ts-dragonfly { width: 30px; }
.ts-dragonfly .df-w { animation: df-buzz .05s linear infinite alternate; }
@keyframes df-buzz { to { opacity: .4; } }
.ts-frog { width: 20px; }
.tod-night .ts-dragonfly { display: none; }
@media (max-width: 700px) { .ts-rabbit { width: 38px; } .ts-dragonfly { width: 24px; } }
@media (prefers-reduced-motion: reduce) { .ts-critter, .ts-todbtn span { display: none; transition: none; } }
/* bird-click easter egg: dodge + snickering Catahoula in a Twisted Turf cap */
.ts-perch.is-dodge svg { animation: pb-dodge .5s ease-out; }
@keyframes pb-dodge { 30% { transform: translateY(-10px) rotate(-25deg); } 100% { transform: none; } }
.ts-pelican.is-dodge svg { animation: pb-dodge .6s ease-out; }
.ts-dog { position: absolute; bottom: 0; left: 6vw; width: 150px; height: 150px; pointer-events: none; }
.ts-dog .dg-pop { position: absolute; left: 20px; bottom: -130px; width: 110px; transition: bottom .45s cubic-bezier(.3, 1.5, .6, 1); }
.ts-dog.is-up .dg-pop { bottom: 4px; }
.ts-dog .dg-pop svg { display: block; width: 100%; }
.ts-dog.is-laughing .dg-pop svg { animation: dg-shake .16s ease-in-out infinite alternate; }
@keyframes dg-shake { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-3px) rotate(3deg); } }
.ts-dog.is-laughing .dg-mouth { transform-box: fill-box; transform-origin: 50% 0; animation: dg-laugh .16s ease-in-out infinite alternate; }
@keyframes dg-laugh { to { transform: scaleY(.55); } }
/* laugh text sits right beside the head: vertically centred on it, ~10px gap; side set by JS (.heh-left) */
.ts-dog .dg-heh { position: absolute; left: 128px; top: 95px; translate: var(--hx, 0px) -50%; max-width: 90px; width: max-content; white-space: normal; text-align: left; font: 800 11px/1.05 "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--paper); padding: 3px 6px; border-radius: 8px; opacity: 0; transition: opacity .2s; }
.ts-dog.is-laughing .dg-heh { opacity: 1; }
.ts-dog.heh-left .dg-heh { left: auto; right: 128px; text-align: right; }
@media (prefers-reduced-motion: reduce) { .ts-dog { display: none; } }
.ts-grass .blade.still { animation: none; }
.ts-grass .blade:nth-child(2n) { stroke-opacity: .4; stroke-width: 2.4; }
.ts-grass-back path { fill: none; stroke: var(--grass); stroke-opacity: .35; stroke-width: 3.2; stroke-linecap: round; }
.ts-grass-back path:nth-child(3n) { stroke: var(--ink); stroke-opacity: .35; }
.turf-scene .ts-fringe { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ts-pelican .pp-head { transform-box: view-box; transform-origin: 138px 28px; transform: rotate(var(--pa, 0deg)); transition: transform .45s ease; }
.ts-pelican.is-perched .pp-wing { animation: none; transform: scaleY(.22); }
.ts-pelican .pp-wing.far { transform-origin: 100px 46px; }
.ts-pelican .pp-eye { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .08s; }
.ts-pelican.do-blink .pp-eye { transform: scaleY(.1); }
/* v350 surprises: shooting star, hummingbird, critter click reactions */
.ts-shoot { position: absolute; left: 0; top: 0; width: 90px; height: 2px; border-radius: 2px; opacity: 0; pointer-events: none; transform-origin: 100% 50%; background: linear-gradient(90deg, rgba(242,243,245,0), var(--paper)); box-shadow: 0 0 6px rgba(242,243,245,.8); }
.ts-hum { position: fixed; left: 0; top: 0; width: 34px; z-index: 3; opacity: 0; pointer-events: none; transition: opacity .3s; }
.ts-hum svg { display: block; width: 100%; overflow: visible; }
.ts-hum.face-left svg { transform: scaleX(-1); }
.ts-hum .hb-w { transform-box: view-box; transform-origin: 17px 12px; animation: hb-buzz .05s linear infinite alternate; }
@keyframes hb-buzz { to { transform: scaleY(-.7); } }
.ts-squirrel.is-alarm svg { animation: sq-alarm .11s ease-in-out 8 alternate; transform-origin: 50% 100%; }
@keyframes sq-alarm { to { transform: translateY(-3px) rotate(-6deg); } }
.ts-frog.is-boing svg { animation: fr-boing .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes fr-boing { 40% { transform: translateY(-26px) scale(1.1, .9); } 70% { transform: translateY(0) scale(.9, 1.1); } }
.ts-dragonfly svg { transform-origin: 50% 50%; }
.ts-dragonfly.is-loop svg { animation: df-loop .7s ease-in-out; }
@keyframes df-loop { 50% { transform: translateY(-22px) rotate(180deg); } 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ts-hum, .ts-shoot { display: none; } }
/* My Day: Reassign this Service (quiet, full width under the Service rows) */
.job-reassign { display: block; width: 100%; margin-top: 12px; background: #fff; color: var(--ink, var(--ink)); border: 1px solid var(--line); font-weight: 700; }
.job-reassign:hover { border-color: var(--blue); color: var(--blue); }
.field-ask select { width: 100%; }
.field-ask button[disabled] { opacity: .5; cursor: not-allowed; }
/* Email attachments row (emails.php): one line under the message header, scrolls sideways, never wraps. */
.mail-files { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin: 0 0 12px; padding: 2px 0 6px; scrollbar-width: thin; }
.mail-file {
flex: none; display: inline-flex; align-items: center; gap: 8px; max-width: 260px; height: 40px; padding: 0 12px 0 8px; box-sizing: border-box;
border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); text-decoration: none; white-space: nowrap;
transition: border-color .15s ease, background-color .15s ease;
}
.mail-file:hover, .mail-file:focus-visible { border-color: var(--blue); background: var(--paper); outline: none; }
.mail-file-ico { position: relative; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--blue); }
.mail-file-ico .ico { width: 24px; height: 24px; }
.mail-file-ico b { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); padding: 0 2px; border-radius: 3px; background: var(--blue); color: #fff; font-size: .5rem; font-weight: 750; line-height: 1.3; }
.mail-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: .85rem; }
.mail-file-size { flex: none; color: var(--muted); font-size: .78rem; }
/* Assigned / On This Program table (includes/assign.php): names on one line, number columns only as wide as their content. */
@media (min-width: 801px) {
table.assigned-table th, table.assigned-table td { white-space: nowrap; text-align: left; }
table.assigned-table th:nth-child(n+3), table.assigned-table td:nth-child(n+3) { width: 1%; }
/* Property takes the leftover width and ends in … rather than pushing the page wider than the window. */
table.assigned-table td:nth-child(2) { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 800px) {
/* Phone cards: no desktop table-edge dashes inside the card, badges keep their own width. */
.card > table.phone-sheet:not(.board) td:first-child, .card > table.phone-sheet:not(.board) td:last-child { border: 0; }
table.phone-sheet td > .badge { justify-self: start; }
}
/* Dispatch list bar: the standard bar sits in a white card like on other pages (the board background is gray). */
.command .list-bar.lb { background: #fff; border-radius: 16px; padding: 10px 14px; }
/* Debug page: one plain table per card (no inner border), numbers right-aligned on one line */
.debug-scroll { overflow-x: auto; }
.pdf-frame { display: block; width: 100%; height: calc(100dvh - 220px); min-height: 360px; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pdf-view { max-width: 100%; overflow: hidden; }
.debug-table th, .debug-table td { text-align: left; vertical-align: top; }
.debug-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.debug-table .num .wrap { white-space: normal; text-align: left; min-width: 220px; }
.debug-table pre { margin: 0; white-space: pre-wrap; }
/* Settings > Area Types: the add row sits in the table, inputs with their unit after them */
.unit-field { display: flex; align-items: center; gap: 6px; }
.unit-field input { min-width: 0; }
.area-add td { padding-top: 10px; }
/* Demo strip (Scorecard sample data and the public demo) */
.sc-demo { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--navy); color: #fff; white-space: nowrap; overflow: hidden; }
.sc-demo b { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--orange); color: var(--ink); font-size: .8rem; }
.sc-demo span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sc-demo a { color: #fff; font-weight: 650; flex: none; }
.sc-demo a:hover { color: var(--grass); }
.content > .sc-demo { margin: 12px 16px 0; }
/* Estimates (R3): option cards sit side by side (siblings, not cards in cards), the signature box, and the Money table. */
.est-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.est-options > .card { margin: 0; }
.est-opt.rec { border-color: var(--grass); box-shadow: 0 0 0 1px var(--grass); }
.est-opt h2 label.check { font-size: inherit; font-weight: 700; }
label.check input[type="radio"] { width: auto; flex: none; margin: 0; }
.est-price { margin: 0 0 12px; }
.est-price b { font-size: 1.35rem; }
canvas.est-sig { width: 100%; max-width: 600px; height: 160px; border: 1px solid var(--line); border-radius: 10px; background: #fff; touch-action: none; display: block; }
table.est-money { margin-top: 12px; }
td.est-stack > * + * { margin-top: 6px; }
td.est-stack { min-width: 190px; }
/* Business Hours rows (Settings > Company): day, opens, closes, Closed on one line; on phones the time picker icon hides so AM/PM fits. */
.hours-row { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: nowrap; }
.hours-row > span { flex: 0 0 30px; }
.hours-row input[type=time] { flex: 1 1 0; width: auto; min-width: 0; max-width: 150px; margin: 0; padding: 0 4px; }
.hours-row .check { margin: 0 0 0 2px; white-space: nowrap; }
@media (max-width: 800px) {
.hours-row input[type=time] { min-width: 84px; }
.hours-row input[type=time]::-webkit-calendar-picker-indicator { display: none; }
}
/* Info tip: a small (i) that shows its hint on hover, keyboard focus or tap. ... */
.tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; border: 1px solid var(--blue); border-radius: 999px; color: var(--blue); font-size: 12px; font-weight: 700; font-style: italic; line-height: 1; cursor: help; vertical-align: middle; }
.tip::before { content: "i"; }
.tip:hover, .tip:focus, .tip:focus-within { background: var(--blue); color: #fff; outline: none; }
.tip-body { display: none; position: absolute; right: -6px; bottom: calc(100% + 8px); z-index: 30; width: max-content; max-width: 240px; padding: 8px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; font-style: normal; line-height: 1.35; text-align: left; white-space: normal; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.tip-body::after { content: ""; position: absolute; right: 10px; top: 100%; border: 6px solid transparent; border-top-color: var(--ink); }
.tip:hover .tip-body, .tip:focus .tip-body, .tip:focus-within .tip-body { display: block; }
@media (max-width: 800px) {
/* Phones: the hint shows as a full-width note near the bottom of the screen so it never runs off the edge. */
.tip-body { position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; z-index: 80; font-size: 14px; padding: 10px 12px; }
.tip-body::after { display: none; }
}
/* Shared stat pieces (sx-): status dots and badges, uptime bars, sparklines, ring gauges and the status hero.
Used by Service Status; any page can reuse them. Colors come from the theme variables. */
.sx-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #C9CDD2; flex: none; }
.sx-dot.ok { background: var(--grass); }
.sx-dot.warn { background: var(--orange); }
.sx-dot.down { background: var(--red); }
.badge.sx-ok { background: var(--grass); color: var(--ink); }
.badge.sx-warn { background: var(--orange); color: #fff; }
.badge.sx-down { background: var(--red); color: #fff; }
.badge.sx-off, .badge.sx-none { background: var(--paper); color: var(--muted); }
.sx-bars { display: flex; gap: 1px; height: 22px; min-width: 0; }
.sx-bars i { flex: 1 1 0; min-width: 1px; border-radius: 2px; background: var(--grass); }
.sx-bars i.warn { background: var(--orange); }
.sx-bars i.down { background: var(--red); }
.sx-bars i.none { background: #E3E5E8; }
.sx-bars i:hover { opacity: .7; }
.sx-spark { display: block; width: 80px; height: 24px; color: var(--blue); overflow: visible; }
.sx-spark polyline { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.sx-gauge { display: block; width: 84px; height: 84px; flex: none; }
.sx-gauge circle { fill: none; stroke-width: 9; }
.sx-gauge .track { stroke: var(--paper); }
.sx-gauge .val { stroke: var(--grass); stroke-linecap: round; }
.sx-gauge .val.warn { stroke: var(--orange); }
.sx-gauge .val.down { stroke: var(--red); }
.sx-gauge text { font-size: 17px; font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.sx-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sx-hero .sx-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--grass); color: var(--ink); flex: none; }
.sx-hero .sx-mark.warn { background: var(--orange); color: #fff; }
.sx-hero .sx-mark.down { background: var(--red); color: #fff; }
.sx-hero .sx-mark.none { background: var(--paper); color: var(--muted); }
.sx-hero .sx-mark svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sx-hero h2 { margin: 0; font-size: 1.35rem; }
.sx-hero > div:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.sx-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; color: var(--muted); }
.sx-meta b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.sx-gauges { display: flex; gap: 14px; flex-wrap: wrap; }
.sx-gauges figure { margin: 0; text-align: center; color: var(--muted); font-size: .8rem; }
.sx-table td { vertical-align: middle; }
.sx-table td.sx-name { min-width: 160px; }
.sx-table td.sx-name > div { display: flex; align-items: center; gap: 10px; }
.sx-table td.sx-name span { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; }
.sx-table td.sx-state { min-width: 130px; }
.sx-table td.sx-state .sx-detail { display: block; margin-top: 3px; color: var(--muted); font-size: .8rem; }
.sx-table th { white-space: nowrap; }
.sx-table td.sx-state .sx-detail em { display: none; font-style: normal; }
.sx-table td.sx-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-table td.sx-wide { width: 26%; min-width: 100px; }
.sx-table .sx-since { display: block; color: var(--muted); font-size: .72rem; }
.sx-bars-short { justify-content: flex-start; }
.sx-bars-short { gap: 2px; }
.sx-bars-short i { flex: 0 0 8px; }
.sx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 16px; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-note { color: var(--muted); font-size: .8rem; margin: 6px 0 0; }
@media (max-width: 700px) {
/* Phones: one flat row per service inside the group card (no card-on-card), three short lines:
dot + name + status chip / detail + latency across the full width / history bar + uptime. */
.sx-bars i:nth-child(-n+60) { display: none; }
.sx-bars-short i:nth-child(-n+60) { display: block; }
table.sx-table, table.sx-table tbody { display: block; }
table.sx-table tr:first-child { display: none; }
table.sx-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name chip" "detail detail" "bars pct"; align-items: center; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--paper); }
table.sx-table tr:last-child { border-bottom: 0; }
table.sx-table td { display: block; padding: 0; border: 0; min-width: 0; width: auto; background: transparent; }
table.sx-table td.sx-name { grid-area: name; font-weight: 650; min-width: 0; }
table.sx-table td.sx-name span { display: none; }
table.sx-table td.sx-name > div > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
table.sx-table td.sx-state { display: contents; }
table.sx-table td.sx-state .badge { grid-area: chip; justify-self: end; }
table.sx-table td.sx-state .sx-detail { grid-area: detail; margin: 0 0 0 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.sx-table td.sx-state .sx-detail em { display: inline; }
table.sx-table td.sx-ms, table.sx-table td.sx-phone-hide { display: none; }
table.sx-table td.sx-wide { grid-area: bars; margin-left: 20px; }
table.sx-table td.sx-wide .sx-bars { height: 12px; }
table.sx-table td.sx-pct { grid-area: pct; text-align: right; font-size: .8rem; }
table.sx-table td.sx-pct .sx-since { display: inline; margin-left: 4px; }
.sx-hero .sx-gauges { width: 100%; justify-content: space-around; }
.sx-hero .sx-gauges { flex-wrap: nowrap; gap: 6px; }
.sx-hero .sx-gauges figure { flex: 1 1 0; min-width: 0; }
.sx-hero .sx-gauges .sx-gauge { width: 76px; height: 76px; margin: 0 auto; }
}
/* Text Assistant (assistant.php): Try It bubbles and the one-line recent texts table. */
.asst-chat { display: flex; flex-direction: column; gap: 6px; }
.asst-chat p { margin: 0; padding: 8px 12px; border-radius: 14px; max-width: 80%; line-height: 1.35; }
.asst-route { margin: 6px 0 0; line-height: 1.4; }
.asst-chat .asst-in { align-self: flex-end; background: var(--blue); color: #fff; }
.asst-chat .asst-out { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); }
table.asst-log { table-layout: fixed; width: 100%; }
table.asst-log th:nth-child(1) { width: 110px; }
table.asst-log th:nth-child(2) { width: 120px; }
table.asst-log th:nth-child(5) { width: 120px; }
table.asst-log td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
table.asst-log th.sx-phone-hide, table.asst-log td.sx-phone-hide { display: none; }
table.asst-log th:nth-child(1) { width: 124px; }
/* Text is the last column showing on phones: give it the table's right edge. */
table.asst-log th:nth-child(3), table.asst-log td:nth-child(3) { border-right: 1px dashed var(--line); }
table.asst-log th:nth-child(3) { border-top-right-radius: 12px; }
table.asst-log tr:last-child td:nth-child(3) { border-bottom-right-radius: 12px; }
}
/* Dashboard widgets (index.php, includes/widgets.php, assets/js/widgets.js). 12 columns on a computer, one on a phone.
Rows are at least 160px and grow to fit a widget that needs more (Quick Actions never clips its last row). */
.dw-bar { display: none; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; top: 0; z-index: 20; margin: 0 0 14px; padding: 10px 14px;
background: rgba(255,255,255,.82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid var(--line); border-radius: 12px; }
.dash-editing .dw-bar { display: flex; }
.dw-bar .dw-hint { color: var(--muted); font-size: .85rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 701px) { .dw-bar { flex-wrap: nowrap; } .dw-bar .btn, .dw-saved { flex: none; } }
.dw-saved { font-size: .78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dw-saved .sx-dot { width: 8px; height: 8px; }
.dw-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(160px, auto); grid-auto-flow: row dense; gap: 14px; }
.dw { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 14px 16px; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.dw h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .95rem; min-width: 0; }
.dw h2 svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
.dw h2 .dw-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dw h2 .dw-more { margin-left: auto; font-size: .78rem; font-weight: 600; flex: none; }
.dw-in { flex: 1; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.dw-body { flex: 1; min-height: 0; overflow: hidden; }
.dw-gap { margin-top: 8px; }
.dw-head { display: flex; gap: 10px; align-items: baseline; min-width: 0; margin-bottom: 4px; }
.dw-head .badge { flex: none; }
.dw-t1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dw-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--paper); white-space: nowrap; min-width: 0; }
.dw-row:last-child { border-bottom: 0; }
.dw-row .dw-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.dw-row a { color: var(--ink); }
.dw-row a:hover { color: var(--blue); }
.dw-row .muted { flex: none; font-size: .8rem; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.dw-big { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; flex: none; }
.dw-k-quick { overflow: visible; }
.dw-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.dw-actions .btn { justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; padding-right: 8px; }
.dw-aging { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 10px 0 8px; background: var(--paper); }
.dw-aging i { display: block; }
.dw-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--muted); }
.dw-legend b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dw-wx { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dw-wx-ico { font-size: 2.2rem; line-height: 1; flex: none; }
.dw-wx-now { min-width: 0; }
.dw-wx .dw-big { font-size: 2.3rem; }
.dw-wx-line { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dw-wx-line .dw-wx { flex: 0 1 auto; }
.dw-wx-line .dw-days { flex: 1; margin-top: 0; }
.dw-days { display: grid; gap: 6px; margin-top: 12px; text-align: center; font-size: .78rem; min-width: 0; }
.dw-days div { background: var(--paper); border-radius: 10px; padding: 6px 2px; display: grid; gap: 2px; min-width: 0; }
.dw-days span { color: var(--muted); }
.dw-days i { font-style: normal; font-size: 1.1rem; line-height: 1.2; }
.dw-days b { font-size: .95rem; }
.dw-days em { font-style: normal; color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-radar { flex: 1; min-height: 0; }
.dw-soil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dw-soil div { background: var(--paper); border-radius: 10px; padding: 8px 10px; min-width: 0; display: grid; gap: 1px; }
.dw-soil span { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-soil b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.dw-soil em { font-style: normal; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-soil .soil-dry { color: var(--red); }
.dw-soil .soil-good { color: var(--ink); }
.dw-soil .soil-fair, .dw-soil .soil-wet { color: var(--blue); }
.dw-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.dw-totals a { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--paper); color: var(--ink); min-width: 0; }
.dw-totals a:hover { background: rgba(30,144,255,.1); }
.dw-totals b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.dw-totals span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-totals svg { width: 14px; height: 14px; flex: none; }
.dw-profit-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dw-bars { flex: 1; height: auto; min-height: 70px; }
.dw-hours { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: .85rem; margin-top: 6px; }
/* Edit mode */
.dw-tools { display: none; position: absolute; top: 8px; right: 8px; gap: 4px; z-index: 3; }
.dash-editing .dw-tools { display: flex; }
.dw-tools button { width: 28px; height: 28px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.dw-tools svg { width: 15px; height: 15px; }
.dw-grip { cursor: grab; touch-action: none; }
.dash-editing .dw { outline: 2px dashed rgba(30,144,255,.45); outline-offset: -2px; animation: dw-wiggle .5s ease 1; }
.dash-editing .dw:hover { box-shadow: 0 10px 28px rgba(22,58,95,.14); }
.dash-editing .dw-in { pointer-events: none; opacity: .92; }
.dash-editing .dw-more { display: none; }
.dash-editing .dw h2 { padding-right: 96px; }
.dw-size { display: none; flex: none; font-size: .72rem; font-weight: 700; color: var(--blue); background: rgba(30,144,255,.1); border-radius: 999px; padding: 2px 8px; }
.dash-editing .dw-size { display: inline-block; }
.dw-resize { display: none; position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; z-index: 3;
background: linear-gradient(135deg, transparent 50%, var(--blue) 50%, var(--blue) 58%, transparent 58%, transparent 70%, var(--blue) 70%, var(--blue) 78%, transparent 78%); border-radius: 0 0 10px 0; }
.dash-editing .dw-resize { display: block; }
.dw.dw-lift { transform: scale(1.02) rotate(-.4deg); box-shadow: 0 18px 40px rgba(22,58,95,.25); z-index: 10; opacity: .95; }
.dw-drop { outline: 2px solid var(--blue) !important; background: rgba(30,144,255,.06); }
@keyframes dw-wiggle { 0%,100% { transform: none; } 30% { transform: rotate(-.5deg); } 60% { transform: rotate(.5deg); } }
@media (prefers-reduced-motion: reduce) { .dash-editing .dw { animation: none; } }
/* Add Widget gallery: frosted side panel with categories */
.dw-shade { position: fixed; inset: 0; background: rgba(17,17,17,.28); z-index: 60; display: none; }
.dw-gallery { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); z-index: 61; display: none; flex-direction: column;
background: rgba(242,243,245,.86); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); border-left: 1px solid rgba(255,255,255,.6); box-shadow: -20px 0 50px rgba(0,0,0,.18); }
.dw-open .dw-shade, .dw-open .dw-gallery { display: flex; }
.dw-gallery header { display: flex; align-items: center; gap: 8px; padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 8px; } /* full-height sheet: header below the iPhone status bar */
.dw-gallery header h2 { margin: 0; font-size: 1.05rem; margin-right: auto; }
.dw-cats { display: flex; gap: 6px; padding: 4px 18px 12px; flex-wrap: wrap; }
.dw-cats button { border-radius: 999px; padding: 5px 12px; font-size: .8rem; }
.dw-cats button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.dw-list { overflow: auto; padding: 0 18px 18px; display: grid; gap: 10px; align-content: start; }
.dw-pick { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px; background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 12px; }
.dw-pick:hover { border-color: var(--blue); }
.dw-thumb { height: 52px; border-radius: 8px; background: var(--paper); display: grid; place-items: center; overflow: hidden; color: var(--blue); }
.dw-thumb svg { width: 26px; height: 26px; }
.dw-pick b { display: block; }
.dw-pick span { color: var(--muted); font-size: .8rem; }
.dw-gallery footer { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
@media (max-width: 700px) {
.dw-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
.dw { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 120px; }
.dw[data-h="2"] { min-height: 250px; }
.dw[data-h="3"] { min-height: 380px; }
.dw-radar { min-height: 220px; }
.dw-bar { position: static; }
.dw-bar .dw-hint { flex-basis: 100%; white-space: normal; }
.dw-wx-line { display: block; }
.dw-wx-line .dw-days { margin-top: 12px; }
.dw-days { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.dw-days div:nth-child(n+6) { display: none; }
}
/* Text Assistant share grid: the topic takes the row, role columns stay as narrow as their names. */
.asst-share td:first-child { width: 100%; }
.asst-share th:not(:first-child), .asst-share td:not(:first-child) { width: 1%; white-space: nowrap; }
@media (max-width: 700px) {
.asst-share th:not(:first-child), .asst-share td:not(:first-child) { padding-left: 4px; padding-right: 4px; font-size: .66rem; letter-spacing: 0; }
.asst-share td:first-child { padding-right: 6px; }
/* Dashboard: the clock gives way to the page buttons on phones. */
.top-actions ~ .live-clock { display: none; }
}
/* Service Status incidents: one flat row per event (name + chip, full-width detail, when on one line). */
.sx-inc-row { padding: 10px 0; border-top: 1px solid var(--line); }
.sx-inc-row:first-child { border-top: 0; padding-top: 2px; }
.sx-inc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sx-inc-top b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-inc-top .badge { flex: none; }
.sx-inc-detail { margin-top: 3px; font-size: 13px; }
.sx-inc-when { margin-top: 2px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-false .sx-inc-top b { color: var(--muted); font-weight: 600; }
/* Dashboard widgets: size tiers (small, wide, medium, large). */
.dw-progress { height: 6px; border-radius: 3px; background: var(--paper); overflow: hidden; margin: 8px 0 6px; }
.dw-progress span { display: block; height: 100%; background: var(--grass); border-radius: 3px; }
.dw-spray { margin: 8px 0 4px; }
.dw-spark { width: 60px; height: 16px; flex: none; color: var(--blue); }
.dw-sx .dw-row { color: var(--ink); text-decoration: none; }
.dw-sx .dw-row:hover .dw-t { color: var(--blue); }
.dw-sx .dw-ms { min-width: 52px; text-align: right; }
.dw-soil.dw-one { grid-template-columns: minmax(0, 1fr); }
.dw-mv { display: none !important; }
@media (max-width: 700px) {
/* Phones: one column; reorder with the arrows (or hold the grip and drag). Resize cycles the size, which changes what the card shows. */
.dash-editing .dw-mv { display: grid !important; }
.dash-editing .dw-resize { display: none; }
.dw-spark { width: 48px; }
}
.dash-editing .dw h2 { touch-action: none; -webkit-user-select: none; user-select: none; }
.dw-hint-phone { display: none; }
@media (max-width: 700px) {
/* Phone edit mode: arrows, size and remove only (hold the title to drag), so the title keeps its room. */
.dw-hint-wide, .dash-editing .dw-grip, .dash-editing .dw h2 .dw-size { display: none !important; }
.dw-hint-phone { display: inline; }
.dash-editing .dw h2 { padding-right: 138px; }
}
/* Transcripts (Admin): one line per row; the title takes the rest and ends in "…". */
.tx-list { width: 100%; table-layout: fixed; }
.tx-list th:first-child, .tx-list td.tx-date { width: 140px; }
.tx-list td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-list td a { display: block; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.tx-list tr:hover td a { color: var(--blue); }
.tx-list td.tx-date a { color: var(--muted); font-variant-numeric: tabular-nums; }
.tx-doc { max-width: 860px; }
.tx-when { margin: 0 0 6px; }
.tx-prose { line-height: 1.6; overflow-wrap: anywhere; }
.tx-prose h2 { font-size: 1.15rem; margin: 6px 0 10px; }
.tx-prose h3 { font-size: 1rem; margin: 18px 0 6px; }
.tx-prose h4 { font-size: .92rem; margin: 14px 0 4px; }
.tx-prose p { margin: 0 0 10px; }
.tx-prose ul, .tx-prose ol { margin: 0 0 10px; padding-left: 22px; }
.tx-prose li { margin: 0 0 4px; }
.tx-prose hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
@media (max-width: 700px) {
.tx-list th:first-child, .tx-list td.tx-date { width: 138px; }
.tx-list th, .tx-list td { padding-left: 8px; padding-right: 8px; }
}
/* One-tap Call · Text · Email · Directions under a customer, property or Service heading (includes/phone_tabs.php). */
.row.reach-row { margin-top: 10px; }
/* Tappable one-line rows inside a popup (My Day's See another team): tap a row to switch, a check on the current one. */
.field-ask .pick-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden auto; max-height: 55dvh; margin: 0 0 12px; }
.field-ask .pick-list .pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 12px 14px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-ask .pick-list .pick span { overflow: hidden; text-overflow: ellipsis; }
.field-ask .pick-list .pick:last-child { border-bottom: 0; }
.field-ask .pick-list .pick.on { font-weight: 700; }
.field-ask .pick-check { color: var(--grass); font-size: 1.1rem; }
/* One app, three sides (app.php, includes/app_sides.php): the Staff / Customer switch reuses the .tabs pills, stretched to two halves. */
.tabs.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 12px; padding: 4px; background: var(--paper); border-radius: 999px; overflow: visible; }
.tabs.sides a, .tabs.sides label { display: block; margin: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ink); text-align: center; text-decoration: none; font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs.sides a:hover, .tabs.sides label:hover { background: #fff; text-decoration: none; }
.tabs.sides a.on, .tabs.sides a.on:hover, .tabs.sides label.on, .tabs.sides label.on:hover { background: var(--blue); border-color: var(--blue); color: #fff; cursor: default; }
.tabs.sides input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tabs.sides label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.login .as-sides-note { margin: 10px 0 4px; }
.login > .notices { position: fixed; z-index: 60; top: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; height: 0; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 0; pointer-events: none; }
.login > .notices > .toast { pointer-events: auto; }
.field-menu .tabs.sides, .side .tabs.sides { background: rgba(255, 255, 255, .08); margin: 4px 0 8px; }
.side .tabs.sides { margin: 0 8px 8px; }
.field-menu .tabs.sides a, .side .tabs.sides a { color: #eee; padding: 8px 10px; font-weight: 650; }
.field-menu .tabs.sides a:hover, .side .tabs.sides a:hover { background: var(--navy); color: #fff; }
.field-menu .tabs.sides a.on, .side .tabs.sides a.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.side button.logout { display: block; width: auto; height: auto; min-height: 0; background: transparent; border: 0; box-shadow: none; text-align: left; font-family: inherit; cursor: pointer; }
.side button.logout:hover { background: rgba(255,255,255,.06); color: #fff; }