/* ==========================================================================
   ADDAM CRM
   The CRM's one stylesheet: tokens, base, and every screen. It stands alone —
   nothing is borrowed from the public website, which is a separate
   application on a separate host.

   No build step: this file is served as written.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  color-scheme:light;
  --white:#ffffff;
  --bg:#ffffff;
  --paper:#ffffff;
  --tint:#faf5fe;
  --tint-2:#f4e9fc;
  --ink:#140a19;
  --ink-2:#3d2d46;
  --muted:#6f6178;
  --line:#ece3f2;
  --line-2:#dcc9e9;
  --brand:#cb39ff;
  --brand-ink:#8e12c4;
  --brand-deep:#520b70;
  --wash:rgba(203,57,255,.07);
  --wash-2:rgba(203,57,255,.16);
  --shadow-s:0 1px 2px rgba(20,10,25,.04),0 4px 14px -8px rgba(82,11,112,.18);
  --shadow-m:0 2px 4px rgba(20,10,25,.04),0 22px 48px -26px rgba(82,11,112,.34);
  --shadow-l:0 4px 8px rgba(20,10,25,.05),0 40px 80px -36px rgba(82,11,112,.42);
  --f-display:"Josefin Sans","Century Gothic",system-ui,sans-serif;
  --f-body:"Josefin Sans","Century Gothic",system-ui,sans-serif;
  --f-mono:"Josefin Sans","Century Gothic",system-ui,sans-serif;
  --r:6px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --cb:cubic-bezier(.16,1,.3,1);
}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:18px;font-weight:400;line-height:1.66;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.14;letter-spacing:-.005em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px}

/* ------------------------------------------------------------ sign-in pages

   Sign in, forgotten password, reset and confirm: one card on the page. */
.db-gate{min-height:100dvh;display:grid;place-items:center;padding:clamp(24px,6vw,60px);background:var(--tint)}
.db-card{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--shadow-m)}
.db-card h3{font-size:22px;margin-bottom:8px}
.db-card .hint{font-size:13.5px;color:var(--muted);margin-bottom:20px;line-height:1.5}
.db-card .hint a{color:var(--brand-ink);font-weight:600}
.db-f{display:flex;flex-direction:column;gap:7px;min-width:0;margin-bottom:16px}
.db-f label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.db-f input{padding:11px 13px;border:1px solid var(--line-2);border-radius:8px;font-size:15px;background:var(--paper);width:100%}
.db-f input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--wash-2)}
.db-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.db-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:8px;border:1px solid var(--brand);
  background:var(--brand);color:#fff;font-weight:700;font-size:14.5px;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease)}
.db-btn:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.db-btn.ghost{background:var(--paper);color:var(--ink-2);border-color:var(--line-2)}
.db-btn.ghost:hover{background:var(--wash);color:var(--brand-ink);border-color:var(--brand)}
.db-note{font-size:13px;color:var(--muted);line-height:1.55;margin:-8px 0 16px}
.db-note b{color:var(--ink-2)}

/* ---------------------------------------------------------------- type

   Plus Jakarta Sans throughout: a geometric-humanist face drawn for screens,
   with a full weight range (so bolds are real, not synthesised), tabular
   figures for the money columns, and a width close to what these screens
   were laid out for. Loaded from Google Fonts in the layout. */
:root{
  --crm-font:"Plus Jakarta Sans","Josefin Sans","Century Gothic",system-ui,sans-serif;
  --f-display:var(--crm-font);
  --f-body:var(--crm-font);
  --f-mono:var(--crm-font);
}

.crm{letter-spacing:-.005em;font-feature-settings:"cv11","ss01"}
.crm .crm-table{font-size:13.5px;font-variant-numeric:tabular-nums}
.crm .crm-nav a,.crm .crm-nav summary{font-size:14px;font-weight:500}
.crm h1,.crm h2,.crm h3{font-weight:700}

/* ------------------------------------------------------------ the palette

   Light is the tokens above. Dark is below, written twice on purpose: once for
   somebody who has chosen it, and once for somebody whose system asks for it
   and who has not chosen anything. CSS cannot group a selector with a media
   query, so the two lists have to be kept in step by hand.

   The theme is written onto <html> by the server from a cookie, so a reload
   never flashes the wrong palette — there is no inline script to set it early,
   because the Content-Security-Policy forbids one. */

:root[data-theme="dark"]{
  color-scheme:dark;
  --white:#151019;
  --bg:#120e16;
  --paper:#1c1522;
  --tint:#120e16;
  --tint-2:#251b2d;
  --ink:#f4eef8;
  --ink-2:#d8cade;
  --muted:#a496ad;
  --line:#2f2439;
  --line-2:#40314c;
  --brand:#cb39ff;
  --brand-ink:#dd93ff;
  --brand-deep:#1d0a28;
  --wash:rgba(203,57,255,.13);
  --wash-2:rgba(203,57,255,.24);
  --shadow-s:0 1px 2px rgba(0,0,0,.44),0 4px 14px -8px rgba(0,0,0,.6);
  --shadow-m:0 2px 4px rgba(0,0,0,.44),0 22px 48px -26px rgba(0,0,0,.72);
  --shadow-l:0 4px 8px rgba(0,0,0,.5),0 40px 80px -36px rgba(0,0,0,.8);
  --crm-won:#4ac97a;
  --crm-lost:#ff7a7a;
  --crm-warn:#e9b45c;
  --crm-info:#4cc4dd;
  --crm-inset:#241c2b;
  --crm-won-wash:#13301f;
  --crm-lost-wash:#3a1b1e;
  --crm-warn-wash:#332614;
  --crm-won-line:#2c6040;
  --crm-lost-line:#6d3236;
  --crm-warn-line:#6a5327;
  --crm-stage-1:#c07ae8;
  --crm-stage-5:#8b30c2;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --white:#151019;
    --bg:#120e16;
    --paper:#1c1522;
    --tint:#120e16;
    --tint-2:#251b2d;
    --ink:#f4eef8;
    --ink-2:#d8cade;
    --muted:#a496ad;
    --line:#2f2439;
    --line-2:#40314c;
    --brand:#cb39ff;
    --brand-ink:#dd93ff;
    --brand-deep:#1d0a28;
    --wash:rgba(203,57,255,.13);
    --wash-2:rgba(203,57,255,.24);
    --shadow-s:0 1px 2px rgba(0,0,0,.44),0 4px 14px -8px rgba(0,0,0,.6);
    --shadow-m:0 2px 4px rgba(0,0,0,.44),0 22px 48px -26px rgba(0,0,0,.72);
    --shadow-l:0 4px 8px rgba(0,0,0,.5),0 40px 80px -36px rgba(0,0,0,.8);
    --crm-won:#4ac97a;
    --crm-lost:#ff7a7a;
    --crm-warn:#e9b45c;
    --crm-info:#4cc4dd;
    --crm-inset:#241c2b;
    --crm-won-wash:#13301f;
    --crm-lost-wash:#3a1b1e;
    --crm-warn-wash:#332614;
    --crm-won-line:#2c6040;
    --crm-lost-line:#6d3236;
    --crm-warn-line:#6a5327;
    --crm-stage-1:#c07ae8;
    --crm-stage-5:#8b30c2;
  }
}

:root{
  --crm-side:248px;
  --crm-head:64px;
  --crm-gap:18px;
  --crm-r:10px;
  /* The five open pipeline stages, darkening as a lead advances. Generated
     from the brand hue and checked for monotonic lightness and 3:1 contrast
     on white — see CrmLookupSeeder for why they are not seven hues. */
  --crm-stage-1:#a855d6;
  --crm-stage-5:#520b70;
  /* Won, lost, warning and info. These were once written as var() of
     themselves, which CSS treats as invalid, so in light mode the colours
     silently fell back to nothing. Each clears 4.5:1 on white. */
  --crm-won:#15803d;
  --crm-lost:#c02626;
  --crm-warn:#a16207;
  --crm-info:#0e7490;
  /* A surface a shade off the card, for insets and chequerboards. */
  --crm-inset:#f0eef3;
  /* Tinted surfaces for the three states a banner or a row can be in. */
  --crm-won-wash:#f2f9f4;
  --crm-lost-wash:#fdf3f3;
  --crm-warn-wash:#fdf8ee;
  --crm-won-line:#bcd9c4;
  --crm-lost-line:#e9b9b9;
  --crm-warn-line:#e6d2a8;
}

/* --------------------------------------------------------------- reset
   A few bare elements need taming inside the app shell: section and main
   padding, table cell borders, heading wrap. Scoped to .crm and neutralised
   here; class names below are prefixed so nothing collides. */
.crm section{padding-block:0}
.crm main{padding:var(--crm-gap)}
.crm th,.crm td{border-bottom:0}
.crm h1,.crm h2,.crm h3{letter-spacing:-.01em;text-wrap:initial}
.crm svg{display:block}

/* ------------------------------------------------------------------ shell */

.crm{min-height:100dvh;background:var(--tint);color:var(--ink);font-family:var(--f-body)}

.crm-layout{display:grid;grid-template-columns:var(--crm-side) 1fr;min-height:100dvh}

.crm-side{
  position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;
  background:var(--brand-deep);color:#fff;padding:18px 14px;overflow-y:auto;
  scrollbar-width:thin;
}
.crm-side::-webkit-scrollbar{width:6px}
.crm-side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}

.crm-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 16px}
.crm-brand img{height:26px;width:auto}
.crm-brand span{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);font-weight:600;
}

.crm-nav{display:flex;flex-direction:column;gap:1px;flex:1}
.crm-nav a{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;
  color:rgba(255,255,255,.82);text-decoration:none;font-size:14.5px;line-height:1.2;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.crm-nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.crm-nav a[aria-current="page"]{background:rgba(255,255,255,.15);color:#fff;font-weight:600}
.crm-nav a svg{width:17px;height:17px;flex:none;opacity:.85}
.crm-nav a .count{
  margin-left:auto;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;
  background:rgba(255,255,255,.16);
}

/* Collapsible sections.
   <details>/<summary> rather than a div and a click handler: it opens with the
   keyboard, it is announced as a disclosure, and it works with no JavaScript at
   all. The script only remembers which ones were left open. */
.crm-nav summary{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;
  color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.2;cursor:pointer;
  list-style:none;-webkit-user-select:none;user-select:none;
  transition:background .16s var(--ease),color .16s var(--ease);
}
/* Both spellings: Safari still wants the -webkit- pseudo-element. */
.crm-nav summary::-webkit-details-marker{display:none}
.crm-nav summary::marker{content:""}
.crm-nav summary:hover{background:rgba(255,255,255,.09);color:#fff}
.crm-nav summary:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:-2px}
.crm-nav summary svg{width:17px;height:17px;flex:none;opacity:.85}
.crm-nav summary .count{
  margin-left:auto;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;
  background:rgba(255,255,255,.16);
}
.crm-nav summary .chev{width:14px;height:14px;margin-left:auto;opacity:.55;transition:transform .16s var(--ease)}
/* Where a count is present it takes the free space, so the chevron sits after
   it rather than wandering to the middle of the row. */
.crm-nav summary .count + .chev{margin-left:6px}
.crm-nav details[open] > summary .chev{transform:rotate(180deg)}
/* The section containing the current page reads as current even when the child
   link is the thing highlighted. */
.crm-nav details.is-here > summary{color:#fff;font-weight:600}

.crm-nav .crm-navsub{
  display:flex;flex-direction:column;gap:1px;
  margin:2px 0 6px 13px;padding-left:12px;
  border-left:1px solid rgba(255,255,255,.15);
}
.crm-nav .crm-navsub a{font-size:13.5px;padding:7px 10px}
.crm-nav .crm-navsub a svg{width:15px;height:15px}

.crm-side-foot{border-top:1px solid rgba(255,255,255,.14);margin-top:12px;padding-top:12px}
.crm-side-foot a,.crm-side-foot button{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  color:rgba(255,255,255,.66);font:inherit;font-size:13px;padding:6px 10px;
  border-radius:6px;text-decoration:none;
}
.crm-side-foot a:hover,.crm-side-foot button:hover{background:rgba(255,255,255,.09);color:#fff}

/* The theme choice: Light, Dark or System, as a three-way segmented control
   in the footer. System follows the operating system and is the default. */
.crm-theme{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;margin:0 0 8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:9px}
.crm-side-foot .crm-theme button{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 4px;font-size:11px;font-weight:500;text-align:center;border-radius:6px;
  color:rgba(255,255,255,.6)}
.crm-theme svg{width:15px;height:15px;flex:none}
.crm-side-foot .crm-theme button[aria-checked="true"]{background:rgba(255,255,255,.16);color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25)}
.crm-theme-label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.45);padding:2px 10px 6px}

/* ------------------------------------------------------------------- head */

.crm-main{min-width:0;display:flex;flex-direction:column}

.crm-head{
  position:sticky;top:0;z-index:20;height:var(--crm-head);
  display:flex;align-items:center;gap:14px;padding:0 var(--crm-gap);
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.crm-head h1{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em}
.crm-head .h-sub{margin:0;font-size:12.5px;color:var(--muted)}
.crm-head .spacer{flex:1}

.crm-burger{
  display:none;width:38px;height:38px;border:1px solid var(--line);background:var(--paper);
  border-radius:8px;cursor:pointer;place-items:center;color:var(--ink);
}

/* The account menu, top right: name and avatar open a small panel with the
   profile, the password and Sign out. */
.crm-who{position:relative;font-size:13px;color:var(--muted)}
.crm-who > summary{
  display:flex;align-items:center;gap:9px;list-style:none;cursor:pointer;
  padding:4px 6px 4px 10px;border-radius:99px;border:1px solid transparent;
  transition:background .15s var(--ease),border-color .15s var(--ease);
}
.crm-who > summary::-webkit-details-marker{display:none}
.crm-who > summary:hover,.crm-who[open] > summary{background:var(--paper);border-color:var(--line)}
.crm-who > summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.crm-who b{color:var(--ink);font-weight:600}
.crm-who .chev{width:14px;height:14px;flex:none;transition:transform .15s var(--ease)}
.crm-who[open] .chev{transform:rotate(180deg)}
.crm-usermenu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:260px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-l);padding:6px;
}
.crm-usermenu .u-head{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;
  border-bottom:1px solid var(--line);margin-bottom:6px}
.crm-usermenu .u-head div{min-width:0}
.crm-usermenu .u-head b{display:block;font-size:14px}
.crm-usermenu .u-head span:not(.crm-avatar){display:block;font-size:12px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-usermenu a,.crm-usermenu button{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;
  background:none;border:0;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);
  text-decoration:none;cursor:pointer;text-align:left;
}
.crm-usermenu a:hover,.crm-usermenu button:hover{background:var(--wash)}
.crm-usermenu svg{width:16px;height:16px;flex:none;color:var(--muted)}
.crm-usermenu form{margin:6px 0 0;padding-top:6px;border-top:1px solid var(--line)}
.crm-usermenu .u-out,.crm-usermenu .u-out svg{color:var(--crm-lost)}
.crm-avatar{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--wash-2);color:var(--brand-ink);font-weight:700;font-size:12.5px;
}

.crm-body{padding:var(--crm-gap);display:flex;flex-direction:column;gap:var(--crm-gap)}

/* ------------------------------------------------------------------ cards */

.crm-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--crm-r);
  box-shadow:var(--shadow-s);
}
.crm-card > header{
  display:flex;align-items:baseline;gap:4px 10px;padding:14px 16px 0;flex-wrap:wrap;
}
.crm-card > header h2{margin:0;font-size:14px;font-weight:600;letter-spacing:-.005em}
/* Not scoped to the header: the same aside voice is used inside cards too,
   where it was rendering at body size and reading like a heading. */
.crm .c-hint{margin:0;font-size:12px;color:var(--muted);line-height:1.45}
.crm-card > header .spacer{flex:1}
.crm-card .pad{padding:14px 16px}

/* --------------------------------------------------------------- kpi tiles */

.crm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.crm-kpi{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--crm-r);
  padding:14px 15px;box-shadow:var(--shadow-s);
}
.crm-kpi .k-label{
  margin:0 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
/* Tabular figures so a column of numbers lines up on the digit, not the glyph. */
.crm-kpi .k-value{
  margin:0;font-size:29px;line-height:1.05;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.crm-kpi .k-note{margin:6px 0 0;font-size:12px;color:var(--muted)}

/* ----------------------------------------------------------------- charts */

/* Charts are HTML, not SVG.
   An SVG scaled to its container scales its text with it: a 640-unit viewBox
   in a 330px column renders an 11px label at under 6px, which is unreadable
   on the phone §37 says this has to work on. Bars are boxes and boxes are
   something CSS already draws, so the only thing SVG was buying here was the
   text problem. */

.crm-cols{position:relative;padding:16px 0 0 26px}
.crm-cols .rule{position:absolute;left:26px;right:0;border-top:1px solid var(--line)}
.crm-cols .rule span{
  position:absolute;left:-26px;top:-7px;width:20px;text-align:right;
  font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;
}
.crm-cols-track{
  position:relative;display:flex;align-items:flex-end;gap:2px;
  height:150px;margin:0;padding:0;list-style:none;
}
.crm-cols-track li{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  height:100%;position:relative;cursor:default;
}
.crm-cols-track .col{
  display:block;width:min(30px,84%);
  background:var(--brand-ink);
  /* Rounded head, square foot: anchored to the baseline. */
  border-radius:4px 4px 0 0;transition:opacity .14s var(--ease);
}
.crm-cols-track li:hover .col,.crm-cols-track li:focus-visible .col{opacity:.72}
.crm-cols-track .v{
  font-size:11.5px;font-weight:600;color:var(--ink);margin-bottom:3px;
  font-variant-numeric:tabular-nums;
}
.crm-cols-months{
  display:flex;gap:2px;margin:7px 0 0;padding:0 0 0 26px;list-style:none;
}
.crm-cols-months li{flex:1;text-align:center;font-size:11px;color:var(--muted)}

/* A ranked list. Horizontal because the labels are words: a category name
   reads along a row and would have to be rotated above a column. */
.crm-ranks{list-style:none;margin:0;padding:0}
.crm-ranks li{display:flex;align-items:center;gap:10px;padding:7px 0}
.crm-ranks li + li{border-top:1px solid var(--line)}
.crm-ranks .name{
  font-size:13px;min-width:118px;max-width:118px;flex:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* No opacity here: the fill is a child and would inherit the fade, which is
   why this bar looked washed out beside the columns. */
.crm-ranks .track{flex:1;height:13px;background:var(--tint-2);border-radius:999px}
.crm-ranks .fill{
  display:block;height:100%;background:var(--brand-ink);border-radius:999px;min-width:3px;
}
.crm-ranks .n{
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  min-width:26px;text-align:right;
}

/* start, not stretch: a short card should end where its content ends rather
   than grow a field of white to match a taller neighbour. */
.crm-charts{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--crm-gap);align-items:start}
.crm-charts-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--crm-gap);align-items:start}

.crm-chart{display:block;width:100%;height:auto;overflow:visible}
/* Recessive: the data is the subject, the scaffolding is not. */
.crm-chart .c-grid line{stroke:var(--line);stroke-width:1}
.crm-chart .axis{fill:var(--muted);font-size:11px;font-family:var(--f-body)}
.crm-chart .val{fill:var(--ink);font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.crm-chart .bar{transition:opacity .14s var(--ease)}
.crm-chart:hover .bar{opacity:.5}
.crm-chart .bar:hover{opacity:1}
.crm-chart .hit{fill:transparent;cursor:pointer}

.crm-chart-empty{
  display:grid;place-items:center;min-height:150px;color:var(--muted);
  font-size:13px;text-align:center;padding:20px;
}

/* One tooltip element, moved about — not one per mark. */
.crm-tip{
  position:fixed;z-index:60;pointer-events:none;opacity:0;transform:translateY(3px);
  background:var(--ink);color:#fff;border-radius:7px;padding:7px 10px;
  font-size:12.5px;line-height:1.35;box-shadow:var(--shadow-m);max-width:220px;
  transition:opacity .12s var(--ease),transform .12s var(--ease);
}
.crm-tip.on{opacity:1;transform:translateY(0)}
.crm-tip b{display:block;font-weight:600}
.crm-tip span{color:rgba(255,255,255,.72)}

/* --------------------------------------------------------------- pipeline */

.crm-stage{display:flex;align-items:center;gap:10px;padding:7px 0}
.crm-stage + .crm-stage{border-top:1px solid var(--line)}
.crm-stage .name{font-size:13px;min-width:132px;flex:none}
.crm-stage .track{flex:1;height:9px;background:var(--tint-2);border-radius:999px;overflow:hidden}
.crm-stage .fill{display:block;height:100%;border-radius:999px;min-width:2px}
.crm-stage .n{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;min-width:26px;text-align:right}

/* ---------------------------------------------------------------- badges */

.crm-badge{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;line-height:1.6;white-space:nowrap;
  border:1px solid currentColor;
}
.crm-badge .b-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
/* Won and lost are red against green: the glyph, not the hue, is what a
   colourblind reader actually reads. */
.crm-badge .glyph{font-weight:700;font-size:12px}

.crm-chip{
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:5px;
  background:var(--tint-2);color:var(--brand-deep);font-size:11.5px;font-weight:600;
}

/* ---------------------------------------------------------------- tables */

.crm-table{width:100%;border-collapse:collapse;font-size:13.5px}
.crm-table th{
  text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:0 12px 9px;white-space:nowrap;
}
.crm-table td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:middle}
.crm-table tbody tr:hover{background:var(--tint)}
.crm-table a{color:var(--brand-ink);text-decoration:none;font-weight:600}
.crm-table a:hover{text-decoration:underline}
.crm-table .num{text-align:right;font-variant-numeric:tabular-nums}

.crm-timeline{list-style:none;margin:0;padding:0}
.crm-timeline li{display:flex;gap:11px;padding:9px 0;font-size:13px}
.crm-timeline li + li{border-top:1px solid var(--line)}
.crm-timeline .t-when{color:var(--muted);font-size:12px;white-space:nowrap;min-width:64px}
.crm-timeline .t-who{color:var(--muted)}

.crm-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:13.5px}
.crm-empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px;font-weight:600}

/* ------------------------------------------------------------ responsive */

@media (max-width:1100px){
  .crm-charts,.crm-charts-2{grid-template-columns:1fr}
}

@media (max-width:860px){
  .crm-layout{grid-template-columns:1fr}
  .crm-side{
    position:fixed;inset:0 auto 0 0;width:min(84vw,var(--crm-side));z-index:50;
    transform:translateX(-100%);transition:transform .22s var(--cb);
  }
  .crm-side.open{transform:none;box-shadow:var(--shadow-l)}
  .crm-burger{display:grid}
  .crm-scrim{
    position:fixed;inset:0;background:rgba(20,10,25,.42);z-index:40;
    opacity:0;pointer-events:none;transition:opacity .22s var(--ease);
  }
  .crm-scrim.on{opacity:1;pointer-events:auto}
  .crm-head h1{font-size:17px}
  .crm-who .w-meta{display:none}
}

@media (max-width:560px){
  :root{--crm-gap:12px}
  .crm-kpis{grid-template-columns:repeat(auto-fit,minmax(142px,1fr))}
  .crm-kpi .k-value{font-size:25px}
  /* Tables become their own scroll region rather than stretching the page. */
  .crm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .crm-scroll .crm-table{min-width:520px}
  .crm-stage .name{min-width:104px;font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  .crm-side,.crm-scrim,.crm-tip,.crm-chart .bar{transition:none}
}

/* ==========================================================================
   Records: toolbars, filters, forms, detail pages
   ========================================================================== */

/* ---------------------------------------------------------------- toolbar */

.crm-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.crm-toolbar .grow{flex:1;min-width:180px}

.crm-input,.crm-select,.crm-textarea{
  width:100%;font:inherit;font-size:13.5px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line-2);border-radius:7px;padding:8px 10px;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
.crm-input:focus,.crm-select:focus,.crm-textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--wash);
}
.crm-textarea{min-height:96px;resize:vertical;line-height:1.5}
.crm-select{
  appearance:none;padding-right:28px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%236f6178' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:11px;
}
.crm-toolbar .crm-select,.crm-toolbar .crm-input{width:auto;min-width:126px}
/* …except the search box, which is the one that should take the slack. */
.crm-toolbar .grow .crm-input{width:100%}

.crm-btn{
  display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13.5px;font-weight:600;
  padding:8px 14px;border-radius:7px;border:1px solid var(--brand-ink);cursor:pointer;
  background:var(--brand-ink);color:#fff;text-decoration:none;white-space:nowrap;
  transition:filter .14s var(--ease);
}
.crm-btn:hover{filter:brightness(1.08)}
.crm-btn.ghost{background:var(--paper);color:var(--ink);border-color:var(--line-2)}
.crm-btn.ghost:hover{background:var(--tint);filter:none}
.crm-btn.danger{background:var(--paper);color:var(--crm-lost);border-color:var(--crm-lost-line)}
.crm-btn.danger:hover{background:var(--crm-lost-wash);filter:none}
.crm-btn.small{padding:5px 10px;font-size:12.5px}
.crm-btn svg{width:15px;height:15px}

/* Reads as a link, behaves as a button — used for the applied-filter chips. */
.crm-clear{
  display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);
  text-decoration:none;padding:4px 9px;border-radius:999px;background:var(--tint-2);
}
.crm-clear:hover{color:var(--ink)}

/* -------------------------------------------------------------- pagination */

.crm-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.crm-pager .count{font-size:12.5px;color:var(--muted)}
.crm-pager nav{display:flex;gap:4px;flex-wrap:wrap}
/* Scoped to nav: this used to style the "Showing 1–24 of 90" caption too,
   which gave the sentence a button's border. */
.crm-pager nav a,.crm-pager nav span{
  min-width:32px;height:32px;display:grid;place-items:center;padding:0 9px;
  border:1px solid var(--line);border-radius:7px;font-size:13px;text-decoration:none;color:var(--ink);
}
.crm-pager nav a:hover{background:var(--tint)}
.crm-pager nav .on{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff;font-weight:600}
.crm-pager nav .off{color:var(--line-2);border-color:var(--line)}

/* -------------------------------------------------------------- sortable th */

.crm-table th a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.crm-table th a:hover{color:var(--ink)}
.crm-table th .arrow{font-size:9px;opacity:.85}

/* ------------------------------------------------------------------- forms */

.crm-form{display:grid;gap:16px}
.crm-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:14px}
.crm-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.crm-field > label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.crm-field .help{font-size:11.5px;color:var(--muted)}
.crm-field .err{font-size:12px;color:var(--crm-lost)}
.crm-field.wide{grid-column:1/-1}
.crm-field.bad .crm-input,.crm-field.bad .crm-select,.crm-field.bad .crm-textarea{border-color:var(--crm-lost-line)}

.crm-formfoot{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding-top:4px}
.crm-formfoot .grow{flex:1}

/* ------------------------------------------------------------------ detail */

.crm-detail{display:grid;grid-template-columns:1fr 330px;gap:var(--crm-gap);align-items:start}

.crm-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px}
.crm-fact{min-width:0}
.crm-fact dt{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 3px}
.crm-fact dd{margin:0;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.crm-fact dd a{color:var(--brand-ink);text-decoration:none}
.crm-fact dd a:hover{text-decoration:underline}

.crm-notes{list-style:none;margin:0;padding:0}
.crm-notes li{padding:11px 0;font-size:13.5px;line-height:1.5}
.crm-notes li + li{border-top:1px solid var(--line)}
.crm-notes .by{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}

/* The timeline reads top-down as a sequence, so it gets a spine. */
.crm-log{list-style:none;margin:0;padding:0 0 0 18px;position:relative}
.crm-log::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--line)}
.crm-log li{position:relative;padding:9px 0;font-size:13px;line-height:1.5}
.crm-log li::before{
  content:"";position:absolute;left:-18px;top:15px;width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-2);
}
.crm-log li.is-key::before{border-color:var(--brand);background:var(--brand)}
.crm-log .at{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.crm-log .diff{
  display:block;margin-top:5px;font-size:12px;color:var(--muted);
  background:var(--tint);border-radius:6px;padding:6px 9px;overflow-wrap:anywhere;
}

@media (max-width:1000px){
  .crm-detail{grid-template-columns:1fr}
}
@media (max-width:560px){
  .crm-toolbar{padding:10px 12px}
  .crm-toolbar .crm-select,.crm-toolbar .crm-input{min-width:0;flex:1}
  .crm-fields{grid-template-columns:1fr}
}

/* ==========================================================================
   Deal pipeline — the board from §17
   ========================================================================== */

.crm-board{
  display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:6px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.crm-board::-webkit-scrollbar{height:8px}
.crm-board::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}

.crm-col{
  flex:0 0 268px;background:var(--paper);border:1px solid var(--line);border-radius:var(--crm-r);
  display:flex;flex-direction:column;max-height:calc(100dvh - 220px);
}
/* The stage's own colour, as a rule along the top rather than a filled block:
   nine saturated columns would shout over the cards they contain. */
.crm-col > header{
  padding:11px 13px 9px;border-bottom:1px solid var(--line);border-top:3px solid var(--line-2);
  border-radius:var(--crm-r) var(--crm-r) 0 0;
}
.crm-col > header h2{margin:0;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.crm-col > header .n{
  margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted);
  background:var(--tint);border-radius:999px;padding:1px 8px;
}
.crm-col > header .sum{margin:3px 0 0;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.crm-col .stack{padding:9px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.crm-col .none{padding:16px 12px;text-align:center;color:var(--muted);font-size:12.5px}

.crm-deal{
  display:block;text-decoration:none;color:inherit;background:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding:10px 11px;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
.crm-deal:hover{border-color:var(--line-2);box-shadow:var(--shadow-s)}
.crm-deal b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;margin-bottom:3px}
.crm-deal .who{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.crm-deal .row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.crm-deal .val{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.crm-deal .who-agent{margin-left:auto;white-space:nowrap}

@media (max-width:560px){
  .crm-col{flex-basis:84vw;max-height:none}
}

/* ==========================================================================
   Calendar — §16, in month, week and day
   ========================================================================== */

.crm-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--crm-r);overflow:hidden}
.crm-cal .dow{
  background:var(--tint);padding:8px 10px;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);font-weight:600;text-align:center;
}
.crm-cal .day{background:var(--paper);min-height:112px;padding:7px 8px;display:flex;flex-direction:column;gap:4px}
.crm-cal .day.out{background:var(--tint);opacity:.72}
.crm-cal .day.today{box-shadow:inset 0 0 0 2px var(--brand)}
.crm-cal .num{font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.crm-cal .day.out .num{color:var(--muted);font-weight:400}
.crm-cal .more{font-size:11px;color:var(--muted)}

/* One row per thing happening. The left edge carries the kind, so a glance
   down the week reads as a shape rather than a wall of text. */
.crm-ev{
  display:block;text-decoration:none;color:inherit;font-size:11.5px;line-height:1.3;
  padding:3px 6px 3px 8px;border-radius:5px;background:var(--tint);
  border-left:3px solid var(--line-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.crm-ev:hover{background:var(--tint-2)}
.crm-ev b{font-weight:600}
.crm-ev .t{color:var(--muted);font-variant-numeric:tabular-nums}
.crm-ev[data-kind="viewing"]{border-left-color:#8b30c2}
.crm-ev[data-kind="task"]{border-left-color:var(--crm-info)}
.crm-ev[data-kind="follow_up"]{border-left-color:var(--crm-warn)}
.crm-ev[data-kind="tenancy"]{border-left-color:var(--crm-won)}
.crm-ev[data-state="late"]{background:var(--crm-lost-wash);border-left-color:var(--crm-lost)}
.crm-ev[data-state="done"]{opacity:.55;text-decoration:line-through}

/* Day and week views list rather than tile: a single column of hours is
   easier to read than a grid one cell wide. */
.crm-agenda{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--crm-r);overflow:hidden}
.crm-agenda .slot{background:var(--paper);padding:10px 13px;display:flex;gap:12px;align-items:flex-start}
.crm-agenda .slot.today{box-shadow:inset 3px 0 0 var(--brand)}
.crm-agenda .when{min-width:118px;flex:none}
.crm-agenda .when b{display:block;font-size:13px}
.crm-agenda .when span{font-size:11.5px;color:var(--muted)}
.crm-agenda .items{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.crm-agenda .none{color:var(--muted);font-size:12.5px}

.crm-calbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crm-calbar .title{font-size:15px;font-weight:600;min-width:172px}
.crm-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}
.crm-legend span{display:inline-flex;align-items:center;gap:5px}
.crm-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

@media (max-width:760px){
  /* Seven columns of nothing is worse than a list. */
  .crm-cal{grid-template-columns:1fr}
  .crm-cal .dow{display:none}
  .crm-cal .day{min-height:0}
  .crm-cal .day.out{display:none}
  .crm-cal .day::before{content:attr(data-label);font-size:11px;color:var(--muted);font-weight:600}
  .crm-cal .num{display:none}
}

/* ------------------------------------------------- documents & commissions */
/* A file list. The name is the download link; nothing here is a path, because
   there is no URL that reaches the store. */
.crm-files{list-style:none;margin:0;padding:0}
.crm-files li{padding:10px 0;font-size:13.5px;line-height:1.45;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.crm-files li + li{border-top:1px solid var(--line)}
.crm-files a{font-weight:600;word-break:break-word}
.crm-files .meta{flex:1 1 100%;font-size:11.5px;color:var(--muted)}
.crm-files form{margin:0}

/* A button that is really a link: destructive, so it must be a form post. */
.crm-linkbtn{
  background:none;border:0;padding:0;font:inherit;font-size:11.5px;color:var(--crm-lost);
  cursor:pointer;text-decoration:underline
}
.crm-linkbtn:hover{opacity:.75}

.crm-error{margin:0 0 10px;font-size:12.5px;color:var(--crm-lost)}

/* A banner in one of three states.
   These were inline style attributes repeating the same six hex values across
   a dozen templates, which meant they stayed light when the rest of the page
   went dark. As classes they follow the palette, and they are six fewer colours
   for anybody to mistype. */
.crm-note{
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:var(--crm-r);padding:12px 16px;margin-bottom:var(--crm-gap);
  font-size:13.5px;line-height:1.5;
}
.crm-note b{display:block;margin-bottom:2px}
.crm-note.good{border-color:var(--crm-won-line);background:var(--crm-won-wash)}
.crm-note.warn{border-color:var(--crm-warn-line);background:var(--crm-warn-wash)}
.crm-note.bad{border-color:var(--crm-lost-line);background:var(--crm-lost-wash);color:var(--crm-lost)}
.crm-note.quiet{background:var(--tint)}
.crm-note code{font-size:15px;letter-spacing:.06em;word-break:break-all}

/* A band heading, dividing the dashboard into the four questions it answers.
   Without these the page is fourteen cards of equal weight and the eye has
   nowhere to land. */
.crm-band{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:calc(var(--crm-gap) + 6px) 0 10px;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);font-weight:700;
}
.crm-band:first-child{margin-top:0}
.crm-band span{
  font-size:11.5px;letter-spacing:0;text-transform:none;
  color:var(--muted);font-weight:400;
}
/* A rule running to the end of the row, so the band reads as a divider rather
   than as another card title. */
.crm-band::after{content:"";flex:1;height:1px;background:var(--line);min-width:20px}

/* The headline number carries the card; the breakdown underneath supports it.
   They were close enough in weight that the eye read them as one list. */
.crm-stat .s-value{line-height:1.05}
.crm-stat .s-rows dt{color:var(--muted)}
.crm-stat .s-rows dd{font-weight:700}

/* The same three states, worn by a chip or a table cell. */
.is-bad{background:var(--crm-lost-wash);color:var(--crm-lost)}
.is-warn{background:var(--crm-warn-wash);color:var(--crm-warn)}
.is-good{color:var(--crm-won)}

/* Checkbox lists: roles on an account, permissions on a role.
   Two shapes — stacked, where each row carries a description under it, and
   wrapping, where the label is the whole of it. */
.crm-checks{display:flex;flex-direction:column}
.crm-checks label{display:flex;gap:10px;align-items:flex-start;padding:8px 0;cursor:pointer}
.crm-checks label:hover{color:var(--brand-ink)}
.crm-checks input[type=checkbox]{margin-top:2px;flex:none;accent-color:var(--brand)}
.crm-checks .c-note{display:block;font-size:12.5px;color:var(--muted)}
.crm-checks.wrap{flex-direction:row;flex-wrap:wrap}
.crm-checks.wrap label{align-items:center;padding:5px 16px 5px 0}

/* The logo already on a developer, shown above the file input so somebody can
   see what they are about to replace. Chequerboard behind it, because most
   logos are transparent PNGs and a white one on white reads as missing. */
.crm-logo-current{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.crm-logo-current img{
  width:104px;height:64px;object-fit:contain;border-radius:8px;padding:6px;
  border:1px solid var(--line);
  background-color:var(--paper);
  background-image:linear-gradient(45deg,var(--crm-inset) 25%,transparent 25%,transparent 75%,var(--crm-inset) 75%),
                   linear-gradient(45deg,var(--crm-inset) 25%,transparent 25%,transparent 75%,var(--crm-inset) 75%);
  background-size:14px 14px;background-position:0 0,7px 7px;
}
.crm-logo-drop{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.crm-logo-drop input{accent-color:var(--brand)}

/* The split bar: what the agent keeps against what the company does. */
.crm-split{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line);gap:2px}
.crm-split i{display:block;height:100%}
.crm-split .agent{background:var(--brand)}
.crm-split .company{background:#6d28a8}
.crm-splitkey{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:6px}

/* The rules table is eight columns of form controls, so the generic 520px
   scroll floor squashes its text inputs down to three characters. Give the
   controls room and let the scroll do its job. */
.crm-rules .crm-input,.crm-rules .crm-select{padding:4px 8px;font-size:12.5px}
.crm-rules td:first-child .crm-input{min-width:150px}
.crm-rules .crm-select{min-width:112px}
.crm-rules input[type=number]{min-width:78px}
@media (max-width:760px){
  .crm-scroll .crm-table.crm-rules{min-width:830px}
}

/* ------------------------------------------------------------------ reports */
/* Period presets. Deliberately not .crm-chip: that is a static label pill and
   these are links that change the page. */
.crm-period{
  display:inline-flex;align-items:center;padding:5px 11px;border-radius:99px;
  border:1px solid var(--line);background:var(--paper);color:var(--muted);
  font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:border-color .14s var(--ease),color .14s var(--ease);
}
.crm-period:hover{border-color:var(--line-2);color:var(--ink)}
.crm-period.on{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.crm-period-sep{width:1px;align-self:stretch;background:var(--line);margin:0 2px}
.crm-period-label{font-size:12.5px;color:var(--muted)}

/* An aside inside a card, below its toolbar: says what the page is not showing
   you, which is the thing a scoped report has to be honest about. */
.crm-note-strip{
  margin:0;padding:10px 16px;border-top:1px solid var(--line);
  background:var(--tint);color:var(--muted);font-size:12.5px;line-height:1.45;
}

/* ------------------------------------------------------- settings & audit */
/* A checkbox with its wording beside it, rather than a label floating above a
   lone box with no clue which way round "on" is. */
.crm-switch{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.crm-switch input{width:16px;height:16px;accent-color:var(--brand-deep);cursor:pointer}

/* What changed, folded away. Open by click, because most rows do not need it
   and a table with every diff expanded is unreadable. */
.crm-diff{margin-top:5px}
.crm-diff summary{font-size:11.5px;color:var(--muted);cursor:pointer;width:max-content}
.crm-diff summary:hover{color:var(--ink)}
.crm-diff dl{margin:7px 0 0;display:grid;gap:5px}
.crm-diff dt{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.crm-diff dd{margin:0;font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.crm-diff del{color:var(--muted);text-decoration:line-through}
/* Not colour alone: the strike-through and the arrow carry the difference for
   anyone who cannot separate the two hues. */
.crm-diff ins{text-decoration:none;color:var(--ink);font-weight:600}
.crm-diff ins::before{content:"→ ";color:var(--muted);font-weight:400}

/* ------------------------------------------------------------ notifications */
.crm-bell{
  position:relative;display:inline-grid;place-items:center;width:36px;height:36px;flex:none;
  border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--muted);
  text-decoration:none;transition:border-color .14s var(--ease),color .14s var(--ease);
}
.crm-bell:hover{border-color:var(--line-2);color:var(--ink)}
.crm-bell.has{color:var(--brand-deep);border-color:var(--line-2)}
.crm-bell .n{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;
  display:grid;place-items:center;border-radius:99px;background:var(--brand-deep);color:#fff;
  font-size:10.5px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  border:2px solid var(--paper);
}

.crm-notifs{list-style:none;margin:0;padding:0}
.crm-notifs li{
  display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;
  padding:13px 16px;border-top:1px solid var(--line);
}
.crm-notifs li:first-child{border-top:0}
/* Unread is carried by the rail and the dot, not by the background alone —
   a tint this light is invisible on a dim screen. */
.crm-notifs li.unread{background:var(--tint);box-shadow:inset 3px 0 0 var(--brand)}
.crm-notifs li.urgent.unread{box-shadow:inset 3px 0 0 var(--crm-lost)}
.crm-notifs .body{flex:1;min-width:200px}
.crm-notifs .t{margin:0;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.crm-notifs .t .dot{width:7px;height:7px;border-radius:99px;background:var(--brand);flex:none}
.crm-notifs .b{margin:3px 0 0;font-size:13px;color:var(--ink)}
.crm-notifs .w{margin:4px 0 0;font-size:11.5px;color:var(--muted)}
.crm-notifs .acts{display:flex;gap:9px;align-items:center;flex:none}
.crm-notifs .acts form{margin:0}

/* The board shows the deals being worked; the rest are one click away in the
   list, not hidden. */
.crm-col-more{
  display:block;margin-top:8px;padding:8px 10px;border-radius:8px;
  border:1px dashed var(--line-2);background:var(--paper);color:var(--brand-ink);
  font-size:12px;font-weight:600;text-align:center;text-decoration:none;
}
.crm-col-more:hover{background:var(--tint);border-style:solid}

/* --------------------------------------------------------- dashboard stats */
/* Seven cards: a total, its movement, and the business lines underneath.
   auto-fit rather than a fixed count, so a person who cannot see three of
   them gets four that fill the row instead of four and a gap. */
.crm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:12px}

.crm-stat{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--crm-r);
  box-shadow:var(--shadow-s);padding:14px 16px 12px;
}
.crm-stat > header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.crm-stat .s-icon{
  display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:7px;
  background:var(--wash);color:var(--brand-ink);
}
.crm-stat .s-label{
  font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;flex:1;min-width:0;
}
.crm-stat .s-label:hover{color:var(--brand-ink);text-decoration:underline}

/* The arrow carries the direction; the colour only reinforces it. Red against
   green is the one pair deuteranopia cannot separate, so neither is load-bearing. */
.crm-stat .s-trend{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);
}
.crm-stat .s-trend.up{color:var(--crm-won)}
.crm-stat .s-trend.down{color:var(--crm-lost)}

.crm-stat .s-value{
  margin:0;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.crm-stat .s-of{font-size:11.5px;font-weight:400;color:var(--muted);margin-left:7px;letter-spacing:0}

.crm-stat .s-rows{margin:11px 0 0;display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.crm-stat .s-rows > div{display:flex;justify-content:space-between;gap:10px;background:var(--paper);padding:6px 0 5px}
.crm-stat .s-rows dt{font-size:12px;color:var(--muted)}
.crm-stat .s-rows dd{margin:0;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}

/* The to-do tabs. Each is a link into the task list already filtered, so the
   number and the page behind it can never disagree. */
.crm-todobar{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.crm-todotab{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;
  border:1px solid var(--line);background:var(--paper);color:var(--muted);
  font-size:12.5px;font-weight:600;text-decoration:none;
}
.crm-todotab:hover{border-color:var(--line-2);color:var(--ink)}
.crm-todotab b{color:var(--ink);font-variant-numeric:tabular-nums}
.crm-todotab .d{width:7px;height:7px;border-radius:99px;flex:none}
.crm-todotab.late .d{background:var(--crm-lost)}
.crm-todotab.today .d{background:var(--crm-won)}
.crm-todotab.soon .d{background:var(--brand)}

/* Visually hidden, still read aloud. */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------------- inventory: communities & developers */
/* Image-led cards rather than another table. These three pages answer "what
   have we got in Marina" and "what does EMAAR look like", which are questions
   you answer by looking, not by reading rows. Generous space and hairline
   rules do the work; nothing here is decorated for its own sake. */
.crm-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}

.crm-tile{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-s);text-decoration:none;color:inherit;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.crm-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-m);border-color:var(--line-2)}

.crm-tile .shot{position:relative;aspect-ratio:16/10;background:var(--tint-2);overflow:hidden}
.crm-tile .shot img{width:100%;height:100%;object-fit:cover;display:block}
/* A scrim, so white type on somebody's photograph is readable whatever the
   photograph turns out to be. */
.crm-tile .shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,10,25,.72) 0%,rgba(20,10,25,.18) 42%,transparent 72%);
}
.crm-tile .over{position:absolute;left:14px;right:14px;bottom:11px;z-index:1;color:#fff}
.crm-tile .over .n{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.crm-tile .over .c{margin:2px 0 0;font-size:11.5px;opacity:.82;letter-spacing:.06em;text-transform:uppercase}

/* A logo, not a photograph: shown whole on a white panel, never cropped and
   never under the scrim. White in dark mode too, because most logos are
   drawn in dark ink for a light background. */
.crm-tile .logo{display:grid;place-items:center;aspect-ratio:16/10;background:#fff;padding:22px 28px;
  border-bottom:1px solid var(--line)}
.crm-tile .logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}

/* No photograph: a monogram on the brand tint rather than a broken frame. */
.crm-tile .mono{
  display:grid;place-items:center;aspect-ratio:16/10;background:var(--brand-deep);color:#fff;
  font-size:38px;font-weight:700;letter-spacing:.04em;
}

.crm-tile .facts{display:flex;gap:1px;background:var(--line);border-top:1px solid var(--line);margin-top:auto}
.crm-tile .facts > div{flex:1;background:var(--paper);padding:9px 10px;text-align:center}
.crm-tile .facts dt{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.crm-tile .facts dd{margin:2px 0 0;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}

.crm-tile .foot{padding:10px 14px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:10px}
.crm-tile .foot b{color:var(--ink);font-variant-numeric:tabular-nums}

/* A quiet badge for a status like "Off-plan · handover Q4 2027". */
.crm-pill{
  display:inline-block;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;
  background:var(--tint-2);color:var(--brand-deep);
}
.crm-tile .over .crm-pill{background:rgba(255,255,255,.92);color:var(--brand-deep)}

/* The header of a community or developer page: a wide plate, not a hero. */
.crm-plate{
  display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--paper);
  box-shadow:var(--shadow-s);
}
.crm-plate .pic{width:132px;height:88px;flex:none;border-radius:10px;overflow:hidden;background:var(--tint-2)}
.crm-plate .pic img{width:100%;height:100%;object-fit:cover;display:block}
.crm-plate .pic.logo{background:#fff;border:1px solid var(--line);padding:10px}
.crm-plate .pic.logo img{object-fit:contain}
.crm-plate .pic.mono{display:grid;place-items:center;background:var(--brand-deep);color:#fff;font-size:30px;font-weight:700}
.crm-plate .who{flex:1;min-width:220px}
.crm-plate .who h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.015em}
.crm-plate .who .sub{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.crm-plate .who .about{margin:9px 0 0;font-size:13.5px;line-height:1.55;max-width:62ch}

/* ------------------------------------------------------- sectioned records */
/* Seven sections down one page is a page nobody scrolls. Tabs are links with
   the section in the query string, so a section can be linked to, bookmarked
   and reloaded — which a JavaScript tab cannot. */
.crm-tabs{
  display:flex;gap:2px;flex-wrap:wrap;padding:0 16px;
  border-bottom:1px solid var(--line);background:var(--paper);
  border-radius:var(--crm-r) var(--crm-r) 0 0;
}
.crm-tabs a{
  padding:11px 14px;font-size:13px;font-weight:600;color:var(--muted);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.crm-tabs a:hover{color:var(--ink)}
.crm-tabs a.on{color:var(--brand-deep);border-bottom-color:var(--brand)}
.crm-tabs a .n{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:99px;
  background:var(--tint-2);color:var(--brand-deep);font-size:11px;font-variant-numeric:tabular-nums;
}

/* A page's own address, shown as one. */
.crm-path{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--brand-ink);background:var(--tint);padding:2px 7px;border-radius:5px;
}

/* Where a website page gets its content from. The arrow is the point. */
.crm-feed{font-size:12px;color:var(--muted)}
.crm-feed a{color:var(--brand-ink);font-weight:600;text-decoration:none}
.crm-feed a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- account

   Your profile and your password: the form under two tabs on the left, a
   card on the right showing the account as others see it. */
.crm-account{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--crm-gap);align-items:start}
.crm-account-main{padding:20px 24px 24px}
.crm-account-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:26px}
.crm-account-tabs a{
  padding:10px 20px;border-radius:99px;font-size:14px;font-weight:500;color:var(--ink-2);
  text-decoration:none;transition:background .15s var(--ease),color .15s var(--ease);
}
.crm-account-tabs a:hover{background:var(--wash);color:var(--ink)}
.crm-account-tabs a.on{background:var(--paper);color:var(--brand-ink);font-weight:600;
  box-shadow:0 0 0 1px var(--line),0 6px 18px -8px rgba(82,11,112,.35)}

.crm-account-form{display:grid;gap:14px}
.crm-row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px 18px;align-items:start}
.crm-row > label,.crm-row > .lab{font-size:14px;font-weight:600;color:var(--ink);text-align:right;padding-top:10px}
.crm-row > label span,.crm-row > .lab span{color:var(--crm-lost)}
.crm-row > div{display:flex;flex-direction:column;gap:5px;min-width:0}
.crm-row .help{font-size:12px;color:var(--muted)}
.crm-row .err{font-size:12px;color:var(--crm-lost)}
.crm-row.bad .crm-input{border-color:var(--crm-lost-line)}
.crm-account-form .crm-input{padding-block:10px;font-size:14px}
.crm-account-note{margin:0 0 0 188px}
.crm-account-foot{display:flex;gap:10px;justify-content:flex-end;padding-top:8px}

/* Spoken languages: every choice a pill, ticked ones filled. */
.crm-pickpills{display:flex;flex-wrap:wrap;gap:7px;padding-top:4px}
.crm-pickpills label{cursor:pointer}
.crm-pickpills input{position:absolute;opacity:0;pointer-events:none}
.crm-pickpills span{
  display:inline-block;padding:6px 13px;border-radius:99px;font-size:13px;font-weight:500;
  border:1px solid var(--line-2);color:var(--ink-2);background:var(--paper);
  transition:background .12s var(--ease),border-color .12s var(--ease),color .12s var(--ease);
}
.crm-pickpills label:hover span{border-color:var(--brand)}
.crm-pickpills input:checked + span{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
:root[data-theme="dark"] .crm-pickpills input:checked + span{background:var(--brand);border-color:var(--brand)}
.crm-pickpills input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}

.crm-radios{display:flex;gap:26px;padding-top:9px}
.crm-radios label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.crm-radios input{width:18px;height:18px;margin:0;accent-color:var(--brand)}

.crm-account-card{padding:30px 24px 10px}
.crm-account-card .a-face{text-align:center;padding-bottom:18px}
.crm-account-card .a-avatar{
  width:96px;height:96px;border-radius:50%;display:inline-grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;
  font-size:34px;font-weight:700;letter-spacing:.02em;box-shadow:var(--shadow-m);
}
.crm-account-card h2{margin:16px 0 0;font-size:20px}
.crm-account-card .a-face p{margin:3px 0 0;font-size:13px;color:var(--muted)}
.crm-account-card .a-rows{margin:0}
.crm-account-card .a-rows > div{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.crm-account-card dt{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink);flex:none}
.crm-account-card dt svg{width:17px;height:17px;color:var(--brand-ink)}
.crm-account-card dd{margin:0;font-size:13.5px;color:var(--ink-2);text-align:right;min-width:0;overflow-wrap:anywhere}

@media (max-width:1100px){
  .crm-account{grid-template-columns:1fr}
  .crm-account-card{order:-1}
}
@media (max-width:640px){
  .crm-account-main{padding:16px}
  .crm-row{grid-template-columns:1fr}
  .crm-row > label,.crm-row > .lab{text-align:left;padding-top:0}
  .crm-account-note{margin:0}
}

/* ------------------------------------------------------ dashboard panels

   The "Where it comes from" band: lead flow and pipeline side by side, then
   sources and follow-ups. Generous padding, one quiet eyebrow over each
   title, figures before the chart they summarise, and marks kept thin — the
   numbers are the subject, the scaffolding stays recessive. */

.crm-dash{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--crm-gap);align-items:stretch}

.crm-panel{
  position:relative;display:flex;flex-direction:column;gap:18px;min-width:0;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px 24px;box-shadow:var(--shadow-s);overflow:hidden;
}
/* A hairline of brand light along the top edge: the one flourish. */
.crm-panel::before{
  content:"";position:absolute;left:24px;right:24px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand) 50%,transparent);opacity:.55;
}

.crm-panel .p-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.crm-panel .p-eyebrow{
  margin:0 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-ink);
}
.crm-panel .p-head h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.crm-panel .p-link{
  font-size:12.5px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  padding:7px 12px;border:1px solid var(--line);border-radius:99px;transition:border-color .15s var(--ease),color .15s var(--ease);
}
.crm-panel .p-link:hover{border-color:var(--brand);color:var(--brand-ink)}
.crm-panel .p-total{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.crm-panel .p-total small{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0}

/* Headline figures above a chart. */
.p-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;
  border:1px solid var(--line);border-radius:12px;background:var(--tint)}
.p-kpis > div{padding:12px 16px;min-width:0}
.p-kpis > div + div{border-left:1px solid var(--line)}
.p-kpis dt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.p-kpis dd{margin:4px 0 0;font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--ink);display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.p-kpis dd small{font-size:15px;font-weight:600;color:var(--muted);margin-left:1px}
.p-kpis.compact dd{font-size:22px}
.p-delta{font-size:11.5px;font-weight:600;letter-spacing:0;color:var(--muted);white-space:nowrap}
.p-delta.up{color:#15803d}
.p-delta.down{color:var(--crm-lost)}
:root[data-theme="dark"] .p-delta.up{color:#4ac97a}

/* The area trend. */
.crm-trend{padding-left:28px;flex:1;display:flex;flex-direction:column;min-height:240px}
.crm-trend .t-plot{position:relative;flex:1;min-height:180px;margin-top:10px}
.crm-trend .t-rule{position:absolute;left:0;right:0;border-top:1px dashed var(--line)}
.crm-trend .t-rule:last-of-type{border-top:1px solid var(--line-2)}
.crm-trend .t-rule span{position:absolute;right:calc(100% + 10px);top:-8px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.crm-trend .t-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.crm-trend .s1{stop-color:var(--brand);stop-opacity:.32}
.crm-trend .s2{stop-color:var(--brand);stop-opacity:0}
.crm-trend .t-line{fill:none;stroke:var(--brand);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.crm-trend .t-hits{position:absolute;inset:0;display:flex;list-style:none;margin:0;padding:0}
.crm-trend .t-hits li{position:relative;flex:1;cursor:default;outline:none}
.crm-trend .t-guide{position:absolute;left:50%;top:0;bottom:0;border-left:1px solid var(--line-2);opacity:0;transition:opacity .12s var(--ease)}
.crm-trend .t-dot{
  position:absolute;left:50%;width:10px;height:10px;margin:0 0 -5px -5px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 2px var(--paper);opacity:0;transition:opacity .12s var(--ease),transform .12s var(--ease);
}
.crm-trend .t-dot b{
  position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.crm-trend li.marked .t-dot{opacity:1}
.crm-trend li:hover .t-guide,.crm-trend li:focus-visible .t-guide{opacity:1}
.crm-trend li:hover .t-dot,.crm-trend li:focus-visible .t-dot{opacity:1;transform:scale(1.25)}
.crm-trend .t-months{display:flex;list-style:none;margin:10px 0 0;padding:0}
.crm-trend .t-months li{flex:1;text-align:center;font-size:11px;font-weight:500;color:var(--muted)}

/* Pipeline. */
.p-mix{display:flex;gap:2px;height:10px;border-radius:99px;overflow:hidden;background:var(--tint-2)}
.p-mix span{display:block;min-width:4px}
.p-stages{list-style:none;margin:0;padding:0}
.p-stages li{
  display:grid;grid-template-columns:16px minmax(0,1fr) minmax(60px,1.1fr) 28px 38px;align-items:center;gap:10px;
  padding:9px 6px;border-radius:8px;outline:none;
}
.p-stages li + li{border-top:1px solid var(--line)}
.p-stages li:hover,.p-stages li:focus-visible{background:var(--wash)}
.p-stages .s-key{
  width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  background:var(--c);color:#fff;font-size:10px;font-weight:800;line-height:1;
}
.p-stages .s-key:empty{width:10px;height:10px;margin:0 3px;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.p-stages .s-name{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-stages .s-bar{height:6px;border-radius:99px;background:var(--tint-2);overflow:hidden}
.p-stages .s-bar i{display:block;height:100%;border-radius:99px}
.p-stages .s-n{font-size:14px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.p-stages .s-pct{font-size:12px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.p-stages li.zero .s-name,.p-stages li.zero .s-n{color:var(--muted);font-weight:500}

/* Sources. */
.p-sources{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.p-sources li{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto 42px;align-items:baseline;gap:6px 10px;
  padding:10px 8px;border-radius:10px;outline:none;
}
.p-sources li:hover,.p-sources li:focus-visible{background:var(--wash)}
.p-sources .r-rank{font-size:11px;font-weight:700;color:var(--brand-ink);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.p-sources .r-name{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-sources .r-n{font-size:15px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.p-sources .r-pct{font-size:12px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.p-sources .r-bar{grid-column:2/-1;height:6px;border-radius:99px;background:var(--tint-2);overflow:hidden}
.p-sources .r-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand-deep),var(--brand))}

/* Follow-ups. */
.p-follow{list-style:none;margin:0;padding:0}
.p-follow li{display:flex;align-items:center;gap:12px;padding:11px 0}
.p-follow li + li{border-top:1px solid var(--line)}
.p-follow .f-av{
  width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--wash-2);color:var(--brand-ink);font-size:12.5px;font-weight:700;
}
.p-follow .f-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.p-follow .f-body a,.p-follow .f-body b{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-follow .f-body a:hover{color:var(--brand-ink)}
.p-follow .f-body span{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.p-follow .f-dot{width:7px;height:7px;border-radius:50%;flex:none}
.p-follow .f-due{
  flex:none;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:99px;white-space:nowrap;
  background:var(--crm-warn-wash);color:var(--ink-2);border:1px solid var(--crm-warn-line);
}
.p-follow .f-due.late{background:var(--crm-lost-wash);color:var(--crm-lost);border-color:var(--crm-lost-line)}

.p-clear{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:26px 10px 20px}
.p-clear .c-ring{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;
  background:var(--wash);color:var(--brand-ink);box-shadow:0 0 0 8px color-mix(in srgb,var(--brand) 6%,transparent);
}
.p-clear .c-ring svg{width:22px;height:22px}
.p-clear b{font-size:15px;color:var(--ink)}
.p-clear span{font-size:13px;color:var(--muted)}

@media (max-width:1100px){
  .crm-dash{grid-template-columns:1fr}
}
@media (max-width:560px){
  .crm-panel{padding:18px 16px 18px}
  .crm-panel::before{left:16px;right:16px}
  .p-kpis > div{padding:10px 12px}
  .p-kpis dd{font-size:20px}
  .p-stages li{grid-template-columns:16px minmax(0,1fr) 28px 38px}
  .p-stages .s-bar{display:none}
  .crm-trend .t-months li:nth-child(even){visibility:hidden}
}

/* ------------------------------------------------------------ photo fields */
.crm-photo{display:flex;gap:14px;align-items:flex-start}
.crm-photo .p-thumb{width:132px;aspect-ratio:4/3;flex:none;border-radius:10px;overflow:hidden;
  background:var(--tint-2);border:1px solid var(--line);display:grid;place-items:center}
.crm-photo .p-thumb img{width:100%;height:100%;object-fit:cover}
.crm-photo .p-thumb span{font-size:12px;color:var(--muted)}
.crm-photo .p-controls{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.crm-photo .p-path summary{cursor:pointer;font-size:12px;color:var(--muted)}
.crm-photo .p-path[open] summary{margin-bottom:6px}
.crm-gallery-edit{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.crm-gallery-edit li{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--tint-2)}
.crm-gallery-edit img{width:100%;aspect-ratio:4/3;object-fit:cover}
.crm-gallery-edit .g-remove{display:flex;align-items:center;gap:6px;padding:6px 8px;font-size:12px;cursor:pointer;background:var(--paper)}
.crm-gallery-edit .g-remove input{accent-color:var(--crm-lost)}
.crm-gallery-edit li:has(input:checked) img{opacity:.35}
@media (max-width:560px){.crm-photo{flex-direction:column}.crm-photo .p-thumb{width:100%}}

.crm-subhead{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ------------------------------------------------------------ API access */
.crm-secret{border-color:var(--crm-warn-line);background:var(--crm-warn-wash)}
.crm-secret .s-env{margin:0 0 12px;padding:12px 14px;border-radius:8px;background:var(--paper);border:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;white-space:pre-wrap;word-break:break-all;user-select:all}
.crm-rowedit{position:relative;display:inline-block}
.crm-rowedit > summary{list-style:none;cursor:pointer}
.crm-rowedit > summary::-webkit-details-marker{display:none}
.crm-rowedit .r-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:360px;padding:14px;
  display:flex;flex-direction:column;gap:12px;white-space:normal;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-l)}
.crm-rowedit .r-panel form{display:flex;flex-direction:column;gap:10px}
.crm-rowedit .r-actions{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.crm-rowedit .crm-field .lab{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.p-kpis:has(> div:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:760px){.p-kpis:has(> div:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}.p-kpis > div + div{border-left:0}}
.crm-field > .lab{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.crm-checks{font-size:13.5px}
.crm-checks b{font-weight:600}