/* =====================================================================
 * Reconciliation. NOT part of the supplied design kit.
 *
 * The kit was drawn against version 1.78 and its own guide says to expect
 * this: "start from that current source, copy approved visual assets and
 * styles, reconcile selectors, then test affected workflows." This file is
 * that reconciliation and nothing else. It loads after the three kit
 * layers so a future kit refresh can overwrite theirs without taking these
 * with it.
 *
 * Keep it small. Anything in here is a note that the kit and the current
 * application disagree about something, so it should be read as a list of
 * disagreements rather than as a place to put new design.
 * ===================================================================== */

/* THE LEADS PAGE SCROLLED SIDEWAYS ON A PHONE, by exactly 20 pixels.
 *
 * `.body` is a one-column grid at phone width, and a bare `1fr` track has an
 * AUTO minimum - it refuses to shrink below the widest thing inside it. The
 * queue card's header is a flex row of a title and three chips that do not
 * wrap ("0 late", "0 due", "0 later"), and the kit's roomier header padding
 * and gap pushed that row's minimum past the 360px the phone actually has.
 * The track grew to 395px inside a 390px window and the whole page moved.
 *
 * Two rules, because either alone only half fixes it: let the header wrap so
 * the content fits, and let the track shrink so no future wide child can
 * take the page sideways with it again.
 *
 * Measured with scripts/shot-overflow.mjs, which loads each page twice - as
 * shipped and with the design layers switched off - so the number before the
 * fix is a fact rather than a guess. Leads: 20px with, 0px without, 0px
 * after. Every other page was 0px both ways. */
@media (max-width: 640px) {
  .body { grid-template-columns: minmax(0, 1fr); }
  .card-hd, .hcard-hd { flex-wrap: wrap; }
}

/* LETTERS WERE CUT OFF ON THE RIGHT on a phone and a narrow window, found
 * while adding the comparable properties (19 Sep). The same bug as the Leads
 * page above, one screen over: the kit says `.lwrap{grid-template-columns:1fr}`
 * under 1020px, and a bare `1fr` has an AUTO minimum. The preview inside it
 * is a 794px A4 frame scaled down with a transform, and a transform does not
 * change layout width, so the one column was held open at 832px and the
 * card clipped everything past the screen's edge: the rent boxes, "per week"
 * and the right half of every field. Nothing scrolled sideways, because the
 * card clips, which is why the overflow check never saw it. */
@media (max-width: 1080px) {
  .lwrap { grid-template-columns: minmax(0, 1fr); }
}

/* v2.18 BUYER LEADS: the Buyer tag on a lead's row and chip on its panel.
 * Violet, so it reads apart from Sales (blue) and Property management (lime)
 * at a glance in a long list. Both themes. */
:root { --buyer: #5B3FC4; --buyer-soft: #EEEAFC; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --buyer: #C3B5FF; --buyer-soft: #2A2257; }
}
:root[data-theme="dark"] { --buyer: #C3B5FF; --buyer-soft: #2A2257; }
.tag.buyer, .chip.buyer { background: var(--buyer-soft); color: var(--buyer); }

/* v2.19 FACEBOOK SETTINGS: a login with an ad account and no Page, said
 * plainly (.fbnopage), and the agency's Disconnect as a quiet row under the
 * ad account (.fbleave), button above its sentence, never side by side. */
.fbnopage { border: 1px solid var(--warn); background: var(--warn-soft); border-radius: 10px; padding: 16px 18px; margin: 4px 0 18px; display: grid; gap: 12px; }
.fbnp-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.fbnp-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--warn); border: 1px solid var(--warn); }
.fbnp-top b { display: block; font-size: 15px; line-height: 1.4; color: var(--ink); }
.fbnp-top p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-width: 68ch; }
.fbnp-tips { margin: 0 0 0 46px; padding: 0 0 0 18px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.fbnp-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-left: 46px; }
.fbleave { display: grid; gap: 6px; justify-items: start; margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.fbleavebtn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--danger); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fbleavebtn:hover { border-color: var(--danger); background: var(--danger-soft); }
.fbleavebtn:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.fbleave p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); max-width: 60ch; }
/* LeadGlue's operator, viewing as the owner: whose sign-in Connect uses. */
.fbmaster { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--surface); border: 1px dashed var(--line-2); font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 68ch; }
.fbnopage .fbmaster { margin: 0 0 0 46px; }
/* Which Page? Each Page's name, with where it is now under it. */
.opt.pickpage { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.opt.pickpage small { text-align: left; }
.opt.pickpage:disabled { opacity: .55; cursor: not-allowed; }
.picknone { margin: 4px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--warn-soft); border: 1px solid var(--warn); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.picknone b { color: var(--ink); }
.pickerr { margin: 10px 0 0; font-size: 13px; color: var(--danger); min-height: 0; }
.pickerr:empty { display: none; }
@media (max-width: 640px) {
  .fbnp-tips, .fbnp-acts, .fbnopage .fbmaster { margin-left: 0; }
  .fbnp-acts .btn-primary, .fbnp-acts .btn-quiet { flex: 1 1 auto; justify-content: center; }
}

/* v2.21 TEMPLATES (CR-01): the Settings page, the editor, and the line that
 * warns when a field had nothing on this lead. */
.tplintro { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-3); max-width: 72ch; }
.tplbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.tplch { display: flex; flex-wrap: wrap; gap: 6px; }
.tplch .chip { cursor: pointer; font: inherit; font-size: 13px; padding: 6px 12px; }
.tpllist { display: grid; gap: 8px; }
.tplrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.tplmain { min-width: 0; }
.tplname { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tplname b { font-size: 14.5px; color: var(--ink); margin-right: 2px; }
.tplname .chip { font-size: 11.5px; padding: 2px 8px; }
.tplprev { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tplacts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tplacts .sub { flex: 0 0 auto; min-width: 0; padding: 7px 12px; }
.tplwarn { margin: 10px 0 0; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--warn); background: var(--warn-soft); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.tplwarn[hidden] { display: none; }
.mtfield { margin-top: 8px; }
.mtfield select { max-width: 340px; }
.mtprev { margin-top: 8px; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--line-2); background: var(--surface-2); font-size: 14px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.mtprev .mtsubj { font-weight: 600; margin-bottom: 6px; }
@media (max-width: 640px) {
  .tplrow { grid-template-columns: minmax(0, 1fr); }
  .tplacts { justify-content: flex-start; }
}

/* v2.22 THE NEW TAB'S DAY: Today, Yesterday, This week, or a date. */
.daypick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 2px; }
.daypick .chip { cursor: pointer; font: inherit; font-size: 13px; padding: 6px 12px; }
.daypickdate { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-size: 13px; cursor: pointer; }
.daypickdate.on { border-color: var(--lime); background: var(--lime-soft); color: var(--lime-ink); font-weight: 600; }
.daypickdate input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; }
.daypickdate:focus-within { outline: 2px solid var(--lime); outline-offset: 2px; }
.daypickload { font-size: 12.5px; color: var(--ink-4); }
/* Somebody already on file who enquired again that day. */
.tag.intime.again { background: var(--warn-soft); color: var(--warn); font-weight: 600; }

/* v2.24: the last attempt's standard choice, "1 month, rests in Nurture".
   It spans the row like Pick a day and time, so its second line never has
   to squeeze into a 120px column. */
.gap.rest{grid-column:1/-1;flex-direction:column;justify-content:center;gap:1px;padding:7px 10px;line-height:var(--lh-snug)}
.gap.rest i{letter-spacing:.02em;text-transform:none}
#cbRest{margin:8px 0 0}