/* Keytrail dashboard.
   Palette note: stages use the product's own colours (Drive folders, side
   panel), so a stage looks the same everywhere. Some pairs are close for
   colour-blind readers (Prepping purple / Active blue under protanopia, Conditional
   yellow / Pending orange), so colour is never the only cue: every pipeline bar
   and transaction folder is labelled with its stage name. */

/* Fonts, served from this site (the CSP allows fonts from 'self' only):
   General Sans for headings, DM Sans for text, JetBrains Mono for codes. */
@font-face{font-family:"General Sans";src:url(/assets/fonts/general-sans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url(/assets/fonts/general-sans-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/assets/fonts/dm-sans-latin.woff2) format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* Keytrail's tokens (DESIGN.md). The side panel's stylesheet carries the same
   names and values. Colours appear nowhere else in this file. */
:root{
  color-scheme: light;
  --page:#f5f7fa; --surface:#ffffff; --raised:#f9fbfc; --soft:#e8f3f0;
  --line:#dde4ea; --hair:#eaeef2; --line-strong:#8392a3;
  --ink:#111c27; --ink-2:#475569; --muted:#5f6f82;
  --brand:#0e6f5c; --brand-deep:#0b1f33; --brand-bright:#14a383;
  --on-brand:#ffffff;   /* text on a --brand fill */
  --hero:linear-gradient(135deg,#0b1f33 0%,#0d3b4f 55%,#136b62 100%);   /* page headers */
  --on-hero:#ffffff; --hero-glass:rgba(255,255,255,.14); --hero-glass-line:rgba(255,255,255,.3); --hero-glass-hover:rgba(255,255,255,.24);
  --accent:#5eead4;     /* the trail in the mark, highlights on --hero */

  --stage-out:#8a9691;                     /* Cancelled — left the pipeline */
  /* two-series categorical, validated */
  --series-actual:#0f8e68; --series-scheduled:#2a78d6;
  /* stage colours for the pipeline chart and transaction folders: the side panel's */
  --deal-searching:#1aa9a1; --deal-prepping:#a47ae2; --deal-active:#4986e7; --deal-conditional:#f6bf26; --deal-pending:#ffad46;
  --deal-closed:#16a765; --deal-cancelled:#d06b64;

  /* status: a fill, and an ink that is safe for text */
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b; --info:#2a78d6;
  --good-ink:#117a3e; --soon-ink:#9a5a12; --danger-ink:#c03434; --info-ink:#1f5fc9;
  --on-warn:#2b1a05; --on-good:#ffffff;   /* glyphs on --good, --critical and stage fills */    /* glyphs on --warning and --serious */

  /* Cards rest flat on their border; a shadow comes only with a hover. */
  --shadow-1:none;
  --shadow-1-hover:0 8px 30px rgba(15,30,45,.08);
  --brand-glow:rgba(14,111,92,.35);   /* under a primary button on hover */
  --shadow-2:0 10px 28px rgba(11,31,51,.16);
  --shadow-3:0 24px 60px rgba(11,31,51,.28);
  --scrim:rgba(8,16,26,.6); --scrim-light:rgba(8,19,31,.25);
  --glow:rgba(255,255,255,.14);

  --fs-11:.6875rem; --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-15:.9375rem;
  --fs-16:1rem; --fs-19:1.1875rem; --fs-24:1.5rem; --fs-31:1.9375rem;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  --font-display:"General Sans","DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --page:#0f1720; --surface:#16212c; --raised:#1b2835; --soft:#12302b;
    --line:#2a3a4a; --hair:#26384a; --line-strong:#6a8096;
    --ink:#e6edf3; --ink-2:#c6d0da; --muted:#aebbc8;
    --brand:#5fd4b8; --on-brand:#06231d; --brand-bright:#2cc49f;
    --hero:linear-gradient(135deg,#08131f 0%,#0b2a3a 55%,#0f4a45 100%);
    --stage-out:#6f7d8a;
    --series-actual:#2dab86; --series-scheduled:#3987e5;
    --good-ink:#2cc47a; --soon-ink:#ec835a; --danger-ink:#f07a72; --info-ink:#8db7ff;
    --shadow-1:none; --shadow-1-hover:0 8px 30px rgba(0,0,0,.35); --brand-glow:rgba(95,212,184,.25);
    --shadow-2:0 10px 28px rgba(0,0,0,.4); --shadow-3:0 24px 60px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#0f1720; --surface:#16212c; --raised:#1b2835; --soft:#12302b;
  --line:#2a3a4a; --hair:#26384a; --line-strong:#6a8096;
  --ink:#e6edf3; --ink-2:#c6d0da; --muted:#aebbc8;
  --brand:#5fd4b8; --on-brand:#06231d; --brand-bright:#2cc49f;
  --hero:linear-gradient(135deg,#08131f 0%,#0b2a3a 55%,#0f4a45 100%);
  --stage-out:#6f7d8a;
  --series-actual:#2dab86; --series-scheduled:#3987e5;
  --good-ink:#2cc47a; --soon-ink:#ec835a; --danger-ink:#f07a72; --info-ink:#8db7ff;
  --shadow-1:none; --shadow-1-hover:0 8px 30px rgba(0,0,0,.35); --brand-glow:rgba(95,212,184,.25);
  --shadow-2:0 10px 28px rgba(0,0,0,.4); --shadow-3:0 24px 60px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font:400 var(--fs-15)/1.55 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
/* Headings in General Sans, set tight; the bigger, the tighter. */
h1,h2,h3,.tile-value,.brand{font-family:var(--font-display)}
h1{letter-spacing:-.03em}
h2,h3,.tile-value{letter-spacing:-.015em}
code,kbd,samp,.mono{font-family:var(--font-mono);font-weight:400}
a{color:var(--brand)}

/* ---------- shell ---------- */
.topbar{
  background:var(--hero);
  color:var(--on-hero); padding:20px 24px 24px;
}
.topbar-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-size:var(--fs-11);font-weight:600;letter-spacing:1.5px;margin:0;display:flex;align-items:center;gap:8px;color:var(--on-hero)}
/* The Keytrail mark beside the wordmark, in white for the green header. */
.brand::before{content:"";width:18px;height:18px;flex:0 0 auto;background:url(/assets/mark-light.svg) center/contain no-repeat;border-radius:var(--r-xs)}
.topbar h1{font-size:var(--fs-24);font-weight:700;margin:2px 0 0;line-height:1.2}
.spacer{flex:1}
main{max-width:1280px;margin:0 auto;padding:24px 24px 72px}

/* ---------- filter row: one row, above everything it scopes ---------- */
.filters{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;margin:-36px 0 20px;box-shadow:var(--shadow-1);position:relative;z-index:2;
}
.filters label{font-size:var(--fs-11);font-weight:600;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.filters select,.filters input{
  font:inherit;font-size:var(--fs-13);padding:8px 10px;border:1px solid var(--line-strong);min-height:36px;
  border-radius:var(--r-sm);background:var(--raised);color:var(--ink);
}
.filters input[type="search"]{min-width:190px;flex:1}
.filter-note{font-size:var(--fs-12);color:var(--muted);margin-left:auto}

/* ---------- stat tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:16px;margin-bottom:16px}
.tile{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-1);transition:box-shadow .2s,border-color .2s,transform .2s var(--ease)}
.tile-label{font-size:var(--fs-11);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.tile-value{font-size:var(--fs-31);line-height:1.1;font-weight:700;margin:0}   /* proportional figures, not tabular */
.tile-sub{font-size:var(--fs-12);color:var(--ink-2);margin:6px 0 0}
.tile.alert .tile-value{color:var(--danger-ink)}

/* ---------- cards & charts ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-1);transition:box-shadow .2s,border-color .2s}
.card-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.card h2{font-size:var(--fs-16);font-weight:700;line-height:1.4;margin:0;display:flex;align-items:center;gap:8px}
.card h2::before{content:"";width:4px;height:16px;border-radius:var(--r-xs);background:var(--brand-bright);flex:0 0 auto}
.card-sub{font-size:var(--fs-12);color:var(--muted);margin:0 0 14px}
.card-head .spacer{flex:1}
/* An action that reads as text: sentence case, so it never looks like a label. */
.link-btn{
  border:0;background:transparent;color:var(--brand);font:inherit;font-size:var(--fs-13);font-weight:700;
  cursor:pointer;padding:4px 8px;border-radius:var(--r-sm);transition:background-color .14s;
}
.link-btn:hover{background:var(--soft)}
.link-btn:active{background:color-mix(in srgb,var(--brand) 18%,transparent)}
.link-btn:disabled{opacity:.55;cursor:not-allowed}

/* horizontal bars — 2px surface gap between fills, no borders on marks */
.hbar-row{display:grid;grid-template-columns:104px 1fr 34px;align-items:center;gap:10px;margin-bottom:10px}
.hbar-name{font-size:var(--fs-13);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-track{display:block;background:var(--hair);border-radius:var(--r-xs);height:19px;position:relative;overflow:hidden}
.hbar-fill{display:block;height:100%;border-radius:0 4px 4px 0;transition:width .35s cubic-bezier(.4,0,.2,1)}
.hbar-count{font-size:var(--fs-13);color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
button.hbar-row{width:100%;border:0;background:transparent;font:inherit;color:inherit;text-align:left;padding:2px 4px;margin:0 -4px 8px;border-radius:var(--r-sm);cursor:pointer;transition:background-color .14s}
button.hbar-row:hover{background:var(--soft)}
.hbar-row:focus-visible .hbar-name,.hbar-row:hover .hbar-name{color:var(--ink)}

/* column chart */
.cols{display:flex;align-items:flex-end;gap:2px;height:168px;padding-top:6px;border-bottom:1px solid var(--line)}
.col-group{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%;position:relative;cursor:default}
.col{display:block;width:13px;border-radius:4px 4px 0 0;min-height:2px;transition:height .35s cubic-bezier(.4,0,.2,1)}
.col.actual{background:var(--series-actual)}
.col.scheduled{background:var(--series-scheduled)}
.col-axis{display:flex;gap:2px;margin-top:8px}
.col-axis span{flex:1;text-align:center;font-size:var(--fs-11);color:var(--muted);font-variant-numeric:tabular-nums}
.col-peak{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:var(--fs-11);font-weight:700;color:var(--ink-2);white-space:nowrap}

.legend{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 0;font-size:var(--fs-12);color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.swatch{width:10px;height:10px;border-radius:var(--r-xs);flex:0 0 auto}

/* ---------- agenda ---------- */
.agenda-group{margin-bottom:16px}
.agenda-group h3{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.agenda-item{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--hair)}
.agenda-item:last-child{border-bottom:0}
.agenda-icon{flex:0 0 auto;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-11);font-weight:600;color:var(--on-good);margin-top:1px}
.agenda-icon.overdue{background:var(--critical)}
.agenda-icon.soon{background:var(--serious);color:var(--on-warn)}
.agenda-icon.later{background:var(--stage-out)}
.agenda-body{min-width:0;flex:1}
.agenda-what{font-size:var(--fs-14);font-weight:600;margin:0}
.agenda-where{font-size:var(--fs-12);color:var(--muted);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agenda-when{font-size:var(--fs-12);text-align:right;flex:0 0 auto;color:var(--ink-2);font-variant-numeric:tabular-nums}
.agenda-when b{display:block;font-size:var(--fs-11);font-weight:600}
.agenda-when.overdue b{color:var(--danger-ink)}
.agenda-when.soon b{color:var(--soon-ink)}

/* ---------- table twin ---------- */
.table-wrap{overflow-x:auto;margin-top:6px}
table{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--hair);white-space:nowrap}
th{font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- tooltip ---------- */
.tip{
  position:fixed;pointer-events:none;z-index:50;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px;font-size:var(--fs-13);
  box-shadow:var(--shadow-2);opacity:0;transition:opacity .12s;max-width:260px;
}
.tip.on{opacity:1}
.tip b{display:block;margin-bottom:2px;font-size:var(--fs-13)}
.tip-row{display:flex;align-items:center;gap:8px;color:var(--ink-2)}

.empty{color:var(--muted);font-size:var(--fs-13);padding:20px 0;text-align:center}
.hidden{display:none!important}

footer{max-width:1180px;margin:0 auto;padding:0 20px 40px;color:var(--muted);font-size:var(--fs-13)}
@media (max-width:620px){
  .hbar-row{grid-template-columns:86px 1fr 28px}
  .topbar h1{font-size:var(--fs-19)}
  .tile-value{font-size:var(--fs-24)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.card-count{font-size:var(--fs-12);color:var(--muted)}
.deal-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;width:100%;
  border:0;border-bottom:1px solid var(--hair);background:transparent;color:var(--ink);
  font:inherit;text-align:left;padding:10px 8px;cursor:pointer;border-radius:var(--r-sm)}
.deal-row:last-child{border-bottom:0}
.deal-row:hover,.deal-row:focus-visible{background:var(--soft)}
.deal-row>span:first-child{display:block;min-width:0}
.deal-row .addr{display:block;font-size:var(--fs-14);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal-row .who{display:block;font-size:var(--fs-12);color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal-row .next{display:block;font-size:var(--fs-12);color:var(--ink-2);text-align:right;white-space:nowrap}
.deal-row .next b{display:block;font-size:var(--fs-11);font-weight:600}

/* Transaction folders: one per stage, Closed split by year. */
.folder{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);margin-bottom:10px;overflow:hidden}
.folder.stage{border-left:4px solid var(--folder-accent,var(--stage-out))}
.folder>summary{display:flex;align-items:center;gap:10px;padding:12px 12px;cursor:pointer;list-style:none;
  font-weight:700;color:var(--ink);background:var(--raised);user-select:none}
.folder>summary::-webkit-details-marker{display:none}
.folder>summary:hover{background:var(--soft)}
.folder>summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.folder-chevron{width:0;height:0;border-left:5px solid var(--muted);border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .15s}
.folder[open]>summary .folder-chevron{transform:rotate(90deg)}
.folder-count{margin-left:auto;background:var(--hair);color:var(--ink-2);border-radius:var(--r-md);padding:2px 10px;font-size:var(--fs-11);font-weight:700}
.folder-body{padding:4px 8px 6px}
.folder.year{margin:6px 0;border-radius:var(--r-sm)}
.folder.year>summary{padding:8px 10px;font-size:var(--fs-13);background:transparent}
.folder.year>summary:hover{background:var(--soft)}
.folder.year .folder-body{padding:2px 6px 4px}
.folder-empty{margin:8px;color:var(--muted);font-size:var(--fs-12);text-align:center}
.warn-dot{color:var(--danger-ink);font-weight:600;margin-right:6px}

.drawer{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(2px);z-index:40;
  padding:24px 14px;overflow:auto}
.drawer-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);max-width:560px;
  margin:0 auto;padding:20px;box-shadow:var(--shadow-3)}
.drawer-head{display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line);
  margin:-4px -20px 14px;padding:0 20px 14px}
.drawer-head h2{font-size:var(--fs-19);margin:0}
.drawer-sub{font-size:var(--fs-13);color:var(--muted);margin:4px 0 0}
.modal-close{border:0;background:transparent;color:var(--muted);font-size:var(--fs-31);line-height:1;
  border-radius:var(--r-sm);cursor:pointer;margin-left:auto;padding:0 6px}
.modal-close:hover{background:var(--soft);color:var(--ink)}
.kv{display:grid;grid-template-columns:128px 1fr;gap:6px 12px;font-size:var(--fs-14);margin-bottom:6px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.share-block{border-top:1px solid var(--line);margin:16px -20px -20px;padding:16px 20px 20px;background:var(--raised);border-radius:0 0 12px 12px}
.share-block h3{font-size:var(--fs-13);margin:0 0 6px}
.share-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.share-url{flex:1;min-width:200px;font-size:var(--fs-12);padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);font-family:var(--font-mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Buttons (DESIGN.md): every variant the same height, each with its own
   hover, pressed, disabled and focus look. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;
  border:1px solid transparent;border-radius:var(--r-sm);padding:8px 14px;font:inherit;font-size:var(--fs-13);font-weight:600;line-height:1.2;
  cursor:pointer;background:var(--brand);color:var(--on-brand);text-decoration:none;
  transition:background-color .14s,border-color .14s,filter .14s,box-shadow .14s,transform .14s var(--ease)}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 4px 12px var(--brand-glow)}
.btn:active{transform:none;filter:brightness(.92);box-shadow:none}
.btn.secondary:hover,.btn.danger:hover,.btn.quiet:hover{box-shadow:none}
.btn.secondary{background:var(--surface);color:var(--brand);border-color:var(--line-strong)}
.btn.secondary:hover{background:var(--soft);filter:none}
.btn.secondary:active{background:color-mix(in srgb,var(--brand) 16%,var(--surface))}
.btn.danger{background:var(--surface);color:var(--danger-ink);border-color:var(--line-strong)}
.btn.danger:hover{background:color-mix(in srgb,var(--critical) 10%,var(--surface));filter:none}
.btn.danger:active{background:color-mix(in srgb,var(--critical) 18%,var(--surface))}
.btn.btn-sm{min-height:30px;padding:4px 10px;font-size:var(--fs-12)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;filter:none;transform:none}
.share-note{font-size:var(--fs-12);color:var(--muted);margin:10px 0 0}
/* ---------- guided setup ---------- */
.setup-page .topbar{padding-bottom:48px}
.setup-main{max-width:720px;margin:0 auto;padding:0 20px 72px}
.progress-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;
  margin:-32px 0 20px;box-shadow:var(--shadow-1);position:relative;z-index:2}
.progress-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.progress-head strong{font-size:var(--fs-14)}
.progress-count{margin-left:auto;font-size:var(--fs-12);color:var(--muted);font-variant-numeric:tabular-nums}
.progress-track{height:6px;border-radius:var(--r-xs);background:var(--hair);overflow:hidden}
.progress-fill{display:block;height:100%;background:var(--brand);transition:width .4s cubic-bezier(.4,0,.2,1)}
.progress-note{margin:10px 0 0;font-size:var(--fs-12);color:var(--muted)}

.step{padding:0;overflow:hidden;margin-bottom:12px}
.step-head{display:flex;gap:14px;align-items:flex-start;width:100%;border:0;background:transparent;
  font:inherit;text-align:left;color:var(--ink);padding:16px 16px;cursor:pointer}
.step-head:hover{background:var(--raised)}
.step-num{flex:0 0 auto;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  background:var(--hair);color:var(--ink-2);font-size:var(--fs-12);font-weight:600;margin-top:1px}
.step.complete .step-num{background:var(--good);color:var(--on-good)}
.step.open .step-num{background:var(--brand);color:var(--on-brand)}
.step-heading{flex:1;min-width:0}
.step-title{display:block;font-size:var(--fs-14);font-weight:700}
.step.complete .step-title{color:var(--muted)}
.step-blurb{display:block;font-size:var(--fs-13);color:var(--muted);margin-top:4px;line-height:1.45}
.step-chevron{flex:0 0 auto;color:var(--muted);font-size:var(--fs-11);margin-top:6px}
.step-body{padding:0 16px 16px 56px}
.step-list{margin:0 0 14px;padding-left:20px;font-size:var(--fs-14);line-height:1.65;color:var(--ink-2)}
.step-list li{margin-bottom:6px}
.step-list code,.step-aside code{background:var(--soft);border-radius:var(--r-xs);padding:1px 6px;font-size:var(--fs-13)}
.step-aside{font-size:var(--fs-13);color:var(--muted);margin:12px 0 0;line-height:1.5}
.step-aside.missing{color:var(--ink);background:color-mix(in srgb,var(--warning) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--warning) 45%,transparent);border-radius:var(--r-md);padding:12px 14px;font-weight:600}
.mark-done{margin-top:14px}
.step-body .link-btn{display:block;margin-top:10px}
a.btn{text-decoration:none}
/* Links and labels styled as buttons keep the button's centred layout. */
a.btn,label.btn,.account-main label.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;margin:0}

.ok-line{display:flex;align-items:center;gap:10px;font-size:var(--fs-14);color:var(--ink-2);margin:0 0 12px}
.ok-dot{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--good);
  color:var(--on-good);font-size:var(--fs-11);font-weight:600;flex:0 0 auto}

.check-list{list-style:none;margin:0 0 14px;padding:0}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--hair);font-size:var(--fs-14)}
.check:last-child{border-bottom:0}
.check-dot{flex:0 0 auto;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:var(--fs-11);font-weight:600;color:var(--on-good);margin-top:1px}
.check.pass .check-dot{background:var(--good)}
.check.warn .check-dot{background:var(--warning);color:var(--on-warn)}
.check-detail{display:block;font-size:var(--fs-13);color:var(--muted);margin-top:2px}

.done-card{text-align:center;padding:28px 20px}
.done-card h2{font-size:var(--fs-19);margin:0 0 6px}
/* the offer to move an Apps Script agent to Google sign-in, above the steps */
.switch-card{border-color:color-mix(in srgb,var(--brand) 45%,transparent);margin-bottom:12px}
.switch-card h2{font-size:var(--fs-19);margin:0 0 6px}
.switch-card .btn{margin-top:12px}
.setup-foot{text-align:center;color:var(--muted);font-size:var(--fs-13);margin-top:20px}
@media (max-width:560px){.step-body{padding-left:16px}}
/* a step's own button sits inside the instruction that tells you to press it */
.step-list li>.btn{display:flex;width:fit-content;margin:6px 0 8px}
.step-list li>.step-aside.missing{margin:6px 0 8px}
.upkeep{margin:6px 0 0;padding-left:20px}
.upkeep li{margin:4px 0}
.mini-select{font:inherit;font-size:var(--fs-13);padding:6px 8px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--raised);color:var(--ink)}
.income-tiles{margin:10px 0 12px}
.income-tiles .tile{box-shadow:none;background:var(--raised)}
.income-tiles .tile-value{font-size:var(--fs-24)}
.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin:4px 0 8px}
.edit-field{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-12);font-weight:700;color:var(--ink-2)}
.edit-field input,.edit-field select,.edit-dates input,.edit-dates select{font:inherit;font-size:var(--fs-13);font-weight:400;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--raised);color:var(--ink);min-width:0}
.edit-field.wide,.edit-actions.wide{grid-column:1 / -1}
.address-field{position:relative}
.address-suggestions{position:absolute;top:100%;left:0;right:0;z-index:20;margin-top:4px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-2);overflow:hidden;font-weight:400}
.address-suggestions button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-13);padding:10px 12px;cursor:pointer}
.address-suggestions button:hover,.address-suggestions button.active{background:var(--soft)}
.address-suggestions .note{padding:10px 12px;font-size:var(--fs-12);color:var(--ink-2)}
.address-suggestions .google{padding:6px 12px;font-size:var(--fs-11);color:var(--ink-2);text-align:right;border-top:1px solid var(--line)}
.edit-actions{display:flex;gap:10px;align-items:center}
.edit-msg{font-size:var(--fs-13);color:var(--ink-2);margin:6px 0 0}
.edit-msg.error{color:var(--danger-ink)}
.edit-heading{font-size:var(--fs-14);margin:20px 0 2px}
.edit-dates td{vertical-align:middle}
@media (max-width:520px){.edit-grid{grid-template-columns:1fr}}
.edit-dates{width:100%}
#editDatesHeading{scroll-margin-top:16px}
.edit-dates th,.edit-dates td{padding:6px 4px}
.edit-dates td:first-child{font-size:var(--fs-13);line-height:1.3}
.edit-dates input[type=date]{width:138px}
.edit-dates select{width:112px}
.row-actions{display:flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:nowrap}
.row-actions .link-btn{font-size:var(--fs-11)}
.notes-block{margin-top:20px}
.notes-block h3{font-size:var(--fs-14);margin:0 0 8px}
.note-form{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px}
.note-form textarea{flex:1;font:inherit;font-size:var(--fs-13);padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--raised);color:var(--ink);resize:vertical;min-height:40px}
.note-list{list-style:none;margin:0;padding:0}
.note-list li{border-top:1px solid var(--hair);padding:8px 0}
.note-meta{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-12);color:var(--muted)}
.note-text{margin:4px 0 0;font-size:var(--fs-13);white-space:pre-wrap;word-break:break-word}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--hair);font-size:var(--fs-13)}
.checklist li span:last-child{display:flex;flex-direction:column;min-width:0}
.checklist a{font-size:var(--fs-12);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.checklist em{font-size:var(--fs-12);color:var(--muted)}
.checklist .tick{flex:0 0 18px;height:18px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:var(--fs-11);font-weight:600;color:var(--on-good)}
.checklist li.done .tick{background:var(--good);border-color:var(--good)}
.with-unit{display:flex;gap:6px}
.with-unit input{flex:1;min-width:0}
.with-unit select{width:64px}
.money-preview{margin:0;font-size:var(--fs-13);color:var(--ink-2);min-height:1em}
.money-preview.wide{grid-column:1 / -1}
/* Income tables: fixed columns, so the month and type tables line up, and
   number headings sit over their right-aligned numbers. */
.income-table{table-layout:fixed;width:100%}
.income-table th.num,.income-table td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- phones ----------
   Kept last so it overrides everything above. Nothing may scroll the page
   sideways; the wide tables scroll inside their own card instead. */
@media (max-width:620px){
  main{padding:14px 12px 60px}
  /* The filter card overlaps the header by 30px, so the header keeps that
     much room below its buttons or the card covers them. */
  .topbar{padding:14px 14px 44px}
  .filters{margin-top:-32px}
  .topbar-inner{gap:8px}
  .topbar-inner > div:first-child{flex:1 1 auto;min-width:0}
  .topbar .spacer{display:none}
  .filters{gap:8px}
  .filters input[type="search"]{min-width:0;flex:1 1 100%}
  .card{padding:14px 14px}
  .tiles{grid-template-columns:1fr 1fr;gap:8px}
  .tile{padding:12px 12px}
  .tile-value{font-size:var(--fs-24)}
  .tile-label{font-size:var(--fs-11)}
  .tile-sub{font-size:var(--fs-11)}
  .income-tiles .tile-value{font-size:var(--fs-19)}
  .income-table{min-width:470px;font-size:var(--fs-13)}
  /* The next date moves under the address, so the address is not cut short. */
  .deal-row{grid-template-columns:1fr;gap:4px}
  .deal-row .addr{white-space:normal}
  .deal-row .next{text-align:left;display:flex;gap:6px;align-items:baseline}
  .deal-row .next b{display:inline}
  /* The deal drawer becomes a full-screen sheet with its heading pinned. */
  .drawer{padding:0}
  .drawer-card{max-width:none;min-height:100%;border:0;border-radius:0;padding:0 14px 28px;box-shadow:none}
  .drawer-head{position:sticky;top:0;z-index:2;background:var(--surface);margin:0 -14px 12px;padding:14px 14px 12px}
  .kv{grid-template-columns:112px 1fr;font-size:var(--fs-13)}
  /* Date rows stack: name on top, day / status / save beneath. */
  .edit-dates thead{display:none}
  .edit-dates,.edit-dates tbody{display:block}
  /* minmax(0,…) lets a cell shrink below its content, and the date gets a
     line of its own: iPhone Safari gives date inputs a minimum width and
     height of their own that otherwise spill under the status beside them. */
  .edit-dates tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px 0;border-top:1px solid var(--hair)}
  .edit-dates td{padding:0;border:0;min-width:0}
  .edit-dates td:first-child,.edit-dates td:nth-child(2){grid-column:1 / -1}
  .edit-dates td:first-child{font-weight:700}
  .edit-dates input[type=date],.edit-dates select{width:100%;min-width:0;box-sizing:border-box}
  .edit-dates input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-height:40px;line-height:1.3;text-align:left}
  .edit-dates input[type=date]::-webkit-date-and-time-value{text-align:left}
  .edit-dates .row-actions{flex-direction:row;align-items:center;gap:12px}
  .note-form{flex-direction:column;align-items:stretch}
  .share-url{min-width:0;flex:1 1 100%}
}
.condition-deal{border-top:1px solid var(--hair);padding:10px 0}
.condition-deal:first-child{border-top:0}
.condition-head{display:flex;gap:8px;align-items:baseline;margin-bottom:4px}
.condition-head .link-btn{font-size:var(--fs-14);font-weight:700;padding:0;text-transform:none;letter-spacing:0}
.condition-client{font-size:var(--fs-12);color:var(--muted)}
.condition-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:4px 0;font-size:var(--fs-13)}
.condition-row.firm{grid-template-columns:1fr auto;color:var(--ink-2)}
.condition-when{font-size:var(--fs-12);color:var(--ink-2);text-align:right;white-space:nowrap}
.condition-when.overdue b{color:var(--danger-ink)}
.condition-when.soon b{color:var(--soon-ink)}
.condition-row .btn{padding:6px 10px}
@media (max-width:620px){.condition-row{grid-template-columns:1fr auto}.condition-when{grid-column:1;text-align:left}.condition-row .waive{grid-row:1 / span 2;grid-column:2}}

/* ---------- visual pass: softer surfaces, clearer headings ---------- */
/* Dark cards are set apart by their surface and border; a shadow there only
   reads as a smudge around the edges. */
.topbar{position:relative;overflow:hidden}
.topbar::after{content:"";position:absolute;right:-80px;top:-120px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,var(--glow),transparent 70%);pointer-events:none}
.topbar-date{margin:1px 0 0;font-size:var(--fs-13);color:var(--on-hero)}
.tile:hover{box-shadow:var(--shadow-1-hover);transform:translateY(-2px)}
.card-sub{line-height:1.5}
.empty{padding:28px 12px;border:1px dashed var(--line);border-radius:var(--r-md);background:var(--raised)}
.deal-row{transition:background .12s}
.folder{transition:border-color .15s}
.folder:hover{border-color:color-mix(in srgb,var(--folder-accent,var(--line)) 45%,var(--line))}
/* Loading: the list shimmers until the first answer. */
.loading-bar{height:14px;border-radius:var(--r-sm);margin:10px 0;
  background:linear-gradient(90deg,var(--hair) 0%,var(--raised) 50%,var(--hair) 100%);background-size:200% 100%;animation:shimmer 1.2s infinite linear}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- paperwork before closing ---------- */
.paper-missing{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px}
.paper-label{font-size:var(--fs-11);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.paper-chip{font-size:var(--fs-12);padding:4px 10px;border-radius:var(--r-md);background:color-mix(in srgb,var(--critical) 11%,transparent);
  color:var(--ink);border:1px solid color-mix(in srgb,var(--critical) 28%,transparent)}
.paper-deal .condition-head{justify-content:space-between;flex-wrap:wrap}

/* ---------- the deal drawer ---------- */
.drawer-card{--band:var(--stage-out);border-top:6px solid var(--band)}
.drawer-head{border-radius:6px 6px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--band) 12%,var(--surface)) 0%,var(--surface) 100%);
  margin:-20px -20px 14px;padding:20px 20px 14px}
.drawer-head h2{font-size:var(--fs-19)}
.drawer-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);font-weight:600;color:var(--ink);
  background:color-mix(in srgb,var(--pill) 18%,var(--surface));border:1px solid color-mix(in srgb,var(--pill) 45%,transparent);
  border-radius:var(--r-md);padding:2px 10px}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pill)}
.drawer-h{font-size:var(--fs-12);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:20px 0 8px;
  display:flex;align-items:center;gap:8px}
.drawer-h .card-count{text-transform:none;letter-spacing:0;font-weight:600}
.drawer-h .link-btn{margin-left:auto}
.drawer-h .link-btn+.link-btn{margin-left:4px}
.drawer-h .link-btn{text-transform:none;letter-spacing:0;font-size:var(--fs-13)}
#drawerBody>.drawer-h:first-child{margin-top:4px}

.stage-track{list-style:none;display:flex;margin:4px 0 6px;padding:0;counter-reset:none}
.stage-track li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:var(--fs-12);color:var(--muted)}
.stage-track li::before{content:"";position:absolute;top:7px;right:50%;width:100%;height:3px;background:var(--hair);z-index:0}
.stage-track li:first-child::before{display:none}
.stage-track li.past::before,.stage-track li.now::before{background:var(--step)}
.stage-dot{width:17px;height:17px;border-radius:50%;background:var(--surface);border:3px solid var(--hair);position:relative;z-index:1}
.stage-track li.past .stage-dot{background:var(--step);border-color:var(--step)}
.stage-track li.now .stage-dot{border-color:var(--step);box-shadow:0 0 0 4px color-mix(in srgb,var(--step) 25%,transparent)}
.stage-track li.now{color:var(--ink);font-weight:600}
.stage-track.out{display:block;font-size:var(--fs-13);color:var(--ink-2);background:var(--raised);border:1px dashed var(--line);border-radius:var(--r-md);padding:10px 12px}

.date-line{list-style:none;margin:0;padding:0;position:relative}
.date-line li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:start;padding:6px 0;position:relative}
.date-line li:not(:last-child)::after{content:"";position:absolute;left:10px;top:26px;bottom:-8px;width:2px;background:var(--hair)}
.date-dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-11);font-weight:600;color:var(--on-good);
  border:2px solid var(--line);background:var(--surface);position:relative;z-index:1}
.date-line li.done .date-dot{background:var(--good);border-color:var(--good)}
.date-line li.overdue .date-dot{border-color:var(--danger-ink);background:color-mix(in srgb,var(--critical) 15%,var(--surface))}
.date-line li.soon .date-dot{border-color:var(--serious);background:color-mix(in srgb,var(--serious) 15%,var(--surface))}
.date-line li.later .date-dot{border-color:var(--series-scheduled)}
.date-what{display:flex;flex-direction:column;min-width:0;font-size:var(--fs-14)}
.date-what span{font-size:var(--fs-12);color:var(--muted)}
.date-line li.done .date-what b{color:var(--ink-2);font-weight:600}
.date-when{font-size:var(--fs-12);font-weight:700;color:var(--ink-2);white-space:nowrap;padding-top:2px}
.date-line li.overdue .date-when{color:var(--danger-ink)}
.date-line li.soon .date-when{color:var(--soon-ink)}
.date-line li.done .date-when,.date-line li.unset .date-when{color:var(--muted);font-weight:600}

.check-meter{height:6px;border-radius:var(--r-xs);background:var(--hair);overflow:hidden;margin:0 0 8px}
.check-meter span{display:block;height:100%;background:var(--good);border-radius:var(--r-xs);transition:width .3s}
.checklist .check-what{flex:1;display:flex;flex-direction:column;min-width:0}
.checklist li .btn{padding:6px 10px;font-size:var(--fs-12);margin-left:auto}
.checklist li .link-btn{margin-left:auto}
.checklist li.later{color:var(--muted)}
.checklist li.later .tick{border-style:dashed}
.checklist li.missing .tick{border-color:var(--danger-ink)}
@media (max-width:620px){
  .drawer-head{margin:0 -14px 12px;padding:14px 14px 12px}
  .stage-track li{font-size:var(--fs-11)}
}
.notes-block .drawer-h{font-size:var(--fs-12);margin:0 0 8px}
@media (max-width:620px){
  .card-head{flex-wrap:wrap;row-gap:6px}
  #exportCsv,#dealCount{white-space:nowrap}
}

/* ---------- calendar ---------- */
#calendarCard .card-head{flex-wrap:wrap;row-gap:8px}
.cal-nav{display:flex;gap:4px}
.cal-nav .btn{padding:6px 10px}
.cal-views{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.cal-view{border:0;background:var(--surface);color:var(--ink-2);font:inherit;font-size:var(--fs-12);font-weight:700;padding:6px 12px;cursor:pointer}
.cal-view:hover{background:var(--soft)}
/* A selected segment is a quiet state, never the green of a main button. */
.cal-view[aria-pressed="true"]{background:var(--hair);color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand)}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden}
.cal-dow{font-size:var(--fs-11);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:6px 8px;background:var(--raised);border-bottom:1px solid var(--hair)}
.cal-day{min-height:96px;padding:4px 6px 6px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:4px;cursor:pointer;min-width:0}
.cal-day:nth-child(7n+7){border-right:0}
.cal-grid.week .cal-day{min-height:180px}
.cal-day:hover{background:var(--raised)}
.cal-day.outside{background:color-mix(in srgb,var(--page) 60%,var(--surface))}
.cal-day.outside .cal-date{color:var(--muted)}
.cal-day.selected{background:var(--soft)}
.cal-date{align-self:flex-start;border:0;background:transparent;font:inherit;font-size:var(--fs-12);font-weight:700;color:var(--ink-2);
  padding:1px 6px;border-radius:var(--r-md);cursor:pointer}
.cal-day.today .cal-date{background:var(--brand);color:var(--on-brand)}
.cal-wd{font-weight:600;color:var(--muted)}
.cal-day.today .cal-wd{color:var(--on-brand)}
.cal-chip{display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--chip);border-radius:var(--r-xs);
  background:color-mix(in srgb,var(--chip) 16%,var(--surface));color:var(--ink);font:inherit;font-size:var(--fs-11);line-height:1.3;
  padding:2px 6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-chip:hover{background:color-mix(in srgb,var(--chip) 30%,var(--surface))}
.cal-chip.done{color:var(--muted);text-decoration:line-through;background:var(--raised)}
.cal-time{font-weight:600;margin-right:4px}
.cal-more{border:0;background:transparent;color:var(--brand);font:inherit;font-size:var(--fs-11);font-weight:700;text-align:left;padding:0 4px;cursor:pointer}
.cal-dots{display:none;gap:4px;justify-content:center;margin-top:auto}
.cal-dots i{width:6px;height:6px;border-radius:50%;display:block}
.cal-day-list{margin-top:12px}
.cal-day-list .cal-chip{font-size:var(--fs-13);padding:8px 10px;margin-bottom:6px;white-space:normal}
@media (max-width:620px){
  .cal-grid.month .cal-day{min-height:48px;padding:4px 2px;align-items:center}
  .cal-grid.month .cal-chip,.cal-grid.month .cal-more{display:none}
  .cal-grid.month .cal-dots{display:flex}
  .cal-dow{padding:6px 2px;text-align:center;font-size:var(--fs-11)}
  .cal-grid.week{grid-template-columns:1fr}
  .cal-grid.week .cal-dow{display:none}
  .cal-grid.week .cal-day{min-height:0;border-right:0;flex-direction:row;flex-wrap:wrap;align-items:center}
  .cal-grid.week .cal-chip{width:auto;max-width:100%}
}

/* ---------- expenses ---------- */
.expense-list{list-style:none;margin:0;padding:0}
.expense-list li{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--hair);font-size:var(--fs-13)}
.expense-what{flex:1;display:flex;flex-direction:column;min-width:0}
.expense-what span{font-size:var(--fs-12);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.expense-amount{font-weight:700;font-variant-numeric:tabular-nums}
.expense-net{font-size:var(--fs-13);color:var(--ink-2);margin:8px 0 0}
#expenseDialog .drawer-card{max-width:460px}

/* ---------- past clients ---------- */
.follow-row{grid-template-columns:1fr auto auto;border-top:1px solid var(--hair);padding:10px 0}
.follow-row:first-child{border-top:0}
.follow-what{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-width:0}
.follow-what .link-btn{font-size:var(--fs-13);text-transform:none;letter-spacing:0;padding:0}
.follow-actions{display:flex;gap:4px;align-items:center}
.follow-actions .btn{padding:6px 10px}
.clients-all{margin-top:12px;border-top:1px solid var(--hair);padding-top:8px}
.clients-all summary{cursor:pointer;font-size:var(--fs-12);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:4px 0}
.client-list{list-style:none;margin:6px 0 0;padding:0;max-height:360px;overflow:auto}
.client-list li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.4fr) minmax(0,1.3fr);gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--hair);font-size:var(--fs-13)}
.client-list .link-btn{font-size:var(--fs-13);text-transform:none;letter-spacing:0;padding:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-who,.client-next{color:var(--ink-2);font-size:var(--fs-12)}
.client-next{color:var(--muted)}
@media (max-width:620px){
  .follow-row{grid-template-columns:1fr auto}
  .follow-row .condition-when{grid-column:1;text-align:left}
  .follow-actions{grid-row:1 / span 2;grid-column:2}
  .client-list li{grid-template-columns:1fr;gap:1px}
}

/* ---------- contacts ---------- */
.people{list-style:none;margin:0;padding:0}
.person{display:grid;grid-template-columns:38px minmax(0,1.4fr) minmax(0,1.2fr) auto;gap:12px;align-items:center;width:100%;
  border:0;border-bottom:1px solid var(--hair);background:transparent;color:var(--ink);font:inherit;text-align:left;padding:10px 8px;cursor:pointer;border-radius:var(--r-sm)}
.person:hover,.person:focus-visible{background:var(--soft)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-13);font-weight:600;color:var(--brand);
  background:color-mix(in srgb,var(--brand-bright) 22%,var(--surface))}
.person-main{display:flex;flex-direction:column;min-width:0}
.person-main b{font-size:var(--fs-14);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-main span,.person-reach{font-size:var(--fs-12);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-deals{font-size:var(--fs-12);font-weight:700;color:var(--ink-2);white-space:nowrap}
.contact-links{display:flex;gap:8px;margin:0 0 10px}
.contact-links:empty{display:none}
.person-deal-list{list-style:none;margin:0;padding:0}
.person-deal-list li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--hair);font-size:var(--fs-13)}
.person-deal-list a{font-weight:700}
.person-when{font-size:var(--fs-12);color:var(--muted)}
#contactDialog textarea{font:inherit;font-size:var(--fs-13);padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--raised);color:var(--ink);resize:vertical}
@media (max-width:620px){
  .person{grid-template-columns:34px minmax(0,1fr) auto}
  .person-reach{display:none}
  .avatar{width:34px;height:34px}
}

/* ---------- drafting an email from the deal panel ---------- */
.draft-pop{display:flex;flex-direction:column;gap:6px;margin:-4px 0 14px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--raised)}
.draft-pop .share-note{margin:0 0 4px}
.draft-pop button{text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);padding:8px 10px;font:inherit;font-size:var(--fs-13);font-weight:600;cursor:pointer}
.draft-pop button:hover{border-color:var(--brand);color:var(--brand)}
.draft-pop .link-btn{align-self:flex-start}

/* ---------- the public demo ---------- */
.notice a{font-weight:700}

/* Dates read from the signed offer */
.offer-read{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.offer-found{border:1px solid var(--line);border-radius:var(--r-md);padding:12px;margin:0 0 12px;background:var(--raised)}
.offer-table{width:100%;border-collapse:collapse;font-size:var(--fs-13);margin:8px 0}
.offer-table th{text-align:left;font-size:var(--fs-11);font-weight:700;color:var(--ink-2);padding:4px 6px;border-bottom:1px solid var(--line)}
.offer-table td{padding:8px 6px;white-space:nowrap;border-bottom:1px solid var(--line);vertical-align:top}
.offer-evidence{font-size:var(--fs-11);color:var(--ink-2);margin-top:2px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offer-how{font-size:var(--fs-11);color:var(--brand);margin-top:2px}
.offer-notes{margin:6px 0 10px 20px;padding:0;font-size:var(--fs-12);color:var(--ink-2)}
.offer-table td:nth-child(2){white-space:normal}

/* ---------- menu (assets/nav.js) ---------- */
.menu-btn{display:inline-flex;align-items:center;gap:8px;background:var(--hero-glass);border:1px solid var(--hero-glass-line);
  color:var(--on-hero);border-radius:var(--r-md);padding:8px 12px;font:inherit;font-size:var(--fs-13);font-weight:700;cursor:pointer}
.menu-btn:hover{background:var(--hero-glass-hover)}
.app-menu{position:fixed;z-index:60;top:64px;right:max(16px, calc((100vw - 1180px) / 2));width:290px;max-height:calc(100vh - 84px);overflow:auto;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:10px 12px 14px}
.menu-scrim{position:fixed;inset:0;z-index:55;background:var(--scrim-light)}
.menu-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 6px}
.menu-head strong{font-size:var(--fs-14)}
.menu-who{display:grid;gap:2px;margin:0 0 4px;padding:10px;border-radius:var(--r-sm);background:var(--soft);color:var(--ink);text-decoration:none;font-size:var(--fs-12)}
.menu-who span{color:var(--muted)}
.menu-who b{font-size:var(--fs-13);overflow-wrap:anywhere}
.menu-who:hover{outline:1px solid var(--line)}
.menu-close{border:0;background:transparent;color:var(--ink-2);font-size:var(--fs-24);line-height:1;cursor:pointer;padding:2px 6px;border-radius:var(--r-sm)}
.menu-close:hover{background:var(--soft)}
.menu-label{margin:12px 4px 4px;font-size:var(--fs-11);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.menu-link,.menu-sections a{display:block;padding:10px 10px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-size:var(--fs-14);font-weight:600}
.menu-link:hover,.menu-sections a:hover{background:var(--soft)}
.menu-link.current{background:var(--soft);color:var(--brand)}
.menu-sections{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.menu-sections a{font-weight:400;font-size:var(--fs-14)}
.menu-theme{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);padding:4px}
.menu-theme button{border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:var(--fs-13);font-weight:600;padding:8px 0;border-radius:var(--r-sm);cursor:pointer}
.menu-theme button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.menu-signout{display:block;width:100%;margin-top:14px;padding:10px;border:1px solid var(--line);border-radius:var(--r-md);background:transparent;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.menu-signout:hover{background:var(--soft)}
.menu-privacy{display:block;margin-top:10px;text-align:center;font-size:var(--fs-12);color:var(--muted)}
/* The dashboard's sections, kept in view on wide screens. */
.section-nav{position:sticky;top:0;z-index:30;display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:8px 0;background:var(--page)}
.section-nav a{padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);text-decoration:none;font-size:var(--fs-13);font-weight:600}
.section-nav a:hover{border-color:var(--brand);color:var(--brand)}
.section-nav:empty{display:none}
#pipelineRow,#deadlinesCard,#clientsCard,#transactionsCard,#calendarCard,#incomeCard{scroll-margin-top:64px}
/* A phone: the menu is a sheet from the right, and it lists the sections. */
@media (max-width:700px){
  .menu-btn span{display:none}
  .menu-btn{padding:8px 10px}
  .topbar-inner > div:first-child{flex:1 1 auto}
  .app-menu{top:0;right:0;bottom:0;width:min(86vw,340px);max-height:none;border-radius:12px 0 0 12px;padding:14px 16px 24px}
  .section-nav{display:none}
  body.menu-open{overflow:hidden}
}

/* ---------- today ---------- */
.today-item{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:baseline;width:100%;text-align:left;
  border:0;border-top:1px solid var(--hair);background:transparent;color:var(--ink);font:inherit;padding:10px 4px;cursor:pointer}
.today-item:first-child{border-top:0}
.today-item:hover{background:var(--soft)}
.today-when{font-size:var(--fs-12);font-weight:600;color:var(--muted)}
.today-item.overdue .today-when{color:var(--danger-ink)}
.today-item.today .today-when,.today-item.client .today-when{color:var(--brand)}
.today-what{font-size:var(--fs-14);font-weight:600}
.today-where{font-size:var(--fs-13);color:var(--ink-2);text-align:right}
#todayCard{scroll-margin-top:64px}
@media (max-width:620px){
  .today-item{grid-template-columns:1fr;gap:2px}
  .today-where{text-align:left}
}
/* documents from the client, waiting to be filed */
.client-files{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;margin:0 0 10px;background:var(--soft)}
.client-files-head{margin:0 0 4px;font-size:var(--fs-13)}
.client-files ul{list-style:none;margin:0;padding:0}
.client-files li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:space-between;padding:6px 0;border-top:1px solid var(--hair);font-size:var(--fs-13)}
.client-files li:first-child{border-top:0}
.client-files a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.client-file-act{display:flex;gap:6px;align-items:center;min-width:0}
.client-file-act select{font:inherit;font-size:var(--fs-13);padding:6px 8px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--raised);color:var(--ink);max-width:210px}
/* showings on a listing */
.showing-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:end;margin-bottom:10px}
.showing-form .wide{grid-column:1/-1}
.showing-form textarea{font:inherit;font-size:var(--fs-13);padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--raised);color:var(--ink);resize:vertical}
.showing-share{grid-column:1/3;font-size:var(--fs-13);display:flex;gap:6px;align-items:center}
@media (max-width:560px){.showing-form{grid-template-columns:1fr}.showing-share{grid-column:auto}}
/* the deal's Draft email and Edit: one height, one width, never wrapped */
#drawer .drawer-head > .deal-title{flex:1;min-width:0}
#drawer .drawer-head > .btn{flex:0 0 auto;min-width:96px;white-space:nowrap;text-align:center;line-height:1.2}
/* On a phone the title takes its own line and the two buttons share the next,
   compact, so the header stays short; it scrolls away with the page rather
   than staying pinned over the deal. */
@media (max-width:720px){
  #drawer .drawer-head{flex-wrap:wrap}
  #drawer .drawer-head > .deal-title{flex:1 1 100%}
  #drawer .drawer-head > .btn{flex:0 0 auto;min-width:0;padding:8px 14px;font-size:var(--fs-13)}
}


/* ---------- shared: fields, focus, notices, skip link (DESIGN.md) ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea{transition:border-color .14s,box-shadow .14s}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:18px;height:18px;margin:0 6px 0 0;vertical-align:-3px}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger-ink)!important}
.field-error{display:block;margin:4px 0 0;font-size:var(--fs-12);font-weight:600;color:var(--danger-ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.topbar :focus-visible{outline-color:var(--on-hero)}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--surface);color:var(--brand);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:10px 14px;font-weight:700;text-decoration:none;box-shadow:var(--shadow-2);transition:top .14s}
.skip-link:focus{top:12px}
main:focus{outline:none}
.card:focus,.card h2:focus{outline:none}

/* One message box for every page: info, success, warning, danger. */
.notice{border:1px solid color-mix(in srgb,var(--info) 45%,transparent);background:color-mix(in srgb,var(--info) 10%,var(--surface));
  color:var(--ink);border-radius:var(--r-md);padding:12px 14px;margin:0 0 16px;font-size:var(--fs-13);line-height:1.5}
.notice strong:first-child{font-weight:700}
.notice.success{border-color:color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 10%,var(--surface))}
.notice.warning,.banner{border:1px solid color-mix(in srgb,var(--warning) 55%,transparent);background:color-mix(in srgb,var(--warning) 12%,var(--surface))}
.notice.danger,.notice.error{border-color:color-mix(in srgb,var(--critical) 45%,transparent);background:color-mix(in srgb,var(--critical) 9%,var(--surface))}
.notice .btn{margin:8px 8px 0 0}
.notice:empty{display:none}
.banner{color:var(--ink);border-radius:var(--r-md);padding:12px 14px;margin-bottom:16px;font-size:var(--fs-13)}

/* Motion: the scrim fades, the card rises 8px; menus fade in. */
@keyframes kt-fade{from{opacity:0}to{opacity:1}}
@keyframes kt-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes kt-pop{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.drawer:not(.hidden){animation:kt-fade .18s var(--ease)}
.drawer:not(.hidden) .drawer-card{animation:kt-rise .18s var(--ease)}
.menu-scrim{animation:kt-fade .14s var(--ease)}
.app-menu:not(.hidden){animation:kt-pop .14s var(--ease);transform-origin:top right}
.draft-pop,.address-suggestions,.notice{animation:kt-fade .14s var(--ease)}
/* Small confirmations: a tick that pops in beside "Saved", a ticked box that
   pops, and header and tab buttons that give a little under the finger. */
@keyframes kt-tick{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:none}}
.edit-msg.saved{display:flex;align-items:center;gap:8px}
.edit-msg.saved::before{content:"✓";display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;
  background:var(--good);color:var(--surface);font-size:var(--fs-12);font-weight:700;animation:kt-tick .32s var(--ease)}
input[type=checkbox]:checked{animation:kt-tick .22s var(--ease)}
.menu-btn,.tab{transition:transform .12s var(--ease),background-color .14s}
.menu-btn:active,.tab:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.btn:hover,.tile:hover,.btn:active,.menu-btn:active,.tab:active{transform:none}}

/* Sign in and its confirm step */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:28px 24px;box-shadow:var(--shadow-1)}
.auth-mark{display:flex;align-items:center;gap:8px;font-size:var(--fs-11);font-weight:600;letter-spacing:.14em;color:var(--brand);margin:0 0 16px}
.auth-mark img{width:24px;height:24px}
.auth h1{font-size:var(--fs-24);font-weight:700;line-height:1.2;margin:0 0 8px}
.auth-lede{font-size:var(--fs-15);color:var(--ink-2);margin:0 0 20px}
.auth label{display:block;font-size:var(--fs-12);font-weight:700;color:var(--ink-2);margin:0 0 6px}
.auth input[type=email]{width:100%;font:inherit;font-size:var(--fs-16);padding:10px 12px;min-height:44px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--raised);color:var(--ink)}
.auth .btn{width:100%;min-height:44px;margin-top:14px;font-size:var(--fs-15)}
.auth-foot{margin:20px 0 0;font-size:var(--fs-13);color:var(--muted);text-align:center}
.auth-foot a{font-weight:600}

/* Field widths, instead of inline pixel widths */
.w-xs{width:100%;max-width:88px}.w-sm{width:100%;max-width:168px}.w-md{width:100%;max-width:280px}.w-lg{width:100%;max-width:380px}

/* A page's cards, 16px apart */
.stack{display:grid;gap:16px;min-width:0}
.stack>*{min-width:0;margin-top:0;margin-bottom:0}

/* ---------- phones: 44px targets, 16px fields, nothing wider than the screen ---------- */
@media (max-width:620px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .card{padding:16px}
  .tile{padding:12px}
  .btn,.menu-btn,.menu-link,.menu-sections a,.menu-theme button,.menu-signout{min-height:44px}
  .btn.btn-sm{min-height:44px;padding:8px 12px}
  .link-btn{min-height:44px;padding:8px 10px}
  .modal-close,.menu-close{min-width:44px;min-height:44px}
  .cal-nav .btn{min-width:44px}
  .cal-view{min-height:44px;padding:8px 14px}
  .cal-date{min-width:36px;min-height:36px}
  .cal-grid.month .cal-day{min-height:52px}
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select,textarea{font-size:var(--fs-16)!important;min-height:44px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  .deal-row .addr{text-overflow:clip}
}

/* ---------- the dashboard's cards, 16px apart; loading shapes ---------- */
.dash-main>.card,.dash-main>.grid,.dash-main>.notice,.dash-main>.tiles{margin:0 0 16px}
.dash-main>.card:last-child{margin-bottom:0}
.btn.hero-cta{background:var(--accent);color:var(--brand-deep);border-color:transparent}
.btn.hero-cta:hover{filter:brightness(1.06)}
/* + New's list: placed under the button by dashboard.js. */
.new-menu{position:fixed;z-index:60;width:min(320px,calc(100vw - 24px));padding:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-3)}
.new-menu>a,.new-menu>button{display:grid;gap:2px;width:100%;padding:10px 12px;border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.new-menu>a:hover,.new-menu>button:hover,.new-menu>a:focus-visible,.new-menu>button:focus-visible{background:var(--soft)}
.new-menu strong{font-size:var(--fs-14);font-weight:700}
.new-menu span{font-size:var(--fs-12);color:var(--muted)}
.new-menu .done span{color:var(--brand);font-weight:700}
.menu-scrim-clear{background:transparent}
.loading-bar-lg{height:28px;width:40%}
.loading-block{height:140px;width:100%;border-radius:var(--r-md)}
.cols .loading-block{align-self:stretch}
.card.step{padding:0}
.pair-code{font-size:var(--fs-16);letter-spacing:.08em;user-select:all}
.inline-error{flex-basis:100%;margin:6px 0 0}
.checklist li{flex-wrap:wrap}
details.step-aside{margin-top:12px}
@media (max-width:620px){
  .btn.hero-cta{padding:8px 12px}
  .topbar-inner{flex-wrap:wrap}
}

/* ---------- very narrow screens and large text (200% zoom on a phone) ---------- */
select{max-width:100%}
.card h2,.drawer-head h2{overflow-wrap:anywhere;min-width:0}
.card h2>span{min-width:0}
.col-group{min-width:0}
.col-axis span{min-width:0;overflow:hidden}
.folder,.folder-body{min-width:0}
@media (max-width:620px){.deal-row{grid-template-columns:minmax(0,1fr)}}
.col{max-width:45%}
@media (max-width:620px){.condition-row{grid-template-columns:minmax(0,1fr) auto}}
@media (max-width:360px){
  .tiles{grid-template-columns:minmax(0,1fr)}
  .btn{white-space:normal;text-align:center}
  .topbar-inner>div:first-child{flex-basis:100%}
}
/* A table wider than its card scrolls inside it; soft edges say there is more. */
.table-wrap{background:linear-gradient(to right,var(--surface) 30%,transparent) left/40px 100% no-repeat local,
  linear-gradient(to left,var(--surface) 30%,transparent) right/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,var(--line),transparent) left/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,var(--line),transparent) right/12px 100% no-repeat scroll}
@media (max-width:620px){.filters select{flex:1 1 80px;min-width:0}}

/* ---------- new clients: forms from the buyer and seller links ---------- */
.intake-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;text-align:left;border:0;border-top:1px solid var(--hair);background:transparent;color:var(--ink);
  font:inherit;padding:10px 8px;cursor:pointer;border-radius:var(--r-sm);transition:background-color .14s}
.intake-row:first-child{border-top:0}
.intake-row:hover{background:var(--soft)}
.intake-kind{flex:0 0 auto;font-size:var(--fs-12);font-weight:700;border-radius:var(--r-pill);padding:2px 10px;color:var(--ink);
  background:color-mix(in srgb,var(--deal-active) 18%,var(--surface));border:1px solid color-mix(in srgb,var(--deal-active) 45%,transparent)}
.intake-kind.seller{background:color-mix(in srgb,var(--deal-prepping) 18%,var(--surface));border-color:color-mix(in srgb,var(--deal-prepping) 45%,transparent)}
.intake-main{flex:1;min-width:0;display:flex;flex-direction:column}
.intake-main b{font-size:var(--fs-14);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.intake-main span{font-size:var(--fs-12);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.intake-flag{flex:0 0 auto;font-size:var(--fs-12);font-weight:700;border-radius:var(--r-pill);padding:2px 10px;color:var(--ink)}
.intake-flag.danger{background:color-mix(in srgb,var(--critical) 14%,var(--surface))}
.intake-flag.warning{background:color-mix(in srgb,var(--warning) 20%,var(--surface))}
.intake-new{flex:0 0 auto;font-size:var(--fs-12);font-weight:700;color:var(--on-brand);background:var(--brand);border-radius:var(--r-pill);padding:2px 10px}
#intakeDialog .drawer-card{max-width:640px}
.intake-kv{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.intake-kv dd{overflow-wrap:anywhere;white-space:pre-wrap}
.intake-signature{display:block;max-width:240px;height:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm)}
.intake-actions-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--hair)}
.intake-or{font-size:var(--fs-12);color:var(--muted)}
/* A buyer file: where their mail and papers are, and their offers. */
.buyer-file{margin:0 0 20px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--raised)}
.buyer-file .drawer-h{margin-top:0}
.buyer-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.offer-list{display:grid;gap:0;margin:0 0 12px}
.offer-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 0;border-top:1px solid var(--hair)}
.offer-row:first-child{border-top:0}
.offer-main{flex:1 1 220px;min-width:0;display:flex;flex-direction:column}
.offer-main b{font-size:var(--fs-14);overflow-wrap:anywhere}
.offer-main span{font-size:var(--fs-12);color:var(--muted)}
.offer-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.offer-actions select{font:inherit;font-size:var(--fs-13);min-height:32px;padding:4px 8px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.offer-state{font-size:var(--fs-12);font-weight:700;border-radius:var(--r-pill);padding:2px 10px;background:var(--soft);color:var(--ink-2)}
.offer-state.open{background:color-mix(in srgb,var(--deal-active) 18%,var(--surface));color:var(--ink)}
.layout-hidden{display:none!important}
.card-select{font:inherit;font-size:var(--fs-13);min-height:32px;padding:4px 8px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--raised);color:var(--ink);max-width:150px}
.move-form{display:grid;gap:8px;margin-top:8px}
.move-form label{font-size:var(--fs-13);font-weight:700;color:var(--ink-2)}
.move-form input[type=text]{font:inherit;font-size:var(--fs-13);min-height:36px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--raised);color:var(--ink);max-width:420px;width:100%}
.move-form .check-row{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--ink)}
.move-actions{display:flex;gap:12px;align-items:center}
.deal-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.event-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:12px;align-items:end;margin:0 0 16px;padding:16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.event-form .drawer-h,.event-form .wide{grid-column:1/-1;margin:0}
.event-form>*{min-width:0}
.event-form label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-12);font-weight:700;color:var(--ink-2)}
.event-form input,.event-form select,.event-form textarea{box-sizing:border-box;width:100%;min-width:0;font:inherit;font-size:var(--fs-13);font-weight:400;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--raised);color:var(--ink)}
.event-form input,.event-form select{height:36px}
.event-form textarea{min-height:72px;resize:vertical}
/* iOS Safari sizes date and time boxes to their own content and centres it;
   these keep them inside their column and read left like the others. */
.event-form input[type=date],.event-form input[type=time]{-webkit-appearance:none;appearance:none;display:block;max-width:100%;text-align:left}
.event-form input::-webkit-date-and-time-value{text-align:left;margin:0}
.event-form .field-help{grid-column:1/-1;margin:-4px 0 0;font-size:var(--fs-12);color:var(--muted)}
/* On a phone: the day, then its two times with their hint, then status and reminder. */
@media (max-width:620px){.event-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:12px}.event-form input,.event-form select{height:44px}
  .event-form .ev-date{grid-column:1/-1}.event-form .ev-more{order:1}.event-form .ev-end{order:2}}
.offer-add{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.offer-add .address-field{flex:1 1 240px;min-width:0}
.offer-add input{width:100%;font:inherit;font-size:var(--fs-13);min-height:36px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.intake-attach{display:flex;gap:8px;align-items:center;min-width:0}
.intake-attach select{font:inherit;font-size:var(--fs-13);min-height:36px;padding:6px 8px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--raised);color:var(--ink);max-width:240px}
@media (max-width:620px){
  .intake-kv{grid-template-columns:minmax(0,1fr)}
  .intake-kv dt{font-weight:700;color:var(--ink-2)}
  .intake-kv dd{margin-bottom:8px}
  .intake-actions-bar .btn{flex:1 1 100%}
  .intake-attach{flex:1 1 100%}
  .intake-attach select{flex:1;max-width:none}
}
/* A deal's client form, in its drawer */
.client-form{border:1px solid var(--hair);border-radius:var(--r-md);padding:12px 14px;margin:0 0 12px;background:var(--raised)}
.client-form-head{margin:0 0 8px;font-size:var(--fs-13)}
.client-form-links{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.client-form .notice{margin:0 0 8px}
.client-form-part{border-top:1px solid var(--hair)}
.client-form-part>summary{display:flex;align-items:center;gap:8px;min-height:40px;cursor:pointer;font-size:var(--fs-13);font-weight:700;list-style:none}
.client-form-part>summary::-webkit-details-marker{display:none}
.client-form-part>summary::before{content:"";width:0;height:0;border-left:5px solid var(--muted);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.client-form-part[open]>summary::before{transform:rotate(90deg)}
.client-form-part .card-count{margin-left:auto;font-weight:600}
.client-form-part .intake-kv{margin:0 0 12px}

/* ---------- a delete that can be taken back (assets/undo.js) ---------- */
.undo-toast{position:fixed;left:50%;bottom:24px;z-index:70;display:flex;align-items:center;gap:16px;max-width:calc(100vw - 32px);
  padding:8px 8px 8px 16px;border-radius:var(--r-md);background:var(--brand-deep);color:var(--on-hero);border:1px solid var(--hero-glass-line);
  box-shadow:var(--shadow-2);font-size:var(--fs-14);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .16s,transform .16s}
.undo-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.undo-toast.error{padding:12px 16px;border-left:4px solid var(--danger-ink)}
.undo-text{flex:1;min-width:0;line-height:1.4}
.undo-btn{flex:0 0 auto;min-height:36px;padding:8px 16px;border:1px solid var(--hero-glass-line);border-radius:var(--r-sm);background:var(--hero-glass);
  color:var(--on-hero);font:inherit;font-weight:700;cursor:pointer}
.undo-btn:hover{background:var(--hero-glass-hover)}
.undo-btn:focus-visible{outline:2px solid var(--on-hero);outline-offset:2px}
@media (max-width:620px){.undo-toast{bottom:16px;width:calc(100vw - 32px)}.undo-btn{min-height:44px}}

/* ---------- search everything (assets/search.js) ---------- */
.search-btn{padding:8px 10px}
.search-veil{position:fixed;inset:0;z-index:65;background:var(--scrim-light);display:flex;justify-content:center;align-items:flex-start;padding:80px 16px 16px}
.search-box{width:min(600px,100%);max-height:calc(100vh - 96px);display:flex;flex-direction:column;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-3);overflow:hidden}
.search-row{display:flex;align-items:center;border-bottom:1px solid var(--hair)}
.search-box input{flex:1;min-width:0;font:inherit;font-size:var(--fs-16);min-height:52px;padding:12px 16px;border:0;background:var(--surface);color:var(--ink)}
.search-cancel{display:none;margin-right:8px}
.search-box input:focus{outline:none}
.search-box input:focus-visible{box-shadow:inset 0 -2px 0 var(--brand)}
#searchResults{list-style:none;margin:0;padding:4px 8px 8px;overflow:auto}
.search-group{padding:12px 8px 4px;font-size:var(--fs-11);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#searchResults [role=option]{display:grid;gap:2px;padding:8px 12px;border-radius:var(--r-sm);color:var(--ink);cursor:pointer}
#searchResults [role=option] b{font-size:var(--fs-14);font-weight:700}
#searchResults [role=option] span{font-size:var(--fs-12);color:var(--muted)}
#searchResults [aria-selected=true],#searchResults [role=option]:hover{background:var(--soft)}
/* An action reads as something to do, not something found. */
#searchResults .search-action b{color:var(--brand)}
.search-note{padding:16px 8px;font-size:var(--fs-13);color:var(--muted)}
.search-keys{margin:0;padding:8px 16px;border-top:1px solid var(--hair);font-size:var(--fs-11);color:var(--muted)}
.search-keys kbd{font:inherit;font-weight:700;padding:0 4px;border:1px solid var(--line);border-radius:var(--r-xs);margin-right:2px}
@media (max-width:620px){.search-veil{padding:12px}.search-box{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}.search-keys{display:none}.search-cancel{display:inline-flex}}

/* ---------- getting started (a new account's checklist) ---------- */
.start-card .progress-track{display:block;margin:4px 0 12px}
.start-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.start-list li{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--hair)}
.start-list li:first-child{border-top:0}
.start-mark{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-12);font-weight:600;
  border:2px solid var(--line-strong);color:var(--muted)}
.start-list li.next .start-mark{border-color:var(--brand);color:var(--brand)}
.start-list li.done .start-mark{background:var(--good);border-color:var(--good);color:var(--on-good)}
.start-what{flex:1;min-width:0;display:grid;gap:2px}
.start-what b{font-size:var(--fs-14)}
.start-what span{font-size:var(--fs-12);color:var(--muted)}
.start-list li.done .start-what b{color:var(--muted);font-weight:600}
@media (max-width:620px){.start-list li{flex-wrap:wrap}.start-list li .btn{margin-left:40px}}
.skeleton .loading-bar{display:block;margin:8px 0}
.loading-bar.short{width:60%}
/* Phones: the pipeline's bars and its timeframe are tapped too. */
@media (max-width:620px){.hbar-row{min-height:44px}.card-select{min-height:44px}}

/* ---------- showings booked through BrokerBay (functions/_lib/showings.js) ---------- */
.showing-group{margin:12px 0 0;font-size:var(--fs-11);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.badge{display:inline-block;padding:0 8px;border-radius:var(--r-pill);background:var(--soft);color:var(--brand);font-size:var(--fs-11);font-weight:700;line-height:1.6}

.showing-list{list-style:none;margin:0;padding:0}
.showing-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--hair)}
.showing-row:first-child{border-top:0}
.showing-date{flex:0 0 auto;width:44px;padding:4px 0;border-radius:var(--r-sm);background:var(--soft);color:var(--brand);text-align:center;
  font-size:var(--fs-11);font-weight:700;text-transform:uppercase;line-height:1.2}
.showing-date b{display:block;font-size:var(--fs-19);font-weight:600}
.showing-body{flex:1;min-width:0}
.showing-when{margin:0;font-size:var(--fs-14);font-weight:700;color:var(--ink)}
.showing-when .badge{margin-left:4px;vertical-align:1px}
.showing-who{margin:2px 0 0;font-size:var(--fs-13);color:var(--muted)}
.showing-body .note-text{margin:4px 0 0}
.showing-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.showing-form-actions{display:flex;align-items:center;gap:12px}
.showing-form.one{grid-template-columns:1fr;margin:8px 0 0}
.showing-note{margin-top:12px}
@media (max-width:560px){.showing-actions{flex-direction:column;align-items:flex-end;gap:4px}}

/* ---------- a deal's own page ----------
   The deal replaces the dashboard below the header (body.deal-open); the
   browser's Back, the Dashboard button, Home or KEYTRAIL return to the list. */
.home-link{text-decoration:none;border-radius:var(--r-xs)}
.home-link:hover{text-decoration:underline;text-underline-offset:3px}
.home-btn.on-home{display:none}
body.deal-open .home-btn.on-home{display:inline-flex}
body.deal-open .dash-main{display:none}
.deal-page{position:static;inset:auto;background:transparent;backdrop-filter:none;z-index:auto;padding:20px 20px 40px;overflow:visible}
.deal-page .drawer-card{max-width:1180px;box-shadow:var(--shadow-1);padding:20px 24px 24px}
.deal-page .drawer-head{flex-wrap:wrap;margin:-20px -24px 16px;padding:14px 24px 16px;align-items:center}
.deal-page .deal-title{flex:1 1 260px;min-width:0}
.deal-page .drawer-head h2{font-size:var(--fs-24)}
.deal-page .drawer-head h2:focus{outline:none}
.back-btn{flex:0 0 100%;display:inline-flex;align-items:center;gap:6px;justify-self:start;width:max-content;max-width:100%;min-height:36px;padding:4px 10px 4px 6px;margin:0 0 4px -6px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--brand);font:inherit;font-size:var(--fs-14);font-weight:700;cursor:pointer}
.back-btn:hover{background:var(--soft)}
/* A buyer searching uses the same view: a dialog for a new client form, a
   page like a deal's (.deal-page) for a kept buyer. Back or ×, never both. */
#intakeDialog:not(.deal-page) .back-btn{display:none}
#intakeDialog.deal-page .modal-close{display:none}
#intakeDialog.deal-page .drawer-card{max-width:1180px}
@media (max-width:720px){#intakeDialog.deal-page .drawer-card{max-width:none}}
.deal-page .share-block{margin:24px -24px -24px;padding:16px 24px 20px}
.deal-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 32px;align-items:start}
.deal-col>.notes-block:first-child,.deal-col>.drawer-h:first-child{margin-top:4px}
/* Paperwork and the client's list share a row; one alone takes it all. */
.paper-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:0 32px;align-items:start}
.paper-cols>.notes-block{min-width:0}
/* Both headings the same height, so the two lists start level. */
.paper-cols .drawer-h{min-height:28px;margin-bottom:8px}
.paper-cols .drawer-h .link-btn{padding-top:0;padding-bottom:0}
.paper-cols .client-files{margin-top:12px}
/* Nothing for the second column (the demo): the first takes the width. */
.deal-cols:has(>.deal-col:empty){grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){.deal-cols{grid-template-columns:minmax(0,1fr)}}

/* Listing data: the details the listing's forms and MLS ask for. */
.listing-block{margin-top:24px;border-top:1px solid var(--line);padding-top:8px}
.listing-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.listing-top .drawer-h{margin-right:auto}
.listing-buttons{display:flex;gap:8px;flex-wrap:wrap}
.listing-group{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px 16px;margin:14px 0 0;min-width:0}
.listing-group legend{font-size:var(--fs-14);font-weight:700;padding:0 6px;margin-left:-6px}
.listing-group summary{font-size:var(--fs-14);font-weight:700;cursor:pointer;min-height:32px;display:flex;align-items:center;gap:6px}
.listing-group[open] summary{margin-bottom:8px}
.listing-group summary small{color:var(--muted);font-weight:600}
.listing-group legend small,.listing-group summary .card-count,.listing-field small{color:var(--muted);font-weight:600}
.listing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 16px}
.listing-field{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-12);font-weight:700;color:var(--ink-2);margin:0}
.listing-field.wide{grid-column:1 / -1}
.listing-field input,.listing-field textarea{font:inherit;font-size:var(--fs-14);font-weight:400;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 10px;min-height:38px}
.listing-field textarea{resize:vertical}
.room-table{width:100%;border-collapse:collapse;font-size:var(--fs-13);margin-bottom:8px}
.room-table th{text-align:left;font-size:var(--fs-12);color:var(--muted);font-weight:700;padding:4px 6px}
.room-table td{padding:4px 6px;border-top:1px solid var(--hair)}
.room-table input{width:100%;min-width:0;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:6px 8px}
.room-table td:nth-child(1){width:13%}.room-table td:nth-child(2){width:18%}.room-table td:nth-child(n+3):nth-child(-n+6){width:9%}
.room-empty td{color:var(--muted);padding:10px 6px}
.listing-save{position:sticky;bottom:0;z-index:2;margin:16px -24px -8px;padding:12px 24px;background:var(--glass);backdrop-filter:blur(8px);border-top:1px solid var(--line);display:flex;justify-content:flex-end}
@media (max-width:720px){
  .deal-page{padding:0}
  .deal-page .drawer-card{max-width:none;min-height:100vh;border:0;border-radius:0;padding:0 14px 28px;box-shadow:none}
  .deal-page .drawer-head h2{font-size:var(--fs-19)}
  /* As you scroll a deal or buyer, its address, stage and client stay at the
     top; Back, Draft email and Edit scroll away. A pinned element cannot leave
     its own box, so the header's box steps aside (display:contents) and the
     title pins to the whole page instead. */
  .deal-page .drawer-head{display:contents}
  .deal-page .back-btn{margin:12px 0 0 -6px}
  .deal-page .drawer-head > .deal-title{position:sticky;top:0;z-index:5;margin:0 -14px;padding:10px 14px 12px;
    background:linear-gradient(180deg,color-mix(in srgb,var(--band) 12%,var(--surface)) 0%,var(--surface) 100%);border-bottom:1px solid var(--line)}
  .deal-page .drawer-head > .btn{margin:12px 8px 16px 0}
  .deal-page .share-block{margin:24px -14px -28px;padding:16px 14px 24px;border-radius:0}
  .listing-group{padding:10px 12px 12px}
  /* Each room becomes a small card: its parts two by two. */
  .room-table thead{display:none}
  .room-table,.room-table tbody{display:block}
  .room-table tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;padding:10px 0;border-top:1px solid var(--hair)}
  .room-table td{display:block;width:auto!important;border:0;padding:0}
  .room-table td[data-label]::before{content:attr(data-label);display:block;font-size:var(--fs-11);font-weight:700;color:var(--muted);margin-bottom:2px}
  .room-table tr:not(.room-empty) td:last-child{grid-column:1 / -1}
  .listing-save{margin:16px -14px -8px;padding:10px 14px}
  .listing-save .btn{width:100%}
}
.home-btn{text-decoration:none;color:var(--on-hero)}

/* Listing data: dropdowns, pick lists, finding a field, what the Drive files say. */
.listing-field select{font:inherit;font-size:var(--fs-14);font-weight:400;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 10px;min-height:38px}
.listing-field.wide-pick{grid-column:1 / -1}
.pick-label{display:block}
.pick{border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface)}
.pick>summary{display:flex;align-items:center;gap:8px;min-height:38px;padding:6px 10px;cursor:pointer;list-style:none}
.pick>summary::-webkit-details-marker{display:none}
.pick>summary::after{content:"▾";margin-left:auto;color:var(--muted)}
.pick[open]>summary::after{content:"▴"}
.pick-chosen{display:flex;flex-wrap:wrap;gap:4px}
.pick-none{color:var(--muted);font-weight:400}
.pick-max{font-size:var(--fs-11);color:var(--muted);font-weight:600;white-space:nowrap}
.chip{font-size:var(--fs-12);font-weight:600;background:var(--soft);color:var(--brand);border-radius:var(--r-pill);padding:2px 8px}
.pick-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 12px;padding:8px 10px 10px;border-top:1px solid var(--hair);max-height:280px;overflow:auto}
.pick-list label{display:flex;align-items:center;gap:6px;font-size:var(--fs-13);font-weight:400;color:var(--ink);margin:0;min-height:30px}
.pick-list input:disabled+*,.pick-list label:has(input:disabled){color:var(--muted)}
.listing-find{width:100%;margin:12px 0 0;font:inherit;font-size:var(--fs-14);color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 12px}
.room-table select{width:100%;min-width:0;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:6px 8px}
.drive-box{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin-top:10px;background:var(--raised)}
.drive-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.drive-list li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;font-size:var(--fs-14)}
.drive-list label{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.drive-list small{color:var(--muted);font-size:var(--fs-12)}
.drive-actions{display:flex;gap:12px;align-items:center;margin-top:10px}

/* ---------- the phone's tab bar (nav.js) ----------
   Home, Calendar, Search, Contacts and New at the bottom of a phone, where a
   thumb reaches. The header's own Home, Search and + New step aside for it.
   It folds away while a field has the keyboard, and under a dialog. */
.tab-bar{display:none}
@media (max-width:720px){
  body.has-tabs .tab-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:58;
    padding:4px 6px calc(4px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:4px 2px;border:0;
    border-radius:var(--r-md);background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-12);font-weight:600;text-decoration:none;cursor:pointer}
  .tab[hidden]{display:none}
  .tab:active{background:var(--soft)}
  .tab[aria-current="page"]{color:var(--brand)}
  .tab[data-tab="new"] svg{padding:2px;border-radius:var(--r-sm);background:var(--brand);color:var(--on-brand)}
  body.has-tabs{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  body.has-tabs #homeButton,body.has-tabs #searchButton,body.has-tabs #newDeal{display:none!important}
  body.has-tabs.typing .tab-bar,
  body.has-tabs:has(.drawer[aria-modal="true"]:not(.hidden):not(.deal-page)) .tab-bar,
  body.has-tabs:has(.search-veil:not(.hidden)) .tab-bar{display:none}
  body.has-tabs .undo-toast{bottom:calc(76px + env(safe-area-inset-bottom))}
  body.has-tabs .listing-save{bottom:calc(60px + env(safe-area-inset-bottom))}
}