/* Dentcof tx — the components every section shares (docs/UI-PLAN.md, section 2). Loaded after styles.css; each
   component that moves here is deleted there. */

/* A person: round (as everywhere in tx), their initials in the empty circle. */
.cx-av{flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);font:600 12px var(--ui);color:var(--muted)}
.cx-av img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;transform:scale(1.12);transform-origin:50% 14%;display:block}
.cx-av.big{width:72px;height:72px;font-size:18px}

/* An open item's head stays in view while its panel scrolls. */
.cx-pstick{position:sticky;top:0;z-index:4;background:var(--panel);padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--line)}
/* Asked under a list row instead of in a pop-up: a reason, or "are you sure" for what can't be undone. */

/* Settings: a section in Education's frame; its panes are shown in place (no pop-up). */
.set-cx #settings{position:static;display:block;inset:auto;width:auto;max-width:none;height:auto;max-height:none;margin:0;padding:0;border:0;background:none;color:inherit;overflow:visible}
.set-cx #settings .sheet-body{padding:0;background:none;max-height:none;overflow:visible}
.set-cx #settings .set-head{display:none}
.set-cx #settings .set-pane{padding-top:0}
.set-cx #settings .sec,.cx-sets .sec{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:6px 16px}
.set-cx #settings .sec h3,.cx-sets .sec h3{margin:10px 0 2px;font:600 15px var(--ui);letter-spacing:0;text-transform:none;color:var(--ink)}
.tc-seg{align-self:flex-start;justify-self:start;margin:0 0 4px}
@media (min-width:761px){html[data-sec="settings"] body{overflow:hidden}}

/* Say or type: a plain box; inside it, the orb's round black voice button and, where it sends, a black ↑. */
.sot{display:flex;align-items:flex-end;gap:6px;padding:5px 5px 5px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.sot:focus-within{border-color:var(--ink)}
.sot>textarea,.sot>input{flex:1;min-width:0;border:0!important;background:none!important;outline:none;box-shadow:none!important;padding:7px 0!important;font:400 14.5px/1.45 var(--ui);color:var(--ink);resize:none}
.sot>textarea{min-height:34px;max-height:260px;overflow:auto}
.sot-acts{display:flex;gap:6px;align-items:center;flex:none}
.sot-mic,.sot-send{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--panel);cursor:pointer;flex:none}
.sot-mic .mid{stroke:inherit} /* no cyan at rest (Florin): cyan only while the mic listens */
.sot-mic.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 45%,transparent)}
.sot-mic:disabled{opacity:.7;cursor:default}
/* One black button at a time: with words in the field, Send (a labelled pill) is the black one and the mic steps back
   to a plain icon beside it, to say more. */
.sot-send{width:auto;height:34px;padding:0 12px 0 14px;gap:6px;grid-auto-flow:column;border-radius:999px;font:600 14px var(--ui)}
.sot-send[hidden]{display:none}
.sot.has-text .sot-mic:not(.on){background:none;color:var(--ink);width:30px;height:30px}
.sot.has-text .sot-mic:not(.on):hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.ask .sot-mic{width:32px;height:32px;margin:0 2px}
/* The command box, the same rule: empty, only the voice button; typed or said, a black Send pill and a plain mic. */
.ask-go{width:auto!important;padding:0 12px 0 14px;gap:6px;grid-auto-flow:column;border-radius:999px!important;font:600 14px var(--ui)}
.ask:has(input:placeholder-shown) .ask-go:not(:disabled){display:none}
.ask:not(:has(input:placeholder-shown)) .sot-mic:not(.on){background:none;color:var(--ink);width:30px;height:30px}

/* Add person, Retire, Accounts: cards in Team's page where pop-ups were. */
.tm-inline{margin:4px 0 12px}.tm-inline .sheet-body{padding:0;gap:12px}.tm-inline h3{margin:0}
.tm-inline .actions{display:flex;gap:8px;flex-wrap:wrap}
.cx-sets{display:grid;gap:12px;align-content:start}
.cx-sets>.sec:first-child>h3:first-child{display:none} /* the page header says it already */
.cx-bask>.sot{flex:1;min-width:0}

/* The Bill and the SmartBill invoice, in a panel or card: no window chrome, one column. */
.sbi-in .sbi-h{padding:0 0 10px}
.sbi-in .sbi-body{grid-template-columns:1fr;padding:12px 0 0}
.sbi-in .bill-body{padding:12px 0 0}
.sbi-in .sbi-prev{position:static}
.sbi-in .sbi-load,.sbi-in .sbi-err{padding:20px 0}
.tv-sbinv{margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid var(--line)}

/* Old Masterclass invoices: the question under the invoice's row (or above the table), not a pop-up. */
.mi-ask td{padding:10px 12px!important;background:var(--bg)}
div.mi-ask{margin:0 0 10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.mi-askf{grid-template-columns:1fr;max-width:560px}.mi-askf label{display:grid;gap:4px;font-size:12.5px;color:var(--muted)}.mi-askf p{margin:0}
.cx-main.busy{opacity:.55;transition:opacity .2s}

/* Financials and Marketing: in Education's frame, the page behind never scrolls on a computer. */
@media (min-width:761px){html[data-sec="financials"] body,html[data-sec="marketing"] body{overflow:hidden}}
.bi-cx .cl-main>.cx-head,.mk-cx .cx-head{margin-bottom:12px}
.mk-cx .cx-step b{white-space:nowrap}

/* A field in focus: its line turns black (no ring, no cyan). */
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-color:var(--ink)}
.sot>input:focus-visible,.sot>textarea:focus-visible,.ask input:focus-visible{border-color:transparent}

/* One field everywhere: on a computer 14px text and 36px high, whatever page it's on. */
@media (min-width:761px){
  textarea,input,select{font-size:14px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select{min-height:36px;padding-top:6px;padding-bottom:6px}
}
/* The change bars (Treatments, Team): the say-or-type look, the orb's voice button and a black ↑ inside the box. */
.changebar{align-items:center;padding:5px 5px 5px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.changebar:focus-within{border-color:var(--ink)}
.changebar input{border:0!important;background:none!important;padding:6px 0!important;min-height:0!important}
.changebar .send{width:34px;height:34px;min-height:0;padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--panel);display:grid;place-items:center;flex:none}

.set-cx #settings .sec{padding:6px 16px}

/* tx's dropdown list and calendar (ui.js): a white card under the field, like Education's panels. */
.cx-pop{position:fixed;z-index:300;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px -12px rgba(0,0,0,.25);padding:6px}
.cx-menu{display:grid;gap:1px;max-width:min(420px,calc(100vw - 16px))}
.cx-menu-h{font:600 11px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px}
.cx-menu-i{all:unset;box-sizing:border-box;position:relative;display:block;padding:7px 12px 7px 30px;border-radius:8px;font:400 14px/1.35 var(--ui);color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-menu-i:hover,.cx-menu-i.kb{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.cx-menu-i[aria-selected="true"]{font-weight:600}
.cx-menu-i[aria-selected="true"]::before{content:"";position:absolute;left:11px;top:50%;width:9px;height:5px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-75%) rotate(-45deg)}
.cx-menu-i:disabled{opacity:.4;cursor:default}
.cx-cal{width:276px;padding:10px 12px 8px}
.cx-cal-h{display:flex;align-items:center;gap:6px;margin-bottom:6px}.cx-cal-h b{flex:1;font:600 14px var(--ui)}
.cx-cal-h button{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;font-size:18px;line-height:1;color:var(--muted)}
.cx-cal-h button:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
input.cx-cal-y{width:64px!important;min-height:0!important;padding:3px 6px!important;font:600 14px var(--ui)!important;text-align:center;-moz-appearance:textfield}
input.cx-cal-y::-webkit-inner-spin-button,input.cx-cal-y::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cx-cal-w,.cx-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cx-cal-w span{font:600 11px var(--ui);color:var(--muted);padding:4px 0}
.cx-cal-g button{all:unset;box-sizing:border-box;height:32px;display:grid;place-items:center;border-radius:8px;font:500 13px var(--ui);color:var(--ink);cursor:pointer}
.cx-cal-g button:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.cx-cal-g button.today{box-shadow:inset 0 0 0 1px var(--ink)}
.cx-cal-g button.on{background:var(--ink);color:var(--panel)}
.cx-cal-g button:disabled{opacity:.3;cursor:default}
.cx-cal-f{display:flex;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}.cx-cal-f .linkbtn{font-size:13px;color:var(--ink)}
@media (pointer:fine){input[type="date"]::-webkit-calendar-picker-indicator{display:none}}

/* Settings → Integrations: the list (grouped) and its state, the open one in the panel. */
.int-g{margin:14px 0 6px;font:600 11px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.int-g:first-child{margin-top:0}
.int-st{flex:none;font:500 12.5px var(--ui);color:var(--muted);white-space:nowrap}.int-st.on{color:var(--ink);font-weight:600}
.int-body:empty{display:none}.int-body .sec{border:0;padding:0}
/* A person's slot (a lead, a patient's care team): round face, the role small above the name; empty, a dotted + to choose. */
/* People in two modes (Florin, 1 Nov 2026): a big face where there's room, else the name alone. A seat: the role
   above, the face (72px; the lead dentist 96px, first, a line after), the first name under. */
.who-slots{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 22px}
.who-slots .slot{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;width:84px;text-align:center}
.slot-r{font:600 10.5px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.slot-n{font:600 14.5px var(--ui);color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .cx-av,.slot .av{width:72px;height:72px;font:600 22px var(--ui);box-shadow:none;border:0}
.slot.lead{width:104px;padding-right:22px;border-right:1px solid var(--line)}
.slot.lead .cx-av,.slot.lead .av{width:96px;height:96px;font-size:28px}
.slot.lead .slot-n{font-size:16px}
/* The primary lead dentist ringed in gold; the second lead beside them, a size down, a fainter ring, and the divider after them. */
.slot.lead:not(.empty) .cx-av,.slot.lead:not(.empty) .av{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--m-gold,#B08D57)}
.slot.lead:has(+ .lead2){border-right:0;padding-right:0}
.slot.lead2{width:88px;padding-right:22px;border-right:1px solid var(--line)}
.slot.lead2 .cx-av,.slot.lead2 .av{width:80px;height:80px;font-size:24px}
.slot.lead2:not(.empty) .cx-av,.slot.lead2:not(.empty) .av{box-shadow:0 0 0 3px var(--panel),0 0 0 4px color-mix(in srgb,var(--m-gold,#B08D57) 50%,transparent)}
/* The two as one mark (Florin, 11 Nov 2026: "intersect the 2"): the associate's face partly behind the lead's, a quarter
   under it; the associate's role under their name, so the two labels never collide. */
@media (min-width:601px){.slot.lead:has(+ .lead2){position:relative;z-index:1}.slot.lead + .slot.lead2{margin-left:-48px;position:relative;z-index:0}
  .slot.lead + .slot.lead2 .slot-r{order:3}.slot.lead + .slot.lead2:not(.empty) .cx-av,.slot.lead + .slot.lead2:not(.empty) .av{box-shadow:none}}
.slot.lead:hover .av,.slot.lead:hover .cx-av,.slot.lead2:hover .av,.slot.lead2:hover .cx-av{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--ink)}
.slot:hover .cx-av,.slot:hover .av,.slot:focus-visible .cx-av,.slot:focus-visible .av{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--ink)}
.slot.empty .cx-av,.slot.empty .av{background:none;border:2px dashed var(--muted);color:var(--muted);font:400 28px var(--ui)}
.slot.empty .slot-n{color:var(--muted);font-weight:500}
.cx-av.av-empty{background:var(--line);color:var(--ink);border:0} /* no photo yet: the initials on grey */
.cx-av.av-none{background:none;border:2px dashed var(--line);color:var(--muted)}
@media (max-width:600px){
  .who-slots{gap:12px 6px}
  .who-slots .slot{width:62px}.slot .cx-av,.slot .av{width:48px;height:48px;font-size:16px}
  .slot-r{font-size:9px;letter-spacing:.02em}
  .slot.lead{width:64px;padding-right:12px}.slot.lead .cx-av,.slot.lead .av{width:64px;height:64px;font-size:20px}
  .slot-n{font-size:13px}.slot.lead .slot-n{font-size:14px}
  .slot.lead2{width:56px;padding-right:12px}.slot.lead2 .cx-av,.slot.lead2 .av{width:56px;height:56px;font-size:18px}
}
/* Choosing a person: a sheet of big faces, the first name under each. */
.pick-pop.faces{display:grid;grid-template-columns:repeat(4,84px);gap:6px;padding:12px;min-width:0;max-height:min(420px,70vh)}
.pick-pop.faces .meta{grid-column:1/-1}
.pick-pop.faces button{flex-direction:column;justify-content:flex-start;gap:8px;padding:8px 4px;text-align:center}
.pick-pop.faces button:hover{background:none}
.pick-pop.faces .av,.pick-pop.faces .cx-av{width:64px;height:64px;font:600 20px var(--ui);box-shadow:none;border:0}
.pick-pop.faces .cx-av.av-none{border:2px dashed var(--line)}
.pick-pop.faces b{font:600 13px var(--ui);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-pop.faces button:hover .av,.pick-pop.faces button:hover .cx-av,.pick-pop.faces button:focus-visible .av,.pick-pop.faces [aria-current="true"] .cx-av{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--ink)}
@media (max-width:600px){ .pick-pop.faces{grid-template-columns:repeat(3,84px)} }
/* Where there's no room: the name, as text. */
.who-n,.ck-who .who-n{font:600 12.5px var(--ui);color:var(--ink);white-space:nowrap}
button.who-n:hover,button.who-n:focus-visible{text-decoration:underline;text-underline-offset:3px}
/* A say-or-type box while its mic works: a soft pulse while listening, quiet while it writes the words down. */
.sot[data-voice="listening"]{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent);animation:sotpulse 1.6s ease-in-out infinite}
.sot[data-voice="writing"]{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.sot[data-voice] input::placeholder,.sot[data-voice] textarea::placeholder{color:var(--ink);opacity:.75}
.sot[data-voice=""] input::placeholder,.sot[data-voice=""] textarea::placeholder{color:inherit;opacity:1}
@keyframes sotpulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 10%,transparent)}}
@media (prefers-reduced-motion:reduce){.sot[data-voice="listening"]{animation:none}}
.refine .sot{flex:1;min-width:0}
.gl-row{display:flex;align-items:center;gap:8px;padding:4px 0}