/* ============================================================
   Standard Providers — doctor/clinic portal
   Clean medical white · bone · baby blue · deep navy (Standard family).
   Screen UI + a print stylesheet for the order sheet.
   ============================================================ */
:root{
  --white:#fff; --bone:#f6f9fc; --panel:#fff; --mist:#eaf3fb;
  --sky:#8fc6f0; --sky-soft:#cfe6f8; --sky-deep:#1f72bd; --sky-line:#dce9f5;
  --navy:#0d2c49; --navy-2:#123a5f;
  --ink:#13273c; --ink-2:#45566a; --ink-soft:#6b7a8c;
  --hair:#dfe8f1; --hair-2:#cddbe9;
  --ok:#1f9d6b; --warn:#b9791b; --bad:#c0392b;
  --radius:12px;
  --font-head:"Spectral",Georgia,serif;
  --font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1040px;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--bone);color:var(--ink-2);font-family:var(--font);line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;min-height:100vh;}
h1,h2,h3{color:var(--ink);margin:0;font-weight:600;}
a{color:var(--sky-deep);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.hidden{display:none!important;}
.muted{color:var(--ink-soft);} .small{font-size:12.5px;}

/* ---- login gate ---- */
.gate{min-height:100vh;display:grid;place-items:center;padding:40px 20px;
  background:radial-gradient(120% 90% at 50% -10%,#eaf3fb,var(--bone) 60%);}
.gate-card{width:min(410px,100%);background:var(--white);border:1px solid var(--hair);border-radius:16px;
  padding:clamp(26px,5vw,38px);box-shadow:0 30px 70px -34px rgba(13,44,73,.35);}
.gate-card .eyebrow{color:var(--sky-deep);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 6px;}
.gate-card h1{font-family:var(--font-head);font-size:clamp(1.5rem,5vw,1.9rem);margin:0 0 4px;}
.gate-card .sub{color:var(--ink-soft);margin:0 0 22px;font-size:14px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.field label .req{color:var(--bad);}
.field input,.field textarea,.field select{width:100%;padding:11px 13px;border:1px solid var(--hair-2);border-radius:10px;
  font:inherit;font-size:15px;color:var(--ink);background:var(--white);}
.field input:focus,.field textarea:focus{outline:2px solid var(--sky);outline-offset:1px;border-color:var(--sky);}
.msg{font-size:13px;margin:10px 0 0;min-height:18px;} .msg.err{color:var(--bad);} .msg.ok{color:var(--ok);}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid transparent;
  border-radius:10px;padding:11px 18px;font:inherit;font-weight:600;font-size:14px;transition:background .15s,transform .1s,box-shadow .15s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--navy);color:#fff;} .btn-primary:hover{background:var(--navy-2);box-shadow:0 10px 24px -12px rgba(13,44,73,.6);}
.btn-primary.full{width:100%;}
.btn-sky{background:var(--sky-deep);color:#fff;}
.btn-ghost{background:var(--white);border-color:var(--hair-2);color:var(--ink);} .btn-ghost:hover{background:var(--mist);}
.btn-sm{padding:8px 13px;font-size:13px;border-radius:9px;}
/* Armed state for an irreversible action, and only for that. It is not a
   button style to reach for: it is the second tap on Delete, where the label
   has already changed to a question. */
.btn-danger{background:#a4232c;border-color:#a4232c;color:#fff;} .btn-danger:hover{background:#8d1d25;}

/* ---- portal shell ---- */
.top{background:var(--white);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:20;}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 20px;flex-wrap:wrap;}
.brand{display:flex;flex-direction:column;gap:1px;}
.brand .name{font-family:var(--font-head);font-weight:600;font-size:1.2rem;color:var(--navy);}
.brand .sub{font-size:11.5px;color:var(--ink-soft);letter-spacing:.02em;}
.who{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-soft);}
.who b{color:var(--ink);}
.role-chip{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--hair-2);color:var(--sky-deep);}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:10px 20px 0;max-width:var(--maxw);margin:0 auto;}
.tabs::-webkit-scrollbar{display:none;}
.tab{white-space:nowrap;border:1px solid transparent;background:transparent;color:var(--ink-soft);
  padding:9px 16px;border-radius:9px 9px 0 0;font-weight:600;font-size:13.5px;cursor:pointer;}
.tab:hover{color:var(--ink);}
.tab[aria-selected="true"]{background:var(--white);color:var(--navy);border-color:var(--hair);border-bottom-color:var(--white);box-shadow:0 -2px 0 var(--sky-deep) inset;}
.main{padding:22px 0 70px;}
.view{display:none;} .view.active{display:block;}
.view-head{margin-bottom:16px;}
.view-head h2{font-family:var(--font-head);font-size:clamp(1.3rem,3vw,1.7rem);}
.view-head p{margin:4px 0 0;color:var(--ink-soft);font-size:14px;max-width:66ch;}

/* cards / panels */
.card{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius);padding:20px 22px;box-shadow:0 1px 0 rgba(13,44,73,.03);}
.card + .card{margin-top:14px;}
.card h3{font-size:15px;margin:0 0 12px;}
.sec{margin:22px 0 10px;display:flex;align-items:baseline;gap:12px;}
.sec h2{font-family:var(--font-head);font-size:1.1rem;color:var(--navy);} .sec .rule{flex:1;height:1px;background:var(--hair);} .sec .hint{font-size:12px;color:var(--ink-soft);}
.catswitch{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.catswitch button{border:1px solid var(--hair-2);background:var(--white);color:var(--ink-2);padding:9px 16px;border-radius:10px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;}
.catswitch button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy);}
/* Wrapping is right — a strip that scrolls sideways HID three of the seven
   manufacturers, which is how they went unnoticed. But seven full-size pills
   stack four rows deep on a phone, so they get tighter rather than hidden. */
@media (max-width:560px){
  .catswitch{gap:6px;}
  .catswitch button{padding:7px 11px;font-size:13px;border-radius:9px;}
}

/* product table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:10px;}
table{width:100%;border-collapse:collapse;min-width:560px;}
thead th{background:var(--mist);color:var(--navy);font-size:11px;letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:10px 14px;font-weight:700;border-bottom:1px solid var(--hair);white-space:nowrap;}
th.num,td.num{text-align:right;}
tbody td{padding:9px 14px;border-bottom:1px solid var(--hair);font-size:14px;color:var(--ink);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr.on{background:#f2f8fe;}
.prod{font-weight:600;} .spec{color:var(--ink-soft);font-size:12.5px;}
/* Peptide education link beside a product name — quiet until wanted, so it
   never competes with the order form it sits inside. */
a.edu{display:inline-block;margin-left:8px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-soft);
  border:1px solid var(--hair);border-radius:999px;padding:1px 8px;
  vertical-align:1px;transition:color .15s,border-color .15s;}
a.edu:hover,a.edu:focus-visible{color:var(--sky-deep);border-color:var(--sky-deep);}
.grp td{background:var(--navy);color:#fff;font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:8px 14px;}
input.qty{width:64px;padding:7px 8px;border:1px solid var(--hair-2);border-radius:8px;font:inherit;font-size:14px;text-align:right;color:var(--ink);}
input.qty:focus{outline:2px solid var(--sky);outline-offset:1px;border-color:var(--sky);}
.line{font-weight:600;color:var(--navy);}

.totals{position:sticky;bottom:0;margin-top:16px;display:flex;justify-content:flex-end;gap:24px;align-items:center;background:var(--navy);color:#fff;border-radius:10px;padding:13px 20px;flex-wrap:wrap;}
.totals .items{margin-right:auto;font-size:13px;color:var(--sky-soft);}
.totals .lbl{font-size:11.5px;color:var(--sky-soft);letter-spacing:.04em;text-transform:uppercase;}
.totals .amt{font-family:var(--font-head);font-weight:600;font-size:1.45rem;margin-left:8px;}

.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px 16px;}
.field.full{grid-column:1/-1;}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--hair);}
.note{font-size:12px;color:var(--ink-soft);margin-top:12px;line-height:1.6;}

/* resources */
.res{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--hair);}
.res:last-child{border-bottom:none;}
.res .rt{font-weight:600;color:var(--ink);} .res .rn{font-size:12.5px;color:var(--ink-soft);}
.res .badge{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:6px;color:var(--sky-deep);background:var(--mist);margin-right:auto;margin-left:12px;}

/* order history */
.order{border:1px solid var(--hair);border-radius:12px;padding:14px 16px;margin-bottom:12px;background:var(--white);}
.order .oh{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;}
.order .oh .cat{font-weight:700;color:var(--navy);text-transform:capitalize;}
.order .oh .when{font-size:12px;color:var(--ink-soft);}
.order .amt{font-family:var(--font-head);font-weight:600;color:var(--navy);}
.order ul{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--ink-2);}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid var(--hair-2);color:var(--sky-deep);background:var(--mist);}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:11px 20px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:40;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* Sales kits — reuses .card/.res/.badge; only the kit-specific pieces here. */
.kit-hero .kit-tag{font-family:var(--font-head);color:var(--sky-deep);font-size:14px;margin:-6px 0 10px;}
.kit-hero p,.kit-open p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6;}
.kit-quote{font-family:var(--font-head);font-size:15.5px;line-height:1.65;color:var(--ink);}
/* The row someone was sent to, once they arrive. It fades out: the job is to
   answer "which one of these did they mean" in the first second, and a
   highlight that stays forever becomes part of the furniture. */
.res-shared{background:var(--mist);border-radius:10px;animation:res-found 2.4s ease-out 1;}
@keyframes res-found{0%,45%{background:#e4eef8;}100%{background:transparent;}}
@media (prefers-reduced-motion: reduce){
  .res-shared{animation:none;background:var(--mist);}
}
/* Share links a rep can copy. Plain rows: the URL is the content. */
.kit-protocol-links{margin-top:8px;}

/* The protocol answer. Tinted ground, matching .kit-compliance, which is how
   this design already marks a card that is not just more reading. Prominence
   here comes from POSITION — second card in the kit — not from decoration. */
.kit-protocols{background:var(--mist);border-color:var(--hair-2);}
.kit-protocols .kit-step-t{margin-top:14px;}
.kit-protocol-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.kit-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.kit-chips .badge{font-size:11px;font-weight:600;letter-spacing:.02em;padding:4px 9px;border-radius:999px;
  color:var(--navy);background:var(--white);border:1px solid var(--hair-2);}
.kit-step{padding:12px 0;border-top:1px solid var(--hair);}
.kit-step:first-of-type{border-top:0;padding-top:2px;}
.kit-step-t{font-weight:600;color:var(--navy);font-size:13.5px;}
.kit-step-d{color:var(--ink-2);font-size:13.5px;line-height:1.6;margin-top:3px;}
.kit-step-p{color:var(--sky-deep);font-size:12.5px;margin-top:5px;}
.kit-list{margin:0;padding-left:18px;color:var(--ink-2);font-size:13.5px;line-height:1.65;}
.kit-list li + li{margin-top:6px;}
.kit-qa{border-top:1px solid var(--hair);padding:10px 0;}
.kit-qa:first-of-type{border-top:0;}
.kit-qa summary{cursor:pointer;font-weight:600;color:var(--navy);font-size:13.5px;list-style:none;}
.kit-qa summary::-webkit-details-marker{display:none;}
.kit-qa summary::before{content:"+";display:inline-block;width:14px;color:var(--sky-deep);font-weight:700;}
.kit-qa[open] summary::before{content:"–";}
.kit-qa p{margin:8px 0 0 14px;color:var(--ink-2);font-size:13.5px;line-height:1.65;}
.kit-qa .kit-step-t{margin:10px 0 4px 14px;}
.kit-qa .kit-list{margin-left:14px;}
.kit-qa .btn{margin:10px 0 0 14px;}
.kit-qa .rn{margin:8px 0 0 14px;}
.kit-compliance{background:var(--mist);border-color:var(--hair-2);}
.kit-compliance p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.65;}

/* Search bar above a roster table. */
.searchbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.searchbar input{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--hair-2);
  border-radius:10px;font-family:inherit;font-size:14px;background:var(--bone);color:var(--ink);}
.searchbar input:focus{outline:2px solid var(--sky-deep);outline-offset:1px;background:var(--white);}

/* Call mode — one lead, full screen, worked by thumb between calls. */
.callmode{position:fixed;inset:0;z-index:60;background:rgba(9,24,40,.72);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;}
.callmode.hidden{display:none;}
.callmode-card{background:var(--white);border-radius:16px;padding:22px;width:min(480px,100%);
  box-shadow:0 20px 60px rgba(9,24,40,.28);}
.callmode-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;}
.callmode-name{font-family:var(--font-head);font-size:1.5rem;color:var(--navy);margin:6px 0 2px;}
.callmode-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 14px;}
.callmode-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.callmode-quick .btn[aria-pressed="true"]{outline:2px solid var(--sky-deep);outline-offset:1px;}
.callmode-nav{display:flex;justify-content:space-between;margin-top:14px;}
.callmode-keys{margin:12px 0 0;text-align:center;}
@media (max-width:520px){ .callmode-keys{display:none;} }

#print-sheet{display:none;}
@media print{
  @page{margin:14mm;}
  body{background:#fff;color:#000;}
  .top,.tabs,.main,.toast{display:none!important;}
  #print-sheet{display:block!important;color:#000;}
  #print-sheet .ph{display:flex;justify-content:space-between;border-bottom:2px solid #0d2c49;padding-bottom:10px;margin-bottom:14px;}
  #print-sheet .ph .name{font-family:var(--font-head);font-size:20px;font-weight:600;color:#0d2c49;}
  #print-sheet .ph .meta{font-size:11px;text-align:right;color:#333;}
  #print-sheet h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#0d2c49;margin:14px 0 6px;border-bottom:1px solid #bcd;padding-bottom:3px;}
  #print-sheet table{width:100%;border-collapse:collapse;}
  #print-sheet th,#print-sheet td{border:1px solid #cbd6e2;padding:5px 8px;font-size:11px;text-align:left;}
  #print-sheet th{background:#eaf3fb;color:#0d2c49;} #print-sheet td.num,#print-sheet th.num{text-align:right;}
  #print-sheet .kv{display:grid;grid-template-columns:1fr 1fr;gap:2px 24px;font-size:11px;}
  #print-sheet .kv div{padding:2px 0;border-bottom:1px dotted #cbd6e2;} #print-sheet .kv b{color:#0d2c49;}
  #print-sheet .grand{text-align:right;font-size:14px;font-weight:700;color:#0d2c49;margin-top:8px;}
  #print-sheet .terms{font-size:9.5px;color:#444;margin-top:14px;border-top:1px solid #cbd6e2;padding-top:8px;line-height:1.5;}
}

/* ---------- Messages ----------
   Two panes on a wide screen, one at a time on a phone: the list is for
   scanning and the thread is for reading, and on 390px you cannot do both. */
.msg-layout { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.msg-list { display: grid; gap: 8px; }
.msg-row {
  display: grid; gap: 4px; text-align: left; cursor: pointer; width: 100%;
  background: #fff; border: 1px solid var(--hair); border-radius: 12px;
  padding: 12px 14px; font: inherit; color: var(--ink);
  transition: border-color .2s ease, background .2s ease;
}
.msg-row:hover { border-color: var(--sky-soft, #bfe0f7); }
.msg-row.on { border-color: var(--sky-deep); background: #f5f9fd; }
/* Unread is weight plus a dot, not colour alone — colour alone is invisible to
   a chunk of readers and to anyone on a bad screen in a bright room. */
.msg-row.unread .msg-subj { font-weight: 700; }
.msg-row-top { display: flex; align-items: center; gap: 8px; }
.msg-subj { font-size: 0.94rem; line-height: 1.3; flex: 1; }
.msg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky-deep); flex: none; }
.msg-prev { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.msg-meta { font-size: 0.74rem; color: var(--ink-soft); }

.msg-pane { background: #fff; border: 1px solid var(--hair); border-radius: 14px; padding: 18px; min-height: 220px; }
.msg-pane h3 { margin: 0 0 4px; }
.msg-back { display: none; margin-bottom: 12px; }
.msg-item { border-top: 1px solid var(--hair); padding-top: 12px; margin-top: 12px; }
.msg-item:first-child { border-top: 0; padding-top: 0; margin-top: 10px; }
.msg-item-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.msg-author { font-size: 0.78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sky-deep); }
.msg-when { font-size: 0.76rem; color: var(--ink-soft); }
/* pre, because a generated report arrives with its own line breaks and headings
   and reflowing it into a paragraph destroys the shape it was written in. */
.msg-text { white-space: pre-wrap; font-family: inherit; font-size: 0.93rem; line-height: 1.6; margin: 0; color: var(--ink); }

@media (max-width: 820px) {
  .msg-layout { grid-template-columns: 1fr; }
  .msg-pane { display: none; }
  .msg-pane.open { display: block; }
  .msg-pane.open ~ .msg-list, .msg-layout:has(.msg-pane.open) .msg-list { display: none; }
  .msg-back { display: inline-flex; }
}

/* ---- onboarding ----
   One track per product area. The tick is the loudest thing on a step, because
   the whole surface is a checklist; a completed step goes quiet rather than
   green-on-green, so what is left to do is what draws the eye. */
.onb-summary{display:flex;flex-direction:column;gap:10px;}
.onb-count{font-family:var(--font-head);font-size:15px;color:var(--ink);}
.onb-summary .note{margin:0;}
.onb-bar{height:6px;border-radius:999px;background:var(--mist);overflow:hidden;}
.onb-bar-fill{height:100%;background:var(--sky-deep);border-radius:999px;transition:width .25s ease;}
.onb-bar.full .onb-bar-fill{background:var(--ok);}
.kit-hero .onb-bar{margin-top:12px;}
.kit-hero .small{margin:8px 0 0;}

.onb-switch{flex-wrap:wrap;}
.onb-switch button{display:inline-flex;align-items:center;gap:8px;}
.onb-chip{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--mist);color:var(--sky-deep);}
.onb-switch button[aria-pressed="true"] .onb-chip{background:rgba(255,255,255,.18);color:#fff;}
.onb-chip.on{background:var(--ok);color:#fff;}
.onb-switch button[aria-pressed="true"] .onb-chip.on{background:var(--ok);color:#fff;}

.onb-step.done{background:var(--bone);border-color:var(--hair-2);}
.onb-step.done .onb-title{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:var(--hair-2);}
.onb-head{display:flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:8px;}
.onb-head input[type="checkbox"]{width:18px;height:18px;accent-color:var(--sky-deep);flex:none;cursor:pointer;}
.onb-num{flex:none;width:22px;height:22px;border-radius:999px;background:var(--mist);color:var(--sky-deep);
  font-size:11.5px;font-weight:700;display:grid;place-items:center;}
.onb-title{font-family:var(--font-head);font-size:15.5px;color:var(--ink);font-weight:600;}
.onb-why{margin:0 0 10px 50px;color:var(--ink-2);font-size:13.5px;line-height:1.65;}
.onb-step .kit-list{margin-left:50px;padding-left:18px;}
.onb-done{display:flex;gap:8px;align-items:baseline;margin:12px 0 0 50px;padding-top:10px;
  border-top:1px solid var(--hair);color:var(--ink-2);font-size:13px;line-height:1.6;}
.onb-done-lbl{flex:none;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--sky-deep);}
.onb-ok{color:var(--ok);}

/* The access code, wherever it is shown. Monospace because it gets typed by
   somebody reading it off a phone. */
.onb-code{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--mist);
  border:1px solid var(--hair-2);border-radius:12px;padding:10px 12px;margin:0 0 12px 50px;}
.onb-code-lbl{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sky-deep);}
.onb-code code{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--navy);letter-spacing:.03em;}
#inviteBox .onb-code{margin-left:0;}
#inviteBox .btn{margin-top:4px;}

/* ---- message templates inside a sales kit ---- */
.msg-tpl summary{display:flex;align-items:center;gap:10px;}
.msg-tpl summary .badge{margin:0;}
.tpl-subject{display:flex;gap:8px;align-items:baseline;margin:8px 0 0 14px!important;color:var(--ink)!important;font-weight:600;}
.tpl-body{white-space:pre-wrap;font-family:var(--font);font-size:13.5px;line-height:1.65;color:var(--ink-2);
  background:var(--bone);border:1px solid var(--hair);border-radius:10px;padding:12px 14px;margin:10px 0 0 14px;}
.tpl-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0 14px;}
.tpl-actions .btn{margin:0!important;}

@media (max-width:640px){
  .onb-why,.onb-done,.onb-code{margin-left:0;}
  .onb-step .kit-list{margin-left:0;}
}

/* ---- the forbidden list on a sales kit ----
   A phrase and its replacement, paired. "Don't say X" with no substitute just
   leaves a rep silent at the moment they need a sentence. */
.kit-never{border-color:var(--hair-2);}
.never-row{padding:11px 0;border-top:1px solid var(--hair);}
.never-row:first-of-type{border-top:0;padding-top:2px;}
.never-bad{display:flex;gap:8px;align-items:baseline;color:var(--bad);font-weight:600;font-size:13.5px;}
.never-x{flex:none;font-size:11px;}
.never-good{margin-top:4px;padding-left:20px;color:var(--ink-2);font-size:13.5px;line-height:1.6;}

/* ---- share the invite ----
   Icon tiles, because a rep doing this is on a phone in somebody's waiting
   room. Every tile sends the same single message — the link and the code
   together, since the link alone dead-ends at the gate. */
.share-wrap{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);}
.share-lbl{margin:0 0 10px;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--sky-deep);}
.share-row{display:flex;gap:8px;flex-wrap:wrap;}
.share-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-width:78px;padding:12px 10px;background:var(--white);border:1px solid var(--hair-2);
  border-radius:12px;color:var(--navy);font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .12s ease;}
.share-tile svg{width:22px;height:22px;color:var(--sky-deep);}
.share-tile:hover{background:var(--mist);border-color:var(--sky);}
.share-tile:active{transform:translateY(1px);}
.share-tile:focus-visible{outline:2px solid var(--sky-deep);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.share-tile{transition:none;}}

/* ---- the lead drawer ----
   The table row is a summary; this is the record. Slides in from the right on
   a wide screen and takes the full width on a phone, which is where a rep
   actually opens it — standing in a car park after a call. */
.drawer-scrim{position:fixed;inset:0;background:rgba(13,44,73,.38);backdrop-filter:blur(2px);z-index:40;}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);z-index:41;
  background:var(--bone);border-left:1px solid var(--hair-2);
  box-shadow:-24px 0 60px -30px rgba(13,44,73,.45);
  display:flex;flex-direction:column;
}
.drawer-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:18px 20px;border-bottom:1px solid var(--hair);background:var(--white);
}
.drawer-head h3{margin:0 0 3px;font-size:17px;}
.drawer-head .small{margin:0;}
.drawer-body{flex:1;overflow-y:auto;padding:16px 20px 40px;-webkit-overflow-scrolling:touch;}
.drawer-body .card + .card{margin-top:12px;}

.dreach{display:flex;gap:8px;flex-wrap:wrap;}
.dreach .btn{margin:0;}
.dgrid{display:grid;gap:12px;grid-template-columns:1fr 1fr;}
@media (max-width:420px){.dgrid{grid-template-columns:1fr;}}
.dfield{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.dfield label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sky-deep);}
.dfield select,.dfield input,.dfield textarea{
  width:100%;border:1px solid var(--hair-2);border-radius:10px;padding:9px 11px;
  font:inherit;font-size:14px;background:var(--white);color:var(--ink);
}
.dfield textarea{resize:vertical;line-height:1.6;min-height:120px;}
.dfield select:focus-visible,.dfield input:focus-visible,.dfield textarea:focus-visible{
  outline:2px solid var(--sky-deep);outline-offset:1px;border-color:var(--sky-deep);
}
.dsaved{font-size:11.5px;color:var(--ok);min-height:14px;}

/* What arrived from the funnel, shown as it arrived — pre, because it has its
   own line breaks and reflowing it into a paragraph destroys the shape. */
.dpre{white-space:pre-wrap;font-family:inherit;font-size:13.5px;line-height:1.6;
  margin:0;color:var(--ink-2);background:var(--mist);border:1px solid var(--hair);
  border-radius:10px;padding:12px 14px;max-height:260px;overflow:auto;}

.dthread{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  background:var(--white);border:1px solid var(--hair-2);border-radius:10px;
  padding:11px 13px;font:inherit;cursor:pointer;}
.dthread + .dthread{margin-top:8px;}
.dthread:hover{border-color:var(--sky);background:var(--mist);}
.dthread-s{font-weight:600;color:var(--ink);font-size:13.5px;}
.dthread-p{font-size:12.5px;color:var(--ink-soft);}

/* The row advertises that it opens. */
tr.row-open{cursor:pointer;}
tr.row-open:hover{background:var(--mist);}
tr.row-open:focus-visible{outline:2px solid var(--sky-deep);outline-offset:-2px;}

/* ---- who a message goes to ---- */
.compose-to { display: flex; flex-wrap: wrap; gap: 8px; }
.who-chip {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--hair-2);
  background: var(--white); color: var(--ink-2); font: inherit; font-size: 13px;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.who-chip:hover { border-color: var(--sky); background: var(--mist); }
.who-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.who-chip:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 2px; }

/* ---- a video in a sales kit ----
   A still frame is the difference between "there are some videos here" and a
   rep actually watching one. The image is YouTube's own CDN — nothing is
   copied and nothing is hosted by us. */
.vid {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 13px 0; border-bottom: 1px solid var(--hair); text-decoration: none;
}
.vid:last-child { border-bottom: none; }
.vid:hover .vid-title { color: var(--sky-deep); }
.vid:hover .vid-shot img { transform: scale(1.03); }
.vid-shot {
  position: relative; flex: none; width: 160px; height: 90px;
  border-radius: 10px; overflow: hidden; background: var(--mist);
  border: 1px solid var(--hair-2);
}
.vid-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.vid-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 20px; text-shadow: 0 1px 8px rgba(0,0,0,.6);
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.3));
}
.vid-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vid-title { font-weight: 600; color: var(--ink); font-size: 14.5px; line-height: 1.35; }
.vid-note { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 520px) {
  .vid { flex-direction: column; }
  .vid-shot { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) { .vid-shot img { transition: none; } .vid:hover .vid-shot img { transform: none; } }
/* When YouTube's CDN does not answer, the tile carries itself. */
.vid-shot-bare { background: var(--navy); border-color: var(--navy); }
.vid-shot-bare .vid-play { background: none; font-size: 22px; opacity: .85; }

/* The rep portal's sections moved off .tabs and onto the side rail component
   (sidebar.css). The doctor portal still uses .tabs/.tab above, which is why
   those rules stay. */
/* ---- Side rail: the host binding ------------------------------------------
   sidebar.css is linked BEFORE this file, per the component rules: both bind
   the same classes at the same specificity, and whichever loads first loses.
   The tokens are bound by hand rather than left to match by name — --ink is
   heading text on this site and the near-black ground on another. */
#tabs.sb {
  --sb-bg:        var(--white);
  --sb-line:      var(--hair);
  --sb-ink:       var(--ink);
  --sb-ink-soft:  var(--ink-soft);
  --sb-accent:    var(--sky-deep);
  --sb-active-bg: var(--mist);
  --sb-hover-bg:  #f2f7fc;
}
.sb-mark, .sb-word b { font-family: var(--font-head); }

/* ---- Universal search: the host binding (search.css is linked first) ---- */
.us {
  --us-bg:        var(--white);
  --us-line:      var(--hair);
  --us-ink:       var(--ink);
  --us-ink-soft:  var(--ink-soft);
  --us-accent:    var(--sky-deep);
  --us-hit:       var(--mist);
  --us-scrim:     rgba(13, 44, 73, .42);
}
.us-hit-t, .us-group { font-family: var(--font); }
/* The rail's Search row carries its shortcut; the key cap fades with the
   labels like everything else on the rail, so it inherits .sb-label. */
.sb .us-kbd { border-color: var(--hair); }

/* The burger sits with the wordmark, not between it and the account block —
   .top .wrap is space-between, so a third child would push them apart. */
.brandrow { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* ---- Folded kit sections --------------------------------------------------
   A sales kit is thirteen parts and was 8,971px on a phone — eleven screens,
   with the objection answers behind two thousand pixels of protocol text. The
   heading becomes the control and the rest of the card folds under it.

   The open/close is grid-template-rows 0fr -> 1fr, not an animated pixel
   height. A measured height is wrong the moment the measurement changes what
   is being measured: these cards hold <details> that expand, YouTube
   thumbnails that arrive late, and a webfont that swaps after first paint.
   There is no measurement here to go stale. */
.kacc { padding-top: 0; padding-bottom: 0; }
.kacc-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 15px 0; margin: 0;
  border: 0; background: none; font: inherit; text-align: left;
  color: var(--ink); cursor: pointer;
}
.kacc-head:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 3px; border-radius: 6px; }
.kacc-t {
  flex: 1 1 auto; font-family: var(--font-head);
  font-size: 1.05rem; font-weight: 600; line-height: 1.3;
}
.kacc-chev { flex: 0 0 20px; display: grid; place-items: center; color: var(--ink-soft); }
.kacc-chev svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(-90deg); transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.kacc[data-open="true"] .kacc-chev svg { transform: none; }
.kacc-head:hover .kacc-chev { color: var(--sky-deep); }

.kacc-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .26s cubic-bezier(.4,0,.2,1);
}
.kacc[data-open="true"] .kacc-body { grid-template-rows: 1fr; }
.kacc-inner { overflow: hidden; min-height: 0; }
/* The gap belongs to the contents, so a closed section is exactly its heading
   and nothing else — thirteen closed sections must read as a list. */
.kacc[data-open="true"] .kacc-inner { padding-bottom: 16px; }

@media (prefers-reduced-motion: reduce) {
  .kacc-body, .kacc-chev svg { transition: none; }
}

/* ---- The go-direct block --------------------------------------------------
   Deliberately the plainest card in the kit and deliberately last. It is the
   escape hatch, not a feature: a rep reaches it after the bag has failed them,
   and at that moment the only thing that matters is that the link is obvious
   and opens the right page. It is never folded. */
.kit-direct { background: var(--mist); border-color: var(--hair-2); }
.direct-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.direct-btn {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 13px; min-width: 0;
  border: 1px solid var(--hair-2); border-radius: 10px;
  background: var(--white); text-decoration: none;
  transition: border-color .15s linear, transform .15s cubic-bezier(.4,0,.2,1);
}
.direct-btn:hover { border-color: var(--sky-deep); transform: translateY(-1px); }
.direct-btn:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 2px; }
.direct-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.direct-t::after { content: " \2197"; color: var(--sky-deep); font-weight: 400; }
.direct-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft);
}
@media (max-width: 560px) { .direct-btn { flex: 1 1 100%; } }