/* gifSolutions dashboards (admin + coach portal).
   Same material as the Claire Donnelly site: cream paper, ink, one red, sharp corners,
   Noto Serif Display for page titles, Albert Sans 18px for everything you read and click.
   The gifSolutions wordmark is the one place Archivo appears. */

:root{
  --cream:#F7EFE3;
  --cream-2:#EFE4D3;
  --paper:#FFFBF5;
  --ink:#141010;
  --ink-soft:#4A3F39;      /* 8.9:1 on cream */
  --red:#D3030A;           /* fills; white on it 5.5:1 */
  --red-ink:#B8020A;       /* red text on cream, 6:1 */
  --red-lt:#FF6B6B;        /* red text on ink */
  --green-ink:#1F5E3A;     /* "done" text on cream, 7.6:1 */
  --amber-ink:#7A4B00;     /* "waiting" text on cream, 7.2:1 */
  --line:rgba(20,16,16,.16);
  --line-strong:rgba(20,16,16,.32);
  --serif:"Noto Serif Display", Georgia, serif;
  --sans:"Albert Sans", system-ui, sans-serif;
  --mark:"Archivo", "Albert Sans", system-ui, sans-serif;
  --side:264px;
  --top:68px;
  --gut:clamp(16px,3.4vw,48px);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--ink-soft) var(--cream-2)}
body{background:var(--cream);color:var(--ink);font:400 18px/1.55 var(--sans);-webkit-font-smoothing:antialiased;caret-color:var(--red);min-height:100vh}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-ink :focus-visible{outline-color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:50;background:var(--paper);color:var(--ink);padding:12px 16px}
[hidden]{display:none!important}
.num,td.num,.tab{font-variant-numeric:tabular-nums lining-nums}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:20;height:var(--top);background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:20px;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-g{width:34px;height:34px;flex:none}
.brand-word{font:860 23px/1 var(--mark);font-stretch:76%;letter-spacing:-.01em}
.top-ctx{font-size:17px;color:rgba(255,251,245,.78);padding-left:20px;border-left:1px solid rgba(255,251,245,.24);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-ctx b{color:var(--paper);font-weight:600}
.top-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.top-user{font-size:16px;color:rgba(255,251,245,.78)}
.top .linkbtn{color:var(--paper);background:none;border:1px solid rgba(255,251,245,.4);min-height:44px;padding:0 16px;cursor:pointer;white-space:nowrap}
.top .linkbtn:hover{border-color:var(--paper)}
.navtoggle{display:none}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:calc(100vh - var(--top))}
.side{background:var(--cream-2);border-right:1px solid var(--line);padding:28px 0 40px;position:sticky;top:var(--top);height:calc(100vh - var(--top));overflow:auto}
.side nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 24px 0 28px;text-decoration:none;font-weight:500;position:relative}
.side nav a:hover{background:rgba(20,16,16,.05)}
.side nav a[aria-current=page]{background:var(--ink);color:var(--paper);font-weight:600}
.side nav a[aria-current=page] .count{background:var(--paper);color:var(--ink)}
.side nav a[aria-current=page] .count--red{background:var(--red);color:#fff}
.side .count{font-size:15px;font-weight:600;min-width:28px;height:26px;padding:0 7px;display:inline-grid;place-items:center;background:var(--ink);color:var(--paper)}
.side .count--red{background:var(--red);color:#fff}
.side-h{font:600 15px/1.3 var(--sans);color:var(--ink-soft);padding:22px 28px 8px}
.side-client{padding:0 24px 18px 28px;border-bottom:1px solid var(--line);margin-bottom:12px}
.side-client label{display:block;font-size:15px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.side-client select{width:100%}
.main{padding:40px var(--gut) 96px;min-width:0;max-width:1320px}

/* ---------- headings ---------- */
.page-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:28px}
.page-h h1{font:400 clamp(44px,5vw,68px)/.95 var(--serif);font-stretch:62.5%;letter-spacing:-.01em;text-wrap:balance}
.page-h h1 em{font-style:italic;color:var(--red-ink)}
.page-h p{color:var(--ink-soft);max-width:60ch;margin-top:10px}
.page-actions{display:flex;flex-wrap:wrap;gap:10px}
h2.sec{font:400 34px/1.05 var(--serif);font-stretch:62.5%;margin:0 0 14px}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin:52px 0 14px;padding-top:22px;border-top:2px solid var(--ink)}
.sec-head h2{font:400 36px/1 var(--serif);font-stretch:62.5%}
.sec-head p,.sec-head a{font-size:17px;color:var(--ink-soft)}
.lede{font-size:20px;max-width:62ch}
.muted{color:var(--ink-soft)}
.small{font-size:16px}

/* the overview sentence: the month in one line */
.ledger{font:400 clamp(30px,3.4vw,46px)/1.18 var(--serif);font-stretch:62.5%;max-width:30ch;text-wrap:balance;margin:6px 0 8px}
.ledger b{font-weight:400;color:var(--red-ink);font-variant-numeric:lining-nums}
.ledger a{text-decoration-color:var(--line-strong)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;background:var(--red);color:#fff;border:2px solid var(--red);font-weight:600;font-size:18px;text-decoration:none;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.btn:hover{background:var(--ink);border-color:var(--ink);text-decoration:none}
.btn--ink{background:var(--ink);border-color:var(--ink)}
.btn--ink:hover{background:var(--red);border-color:var(--red)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper)}
.btn--sm{min-height:44px;padding:0 16px;font-size:17px}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.btn svg{width:18px;height:18px}
.textbtn{background:none;border:0;padding:0;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--red);text-underline-offset:.28em;cursor:pointer}
.inline{display:inline}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin:0 0 20px;padding:18px 20px;background:var(--cream-2)}
.filters .f{display:grid;gap:6px}
.filters label{font-size:15px;font-weight:600;color:var(--ink-soft)}
.input,.select{min-height:48px;padding:10px 14px;background:var(--paper);border:1px solid var(--line-strong);border-radius:0;min-width:0}
.select{appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141010' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.input:focus,.select:focus{outline:3px solid var(--red);outline-offset:0;border-color:var(--red)}
.filters .chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);text-decoration:none;font-size:17px;background:var(--paper)}
.chip[aria-current=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- tables (cards on phones) ---------- */
.tbl{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line)}
.tbl th{font:600 15px/1.3 var(--sans);color:var(--ink-soft);text-align:left;padding:14px 16px;border-bottom:2px solid var(--ink);background:var(--paper);white-space:nowrap}
.tbl td{padding:15px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:#FBF5EC}
.tbl td.num,.tbl th.num{text-align:right;white-space:nowrap}
.tbl .who b{display:block;font-weight:600}
.tbl .who span{display:block;color:var(--ink-soft);font-size:16px;word-break:break-word}
.tbl .note{color:var(--ink-soft);font-size:16px;max-width:42ch}
.tbl .actions{white-space:nowrap;text-align:right}
.tbl .actions form{display:inline}
.tbl-wrap{overflow-x:auto}
.empty{background:var(--paper);border:1px dashed var(--line-strong);padding:36px 28px}
.empty h3{font:400 30px/1.1 var(--serif);font-stretch:62.5%;margin-bottom:6px}
.empty p{color:var(--ink-soft);max-width:56ch}

@media (max-width:820px){
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl{border:0;background:none}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tr{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--ink);margin-bottom:14px;padding:6px 0}
  .tbl td{border:0;padding:8px 18px;display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:12px;text-align:left!important}
  .tbl td::before{content:attr(data-label);font-size:15px;font-weight:600;color:var(--ink-soft);padding-top:2px}
  .tbl td[data-label=""]{grid-template-columns:1fr}
  .tbl td[data-label=""]::before{display:none}
  .tbl td.who{grid-template-columns:1fr;padding-top:12px}
  .tbl td.who::before{display:none}
  .tbl td.who b{font-size:20px}
  .tbl td:empty{display:none}
  .tbl td > .tag,.tbl td > .st{justify-self:start}
  .tbl .actions{white-space:normal}
  .tbl tbody tr:hover td{background:none}
}

/* ---------- status marks ---------- */
.st{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;white-space:nowrap}
.st::before{content:"";width:10px;height:10px;background:currentColor;flex:none}
.st--ok{color:var(--green-ink)}
.st--wait{color:var(--amber-ink)}
.st--bad{color:var(--red-ink)}
.st--off{color:var(--ink-soft)}
.st--off::before{background:none;border:2px solid currentColor;width:10px;height:10px}
.tag{display:inline-block;font-size:15px;font-weight:600;padding:1px 8px;border:1px solid var(--line-strong);color:var(--ink-soft);white-space:nowrap}
.tag--demo{border-color:var(--ink-soft)}

/* ---------- panels ---------- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px 32px}
.panel{background:var(--paper);border:1px solid var(--line);padding:26px 28px}
.panel h3{font:400 30px/1.05 var(--serif);font-stretch:62.5%;margin-bottom:8px}
.panel p+p{margin-top:10px}
.panel .btn{margin-top:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:24px}
.conn{display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start}
.conn .ico{width:48px;height:48px;border:2px solid var(--ink);display:grid;place-items:center}
.conn p+p{margin-top:10px}
.conn > div{min-width:0;overflow-wrap:anywhere}
.conn .st{white-space:normal;align-items:flex-start}
.conn .st::before{margin-top:7px}
@media (max-width:520px){.conn{grid-template-columns:1fr}}
.conn .ico svg{width:24px;height:24px}
.notice{background:var(--cream-2);border-top:3px solid var(--ink);padding:16px 20px;margin:0 0 24px}
.notice--red{border-top-color:var(--red)}
.notice b{font-weight:600}
.flash{background:var(--ink);color:var(--paper);padding:16px 20px;margin-bottom:24px;font-weight:500}
.flash--bad{background:var(--red);color:#fff}

/* upcoming list on the overview */
.agenda{list-style:none;background:var(--paper);border:1px solid var(--line)}
.agenda li{display:grid;grid-template-columns:132px 1fr auto;gap:6px 24px;padding:18px 22px;border-bottom:1px solid var(--line);align-items:start}
.agenda li:last-child{border-bottom:0}
.agenda .when b{display:block;font:400 28px/1 var(--serif);font-stretch:62.5%}
.agenda .when span{font-size:16px;color:var(--ink-soft)}
.agenda .what b{font-weight:600}
.agenda .what span{display:block;color:var(--ink-soft);font-size:16px}
@media (max-width:640px){.agenda li{grid-template-columns:1fr}}

/* testimonials */
.quotes{display:grid;gap:16px}
.qcard{background:var(--paper);border:1px solid var(--line);padding:24px 26px;display:grid;grid-template-columns:1fr auto;gap:12px 24px;align-items:start}
.qcard blockquote{font:400 25px/1.3 var(--serif);font-stretch:100%;max-width:56ch}
.qcard figcaption{margin-top:10px;color:var(--ink-soft)}
.qcard .acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
@media (max-width:720px){.qcard{grid-template-columns:1fr}.qcard .acts{justify-content:flex-start}}

/* intake answers */
.qa{background:var(--paper);border:1px solid var(--line);padding:8px 28px}
.qa div{padding:18px 0;border-bottom:1px solid var(--line)}
.qa div:last-child{border-bottom:0}
.qa dt{font-weight:600;margin-bottom:4px}
.qa dd{white-space:pre-wrap;max-width:68ch}

/* email preview */
.mailmeta{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;background:var(--paper);border:1px solid var(--line);padding:20px 24px;margin-bottom:18px}
.mailmeta dt{font-weight:600;color:var(--ink-soft)}
.mailmeta dd{word-break:break-word}
.mailframe{width:100%;height:860px;border:1px solid var(--line);background:#fff}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.login-art{background:var(--ink);color:var(--paper);padding:48px clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:48px;position:relative;overflow:hidden}
.login-art .big{font:400 clamp(64px,8.6vw,138px)/.86 var(--serif);font-stretch:62.5%;letter-spacing:-.01em;max-width:7.5ch}
.login-art .big em{color:var(--red-lt)}
.login-art p{color:rgba(255,251,245,.82);max-width:40ch;font-size:19px}
.login-form{display:flex;align-items:center;padding:48px clamp(24px,6vw,96px)}
.login-form form{width:100%;max-width:440px;display:grid;gap:20px}
.login-form h1{font:400 52px/1 var(--serif);font-stretch:62.5%}
.field{display:grid;gap:8px}
.field label{font-weight:600}
.field .input{min-height:56px;font-size:18px}
.field-err{color:var(--red-ink);font-weight:600}
.login-form .btn{min-height:56px;width:100%}
@media (max-width:900px){
  .login{grid-template-columns:1fr}
  .login-art{padding-block:24px 28px;gap:18px}
  .login-art .big{font-size:clamp(46px,12vw,80px);max-width:none}
  .login-art .big br{display:none}
  .login-art p{display:none}
  .login-form{padding-top:32px}
}

/* ---------- responsive shell ---------- */
@media (max-width:1000px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:var(--top) 0 0 0;height:auto;z-index:15;transform:translateX(-100%);transition:transform .22s var(--ease);width:min(320px,88vw);box-shadow:0 18px 40px -12px rgba(20,16,16,.35)}
  .side.open{transform:none}
  .navtoggle{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid rgba(255,251,245,.4);color:var(--paper);min-height:44px;padding:0 14px;cursor:pointer}
  .top-user{display:none}
  .top-ctx{display:none}
  .main{padding-top:28px}
}
@media (max-width:520px){
  .brand-word{font-size:20px}
  .top{gap:10px}
  .top .linkbtn{padding:0 12px}
  .navtoggle{padding:0 10px}
}
@media (max-width:370px){.brand-word{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.top,.side,.page-actions,.filters{display:none}.shell{display:block}}