/* dentalOS v5 — page and component layouts built on css/system.css. */

/* ===================== the dashboard's two panels ===================== */
.board{display:grid;grid-template-columns:minmax(300px,30%) 1fr;gap:11px;padding:0 var(--gutter);
  margin-bottom:var(--s3);align-items:stretch}
.board>.card{min-height:430px}
.left{padding:11px}
.right{padding:12px 13px}

.rev{flex:none;display:flex;gap:12px;background:var(--surface-alt);border:1px solid var(--border);
  border-radius:11px;padding:10px 12px}
.rev .figs{flex:none}
.rev .figs h2{font-size:12px;font-weight:700}
.rev .big{margin:1px 0 4px;font-size:28px;font-weight:800;letter-spacing:-1.1px;color:var(--accent-deep);line-height:1}
.rev .rc{font-size:10.5px;font-weight:800}
.rev .rcs{font-size:9px;font-weight:500;color:var(--text-2)}
.rev .hair{width:1px;background:var(--border-strong);flex:none}
.rev .bars{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0}
.bar{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:7px}
.bar .lab{font-size:9.5px;font-weight:500;color:var(--text-2)}
.bar .track{height:7px;border-radius:999px;overflow:hidden;background:var(--mute-bg,#EDF1FD)}
.bar .fill{height:100%;border-radius:999px;display:block}
.bar .amt{font-size:10px;font-weight:700;white-space:nowrap}
.bar.received .track{background:var(--ok-bg)}   .bar.received .fill{background:var(--c-plan)}
.bar.pending .track{background:var(--warn-bg)}  .bar.pending .fill{background:#FBBE68}
.bar.expected .track{background:var(--accent-tint)} .bar.expected .fill{background:var(--accent-2)}

/* ===================== the wheel ===================== */
.scroller{position:relative;display:grid;grid-template-columns:168px 1fr 22px;flex:1;min-height:0;
  align-items:center;margin-top:18px}
.arc{position:relative}
.arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arc .hub{position:absolute;width:76px;height:76px;border-radius:50%;background:var(--surface);
  display:grid;place-items:center;left:14px;top:50%;transform:translateY(-50%);
  box-shadow:0 8px 22px rgba(79,95,208,.18),0 2px 6px rgba(20,22,40,.06);transition:box-shadow .3s}
.arc .hub svg{position:static;width:38px;height:38px;overflow:visible}
.dot{transition:r .28s cubic-bezier(.34,1.3,.5,1),opacity .28s}
.list{position:relative;overflow:hidden;min-width:0;
  margin-top:calc(var(--bleed,19px) * -1);margin-bottom:calc(var(--bleed,19px) * -1);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--bleed,19px),
    #000 calc(100% - var(--bleed,19px)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--bleed,19px),
    #000 calc(100% - var(--bleed,19px)),transparent 100%)}
.list .track2{position:absolute;left:0;right:0;top:0;will-change:transform}
.row{position:absolute;left:0;right:6px;height:60px;display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:3px 16px 3px 3px;box-shadow:0 2px 8px rgba(20,22,40,.05);cursor:pointer;
  transition:background .26s,border-color .26s,box-shadow .26s}
.row.on{background:var(--accent-tint);border-color:var(--accent-soft);box-shadow:0 4px 14px rgba(140,156,255,.22)}
.row .ic{width:54px;height:54px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff}
.row .ic svg{width:27px;height:27px}
.row .n{font-size:25px;font-weight:800;letter-spacing:-.8px}
.row .t{font-size:15.5px;font-weight:600;color:var(--accent-text);white-space:nowrap}
.row .go{margin-left:auto;color:var(--accent);display:grid;place-items:center}
.rail{display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px 0}
.rail button{width:22px;height:22px;display:grid;place-items:center;color:var(--accent);border-radius:6px}
.rail button:hover{background:var(--accent-tint)}
.rail .tr{flex:1;width:4px;border-radius:999px;background:var(--accent-tint);position:relative;min-height:30px;
  pointer-events:none}
.rail .th{position:absolute;left:0;width:4px;border-radius:999px;background:var(--accent-soft);
  transition:top .3s,height .3s;pointer-events:none}
.no-gsap .row{transition:top .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1),
  background .26s,border-color .26s,box-shadow .26s}

/* ===================== appointments: list and calendar ===================== */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:7px;top:28px;bottom:28px;width:2px;
  background:var(--accent-wash);border-radius:2px}
.appt{position:relative;display:flex;align-items:center;gap:16px;background:var(--surface-alt);
  border:1px solid var(--border);border-radius:var(--r);padding:11px 13px;margin-bottom:7px}
.appt::before{content:"";position:absolute;left:-26px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--surface-alt)}
.appt .when{font-size:14.5px;font-weight:600;color:var(--text-2);width:74px;flex:none}
.appt .nm{min-width:0;flex:1}
.appt .nm b{display:block;font-size:17px;font-weight:700;letter-spacing:-.2px}
.appt .nm span{display:block;margin-top:3px;font-size:14px;font-weight:500;color:var(--text-2)}
.appt .acts{display:flex;align-items:center;gap:9px;flex:none}

.cal{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;height:100%;display:flex;flex-direction:column}
.caltop{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--border)}
.caltop h3{font-size:22px;font-weight:800;letter-spacing:-.5px}
.chip{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:9px 18px;font-size:14px;font-weight:700;color:var(--accent-text);box-shadow:var(--sh-1)}
.nav{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-pill);box-shadow:var(--sh-1);overflow:hidden}
.nav button{width:36px;height:36px;display:grid;place-items:center;color:var(--accent-text)}
.grid7{flex:1;display:flex;flex-direction:column;min-height:0}
.calhead{display:grid;grid-template-columns:74px repeat(7,1fr)}
.dh{text-align:center;padding:9px 0 10px;border-bottom:1px solid var(--border);border-left:1px solid var(--border)}
.dh.corner{border-left:0}
.dh .wrap{display:inline-block;padding:4px 13px 6px;border-radius:12px}
.dh .dn{font-size:12.5px;font-weight:600;color:var(--text-2)}
.dh .dd{font-size:18px;font-weight:800;margin-top:1px}
.dh.today .wrap{background:var(--accent)} .dh.today .dn,.dh.today .dd{color:#fff}
.dh.sel .wrap{background:var(--accent-tint)} .dh.sel .dn,.dh.sel .dd{color:var(--accent-text)}
.gbody{flex:1;display:grid;grid-template-columns:74px repeat(7,1fr);min-height:220px;
  padding-top:13px;padding-bottom:24px;position:relative}
.hours{position:relative}
.hours span{position:absolute;right:11px;transform:translateY(-50%);font-size:13.5px;
  font-weight:500;color:var(--text-2);white-space:nowrap}
.daycol{position:relative;border-left:1px solid var(--border)}
.daycol .ln{position:absolute;left:0;right:0;border-top:1px solid #F0F2F9}
.ev{position:absolute;left:6px;right:-46px;border-radius:10px;padding:7px 9px 8px;border-left:3px solid;
  box-shadow:0 4px 12px rgba(20,22,40,.09);overflow:hidden;min-height:70px;z-index:2;cursor:pointer}
.daycol:last-child .ev{right:6px}
.ev .t{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;white-space:nowrap}
.ev .t .sp{flex:1}
.ev .who{display:flex;align-items:center;gap:7px;margin-top:5px}
.ev .who b{font-size:13px;font-weight:700;letter-spacing:-.1px;white-space:nowrap}
.ev .proc{margin-top:2px;margin-left:29px;font-size:12px;font-weight:500;color:var(--text-2);white-space:nowrap}
.ev .badge{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.ev.blue {background:#DDE4FD;border-color:#7E96EC} .ev.blue .t{color:#3C56C8}
.ev.green{background:#CFF6E9;border-color:#39C79A} .ev.green .t{color:#0E9E73}
.ev.amber{background:#FEE8D5;border-color:#F0A44A} .ev.amber .t{color:#C9801A}
.ev.pink {background:#FCDBF1;border-color:#F07FC0} .ev.pink .t{color:#C7417C}
.ev.lav  {background:#E3E6FD;border-color:#9AA6F2} .ev.lav .t{color:#4450C8}
.badge.ok{background:var(--c-plan)} .badge.warn{background:var(--c-lab)} .badge.late{background:var(--c-pat)}

/* ===================== the search panel ===================== */
.spanel{position:fixed;z-index:901;left:50%;top:84px;transform:translateX(-50%) translateY(-10px);
  width:min(760px,calc(100vw - 48px));max-height:min(70vh,640px);display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);overflow:hidden;
  opacity:0;transition:opacity .18s,transform .2s cubic-bezier(.2,.9,.3,1)}
.spanel.on{opacity:1;transform:translateX(-50%) translateY(0)}
.sbar{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border)}
.sbar .mag{color:var(--accent-text);display:grid;place-items:center;flex:none}
.sbar input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:19px;font-weight:600}
.sbar input::placeholder{color:var(--text-3);font-weight:500}
.sbar kbd{font:inherit;font-size:11px;font-weight:700;color:var(--text-2);background:var(--surface-sunk);
  border:1px solid var(--border-strong);border-radius:6px;padding:3px 7px}
.sresults{flex:1;overflow-y:auto;padding:8px}
.sgroup{display:flex;align-items:center;gap:8px;padding:12px 12px 6px;font-size:11px;
  font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text-3)}
.sgroup .n{background:var(--surface-sunk);color:var(--text-2);border-radius:999px;padding:1px 7px;font-size:10px}
.sitem{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;
  border-radius:var(--r-sm);transition:background .12s}
.sitem:hover,.sitem.cursor{background:var(--accent-pale)}
.sitem.cursor{box-shadow:inset 0 0 0 1.5px var(--accent-soft)}
.sitem .si{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--surface-sunk);color:var(--accent-text)}
.sitem .st{min-width:0;flex:1}
.sitem .st b{display:block;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sitem .st span{display:block;font-size:12.5px;color:var(--text-2);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sitem .sk{color:var(--text-3);display:grid;place-items:center;flex:none}
.sfoot{display:flex;align-items:center;gap:16px;padding:10px 18px;border-top:1px solid var(--border);
  font-size:11.5px;font-weight:600;color:var(--text-2);background:var(--surface-alt)}
.sfoot kbd{font:inherit;font-size:10px;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:5px;padding:2px 5px;margin-right:3px}

/* ===================== shared page furniture ===================== */
.ptools{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.ptools .grow{flex:1}
.srch{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:9px 15px;box-shadow:var(--sh-1);min-width:240px}
.srch input{border:0;outline:0;background:none;font-weight:600;flex:1;min-width:0}
.srch svg{color:var(--accent-text);flex:none}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:11px}
.tile{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r);padding:13px 15px}
.tile .k{font-size:11.5px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.3px}
.tile .v{font-size:26px;font-weight:800;letter-spacing:-.8px;margin-top:3px}
.tile .s{font-size:12px;font-weight:600;color:var(--text-2);margin-top:1px}
.tile.accent .v{color:var(--accent-deep)}

@media (max-width:1180px){ .board{grid-template-columns:1fr} }

/* ===================== the counter views ===================== */
.focushero{background:linear-gradient(104deg,var(--fbg) 0%,#FFFFFF 62%);border-color:color-mix(in srgb,var(--fc) 26%,var(--border))}
.fhero{display:flex;align-items:center;gap:var(--s5)}
.fmark{width:68px;height:68px;border-radius:22px;flex:none;display:grid;place-items:center;color:#fff;
  box-shadow:0 8px 22px color-mix(in srgb,var(--fc) 34%,transparent)}
.fnum b{display:block;font-size:46px;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--fc)}
.fnum span{display:block;margin-top:5px;font-size:14px;font-weight:600;color:var(--text-2)}
.fchips{display:flex;gap:var(--s3);flex-wrap:wrap}
.fchip{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 15px;
  text-align:right;min-width:92px;box-shadow:var(--sh-1)}
.fchip b{display:block;font-size:19px;font-weight:800;letter-spacing:-.5px}
.fchip span{display:block;font-size:11px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.3px}

/* ===================== the Tooth Chart ===================== */
.chart{display:grid;gap:10px}
.arch{display:flex;align-items:center;gap:14px}
.arch .alab{width:108px;flex:none;font-size:11.5px;font-weight:800;letter-spacing:.3px;
  text-transform:uppercase;color:var(--text-3);text-align:right}
.ateeth{flex:1;display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.half{display:flex;gap:4px}
.tooth{display:grid;justify-items:center;gap:2px;padding:5px 3px 4px;border-radius:10px;
  background:transparent;transition:background .14s,transform .14s;cursor:pointer;user-select:none}
.tooth svg{width:30px;height:32px;display:block;pointer-events:none}
.tooth b{font-size:10.5px;font-weight:700;color:var(--text-2);pointer-events:none}
.tooth:hover{background:var(--accent-pale);transform:translateY(-1px)}
.tooth.sel{background:var(--accent-tint);box-shadow:inset 0 0 0 1.6px var(--accent)}
.tooth.sel b{color:var(--accent-text)}
.tooth.gone{opacity:.55}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;font-weight:700;color:var(--text-2)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:9px;height:9px;border-radius:3px;display:block}
.stages{display:inline-flex;gap:3px;flex:none}
.stages i{width:16px;height:6px;border-radius:999px;background:var(--border-strong);display:block}
.stages i.on{background:var(--c-plan)}
@media (max-width:1180px){ .arch{flex-direction:column;align-items:stretch}
  .arch .alab{width:auto;text-align:left} .ateeth{gap:12px} }

/* ===================== a record's own page: lines you tap to change ===================== */
.elines{display:grid}
.eline{display:flex;align-items:center;gap:var(--s4);padding:12px 10px;border-radius:var(--r-sm);
  border-bottom:1px solid var(--border);cursor:pointer;transition:background .13s}
.eline:last-child{border-bottom:0}
.eline:hover{background:var(--accent-pale)}
.eline .k{width:150px;flex:none;font-size:13px;font-weight:700;color:var(--text-2);text-transform:capitalize}
.eline .v{flex:1;min-width:0;font-size:15px;font-weight:700}
.eline .v.none{color:var(--text-3);font-weight:600}
.eline .pen{color:var(--text-3);opacity:0;transition:opacity .13s;display:grid;place-items:center}
.eline:hover .pen{opacity:1}
.eline .field{flex:1;min-width:0}
.eline .field>label{display:none}
.eline .eacts{display:flex;gap:7px;flex:none}

/* ===================== notifications ===================== */
.npanel{position:fixed;z-index:901;right:18px;top:62px;width:min(420px,calc(100vw - 36px));
  max-height:min(70vh,560px);display:flex;flex-direction:column;background:var(--surface);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden;
  opacity:0;transform:translateY(-8px);transition:opacity .16s,transform .18s cubic-bezier(.2,.9,.3,1)}
.npanel.on{opacity:1;transform:none}
.nhead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.nhead b{font-size:16px;font-weight:800;letter-spacing:-.3px}
.nbody{flex:1;overflow-y:auto;padding:8px}
.nitem{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 11px;
  border-radius:var(--r-sm);transition:background .12s}
.nitem:hover{background:var(--accent-pale)}
.nitem .ni{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center}
.nitem .ni.bad{background:var(--bad-bg);color:var(--bad)}
.nitem .ni.warn{background:var(--warn-bg);color:var(--warn)}
.nitem .ni.mute{background:var(--surface-sunk);color:var(--text-2)}
.nitem .nt{min-width:0;flex:1}
.nitem .nt b{display:block;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nitem .nt span{display:block;font-size:12px;color:var(--text-2);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===================== print and share ===================== */
.printgrid{display:grid;grid-template-columns:330px 1fr;gap:16px;align-items:start}
.printgrid .check{margin-bottom:6px}
.sheet{background:var(--surface-sunk);border-radius:var(--r);padding:14px;display:grid;gap:14px;min-height:260px}
.sheet .page{background:#fff;border:1px solid var(--border);border-radius:8px;padding:22px 24px;
  box-shadow:var(--sh-1);font-size:13px}
.sheet.a5 .page{max-width:460px}
.sheet .page header{display:flex;flex-direction:column;gap:2px;border-bottom:2px solid var(--navy);
  padding-bottom:9px;margin-bottom:13px}
.sheet .page header b{font-size:16px;font-weight:800;letter-spacing:-.3px}
.sheet .page header span{font-size:11px;color:var(--text-2);font-weight:600}
.sheet .page h3{font-size:15px;font-weight:800;margin-bottom:7px}
.sheet .page p{margin:4px 0;font-weight:600;color:var(--text-2)}
.sheet .page p.small{font-size:11px;color:var(--text-3)}
.sheet .page pre{font:inherit;white-space:pre-wrap;background:var(--surface-alt);padding:10px;border-radius:8px}
.sheet .page .amt{font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--accent-deep);margin:8px 0}
.btn.disabled{opacity:.45;pointer-events:none}
@media (max-width:1180px){ .printgrid{grid-template-columns:1fr} }

/* what actually goes on paper: only the chosen documents */
@media print{
  html{zoom:1 !important;height:auto !important;overflow:visible !important}
  body{display:block !important;overflow:visible !important;background:#fff !important}
  .topbar,.dock,.phead,.ptools,.printgrid>div:first-child,.tipbox,#toasts,.scrim{display:none !important}
  .main,.scroll,.band,.card,.cbody{display:block !important;padding:0 !important;margin:0 !important;
    border:0 !important;box-shadow:none !important;background:#fff !important;overflow:visible !important}
  .printgrid{display:block !important}
  .sheet{background:#fff !important;padding:0 !important;gap:0 !important}
  .sheet .page{border:0 !important;box-shadow:none !important;page-break-after:always;padding:0 0 18mm}
  @page{margin:14mm}
}

/* ===================== the right card lending itself to a counter ===================== */
.rhead{display:flex;align-items:center;gap:11px;margin-bottom:12px;flex:none}
.rhead h2{font-size:27px;font-weight:800;letter-spacing:-.8px}
.rhead .phmark{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;color:#fff}
.focushero.in{border-radius:var(--r);margin-bottom:11px;padding:11px 13px;
  background:linear-gradient(104deg,var(--fbg) 0%,#FFFFFF 70%);
  border:1px solid color-mix(in srgb,var(--fc) 26%,var(--border))}
.focushero.in .fhero{gap:var(--s4)}
.focushero.in .fmark{width:52px;height:52px;border-radius:17px}
.focushero.in .fnum b{font-size:34px}
.focushero.in .fnum span{font-size:12.5px;margin-top:3px}
.focushero.in .fchip{padding:7px 12px;min-width:76px}
.focushero.in .fchip b{font-size:16px}
.focushero.in .fchip span{font-size:10px}
.previewlist{flex:1;min-height:0;display:flex;flex-direction:column}
.plhead{display:flex;align-items:baseline;gap:9px;margin:0 2px 8px}
.plhead b{font-size:13px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--text-3)}
.plhead span{font-size:12px;font-weight:600;color:var(--text-2)}
.previewlist .rows,.previewlist .state{overflow-y:auto;flex:1;min-height:0;padding-right:4px}
.scrollin{overflow-y:auto;flex:1;min-height:0;padding-right:4px}
.scrollin::-webkit-scrollbar,.previewlist .rows::-webkit-scrollbar{width:8px}
.scrollin::-webkit-scrollbar-thumb,.previewlist .rows::-webkit-scrollbar-thumb{
  background:var(--accent-wash);border-radius:999px;border:2px solid transparent;background-clip:content-box}
.rev.clickable{cursor:pointer;transition:border-color .14s,box-shadow .14s,transform .14s}
.rev.clickable:hover{border-color:var(--accent-soft);box-shadow:var(--sh-2);transform:translateY(-1px)}
.rev.clickable:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}

/* The two dashboard cards keep the dashboard's shape whatever is inside them: the board
   takes the space between the bars and the content scrolls within a card, not by growing
   the page and carrying the card's own header off the top. */
/* The two cards fill exactly the space between the greeting and the dock, so the first
   view needs no scrolling and there is no dead band above the toolbar. Their height
   therefore follows the screen, but is the same whatever is inside them. */
.board{height:max(300px, calc(var(--vph) - var(--navh,58px) - var(--headh,100px) - var(--dockh,96px) - 24px))}
.board>.card{min-height:0;height:100%;overflow:hidden}
.card.right>.rhead{flex:none}

/* ===================== the person modal ===================== */
.pmodal{display:grid;gap:var(--s4)}
.pmhead{display:flex;align-items:center;gap:var(--s3)}
.pmwho b{display:block;font-size:19px;font-weight:800;letter-spacing:-.4px}
.pmwho span{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-top:2px}
.pmblock{background:var(--surface-alt);border:1px solid var(--border);border-left:3px solid var(--bc);
  border-radius:var(--r);padding:14px 16px}
.pmbh{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.pmbh b{font-size:13px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--text-2)}
.pmi{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none}
.mkvs{display:grid;grid-template-columns:1fr 1fr;gap:7px 20px}
.mkv{display:flex;align-items:baseline;gap:10px;justify-content:space-between;
  border-bottom:1px dashed var(--border);padding-bottom:5px}
.mkv span{font-size:12.5px;font-weight:600;color:var(--text-2)}
.mkv b{font-size:13.5px;font-weight:700;text-align:right}
.pmacts{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.pmnext{display:flex;align-items:center;gap:10px;background:var(--accent-tint);border-radius:var(--r);
  padding:11px 14px;color:var(--accent-text)}
.pmnext b{font-size:14px;font-weight:800}
.pmnext span{font-size:13px;font-weight:600;display:grid;place-items:center}
.pmnext span:last-child{display:inline;color:var(--text-2)}
.pmh3{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text-3)}
@media (max-width:900px){ .mkvs{grid-template-columns:1fr} }
/* a row in a dashboard band IS the button; it carries no Open of its own */
.lrow.tap{cursor:pointer}
.lrow.tap .go{color:var(--text-3);display:grid;place-items:center;transition:transform .14s,color .14s}
.lrow.tap:hover .go{color:var(--accent);transform:translateX(2px)}

/* ============================================================
   Phone. The standing rule is that nothing goes off the screen, so the header
   stacks, the identity block drops to its mark, and a row that cannot sit on one
   line wraps rather than being cut.
   ============================================================ */
@media (max-width:760px){
  :root{--gutter:14px}
  html{zoom:1;height:100%}                   /* the 75% scale is for the clinic laptop */
  .topbar{min-height:52px;padding:7px 12px;gap:9px}
  .brand .by{display:none}
  .brand .word{font-size:19px}
  .brand .mark{width:34px;height:34px}
  .quick{gap:5px}
  .quick .qbtn:nth-child(n+4){display:none}  /* the two most used stay; the rest live in search */
  .qbtn{width:32px;height:32px;border-radius:10px}
  .me .who{display:none}
  .vrule{display:none}

  .phead{flex-wrap:wrap;align-items:flex-start;gap:9px;padding:10px var(--gutter) 8px}
  .phead h1{font-size:26px;letter-spacing:-.6px}
  .phead .statuspill{order:3;width:100%;justify-content:flex-start}
  .phead .spacer{display:none}

  .board{display:grid;grid-template-columns:1fr;height:auto;gap:11px}
  .board>.card{height:auto;min-height:340px}
  .scroller{grid-template-columns:120px 1fr 20px}
  .row .n{font-size:21px} .row .t{font-size:13.5px}

  .appt{flex-wrap:wrap;gap:9px}
  .appt .when{width:auto}
  .appt .nm{flex:1 1 100%;order:3}
  .appt .acts{flex:1 1 100%;order:4;flex-wrap:wrap}
  .lrow{flex-wrap:wrap}
  .lrow .grow{flex:1 1 60%}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .rhead{flex-wrap:wrap} .rhead h2{font-size:21px}
  /* the filter row scrolls sideways by itself rather than pushing the card wide */
  .rhead .segs{max-width:100%;overflow-x:auto;flex-wrap:nowrap}
  .rhead .segs::-webkit-scrollbar{height:0}
  .ptools .segs{max-width:100%;overflow-x:auto;flex-wrap:nowrap}
  .dlg,.spanel,.npanel{width:calc(100vw - 20px);max-width:none}
  .npanel{right:10px}
}

/* ===================== recording a treatment ===================== */
.recform{display:grid;gap:var(--s3)}
.rsec{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text-3);
  margin-top:var(--s3)}
.rnote{font-size:13px;font-weight:600;color:var(--text-2)}
.rentry{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r);padding:11px 13px}
.reh{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.reh b{font-size:14.5px;font-weight:700}
.rstages{display:flex;flex-wrap:wrap;gap:7px}
.rstages .check{padding:7px 11px;font-size:13px;gap:7px}
.rstages .check.was{opacity:.62;background:var(--ok-bg);border-color:#9FE0C6;cursor:default}
.sshare{font-size:11.5px;font-weight:700;color:var(--accent-text)}
.rmoney{display:grid;gap:9px}
.rofflabel{font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--text-3)}
.roffers,.rgroups{display:flex;flex-wrap:wrap;gap:7px}
.roffers .check.dim{opacity:.45}
.roffers .check.on{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-text)}
.rmeds{display:grid;gap:6px}
.rmed{display:flex;align-items:center;gap:9px;background:var(--surface-alt);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:8px 11px;font-size:13.5px}

/* ===================== collecting a payment ===================== */
.paysheet{display:grid;gap:var(--s3)}
.paybig{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r);
  padding:14px 16px;display:grid;gap:2px}
.paybig.owed{background:var(--warn-bg);border-color:#F6D79B}
.paybig .k{font-size:11.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--text-2)}
.paybig b{font-size:40px;font-weight:800;letter-spacing:-1.6px;line-height:1.05}
.paybig.owed b{color:var(--warn)}
.paybig .s{font-size:12.5px;font-weight:600;color:var(--text-2)}
.paypane{min-height:120px}
.payleft{display:flex;align-items:baseline;gap:10px;margin-top:11px}
.payleft span{font-size:12.5px;font-weight:700;color:var(--text-2)}
.payleft b{font-size:22px;font-weight:800;letter-spacing:-.6px}
.payquick{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.sw{width:42px;height:24px;border-radius:999px;background:var(--border-strong);position:relative;
  flex:none;transition:background .18s}
.sw.on{background:var(--accent)}
.sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(20,22,40,.3);transition:left .18s}
.sw.on i{left:21px}
.sw[disabled]{opacity:.45;cursor:not-allowed}
.sline,.pline{flex:none}
.sline .eline,.pline .eline{border:0;padding:0;gap:10px;background:none}
.sline .eline:hover,.pline .eline:hover{background:none}
.sline .eline .k{display:none}
.pline .eline .k{display:none}
.pline .eline .v{font-size:15px;font-weight:800;color:var(--accent-deep);text-align:right;min-width:88px}
.sline .eline .v{font-size:12px;font-weight:700;color:var(--text-2);min-width:86px;text-align:right}

/* ===================== tiles, and the Show control ===================== */
.tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:12px}
.tile-c{
  background:var(--surface);border:0;border-radius:6px;      /* cornered, not curved, and no border line */
  padding:14px 15px;display:grid;gap:7px;cursor:pointer;
  box-shadow:0 2px 6px rgba(28,36,80,.13), 0 1px 2px rgba(28,36,80,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.tile-c:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(28,36,80,.19), 0 2px 4px rgba(28,36,80,.1)}
.tile-c .th{display:flex;align-items:center;gap:9px;min-width:0}
.tile-c .th .av{flex:none}
.tile-c b{font-size:14.5px;font-weight:700;letter-spacing:-.2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tile-c .sub{font-size:12.5px;font-weight:500;color:var(--text-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tile-c .foot{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:1px}
.colbody{min-width:0}
.colfoot{display:flex;align-items:center;gap:10px;padding:11px var(--s4) var(--s4)}
.colfoot[hidden]{display:none}
.showlab{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--text-2)}
.showcount{border:1.5px solid var(--border-strong);background:var(--surface);border-radius:8px;
  padding:5px 8px;font-weight:700;font-size:12.5px;color:var(--text);cursor:pointer}
.showcount:focus-visible{outline:2px solid var(--accent-deep);outline-offset:1px}
@media (max-width:760px){ .tilegrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px} }
/* the filter and sort controls, to the left of a section's own buttons */
.ctlpill{display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 10px 5px 12px;
  box-shadow:var(--sh-1);color:var(--accent-text)}
.ctlpill select{border:0;outline:0;background:none;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--text);cursor:pointer;padding-right:2px;max-width:150px}
.ctlpill .dirbtn{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;
  color:var(--accent-text);transition:transform .16s}
.ctlpill .dirbtn.desc{transform:rotate(180deg)}
.ctlpill .dirbtn:hover{background:var(--accent-tint)}
.chead{flex-wrap:wrap;row-gap:8px}

/* ===================== signing in ===================== */
.signin{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 600px at 20% -10%, #DDE4FF 0%, var(--bg) 60%);
  opacity:0;transition:opacity .22s}
.signin.on{opacity:1}
.sicard{width:min(420px,100%);background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);padding:30px 28px;display:grid;gap:16px}
.sibrand{display:flex;align-items:center;gap:12px}
.sibrand b{display:block;font-size:19px;font-weight:800;letter-spacing:-.4px}
.sibrand span{display:block;font-size:12.5px;font-weight:600;color:var(--text-2)}
.signin h1{font-size:28px;font-weight:800;letter-spacing:-.8px}
.siwide{width:100%;padding:14px;font-size:15px}
.silinks{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* ===================== the figures ===================== */
.chartwrap{display:flex;align-items:flex-end;gap:10px;height:210px;padding:10px 4px 0;
  background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r)}
.bar2{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;gap:5px;min-width:0}
.bar2 .v{font-size:10.5px;font-weight:700;color:var(--text-2);white-space:nowrap}
.bar2 .col{width:100%;max-width:46px;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent-soft) 100%);
  transition:height .35s cubic-bezier(.2,.9,.3,1)}
.bar2:hover .col{background:linear-gradient(180deg,var(--accent-deep) 0%,var(--accent) 100%)}
.bar2 .m{font-size:10.5px;font-weight:700;color:var(--text-3);white-space:nowrap}

/* ===================== a form in steps ===================== */
.stepform{display:grid;gap:var(--s3)}
.steps3{display:flex;gap:8px;margin-bottom:4px}
.stepdot{flex:1;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--surface-alt);border:1.5px solid var(--border);transition:all .15s}
.stepdot b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--border-strong);color:var(--surface);font-size:12px;font-weight:800}
.stepdot span{font-size:13px;font-weight:700;color:var(--text-2)}
.stepdot.on{border-color:var(--accent);background:var(--accent-tint)}
.stepdot.on b{background:var(--accent);color:#fff}
.stepdot.on span{color:var(--accent-text)}
.stepdot.done b{background:var(--ok)}

/* ===================== booking ===================== */
.bookform{display:grid;gap:var(--s3)}
.duecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.duecard{display:grid;gap:3px;text-align:left;padding:11px 13px;border-radius:var(--r-sm);
  border:1.5px solid var(--border-strong);background:var(--surface);transition:all .14s}
.duecard.wide{margin-top:9px}
.duecard:hover{border-color:var(--accent-soft)}
.duecard.on{border-color:var(--accent);background:var(--accent-tint)}
.duecard b{font-size:14px;font-weight:700}
.duecard span{font-size:12px;font-weight:600;color:var(--text-2)}
.duecard .pill{justify-self:start}
.chiprow{display:flex;flex-wrap:wrap;gap:7px}
.chipx{padding:8px 13px;border-radius:999px;border:1.5px solid var(--border-strong);
  background:var(--surface);font-size:13px;font-weight:700;color:var(--text);transition:all .14s}
.chipx:hover{border-color:var(--accent-soft)}
.chipx.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chipx.date{display:inline-flex;align-items:center;padding:4px 10px}
.chipx.date input{border:0;outline:0;background:none;font:inherit;font-weight:700;font-size:13px}
.readback{display:flex;align-items:flex-start;gap:10px;background:var(--accent-tint);
  border-radius:var(--r);padding:12px 14px;color:var(--accent-text)}
.readback b{display:block;font-size:14.5px;font-weight:800}
.readback>span:first-child{display:grid;place-items:center;flex:none}
.readback>span:last-child{display:block;font-size:12.5px;font-weight:600;color:var(--text-2)}
.readback>div{min-width:0}

/* ===================== explaining the plan ===================== */
.explain{display:grid;gap:11px}
.exrow{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r);padding:13px 15px}
.exh{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.exh b{font-size:15px;font-weight:700}
.exfound{font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:5px}
.exfound span{font-weight:800;color:var(--text)}
.exwhy{font-size:14px;font-weight:500;line-height:1.5}
.extotal{display:flex;align-items:baseline;justify-content:space-between;padding:12px 15px;
  background:var(--accent-tint);border-radius:var(--r)}
.extotal span{font-size:13px;font-weight:700;color:var(--accent-text)}
.extotal b{font-size:22px;font-weight:800;letter-spacing:-.6px;color:var(--accent-deep)}
.sacts{display:flex;gap:4px;flex:none;opacity:0;transition:opacity .13s}
.sitem:hover .sacts,.sitem.cursor .sacts{opacity:1}
.sact{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:var(--surface-sunk);color:var(--accent-text);cursor:pointer}
.sact:hover{background:var(--accent);color:#fff}
/* a control that is honestly not wired up yet reads as such */
.soon{opacity:.55}
.soon:hover{opacity:.8}
/* the month view */
.monthgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);
  flex:1;min-height:0;overflow:auto}
.mhead{background:var(--surface-alt);text-align:center;padding:7px 0;font-size:11.5px;
  font-weight:700;color:var(--text-2)}
.mcell{background:var(--surface);min-height:62px;padding:6px 7px;display:grid;gap:3px;align-content:start}
.mcell.out{background:var(--surface-sunk);opacity:.6}
.mcell.today{background:var(--accent-tint)}
.mcell b{font-size:12.5px;font-weight:800}
.mcell.today b{color:var(--accent-deep)}
.mcount{font-size:10px;font-weight:700;color:var(--text-2)}
.mdots{display:flex;gap:3px;flex-wrap:wrap}
.mdots i{width:7px;height:7px;border-radius:50%;display:block}
.mdots i.blue{background:#7E96EC} .mdots i.green{background:#39C79A} .mdots i.amber{background:#F0A44A}
.mdots i.pink{background:#F07FC0} .mdots i.lav{background:#9AA6F2}