/* CoreMed OS — one stylesheet, every surface. Tenant brand colours are injected at runtime by
   applyBrand(), so the same components wear each clinic's own ink and accent.

   The system: a near-white ground, white surfaces, hairline borders, soft and shallow shadows,
   generous radii, and controls that are at least 44px high so a thumb can hit them. Colour is
   used for meaning — state, money at risk, the one action on a screen — and for nothing else. */
:root{
  --brand:#0A3254; --accent:#8E5520;
  /* brand, mixed down for tints and hovers. Derived so a tenant only ever sets two colours. */
  --brand-wash:color-mix(in srgb, var(--brand) 7%, #fff);
  --brand-line:color-mix(in srgb, var(--brand) 22%, #fff);
  --brand-hover:color-mix(in srgb, var(--brand) 88%, #000);
  --accent-wash:color-mix(in srgb, var(--accent) 10%, #fff);

  --bg:#F5F5F7; --card:#fff; --card2:#FAFAFB;
  --line:rgba(16,24,32,.10); --line2:rgba(16,24,32,.06);
  --text:#12181F; --muted:#5B6672;
  /* darkened until it clears 4.5:1 on the --bg ground as well as on white: it carries the step
     labels and the rail caption, which are text, not decoration */
  --muted2:#66717E;

  --ok:#0E6B48; --ok-bg:#E6F4EE; --warn:#7A5310; --warn-bg:#FBF1DE;
  --bad:#9C3A1C; --bad-bg:#FBEAE3; --info:#1B5480; --info-bg:#E8F0F8;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px;
  --shadow:0 .5px 1px rgba(16,24,32,.04), 0 2px 6px rgba(16,24,32,.04);
  --shadow-md:0 1px 2px rgba(16,24,32,.05), 0 8px 24px rgba(16,24,32,.07);
  --shadow-lg:0 2px 8px rgba(16,24,32,.07), 0 24px 56px rgba(16,24,32,.13);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.32,.72,0,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--brand);text-underline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.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}
.num{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* shell */
.top{position:sticky;top:0;z-index:40;background:var(--brand);color:#fff}
.top__in{display:flex;align-items:center;gap:16px;padding:0 22px;height:58px;max-width:1500px;margin-inline:auto}
.brandmark{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.012em;white-space:nowrap}
.brandmark i{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.18);display:grid;place-items:center;
  font-style:normal;font-size:12px;font-weight:650;color:#fff}
.top__who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:.86rem;color:rgba(255,255,255,.82)}
.top__who b{color:#fff;font-weight:600}
.top a{color:rgba(255,255,255,.92)}
.top select{background-color:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.26);
  border-radius:var(--r-sm);padding:6px 10px;font-size:.85rem;min-height:34px}
.top select option{color:#111}
.linkbtn{background:none;border:0;color:rgba(255,255,255,.85);cursor:pointer;font-size:.85rem;text-decoration:underline;padding:0}
.linkbtn:hover{color:#fff}
/* On a phone the clinic name and the way back compete for one line. Neither wraps; the name
   gives up room first, because the link is the one that becomes unusable when it breaks. */
@media(max-width:560px){
  .top__in{gap:10px;padding:0 16px}
  .brandmark{font-size:.92rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brandmark i{flex:none}
  .top__who{font-size:.8rem;white-space:nowrap;flex:none}
}

.tabs{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);position:sticky;top:58px;z-index:30}
.tabs__in{display:flex;gap:2px;padding:0 22px;max-width:1500px;margin-inline:auto;overflow-x:auto;scrollbar-width:none}
.tabs__in::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;padding:14px 14px 12px;cursor:pointer;color:var(--muted);font-weight:500;
  font-size:.92rem;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s var(--ease)}
.tabs button[aria-selected=true]{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.tabs button:hover{color:var(--text)}
.tabs .locked{opacity:.45}

.wrap{max-width:1500px;margin-inline:auto;padding:26px 22px 80px}
.page{display:flex;flex-direction:column;gap:22px}
h1,h2,h3{margin:0;letter-spacing:-.022em;line-height:1.18}
h1{font-size:1.72rem;font-weight:650}
h2{font-size:1.14rem;font-weight:620}
h3{font-size:.96rem;font-weight:600;letter-spacing:-.01em}
p{margin:0}
.sub{color:var(--muted);font-size:.92rem;max-width:74ch;line-height:1.5}
.eyebrow{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);font-weight:650}
.head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.head .grow{flex:1;min-width:200px;display:flex;flex-direction:column;gap:5px}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow)}
.card--pad0{padding:0;overflow:hidden}
.card__head{display:flex;align-items:center;gap:12px;padding:17px 20px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.card__head h2{flex:1;min-width:160px}
.card__body{padding:20px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1180px){.g5{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.g5,.g4,.g3,.g2{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
@media(max-width:1080px){.split{grid-template-columns:1fr}}

/* kpi */
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 19px;
  display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow)}
.kpi b{font-size:2.05rem;font-weight:620;letter-spacing:-.034em;font-variant-numeric:tabular-nums;line-height:1.02}
.kpi span{color:var(--muted);font-size:.85rem}
.kpi .hint{color:var(--muted2);font-size:.77rem;margin-top:4px;line-height:1.4}
.kpi.alert b{color:var(--bad)}
.kpi.good b{color:var(--ok)}
.bar{height:6px;border-radius:99px;background:var(--line2);margin-top:11px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand);border-radius:99px}
.spark{display:flex;align-items:flex-end;gap:2px;height:34px;margin-top:11px}
.spark i{flex:1;background:var(--line2);border-radius:3px 3px 0 0;min-height:3px}
.spark i.hi{background:var(--brand)}

/* tables */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.89rem}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line2);vertical-align:middle}
thead th{background:var(--card2);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:650;white-space:nowrap;position:sticky;top:0;z-index:2}
tbody tr{transition:background .12s var(--ease)}
tbody tr:hover{background:var(--brand-wash)}
tbody tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
td.name{font-weight:560}
.tiny{font-size:.8rem;color:var(--muted);line-height:1.45}

/* pills */
.pill{display:inline-block;font-size:.72rem;font-weight:620;letter-spacing:.01em;padding:3px 10px;border-radius:99px;white-space:nowrap}
.p-active{background:var(--ok-bg);color:var(--ok)}
.p-pending{background:var(--info-bg);color:var(--info)}
.p-past_due{background:var(--bad-bg);color:var(--bad)}
.p-cancelled{background:var(--line2);color:var(--muted)}
.p-new{background:var(--info-bg);color:var(--info)}
.p-contacted{background:var(--warn-bg);color:var(--warn)}
.p-consult_booked{background:var(--ok-bg);color:var(--ok)}
.p-enrolled{background:var(--ok-bg);color:var(--ok)}
.p-lost{background:var(--line2);color:var(--muted)}
.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-bad{background:var(--bad-bg);color:var(--bad)}
.p-ok{background:var(--ok-bg);color:var(--ok)}
.p-info{background:var(--info-bg);color:var(--info)}
.p-mute{background:var(--line2);color:var(--muted)}

/* buttons — 44px minimum, because a thumb is 44px */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);
  background:var(--card);color:var(--text);border-radius:var(--r);padding:11px 18px;min-height:44px;
  font-size:.9rem;font-weight:560;cursor:pointer;white-space:nowrap;
  transition:transform .12s var(--ease),background .15s var(--ease),border-color .15s var(--ease);
  box-shadow:var(--shadow)}
.btn:hover{border-color:var(--muted2);background:var(--card2)}
.btn:active{transform:scale(.975)}
.btn--primary{background:var(--brand);border-color:transparent;color:#fff}
.btn--primary:hover{background:var(--brand-hover);border-color:transparent}
.btn--accent{background:var(--accent);border-color:transparent;color:#fff}
.btn--accent:hover{background:color-mix(in srgb,var(--accent) 88%,#000);border-color:transparent}
.btn--ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--muted)}
.btn--ghost:hover{background:var(--line2);color:var(--text);border-color:transparent}
.btn--sm{padding:6px 12px;min-height:34px;font-size:.82rem;border-radius:var(--r-sm)}
.btn--lg{padding:14px 26px;min-height:52px;font-size:1rem;border-radius:var(--r)}
.btn--block{width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* bulk actions */
.bulkbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;background:var(--brand-wash);
  border-bottom:1px solid var(--line);font-size:.88rem}
.bulkbar b{font-variant-numeric:tabular-nums}
.bulkbar select,.bulkbar input{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;background-color:var(--card);
  color:var(--text);font-size:.85rem;min-height:38px}
td.sel,th:first-child:has(#sel-all){width:36px;padding-right:0}
.rowsel{width:16px;height:16px;cursor:pointer;accent-color:var(--brand)}

/* filters */
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.filters input[type=search],.filters input[type=text],.filters select{border:1px solid var(--line);border-radius:var(--r);
  padding:9px 13px;background-color:var(--card);color:var(--text);font-size:.89rem;min-height:40px}
.chipbar{display:flex;gap:7px;flex-wrap:wrap}
.chipbar button{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:7px 14px;
  font-size:.83rem;cursor:pointer;color:var(--muted);min-height:36px;transition:.15s var(--ease)}
.chipbar button:hover{color:var(--text);border-color:var(--muted2)}
.chipbar button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:.82rem;font-weight:600;color:var(--text)}
.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  background-color:var(--card);color:var(--text);width:100%;min-height:46px;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.field input::placeholder{color:var(--muted2)}
/* Selects.
   Padding alone did not fix this. The native arrow is drawn by the browser at the right edge of
   the control and ignores padding in Safari, so every dropdown in the product had its chevron
   jammed against the border - which is what it looked like, because it was. So the native control
   is turned off and we draw the chevron ourselves, which also makes every select in the platform
   look like the same control instead of three different ones.
   The gutter is 38px: 14px of air to the right of the chevron, 12px of chevron, 12px before the
   text. Anything less and the longest option still touches it. */
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B7682' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
  padding-right:38px;
}
/* The gutter has to be repeated at the specificity of the rules that set the padding shorthand,
   or those win and the text runs under the chevron - which is exactly what happened on the first
   attempt: .filters select sets `padding:9px 13px`, and a bare `select{padding-right}` loses to
   it. Listed rather than fought with !important, so the next rule that sets padding on a select
   is visible here instead of mysteriously ineffective. */
.filters select,.field select,.bulkbar select,.top select,td select,.row select{padding-right:38px}

/* A select with no room for a chevron is worse than a native one, so anything narrow opts out. */
select[size],select[multiple]{background-image:none;padding-right:13px;appearance:auto;-webkit-appearance:auto}
/* The header bar is dark, so its chevron is not. */
.top select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px;
}

.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-wash)}
.field textarea{min-height:92px;resize:vertical}
.field .hint{font-size:.78rem;color:var(--muted2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.row2{grid-template-columns:1fr}}

/* notes and empties */
.note{background:var(--card2);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--r);padding:14px 16px;font-size:.88rem;color:var(--muted)}
.note strong{color:var(--text)}
.note--info{border-left-color:var(--info);background:var(--info-bg);color:var(--info);border-color:transparent}
.note--bad{border-left-color:var(--bad);background:var(--bad-bg);color:var(--bad);border-color:transparent}
.note--ok{border-left-color:var(--ok);background:var(--ok-bg);color:var(--ok);border-color:transparent}
.empty{padding:46px 22px;text-align:center;color:var(--muted);font-size:.92rem}
.locked-panel{padding:40px 26px;text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:11px;align-items:center}
.locked-panel b{color:var(--text);font-size:1.04rem}

/* member timeline */
.tl{display:grid;gap:0;max-height:340px;overflow-y:auto}
.tl__i{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:.87rem}
.tl__i:last-child{border-bottom:0}
.tl__d{font-family:var(--mono);font-size:.74rem;color:var(--muted2);padding-top:2px}
.tl__s{color:var(--text)}
.tl__payment_failed .tl__s{color:var(--bad)}
.tl__cancelled .tl__s{color:var(--bad)}
.tl__sync .tl__s,.tl__chart .tl__s{color:var(--info)}

/* overlay */
.overlay{position:fixed;inset:0;z-index:80;display:none}
.overlay.on{display:block}
.scrim{position:absolute;inset:0;background:rgba(12,18,24,.34);backdrop-filter:blur(2px)}
.panel{position:absolute;top:0;right:0;bottom:0;width:min(580px,100%);background:var(--card);
  box-shadow:var(--shadow-lg);overflow-y:auto;padding:26px 28px 64px;display:flex;flex-direction:column;gap:15px;
  animation:slidein .32s var(--ease)}
@keyframes slidein{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.panel h2{margin-bottom:2px}
.panel .closex{position:absolute;top:16px;right:18px;background:var(--card2);border:0;width:32px;height:32px;
  border-radius:99px;font-size:19px;cursor:pointer;color:var(--muted);line-height:1;display:grid;place-items:center}
.panel .closex:hover{background:var(--line2);color:var(--text)}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);background:rgba(18,24,31,.94);
  backdrop-filter:blur(12px);color:#fff;padding:13px 20px;border-radius:99px;font-size:.88rem;opacity:0;
  pointer-events:none;transition:.28s var(--ease);z-index:99;max-width:88vw;box-shadow:var(--shadow-lg)}
.toast.on{opacity:1;transform:translateX(-50%)}

/* signin */
.signin{min-height:100%;display:grid;place-items:center;padding:40px 20px;background:
  radial-gradient(1100px 520px at 50% -10%, var(--brand-wash), transparent 70%), var(--bg)}
.signin__card{width:min(430px,100%);background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:34px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:15px}
.signin__logins{font-size:.82rem;color:var(--muted);border-top:1px solid var(--line2);padding-top:16px;display:grid;gap:6px}
.signin__logins code{font-family:var(--mono);font-size:.76rem;background:var(--card2);padding:2px 6px;border-radius:5px}
.signin__logins b{color:var(--text)}
.who-tabs{display:flex;gap:3px;background:var(--line2);padding:3px;border-radius:var(--r)}
.who-tabs button{flex:1;border:0;background:none;padding:9px;border-radius:9px;cursor:pointer;font-size:.86rem;
  color:var(--muted);min-height:40px;transition:.18s var(--ease)}
.who-tabs button[aria-pressed=true]{background:var(--card);color:var(--text);font-weight:600;box-shadow:var(--shadow)}

/* ---------------------------------------------------------------------------
   Public enrolment. A stepped flow with the running price always in view.
   One decision per screen, big targets, and nothing on screen that is not
   part of the decision being made right now.
   --------------------------------------------------------------------------- */
.join{max-width:1080px;margin-inline:auto;padding:clamp(28px,5vw,56px) 20px 120px;display:flex;flex-direction:column;gap:26px}
.join__head h1{font-size:clamp(1.6rem,3.4vw,2.35rem);letter-spacing:-.03em}
.join__head .sub{margin-top:8px;font-size:1rem}

/* progress — three labelled segments, current one filled */
.prog{display:flex;gap:8px;align-items:center;list-style:none;margin:0 0 18px;padding:0;flex-wrap:wrap}
.prog li{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--muted2);font-weight:550}
.prog li::before{content:'';width:22px;height:22px;border-radius:99px;background:var(--line2);display:grid;
  place-items:center;font-size:.72rem;font-weight:700;color:var(--muted2)}
.prog li:nth-of-type(1)::before{content:'1'} .prog li:nth-of-type(2)::before{content:'2'} .prog li:nth-of-type(3)::before{content:'3'}
.prog li[data-state=done]{color:var(--muted)}
.prog li[data-state=done]::before{content:'✓';background:var(--brand);color:#fff}
.prog li[data-state=now]{color:var(--brand)}
.prog li[data-state=now]::before{background:var(--brand);color:#fff}
.prog li:not(:last-of-type){flex:1}
.prog li:not(:last-of-type)::after{content:'';flex:1;height:1px;background:var(--line);min-width:12px;margin-left:8px}
@media(max-width:620px){
  .prog li:not(:last-of-type){flex:0}
  .prog li:not(:last-of-type)::after{display:none}
  .prog{gap:14px}
}

.join__cols{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
@media(max-width:940px){.join__cols{grid-template-columns:1fr}}

.step{display:flex;flex-direction:column;gap:18px}
.step[hidden]{display:none}
.step__title{font-size:1.32rem;font-weight:620;letter-spacing:-.022em}
.step__note{font-size:.9rem;color:var(--muted);margin-top:-8px;max-width:62ch;line-height:1.5}

/* membership choice */
.tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:620px){.tiers{grid-template-columns:1fr}}
.tierpick{text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;cursor:pointer;display:flex;flex-direction:column;gap:2px;position:relative;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),transform .12s var(--ease);
  box-shadow:var(--shadow)}
.tierpick:hover{border-color:var(--brand-line)}
.tierpick:active{transform:scale(.99)}
.tierpick[aria-pressed=true]{border-color:var(--brand);background:var(--brand-wash);box-shadow:var(--shadow-md)}
/* the selected state reads without colour too, for anyone who cannot see the tint */
.tierpick[aria-pressed=true]::after{content:'✓';position:absolute;top:16px;right:18px;width:24px;height:24px;
  border-radius:99px;background:var(--brand);color:#fff;font-size:.78rem;font-weight:700;display:grid;place-items:center}
.tierpick i{font-style:normal;font-weight:620;font-size:1rem;letter-spacing:-.01em}
.tierpick b{font-size:1.9rem;font-weight:620;font-variant-numeric:tabular-nums;letter-spacing:-.035em;line-height:1.1;
  margin-top:4px;display:flex;align-items:baseline;gap:3px}
.tierpick b em{font-style:normal;font-size:.82rem;font-weight:500;color:var(--muted)}
.tierpick>span{font-size:.86rem;color:var(--muted)}
.jt{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.jt li{font-size:.82rem;color:var(--muted);padding-left:20px;position:relative;line-height:1.4}
.jt li::before{content:'';position:absolute;left:0;top:.46em;width:6px;height:6px;border-radius:50%;
  background:var(--brand);opacity:.42}
.jt li.more{color:var(--muted2);font-style:italic}
.jt li.more::before{display:none}

/* the price rail */
.rail{position:sticky;top:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow-md)}
.rail__label{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);font-weight:650}
.rail__amt{font-size:2.5rem;font-weight:620;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.05;
  margin:6px 0 2px;display:flex;align-items:baseline;gap:4px}
.rail__amt em{font-style:normal;font-size:.9rem;font-weight:500;color:var(--muted);letter-spacing:0}
.rail__for{font-size:.88rem;color:var(--muted)}
.ln{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line2);font-size:.89rem}
.ln:last-of-type{border-bottom:0}
.ln b{font-variant-numeric:tabular-nums;font-weight:600}
.tot{display:flex;justify-content:space-between;gap:12px;padding-top:13px;margin-top:4px;border-top:1px solid var(--line);
  font-weight:650;font-variant-numeric:tabular-nums}
.jb{margin-top:18px;border-top:1px solid var(--line2);padding-top:16px}
.jb h3{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);font-weight:650;margin:0 0 10px}
.jb h3:not(:first-child){margin-top:16px}
.jb ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.jb li{font-size:.83rem;color:var(--text);padding-left:22px;position:relative;line-height:1.45}
.jb li::before{content:'';position:absolute;left:0;top:.34em;width:13px;height:13px;border-radius:99px;
  background:var(--brand-wash);border:1.5px solid var(--brand);opacity:.75}

/* the same total, pinned to the bottom of a phone */
.railbar{display:none}
@media(max-width:940px){
  .rail{position:static}
  .railbar{display:flex;align-items:center;gap:14px;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:rgba(255,255,255,.93);backdrop-filter:saturate(1.6) blur(14px);border-top:1px solid var(--line);
    padding:12px 18px calc(12px + env(safe-area-inset-bottom))}
  .railbar div{display:flex;flex-direction:column;line-height:1.2}
  .railbar span{font-size:.72rem;color:var(--muted)}
  .railbar b{font-size:1.16rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .railbar .btn{margin-left:auto}
}
.step__nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
@media(max-width:940px){.step__nav{display:none}}

/* the done screen */
.done__mark{width:56px;height:56px;border-radius:99px;background:var(--ok-bg);color:var(--ok);display:grid;
  place-items:center;font-size:1.6rem;margin-bottom:16px}
.nextlist{display:grid;gap:16px;margin-top:16px}
.nextlist>div{font-size:.94rem;line-height:1.5}
.nextlist b{display:block;color:var(--brand);font-weight:620;margin-bottom:2px}

/* member identity mark */
.avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;color:#fff;font-weight:700;font-size:.82rem;letter-spacing:.02em;
  flex:0 0 auto;object-fit:cover;overflow:hidden}
.avatar--lg{width:96px;height:96px;font-size:2rem}
.profile__head{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;margin-bottom:22px}
.profile__id{flex:1;min-width:240px}
.profile__id h1{margin:0 0 4px}
.profile__meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0 0}
.backlink{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.86rem;padding:0;
  margin-bottom:12px;display:inline-flex;gap:6px;align-items:center}
.backlink:hover{color:var(--text)}
.deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:start}

/* a third column for city / state / ZIP, collapsing to one on a phone */
.row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
@media(max-width:620px){.row3{grid-template-columns:1fr}}
.field__hint{display:block;margin-top:5px;font-size:.78rem;color:var(--muted)}

/* ---------------------------------------------------------------- the counter
   A till is two columns: what you can sell, and the sale you are building. They stack on a narrow
   screen because the front desk's second device is a tablet, and a two-column till on a tablet is
   two half-columns nobody can read. */
.till{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:18px;align-items:start}
.till__sale{position:sticky;top:16px;display:flex;flex-direction:column;gap:12px}
@media(max-width:1080px){.till{grid-template-columns:1fr}.till__sale{position:static}}
.findbox{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
  background-color:var(--card);color:var(--text);font-size:1rem;min-height:48px}
.findbox:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-wash)}
tr.dim td{opacity:.5}
.who{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:0 2px 2px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--brand-wash);color:var(--brand);
  border-radius:99px;padding:6px 8px 6px 14px;font-size:.88rem;font-weight:600}
button.x{border:0;background:transparent;color:inherit;cursor:pointer;font-size:1.05rem;line-height:1;
  padding:2px 6px;border-radius:99px;opacity:.65}
button.x:hover{opacity:1;background:rgba(0,0,0,.06)}
.totals{width:100%;border-collapse:collapse;margin:4px 0}
.totals th{text-align:left;font-weight:500;color:var(--muted);padding:5px 0;font-size:.89rem}
.totals td{padding:5px 0}
.totals tr.big th{color:var(--text);font-weight:600;font-size:1rem;border-top:1px solid var(--line);padding-top:10px}
.totals tr.big td{border-top:1px solid var(--line);padding-top:10px;font-size:1.05rem}
.tender{border-top:1px solid var(--line2);padding-top:12px;display:flex;flex-direction:column;gap:9px}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.ticks li{display:flex;align-items:center;gap:7px;font-size:.9rem}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:4px}
/* The terminal's own states, at the terminal's own pace. A card reader takes four seconds and the
   screen should look like it is waiting for one, not like it has already decided. */
.termbox{border:1px solid var(--line);border-radius:var(--r);padding:18px;text-align:center;
  background:var(--card2);min-height:84px;display:grid;place-content:center;gap:4px}
.termbox.ok{border-color:#1a7f4b;background:rgba(26,127,75,.08)}
.termbox.bad{border-color:#b3261e;background:rgba(179,38,30,.07)}
.note--good{background:rgba(26,127,75,.09);border:1px solid rgba(26,127,75,.3);color:#14603a;
  border-radius:var(--r);padding:10px 13px;font-size:.9rem}
/* A receipt is a document, so it is set like one and prints like one. */
.rcpt{max-width:420px;margin:0 auto;font-size:.92rem}
.rcpt h2{margin-bottom:2px}
.rcpt .totals tr.big td{font-size:1.1rem}

/* A table that groups its rows. The lab-company bands in the price list are the first use: 800
   lab prices read as one undifferentiated list unless the company they come from is a visible
   break in the table. Both selectors are doubled up on purpose - `tbody tr:hover` above is
   (0,0,1,2) and would otherwise tie and win on source order. */
tbody tr.rowgrp td,tbody tr.rowgrp:hover td{background:var(--brand-wash);border-bottom:1px solid var(--line);
  padding-top:10px;padding-bottom:10px}
tbody tr.rowgrp b{font-size:.93rem}
tbody tr.rowgrp .tiny{margin-left:8px}