/* Avé portal, design tokens straight from Brand and Styling.md §11 */
@font-face{font-family:'EB Garamond';src:url(/fonts/ebgaramond-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url(/fonts/jost-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url(/fonts/jost-500.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  --bg:#F6F4ED; --sand:#EFE3D0; --surface:#FFFFFF;
  --ink:#1F1B1A; --ink-70:#4A4342; --ink-50:#7A716E; --ink-20:#D9D2C9; --ink-08:#EDE9E2;
  --primary:#AD0058; --primary-700:#8C0047; --primary-200:#E8A9C7; --primary-050:#FBEBF2;
  --gold:#CFAD66; --blush:#E8D4D4;
  --success:#2F6B4F; --success-bg:#E7F0EA;
  --warning:#B07A1E; --warning-bg:#FBF1DE;
  --error:#A62B26;   --error-bg:#FBEAE9;
  --info:#2C5C7A;    --info-bg:#E8F0F5;
  --font-title:"Sabon","EB Garamond",Georgia,serif;
  --font-body:"Gabriel Sans","Jost","Helvetica Neue",Arial,sans-serif;
  --r-sm:4px; --r-md:8px; --r-lg:16px; --r-full:9999px;
  --sh-xs:0 1px 2px rgba(31,27,26,.04); --sh-sm:0 2px 8px rgba(31,27,26,.06);
  --sh-md:0 8px 24px rgba(31,27,26,.08); --sh-lg:0 16px 48px rgba(31,27,26,.10);
  --ease:cubic-bezier(.4,0,.2,1); --nav-w:240px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink-70);font:16px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--primary);text-decoration:none}
[hidden]{display:none!important}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;
  border:0;border-radius:var(--r-md);font:500 15px/1 var(--font-body);cursor:pointer;
  transition:background var(--ease) 150ms,border-color var(--ease) 150ms}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-700)}
.btn-primary:disabled{background:var(--ink-20);color:var(--ink-50);cursor:not-allowed}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-secondary:hover{background:var(--ink-08)}
.btn-ghost{background:transparent;color:var(--ink-70);height:36px;padding:0 12px}
.btn-ghost:hover{color:var(--primary)}
.btn-sm{height:34px;padding:0 14px;font-size:13.5px}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ------------------------------------------------------------------ login */
.login{min-height:100svh;display:grid;place-items:center;padding:32px}
.login-card{width:100%;max-width:400px;text-align:center}
.login-card .mark{width:132px;margin:0 auto 26px}
.login-card .mark img{width:132px;height:132px;display:block;margin:0 auto}
.login h1{font:400 30px/1.2 var(--font-title);color:var(--ink);margin:0 0 6px}
.login .sub{font-size:14px;color:var(--ink-50);margin:0 0 30px}
.field{text-align:left;margin-bottom:16px}
.field label{display:block;font:500 13px/1.4 var(--font-body);color:var(--ink-70);margin-bottom:6px}
.field input{width:100%;height:44px;padding:0 12px;background:var(--surface);
  border:1px solid var(--ink-20);border-radius:var(--r-sm);font:400 15px var(--font-body);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-200)}
.login .btn{width:100%;margin-top:6px}
.msg{margin:16px 0 0;padding:11px 14px;border-radius:var(--r-sm);font-size:13.5px;text-align:left}
.msg-error{background:var(--error-bg);color:var(--error)}
.msg-info{background:var(--info-bg);color:var(--info)}
.msg-success{background:var(--success-bg);color:var(--success)}
.login-foot{margin-top:24px;font-size:12px;color:var(--ink-50);letter-spacing:.06em}

/* -------------------------------------------------------------- app shell */
.app{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);min-height:100svh}
aside{background:var(--bg);border-right:1px solid var(--ink-20);display:flex;flex-direction:column;
  position:sticky;top:0;height:100svh}
.brand{display:flex;align-items:center;padding:18px 18px 14px}
.brand svg,.brand img{width:46px;height:46px;flex:none;display:block}
nav{flex:1;overflow-y:auto;padding:6px 10px}
.nav-label{font:500 10px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-50);padding:16px 10px 8px}
nav a{display:flex;align-items:center;gap:10px;padding:9px 11px 9px 13px;margin-bottom:1px;
  border-radius:var(--r-sm);color:var(--ink-70);font-size:14.5px}
nav a:hover{background:var(--ink-08)}
nav a.active{background:var(--primary-050);color:var(--primary);font-weight:500}
nav a svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.nav-foot{border-top:1px solid var(--ink-20);padding:12px 14px}
.who{font-size:13px;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.who-role{font-size:11.5px;color:var(--ink-50);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}

main{min-width:0;padding:30px 36px 72px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding-bottom:18px;border-bottom:1px solid var(--ink-20);margin-bottom:26px}
.eyebrow{font:500 11px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-50);margin:0 0 8px}
h1.page-title{font:400 34px/1.15 var(--font-title);color:var(--ink);margin:0;letter-spacing:-.01em}
.page-sub{font-size:14.5px;color:var(--ink-50);margin:8px 0 0;max-width:68ch}

/* ------------------------------------------------------------------ cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-bottom:28px}
.card{background:var(--surface);border:1px solid var(--ink-20);border-radius:var(--r-md);
  padding:18px 20px;box-shadow:var(--sh-xs)}
.card .k{font:500 11px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50)}
.card .v{font:400 32px/1.1 var(--font-title);color:var(--ink);margin-top:10px;font-variant-numeric:tabular-nums}
.card .m{font-size:12.5px;color:var(--ink-50);margin-top:6px}
.card.featured{border-top:2px solid var(--gold)}

/* ------------------------------------------------------------------ table */
.panel{background:var(--surface);border:1px solid var(--ink-20);border-radius:var(--r-md);overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--sand);text-align:left;font:500 11px/1.3 var(--font-body);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-50);padding:11px 16px;white-space:nowrap}
td{padding:13px 16px;border-top:1px solid var(--ink-20);color:var(--ink-70);vertical-align:middle}
td.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--primary-050)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--r-full);
  font:500 11.5px/1 var(--font-body);background:var(--ink-08);color:var(--ink-50)}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-warning{background:var(--warning-bg);color:var(--warning)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-primary{background:var(--primary-050);color:var(--primary)}

/* ------------------------------------------------------------ empty state */
.empty{text-align:center;padding:64px 28px;background:var(--surface);
  border:1px dashed var(--ink-20);border-radius:var(--r-md)}
.empty .rule{width:54px;height:1px;background:var(--gold);margin:0 auto 18px}
.empty h3{font:400 21px/1.3 var(--font-title);color:var(--ink);margin:0 0 8px}
.empty p{font-size:14px;color:var(--ink-50);margin:0 auto;max-width:44ch}
.empty .phase{margin-top:16px}

/* ------------------------------------------------- impersonation banner */
.imp{background:var(--primary);color:#fff;padding:9px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-size:13.5px;position:sticky;top:0;z-index:20}
.imp b{font-weight:500}
.imp button{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:var(--r-sm);
  height:30px;padding:0 12px;font:500 12.5px var(--font-body);cursor:pointer}
.imp button:hover{background:rgba(255,255,255,.26)}

.banner{background:var(--surface);border:1px solid var(--ink-20);border-left:3px solid var(--gold);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:14px 18px;margin-bottom:22px;font-size:14px}
.banner b{color:var(--ink)}

@media(max-width:820px){
  .app{grid-template-columns:1fr}
  aside{position:static;height:auto;border-right:0;border-bottom:1px solid var(--ink-20)}
  nav{display:flex;gap:4px;overflow-x:auto;padding:8px}
  .nav-label{display:none} nav a{white-space:nowrap}
  main{padding:22px 18px 60px}
}

/* --------------------------------------------------------------- modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(31,27,26,.4);display:grid;place-items:center;
  padding:24px;z-index:50}
.modal{background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-lg);
  width:100%;max-width:460px;padding:26px 28px}
.modal h2{font:400 23px/1.25 var(--font-title);color:var(--ink);margin:0 0 10px}
.modal p{font-size:14px;color:var(--ink-50);margin:0 0 18px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

/* ------------------------------------------------------- client progress */
.steps{list-style:none;margin:16px 0 0;padding:0;display:flex;gap:0;flex-wrap:wrap}
.step{flex:1 1 118px;min-width:118px;position:relative;padding:0 6px 0 0}
.step .dot{display:block;width:11px;height:11px;border-radius:50%;background:var(--ink-20);
  margin-bottom:9px;position:relative;z-index:1}
.step::before{content:"";position:absolute;left:5px;right:0;top:5px;height:1px;background:var(--ink-20)}
.step:last-child::before{display:none}
.step .lbl{font-size:12.5px;color:var(--ink-50);display:block;padding-right:10px;line-height:1.35}
.step.done .dot{background:var(--gold)}
.step.done::before{background:var(--gold)}
.step.done .lbl{color:var(--ink-70)}
.step.now .dot{background:var(--primary);box-shadow:0 0 0 4px var(--primary-050)}
.step.now .lbl{color:var(--primary);font-weight:500}

/* team page action button in the header */
.page-head .btn{flex:none}
.field select{width:100%;height:44px;padding:0 10px;background:var(--surface);
  border:1px solid var(--ink-20);border-radius:var(--r-sm);font:400 15px var(--font-body);color:var(--ink)}
.field input[readonly]{background:var(--ink-08);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.04em}

/* ------------------------------------------------------ settings and team */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:20px;align-items:start}
.panel.pad{padding:22px 24px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.hint{font-size:12.5px;color:var(--ink-50);margin:6px 0 0}
.row-end{display:flex;justify-content:flex-end;margin-top:6px}
.field input:disabled{background:var(--ink-08);color:var(--ink-50)}
tr.clickable{cursor:pointer}
td.go{text-align:right;font-size:13px;color:var(--ink-50);white-space:nowrap}
tr.clickable:hover td.go{color:var(--primary)}
.modal-extra{display:flex;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid var(--ink-20)}
.modal .msg{margin-top:14px}
@media(max-width:560px){.two{grid-template-columns:1fr}}