@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500..700&family=DM+Sans:opsz,wght@9..40,300..700&family=DM+Mono:wght@400;500&display=swap');

/* FMA Design System v1.1 tokens */
:root{
  --fma-coral-50:#FFF1F1; --fma-coral-200:#FFB3B6;
  --fma-coral:#E65156; --fma-coral-hover:#CC474C; --fma-coral-text:#D6373D; --fma-coral-deep:#B02A30;
  --fma-teal-50:#D6F2EE; --fma-teal:#00A699; --fma-teal-deep:#017F75;
  --fma-ink:#221F1D; --fma-body:#4A4642; --fma-muted:#6E665E;
  --fma-border:#E7E2DC; --fma-sand:#F1EAE0; --fma-cream:#FBF7F2; --fma-white:#FFFFFF;
  --fma-bg:var(--fma-cream); --fma-surface:var(--fma-white); --fma-surface-tint:var(--fma-sand);
  --fma-text:var(--fma-body); --fma-text-strong:var(--fma-ink); --fma-text-muted:var(--fma-muted);
  --fma-line:var(--fma-border); --fma-accent:var(--fma-coral); --fma-link:var(--fma-coral-text);
  --fma-success:#00A699; --fma-warning:#F4A732; --fma-error:#D6373D;
  --fma-warning-50:#FDF0DA; --fma-warning-deep:#8A5A0B;
  --fma-display:"Fraunces", Georgia, serif;
  --fma-font:"DM Sans", system-ui, -apple-system, sans-serif;
  --fma-mono:"DM Mono", ui-monospace, Menlo, monospace;
  --fma-r-sm:8px; --fma-r-md:12px; --fma-r-lg:16px; --fma-r-xl:24px; --fma-r-pill:999px;
  --fma-s1:4px; --fma-s2:8px; --fma-s3:12px; --fma-s4:16px; --fma-s6:24px; --fma-s8:32px; --fma-s12:48px; --fma-s16:64px;
  --fma-shadow-sm:0 1px 2px rgba(34,31,29,.06);
  --fma-shadow-md:0 8px 24px rgba(34,31,29,.08);
  --fma-shadow-lg:0 18px 48px rgba(34,31,29,.12);
  --fma-container:1180px; /* dashboard is wider than the 980px marketing container */
  --fma-focus:#E65156;
  --fma-ease:cubic-bezier(.4,0,.2,1); --fma-dur:.25s;
}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important} }

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fma-bg); color:var(--fma-text); font:400 16px/1.6 var(--fma-font); -webkit-font-smoothing:antialiased}
a{color:var(--fma-link); text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--fma-focus); outline-offset:2px}
h1,h2{font-family:var(--fma-display); font-weight:600; color:var(--fma-text-strong); margin:0}
h1{font-size:clamp(28px,4vw,36px); line-height:1.1}
h2{font-size:clamp(24px,3vw,28px); line-height:1.2}
h3{font:500 clamp(18px,2vw,20px)/1.3 var(--fma-font); color:var(--fma-text-strong); margin:0}
.eyebrow{font-size:12px; line-height:1; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--fma-text-muted)}
.muted{color:var(--fma-text-muted)} .small{font-size:14px; line-height:1.5}
.wrap{max-width:var(--fma-container); margin:0 auto; padding:0 var(--fma-s4)}
@media (min-width:720px){ .wrap{padding:0 var(--fma-s6)} }
[hidden]{display:none !important}

/* Top bar */
.topbar{background:var(--fma-surface); border-bottom:1px solid var(--fma-line); position:sticky; top:0; z-index:10}
.topbar .wrap{display:flex; align-items:center; gap:var(--fma-s4); min-height:64px}
.brand{display:flex; align-items:center; gap:10px; color:var(--fma-text-strong); font-weight:700; white-space:nowrap}
.brand:hover{text-decoration:none}
.brand-mark{width:32px; height:32px; border-radius:var(--fma-r-sm); background:var(--fma-coral); display:grid; place-items:center; flex:none}
.brand small{font-weight:400; color:var(--fma-text-muted); margin-left:2px}
.topbar .spacer{flex:1}
.who{display:flex; align-items:center; gap:var(--fma-s3); font-size:14px}
.sync{font-size:14px; color:var(--fma-text-muted)}
@media (max-width:640px){ .sync, .brand small{display:none} }

/* Buttons */
.btn{font:500 16px/1 var(--fma-font); border-radius:var(--fma-r-pill); padding:12px 20px; border:1px solid transparent; cursor:pointer; transition:background var(--fma-dur) var(--fma-ease), border-color var(--fma-dur) var(--fma-ease); display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.btn-primary{background:var(--fma-coral); color:#fff} .btn-primary:hover{background:var(--fma-coral-hover)}
.btn-primary:disabled{background:var(--fma-coral-200); cursor:default}
.btn-secondary{background:var(--fma-surface); color:var(--fma-text-strong); border-color:var(--fma-line)} .btn-secondary:hover{border-color:var(--fma-text-muted)}
.btn-sm{font-size:14px; padding:8px 14px}
.btn-text{background:none; border:0; color:var(--fma-link); padding:8px 4px; font:500 14px/1 var(--fma-font); cursor:pointer}
.btn-text:hover{text-decoration:underline}
.btn-block{width:100%; justify-content:center}

/* Hero */
.hero{padding:var(--fma-s8) 0 var(--fma-s6)}
.hero h1{margin-top:var(--fma-s3)}
.hero p{margin:var(--fma-s3) 0 0; font-size:18px; max-width:60ch}

/* Tabs */
.tabs{display:flex; gap:var(--fma-s2); overflow-x:auto; padding-bottom:2px; margin-bottom:var(--fma-s6); scrollbar-width:none}
.tab{font:500 14px/1 var(--fma-font); padding:10px 16px; border-radius:var(--fma-r-pill); border:1px solid var(--fma-line); background:var(--fma-surface); color:var(--fma-text); cursor:pointer; white-space:nowrap}
.tab[aria-selected="true"]{background:var(--fma-ink); color:#fff; border-color:var(--fma-ink)}
.tab .count{margin-left:6px; opacity:.7}

/* Stat tiles */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--fma-s4); margin-bottom:var(--fma-s8)}
@media (max-width:820px){ .stats{grid-template-columns:repeat(2,1fr)} }
.stat{background:var(--fma-surface); border:1px solid var(--fma-line); border-radius:var(--fma-r-lg); padding:var(--fma-s4) var(--fma-s6); box-shadow:var(--fma-shadow-sm)}
.stat .num{font:600 36px/1.1 var(--fma-display); color:var(--fma-text-strong); margin-top:var(--fma-s2)}
.stat.alert .num{color:var(--fma-coral-text)}
.stat .sub{font-size:14px; color:var(--fma-text-muted)}

/* Sections */
.section{margin-bottom:var(--fma-s12)}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--fma-s4); margin-bottom:var(--fma-s4); flex-wrap:wrap}
.section-head p{margin:var(--fma-s1) 0 0}
.chips{display:flex; gap:var(--fma-s2); flex-wrap:wrap}
.chip{font:500 14px/1 var(--fma-font); padding:8px 14px; border-radius:var(--fma-r-pill); border:1px solid var(--fma-line); background:var(--fma-surface); cursor:pointer; color:var(--fma-text)}
.chip[aria-pressed="true"]{background:var(--fma-coral-50); border-color:var(--fma-coral-200); color:var(--fma-coral-deep)}

/* Ranked list (signature shortlist pattern) */
.ranked{list-style:none; margin:0; padding:0; display:grid; gap:var(--fma-s3)}
.item{display:grid; grid-template-columns:44px 1fr auto; gap:var(--fma-s4); align-items:start; background:var(--fma-surface); border:1px solid var(--fma-line); border-radius:var(--fma-r-lg); padding:var(--fma-s4) var(--fma-s6) var(--fma-s4) var(--fma-s4); box-shadow:var(--fma-shadow-sm); transition:box-shadow var(--fma-dur) var(--fma-ease)}
.item:hover{box-shadow:var(--fma-shadow-md)}
.rank{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font:600 18px/1 var(--fma-font); background:var(--fma-sand); color:var(--fma-text-strong)}
.item.top{border-color:var(--fma-coral-200); box-shadow:var(--fma-shadow-md)}
.item.top .rank{background:var(--fma-coral); color:#fff}
.item h3{font-size:18px; line-height:1.35}
.item .detail{margin:var(--fma-s1) 0 0; font-size:15px}
.item .next{margin:var(--fma-s2) 0 0; font-size:15px; color:var(--fma-text-strong)}
.item .next b{font-weight:500}
.meta{display:flex; flex-wrap:wrap; gap:var(--fma-s2); align-items:center; margin-top:var(--fma-s3); font-size:14px; color:var(--fma-text-muted)}
.actions{display:flex; flex-direction:column; gap:var(--fma-s2); align-items:stretch}
@media (max-width:640px){
  .item{grid-template-columns:36px 1fr; padding:var(--fma-s4)}
  .rank{width:36px; height:36px; font-size:16px}
  .actions{grid-column:1 / -1; flex-direction:row; flex-wrap:wrap}
}

/* Pills */
.pill{display:inline-flex; align-items:center; gap:6px; font:500 12px/1 var(--fma-font); padding:6px 10px; border-radius:var(--fma-r-pill); background:var(--fma-sand); color:var(--fma-text-strong); white-space:nowrap}
.pill.urgent{background:var(--fma-coral-50); color:var(--fma-coral-deep)}
.pill.high{background:var(--fma-warning-50); color:var(--fma-warning-deep)}
.pill.ok{background:var(--fma-teal-50); color:var(--fma-teal-deep)}
.pill.sample{background:var(--fma-ink); color:#fff}
.dot{width:8px; height:8px; border-radius:50%; background:currentColor}

/* Team cards */
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--fma-s4)}
.card{background:var(--fma-surface); border:1px solid var(--fma-line); border-radius:var(--fma-r-lg); padding:var(--fma-s6); box-shadow:var(--fma-shadow-sm)}
.card.tint{background:var(--fma-surface-tint); border-color:transparent; box-shadow:none}
.person{display:flex; align-items:center; gap:var(--fma-s3); margin-bottom:var(--fma-s4)}
.avatar{width:44px; height:44px; border-radius:50%; background:var(--fma-sand); color:var(--fma-text-strong); display:grid; place-items:center; font-weight:700}
.person .counts{font-size:14px; color:var(--fma-text-muted)}
.mini{list-style:none; margin:0 0 var(--fma-s4); padding:0}
.mini li{display:grid; grid-template-columns:28px 1fr; gap:var(--fma-s3); padding:var(--fma-s3) 0; border-top:1px solid var(--fma-line); font-size:15px; line-height:1.45}
.mini li:first-child{border-top:0}
.mini .n{width:28px; height:28px; border-radius:50%; background:var(--fma-sand); display:grid; place-items:center; font-size:13px; font-weight:700; color:var(--fma-text-strong)}
.mini li:first-child .n{background:var(--fma-coral); color:#fff}
.mini .t{color:var(--fma-text-strong); font-weight:500}
.empty{padding:var(--fma-s8); text-align:center; background:var(--fma-surface); border:1px dashed var(--fma-line); border-radius:var(--fma-r-lg); color:var(--fma-text-muted)}
.empty .tick{width:40px; height:40px; border-radius:50%; background:var(--fma-teal-50); color:var(--fma-teal); display:grid; place-items:center; margin:0 auto var(--fma-s3)}

/* Tables */
.table-wrap{background:var(--fma-surface); border:1px solid var(--fma-line); border-radius:var(--fma-r-lg); overflow-x:auto; box-shadow:var(--fma-shadow-sm)}
table{width:100%; border-collapse:collapse; font-size:14px; line-height:1.45}
th{text-align:left; font-weight:500; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--fma-text-muted); padding:12px 16px; border-bottom:1px solid var(--fma-line); white-space:nowrap; background:var(--fma-cream)}
td{padding:12px 16px; border-bottom:1px solid var(--fma-line); vertical-align:top}
tr:last-child td{border-bottom:0}
td .t{color:var(--fma-text-strong); font-weight:500}
td.num, th.num{text-align:right; white-space:nowrap}
.nowrap{white-space:nowrap}

/* Monitor KPIs */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--fma-s4); margin-bottom:var(--fma-s6)}

/* Rules form */
.rules{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--fma-s4)}
label{display:block; font-size:14px; font-weight:500; color:var(--fma-text-strong); margin-bottom:6px}
input{font:400 16px/1.4 var(--fma-font); width:100%; padding:12px 14px; border:1px solid var(--fma-line); border-radius:var(--fma-r-sm); background:var(--fma-surface); color:var(--fma-text-strong)}
input:focus{outline:none; border-color:var(--fma-coral); box-shadow:0 0 0 3px var(--fma-coral-50)}
.help{font-size:14px; color:var(--fma-text-muted); margin-top:6px}
.error{font-size:14px; color:var(--fma-error); margin-top:6px}

/* Login */
.login{min-height:100vh; display:grid; place-items:center; padding:var(--fma-s6) var(--fma-s4)}
.login .card{max-width:440px; width:100%; padding:var(--fma-s8); box-shadow:var(--fma-shadow-lg); border:0}
.login h1{margin:var(--fma-s6) 0 var(--fma-s2)}
.login form{margin-top:var(--fma-s6); display:grid; gap:var(--fma-s4)}
.trust{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--fma-text-muted); margin-top:var(--fma-s6)}
.trust svg{color:var(--fma-teal)}

/* Banner + toast */
.banner{background:var(--fma-ink); color:#fff; font-size:14px}
.banner .wrap{display:flex; gap:var(--fma-s3); align-items:center; min-height:44px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px}
.banner a{color:var(--fma-coral-200)}
.banner select{font:500 14px var(--fma-font); border-radius:var(--fma-r-pill); padding:4px 10px; border:0}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--fma-ink); color:#fff; padding:12px 20px; border-radius:var(--fma-r-pill); font-size:14px; box-shadow:var(--fma-shadow-lg); z-index:50}
.warn-box{background:var(--fma-warning-50); color:var(--fma-warning-deep); border-radius:var(--fma-r-md); padding:var(--fma-s3) var(--fma-s4); font-size:14px; margin-bottom:var(--fma-s6)}
details summary{cursor:pointer; color:var(--fma-link); font-weight:500; font-size:14px; margin-bottom:var(--fma-s3)}
table{min-width:760px}

/* Top panels: improvements + how it works */
.top-panels{display:grid; gap:var(--fma-s4); margin-bottom:var(--fma-s8)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.improve-head p{margin:4px 0 0}
.improve-form{display:flex; gap:var(--fma-s3); margin-top:var(--fma-s4); align-items:flex-start}
.improve-form textarea{flex:1; font:400 16px/1.5 var(--fma-font); padding:10px 14px; border:1px solid var(--fma-line); border-radius:var(--fma-r-sm); resize:vertical; min-height:46px; height:46px; color:var(--fma-text-strong); background:var(--fma-surface)}
.improve-form textarea:focus{outline:none; border-color:var(--fma-coral); box-shadow:0 0 0 3px var(--fma-coral-50)}
@media (max-width:640px){ .improve-form{flex-direction:column; align-items:stretch} .improve-form textarea{width:100%} .improve-form .btn{width:100%; justify-content:center} }
.improve-list{list-style:none; margin:var(--fma-s4) 0 0; padding:0; max-height:320px; overflow:auto}
.improve-list li{display:flex; gap:var(--fma-s4); justify-content:space-between; align-items:flex-start; padding:var(--fma-s3) 0; border-top:1px solid var(--fma-line)}
.improve-list p{margin:0; color:var(--fma-text-strong); white-space:pre-wrap}
.improve-list .meta{margin-top:6px}
.how{padding:0}
.how summary{list-style:none; cursor:pointer; padding:var(--fma-s4) var(--fma-s6); display:flex; gap:var(--fma-s3); align-items:baseline; flex-wrap:wrap; margin:0; color:var(--fma-text-strong)}
.how summary::-webkit-details-marker{display:none}
.how summary::before{content:"▸"; color:var(--fma-coral-text); transition:transform var(--fma-dur) var(--fma-ease); display:inline-block}
.how[open] summary::before{transform:rotate(90deg)}
.how-title{font:500 18px/1.3 var(--fma-font)}
.how-body{padding:0 var(--fma-s6) var(--fma-s6); display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--fma-s6); border-top:1px solid var(--fma-line); padding-top:var(--fma-s4)}
.how-body h4{font:500 16px/1.3 var(--fma-font); color:var(--fma-text-strong); margin:0 0 6px}
.how-body p, .how-body li{font-size:15px; line-height:1.55}
.how-body p{margin:0 0 8px}
.how-body ul{margin:0; padding-left:18px}
.how-table{min-width:0; font-size:14px; margin:6px 0 10px}
.how-table td{padding:6px 10px; border-bottom:1px solid var(--fma-line)}
.how-table td:last-child{text-align:right; font-weight:500; color:var(--fma-text-strong)}
.snooze{display:flex; align-items:center; gap:2px; flex-wrap:wrap}
.snooze .muted{margin-right:2px}
.snooze .btn-text{padding:6px 4px}
.log-table td{font-size:14px}

/* Book follow-up */
.book-form{display:flex; flex-wrap:wrap; gap:var(--fma-s3); align-items:flex-end; margin-top:var(--fma-s4); padding:var(--fma-s4); background:var(--fma-cream); border:1px solid var(--fma-line); border-radius:var(--fma-r-md)}
.book-form label{font-size:13px; margin-bottom:4px}
.book-form input, .book-form select{font:400 15px/1.3 var(--fma-font); padding:9px 10px; border:1px solid var(--fma-line); border-radius:var(--fma-r-sm); background:var(--fma-surface); color:var(--fma-text-strong); width:auto}
.book-form .grow{flex:1; min-width:180px} .book-form .grow input{width:100%}
.book-actions{display:flex; gap:var(--fma-s2); align-items:center}

/* Lost reasons bars */
.lost-legend{display:flex; flex-wrap:wrap; gap:var(--fma-s4); font-size:14px; margin-bottom:var(--fma-s4)}
.lost-legend span{display:inline-flex; align-items:center; gap:6px}
.sw{display:inline-block; width:12px; height:12px; border-radius:3px}
.sw0{background:#E65156} .sw1{background:#017F75} .sw2{background:#F4A732} .sw3{background:#6E665E}
.bars{display:grid; gap:10px}
.bar-row{display:grid; grid-template-columns:minmax(140px,260px) 1fr 40px; gap:var(--fma-s3); align-items:center; font-size:14px}
.bar-label{color:var(--fma-text-strong)}
.bar-track{display:flex; height:14px; background:var(--fma-sand); border-radius:var(--fma-r-pill); overflow:hidden}
.bar{display:block; height:100%}
.bar-n{text-align:right; font-weight:500; color:var(--fma-text-strong)}
@media (max-width:640px){ .bar-row{grid-template-columns:1fr 36px} .bar-track{grid-column:1 / -1; order:3} }