/* 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. */

/* Inter, served from this site (the CSP allows fonts from 'self' only). */
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* Keytrail: deep navy to teal for the brand surfaces, emerald for actions,
   cool slate for text. Contrast checked: body text 16:1, muted 4.6:1 or
   better, white on --brand 6:1. */
:root{
  color-scheme: light;
  --page:#f5f7fa; --surface:#ffffff; --raised:#f9fbfc;
  --line:#dde4ea; --hair:#eaeef2;
  --ink:#111c27; --ink-2:#475569; --muted:#5f6f82;
  --brand:#0e6f5c; --brand-deep:#0b1f33; --brand-bright:#14a383; --soft:#e8f3f0;
  --on-brand:#ffffff;   /* text on a --brand fill */
  --hero:linear-gradient(135deg,#0b1f33 0%,#0d3b4f 55%,#136b62 100%);   /* page headers */
  --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-prepping:#a47ae2; --deal-active:#4986e7; --deal-conditional:#f6bf26; --deal-pending:#ffad46;
  --deal-closed:#16a765; --deal-cancelled:#d06b64;

  /* reserved status tokens — never reused as series colours */
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --soon-ink:#9a5a12;   /* readable 'due soon' text; the pill carries --serious */

  --shadow:0 8px 24px rgba(15,30,45,.07);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --page:#0f1720; --surface:#16212c; --raised:#1b2835;
    --line:#2a3a4a; --hair:#213040;
    --ink:#e6edf3; --ink-2:#b4c0cc; --muted:#8a9aab;
    --brand:#5fd4b8; --on-brand:#06231d; --brand-deep:#0b1f33; --brand-bright:#2cc49f; --soft:#12302b;
    --hero:linear-gradient(135deg,#08131f 0%,#0b2a3a 55%,#0f4a45 100%);
    --stage-out:#6f7d8a;
    --series-actual:#2dab86; --series-scheduled:#3987e5;
    --soon-ink:#ec835a;
    --shadow:0 8px 24px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#0f1720; --surface:#16212c; --raised:#1b2835;
  --line:#2a3a4a; --hair:#213040;
  --ink:#e6edf3; --ink-2:#b4c0cc; --muted:#8a9aab;
  --brand:#5fd4b8; --on-brand:#06231d; --brand-deep:#0b1f33; --brand-bright:#2cc49f; --soft:#12302b;
  --hero:linear-gradient(135deg,#08131f 0%,#0b2a3a 55%,#0f4a45 100%);
  --stage-out:#6f7d8a;
  --series-actual:#2dab86; --series-scheduled:#3987e5;
  --soon-ink:#ec835a;
  --shadow:0 8px 24px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font:15px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-feature-settings:"cv11","ss01";   /* Inter's straight-sided l and open digits */
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{letter-spacing:-.2px}
a{color:var(--brand)}

/* ---------- shell ---------- */
.topbar{
  background:var(--hero);
  color:#fff; padding:20px 20px 22px;
}
.topbar-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-size:11px;font-weight:800;letter-spacing:1.5px;margin:0;display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.9)}
/* 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:5px}
.topbar h1{font-size:23px;margin:2px 0 0;line-height:1.2}
.spacer{flex:1}
.ghost-btn{
  border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.12); color:#fff;
  border-radius:9px; padding:8px 12px; font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.ghost-btn:hover{background:rgba(255,255,255,.22)}
main{max-width:1180px;margin:0 auto;padding:20px 20px 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:12px;
  padding:11px 13px;margin:-34px 0 20px;box-shadow:var(--shadow);position:relative;z-index:2;
}
.filters label{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.filters select,.filters input{
  font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--raised);color:var(--ink);
}
.filters input[type="search"]{min-width:190px;flex:1}
.filter-note{font-size:12px;color:var(--muted);margin-left:auto}

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

/* ---------- cards & charts ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:17px 18px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.card h2{font-size:15px;margin:0}
.card-sub{font-size:12px;color:var(--muted);margin:0 0 14px}
.card-head .spacer{flex:1}
.link-btn{
  border:0;background:transparent;color:var(--brand);font:inherit;font-size:11px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;padding:3px 5px;border-radius:6px;
}
.link-btn:hover{background:var(--soft)}

/* 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:9px}
.hbar-name{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-track{display:block;background:var(--hair);border-radius:5px;height:19px;position:relative;overflow:hidden}
.hbar-fill{display:block;height:100%;border-radius:0 5px 5px 0;transition:width .35s cubic-bezier(.4,0,.2,1)}
.hbar-count{font-size:12.5px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.hbar-row:focus-visible,.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:7px}
.col-axis span{flex:1;text-align:center;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.col-peak{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--ink-2);white-space:nowrap}

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

/* ---------- agenda ---------- */
.agenda-group{margin-bottom:16px}
.agenda-group h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.agenda-item{display:flex;gap:11px;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:11px;font-weight:800;color:#fff;margin-top:1px}
.agenda-icon.overdue{background:var(--critical)}
.agenda-icon.soon{background:var(--serious)}
.agenda-icon.later{background:var(--stage-out)}
.agenda-body{min-width:0;flex:1}
.agenda-what{font-size:13.5px;font-weight:650;margin:0}
.agenda-where{font-size:12px;color:var(--muted);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agenda-when{font-size:12px;text-align:right;flex:0 0 auto;color:var(--ink-2);font-variant-numeric:tabular-nums}
.agenda-when b{display:block;font-size:11px;font-weight:800}
.agenda-when.overdue b{color:var(--critical)}
.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:13px}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--hair);white-space:nowrap}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800}
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:9px;padding:8px 11px;font-size:12.5px;
  box-shadow:0 10px 26px rgba(15,40,32,.18);opacity:0;transition:opacity .12s;max-width:260px;
}
.tip.on{opacity:1}
.tip b{display:block;margin-bottom:2px;font-size:12.5px}
.tip-row{display:flex;align-items:center;gap:7px;color:var(--ink-2)}

.empty{color:var(--muted);font-size:13px;padding:18px 0;text-align:center}
.hidden{display:none!important}
.loading-veil{opacity:.45;transition:opacity .2s}   /* hold previous render, no skeleton flash */

footer{max-width:1180px;margin:0 auto;padding:0 20px 40px;color:var(--muted);font-size:12.5px}
.banner{
  border:1px solid var(--warning);background:color-mix(in srgb,var(--warning) 12%,var(--surface));
  color:var(--ink);border-radius:10px;padding:11px 14px;margin-bottom:16px;font-size:13px;
}
@media (max-width:620px){
  .hbar-row{grid-template-columns:86px 1fr 28px}
  .topbar h1{font-size:20px}
  .tile-value{font-size:27px}
}
@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:12px;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:8px}
.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:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal-row .who{display:block;font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal-row .next{display:block;font-size:12px;color:var(--ink-2);text-align:right;white-space:nowrap}
.deal-row .next b{display:block;font-size:11px;font-weight:800}

/* Transaction folders: one per stage, Closed split by year. */
.folder{border:1px solid var(--line);border-radius:10px;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:9px;padding:11px 12px;cursor:pointer;list-style:none;
  font-weight:750;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:12px;padding:2px 9px;font-size:11px;font-weight:700}
.folder-body{padding:4px 8px 6px}
.folder.year{margin:6px 0;border-radius:8px}
.folder.year>summary{padding:8px 10px;font-size:13px;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:12px;text-align:center}
.warn-dot{color:var(--critical);font-weight:800;margin-right:5px}

.drawer{position:fixed;inset:0;background:rgba(8,16,26,.6);backdrop-filter:blur(2px);z-index:40;
  padding:22px 14px;overflow:auto}
.drawer-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;max-width:560px;
  margin:0 auto;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.drawer-head{display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line);
  margin:-4px -20px 14px;padding:0 20px 13px}
.drawer-head h2{font-size:17px;margin:0}
.drawer-sub{font-size:12.5px;color:var(--muted);margin:3px 0 0}
.modal-close{border:0;background:transparent;color:var(--muted);font-size:27px;line-height:1;
  border-radius:7px;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:5px 12px;font-size:13.5px;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:15px 20px 18px;background:var(--raised);border-radius:0 0 15px 15px}
.share-block h3{font-size:13px;margin:0 0 5px}
.share-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.share-url{flex:1;min-width:200px;font-size:12px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);color:var(--ink-2);font-family:ui-monospace,Menlo,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn{border:0;border-radius:8px;padding:9px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  background:var(--brand);color:var(--on-brand)}
.btn:hover{filter:brightness(1.07)}
.btn.secondary{background:transparent;color:var(--brand);border:1px solid var(--line)}
.btn.secondary:hover{background:var(--soft)}
.btn.danger{background:transparent;color:var(--critical);border:1px solid var(--line)}
.btn.danger:hover{background:color-mix(in srgb,var(--critical) 10%,transparent)}
.btn[disabled]{opacity:.55;cursor:wait}
.share-note{font-size:12px;color:var(--muted);margin:9px 0 0}
.account-chip{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);border-radius:18px;
  padding:6px 12px;font-size:12px;font-weight:650;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The chip links to /account; links styled as buttons keep the button look. */
a.account-chip,a.ghost-btn{color:inherit;text-decoration:none}
a.account-chip:hover{background:rgba(255,255,255,.24)}
.connect-steps{margin:0 0 14px;padding-left:20px;color:var(--ink-2);font-size:13.5px;line-height:1.6}
.connect-steps code{background:var(--soft);border-radius:4px;padding:1px 6px;font-size:12.5px}
.auth-veil{position:fixed;inset:0;background:var(--page);display:grid;place-items:center;z-index:60;color:var(--muted);font-size:13px}
/* ---------- guided setup ---------- */
.setup-page .topbar{padding-bottom:46px}
.setup-main{max-width:720px;margin:0 auto;padding:0 20px 72px}
.progress-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  margin:-30px 0 18px;box-shadow:var(--shadow);position:relative;z-index:2}
.progress-head{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.progress-head strong{font-size:14px}
.progress-count{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.progress-track{height:6px;border-radius:4px;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:9px 0 0;font-size:12px;color:var(--muted)}

.step{padding:0;overflow:hidden;margin-bottom:11px}
.step-head{display:flex;gap:13px;align-items:flex-start;width:100%;border:0;background:transparent;
  font:inherit;text-align:left;color:var(--ink);padding:15px 17px;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:12px;font-weight:800;margin-top:1px}
.step.complete .step-num{background:var(--good);color:#fff}
.step.open .step-num{background:var(--brand);color:var(--on-brand)}
.step-heading{flex:1;min-width:0}
.step-title{display:block;font-size:14.5px;font-weight:700}
.step.complete .step-title{color:var(--muted)}
.step-blurb{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.step-chevron{flex:0 0 auto;color:var(--muted);font-size:11px;margin-top:5px}
.step-body{padding:0 17px 17px 55px}
.step-list{margin:0 0 14px;padding-left:19px;font-size:13.5px;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:4px;padding:1px 6px;font-size:12.5px}
.step-aside{font-size:12.5px;color:var(--muted);margin:12px 0 0;line-height:1.5}
.step-aside.missing{color:var(--soon-ink);background:var(--warn-soft,transparent);font-weight:600}
.mark-done{margin-top:13px}
.step-body .link-btn{display:block;margin-top:10px}
a.btn{display:inline-block;text-decoration:none}

.ok-line{display:flex;align-items:center;gap:9px;font-size:13.5px;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:#fff;font-size:11px;font-weight:800;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:9px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.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:11px;font-weight:800;color:#fff;margin-top:1px}
.check.pass .check-dot{background:var(--good)}
.check.warn .check-dot{background:var(--warning);color:#3a2a05}
.check-detail{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}

.done-card{text-align:center;padding:26px 20px}
.done-card h2{font-size:18px;margin:0 0 6px}
.setup-foot{text-align:center;color:var(--muted);font-size:12.5px;margin-top:20px}
@media (max-width:560px){.step-body{padding-left:17px}}
/* a step's own button sits inside the instruction that tells you to press it */
.step-list li>.btn{display:table;margin:6px 0 8px}
.step-list li>.step-aside.missing{margin:6px 0 8px}
.upkeep{margin:6px 0 0;padding-left:18px}
.upkeep li{margin:3px 0}
.mini-select{font:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;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:25px}
.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:12px;font-weight:700;color:var(--ink-2)}
.edit-field input,.edit-field select,.edit-dates input,.edit-dates select{font:inherit;font-size:13px;font-weight:400;padding:7px 9px;border:1px solid var(--line);border-radius:8px;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:10px;box-shadow:0 10px 28px rgba(11,31,51,.16);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:13px;padding:9px 12px;cursor:pointer}
.address-suggestions button:hover,.address-suggestions button.active{background:var(--soft)}
.address-suggestions .note{padding:9px 12px;font-size:12px;color:var(--ink-2)}
.address-suggestions .google{padding:5px 12px;font-size:10px;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:12.5px;color:var(--ink-2);margin:6px 0 0}
.edit-msg.error{color:var(--critical)}
.edit-heading{font-size:14px;margin:18px 0 2px}
.edit-dates td{vertical-align:middle}
.row-actions{white-space:nowrap}
.row-actions .btn{padding:6px 10px}
@media (max-width:520px){.edit-grid{grid-template-columns:1fr}}
.edit-dates{width:100%}
.edit-dates th,.edit-dates td{padding:6px 4px}
.edit-dates td:first-child{font-size:12.5px;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}
.row-actions .link-btn{font-size:11px}
.notes-block{margin-top:18px}
.notes-block h3{font-size:14px;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:13px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;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:11.5px;color:var(--muted)}
.note-text{margin:3px 0 0;font-size:13px;white-space:pre-wrap;word-break:break-word}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--hair);font-size:13px}
.checklist li span:last-child{display:flex;flex-direction:column;min-width:0}
.checklist a{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.checklist em{font-size:12px;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:11px;font-weight:800;color:#fff}
.checklist li.done .tick{background:var(--deal-closed);border-color:var(--deal-closed)}
.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:12.5px;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:-30px}
  .topbar-inner{gap:8px}
  .topbar-inner > div:first-child{flex:1 1 100%}
  .topbar .spacer{display:none}
  .ghost-btn{padding:6px 10px;font-size:11.5px}
  .account-chip{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .filters{gap:8px}
  .filters input[type="search"]{min-width:0;flex:1 1 100%}
  .card{padding:14px 13px}
  .tiles{grid-template-columns:1fr 1fr;gap:8px}
  .tile{padding:11px 12px}
  .tile-value{font-size:22px}
  .tile-label{font-size:10px}
  .tile-sub{font-size:11px}
  .income-tiles .tile-value{font-size:20px}
  .income-table{min-width:470px;font-size:12.5px}
  /* The next date moves under the address, so the address is not cut short. */
  .deal-row{grid-template-columns:1fr;gap:3px}
  .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:13px}
  /* 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:14px;font-weight:700;padding:0;text-transform:none;letter-spacing:0}
.condition-client{font-size:12px;color:var(--muted)}
.condition-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:4px 0;font-size:13px}
.condition-row.firm{grid-template-columns:1fr auto;color:var(--ink-2)}
.condition-when{font-size:12px;color:var(--ink-2);text-align:right;white-space:nowrap}
.condition-when.overdue b{color:var(--critical)}
.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 ---------- */
:root{--shadow:0 1px 2px rgba(15,30,45,.05),0 6px 18px rgba(15,30,45,.05)}
:root[data-theme="dark"]{--shadow:0 1px 2px rgba(0,0,0,.25),0 8px 22px rgba(0,0,0,.22)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--shadow:0 1px 2px rgba(0,0,0,.25),0 8px 22px rgba(0,0,0,.22)}}
.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,rgba(255,255,255,.14),rgba(255,255,255,0) 70%);pointer-events:none}
.topbar h1{font-size:25px;font-weight:750}
.topbar-date{margin:1px 0 0;font-size:13px;opacity:.82}
.card,.tile{transition:box-shadow .2s,border-color .2s}
.card{border-color:var(--hair);padding:19px 20px}
.tile{border-color:var(--hair)}
.tile:hover{box-shadow:0 2px 4px rgba(15,30,45,.06),0 10px 26px rgba(15,30,45,.08)}
.card h2{font-size:15.5px;font-weight:750;display:flex;align-items:center;gap:8px}
.card h2::before{content:"";width:4px;height:15px;border-radius:2px;background:var(--brand-bright);flex:0 0 auto}
.card-sub{line-height:1.5}
.tiles,.grid{gap:14px}
.btn{transition:filter .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:default}
.empty{padding:26px 12px;border:1px dashed var(--line);border-radius:10px;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:7px;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:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.paper-chip{font-size:12px;padding:3px 9px;border-radius:12px;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:9px 9px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--band) 12%,var(--surface)) 0%,var(--surface) 100%);
  margin:-20px -20px 14px;padding:18px 20px 14px}
.drawer-head h2{font-size:19px}
.drawer-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;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:12px;padding:2px 9px}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pill)}
.drawer-h{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:18px 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}
#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:11.5px;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:800}
.stage-track.out{display:block;font-size:13px;color:var(--ink-2);background:var(--raised);border:1px dashed var(--line);border-radius:10px;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:11px;font-weight:800;color:#fff;
  border:2px solid var(--line);background:var(--surface);position:relative;z-index:1}
.date-line li.done .date-dot{background:var(--deal-closed);border-color:var(--deal-closed)}
.date-line li.overdue .date-dot{border-color:var(--critical);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:13.5px}
.date-what span{font-size:12px;color:var(--muted)}
.date-line li.done .date-what b{color:var(--ink-2);font-weight:600}
.date-when{font-size:12px;font-weight:700;color:var(--ink-2);white-space:nowrap;padding-top:2px}
.date-line li.overdue .date-when{color:var(--critical)}
.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:3px;background:var(--hair);overflow:hidden;margin:0 0 8px}
.check-meter span{display:block;height:100%;background:var(--deal-closed);border-radius:3px;transition:width .3s}
.checklist li{align-items:flex-start}
.checklist .check-what{flex:1;display:flex;flex-direction:column;min-width:0}
.checklist li .btn{padding:5px 10px;font-size:12px;margin-left:auto}
.checklist li .link-btn{margin-left:auto}
.checklist li.later{opacity:.72}
.checklist li.later .tick{border-style:dashed}
.checklist li.missing .tick{border-color:var(--critical)}
@media (max-width:620px){
  .drawer-head{margin:0 -14px 12px;padding:14px 14px 12px}
  .stage-track li{font-size:10px}
}
.notes-block .drawer-h{font-size:12px;margin:0 0 8px}
@media (max-width:620px){
  .card-head{flex-wrap:wrap;row-gap:6px}
  #newDeal{flex:1 1 100%;order:10}
  #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:5px 10px}
.cal-views{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.cal-view{border:0;background:var(--surface);color:var(--ink-2);font:inherit;font-size:12px;font-weight:700;padding:5px 11px;cursor:pointer}
.cal-view[aria-pressed="true"]{background:var(--brand);color:var(--on-brand)}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--hair);border-radius:10px;overflow:hidden}
.cal-dow{font-size:11px;font-weight:800;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 5px 6px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:3px;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:12px;font-weight:700;color:var(--ink-2);
  padding:1px 6px;border-radius:10px;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:4px;
  background:color-mix(in srgb,var(--chip) 16%,var(--surface));color:var(--ink);font:inherit;font-size:11px;line-height:1.3;
  padding:2px 5px;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{opacity:.55;text-decoration:line-through}
.cal-time{font-weight:800;margin-right:4px}
.cal-more{border:0;background:transparent;color:var(--brand);font:inherit;font-size:11px;font-weight:700;text-align:left;padding:0 4px;cursor:pointer}
.cal-dots{display:none;gap:3px;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:13px;padding:7px 10px;margin-bottom:5px;white-space:normal}
@media (max-width:620px){
  .cal-grid.month .cal-day{min-height:48px;padding:3px 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:5px 2px;text-align:center;font-size:10px}
  .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:7px 0;border-top:1px solid var(--hair);font-size:13px}
.expense-what{flex:1;display:flex;flex-direction:column;min-width:0}
.expense-what span{font-size:12px;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:13px;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:9px 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:13px;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:12px;font-weight:800;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:7px 0;border-top:1px solid var(--hair);font-size:13px}
.client-list .link-btn{font-size:13px;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:12px}
.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:8px}
.person:hover,.person:focus-visible{background:var(--soft)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;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:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-main span,.person-reach{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-deals{font-size:12px;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:7px 0;border-top:1px solid var(--hair);font-size:13px}
.person-deal-list a{font-weight:700}
.person-when{font-size:12px;color:var(--muted)}
#contactDialog textarea{font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;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:10px;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:8px;padding:8px 10px;font:inherit;font-size:13px;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 ---------- */
.banner.demo-banner{background:var(--soft);border-color:color-mix(in srgb,var(--brand) 30%,var(--line));color:var(--ink)}
.banner.demo-banner a{color:var(--brand);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:12px;padding:12px;margin:0 0 12px;background:var(--raised)}
.offer-table{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
.offer-table th{text-align:left;font-size:11px;font-weight:700;color:var(--ink-2);padding:4px 6px;border-bottom:1px solid var(--line)}
.offer-table td{padding:7px 6px;white-space:nowrap;border-bottom:1px solid var(--line);vertical-align:top}
.offer-evidence{font-size:11px;color:var(--ink-2);margin-top:2px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offer-how{font-size:11px;color:var(--brand);margin-top:2px}
.offer-notes{margin:6px 0 10px 18px;padding:0;font-size:12px;color:var(--ink-2)}
.offer-table td:nth-child(2){white-space:normal}