/* Sign Windows follow-up board — Selito house style (selito.co.uk), light only. */

/* Contact types (kinds.py): --k-<key> colours and .tag-/.tile-<key> for every type, Kish's own included. */
@import url("/kinds.css");


:root{
  /* Selito (selito.co.uk, SignWindowsCRM tokens.css), Kish 25 Sep 2026: same font, same small text, same look.
     Token NAMES kept from the Hairline board, so every screen follows from here. */
  --ground:#f4f6f8;
  --lane:#fafbfc;
  --field-bg:#ffffff;
  --field-border:#dde3ea;
  --sunken:#eef2f6;
  --line:#dde3ea;
  --line-strong:#c9d2dc;
  --ink:#1c2530;
  --muted:#5b6b7b;
  --placeholder:#667888;
  --blue:#0170B9;
  --blue-dark:#015a92;
  --blue-tint:#e8f2f9;
  --coral:#c0392b;
  --overdue:#c0392b;
  --overdue-tint:#fbe9e7;
  --panel:#ffffff;
  --ai:#7c3aed; --ai-tint:#f3eefe; --ai-ink:#5b21b6;   /* anything the AI receptionist took */

  /* --k-customer, --k-fitter, --k-supplier, --k-other and any new type: from /kinds.css (see the @import) */

  --choice-rest:#eef2f6; --choice-rest-ink:#5b6b7b;
  --choice-active:#e8f2f9; --choice-active-ink:#015a92;

  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --t-title:22px; --t-form:17px; --t-body:13px; --t-ui:13px; --t-label:13px; --t-chip:12px; --t-meta:11px;
  --w-head:650; --w-button:550;   /* Selito: headings 650, buttons 550 (system font is variable-weight) */

  --r-field:6px; --r-chip:4px; --r:6px; --r-card:10px;
  --h-field:34px; --h-primary:40px;
  --gutter:24px;

  --shadow-button:0 1px 2px rgba(20,40,60,.06),0 1px 3px rgba(20,40,60,.05);
  --shadow-menu:0 6px 24px rgba(20,40,60,.12);
  --backdrop:rgba(14,27,39,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);font-size:var(--t-ui);line-height:1.45;font-synthesis:none;
     color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased;
     display:flex;flex-direction:column;min-height:100vh}
body.has-sheet{overflow:hidden}
[hidden]{display:none !important}
h1,h2,h3{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- Controls ---------- */
.field{height:var(--h-field);width:100%;padding:0 12px;border:1px solid var(--field-border);
       border-radius:var(--r-field);background:var(--field-bg);font-size:var(--t-body);color:var(--ink);min-width:0}
.field::placeholder{color:var(--placeholder)}
.field:focus{outline:2px solid var(--blue);outline-offset:1px}
.field.area{height:auto;min-height:var(--h-field);padding:9px 12px;line-height:1.35;resize:vertical}
.field[aria-invalid="true"]{border-color:var(--overdue);box-shadow:inset 0 0 0 1px var(--overdue)}
select.field{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231c2530' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.field-sm{height:32px;font-size:var(--t-label)}

.label{display:block;font-size:var(--t-meta);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--placeholder);margin:0 0 6px}
.req{color:var(--coral)}
.section-label{display:block;font-size:var(--t-body);font-weight:700;margin:0 0 12px}

.btn{height:var(--h-field);padding:0 13px;border-radius:var(--r);border:0;cursor:pointer;white-space:nowrap;
     font-weight:var(--w-button);font-size:var(--t-ui);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-button)}
.btn-primary:hover{background:var(--blue-dark)}
.btn-quiet{background:var(--panel);color:var(--ink);font-weight:var(--w-button);font-size:var(--t-label);box-shadow:inset 0 0 0 1px var(--line)}
.btn-quiet:hover{background:var(--lane)}
.btn-sm{height:28px;padding:0 9px;font-size:var(--t-chip)}
.btn-form{width:100%;height:var(--h-primary);margin-top:12px}
.btn:not(:disabled):active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.icon-btn{width:40px;height:40px;flex:0 0 40px;border:0;border-radius:var(--r);background:transparent;
          display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.icon-btn:hover{background:var(--sunken)}

.pills,.quick,.outcomes{display:flex;flex-wrap:wrap;gap:6px}
.pill{height:32px;padding:0 12px;border:0;border-radius:var(--r-field);background:var(--choice-rest);
      color:var(--choice-rest-ink);font-size:var(--t-label);font-weight:500;cursor:pointer;
      display:inline-flex;align-items:center;white-space:nowrap}
.pill:hover{color:var(--choice-active-ink)}
.pill[aria-pressed="true"],.pill:has(input:checked){background:var(--choice-active);color:var(--choice-active-ink);font-weight:700}
.pill input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pill:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}

.tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--r-chip);
     color:#fff;font-size:var(--t-chip);font-weight:500;white-space:nowrap}
.tag-customer{background:var(--k-customer,#5C6094)}
.tag-fitter{background:var(--k-fitter,#476988)}
.tag-supplier{background:var(--k-supplier,#EB9174)}
.tag-other{background:var(--k-other,#8162A4)}

/* ---------- Top nav + header search (same look as contacts.css) ---------- */
.topnav{flex-shrink:0;display:flex;align-items:center;gap:6px;min-height:52px;padding:8px var(--gutter);border-bottom:1px solid var(--line);background:var(--panel)}
.topnav-link{height:32px;padding:0 12px;border-radius:var(--r-field);display:inline-flex;align-items:center;
             font-size:var(--t-ui);font-weight:400;color:var(--ink);text-decoration:none}
.topnav-link:hover{background:var(--sunken)}
.topnav-link[aria-current="page"]{background:var(--blue-tint);color:var(--blue-dark);font-weight:700}
.topnav .me{margin-left:auto}
.gsearch{position:relative;flex:0 1 420px;margin-left:16px;min-width:0}
.gsearch-input{width:100%;height:36px;padding:0 12px 0 36px;border:0;border-radius:4px;background:var(--sunken) no-repeat 12px center/16px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23292829' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M13 13l4 4'/%3E%3C/svg%3E");
  font-size:var(--t-label);color:var(--ink)}
.gsearch-input::placeholder{color:var(--placeholder)}
.gsearch-input:focus{outline:2px solid var(--blue);outline-offset:1px}
.gsearch-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:320px;max-height:min(70vh,520px);overflow-y:auto;
             background:#fff;border-radius:10px;box-shadow:var(--shadow-menu);padding:6px;z-index:55}
.gs-group{font-size:var(--t-meta);font-weight:700;padding:10px 10px 4px}
.gs-opt{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 10px;border-radius:var(--r-field);text-decoration:none;color:var(--ink)}
.gs-opt[aria-selected="true"],.gs-opt:hover{background:var(--sunken)}
.gs-main{flex:1;min-width:0;display:flex;flex-direction:column}
.gs-name{font-size:var(--t-label);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-sub{font-size:var(--t-meta);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-meta{font-size:var(--t-meta);color:var(--muted);white-space:nowrap}
.gs-none{padding:14px 10px;font-size:var(--t-label);color:var(--muted)}
.tile{flex:0 0 32px;width:32px;height:32px;border-radius:var(--r-field);color:#fff;font-size:var(--t-chip);font-weight:700;
      display:inline-flex;align-items:center;justify-content:center;letter-spacing:.02em}
.tile-customer{background:var(--k-customer,#5C6094)}
.tile-fitter{background:var(--k-fitter,#476988)}
.tile-supplier{background:var(--k-supplier,#EB9174)}
.tile-other{background:var(--k-other,#8162A4)}

/* ---------- Header ---------- */
.head{flex-shrink:0;padding:24px var(--gutter) 12px}
.head-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.head h1{font-size:var(--t-title);font-weight:var(--w-head);letter-spacing:-.01em;line-height:1.3;margin-right:auto}
.me{display:flex;align-items:center}
.me-btn{border:0;background:transparent;cursor:pointer;font-size:var(--t-label);color:var(--muted);
        padding:6px 8px;border-radius:var(--r-field)}
.me-btn b{font-weight:500;color:var(--ink)}
.me-btn:hover{background:var(--sunken)}
.me-form{display:flex;align-items:center;gap:8px}
.me-form .field{width:170px}
.me-label{font-size:var(--t-label);white-space:nowrap}
.me-form.is-asking .me-label{font-weight:500;color:var(--overdue)}

/* Personal boards: one strip of people on a hairline, like a view strip */
.people-bar{display:flex;align-items:center;gap:12px;margin-top:16px;border-bottom:1px solid var(--line)}
.people{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1}
.people::-webkit-scrollbar{display:none}
.person{height:48px;padding:0 13px;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;
        display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:var(--t-body);color:var(--ink);margin-bottom:-1px}
.person:hover{background:var(--lane)}
.person[aria-pressed="true"]{font-weight:500;border-bottom-color:var(--ink)}
.person-count{font-size:var(--t-meta);color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.person-late{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--overdue);color:#fff;
             font-size:var(--t-meta);font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.mine{flex:0 0 auto}

.tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.tools .search{width:280px;border-radius:4px}

.sortbar{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin-top:12px;font-size:var(--t-chip)}
.sort-label{color:var(--muted)}
.sort{display:flex;gap:2px}
.sort-opt{height:28px;padding:0 10px;border:0;border-radius:var(--r-chip);background:none;cursor:pointer;
          font-size:var(--t-chip);color:var(--muted);white-space:nowrap}
.sort-opt:hover{background:var(--sunken);color:var(--ink)}
.sort-opt[aria-pressed="true"]{background:var(--sunken);color:var(--ink);font-weight:500}
.sort-note{font-size:var(--t-meta);color:var(--muted)}
.sort-archive{margin-left:auto;height:28px;padding:0 10px;border-radius:var(--r-chip);display:inline-flex;align-items:center;
              font-size:var(--t-chip);font-weight:500;color:var(--ink);text-decoration:none}
.sort-archive:hover{background:var(--sunken)}
.lookup{position:relative;display:flex;gap:8px;margin-left:auto}
.lookup .field{width:240px}
.lookup-pop{left:auto;right:0;width:400px;max-width:calc(100vw - 2 * var(--gutter,16px))}
.lookup-pop button.gs-opt{width:100%;border:0;background:none;text-align:left;font:inherit;cursor:pointer}
.lookup-pop .lk-late{color:var(--overdue);font-weight:500}

/* As-you-type matches, on cards and in drop-downs */
mark.hl{background:#FFF1B8;color:inherit;border-radius:2px;padding:0 1px;margin:0 -1px}

/* Call-back dates: every one opens that day in the calendar */
.date-link{color:inherit;text-decoration:none;cursor:pointer}
.date-link:hover{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.cm-due-date{font-variant-numeric:tabular-nums}
.chip-date{font-weight:inherit}

/* ---------- Caller panel ---------- */
.pop{margin:0 var(--gutter) 16px;padding:16px 20px;border:1px solid var(--line-strong);border-radius:var(--r-card);background:#fff}
.pop-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pop-head h2{font-size:var(--t-body);font-weight:var(--w-head,650);margin-right:auto}
.pop-head h2 .num{font-variant-numeric:tabular-nums}
.pop-list{list-style:none;margin:12px 0 0;padding:0}
.pop-list li + li{border-top:1px solid var(--line)}
.pop-row{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:8px 0;border:0;background:transparent;
         text-align:left;cursor:pointer}
.pop-row:hover .pop-name{text-decoration:underline}
.pop-main{flex:1;min-width:0}
.pop-name{font-size:var(--t-body);font-weight:500}
.pop-what{font-size:var(--t-meta);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-status{font-size:var(--t-meta);color:var(--muted);white-space:nowrap}
.pop-row.is-done{opacity:.6}
.pop-sub{font-size:var(--t-label);font-weight:500;margin:16px 0 0}
.pop-contacts .pop-row{text-decoration:none;color:var(--ink)}
.pop-empty{margin:10px 0 0;font-size:var(--t-label);color:var(--muted)}

/* ---------- Board ---------- */
.board{flex:1 0 auto;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(248px,1fr);gap:12px;
       grid-template-columns:repeat(var(--lanes,5),minmax(248px,1fr)) 200px;
       padding:0 var(--gutter) 32px;overflow-x:auto;align-items:stretch;scroll-padding-inline:var(--gutter);
       overscroll-behavior-x:contain}
.lane{background:var(--lane);border:1px solid var(--line);box-shadow:var(--shadow-button);border-radius:var(--r-card);padding:12px;min-height:220px;scroll-snap-align:start;
      display:flex;flex-direction:column}
.lane{position:relative}
.lane-head{display:flex;align-items:center;gap:4px;padding:0 0 8px 4px;min-height:36px;cursor:grab;
           -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.lane-title{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;font-size:var(--t-label);font-weight:500}
.lane-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lane-rename{flex:1;min-width:0;height:32px;font-size:var(--t-label);font-weight:500;cursor:text}
.lane-more{flex:0 0 28px;width:28px;height:28px;border:0;border-radius:var(--r-field);background:transparent;color:var(--muted);
           display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:.55}
.lane-more:hover,.lane-more:focus-visible,.lane-more[aria-expanded="true"],.lane:hover .lane-more{opacity:1}
.lane-more:hover{background:var(--sunken);color:var(--ink)}
.lane-msg{margin:-2px 4px 10px;font-size:var(--t-meta);color:var(--overdue);line-height:1.35}
.lane.is-col-dragging{opacity:.45}
.lane.col-before::before,.lane.col-after::after{content:"";position:absolute;top:0;bottom:0;width:3px;border-radius:2px;background:var(--blue)}
.lane.col-before::before{left:-8px}
.lane.col-after::after{right:-8px}

/* The "+ Add column" ghost tile at the end of the board */
.lane-add{align-self:start;border-radius:var(--r-card)}
.lane-add-btn{width:100%;height:48px;border:1px dashed var(--line-strong);border-radius:var(--r-card);background:transparent;
              font-size:var(--t-label);font-weight:500;color:var(--muted);cursor:pointer;text-align:left;padding:0 16px}
.lane-add-btn:hover{background:var(--lane);color:var(--ink);border-color:#DCD8DD}
.lane-add.is-open{background:var(--lane);padding:14px}
.lane-add-form .label{margin-bottom:7px}
.lane-add-label{margin-top:14px !important}
.lane-add-form .pills{gap:6px}
.lane-add-meta{margin:8px 0 0;font-size:var(--t-meta);color:var(--muted);line-height:1.35}
.lane-err{margin:8px 0 0;font-size:var(--t-meta);color:var(--overdue);line-height:1.35}
.lane-add-actions{display:flex;gap:8px;margin-top:14px}
.board.is-adding{grid-template-columns:repeat(var(--lanes,5),minmax(248px,1fr)) 288px}
.count{font-size:var(--t-meta);font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.cards{display:flex;flex-direction:column;gap:8px;flex:1;min-height:120px}
.lane.is-over{background:#F4F6F8}

.card{background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);padding:12px 14px;cursor:grab;
      display:flex;flex-direction:column;gap:6px;user-select:none;-webkit-user-select:none}
.card:hover{box-shadow:var(--shadow-button);border-color:#DCD8DD}
.card:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.card.is-dragging{opacity:.4}
.board.is-sorted .card{cursor:pointer}
.card-alias{display:block;font-size:var(--t-meta);font-weight:400;color:var(--muted);margin-top:2px}
.card.is-overdue{border-left:3px solid var(--overdue)}
.card-top{display:flex;align-items:center;gap:8px}
.ref{margin-left:auto;font-size:var(--t-meta);color:var(--muted);font-variant-numeric:tabular-nums}
.card-name{font-size:var(--t-body);font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.card-what{font-size:var(--t-label);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* The merge offer: one quiet tinted line under what's needed, saying who this
   looks like and why. Same tint as every other "pick one" on the board. */
.card-offer{display:flex;align-items:center;gap:4px;min-height:24px;padding:2px 4px 2px 8px;
            border-radius:var(--r-chip);background:var(--choice-rest);color:var(--choice-rest-ink);
            font-size:var(--t-meta);line-height:1.3;cursor:default}
.card-offer-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-offer b{font-weight:500;color:var(--choice-active-ink)}
.card-offer-btn{flex:0 0 20px;width:20px;height:20px;padding:0;border:0;border-radius:var(--r-chip);
                background:transparent;color:var(--choice-rest-ink);font:inherit;font-size:var(--t-chip);
                line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.card-offer-btn:hover{background:var(--choice-active);color:var(--choice-active-ink)}
.card-offer-btn:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.card-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--t-chip)}
.tel{color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line-strong)}
.tel:hover{border-bottom-color:var(--ink)}
.due{color:var(--muted);font-variant-numeric:tabular-nums}
.due.is-overdue{color:var(--overdue);font-weight:500}
.card-foot{display:flex;align-items:center;gap:8px;min-height:24px}
.last{flex:1;min-width:0;font-size:var(--t-meta);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who{flex:0 0 24px;width:24px;height:24px;border-radius:var(--r-field);background:var(--sunken);
     font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.drop-marker{height:3px;border-radius:2px;background:var(--blue);margin:-2px 0}

/* ---------- Card modal ----------
   Calm, big sheet: header on one line; left = log a call + call log; right = details,
   one field per row (label column + field), then "From their record" as quiet rows. */
.cm-wrap{position:fixed;inset:0;background:var(--backdrop);z-index:41;display:flex;align-items:center;justify-content:center;
         padding:16px}
.cm{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-menu);width:min(1280px,100%);
    height:92vh;max-height:100%;display:flex;flex-direction:column;overflow:hidden;outline:0}
.cm-head{flex-shrink:0;display:flex;align-items:center;gap:12px 20px;min-height:76px;
         padding:14px 16px 14px 28px;border-bottom:1px solid var(--line)}
.cm-id{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}
.cm-id h2{font-size:var(--t-form);font-weight:var(--w-head,650);line-height:1.15;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:0}
.cm-actions{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.cm-ring{text-decoration:none;font-variant-numeric:tabular-nums}
.cm-ring:hover{background:var(--choice-active)}
.cm-link{font-size:var(--t-label);font-weight:500;color:var(--blue);text-decoration:none;white-space:nowrap}
.cm-link:hover{text-decoration:underline}
.cm-close{margin-left:-4px}
.saved{font-size:var(--t-meta);color:var(--muted)}
.state-chip{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--r-chip);flex:0 0 auto;
            background:var(--choice-active);color:var(--choice-active-ink);font-size:var(--t-chip);font-weight:500;white-space:nowrap}
.state-chip.is-overdue{background:var(--overdue-tint);color:var(--overdue)}
.state-chip.is-archived{background:var(--sunken);color:var(--muted)}
.cm-textbtn{border:0;background:none;padding:6px 4px;cursor:pointer;font-size:var(--t-label);font-weight:500;color:var(--muted);
            border-radius:var(--r-field);white-space:nowrap}
.cm-textbtn:hover{color:var(--ink);background:var(--sunken)}
.cm-restore{color:var(--ink)}
.cm-archived{margin:0 0 20px;padding:12px 14px;border-radius:var(--r);background:var(--lane);font-size:var(--t-label);color:var(--muted)}
/* Shared with the calendar page (call-link / contact-link) */
.call-link{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-ui);font-weight:500;color:var(--ink);
           text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.call-link::before{content:"";flex:0 0 28px;width:28px;height:28px;border-radius:var(--r-field);background:var(--k-fitter) no-repeat center/16px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E")}
.call-link:hover{text-decoration:underline}
.contact-link{font-size:var(--t-label);font-weight:500;color:var(--blue);text-decoration:none;white-space:nowrap}
.contact-link:hover{text-decoration:underline}

.cm-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);grid-template-rows:minmax(0,1fr)}
.cm-left{padding:28px 28px 36px;border-right:1px solid var(--line)}
.cm-right{padding:28px 28px 40px}
.cm-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:0}
.cm-h{display:block;font-size:var(--t-body);font-weight:700;margin:0 0 14px}

/* Log a call */
.cm-log .outcomes{margin-bottom:12px}
.cm-log #logText{display:block;resize:none;min-height:88px}
.cm-then{display:grid;grid-template-columns:108px minmax(0,1fr);gap:12px 0;align-items:center;margin-top:16px}
.cm-then-label{font-size:var(--t-label);color:var(--muted)}
.cm-then #logThen{max-width:280px}
.cm-then #logDue{grid-column:2;max-width:280px}
.cm-then-due{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.cm-book{margin-left:0}
.cm-log .pill{padding:0 10px}
.btn-log{width:100%;height:var(--h-primary);margin-top:20px}
.cm-calls{margin-top:36px}

/* Details: one field per row */
.cm-rows{border-top:1px solid var(--line)}
.cm-row{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;min-height:52px;padding:6px 0;
        border-bottom:1px solid var(--line)}
.cm-row-top{align-items:start}
.cm-row-top .cm-label{padding-top:10px}
.cm-label{font-size:var(--t-label);font-weight:400;color:var(--muted);padding-right:12px}
.cm-row .field{max-width:440px}
.cm-row input[type="datetime-local"].field{padding-right:8px;flex:0 0 210px;width:210px}
.cm-grow{display:block;resize:none;overflow-y:hidden;padding-top:8px;padding-bottom:8px}
.cm-row .cm-grow{max-width:none;resize:none;padding-top:8px;padding-bottom:8px}
.cm-inline{display:flex;align-items:center;gap:12px;min-width:0}
.cm-inline .cm-link{margin-left:auto}
.cm-link.date-link{color:var(--ink);font-weight:400}
.cm-link.date-link:hover{text-decoration:underline;text-underline-offset:2px}

/* From their record: quiet one-line rows */
.cm-rec{margin-top:40px}
.cm-rec .cm-h{color:var(--muted);font-weight:500;font-size:var(--t-label)}
.cm-recfields{margin-bottom:0}
.cm-rfield{min-width:0}
.cm-rfield .field{max-width:440px}
.cm-clash{margin:6px 0 2px;font-size:var(--t-meta);color:var(--overdue);line-height:1.35}
.cm-clash .cm-link{font-size:var(--t-meta)}
.cm-row-link{min-height:36px;padding:0 0 6px}
.cm-addnum{border:0;background:none;padding:0;cursor:pointer;font-size:var(--t-label);font-weight:500;color:var(--blue);justify-self:start}
.cm-addnum:hover{text-decoration:underline}
.cm-about{max-width:none !important;resize:none;overflow:hidden}
.cm-about.has-text{background:#FDF4EC;border-color:#F4D9C6;box-shadow:inset 3px 0 0 var(--k-supplier)}
.cm-recinfo .cm-rrow:first-child{border-top:0}
.cm-rrow{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:baseline;min-height:44px;padding:12px 0;
         border-bottom:1px solid var(--line);font-size:var(--t-label);line-height:1.35}
.cm-rrow:first-of-type{border-top:1px solid var(--line)}
.cm-rval{min-width:0;overflow-wrap:anywhere}
.cm-one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-alert{display:flex;gap:10px;padding:10px 12px;border-radius:var(--r);background:#FDF4EC;
          border-left:3px solid var(--k-supplier);line-height:1.35;overflow-wrap:anywhere}
.cm-alert::before{content:"!";flex:0 0 20px;width:20px;height:20px;border-radius:10px;background:var(--k-supplier);color:#fff;
                  font-size:var(--t-ui);font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-top:-1px}
.cm-others{list-style:none;margin:0;padding:0}
.cm-others li + li{margin-top:6px}
.cm-other{display:flex;align-items:baseline;gap:8px;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;
          color:var(--ink);font-size:var(--t-label);min-width:0}
.cm-other:hover .cm-other-what{text-decoration:underline}
.cm-other-what{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-other-meta{flex:0 0 auto;font-size:var(--t-meta);color:var(--muted);white-space:nowrap}
.cm-other-meta.is-overdue{color:var(--overdue);font-weight:500}
.cm-sum{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.cm-sum.is-open{display:block;-webkit-line-clamp:unset}
.cm-sum.is-loading{color:var(--muted)}
.cm-more{border:0;background:none;padding:0;margin-top:4px;cursor:pointer;font-size:var(--t-label);font-weight:500;color:var(--blue)}
.cm-more:hover{text-decoration:underline}

/* Log box: still used by the contact page (contact.html) */
.log-box{flex-shrink:0;background:var(--lane);border-radius:var(--r-card);padding:16px}
.log-box .section-label{margin-bottom:10px}
.log-box .outcomes{margin-bottom:10px}
.log-box .outcomes .pill{background:#fff}
.log-box .outcomes .pill:hover{background:var(--choice-active)}

.dgrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px 12px}
.dgrid input[type="datetime-local"].field{padding-right:8px}
.df{min-width:0}
.df-wide{grid-column:1 / -1}
.df .area{display:block}

.log{list-style:none;margin:0;padding:0}
.log li{padding:10px 0;border-top:1px solid var(--line)}
.log li:first-child{border-top:0;padding-top:0}
.log-meta{font-size:var(--t-meta);color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:3px}
.log-body{font-size:var(--t-label);white-space:pre-wrap;overflow-wrap:anywhere}
.log li.is-system .log-body{color:var(--muted)}
.log-empty{font-size:var(--t-label);color:var(--muted);margin:0}

/* From their record */
.rec{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.rec-title{font-size:var(--t-label);font-weight:500;margin:0 0 12px}
.rec-addr{font-size:var(--t-label);line-height:1.35;margin:0 0 4px}
.rec-job{font-size:var(--t-meta);color:var(--muted);margin:0 0 12px;line-height:1.35}
.rec-alert{display:flex;gap:10px;margin:12px 0;padding:10px 12px;border-radius:var(--r);background:#FDF4EC;
           border-left:3px solid var(--k-supplier);font-size:var(--t-label);line-height:1.35;overflow-wrap:anywhere}
.rec-alert::before{content:"!";flex:0 0 20px;width:20px;height:20px;border-radius:10px;background:var(--k-supplier);color:#fff;
                   font-size:var(--t-ui);font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.rec-sub{font-size:var(--t-meta);font-weight:700;margin:16px 0 4px}
.rec-list{list-style:none;margin:0;padding:0}
.rec-list li + li{border-top:1px solid var(--line)}
.rec-row{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 0;border:0;background:none;
         text-align:left;cursor:pointer;color:var(--ink)}
.rec-row:hover .rec-what{text-decoration:underline}
.rec-main{flex:1;min-width:0}
.rec-what{font-size:var(--t-label);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-meta{font-size:var(--t-meta);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-meta .is-overdue{color:var(--overdue);font-weight:500}
.rec-files{display:inline-block;margin-top:14px;font-size:var(--t-label);font-weight:500;color:var(--blue);text-decoration:none}
.rec-files:hover{text-decoration:underline}
.rec-ai{margin-top:16px;padding:12px 14px;border-radius:var(--r);background:var(--lane)}
.rec-ai-head{font-size:var(--t-meta);font-weight:700;margin-bottom:6px}
.rec-ai-body{font-size:var(--t-label);line-height:1.4;white-space:pre-line;overflow-wrap:anywhere}
.rec-ai-body p{margin:0}
.rec-ai-body p + p{margin-top:8px}
.rec-ai-body.is-loading{color:var(--muted);font-size:var(--t-meta)}

/* ---------- New follow-up dialog ---------- */
.modal-wrap{position:fixed;inset:0;background:var(--backdrop);z-index:52;display:flex;align-items:flex-start;justify-content:center;
            padding:48px 16px;overflow-y:auto}
.modal{background:#fff;border-radius:var(--r-card);width:min(600px,100%);padding:24px 28px 28px;box-shadow:var(--shadow-menu)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-head h2{font-size:var(--t-form);font-weight:var(--w-head,650)}
.modal form > .label{margin-top:18px}
.modal-head + .label{margin-top:0}
.modal .quick{margin-top:8px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}

/* ---------- Toasts ---------- */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;
        align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.toast{background:var(--ink);color:#fff;font-size:var(--t-label);padding:12px 16px;border-radius:var(--r);box-shadow:var(--shadow-menu);
       pointer-events:auto;display:flex;align-items:center;gap:8px}
.toast-dot{opacity:.6}
.toast-act{border:0;background:none;color:#fff;font-size:var(--t-label);font-weight:700;padding:0;cursor:pointer;text-decoration:underline;
           text-underline-offset:3px}
.toast-act:hover{text-decoration-thickness:2px}

/* ---------- Menu: right-click, long-press and the ⋯ on a column heading ---------- */
.menu{position:fixed;z-index:56;background:#fff;border-radius:10px;box-shadow:var(--shadow-menu);padding:6px 0;
      min-width:208px;max-width:min(320px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow-y:auto;outline:0}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 16px;border:0;background:none;
           text-align:left;font-size:var(--t-label);font-weight:500;color:var(--ink);cursor:pointer;line-height:1.25}
.menu-item:hover,.menu-item:focus{background:var(--lane);outline:0}
.menu-item:focus-visible{background:var(--sunken)}
.menu-item[aria-disabled="true"]{color:#8B868D;cursor:default}
.menu-item[aria-disabled="true"]:hover{background:none}
.menu-item.is-back{color:var(--muted)}
.menu-text{flex:1;min-width:0;display:flex;flex-direction:column}
.menu-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-reason{font-size:var(--t-meta);font-weight:400;color:var(--muted);white-space:normal;margin-top:1px}
.menu-check{flex:0 0 14px;width:14px;font-size:var(--t-chip);color:var(--ink)}
.menu-arrow{flex:0 0 auto;font-size:var(--t-form);line-height:1;color:var(--muted);margin-right:-4px}
.menu-item[aria-expanded="true"]{background:var(--lane)}
.menu-sep{height:1px;background:var(--line);margin:6px 0}

/* Small confirm next to a heading ("Archive 4 cards from Done?") */
.confirm-pop{position:fixed;z-index:57;width:min(300px,calc(100vw - 16px));background:#fff;border-radius:10px;
             box-shadow:var(--shadow-menu);padding:16px}
.confirm-title{margin:0;font-size:var(--t-label);font-weight:500;line-height:1.3}
.confirm-meta{margin:4px 0 0;font-size:var(--t-meta);color:var(--muted)}
.confirm-actions{display:flex;gap:8px;margin-top:14px}
.toast.is-error{background:var(--overdue)}

/* ---------- Narrow screens ---------- */
@media (max-width:760px){
  .cm-wrap{padding:0;align-items:stretch}
  .cm{width:100%;height:100%;max-height:none;border-radius:0}
  .cm-head{flex-wrap:wrap;padding:10px 8px 12px 16px;gap:8px 12px;min-height:0}
  .cm-id{flex:1 1 calc(100% - 56px);flex-wrap:wrap;gap:6px 10px}
  .cm-id h2{white-space:normal;flex:1 1 100%;order:2}
  .cm-actions{display:contents}
  .cm-close{order:1;margin-left:auto;align-self:flex-start}
  .cm-head .saved{order:4}
  .cm-ring{order:2}
  .cm-head .cm-link{order:3}
  .cm-body{display:block;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .cm-left{padding:20px 16px 8px;border-right:0}
  .cm-scroll{overflow:visible}
  .cm-calls{margin-top:28px}
  .cm-right{padding:20px 16px 40px;border-top:1px solid var(--line)}
  .cm-row,.cm-rrow{grid-template-columns:104px minmax(0,1fr)}
  .cm-row input[type="datetime-local"].field{flex:1 1 200px;width:auto}
  .cm-head .cm-textbtn{order:3}
  .cm-then{grid-template-columns:104px minmax(0,1fr)}
  .cm-inline{flex-wrap:wrap;gap:6px 12px}
  .cm-inline .cm-link{margin-left:0}
  .dgrid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .lookup{margin-left:0}
}
@media (max-width:640px){
  :root{--gutter:16px}
  .head{padding-top:18px}
  .head h1{font-size:var(--t-form)}
  .head-top{gap:8px 12px}
  .topnav{flex-wrap:wrap;gap:6px}
  .gsearch{order:5;flex:1 1 100%;margin:4px 0 0}
  .gsearch-pop{min-width:0}
  .me-form .field{width:140px}
  .people-bar{gap:8px}
  .person{padding:0 10px}
  .tools{gap:10px;margin-top:14px}
  .tools .search{width:100%}
  .pills{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .lookup{flex:1 1 100%}
  .lookup .field{flex:1;width:auto}
  .lookup-pop{left:0;right:0;width:auto;max-width:none}
  .board{grid-auto-columns:min(84vw,320px);grid-template-columns:repeat(var(--lanes,5),min(84vw,320px)) min(84vw,320px);
         scroll-snap-type:x mandatory}
  .board.is-adding{grid-template-columns:repeat(var(--lanes,5),min(84vw,320px)) min(84vw,320px)}
  .lane-add{scroll-snap-align:start}
  .lane-more{opacity:1}
  .cm-then #logThen,.cm-then #logDue{max-width:none}
  .modal-wrap{padding:0}
  .modal{border-radius:0;min-height:100%;padding:16px 16px 32px}
  .two{grid-template-columns:1fr}
  .pop{padding:12px 16px}
  .pop-row{flex-wrap:wrap;gap:4px 10px}
  .pop-status{flex-basis:100%}
}

/* ---------- Embed: /?card=<id>&embed=1 shows only the card modal, over the page that framed it ---------- */
html:has(body.is-embed),body.is-embed{background:transparent}
body.is-embed > .topnav,body.is-embed > .head,body.is-embed > .pop,body.is-embed > .board{display:none !important}
body.is-embed .cm-wrap{background:transparent}   /* the framing page draws the dim backdrop */
.card,.board{-webkit-touch-callout:none}
@media (max-width:640px){.topnav{gap:2px}.topnav-link{padding:0 8px}}

/* AI receptionist: its cards, calls and leads are purple (jobsin.py /api/ai-call) */
.card.is-ai{border-left:3px solid var(--ai);background:linear-gradient(90deg,var(--ai-tint),var(--panel) 60%)}
.ai-badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--ai-tint);
  color:var(--ai-ink);font-size:var(--t-meta);font-weight:700;white-space:nowrap}