/* IDEAL SALES (sales.py) -- loaded after portal.css and coord.css, only on the sales pages,
   whose <body> carries class "sales" (portal.css and coord.css are shared with My Ideal and
   Event Planner, so every override of theirs is scoped to body.sales).

   REBUILT 2026-10-16 after a design audit (Kenyon: "do all of it"): one rule per thing, in
   this order -- type, color, page frame, dashboard, list rows, lead card, tours, proposal
   builder, send/sign, team, small parts. Layouts switch by WIDTH ONLY:
     phone   <= 640px        tablet  641-1024px        computer >= 1025px
   (the builder goes to one column at <= 900px).

   THE COLOR KEY. Red = act now: Not contacted yet, Proposal drafts, overdue, the main
   button on a screen, warnings. Green = on track / go: Follow-ups due, Done, Saved. Blue =
   tours. Black = The Ideal's venue tag. Grey = information. */

/* ------------------------------------------------------------------ type (Lato everywhere) */
/* Oswald stays only in the brand name in the header (Kenyon: no stray Oswald). */
body.sales h1:not(.hi), body.sales h2, body.sales h3, body.sales .btn,
body.sales .lamt, body.sales .qt .grand td, body.sales details.collapsible > summary::after {
  font-family: "Lato", system-ui, sans-serif; }
body.sales h1 { font-weight: 700; font-size: 28px; text-transform: none; letter-spacing: 0; margin: 6px 0 16px; }
body.sales h2 { font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; }
body.sales h3 { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
body.sales .btn { font-weight: 700; font-size: 15px; letter-spacing: .06em; }
body.sales .lamt { font-weight: 700; font-size: 16px; }
body.sales .lamt .help { font-weight: 300; font-size: 13px; }
body.sales .small:not(.btn), body.sales .fhint, body.sales .whose { color: var(--ink-2); }
/* Every typed box at 16px: under 16px, an iPhone zooms the page in when a box is tapped. */
body.sales input:not([type=checkbox]):not([type=radio]), body.sales select, body.sales textarea { font-size: 16px; }
/* One clear focus ring for keyboard users, on everything that can be focused. */
body.sales :is(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; }
body.sales .strip :is(a, button):focus-visible { outline-color: #fff; }

/* ------------------------------------------------------------------ color */
body.sales .vtag.ideal { background: #000; border-color: #000; color: #fff; }   /* Kenyon, 2026-10-16 */
.ok-text { color: var(--ok); }

/* ------------------------------------------------------------------ page frame */
.cbrand img.sicon { border-radius: 10px; }
form.inline { display: inline; }
.pill { display: inline-block; border: 1px solid var(--ink); border-radius: 999px; padding: 2px 12px;
        font-size: 14px; font-weight: 700; }
body.sales .nav a, body.sales .nav .linkish { min-height: 44px; display: inline-flex; align-items: center; }
.lgroup, .dlist, .qsec { overflow-anchor: none; }   /* the page keeps a tapped row in place itself */
[data-sec][hidden], .srow[hidden] { display: none !important; }
.viewonly { display: inline-block; margin: 0 0 12px; padding: 3px 10px; border-radius: 999px; background: #EEE;
  color: #444; font-size: 13px; font-weight: 700; }
.whose { font-size: 13px; }
.rofs { border: 0; margin: 0; padding: 0; min-width: 0; }
.rofs:disabled input, .rofs:disabled select, .rofs:disabled textarea { background: #F7F7F7; color: #222; opacity: 1; -webkit-text-fill-color: #222; }

/* ------------------------------------------------------------------ dashboard */
.sstats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sfilter { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 18px; }
.sfilter .sel { flex: 1 1 280px; max-width: 460px; }
.sfilter .whofilter { margin: 0; }
body.sales .whofilter a { min-height: 40px; }
.addlead { margin: -6px 0 18px; }
.addlead summary { cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; display: inline-flex;
  align-items: center; min-height: 44px; padding: 0 2px; }
.addlead summary::-webkit-details-marker { display: none; }
.addlead[open] summary { margin-bottom: 6px; }
.addlead .lform { background: var(--wash); padding: 14px 16px; border-radius: 6px; max-width: 980px; }
.addlead .addgo { justify-content: flex-end; }
.addlead .addgo .btn { height: 44px; margin: 0; }

/* Section labels and their colour bars. */
.qsec { margin: 0 0 22px; border-top: 3px solid var(--ink); }
.qlabel { display: flex; align-items: baseline; gap: 10px; padding: 14px 0 8px; font-weight: 700; font-size: 14px;
          text-transform: uppercase; letter-spacing: .06em; flex-wrap: nowrap; white-space: nowrap; }
.qlabel span { background: var(--ink); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 12px; }
.qsec.fresh { border-top-color: var(--accent); }                           /* act now */
.qlabel.fresh { color: var(--accent); }
.qlabel.fresh span { background: var(--accent); }
.qsec.qdue { border-top-color: var(--ok); }                                /* on track */
.qlabel.qdue { color: var(--ok); }
.qlabel.qdue span { background: var(--ok); }
.qsec.qtour { border-top-color: #1F4E8C; }                                 /* tours */
.qlabel.qtour { color: #1F4E8C; }
.qlabel.qtour span { background: #1F4E8C; }
.qempty { margin: 0; padding: 14px 22px; color: var(--ink-2); font-size: 14px; }
.dealsh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
          border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.dealsh .ltotal { font-size: 18px; }

/* ------------------------------------------------------------------ list rows */
/* A row: name and details | Inquired / Sent | Done box or amount. */
.srow { grid-template-columns: 64px minmax(0, 1fr) 96px 190px; column-gap: 16px; padding: 18px 22px; }
.srow.tap, .golink { cursor: pointer; }
.srow.tap:hover, .golink:hover { background: var(--wash); }
.srow.opened { background: var(--wash); border-bottom-color: transparent; }
.linq { font-size: 15px; color: var(--ink-2); }
.lamt { justify-content: flex-end; text-align: right; }
.lmain .vtag { margin: 0 6px 0 0; vertical-align: 1px; }
.desk { display: block; }
.mob { display: none; }
.noamt { font: 300 13px/1.3 "Lato", system-ui, sans-serif; color: var(--ink-2); }
.shead { padding: 8px 22px 2px; border-bottom: 0; font-size: 12px; font-weight: 700;
         text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.shead .r { text-align: right; }
.dlist + .dlist, #felse { margin-top: 28px; }
.dlist.sentq .srow { grid-template-columns: 64px minmax(0, 1fr) 96px 230px; }
/* Row tints: red rows act now, green rows are on track. */
.qsec.fresh .srow, .srow.fresh { background: #FBEDEE; border-left: 4px solid var(--accent); padding-left: 18px; }
.qsec.fresh .srow:hover, .qsec.fresh .srow.opened, .srow.fresh:hover { background: #F7E1E3; }
.qsec.qdue .srow { background: #EEF6F0; border-left: 4px solid var(--ok); padding-left: 18px; }
.qsec.qdue .srow:hover, .qsec.qdue .srow.opened { background: #E3F0E7; }
/* The Done box. */
.ctick { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; cursor: pointer;
         min-height: 44px; color: var(--ok); font: 700 14px/1.2 "Lato", system-ui, sans-serif;
         text-transform: uppercase; letter-spacing: .06em; }
.ctick input { width: 22px; height: 22px; accent-color: var(--ok); cursor: pointer; order: 1; }
.lamt.withtick { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 16px; }
.lamt.withtick .amtcol { display: flex; flex-direction: column; align-items: flex-end; }
.lamt.withtick .help { display: none; }
.fu { display: block; font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.fu.due { color: var(--ok); font-weight: 700; }
.fu.late { color: var(--accent); font-weight: 700; }
/* The Undo bar (Done and Close lead). */
.undobar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px;
           background: var(--ok); color: #fff; border-radius: 4px; margin: 4px 0; max-height: 160px;
           transition: max-height .3s ease, opacity .3s ease, padding .3s ease, margin .3s ease; overflow: hidden; }
.undobar .btn { margin: 0; background: #fff; color: var(--ok); border-color: #fff; white-space: nowrap; flex: none; min-height: 44px; }
.undobar.saving .btn { visibility: hidden; }
.undobar.gone { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin: 0; }
.undobar.closed { background: var(--ink-2); }
.undobar.closed .btn { color: var(--ink-2); }
.undobar .undoright { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.undobar .fudate { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; }
.undobar .fudate input { font: inherit; font-size: 16px; padding: 4px 6px; border: 1px solid #fff; border-radius: 4px; color: var(--ink); background: #fff; }

/* ------------------------------------------------------------------ the lead card */
.lpanel { background: var(--wash); border-bottom: 1px solid var(--line); padding: 8px 22px 22px; }
.lfollow { font-size: 14px; margin: 6px 0 10px; color: var(--ink-2); }
.lfollow .late { color: var(--accent); }
.lfollow .due { color: var(--ok); }
.ledit { margin-top: 8px; }
.lform { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; margin: 8px 0 4px; }
.lform .f { display: flex; flex-direction: column; }
.lform .f.wide { grid-column: 1 / -1; }
.lform .f.notes { grid-column: span 2; }          /* Client notes: two columns (Kenyon, 2026-10-12) */
.lform label, .lform legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
                              color: var(--ink-2); margin: 0 0 4px; }
.lform input, .lform select, .lform textarea { font: inherit; font-size: 16px; padding: 7px 9px; border: 1px solid #BDBDBD;
                                              border-radius: 4px; background: #fff; width: 100%; }
.lform input:not([type=checkbox]):not([type=radio]), .lform select { box-sizing: border-box; height: 40px; }
.lform fieldset { border: 0; padding: 0; margin: 0; }
.lform .checks { display: flex; flex-wrap: wrap; gap: 0 14px; align-content: flex-start; }
.lform .checks legend { width: 100%; }
.lform .checks label { text-transform: none; letter-spacing: 0; font-weight: 300; font-size: 15px; color: var(--ink);
                       display: flex; gap: 8px; align-items: center; margin: 2px 0; min-height: 32px; }
.lform .checks input { width: 18px; height: 18px; }
.lform .fhint { font-size: 12px; margin-top: 4px; line-height: 1.3; }
.lform .val { font-size: 15px; padding: 8px 10px; min-height: 40px; box-sizing: border-box; border: 1px solid #E2E2E2;
  border-radius: 4px; background: #fff; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.lform .inl { display: flex; gap: 8px; align-items: center; font-size: 15px; text-transform: none; letter-spacing: 0;
              font-weight: 300; color: var(--ink); min-height: 40px; }
.lform .inl input { width: 18px; height: 18px; }
.moretoggle { display: none; }
.lsaved { font-size: 13px; color: var(--ink-2); margin: 8px 0 16px; }
.lsaved.ok { color: var(--ok); }
.lsaved.bad { color: var(--accent); font-weight: 700; }
/* Rep log. */
.replog { margin-top: 24px; }
.replog h3 { margin: 0 0 6px; }
.replog h3 + .small { margin: -2px 0 8px; }
.logform { display: flex; gap: 8px; align-items: flex-end; }
.logform textarea { flex: 1; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid #BDBDBD; border-radius: 4px;
  resize: vertical; min-height: 44px; line-height: 1.35; }
.plus { flex: none; min-width: 64px; height: 44px; border-radius: 22px; border: 0; background: var(--ink); color: #fff;
        font: 700 15px/1 "Lato", system-ui, sans-serif; cursor: pointer; padding: 0 16px; }
.plus:hover { background: var(--accent); }
.logs { list-style: none; margin: 12px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.logs li { padding: 7px 0; border-top: 1px solid #E4E4E4; font-size: 14px; line-height: 1.4; }
.logs li:first-child { border-top: 0; }
.logs .lhead2 { font-weight: 700; }
.logs .ltext { white-space: pre-wrap; }
.logs .logedit { margin-left: 6px; font-size: 12px; color: var(--ink-2); min-height: 32px; }
.logs .logedit-box { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; font-size: 16px;
  padding: 6px 8px; border: 1px solid var(--ink); border-radius: 4px; resize: vertical; }
/* Actions: one solid button (Start proposal); Close lead a quiet link (audit, 2026-10-16). */
.lactions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 22px; }
.lactions .btn { margin: 0; }
.onlyform .lactions { justify-content: flex-start; margin-top: 4px; }
.closer { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.closebtn { background: none; border: 0; padding: 0 8px; min-height: 44px; font: 400 15px/1 "Lato", system-ui, sans-serif;
  color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.closebtn:hover { color: var(--accent); }
.reasons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 560px; }
.reasons[hidden] { display: none; }
.reason { border: 1px solid var(--accent); color: var(--accent); background: #fff; border-radius: 999px;
          padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; min-height: 40px; }
.reason:hover { background: var(--accent); color: #fff; }
.closewarn { flex-basis: 100%; margin: 6px 0 0; color: var(--accent); }
.lcollapse { text-align: center; margin-top: 14px; }
.lcollapse button { background: none; border: 0; font: 700 13px/1 "Lato", system-ui, sans-serif; text-transform: uppercase;
                    letter-spacing: .06em; color: var(--ink-2); cursor: pointer; padding: 10px 16px; min-height: 44px; }
.lcollapse button:hover { color: var(--ink); }

/* ------------------------------------------------------------------ tours (blue) */
.tourtag { color: #1F4E8C; font-weight: 700; }
.tourtag.late { color: #1F4E8C; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tourout { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.tbtn { font: 700 13px/1 "Lato", system-ui, sans-serif; padding: 0 14px; min-height: 36px; border-radius: 999px; cursor: pointer;
        background: var(--ok); color: #fff; border: 1px solid var(--ok); white-space: nowrap; min-width: 88px; }
.tbtn.ghost { background: #fff; color: var(--ink-2); border-color: #9A9A9A; }
.tbtn:disabled { opacity: .5; }
.tourbox { margin: 18px 0 0; padding: 14px 16px; background: #EEF3FA; border-left: 4px solid #1F4E8C; border-radius: 4px; }
.tourbox h3 { margin: 0 0 6px; color: #1F4E8C; }
.tourline { margin: 0 0 8px; }
.tacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.tacts .btn { margin: 0; }
.tourbox .btn.ghost { border-color: #1F4E8C; color: #1F4E8C; }
.tourpick { margin-top: 10px; }
.tkinds { display: inline-flex; border: 1px solid #1F4E8C; border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.tkind { font: inherit; font-size: 14px; font-weight: 700; padding: 0 16px; min-height: 40px; border: 0; background: #fff; color: #1F4E8C; cursor: pointer; }
.tkind[aria-pressed="true"] { background: #1F4E8C; color: #fff; }
.tday { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid #D5DFEC; }
.tdlabel { font-weight: 700; font-size: 14px; padding-top: 10px; }
.tchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchip { font: inherit; font-size: 15px; padding: 0 14px; min-height: 40px; border: 1px solid #1F4E8C; border-radius: 999px;
         background: #fff; color: #1F4E8C; cursor: pointer; }
.tchip.on, .tchip:hover { background: #1F4E8C; color: #fff; }
.tmore { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid #D5DFEC; }
.tmore .linkish { background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; color: #1F4E8C; font-weight: 700; }
.tmore .linkish:only-child { margin-left: auto; }
.tconfirm { margin-top: 10px; padding: 10px 12px; background: #fff; border: 1px solid #1F4E8C; border-radius: 4px; }
.ttimes .tconfirm { margin: 0 0 8px; }
.tconfirm p { margin: 0 0 6px; font-weight: 700; }
.tmsg { margin: 8px 0 0; min-height: 1em; }
.tmsg:empty { display: none; }
.tmsg.ok { color: var(--ok); font-weight: 700; }
.tmsg.bad { color: var(--accent); font-weight: 700; }

/* ------------------------------------------------------------------ the builder */
.dealgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.dealform { gap: 16px; }
.dealform .card { display: flex; flex-direction: column; }
.dealform .card h2 { margin-top: 0; }
.dealform input:disabled, .dealform select:disabled, .dealform textarea:disabled { background: var(--wash); color: var(--ink-2); }
.dealform input:disabled[id$="_amt"] { color: var(--ink); font-weight: 700; }
.dealform .lform { margin-bottom: 4px; }
.dealform .lform .f { justify-content: flex-end; }
.dealform .lform .f[hidden] { display: none; }
.dealform .lform .f.notes { grid-column: 1 / -1; }
.dealform .lform.rows .f.c2a { grid-column: 1 / span 2; }
.dealform .lform.rows .f.c2b { grid-column: 3 / span 2; }
.dealform .lform.rows .f.c1  { grid-column: 1 / span 1; }
.dealform .lform.rows .f.c3  { grid-column: 1 / span 3; }
.dealform .lform.rows .f.c4  { grid-column: 4 / span 1; }
.lform .times .pair { display: flex; align-items: center; gap: 10px; }
.lform .times .pair select { flex: 1; min-width: 0; }
.lform .times .pair span { color: var(--ink-2); font-size: 14px; }
.dealside { position: static; align-self: stretch; }
.dealside > .quote { position: sticky; top: 16px; }
.quote h2 { margin-top: 0; }
.quote.quiet .probs { display: none; }     /* no "fix this" list before the rep has touched anything */
.qt { width: 100%; border-collapse: collapse; font-size: 15px; }
.qt td { padding: 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.qt td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
.qt td .small { display: block; }
.qt .sub td { font-style: italic; color: var(--ink-2); font-size: 14px; }
.qt .tot td { font-weight: 700; }
body.sales .qt .grand td { font-weight: 700; font-size: 20px; line-height: 1.2; border-bottom: 2px solid var(--ink); padding-top: 10px; }
.probs, .warns { margin: 0 0 12px; padding: 10px 14px 10px 30px; border-radius: 4px; font-size: 15px; }
.probs { background: #FBEDEF; border-left: 4px solid var(--accent); }
.warns { background: #FFF7E6; border-left: 4px solid #C88A00; }
.dsec { font: 700 14px/1.2 "Lato", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em;
        margin: 22px 0 8px; padding-top: 10px; border-top: 2px solid var(--ink); }
.dsec:first-child { margin-top: 0; }
.dsec span { font-weight: 300; text-transform: none; letter-spacing: 0; color: var(--ink-2); margin-left: 8px; }
.dsaved { margin: 2px 0 10px; }
.dactions { grid-column: 1 / -1; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 26px 0 6px; }
.dactions .btn { margin: 0; }
.dnote { text-align: center; grid-column: 1 / -1; color: var(--accent); }
.dversions { margin-top: 28px; }
.docs { list-style: none; padding: 0; margin: 0 0 8px; }
.docs li { padding: 10px 0; border-bottom: 1px solid var(--line); }
/* EACH VERSION ITS OWN CARD (Kenyon, 2026-10-16), clearly apart from the next. */
.dversions .docs { display: grid; gap: 12px; }
.dversions .docs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 4px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: 6px; background: #fff; }
.dversions .docs li:first-child { border-left-color: var(--accent); }      /* the newest version */
.dversions .docs li > a:first-child { font-weight: 700; }
.dversions .docs li > a:first-child, .dversions .docs li > span.small { grid-column: 1; }
.dversions .docs li > .pills { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dversions .upform { margin: 10px 0 0; }
.dversions .upform label { cursor: pointer; display: inline-block; }
.sendpill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--accent);
  color: #fff; font: 700 12px/1.2 "Lato", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; white-space: nowrap; }
.sendpill:hover { background: var(--ink); color: #fff; }
.sendpill.sign { background: var(--ink); }
.sendpill.sign:hover { background: var(--accent); }
/* The event, large: its name reads as editable (a dotted line until hovered or typed in). */
.dbig { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin: 0 0 6px; }
.dbig input { font-family: "Lato", system-ui, sans-serif; font-weight: 700; border: 0; border-bottom: 2px dotted #BDBDBD;
  background: transparent; padding: 2px 0; border-radius: 0; color: var(--ink); }
.dbig input:hover:not(:disabled), .dbig input:focus { border-bottom: 2px solid var(--ink); outline: none; }
.dbig input:disabled { border-bottom-color: transparent; }
body.sales .dbig .dbig-name { font-size: 28px; flex: 1 1 320px; min-width: 0; }
.dbig .dbig-date { position: relative; display: inline-block; font: 700 22px/1.2 "Lato", system-ui, sans-serif;
  color: var(--accent); cursor: pointer; border-bottom: 2px dotted #BDBDBD; }
.dbig .dbig-date:hover, .dbig .dbig-date:focus-within { border-bottom: 2px solid var(--ink); }
.dbig .dbig-date input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
/* The total, always in view on a phone or tablet (the numbers card sits below the form). */
.totbar { display: none; }
/* New proposal: the three proposal types. */
.tpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 10px; }
.tpick .tpl { display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.tpick .tpl:hover { border-color: var(--ink); }
.tpick .tpl.likely { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.likely-tag { color: var(--ok); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.tpls { margin-bottom: 8px; }
.tpl { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.tpl input, .lead input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ink); flex: none; }
.tpl span { display: flex; flex-direction: column; }
.tpl:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.leads { max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; margin-top: 10px; }
.lead { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid var(--line);
        cursor: pointer; font-weight: 300 !important; margin: 0 !important; }
.lead > span { display: flex; flex-direction: column; }
.lead:has(input:checked) { background: var(--wash); }
.lead[hidden] { display: none; }
.lead.off { cursor: default; opacity: .75; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.actions .btn { margin-top: 0; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 12px; }
.pair > div { display: flex; flex-direction: column; }

/* The client card atop the builder: the lead's row, folded until tapped. */
.leadref { border: 0; border-top: 1px solid #E4E4E4; border-bottom: 1px solid #E4E4E4; border-radius: 0;
  background: transparent; padding: 0; margin: 4px 0 20px; }
.leadref summary { display: block; padding: 0; position: relative; cursor: pointer; list-style: none; }
.leadref summary::-webkit-details-marker { display: none; }
.leadref summary::after { content: none; }
.leadref .lrrow { padding: 18px 22px; border: 0; cursor: pointer; }
.leadref .lrrow:hover, .leadref[open] .lrrow { background: var(--wash); }
.leadref[open] > :not(summary) { margin-left: 22px; margin-right: 22px; }
.leadref[open] { padding-bottom: 16px; background: var(--wash); }
.leadref .lrform { margin-top: 12px; }
.leadref .replog { margin-top: 18px; }
.leadref .logs { max-height: 200px; }

/* ------------------------------------------------------------------ send / sign */
.review { margin-top: 20px; }
.sendform textarea { font: inherit; }
.signgrid { display: grid; gap: 16px; max-width: 760px; }
.signcard h3 { margin: 0 0 8px; }
.signcard label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 4px; }
.signcard textarea, .signcard .sel { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid #BDBDBD; border-radius: 4px; }
.signbig { font: 700 26px/1.2 "Lato", system-ui, sans-serif; margin: 0 0 4px; }
.signline { font-style: italic; }
.holdlist { margin: 0 0 6px; padding-left: 18px; }
.signstatus { margin: 0 0 18px; border-left: 4px solid var(--ok); }
.signstatus h3 { margin: 0 0 6px; }
.signstatus ul { margin: 0 0 8px; padding-left: 18px; font-size: 14px; }
.signstatus .bad { color: var(--accent); font-weight: 700; }

/* ------------------------------------------------------------------ tablet and phone */
@media (max-width: 1024px) {
  .lform .f.notes { grid-column: 1 / -1; }
  .sstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sfilter .sel { flex-basis: 100%; max-width: none; }          /* search on its own line */
  .srow { grid-template-columns: 56px minmax(0, 1fr) 90px 150px; padding: 16px 14px; }
  .dlist.sentq .srow { grid-template-columns: 56px minmax(0, 1fr) 90px 200px; }
  .qsec.fresh .srow, .srow.fresh, .qsec.qdue .srow { padding-left: 12px; }
  .shead { padding: 8px 14px 2px; }
  .qempty { padding: 12px 14px; }
  .lpanel { padding: 8px 14px 18px; }
  .lform { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leadref .lrrow { padding: 16px 14px; }
  .leadref[open] > :not(summary) { margin-left: 14px; margin-right: 14px; }
}
@media (max-width: 900px) {
  .dealgrid { grid-template-columns: minmax(0, 1fr); }
  .dealside > .quote { position: static; }
  .totbar { display: flex; position: sticky; bottom: 0; z-index: 5; align-items: center; gap: 12px;
    margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: #000; color: #fff; }
  .totbar b { font-size: 20px; }
  .totbar a { margin-left: auto; color: #fff; min-height: 44px; display: inline-flex; align-items: center; }
  .dealform .lform.rows { grid-template-columns: minmax(0, 1fr) 120px; }
  .dealform .lform.rows .f.c2a, .dealform .lform.rows .f.c2b, .dealform .lform.rows .f.c1,
  .dealform .lform.rows .f.c3only { grid-column: 1 / -1; }
  .dealform .lform.rows .f.c3 { grid-column: 1; }
  .dealform .lform.rows .f.c4 { grid-column: 2; }
}
@media (max-width: 640px) {
  /* The tiles two to a row, each number beside its words -- Event Planner's (coord.css). */
  .sstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acctmenu { right: -4px; }
  /* Rows become cards: the name across, details under it, the Done box (or amount) right. */
  .srow, .dlist.sentq .srow { grid-template-columns: 50px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; }
  .srow .linq, .lgroup .shead, .dealsh + .shead { display: none; }
  .desk { display: none; }
  .mob { display: block; }
  .srow.swipe .lmain { display: contents; }
  .srow.swipe .lmain > span:first-child { grid-column: 1 / -1; grid-row: 1; }
  .srow.swipe .lmain > .mob, .srow.swipe .lmain > .tourtag { grid-column: 1; }
  .srow.swipe .lmain > .mob { line-height: 1.6; }      /* tags + date wrap rather than cut off */
  .srow.swipe .lamt { grid-column: 2; grid-row: 2 / span 3; align-self: center; }
  .ctick { flex-direction: column; justify-content: center; gap: 2px; min-width: 52px; min-height: 52px;
           font-size: 11px; letter-spacing: .04em; }
  .ctick input { order: 0; width: 26px; height: 26px; }
  .lamt.withtick { gap: 10px; }
  .tbtn { min-height: 44px; }
  /* The Undo bar: the name on its line; the date box and Undo under it. */
  .undobar .undoright { width: 100%; justify-content: space-between; align-items: flex-end; flex-wrap: nowrap; }
  .undobar .fudate { flex-direction: column; align-items: flex-start; gap: 3px; font-size: 12px; }
  /* The lead card, in the order a rep works after a call: rep log, actions, then the details
     (the rarely-changed ones folded under More details), then the tour. */
  .lpanel-in:not(.onlyform) { display: flex; flex-direction: column; }
  .lpanel-in:not(.onlyform) > .lfollow { order: 0; }
  .lpanel-in:not(.onlyform) > .replog { order: 1; margin-top: 4px; }
  .lpanel-in:not(.onlyform) > .lactions { order: 2; margin: 18px 0 8px; }
  .lpanel-in:not(.onlyform) > .ledit { order: 3; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .lpanel-in:not(.onlyform) > .tourbox { order: 4; }
  .lpanel-in:not(.onlyform) > .lcollapse { order: 5; }
  .lform { grid-template-columns: minmax(0, 1fr); }
  .lform .rare { display: none; }
  .ledit.showmore .lform .rare { display: flex; }
  .ledit.showmore .lform fieldset.rare { display: block; }
  .moretoggle { display: flex; width: 100%; margin: 4px 0 2px; align-items: center; justify-content: center; min-height: 44px;
    background: #fff; border: 1px solid #BDBDBD; border-radius: 4px; font: 700 13px/1 "Lato", system-ui, sans-serif;
    text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); cursor: pointer; }
  .ledit.showmore .moretoggle .when-closed, .moretoggle .when-open { display: none; }
  .ledit.showmore .moretoggle .when-open { display: inline; }
  .tday { grid-template-columns: 1fr; gap: 6px; }
  .tdlabel { padding-top: 0; }
  .dversions .docs li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .dversions .docs li > .pills { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .pair { grid-template-columns: minmax(0, 1fr) 100px; }
  body.sales .dbig .dbig-name { font-size: 24px; }
}

/* THE TOP, AS EVENT PLANNER'S (Kenyon, 2026-10-17): its "Hi, <name>" in its heading type,
   the filters (one "Filter" line on a phone, coord.css .filterbox), its tiles; then search. */
body.sales h1.hi { font-family: "Oswald", Impact, sans-serif; font-weight: 500; text-transform: uppercase;
  letter-spacing: .02em; font-size: 30px; margin: 8px 0 18px; }
.sfilter { margin: 0 0 14px; }
.sfilter .sel { max-width: 520px; }
/* The account menu: a headshot icon; opens to who's signed in and Log out. */
.acct { position: relative; }
.acct > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; display: grid;
  place-items: center; color: var(--ink); border: 1px solid var(--line); background: #fff; }
.acct > summary::-webkit-details-marker { display: none; }
.acct > summary:hover, .acct[open] > summary { border-color: var(--ink); }
.acctmenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 230px; max-width: 80vw;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 6px; }
.acctwho { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; line-height: 1.3; }
.acctwho span { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.acctmenu form { margin: 0; }
.acctout { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; cursor: pointer;
  padding: 0 12px; min-height: 44px; font: 400 16px/1 "Lato", system-ui, sans-serif; color: var(--ink); }
.acctout:hover { background: var(--wash); color: var(--accent); }
body.sales .top-in { flex-wrap: nowrap; }
body.sales .nav { gap: 14px; }
@media (max-width: 640px) { body.sales .cbrand { min-width: 0; } }

/* WHOSE LEAD (Kenyon, 2026-10-17): the owner beside the venue tag. Hunter solid grey,
   Kenyon outlined, Unassigned dashed -- it wants an owner. */
.otag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid #6B6B6B; border-radius: 999px; padding: 0 8px; margin-right: 6px; line-height: 17px;
  vertical-align: 1px; color: #444; background: #fff; white-space: nowrap; }
.otag.o-hunter { background: #555; border-color: #555; color: #fff; }
.otag.o-kenyon { background: #fff; border-color: #111; color: #111; }
.otag.o-none { border-style: dashed; color: #666; font-weight: 700; }
/* The header on a phone: brand, Team and the account icon on one line. */
body.sales .nav a { white-space: nowrap; }
@media (max-width: 640px) {
  body.sales .cb-2 { font-size: 9px; letter-spacing: .12em; }
  body.sales .cb-1 { font-size: 21px; }
}

/* ASSIGN TO, first on a not-contacted-yet lead's card (Kenyon, 2026-10-17). */
.assignbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 12px; padding: 10px 12px;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 6px; }
.assignlab { font: 700 13px/1 "Lato", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.assignbtn { font: 700 14px/1 "Lato", system-ui, sans-serif; min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--ink); border: 1px solid #9A9A9A; }
.assignbtn:hover { border-color: var(--ink); }
.assignbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (max-width: 640px) {
  .lpanel-in:not(.onlyform) > .assignbar { order: -1; }
  .assignbtn { min-height: 44px; flex: 1 1 auto; }
  .assignlab { flex-basis: 100%; }
}

/* The owner tag on its own line under the row's details (Kenyon, 2026-10-17). */
.lmain .ownline { margin-top: 4px; }
.lmain .ownline .otag { margin-right: 0; }
@media (max-width: 640px) { .srow.swipe .lmain > .ownline { grid-column: 1; } }

/* THE CARD, AS EVENT PLANNER'S (Kenyon, 2026-10-17): the big date at the left, the name in
   Event Planner's heading type, the owner in bold among the details. */
.ldate { display: flex; flex-direction: column; align-items: center; align-self: start; text-align: center;
  border-right: 1px solid var(--line); padding-right: 12px; line-height: 1.15; }
.ldate .d { font: 500 30px/1 "Oswald", Impact, sans-serif; }
.ldate .m { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.ldate .w { font-size: 12px; color: var(--ink-2); }
.ldate .y { font-size: 11px; color: var(--ink-2); }
.ldate .nd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); padding-top: 6px; }
.qsec.fresh .ldate, .qsec.qdue .ldate { border-right-color: rgba(0,0,0,.12); }
.lname { font: 500 20px/1.2 "Oswald", Impact, sans-serif; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px;
  overflow-wrap: anywhere; }
.lname a { text-decoration: none; }
.lname a:hover { text-decoration: underline; }
.lmain .own { font-weight: 700; color: var(--ink); }
@media (max-width: 640px) {
  .ldate { padding-right: 10px; }
  .ldate .d { font-size: 24px; }
  .ldate .m { font-size: 12px; }
  .lname { font-size: 18px; }
}
/* CALL, TEXT, EMAIL (Kenyon, 2026-10-17): three small buttons on one line, first on a
   lead's card -- compact, the same size, an icon and a word each. */
.quick { display: flex; gap: 6px; margin: 2px 0 10px; }
.qbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid #BDBDBD; background: #fff; color: var(--ink); text-decoration: none;
  font: 700 14px/1 "Lato", system-ui, sans-serif; }
.qbtn svg { width: 16px; height: 16px; flex: none; color: var(--ok); }
.qbtn:hover { border-color: var(--ink); }
@media (max-width: 640px) {
  .lpanel-in:not(.onlyform) > .quick { order: -1; }
  .qbtn { flex: 1 1 0; min-height: 44px; padding: 0 6px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 640px) {
  /* Event Planner's own phone rule pins .lamt to column 2; on a sales card that's the date. */
  .srow > .ldate { grid-column: 1; grid-row: 1 / span 3; }
  .srow > .lmain { grid-column: 2; grid-row: 1 / span 3; }
  .srow > .lamt { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
}

/* REASSIGN at the very bottom of a lead's card on a phone (Kenyon, 2026-10-17); a computer
   uses the Owner box among the fields. */
.assignbar.reassign { display: none; border-left-color: var(--ink-2); margin-top: 16px; }
@media (max-width: 640px) {
  .assignbar.reassign { display: flex; }
  .lpanel-in:not(.onlyform) > .assignbar.reassign { order: 5; }
  .lpanel-in:not(.onlyform) > .lcollapse { order: 6; }
}