/* The desk: Inbox, To do, Leads, Move in, sign-in, Setup, What's new, Tell us, the assistant and the tour (docs/DESIGN-SYSTEM.md).
   No prototype, so every part is built from the system's own pieces: type and hairlines, a mark and a word for status, quiet buttons for
   actions in words, one filled button a screen. Every value is a token; this file defines no colour of its own. Loads after the
   other stylesheets, so where an older rule is still on the page, this one wins. */

/* ---------- shared: a line of words under a page's name, a section, a list of rows ---------- */
.dk-sub { margin: 0 0 16px; color: var(--ink-2); max-width: 62ch; }
.dk-calm { margin: 4px 0 8px; color: var(--ink-2); }
.dk-sec { margin-top: 28px; }
.dk-sec.first { margin-top: 8px; }
.dk-sec > h2 { margin: 0 0 4px; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-semibold); }
.dk-sec > h2 .n { color: var(--ink-3); font-size: var(--fs-sec); letter-spacing: 0; }
.dk-sec > .empty { padding-top: 8px; }
.dk-list { list-style: none; margin: 0; padding: 0; }
/* a row: a mark, the words, then the time and the quiet actions. The mark is 6 px; it is colour only when the line needs the owner. */
.dk-row {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 12px 0;
  border-bottom: 1px solid var(--hair); color: inherit; text-decoration: none;
}
.dk-mark { width: 6px; height: 6px; margin: 7px 0 0 1px; border-radius: 50%; background: transparent; }
.dk-mark.on { background: var(--ink-3); }
.dk-mark.on.red { background: var(--red); }
.dk-mark.on.amber { background: var(--amber); }
.dk-main { display: grid; gap: 2px; min-width: 0; }
.dk-t { font-weight: var(--w-regular); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.dk-t b { font-weight: var(--w-semibold); }
a.dk-t { font-weight: var(--w-semibold); }
.dk-s { color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dk-did { margin: 2px 0 0; }
.dk-side { display: flex; align-items: center; gap: 8px; min-height: 20px; color: var(--ink-3); }
.dk-when { font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); white-space: nowrap; }
.dk-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dk-divider { padding: 20px 0 6px; border-bottom: 1px solid var(--hair); font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-medium); color: var(--ink-3); }
.dk-item.seen .dk-t { color: var(--ink-2); font-weight: var(--w-regular); }
.urgent-tag { font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--red-text); }
.draft-tag { font-weight: var(--w-medium); color: var(--amber-text); margin-right: 4px; }
/* a list whose rows are links (the conversations): the hover band reaches 8 px into the gutter, as a table's does */
.dk-list.link a.dk-row { position: relative; }
@media (hover: hover) { .dk-list.link a.dk-row:hover { background: var(--hover); box-shadow: -8px 0 0 var(--hover), 8px 0 0 var(--hover); } }
.dk-list.link a.dk-row:focus-visible { outline-offset: -2px; }
.inbox .count { margin-left: 8px; font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.inbox .dk-mark.on { background: var(--ink); }
.dk-item .dk-mark.on { background: var(--ink-3); }
/* an alert's own words-for-actions (its fix, Add to to-do, Dismiss) sit under it and stay quiet until the row is pointed at or reached by the
   keyboard (a touch screen always shows them). The time is the only thing on the right, so every list has one right edge. */
.brief-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.brief-chip { height: auto; min-height: 32px; padding: 4px 10px 4px 8px; gap: 8px; white-space: normal; text-align: left; font-weight: var(--w-regular); }
.brief-chip .dk-mark { flex: none; margin: 0; }
.brief-chip b { font-weight: var(--w-semibold); }
.dk-item .dk-acts { margin-top: 4px; gap: 4px; }
.dk-item .dk-acts > .btn:first-child { margin-left: -10px; }
@media (hover: hover) {
  .dk-item .dk-acts { opacity: 0; }
  .dk-item:hover .dk-acts, .dk-item:focus-within .dk-acts { opacity: 1; }
  /* a new alert's fix is the only place it is written now (the top block counts only), so it is never hidden; a Seen one stays quiet */
  .dk-item:not(.seen) .dk-acts { opacity: 1; }
}
.dk-item .dk-mark.on.red { background: var(--red); }
.dk-item .dk-mark.on.amber { background: var(--amber); }
.dk-list.link .dk-mark.on { background: var(--ink); }
.more-row { padding: 12px 0 0; display: flex; align-items: center; gap: 12px; }
/* writing to a tech or to the crew: a ruled section, not a card */
.dk-compose { display: grid; gap: 12px; max-width: 640px; margin: 0 0 20px; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.dk-compose .row { gap: 8px; }
.dk-compose .field.wide, .dk-compose .field { max-width: 100%; }
.dk-compose .textarea { min-height: 84px; }
.lede + .dk-compose, .lede + .notice { margin-top: 0; }
@media (max-width: 700px) {
  .dk-row { grid-template-columns: 8px minmax(0, 1fr); }
  .dk-side { grid-column: 2; flex-wrap: wrap; margin-top: 6px; }
  /* an alert keeps its time at the right even on a phone: the time is short, and the actions sit under the words */
  .dk-item .dk-row { grid-template-columns: 8px minmax(0, 1fr) auto; }
  .dk-item .dk-side { grid-column: auto; margin-top: 0; flex-wrap: nowrap; }
}

/* ---------- a conversation: theirs on the left, the office's on the right, a box below ---------- */
.chat { display: flex; flex-direction: column; max-width: 720px; min-height: calc(100vh - 160px); }
.thread { display: grid; gap: 14px; align-content: start; }
.chat > .thread { flex: 1; display: flex; flex-direction: column; }
.msg { display: grid; gap: 3px; max-width: 80%; }
.msg.theirs { justify-self: start; align-self: flex-start; }
.msg.mine { justify-self: end; align-self: flex-end; text-align: right; }
.msg .bubble { padding: 8px 12px; border-radius: var(--r-3); white-space: pre-wrap; text-align: left; overflow-wrap: anywhere; }
.msg.theirs .bubble { background: var(--sunk); color: var(--ink); }
.msg.mine .bubble { background: var(--sel); color: var(--ink); }
.msg .meta { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-3); }
.msg .about { font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink-2); text-decoration: none; }
@media (hover: hover) { .msg .about:hover { color: var(--ink); text-decoration: underline; } }
.msg-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; justify-content: flex-start; }
.msg-did { margin: 2px 0 0; }
.replies { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.replies .btn { height: auto; min-height: var(--h-control-sm); padding: 4px 12px; white-space: normal; text-align: left; font-weight: var(--w-regular); }
.composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-top: 6px; }
.composer .textarea { min-height: 56px; max-height: 160px; resize: vertical; }
.chat .composer { position: sticky; bottom: var(--bar-h, 0px); z-index: 5; padding: 12px 0; background: var(--bg); border-top: 1px solid var(--hair); margin-top: auto; }
.chat .replies, .chat .draft-note { flex: none; }
.draft-note { margin-top: 6px; }
@media (max-width: 700px) { .msg { max-width: 92%; } }
@media (max-width: 900px) { .chat { min-height: calc(100vh - var(--bar-h, 0px) - 150px); } }

/* ---------- To do: what needs doing, by when, by whom ---------- */
.dk-scope { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.dk-scope .seg button .n { font-weight: var(--w-regular); color: var(--ink-3); }
.todo-group { margin: 24px 0 0; }
.todo-group > h2 { margin: 0 0 4px; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-semibold); }
.todo-group > h2 .n { color: var(--ink-3); font-size: var(--fs-sec); letter-spacing: 0; }
.todo-group > h2.bad-text .n { color: var(--ink-3); }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.todo-row .todo-box { margin-top: 2px; }
.todo-main { min-width: 0; display: grid; gap: 2px; }
.todo-title { font-weight: var(--w-semibold); overflow-wrap: anywhere; }
.todo-row.done .todo-title { font-weight: var(--w-regular); color: var(--ink-3); text-decoration: line-through; }
.todo-meta { color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.todo-meta a { color: var(--ink-2); }
.todo-note { color: var(--ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); white-space: pre-wrap; overflow-wrap: anywhere; }
.todo-due .seg { margin-top: 0; }
.todo-due { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.todo-due .datepick { width: 188px; }

/* ---------- Leads: who asked for what, where it stands, when to call, what was quoted ---------- */
.lede-h.bad { color: var(--red-text); }
.note-leads { margin-bottom: 8px; }
.note-leads > .dk-sub { margin-bottom: 4px; }
.note-lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.note-lead .nl-who { min-width: 0; }
.note-lead .note-quote { margin: 2px 0 0; max-width: 62ch; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-lead a.strong { text-decoration: none; }
@media (hover: hover) { .note-lead a.strong:hover { text-decoration: underline; } }
.nl-do { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.nl-do .pick-btn { width: 200px; }
.nl-by { color: var(--ink-3); white-space: nowrap; }
.lead-list { margin-top: 4px; }
.lead-cols, .lead { display: grid; grid-template-columns: minmax(0, 1fr) 140px 188px 96px 112px; gap: 0 16px; align-items: start; }
.lead-cols { align-items: center; height: 32px; border-bottom: 1px solid var(--hair); font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-medium); color: var(--ink-3); }
.lead { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.lead.dim .lead-who { color: var(--ink-3); }
.lead-who { min-width: 0; display: grid; gap: 2px; }
.lead-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.lead-line a.strong { text-decoration: none; }
@media (hover: hover) { .lead-line a.strong:hover { text-decoration: underline; } }
.lead-wants { color: var(--ink-2); }
.lead-note { color: var(--ink-2); max-width: 62ch; }
.lead-meta { color: var(--ink-3); }
.lead-meta a { color: var(--ink-2); }
.lead > .pick-btn, .lead > .datepick, .lead > .lead-money { width: 100%; }
.lead .pick-btn, .lead .datepick .input, .lead .lead-quote { height: var(--h-control-sm); }
.lead-money { position: relative; display: block; }
.lead-money .lead-quote { width: 100%; padding-left: 20px; font-variant-numeric: tabular-nums; }
.lead-cur { position: absolute; left: 10px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--ink-3); pointer-events: none; }
/* a row is plain words until it is pointed at or reached: the stage, the day and the quote draw their boxes only then (a touch screen always has them) */
@media (hover: hover) {
  .lead > .pick-btn, .lead > .datepick, .lead > .lead-money { margin-left: -11px; width: calc(100% + 11px); }
  .lead:not(:hover):not(:focus-within) :is(.pick-btn, .datepick .input, .lead-quote) { border-color: transparent; background-color: transparent; }
  .lead:not(:hover):not(:focus-within) .lead-quote::placeholder { color: transparent; }
}
.lead-act { display: flex; justify-content: flex-end; }
.lead-reason { grid-column: 1 / -1; max-width: 520px; }
.lead-add { max-width: 760px; }
.lead-add .row { gap: 8px; }
.lead-err { margin: 0; }
@media (max-width: 900px) {
  .note-lead { grid-template-columns: minmax(0, 1fr); }
  .nl-do { justify-content: flex-start; }
  .nl-do .pick-btn { width: 100%; }
  .lead-cols { display: none; }
  .lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
  .lead-who { grid-column: 1 / -1; }
  .lead-act { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Move in: three steps on the line, the old system, the files, the check ---------- */
.movein-card { max-width: 920px; }
/* the steps are the line: a node for each, solid where it is behind you, a ring where you are, hollow ahead */
.movein-steps { list-style: none; display: flex; gap: 0; margin: 0 0 24px; padding: 0; }
.movein-steps li { position: relative; flex: 1 1 0; min-width: 0; }
.movein-steps li::before { content: ""; position: absolute; left: 22px; right: 0; top: 10px; height: 0; border-top: 2px dashed var(--edge-strong); }
.movein-steps li:last-child::before { display: none; }
.movein-steps li.passed::before { border-top: 2px solid var(--saguaro); }
.movein-steps button {
  position: relative; display: grid; justify-items: start; gap: 8px; width: 100%; padding: 0 12px 0 0; border: 0; background: none; color: var(--ink-2);
  font: inherit; font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); text-align: left; cursor: pointer;
}
.movein-steps button[aria-current="step"] { color: var(--ink); }
.movein-steps button:disabled { color: var(--ink-3); cursor: default; }
.step-node { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--edge-strong); }
.movein-steps .passed .step-node { background: var(--saguaro); box-shadow: none; }
.movein-steps li:not(.passed) button[aria-current="step"] .step-node { box-shadow: inset 0 0 0 2px var(--saguaro); }
.movein-steps li:not(.passed) button[aria-current="step"] .step-node::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--saguaro); }
@media (hover: hover) { .movein-steps button:not(:disabled):hover { color: var(--ink); } }
.movein-card h2, .movein-systems legend { margin: 0 0 12px; padding: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-semibold); }
.movein-systems { margin: 0; padding: 0; border: 0; min-width: 0; }
.movein-system-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.movein-system-list .check { min-height: 32px; font-weight: var(--w-regular); }
.movein-exports { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair); max-width: 760px; }
.movein-exports ul { margin: 8px 0 10px; padding-left: 18px; display: grid; gap: 6px; }
.movein-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--hair); }
.movein-foot-row { margin-top: 16px; gap: 10px; }
/* a place to drop files is a real object, so it keeps an edge; the edge is solid (dotted means still to go) */
.movein-drop {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 16px; margin: 0 0 16px; border: 1px solid var(--edge-strong); border-radius: var(--r-2);
  background: var(--bg); color: var(--ink-2); cursor: pointer;
}
.movein-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.movein-drop:focus-within { border-color: var(--saguaro); box-shadow: 0 0 0 2px color-mix(in srgb, var(--saguaro) 28%, transparent); color: var(--ink); }
@media (hover: hover) { .movein-drop:hover { border-color: var(--saguaro); color: var(--ink); } }
.movein-what { max-width: 520px; margin-bottom: 12px; }
.movein-send { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--hair); }
.movein-send > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: var(--w-semibold); list-style: none; }
.movein-send > summary::-webkit-details-marker { display: none; }
.movein-send > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 6px 0 0; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); }
.movein-send[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
@media (hover: hover) { .movein-send > summary:hover::after { border-color: var(--ink); } }
.movein-send[open] > summary { margin-bottom: 8px; }
.movein-earlier { margin-top: 8px; }
/* the first rows of a file, a choice above each column ("This column is: Phone"); the table scrolls sideways when a file has many columns */
.movein-card:has(.movein-map) { max-width: none; } /* the sheet's columns get the whole page; a long one still scrolls sideways */
.movein-map { margin-top: 14px; }
.movein-map > p { margin: 0 0 8px; }
.movein-map .table-wrap { margin: 0; border: 1px solid var(--hair); border-radius: var(--r-2); }
.movein-card .movein-map .table-wrap { overflow-x: auto; } /* (the page clips a table above 900px; a wide sheet has to scroll to show every column) */
.movein-map-t { width: auto; min-width: 100%; }
.movein-map-t th { position: static; height: auto; min-width: 116px; max-width: 260px; padding: 8px 10px; vertical-align: bottom; background: var(--bg); }
.movein-map-t th:first-child, .movein-map-t td:first-child { padding-left: 10px; }
.movein-map-t th:last-child, .movein-map-t td:last-child { padding-right: 10px; }
.movein-map-pick th { padding-top: 10px; border-bottom: 0; }
.movein-map-pick .field > .pick-btn { width: max-content; min-width: 100%; max-width: 260px; } /* a choice is as wide as its words, so none reads cut short */
.movein-map-pick .pick-v { overflow: visible; }
.movein-map-pick .field > span { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-regular); color: var(--ink-2); }
.movein-map-h { font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-semibold); color: var(--ink); overflow: hidden; text-overflow: ellipsis; padding-top: 2px; padding-bottom: 8px; }
.movein-map-t td { height: auto; min-height: 0; padding: 7px 10px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sec); line-height: var(--lh-sec); }
.movein-map-note { margin: 8px 0 0; }
.movein-due { margin: 18px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--hair); min-width: 0; display: grid; gap: 4px; max-width: 640px; }
.movein-due legend { padding: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--w-semibold); color: var(--ink); }
.movein-due > p { margin: 0 0 6px; }
.movein-due .check { align-items: flex-start; min-height: 44px; padding: 4px 0; font-weight: var(--w-regular); }
.movein-due .check input { margin-top: 3px; }
.movein-due .check .sub { display: block; color: var(--ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.movein-due .check:has(input:disabled) { color: var(--ink-3); }
.movein-due-date { max-width: 220px; margin: 4px 0 0 26px; }
.movein-sample { margin: 12px 0 0; }
.movein-sample .btn.link { min-height: 36px; padding: 0; font-size: var(--fs-sec); text-decoration: underline; text-underline-offset: 2px; }
.movein-line { margin: 12px 0 0; color: var(--ink-2); max-width: 82ch; }
.amber-words { color: var(--amber-text); }
/* what needs the owner's call: a heading and rows, ruled, not a tinted box */
.movein-need { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--hair); }
.movein-need h3 { margin: 0 0 4px; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-semibold); }
.movein-need ul { list-style: none; margin: 4px 0 0; padding: 0; }
.movein-need li { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.movein-bulk { gap: 8px; margin-bottom: 8px; }
/* a move waiting, stopped or half undone: a mark and the words, with its buttons, ruled */
.dk-wait { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.dk-wait .dk-mark { flex: none; margin: 0; }
.dk-wait > .grow { min-width: min(100%, 320px); }
.movein-done { flex-wrap: wrap; }
.movein-done > .grow { min-width: min(100%, 320px); }
.movein-invite-row { gap: 10px; margin-bottom: 12px; }
.invite-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.invite-card { display: grid; gap: 6px; justify-items: start; padding: 14px; border: 1px solid var(--hair); border-radius: var(--r-0); break-inside: avoid; }
.invite-card .qr { width: 132px; }
.invite-card .code { font: var(--w-semibold) var(--fs-body)/var(--lh-body) var(--font-mono); letter-spacing: 0.04em; }
@media print {
  body.print-sheet-only .main > :not(.invite-sheet) { display: none !important; }
  body.print-sheet-only .invite-sheet { border: 0; padding: 0; }
  .invite-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .movein-steps button { font-size: var(--fs-meta); line-height: var(--lh-meta); padding-right: 4px; }
  .movein-foot { justify-content: stretch; }
  .movein-foot .btn { flex: 1; }
}

/* ---------- sign-in and the first-run screens: the mark, one column, the fields and one primary. No picture, no pitch. ---------- */
.auth { min-height: 100vh; display: grid; background: var(--bg); }
.auth-main { display: grid; place-items: start center; padding: 12vh 20px 48px; }
.auth > .auth-card { margin: 12vh auto 48px; padding: 0 20px; }
.auth-card { width: min(380px, 100%); display: grid; gap: 20px; }
.auth-brand { display: flex; align-items: center; gap: 8px; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-semibold); color: var(--ink); }
.auth-brand svg { color: var(--saguaro); }
.auth-form { display: grid; gap: 16px; }
.auth-head { display: grid; gap: 4px; }
.auth-head h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--w-semibold); }
.auth-head p { margin: 0; color: var(--ink-2); }
.auth .field > label, .auth-label-row label { font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink-2); }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth .input { height: 40px; font-size: 16px; } /* 16px: an iPhone does not zoom into the field */
.auth-pw { position: relative; }
.auth-pw .input { width: 100%; padding-right: 44px; }
.auth-eye { position: absolute; right: 2px; top: 2px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--r-1); background: none; color: var(--ink-3); cursor: pointer; }
@media (hover: hover) { .auth-eye:hover { color: var(--ink); background: var(--hover); } }
.auth-forgot { font-size: var(--fs-sec); line-height: var(--lh-sec); }
.auth .hint { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-3); }
.auth-go { width: 100%; height: 40px; justify-content: center; }
.auth-go[aria-busy="true"] { background: var(--saguaro-hi); border-color: var(--saguaro-hi); color: var(--on-saguaro); cursor: progress; }
.auth-alts { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-start; }
.auth-alt { font-size: var(--fs-sec); line-height: var(--lh-sec); min-height: 28px; }
.auth-check { display: grid; gap: 8px; min-height: 65px; } /* the Turnstile check (office/js/turnstile.js); the space is kept so the card does not jump when it arrives */
.auth-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.auth-foot .linkish { font-weight: var(--w-semibold); color: var(--ink); }
.auth-ok, .auth-err { margin: 0; padding: 8px 12px; border-radius: var(--r-2); }
.auth-ok { background: var(--sel); color: var(--ink); }
.auth-err { background: var(--red-tint); color: var(--red-text); }
.auth-help { margin: 8px 0 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-3); }
.auth-code { font-size: 20px !important; letter-spacing: 2px; }
.auth .providers .btn { width: 100%; height: 40px; }
/* Apple's button in the dark: an outline on the page, not a black slab */
:root[data-scheme="dark"] .auth .providers .btn.apple { background: var(--bg); color: var(--ink); border-color: var(--edge-strong); }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) .auth .providers .btn.apple { background: var(--bg); color: var(--ink); border-color: var(--edge-strong); } }
@media (max-width: 700px) { .auth-main { padding-top: 40px; } .auth > .auth-card { margin-top: 40px; } }

/* ---------- Setup: the steps of getting a company on, on the line ---------- */
.steps { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.steps li { position: relative; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 8px 0; }
.step-dot { position: relative; z-index: 1; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--edge-strong); color: var(--on-saguaro); }
.steps li.done .step-dot { background: var(--saguaro); box-shadow: none; }
.steps li + li::before, .steps li:not(:last-child)::after { content: ""; position: absolute; left: 10px; height: 50%; border-left: 2px dashed var(--edge-strong); }
.steps li + li::before { top: 0; }
.steps li:not(:last-child)::after { bottom: 0; }
.steps li.lit::before, .steps li.done:not(:last-child)::after { border-left: 2px solid var(--saguaro); }
.steps li.done .strong { font-weight: var(--w-regular); color: var(--ink-2); }
/* nothing left to do: small ring-checks on a plain line; solid Saguaro is for the step you are on */
.steps.all-done .step-dot, .steps.all-done li.done .step-dot { background: var(--bg); box-shadow: inset 0 0 0 2px var(--edge-strong); color: var(--ink-3); }
.steps.all-done li.lit::before, .steps.all-done li.done:not(:last-child)::after { border-left: 2px solid var(--edge-strong); }
.steps.all-done li.done .strong { color: var(--ink-3); }
.step-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.step-left { color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); }

/* ---------- What's new: a day at a time ---------- */
.news-day { margin: 28px 0 0; }
.news-day > h2 { margin: 0 0 4px; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-semibold); }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-item { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.news-main { min-width: 0; max-width: 72ch; display: grid; gap: 2px; }
.news-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.news-area { color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.news-new { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); }
.news-new .dot { background: var(--ink); }
.news-short, .news-body { margin: 0; color: var(--ink-2); }
.news-body { margin-top: 6px; }
.news-acts { display: flex; gap: 8px; align-items: center; flex: none; }
@media (max-width: 900px) { .news-item { flex-direction: column; gap: 8px; } .news-acts { justify-content: flex-start; } }

/* ---------- the fit wave, desk: the closest names, Add a stop's errors and tech list, the Inbox's one list ---------- */
/* a search that found nobody still answers: the closest names, one per row, under the plain line */
.near-names { margin-top: 20px; text-align: left; }
/* in the menu search a customer's name keeps its room and the address gives way first ("Kevin P..." read as nobody on a phone) */
.pal-i.customer .label { flex: 0 0 auto; max-width: 62%; }
.pal-i.customer .sub { flex: 1 1 0; display: flex; justify-content: flex-end; text-align: right; }
/* the street gives way with dots; the number is kept whole at the right (two Turners are told apart by it) */
.pal-i.customer .pal-addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-i.customer .pal-ph { flex: none; }
.near-h { margin: 0 0 4px; color: var(--ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); }
.near-names ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.near-names li { border-bottom: 1px solid var(--hair); }
.near-names a { display: grid; gap: 1px; padding: 10px 0; color: var(--ink); text-decoration: none; min-height: 44px; }
.near-names a .muted { overflow-wrap: anywhere; }
/* a phone number stays whole: it never breaks at a hyphen between two lines */
.nw { white-space: nowrap; }
@media (hover: hover) { .near-names a:hover { background: var(--hover); } }
.pal-gl + .pal-i { margin-top: 0; }
/* the plain line above the closest names takes less room than the line that stands alone */
.pal-none:not(:only-child) { padding: 10px 8px 2px; color: var(--ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); }

/* Add a stop: a mistake is said under the field it is about, in red text and a red edge, and the field holds the focus */
.field-err { display: block; margin: 4px 0 0; color: var(--red-text); font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); }
.drawer-two { align-items: start; }
.drawer-cell { display: grid; gap: 4px; align-content: start; min-width: 0; }
.drawer-cell .field-err { margin: 0; }
.drawer-body [data-f] > .drawer-hint { margin-top: 4px; }
/* the chosen customer: the address gives way (cut with ...) and Change keeps its whole word, even at 390 */
/* (the drawer is a one-column grid whose column would otherwise grow to the widest line) */
.drawer-body, .drawer-body > .field { grid-template-columns: minmax(0, 1fr); }
.drawer .row > .one { min-width: 0; }
.drawer .row > .btn { flex: none; }
/* a line of what the field means for this stop, under it: "Jordan Reyes has 3 stops that day.", "Reads as 2:00-3:00 PM." */
.drawer-hint { margin: 0; color: var(--ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); }

/* ---------- Tell us ---------- */
.dk-form { display: grid; gap: 16px; max-width: 640px; }
.dk-form .set-actions { margin: 0; }

/* ---------- the assistant: a column beside the page, so what it changes stays in view ---------- */
.assist { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; min-width: 0; background: var(--raise); border-left: 1px solid var(--hair); }
.assist[hidden] { display: none; }
.assist-head { display: flex; align-items: center; gap: 8px; height: var(--h-bar); flex: none; padding: 0 12px 0 16px; border-bottom: 1px solid var(--hair); }
.assist-head h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-semibold); }
.assist-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.assist-intro { color: var(--ink-2); display: grid; gap: 12px; }
.assist-starters { display: grid; gap: 8px; }
.assist-starters .btn { height: auto; min-height: var(--h-control); padding: 6px 12px; justify-content: flex-start; text-align: left; white-space: normal; }
.assist-msg { overflow-wrap: anywhere; }
.assist-msg p + p, .assist-msg p + ul, .assist-msg ul + p { margin-top: 8px; }
.assist-msg ul { padding-left: 18px; }
.assist-msg.user { align-self: stretch; white-space: pre-wrap; color: var(--ink); font-weight: var(--w-semibold); padding-top: 12px; border-top: 1px solid var(--hair); }
.assist-msg.user::before { content: "You asked: "; font-weight: var(--w-regular); color: var(--ink-3); }
.assist-msg.error { color: var(--red-text); background: var(--red-tint); padding: 8px 12px; border-radius: var(--r-2); }
.assist-tool { font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); }
.assist-card { padding: 12px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); display: grid; gap: 6px; }
/* a change waiting for a yes: ruled like the others, and while it waits its Do it is the one filled button, so the page's own primary steps back */
body:has(.assist-card.waiting) .pagebar-actions .btn.primary { background: transparent; color: var(--ink); border-color: var(--edge-strong); }
.assist-card ul { margin: 2px 0 4px; padding-left: 18px; max-height: 240px; overflow-y: auto; font-size: var(--fs-sec); line-height: var(--lh-sec); }
.assist-card li + li { margin-top: 2px; }
.assist-card .row { margin-top: 4px; }
.assist-state { font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); }
.assist-state.declined { color: var(--ink-3); }
.assist-state.partly, .assist-state.failed { color: var(--red-text); }
.assist-compose { border-top: 1px solid var(--hair); padding: 12px 16px 16px; display: grid; gap: 8px; }
.assist-compose textarea { width: 100%; resize: none; min-height: 56px; border: 1px solid var(--edge-strong); border-radius: var(--r-2); padding: 6px 10px; background: var(--bg); color: var(--ink); font-size: var(--fs-body); line-height: var(--lh-body); }
.assist-compose textarea:focus { outline: 0; border-color: var(--saguaro); box-shadow: 0 0 0 2px color-mix(in srgb, var(--saguaro) 28%, transparent); }
.assist-compose .small { font-size: var(--fs-meta); line-height: var(--lh-meta); }

/* ---------- the tour: a quiet offer in the sidebar, and a card beside the part being shown ---------- */
/* only where the sidebar is a column and tall enough (the shell hides it on a phone, folded, and on a short window) */
@media (min-width: 901px) and (min-height: 740px) { .shell:not(.rail) .side-tour { display: grid; } }
.side-tour { justify-items: start; gap: 2px; margin: 12px 0 0; padding: 0 8px; color: var(--ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.side-tour .btn.tour-go { height: auto; padding: 0; text-align: left; font-weight: var(--w-medium); color: var(--ink); text-decoration: underline; text-decoration-color: var(--edge-strong); text-underline-offset: 3px; }
@media (hover: hover) { .side-tour .btn.tour-go:hover { background: none; text-decoration-color: var(--ink); } }
.side-tour .btn.tour-no { padding: 0; color: var(--ink-3); height: 24px; }
@media (prefers-reduced-motion: no-preference) { .side-tour, .tour-card { animation: rise-in var(--dur-pop) var(--ease); } }
.tour { position: fixed; inset: 0; z-index: 120; }
.tour-veil { position: fixed; inset: 0; background: var(--scrim); }
.tour-hole { position: fixed; border-radius: var(--r-2); box-shadow: 0 0 0 9999px var(--scrim); outline: 2px solid var(--saguaro); outline-offset: 0; pointer-events: none; }
.tour-card { position: fixed; z-index: 1; width: min(360px, calc(100vw - 24px)); display: grid; gap: 6px; padding: 16px; background: var(--raise); color: var(--ink); border-radius: var(--r-3); box-shadow: var(--shadow-pop); }
.tour-card h2 { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-semibold); }
.tour-card p { margin: 0 0 6px; color: var(--ink-2); }
.tour-step { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink-3); }
.tour-acts { display: flex; align-items: center; gap: 8px; }

/* Opening the assistant never folds the menu: the menu folds only when the user folds it (.rail). On a computer the assistant takes its own
   column and the page narrows to make room (it never covers what someone was looking at). Only a phone, with no room beside the page,
   opens it over the page, above the tab row. */
@media (max-width: 900px) {
  .assist { position: fixed; right: 0; top: 0; bottom: 0; height: auto; width: 100vw; z-index: 45; box-shadow: var(--shadow-pop); }
}
.movein-send > p { margin: 0 0 12px; }
.movein-card .tarf-asks td { background: transparent; padding-top: 8px; padding-bottom: 16px; }

/* the screens drawn straight on .auth (the shell's "No connection", the two-step code) read the same as the ones with the frame */
.auth-card h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--w-semibold); }
.auth-card > form { display: grid; gap: 16px; }
.auth-card > p { margin: 0; }

/* Records > Termite reports: the buttons on a report's row (C2, C3). They are the plain outlined small button, so they read as buttons, with a little room
   above them in the cell; the person's name in the applicator sentence opens their Team page and is underlined so it reads as a link. */
.bk .tarf-form td > .btn.small, .bk .tarf-form .tarf-file > .btn.small { margin-top: 6px; }
.bk .tarf-form .tarf-ways { margin-top: 6px; gap: 6px; }
.bk .tarf-form a.tarf-who { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* At phone width the report's row is a stack and a button must not be wider than it: the long ones (Add it on Marcus Bell's Team page, Use a certified
   applicator's number) wrap their words and grow taller instead of running off the right edge. */
.bk .tarf-form .tarf-ways { max-width: 100%; }
.bk .tarf-form .tarf-ways .btn.small, .bk .tarf-form td > .btn.small, .bk .tarf-form .tarf-file > .btn.small { max-width: 100%; white-space: normal; text-align: left; height: auto; min-height: 36px; padding-block: 6px; line-height: 1.25; }

/* Records > Applications: the state line and the qualifying-party line keep their buttons in one column at the right edge, and the sentence wraps beside them
   instead of pushing a button onto its own line. On a phone the buttons sit under the sentence, at the left. */
.bk-tarf-row > .ink2 { flex: 1 1 260px; min-width: 0; }
.bk-tarf-row > .tarf-acts { display: flex; flex-wrap: wrap; gap: 6px; }
@media (min-width: 900px) { .bk-tarf-row > .tarf-acts { flex: none; margin-left: auto; } }