/* S A Casa CRM.
   The palette and the typefaces are not choices made here. They are read from
   "S A Casa Real Estate Brand Guidelines.pdf", sampled from the colour page
   rather than eyeballed.

   Soukaina, 28 September 2026, the official colours, which supersede the
   palette sampled from the guidelines PDF:

     Navy       #0F2942      Gold       #B89A63      Body text  #6B7280

   The guidelines PDF has Obsidian #0B0B0B and Champagne #B8A17C. The gold is
   within a shade of the champagne. The navy genuinely differs from the
   obsidian, and settling that is hers.

   The guidelines are explicit about the accent: "Champagne is an accent, not
   the identity. Aim for approximately 5-10% of a composition." So the gold is
   used for the active tab, the primary button, one figure and the rules. It is
   never a background for a whole panel.

   Typefaces: "Use only these two brand families." Playfair Display for
   headlines, Inter for body copy, data, captions and digital UI. */

:root{
  --navy:#0F2942; --gold:#B89A63; --body:#6B7280;
  --alabaster:#F6F2ED; --mist:#D8D1C8;

  /* Alabaster, the light mode */
  --bg:#F6F2ED; --surface:#FFFFFF; --sunk:#EDE8E0;
  --line:#DCD5CA; --line-soft:#E8E2D8;
  --text:#0F2942; --muted:#6B7280; --faint:#98A0AC;
  --accent:#8A6E3C; --accent-bg:#F1E9DA;
  /* calendar */
  --raise:#F4EFE7; --on-accent:#FFFFFF;
  --chip-view:#E6EDF4; --chip-view-fg:#12385C;
  --chip-meet:#F1E7D4; --chip-meet-fg:#6B5320;
  /* Chart marks. Validated with the dataviz palette checker against this
     surface: chroma floor, lightness band and 3:1 contrast all pass. The brand
     gold #B89A63 itself sits below the chroma floor (C 0.081 against a 0.10
     floor) so it reads as grey in a chart; this is the nearest gold that does
     not. */
  --mark:#B58F48; --mark-soft:#E3D3B4; --track:#EFEAE1;
  --good:#2F7D5B; --warn:#9A6A12; --bad:#B4453C;
  --ok:#3C6B4F; --ok-bg:#E6EEE8;
  --warn:#8A6E43; --warn-bg:#F2E9DA;
  --cold:#8C4A42; --cold-bg:#F3E4E2;
  --live:#0F2942; --live-bg:#E5EAEF;
  --none:#7A7772; --none-bg:#EBE7E0;
  --shadow:0 1px 2px rgba(15,41,66,.06), 0 8px 24px rgba(15,41,66,.07);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="alabaster"]){
    color-scheme:dark;
    --bg:#0F2942; --surface:#153150; --sunk:#0C2138;
    --line:#22405E; --line-soft:#1A3651;
    --text:#F2F5F8; --muted:#A3B0C0; --faint:#7E8C9E;
    --accent:#B89A63; --accent-bg:#26301F;
  /* calendar */
  --raise:#1A3958; --on-accent:#0F2942;
  --chip-view:#1E4368; --chip-view-fg:#D7E6F4;
  --chip-meet:#3A3018; --chip-meet-fg:#F0DFBC;
  /* Dark mode is chosen, not flipped: these are re-validated against #153150. */
  --mark:#B68E43; --mark-soft:#3A3620; --track:#1B3A5A;
  --good:#5FBF8F; --warn:#D9A945; --bad:#E4796F;
    --ok:#7FBF9A; --ok-bg:#14301F;
    --warn:#B89A63; --warn-bg:#2E2917;
    --cold:#DC8A82; --cold-bg:#3A2020;
    --live:#8FB6DD; --live-bg:#14314C;
    --none:#8E9BAB; --none-bg:#193149;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(4,15,26,.45);
  }
}
:root[data-theme="navy"]{
  color-scheme:dark;
  --bg:#0F2942; --surface:#153150; --sunk:#0C2138;
  --line:#22405E; --line-soft:#1A3651;
  --text:#F2F5F8; --muted:#A3B0C0; --faint:#7E8C9E;
  --accent:#B89A63; --accent-bg:#26301F;
  /* calendar */
  --raise:#1A3958; --on-accent:#0F2942;
  --chip-view:#1E4368; --chip-view-fg:#D7E6F4;
  --chip-meet:#3A3018; --chip-meet-fg:#F0DFBC;
  /* Dark mode is chosen, not flipped: these are re-validated against #153150. */
  --mark:#B68E43; --mark-soft:#3A3620; --track:#1B3A5A;
  --good:#5FBF8F; --warn:#D9A945; --bad:#E4796F;
  --ok:#7FBF9A; --ok-bg:#14301F;
  --warn:#B89A63; --warn-bg:#2E2917;
  --cold:#DC8A82; --cold-bg:#3A2020;
  --live:#8FB6DD; --live-bg:#14314C;
  --none:#8E9BAB; --none-bg:#193149;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(4,15,26,.45);
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{background:var(--bg); color:var(--text);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none !important}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- sign in ---------- */
.gate-page{min-height:100svh; display:grid; place-items:center; padding:24px 16px}
.gate-card{width:100%; max-width:380px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:26px 24px; box-shadow:var(--shadow)}
.gate-card .mark{margin-bottom:18px}
.gate-card label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:4px}
.gate-card input{width:100%; margin-bottom:14px}
.err{color:var(--cold); font-size:13px; margin:0 0 12px; min-height:1.2em}

/* ---------- chrome ---------- */
header{position:sticky; top:env(safe-area-inset-top, 0px); z-index:30;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.bar{max-width:1240px; margin:0 auto; padding-block:10px; padding-inline:16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.mark{font-family:"Playfair Display", Georgia, serif; font-size:19px; font-weight:500;
  display:flex; align-items:baseline; gap:8px}
.mark em{font-style:italic; color:var(--accent)}
.mark span{font-family:"Inter",sans-serif; font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
nav{display:flex; gap:2px; background:var(--sunk); padding:3px; border-radius:9px;
  overflow-x:auto; max-width:100%}
nav button{font:inherit; font-size:13px; font-weight:600; color:var(--muted);
  background:none; border:0; border-radius:7px; padding:6px 12px; cursor:pointer; white-space:nowrap}
nav button[aria-selected="true"]{background:var(--surface); color:var(--text); box-shadow:var(--shadow)}
.whoami{margin-left:auto; display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted); flex-wrap:nowrap}
#whoname{white-space:nowrap; max-width:14ch; overflow:hidden; text-overflow:ellipsis}
.bar{row-gap:8px}
@media (max-width:1180px){
  .mark .logo{width:108px}
  input[type="search"]{min-width:120px}
}
@media (max-width:820px){
  .whoami{width:100%; margin-left:0; justify-content:flex-start; flex-wrap:wrap}
}

main{max-width:1240px; margin:0 auto; padding-inline:16px; padding-block:20px 64px}
h2{font-family:"Playfair Display", Georgia, serif; font-weight:500; font-size:22px; margin:0 0 3px; text-wrap:balance}
.sub{color:var(--muted); font-size:13px; margin:0 0 16px; max-width:72ch}
section + section{margin-top:32px}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:10px; align-items:stretch}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:11px;
  padding:13px 14px; display:flex; flex-direction:column; gap:3px}
.tile .m{margin-top:auto}
.tile .k{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.tile .v{font-size:25px; font-weight:600; line-height:1.15; letter-spacing:-.01em}
.tile .v.money{font-size:19px; line-height:1.3}
.tile .m{font-size:12px; color:var(--muted)}
.tile[data-flag="1"] .v{color:var(--cold)}

.panel{border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden}
.prow{display:grid; grid-template-columns:1fr auto; gap:5px 14px; padding:12px 15px;
  border:0; border-bottom:1px solid var(--line-soft); width:100%; text-align:left;
  font:inherit; color:inherit; background:none; cursor:pointer}
.prow:last-child{border-bottom:0}
.prow:hover{background:var(--sunk)}
.prow.flat{cursor:default}
.pname{font-weight:600; font-size:14px}
.pmeta{font-size:12px; color:var(--muted); grid-column:1/-1; display:flex; gap:10px; flex-wrap:wrap}
.pright{font-size:13px; color:var(--muted); white-space:nowrap}
.meter{grid-column:1/-1; height:6px; border-radius:99px; background:var(--sunk);
  display:flex; overflow:hidden; margin-top:4px}
.meter i{display:block; height:100%}
.meter i.done{background:var(--ok)} .meter i.part{background:var(--live)}
.meter i.none{background:color-mix(in srgb, var(--cold) 55%, transparent)}

.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; align-items:center}
select, input, textarea{font:inherit; font-size:13px; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:7px 10px}
/* Fills what is left of the row, but not to the point where the search box is
   wider than every filter beside it. */
input[type="search"]{flex:1; min-width:150px; max-width:360px}
textarea{width:100%; resize:vertical; min-height:70px; line-height:1.5}
.count{font-size:12px; color:var(--muted); margin-left:auto; white-space:nowrap}

.list{display:flex; flex-direction:column; gap:8px}
.row{width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  padding:12px 14px; display:grid; gap:4px 12px; grid-template-columns:1fr auto}
.row:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
.r1{display:flex; align-items:baseline; gap:9px; min-width:0}
.ref{font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--faint); flex:none}
.who{font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.r2{grid-column:1/-1; font-size:12px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap}
.r2 b{font-weight:500; color:var(--text)}
.pill{font-size:11px; font-weight:600; padding:3px 9px; border-radius:99px;
  white-space:nowrap; align-self:center}
.p-none{background:var(--none-bg); color:var(--none)}
.p-live{background:var(--live-bg); color:var(--live)}
.p-ok{background:var(--ok-bg); color:var(--ok)}
.p-cold{background:var(--cold-bg); color:var(--cold)}
.p-warn{background:var(--warn-bg); color:var(--warn)}
.empty{padding:32px 16px; text-align:center; color:var(--muted); font-size:14px;
  border:1px dashed var(--line); border-radius:12px}

.board{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr);
  gap:12px; overflow-x:auto; padding-bottom:6px}
.col{background:var(--sunk); border-radius:12px; padding:11px; min-width:240px}
.colh{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px}
.colh b{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700}
.colh span{font-size:12px; color:var(--faint)}
.card{width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; display:flex; flex-direction:column; gap:4px; margin-bottom:8px}
.card:last-child{margin-bottom:0}
.card b{font-size:13.5px; font-weight:600}
.card .cm{font-size:12px; color:var(--muted)}
.card .cv{font-size:13px; font-weight:600; color:var(--accent)}

/* The lead board. A column can hold forty leads, so the column scrolls on its
   own rather than making the page forty leads long. */
.colh b{display:flex; align-items:center; gap:7px}
.sdot{width:7px; height:7px; border-radius:99px; background:var(--none); flex:0 0 auto}
.sdot.t-live{background:var(--live)}
.sdot.t-ok{background:var(--ok)}
.sdot.t-warn{background:var(--warn)}
.sdot.t-cold{background:var(--cold)}
.colnote{font-size:11px; color:var(--warn); margin:-4px 0 8px; font-weight:600}
.colbody{max-height:62vh; overflow-y:auto; padding-right:2px}
.colempty{margin:0; padding:14px 0; text-align:center;
  font-size:12px; color:var(--faint)}
.card.lead .cn{font-size:12px; color:var(--muted); line-height:1.45}
.card.lead .cn.none{color:var(--warn); font-weight:600}

/* The team. A card each rather than a row each, so a person reads as a person.
   The summary strip sits above and counts the same things the cards do. */
.tsum{display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
  background:var(--sunk); border-radius:12px; padding:14px 18px; margin:0 0 16px}
.tsum .btn{margin-left:auto}
.tstat{display:flex; flex-direction:column; gap:2px; line-height:1.2}
.tstat b{font-size:18px; font-weight:600; color:var(--text)}
.tstat span{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.tstat.ok b{color:var(--ok)}
.tstat.warn b{color:var(--warn)}

.tgrid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.tcard{text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:18px 18px 16px; display:flex; flex-direction:column; gap:3px;
  box-shadow:var(--shadow)}
.tcard:hover{border-color:var(--accent)}
.tcard.off{opacity:.55}
.tface{position:relative; width:52px; height:52px; margin-bottom:10px}
.tav{display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:99px;
  background:var(--accent-bg); color:var(--accent);
  font-size:17px; font-weight:600; letter-spacing:.02em}
.ton{position:absolute; right:1px; bottom:1px; width:13px; height:13px;
  border-radius:99px; background:var(--ok); border:2.5px solid var(--surface)}
.tname{font-family:"Playfair Display",Georgia,serif; font-size:19px; font-weight:500}
.trole{font-size:12px; color:var(--muted); text-transform:capitalize}
.trole .onshift{color:var(--ok); font-weight:600}
.tstats{display:flex; gap:20px; margin:14px 0 12px;
  padding:12px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.tstats .tstat b{font-size:16px}
.tmoney{display:flex; flex-direction:column; gap:2px; line-height:1.2}
.tmoney b{font-size:17px; font-weight:600; color:var(--accent)}
.tmoney span{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.tband{font-size:12px; color:var(--muted); margin-top:8px}
.tmeta{font-size:12px; color:var(--muted); margin-top:6px; word-break:break-word}
.tmeta+.tmeta{margin-top:1px}
.tflag{font-size:11.5px; color:var(--warn); font-weight:600; margin-top:8px}

.scrim{position:fixed; inset:0; z-index:40; background:rgba(8,12,18,.5);
  display:flex; align-items:flex-end; justify-content:center}
.sheet{background:var(--surface); width:100%; max-width:580px; max-height:92svh; overflow:auto;
  border-radius:16px 16px 0 0; border:1px solid var(--line); border-bottom:0;
  padding:18px 18px calc(22px + env(safe-area-inset-bottom, 0px))}
@media(min-width:620px){.scrim{align-items:center} .sheet{border-radius:16px; border-bottom:1px solid var(--line)}}
.shead{display:flex; align-items:flex-start; gap:12px; margin-bottom:6px}
.shead h3{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:21px; margin:0; flex:1}
.x{font:inherit; font-size:22px; line-height:1; background:none; border:0; color:var(--muted); cursor:pointer; padding:2px 6px}
.facts{display:grid; grid-template-columns:auto 1fr; gap:5px 14px; font-size:13px; margin:12px 0 18px}
.facts dt{color:var(--muted)} .facts dd{margin:0; overflow-wrap:anywhere}
/* A range filter: one label and two boxes that read as one control. */
.filters .range{display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:3px 4px 3px 10px}
.filters .range label{font-size:11px; color:var(--muted); font-weight:600; white-space:nowrap}
.filters .range input{width:82px; border:0; background:transparent; padding:5px 6px;
  font-size:13px; color:var(--text)}
.filters .range input:focus{outline:2px solid var(--mark); outline-offset:-2px; border-radius:6px}
.filters .range input::-webkit-outer-spin-button,
.filters .range input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.filters .range input[type=number]{-moz-appearance:textfield; appearance:textfield}

/* Who holds the unit, and how to reach them. The phone number is the link, so
   an agent taps it and is in WhatsApp with the holder. */
.holder{display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px;
  background:var(--sunk); border-radius:12px; padding:11px 14px; margin:0 0 14px}
.holder .hlab{font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); font-weight:700}
.holder .hwho{font-size:15px; color:var(--text)}
.holder .hwa{margin-left:auto; display:inline-flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:99px; padding:7px 14px; text-decoration:none; color:var(--text);
  font-weight:600; font-size:13px}
.holder .hwa:hover{border-color:var(--mark); color:var(--mark)}
.holder .hwa .num{color:var(--muted); font-weight:500}
.holder .hno{margin-left:auto; font-size:12px; color:var(--faint)}

.fields{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.fields label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); font-weight:600}
.fields label.wide{grid-column:1/-1}
/* A unit somebody else holds is read only. It has to look read only, or an
   agent types into it and finds out at the save. */
.fields input:disabled,.fields select:disabled,.fields textarea:disabled{
  background:var(--sunk); color:var(--muted); border-style:dashed; cursor:default}
.gate{font-size:12px; border-radius:8px; padding:9px 11px; margin-top:12px;
  background:var(--warn-bg); color:var(--text);
  border:1px solid color-mix(in srgb, var(--warn) 30%, transparent)}
.acts{display:flex; gap:9px; margin-top:16px; align-items:center; flex-wrap:wrap}
.btn{font:inherit; font-size:14px; font-weight:600; cursor:pointer; border-radius:9px;
  padding:9px 17px; border:1px solid transparent}
.btn.primary{background:var(--accent); color:#fff}
.btn.primary[disabled]{opacity:.45; cursor:not-allowed}
.btn.ghost{background:none; border-color:var(--line); color:var(--text)}
.btn.small{font-size:12px; padding:5px 11px}
.said{font-size:12px; color:var(--muted); margin-left:auto}
.trail{margin-top:18px; border-top:1px solid var(--line-soft); padding-top:13px}
.trail h4{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  margin:0 0 8px; font-weight:600}
.trail ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;
  font-size:12px; color:var(--muted)}
.trail time{color:var(--faint)}
footer{max-width:1240px; margin:0 auto; padding-inline:16px; padding-block:26px 40px;
  font-size:12px; color:var(--faint); border-top:1px solid var(--line-soft)}
@media (prefers-reduced-motion:no-preference){
  .row,.btn,.tile,.card,.prow{transition:border-color .14s ease, background .14s ease}
}


/* ---------- the mark ---------- */
.logo{display:block; color:var(--text)}
.logo svg{display:block; width:100%; height:100%}
.mark .logo{width:132px; aspect-ratio:1025/394}
.gate-card .logo{width:190px; aspect-ratio:1025/394; margin:0 auto 22px}
.mark{gap:0}

/* Playfair carries the headings, so give them room, per the guidelines:
   "Give important ideas room." */
h2{letter-spacing:-.01em; line-height:1.18}
.gate-card h1{font-family:"Playfair Display",Georgia,serif; font-weight:400;
  font-size:22px; margin:0 0 4px; text-align:center}
.gate-card .lede{color:var(--muted); font-size:13px; text-align:center; margin:0 0 20px}

/* Uppercase sparingly, for labels, navigation and compact data. */
.tile .k, .colh b, .trail h4{font-weight:600; letter-spacing:.1em}

/* ---------- theme switch ---------- */
.themer{flex:none; min-width:84px; letter-spacing:.06em; text-transform:uppercase;
  font-size:11px; color:var(--muted)}


/* ---------- the calendar ---------- */
.cal{display:grid; gap:10px}
.calday{border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden}
.calday > h3{margin:0; padding:10px 15px; font-family:"Inter",sans-serif; font-size:11px;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  background:var(--sunk); border-bottom:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:baseline}
.calday > h3 em{font-style:normal; color:var(--faint); letter-spacing:0; text-transform:none; font-weight:500}
.calday.today > h3{color:var(--accent)}
.slot{display:grid; grid-template-columns:auto 1fr auto; gap:4px 14px; align-items:baseline;
  width:100%; text-align:left; font:inherit; color:inherit; background:none; cursor:pointer;
  border:0; border-bottom:1px solid var(--line-soft); padding:11px 15px}
.slot:last-child{border-bottom:0}
.slot:hover{background:var(--sunk)}
.slot .t{font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap}
.slot .n{font-weight:600; font-size:14px}
.slot .m{grid-column:2/-1; font-size:12px; color:var(--muted)}

/* ------------------------------------------------------------- the calendar
   A month grid first, because that is what a calendar looks like, with a week
   and a day view on an hour rail behind it. */
.calbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin:14px 0 10px}
.calnav{display:flex;align-items:center;gap:6px}
.calmodes{display:flex;align-items:center;gap:6px}
.calnow{font-family:"Playfair Display",Georgia,serif;font-size:19px;margin-left:8px;
  color:var(--text);white-space:nowrap}
.btn.small.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.month{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.month .dow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--raise)}
.month .dow span{padding:9px 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.month .cells{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(104px,auto)}
.cell{border-top:1px solid var(--line);border-left:1px solid var(--line);padding:6px 6px 8px;
  min-width:0;display:flex;flex-direction:column;gap:3px;cursor:pointer}
.cell:nth-child(7n+1){border-left:0}
.cell.out{opacity:.38}
.cell.wknd{background:var(--raise)}
.cell.today{box-shadow:inset 0 0 0 2px var(--accent)}
.cell .num{font-size:12px;font-weight:600;color:var(--muted);line-height:1.6}
.cell.today .num{color:var(--accent)}
.cell .more{background:none;border:0;color:var(--muted);font:inherit;font-size:11px;
  text-align:left;padding:1px 3px;cursor:pointer;text-decoration:underline}

.chip{display:flex;align-items:baseline;gap:5px;width:100%;text-align:left;border:0;
  border-radius:5px;padding:3px 6px;font:inherit;font-size:11.5px;cursor:pointer;
  overflow:hidden;white-space:nowrap;background:var(--chip-view);color:var(--chip-view-fg)}
.chip.meet{background:var(--chip-meet);color:var(--chip-meet-fg)}
.chip.done{background:var(--raise);color:var(--muted);text-decoration:line-through}
.chip .ct{font-variant-numeric:tabular-nums;font-weight:600;flex:0 0 auto}
.chip .cn{overflow:hidden;text-overflow:ellipsis}
.chip:hover{filter:brightness(1.08)}

.hours{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.hhead{display:grid;grid-template-columns:62px repeat(var(--cols),1fr);background:var(--raise)}
.hname{padding:9px 10px;font-size:12px;font-weight:600;color:var(--muted);
  border-left:1px solid var(--line)}
.hname.today{color:var(--accent)}
.hr{display:grid;grid-template-columns:62px repeat(var(--cols),1fr);border-top:1px solid var(--line);
  min-height:46px}
.hlabel{padding:5px 10px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.hcell{border-left:1px solid var(--line);padding:3px 5px;display:flex;flex-direction:column;gap:3px;
  min-width:0}
.hcell.today{background:var(--raise)}
.calfoot{margin-top:12px}
.btn.danger{color:#B4453C;border-color:#B4453C55}

@media (max-width:820px){
  .month .cells{grid-auto-rows:minmax(74px,auto)}
  .chip .cn{display:none}
  .calnow{font-size:16px}
}

/* -------------------------------------------- the money and the documents */
.fgroup{grid-column:1/-1;margin:16px 0 2px;font-family:"Playfair Display",Georgia,serif;
  font-size:16px;font-weight:500;color:var(--text);
  border-bottom:1px solid var(--line-soft);padding-bottom:6px}
.panel{margin-top:18px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  background:var(--raise)}
.panel h4{margin:0 0 8px;font-family:"Playfair Display",Georgia,serif;font-size:17px;font-weight:500}
.sums{width:100%;border-collapse:collapse}
.sums th{text-align:left;font-weight:500;color:var(--muted);padding:4px 0;font-size:13px}
.sums td{text-align:right;font-variant-numeric:tabular-nums;padding:4px 0;font-size:14px;font-weight:600}
.sums tr:nth-last-child(2) td,.sums tr:nth-last-child(2) th{border-top:1px solid var(--line);
  padding-top:8px}
.why{margin:10px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.slot{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--surface);
  display:flex;flex-direction:column;gap:6px}
.slot.has{border-color:var(--accent)}
.sl-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
.sl-f{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}
.sl-f a{color:var(--accent);word-break:break-all}
.lnk{background:none;border:0;color:var(--muted);font:inherit;font-size:12px;
  text-decoration:underline;cursor:pointer;flex:0 0 auto}
.found{display:flex;flex-direction:column;gap:4px;border-top:1px dashed var(--line);padding-top:8px}
.found span{font-size:12px;font-variant-numeric:tabular-nums}
.found em{color:var(--muted);font-style:normal;text-transform:capitalize;margin-right:5px}
.up{display:inline-block;cursor:pointer}
.up .btn{pointer-events:none}
.slot .sub{font-size:11.5px;margin:0;line-height:1.5}

/* ------------------------------------- where the label and the record differ */
.panel.mis{border-color:#B4453C55;padding:0;overflow:hidden}
.panel.mis.soft{border-color:var(--line)}
.mishead{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 14px;background:#B4453C14;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel.mis.soft .mishead{background:var(--raise)}
.mishead strong{font-size:13.5px;color:var(--text);font-weight:600}
.misrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 14px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.misrow:last-child{border-bottom:0}
.misopen{flex:1 1 320px;min-width:0;background:none;border:0;text-align:left;
  font:inherit;cursor:pointer;padding:0;display:flex;flex-direction:column;gap:3px}
.misopen:hover .pname{text-decoration:underline}
.misrow .pname{font-size:13.5px;font-weight:600;color:var(--text)}
.misrow .pmeta{font-size:12px;color:var(--muted);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.misfix{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.misfix .was{font-size:12px;color:var(--muted);text-decoration:line-through}
.misfix .arrow{font-size:11px;color:var(--muted)}
.misfix .now{font-size:12px;font-weight:600;color:var(--accent)}
mark{background:var(--accent-bg);color:var(--text);padding:0 3px;border-radius:3px;
  font-weight:600}
.gate mark{background:var(--accent-bg)}
#d-gate .btn{margin-left:6px;vertical-align:middle}
@media (max-width:700px){
  .misrow .pmeta{white-space:normal}
  .misfix{width:100%;justify-content:flex-end}
}

/* ------------------------------------------------------------- the charts
   Bars are drawn as divs, not SVG, because a div bar reflows with the text
   beside it and needs no viewBox arithmetic. Marks are capped at 20px, the
   data end is rounded and the baseline end is square, per the chart spec. */
.wide2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width:980px){ .wide2{grid-template-columns:1fr} }

.chart{border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:14px 16px 16px}
.chart h3{margin:0 0 2px;font-family:"Playfair Display",Georgia,serif;
  font-size:17px;font-weight:500;color:var(--text)}
.chart .sub{margin:0 0 12px;font-size:12.5px;line-height:1.5}
.crows{display:flex;flex-direction:column;gap:9px}
.crow{display:grid;grid-template-columns:minmax(96px,auto) 1fr auto;gap:10px;align-items:center}
.crow .clab{font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
/* Both are spans, so they must be told to be blocks. Left inline, a percentage
   width has nothing to resolve against and the bar floats somewhere in the
   middle of its track, which is exactly what it did. */
.crow .ctrack{display:block;background:var(--track);border-radius:3px;height:20px;
  position:relative;overflow:hidden}
.crow .cbar{display:block;height:100%;background:var(--mark);
  border-radius:0 4px 4px 0;transition:width .35s ease}
.crow .cval{font-size:12.5px;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.crow .cdrop{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap;margin-left:6px}
.crow:hover .cbar{filter:brightness(1.08)}
.ctip{position:relative}
.ctip:hover::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 6px);
  background:var(--text);color:var(--bg);font-size:11.5px;padding:5px 8px;border-radius:6px;
  white-space:nowrap;z-index:40;pointer-events:none;box-shadow:0 4px 14px #0003}

.asides{display:flex;gap:16px;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line-soft)}
.asides div{font-size:12px;color:var(--muted)}
.asides strong{display:block;font-size:17px;color:var(--text);font-weight:600;
  font-variant-numeric:tabular-nums}

.srcnote{margin:11px 0 0;font-size:12.5px;color:var(--text);
  background:var(--accent-bg);border-left:3px solid var(--mark);
  padding:8px 11px;border-radius:0 6px 6px 0;line-height:1.5}

.stall{display:flex;flex-direction:column}
.stallrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line-soft);cursor:pointer}
.stallrow:last-child{border-bottom:0}
.stallrow .sname{font-size:13px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stallrow .smeta{font-size:11.5px;color:var(--muted)}
.days{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
  padding:2px 8px;border-radius:20px;white-space:nowrap}
.days.good{color:var(--good);background:color-mix(in srgb, var(--good) 12%, transparent)}
.days.warning{color:var(--warn);background:color-mix(in srgb, var(--warn) 14%, transparent)}
.days.serious{color:var(--bad);background:color-mix(in srgb, var(--bad) 14%, transparent)}

/* matching units to a lead */
.match{margin-top:16px}
.matchrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;
  padding:9px 0;border-bottom:1px solid var(--line-soft)}
.matchrow:last-child{border-bottom:0}
.matchrow .mwhy{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:2px}
.matchrow .mref{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.pill.tiny{font-size:10px;padding:1px 6px}

/* ============================================================ the dashboard
   Dense, terse, and built out of cards on a grid. No explanatory prose: a
   dashboard is read at a glance by someone who already knows their business. */
.dash{display:flex;flex-direction:column;gap:14px;padding-top:4px}

.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:1180px){ .kpis{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .kpis{grid-template-columns:repeat(2,1fr)} }
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:12px 13px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi .kl{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .kv{font-size:25px;line-height:1.15;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .kf{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.flag{border-color:var(--mark)}
.kpi.flag .kv{color:var(--mark)}

/* stretch, so three cards side by side share one baseline instead of
   ending at three different heights */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:stretch}
.grid3>.card,.grid2>.card{display:flex;flex-direction:column}
@media (max-width:1180px){ .grid3{grid-template-columns:1fr 1fr} }
@media (max-width:880px){ .grid3,.grid2{grid-template-columns:1fr} }

.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;min-width:0}
.card>header{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--line)}
.card>header h3{margin:0;font-size:13px;font-weight:600;letter-spacing:.01em;
  color:var(--text);font-family:Inter,system-ui,sans-serif}
.card>header .hint{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600;white-space:nowrap}
.card .crows{padding:14px}
.card .empty.small{padding:22px 14px;font-size:12.5px;margin:0}
.cfoot{padding:9px 14px;border-top:1px solid var(--line-soft);font-size:11px;
  color:var(--muted);line-height:1.5}

/* donut */
.donutwrap{display:flex;align-items:center;gap:14px;padding:14px;flex-wrap:wrap}
.donut{flex:0 0 auto}
.donut .dnum{text-anchor:middle;font-size:23px;font-weight:600;fill:var(--text);
  font-family:Inter,system-ui,sans-serif}
.donut .dcap{text-anchor:middle;font-size:8.5px;letter-spacing:.12em;fill:var(--muted);
  font-weight:600;font-family:Inter,system-ui,sans-serif}
.legend{list-style:none;margin:0;padding:0;flex:1 1 150px;min-width:0;
  display:flex;flex-direction:column;gap:7px}
.legend li{display:grid;grid-template-columns:9px 1fr auto auto;gap:8px;align-items:center;
  font-size:12px}
.legend i{width:9px;height:9px;border-radius:2px;display:block}
.legend .ln{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend .lv{color:var(--muted);font-variant-numeric:tabular-nums}
.legend .lr{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;
  min-width:38px;text-align:right}

/* funnel */
.funnel{display:block;width:100%;height:auto;padding:14px 14px 4px}
.fstep{cursor:default}
.fstep:hover polygon{fill-opacity:1}
.funnel .flab{text-anchor:middle;font-size:14px;font-weight:600;fill:var(--surface);
  font-family:Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums;
  paint-order:stroke;stroke:var(--text);stroke-width:0.6px;stroke-opacity:.25}
.fkeys{list-style:none;margin:0;padding:6px 14px 14px;display:flex;flex-direction:column;gap:5px}
.fkeys li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;
  font-size:12px}
.fkeys li span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fkeys li b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}
.fkeys li em{font-style:normal;color:var(--muted);font-size:11px;
  font-variant-numeric:tabular-nums;min-width:44px;text-align:right}

/* dense tables */
table.grid{width:100%;border-collapse:collapse;font-size:12.5px}
table.grid thead th{text-align:left;font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);font-weight:600;
  padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.grid td{padding:8px 12px;border-bottom:1px solid var(--line-soft);
  color:var(--text);vertical-align:middle}
table.grid tbody tr:last-child td{border-bottom:0}
table.grid tr.click{cursor:pointer}
table.grid tr.click:hover td{background:var(--raise)}
table.grid td.mono{font-variant-numeric:tabular-nums;color:var(--muted);font-size:11.5px;
  white-space:nowrap}
table.grid td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
table.grid td.note{color:var(--muted);max-width:210px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
table.grid .was{color:var(--muted);text-decoration:line-through;font-size:11.5px}
table.grid .now{color:var(--mark);font-weight:600;font-size:11.5px}
table.grid .btn.small{padding:2px 9px;font-size:11px}

/* the stage change, kept on one line */
table.grid td.stg{white-space:nowrap}
table.grid td.stg .arr{color:var(--muted);margin:0 5px;font-size:11px}
table.grid td:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
/* The card stretches to match its neighbours, so the donut is pinned to the
   top of it rather than floating in the middle of the leftover space. */
.card .donutwrap{flex:0 0 auto;align-content:flex-start}
.card .funnel{flex:0 0 auto}
.legend{flex:1 1 168px}

/* the action column must not be clipped when the table is narrow */
table.grid th:last-child,table.grid td:last-child{width:1%;white-space:nowrap;
  padding-right:14px;text-align:right}
table.grid td.note{max-width:190px}
.subhead{padding:11px 14px 0;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);font-weight:600;border-top:1px solid var(--line-soft);margin-top:4px}
.crows.tight{padding:9px 14px 14px;gap:7px}
.crows.tight .clab{max-width:120px}

/* ---------------------------------------------------------- stage bars
   The dashboard is built on stages. Each one is a bar with its count and its
   share, which reads at a glance and does not pretend to be a funnel. */
.stages{list-style:none;margin:0;padding:12px 14px 14px;display:flex;
  flex-direction:column;gap:8px}
.stages li{display:grid;grid-template-columns:118px 1fr 34px 62px;gap:9px;
  align-items:center}
.stages .sname{font-size:12.5px;color:var(--text);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.stages .strack{display:block;height:18px;background:var(--track);border-radius:3px;
  overflow:hidden}
.stages .sfill{display:block;height:100%;background:var(--mark);
  border-radius:0 4px 4px 0;transition:width .35s ease}
.stages .sn{font-size:13px;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;text-align:right}
.stages .ssub{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}
/* an exit is not a step forward, so it is drawn back */
.stages li.exit .sname,.stages li.exit .sn{color:var(--muted)}
.stages li.exit .sfill{background:var(--track);box-shadow:inset 0 0 0 1px var(--line)}
.stages li:hover .sfill{filter:brightness(1.08)}
table.grid th.num{text-align:right}

/* ------------------------------------------------------------------ tasks */
.kpis.tasksum{grid-template-columns:repeat(5,1fr);margin-bottom:14px}
@media (max-width:980px){ .kpis.tasksum{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .kpis.tasksum{grid-template-columns:repeat(2,1fr)} }
.tasklist{padding:0}
.taskrow{display:grid;grid-template-columns:22px 1fr auto auto auto;gap:11px;
  align-items:center;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.taskrow:last-child{border-bottom:0}
.taskrow.off .ttitle{text-decoration:line-through;color:var(--muted)}
.tick{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--line);
  background:var(--surface);cursor:pointer;padding:0;position:relative;flex:0 0 auto}
.tick:hover{border-color:var(--accent)}
.tick.on{background:var(--accent);border-color:var(--accent)}
.tick.on::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tbody{min-width:0}
.ttitle{font-size:13.5px;font-weight:600;color:var(--text)}
.tmeta{font-size:11.5px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tref{background:var(--raise);border:1px solid var(--line);border-radius:6px;
  font:inherit;font-size:11px;color:var(--muted);padding:2px 8px;cursor:pointer;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tref:hover{border-color:var(--accent);color:var(--accent)}
.days{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:20px;
  white-space:nowrap;color:var(--muted)}
@media (max-width:700px){
  .taskrow{grid-template-columns:22px 1fr auto}
  .taskrow .tref,.taskrow .lnk{display:none}
}

/* -------------------------------------------------- photographs on a unit */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;
  margin-bottom:11px}
.shot{margin:0;position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;
  background:var(--raise);border:1px solid var(--line)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .x{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;
  border:0;background:#0009;color:#fff;font-size:15px;line-height:1;cursor:pointer;
  display:none;padding:0}
.shot:hover .x{display:block}
.warnbit{color:var(--warn);font-weight:600}