/* =====================================================================
   INDEX / PATIENT WORKSPACE — design pass on the token system.

   Loaded LAST in index.bundle.css, so it wins on cascade order. It uses
   !important only where it has to out-shout an existing !important: this
   page already carried 9,699 of them and they cannot all be removed in one
   step without risk. Every use below is deliberate, and the count is
   asserted by tests/theme/theme_quality_test.php so it cannot creep.

   Everything here is expressed in tokens. Change a token, this page follows,
   in light mode, dark mode and all three densities.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. REAL BUGS FIRST
   --------------------------------------------------------------------- */

/* 1a. The patient action row was a grid of four FIXED 141.5px columns while
       its buttons were set to font-weight:900, white-space:nowrap and
       overflow:hidden. "Procedure / Billing" needs 159px at that weight, so
       the label was being cut off mid-word on every clinic's screen -
       "rocedure / Billin". Letting the columns size themselves fixes it; the
       lighter weight (below) means they now fit comfortably. */
.quick-actions.patient-action-grid{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
  gap:var(--s-sp-2);
}
.quick-actions.patient-action-grid > .btn{
  min-width:0;
  overflow:visible!important;
  white-space:normal!important;
  line-height:var(--s-lh-tight);
  padding:var(--s-sp-2) var(--s-sp-3);
}

/* 1b. The clinic name was clamped to a 300px box with an ellipsis, so
       the practice name rendered as
       "... Dental Care & Implant ...". The name of the practice is not
       a place to save 38 pixels. */
html body #siyaTopMenu .sn-brand-title{
  max-width:min(46vw,620px)!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
@media (max-width:900px){
  html body #siyaTopMenu .sn-brand-title{
    max-width:60vw!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* 1c. The floating Approval pill is position:fixed at the bottom-left, so it
       sat on top of the patient list and covered a patient's name. Reserve
       the space it occupies at the end of the scroll area. */
@media screen{
  body{padding-bottom:calc(var(--s-tap-min) + var(--s-sp-6));}
}
#siyaApprovalFloat{box-shadow:var(--s-sh-3);}

/* ---------------------------------------------------------------------
   2. TYPOGRAPHY — one scale, three weights
       The page used 600/700/800/850/900/950. When every element is bold,
       weight stops carrying meaning and the eye has nothing to follow.
   --------------------------------------------------------------------- */
.patient-item,.patient-item *,
.quick-actions .btn,.cardx .head,.card-header,
.sn-menu-item,.sn-dropdown-link,
.summary-label,.braces-dash-card .label,.billing-summary-box .label{
  font-weight:var(--s-fw-semibold)!important;
  letter-spacing:0;
}
.cardx .head,.card-header,h1,h2,h3,h4,h5,.section-title{
  font-weight:var(--s-fw-bold)!important;
  letter-spacing:-.01em;
  color:var(--s-ink-strong);
}
.patient-item .patient-meta,.muted,.text-muted,.small-note,.lock,
.summary-label,.count-select-hint{
  font-weight:var(--s-fw-medium)!important;
  color:var(--s-ink-muted)!important;
}
/* Money, tooth numbers and counts must not jitter as digits change. */
.summary-value,.billing-summary-box .value,.braces-dash-card .value,
.align-current,.align-rate-value,td.amount,.amount,.money{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:var(--s-num-tabular);
}

/* ---------------------------------------------------------------------
   3. SELECTION — quiet, not a traffic cone
       The selected patient was a solid #f97316 fill with white text: the
       loudest thing on a clinical screen was a list cursor. A tinted surface
       with a brand bar reads instantly without competing with real alerts.
   --------------------------------------------------------------------- */
html body .patient-item.active{
  background:var(--s-bg-selected)!important;
  border-color:var(--s-line-brand)!important;
  box-shadow:inset 3px 0 0 0 var(--s-action-bg)!important;
  color:var(--s-ink-strong)!important;
}
html body .patient-item.active *{color:var(--s-ink-strong)!important;}
html body .patient-item.active .patient-meta,
html body .patient-item.active small{color:var(--s-ink-muted)!important;}
html body .patient-item.active::before,
html body .patient-item.active::after{content:none!important;}
html body .patient-item{
  border-radius:var(--s-r-md);
  border:1px solid var(--s-line-default);
  transition:background var(--s-dur-fast) var(--s-ease),
             border-color var(--s-dur-fast) var(--s-ease);
}
html body .patient-item:hover:not(.active){background:var(--s-bg-hover);}

/* ---------------------------------------------------------------------
   4. ACTIONS — exactly one primary per screen
   --------------------------------------------------------------------- */
html body .btn-primary,
html body #addPatientBtn,
html body .btn-siya-primary{
  background:var(--s-action-bg)!important;
  border-color:var(--s-action-bg)!important;
  color:var(--s-action-ink)!important;
  font-weight:var(--s-fw-semibold)!important;
  border-radius:var(--s-r-md)!important;
}
html body .btn-primary:hover,
html body #addPatientBtn:hover{
  background:var(--s-action-bg-hover)!important;
  border-color:var(--s-action-bg-hover)!important;
}
html body .btn-outline-secondary,
html body .quick-actions .btn{
  background:var(--s-bg-surface)!important;
  border:1px solid var(--s-line-strong)!important;
  color:var(--s-ink-body)!important;
  border-radius:var(--s-r-md)!important;
}
html body .btn-outline-secondary:hover,
html body .quick-actions .btn:hover{
  background:var(--s-bg-hover)!important;
  border-color:var(--s-line-brand)!important;
  color:var(--s-ink-brand)!important;
}
/* Keyboard users could not see where they were. */
html body .btn:focus-visible,
html body .patient-item:focus-visible,
html body .form-control:focus-visible,
html body .form-select:focus-visible,
html body a:focus-visible{
  outline:2px solid transparent;
  box-shadow:var(--s-focus-ring)!important;
  border-color:var(--s-action-bg)!important;
}
html body .btn-danger:focus-visible{box-shadow:var(--s-focus-ring-danger)!important;}

/* ---------------------------------------------------------------------
   5. STATUS — four colours, and never colour alone
       Confirmed was #047857 and Completed was #166534: two greens roughly
       one in twelve men cannot tell apart, and nobody can in a dim
       operatory. They now differ in hue AND carry a leading glyph.
   --------------------------------------------------------------------- */
.appt-status{
  border-radius:var(--s-r-full);padding:2px 10px;
  font-size:var(--s-fs-12);font-weight:var(--s-fw-semibold);
  display:inline-flex;align-items:center;gap:6px;
}
.appt-status::before{font-weight:var(--s-fw-bold);}
.appt-Booked   {background:var(--s-info-50)!important;  color:var(--s-info-700)!important;}
.appt-Booked::before{content:"•";}
.appt-Confirmed{background:var(--s-info-50)!important;  color:var(--s-info-700)!important;}
.appt-Confirmed::before{content:"✓";}
.appt-Completed{background:var(--s-ok-50)!important;    color:var(--s-ok-700)!important;}
.appt-Completed::before{content:"✔";}
.appt-Missed   {background:var(--s-warn-50)!important;  color:var(--s-warn-700)!important;}
.appt-Missed::before{content:"!";}
.appt-Cancelled{background:var(--s-danger-50)!important;color:var(--s-danger-700)!important;}
.appt-Cancelled::before{content:"×";}

.patient-warning-line,.siya-cond-modal-msg,.aligner-rule{
  background:var(--s-warn-50)!important;
  border-color:var(--s-warn-200)!important;
  color:var(--s-warn-700)!important;
  border-radius:var(--s-r-md)!important;
  font-weight:var(--s-fw-medium)!important;
}

/* ---------------------------------------------------------------------
   6. SURFACES — one card, one radius, one edge
       Radii on this page ran 999/18/16/14/12/10/50% interchangeably.
   --------------------------------------------------------------------- */
.cardx,.card,.record-card,.timeline-card,.case-summary,
.aligner-summary-card,.braces-dash-card,.billing-summary-box{
  background:var(--s-bg-surface);
  border:1px solid var(--s-line-default);
  border-radius:var(--s-r-lg)!important;
  box-shadow:var(--s-sh-1);
}
.cardx .head,.card-header{
  background:var(--s-bg-surface);
  border-bottom:1px solid var(--s-line-default);
  padding:var(--s-sp-3) var(--s-sp-4);
}
.form-control,.form-select{
  border-radius:var(--s-r-sm)!important;
  border-color:var(--s-line-strong)!important;
  color:var(--s-ink-body);
  background:var(--s-bg-surface);
  min-height:var(--s-control-h);
}
.form-control::placeholder{color:var(--s-ink-subtle);}

/* 6b. The two floating panels were near-black slabs dropped on a white page,
       with no relationship to any other surface. They are cards. */
html body .patient-dark-card{
  background:var(--s-bg-surface)!important;
  border:1px solid var(--s-line-default)!important;
  border-radius:var(--s-r-lg)!important;
  box-shadow:var(--s-sh-2)!important;
  color:var(--s-ink-body)!important;
}
html body .patient-dark-card-header{
  background:var(--s-bg-sunken)!important;
  color:var(--s-ink-strong)!important;
  border-bottom:1px solid var(--s-line-default)!important;
  font-weight:var(--s-fw-semibold)!important;
  border-radius:var(--s-r-lg) var(--s-r-lg) 0 0!important;
  padding:var(--s-sp-3) var(--s-sp-4)!important;
}
html body .patient-dark-card-body{
  color:var(--s-ink-body)!important;
  padding:var(--s-sp-4)!important;
}
html body .patient-dark-card .btn-outline-light{
  border-color:var(--s-line-strong)!important;
  color:var(--s-ink-muted)!important;
}
html body .patient-dark-card .text-muted{color:var(--s-ink-muted)!important;}

/* ---------------------------------------------------------------------
   7. NAVIGATION — twelve equal-weight items in two rows is a wall of text
   --------------------------------------------------------------------- */
html body #siyaTopMenu .sn-menu-item{
  font-weight:var(--s-fw-medium)!important;
  color:var(--s-ink-muted)!important;
  border-radius:var(--s-r-sm)!important;
  padding:var(--s-sp-2) var(--s-sp-3)!important;
}
html body #siyaTopMenu .sn-menu-item:hover{
  background:var(--s-bg-hover)!important;color:var(--s-ink-strong)!important;
}
html body #siyaTopMenu .sn-menu-item.active,
html body #siyaTopMenu .sn-menu-item[aria-current="page"]{
  background:var(--s-bg-selected)!important;
  color:var(--s-ink-brand)!important;
  font-weight:var(--s-fw-semibold)!important;
}

/* ---------------------------------------------------------------------
   8. CHAIRSIDE — gloved hands need a target, not a link
   --------------------------------------------------------------------- */
[data-density="chairside"] .btn,
[data-density="chairside"] .patient-item,
[data-density="chairside"] .form-control,
[data-density="chairside"] .form-select{
  min-height:var(--s-tap-min);
}
[data-density="chairside"] .quick-actions.patient-action-grid{
  grid-template-columns:repeat(auto-fit,minmax(175px,1fr))!important;
}

/* ---------------------------------------------------------------------
   9. CORRECTIONS FOUND BY tests/theme/contrast_sweep.js
       The selected patient used to be a solid orange fill, so .patient-name
       was set to white. Tinting the row without re-colouring the name left
       white text on a pale surface: 1.05:1, effectively invisible. Caught by
       the sweep, not by looking at it.
   --------------------------------------------------------------------- */
html body .patient-item.active .patient-name,
html body .patient-item.active b,
html body .patient-item.active strong{
  color:var(--s-ink-strong)!important;
}
html body .patient-item.active .patient-meta,
html body .patient-item.active small,
html body .patient-item.active .text-muted{
  color:var(--s-ink-muted)!important;
}

/* The primary button's orange arrives as a background-image gradient, so
   setting background-color alone leaves it orange. */
html body .btn-primary,
html body .btn-primary.case-btn,
html body #openNewPatientBtn{
  background-color:var(--s-action-bg)!important;
  background-image:none!important;
  border-color:var(--s-action-bg)!important;
  color:var(--s-action-ink)!important;
}
html body .btn-primary:hover,
html body #openNewPatientBtn:hover{
  background-color:var(--s-action-bg-hover)!important;
  background-image:none!important;
  border-color:var(--s-action-bg-hover)!important;
}
/* Secondary actions were green-on-white next to an orange fill: two colour
   languages for two buttons sitting side by side. */
html body .btn-outline-primary,
html body .btn-outline-primary.case-btn,
html body #oldPatientManagerBtn{
  background:var(--s-bg-surface)!important;
  background-image:none!important;
  border-color:var(--s-line-strong)!important;
  color:var(--s-ink-body)!important;
}
html body .btn-outline-primary:hover,
html body #oldPatientManagerBtn:hover{
  background:var(--s-action-quiet-bg)!important;
  border-color:var(--s-line-brand)!important;
  color:var(--s-ink-brand)!important;
}

/* The Approval pill is position:fixed at the bottom-left, directly on top of
   the patient list, where it covered a patient's name. Nothing is anchored to
   the bottom-right, so it moves there. */
html body #siyaApprovalFloat{
  left:auto!important;
  right:var(--s-sp-5)!important;
  bottom:var(--s-sp-5)!important;
}

/* ---------------------------------------------------------------------
   10. THE TWO COLOURS BEHIND MOST OF THE CONTRAST FAILURES

   Every remaining AA failure on billing, braces and appointments traced to
   one of two hardcoded values:

     var(--s-ink-muted)  the old muted grey. 4.76:1 on pure white, which passes, but
              4.04-4.34:1 on any of the tinted card backgrounds this app
              uses everywhere - so it failed wherever it was actually used.
     var(--s-danger-600)  Bootstrap's default danger red. 4.04:1 on the lavender panels.

   Both are replaced by tokens that hold up on every surface in the system.
   --------------------------------------------------------------------- */
html body .text-muted,
html body .muted,
html body .form-label,
html body .av2-page-subtitle,
html body .field-unit,
html body .patient-dark-empty,
html body .series-time,
html body .abbr-mini,
html body .count-select-hint,
html body .align-control-note{
  color:var(--s-ink-muted)!important;
}
html body .text-danger,
html body .danger-text,
html body .aligner-danger{color:var(--s-danger-600)!important;}
html body .text-success{color:var(--s-ok-600)!important;}
html body .text-warning{color:var(--s-warn-600)!important;}
html body .text-primary{color:var(--s-ink-brand)!important;}

/* A badge whose text was white on a var(--s-bg-app) surface: 1.05:1, unreadable. */
html body .braces-section-badge{
  background:var(--s-action-quiet-bg)!important;
  color:var(--s-action-quiet-ink)!important;
  border:1px solid var(--s-line-brand)!important;
  border-radius:var(--s-r-full)!important;
  font-weight:var(--s-fw-semibold)!important;
}

/* ---------------------------------------------------------------------
   11. PRINT — paper is always white

       The token ramps are reset for print in siya_tokens.css. This forces the
       page itself, because eight stylesheets set print-color-adjust:exact and
       will happily commit a dark background to paper.
   --------------------------------------------------------------------- */
@media print{
  html,body{background:var(--s-bg-surface)!important;color:var(--s-ink-strong)!important;}
  /* The bottom gutter exists to keep one floating pill off the patient list.
     It has no business adding 64px to every printed page. */
  body{padding-bottom:0!important;}
}

/* ---------------------------------------------------------------------
   12. THE DISPLAY CONTROL (density)
       Theme and density are settings, so they need somewhere to be set.
   --------------------------------------------------------------------- */
.siya-appearance{position:relative;display:inline-flex;}
.siya-appearance.floating{position:fixed;right:var(--s-sp-4);top:var(--s-sp-4);z-index:2147483000;}
.siya-appearance.in-header{margin-left:var(--s-sp-3);}
.siya-appearance-btn{
  display:inline-flex;align-items:center;gap:var(--s-sp-2);
  min-height:var(--s-control-h-sm);
  padding:var(--s-sp-1) var(--s-sp-3);
  font-size:var(--s-fs-12);font-weight:var(--s-fw-semibold);
  color:var(--s-ink-muted);background:var(--s-bg-surface);
  border:1px solid var(--s-line-strong);border-radius:var(--s-r-full);
  cursor:pointer;line-height:1;
}
.siya-appearance-btn:hover{color:var(--s-ink-brand);border-color:var(--s-line-brand);}
.siya-appearance-btn:focus-visible{outline:2px solid transparent;box-shadow:var(--s-focus-ring);}
.siya-appearance-menu{
  position:absolute;right:0;top:calc(100% + var(--s-sp-2));min-width:230px;
  background:var(--s-bg-surface);border:1px solid var(--s-line-default);
  border-radius:var(--s-r-lg);box-shadow:var(--s-sh-3);
  padding:var(--s-sp-2);z-index:2147483000;
}
.siya-appearance-group{
  font-size:var(--s-fs-11);font-weight:var(--s-fw-semibold);
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--s-ink-muted);padding:var(--s-sp-2) var(--s-sp-2) var(--s-sp-1);
}
.siya-appearance-opt{
  display:block;width:100%;text-align:left;
  padding:var(--s-sp-2) var(--s-sp-3);
  border:1px solid transparent;border-radius:var(--s-r-sm);
  background:transparent;color:var(--s-ink-body);cursor:pointer;
}
.siya-appearance-opt b{display:block;font-size:var(--s-fs-13);font-weight:var(--s-fw-semibold);}
.siya-appearance-opt small{display:block;font-size:var(--s-fs-11);color:var(--s-ink-muted);margin-top:2px;}
.siya-appearance-opt:hover{background:var(--s-bg-hover);}
.siya-appearance-opt.is-on{
  background:var(--s-bg-selected);border-color:var(--s-line-brand);
}
.siya-appearance-opt.is-on b{color:var(--s-ink-brand);}
.siya-appearance-opt:focus-visible{outline:2px solid transparent;box-shadow:var(--s-focus-ring);}
@media print{.siya-appearance{display:none!important;}}

/* ---------------------------------------------------------------------
   13. PROCEDURE IMAGE PICKER
       One box per procedure: a switch for whether its images go on bills
       and receipts, and a Print tick per image. Shared by billing and the
       chart page, so both look and behave the same.
   --------------------------------------------------------------------- */
.ppi-modal .modal-header,
html body #imageModal .modal-header{background:var(--s-bg-surface)!important;background-image:none!important;
  color:var(--s-ink-strong)!important;border-bottom:1px solid var(--s-line-default)!important;align-items:flex-start;}
.ppi-modal .modal-title{font-size:var(--s-fs-18);font-weight:var(--s-fw-bold);color:var(--s-ink-strong);margin:0;}
.ppi-sub{font-size:var(--s-fs-13);color:var(--s-ink-muted);margin-top:2px;}
.ppi-upload{display:flex;gap:var(--s-sp-2);align-items:center;margin-bottom:var(--s-sp-4);
  padding:var(--s-sp-3);background:var(--s-bg-sunken);border:1px dashed var(--s-line-strong);border-radius:var(--s-r-md);}
.ppi-upload .form-control{flex:1;min-width:0;}
.ppi-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-sp-3);
  padding:var(--s-sp-3) var(--s-sp-4);border:1px solid var(--s-line-default);border-radius:var(--s-r-md);
  background:var(--s-bg-surface);margin-bottom:var(--s-sp-3);}
.ppi-switch{display:flex;gap:var(--s-sp-3);align-items:flex-start;cursor:pointer;margin:0;}
.ppi-switch input{width:18px;height:18px;margin-top:2px;accent-color:var(--s-action-bg);flex:none;}
.ppi-switch b{display:block;font-size:var(--s-fs-14);font-weight:var(--s-fw-semibold);color:var(--s-ink-strong);}
.ppi-switch small{display:block;font-size:var(--s-fs-12);color:var(--s-ink-muted);margin-top:2px;}
.ppi-status{font-size:var(--s-fs-12);color:var(--s-ink-muted);white-space:nowrap;}
.ppi-status.is-ok{color:var(--s-ok-600);}
.ppi-status.is-ok::before{content:"\2713  ";}
.ppi-status.is-err{color:var(--s-danger-600);}
.ppi-tools{display:flex;gap:var(--s-sp-2);align-items:center;margin-bottom:var(--s-sp-3);}
.ppi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s-sp-3);}
.ppi-grid.is-off,.ppi-tools.is-off{opacity:.45;}
.ppi-card{position:relative;margin:0;border:1px solid var(--s-line-default);border-radius:var(--s-r-md);
  overflow:hidden;background:var(--s-bg-surface);transition:border-color var(--s-dur-fast) var(--s-ease),box-shadow var(--s-dur-fast) var(--s-ease);}
.ppi-card.is-on{border-color:var(--s-line-brand);box-shadow:0 0 0 1px var(--s-line-brand);}
.ppi-card img{display:block;width:100%;height:130px;object-fit:cover;background:var(--s-bg-sunken);cursor:zoom-in;}
.ppi-card figcaption{display:flex;justify-content:space-between;align-items:center;gap:var(--s-sp-2);
  padding:var(--s-sp-2) var(--s-sp-3);font-size:var(--s-fs-12);color:var(--s-ink-muted);}
.ppi-print{display:inline-flex;gap:6px;align-items:center;margin:0;font-weight:var(--s-fw-semibold);color:var(--s-ink-body);cursor:pointer;}
.ppi-print input{accent-color:var(--s-action-bg);width:16px;height:16px;}
.ppi-del{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:var(--s-r-full);border:0;
  background:rgba(15,23,42,.62);color:var(--s-ink-on-accent);font-size:16px;line-height:26px;padding:0;cursor:pointer;
  opacity:0;transition:opacity var(--s-dur-fast) var(--s-ease);}
.ppi-card:hover .ppi-del,.ppi-del:focus-visible{opacity:1;}
.ppi-del:focus-visible{outline:2px solid transparent;box-shadow:var(--s-focus-ring);}
@media (hover:none){.ppi-del{opacity:1;}}
.ppi-empty,.ppi-loading{padding:var(--s-sp-6);text-align:center;color:var(--s-ink-muted);font-size:var(--s-fs-13);
  border:1px dashed var(--s-line-strong);border-radius:var(--s-r-md);}
[data-density="chairside"] .ppi-card img{height:160px;}
[data-density="chairside"] .ppi-switch input,[data-density="chairside"] .ppi-print input{width:22px;height:22px;}
/* the chart page's per-procedure list inside the print dialog */
.ppi-chart-list{display:flex;flex-direction:column;gap:var(--s-sp-2);margin-top:var(--s-sp-2);}
.ppi-chart-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-sp-3);
  padding:var(--s-sp-2) var(--s-sp-3);border:1px solid var(--s-line-default);border-radius:var(--s-r-md);background:var(--s-bg-surface);}
.ppi-chart-row.is-off{background:var(--s-bg-sunken);}
.ppi-chart-name b{display:block;font-size:var(--s-fs-13);font-weight:var(--s-fw-semibold);color:var(--s-ink-strong);}
.ppi-chart-name small{display:block;font-size:var(--s-fs-12);color:var(--s-ink-muted);}

/* ---------------------------------------------------------------------
   14. BEFORE & LATEST VIEWER (braces)
       Photos are judged against a quiet neutral, not a white card: a pure
       white surround makes a pale clinical photo look washed out.
   --------------------------------------------------------------------- */
.bcv-modal .modal-content{border:0;border-radius:var(--s-r-xl);overflow:hidden;}
.bcv-modal .modal-header{background:var(--s-bg-surface);border-bottom:1px solid var(--s-line-default);gap:var(--s-sp-3);align-items:flex-start;flex-wrap:wrap;}
.bcv-modal .modal-title{font-size:var(--s-fs-18);font-weight:var(--s-fw-bold);color:var(--s-ink-strong);margin:0;}
.bcv-sub{font-size:var(--s-fs-13);color:var(--s-ink-muted);margin-top:2px;}
.bcv-head-actions{display:flex;gap:var(--s-sp-2);align-items:center;margin-left:auto;}
.bcv-mode{display:inline-flex;border:1px solid var(--s-line-strong);border-radius:var(--s-r-full);padding:2px;background:var(--s-bg-sunken);}
.bcv-mode button{border:0;background:transparent;padding:4px 12px;border-radius:var(--s-r-full);font-size:var(--s-fs-13);font-weight:var(--s-fw-medium);color:var(--s-ink-muted);cursor:pointer;}
.bcv-mode button[aria-selected="true"]{background:var(--s-bg-surface);color:var(--s-ink-brand);font-weight:var(--s-fw-semibold);box-shadow:var(--s-sh-1);}
.bcv-modal .modal-body{background:var(--s-bg-sunken);}
.bcv-views{display:flex;gap:var(--s-sp-2);flex-wrap:wrap;margin-bottom:var(--s-sp-3);}
.bcv-views button{border:1px solid var(--s-line-default);background:var(--s-bg-surface);color:var(--s-ink-body);border-radius:var(--s-r-full);
  padding:5px 12px;font-size:var(--s-fs-13);font-weight:var(--s-fw-medium);cursor:pointer;display:inline-flex;gap:6px;align-items:center;}
.bcv-views button small{font-size:var(--s-fs-11);color:var(--s-ink-muted);background:var(--s-bg-sunken);border-radius:var(--s-r-full);padding:0 6px;}
.bcv-views button.is-on{border-color:var(--s-line-brand);background:var(--s-bg-selected);color:var(--s-ink-brand);font-weight:var(--s-fw-semibold);}
.bcv-side{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-sp-3);}
.bcv-fig{margin:0;background:var(--s-bg-surface);border:1px solid var(--s-line-default);border-radius:var(--s-r-lg);overflow:hidden;}
.bcv-img{height:min(58vh,520px);display:flex;align-items:center;justify-content:center;background:var(--s-surface-inverse-hover);}
.bcv-img img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.bcv-fig figcaption{display:flex;justify-content:space-between;align-items:center;gap:var(--s-sp-2);padding:var(--s-sp-2) var(--s-sp-3);font-size:var(--s-fs-13);color:var(--s-ink-muted);}
.bcv-fig figcaption b{color:var(--s-ink-strong);font-weight:var(--s-fw-semibold);}
.bcv-tag{font-style:normal;font-size:var(--s-fs-11);font-weight:var(--s-fw-semibold);padding:1px 8px;border-radius:var(--s-r-full);margin-left:6px;}
.bcv-tag.is-pre{background:var(--s-bg-sunken);color:var(--s-ink-muted);}
.bcv-tag.is-progress{background:var(--s-info-50);color:var(--s-info-700);}
.bcv-tag.is-post{background:var(--s-ok-50);color:var(--s-ok-700);}
.bcv-slide{position:relative;}
.bcv-nav{position:absolute;top:calc(50% - 40px);width:44px;height:44px;border-radius:var(--s-r-full);border:0;z-index:2;
  background:rgba(255,255,255,.9);color:var(--s-ink-strong);font-size:28px;line-height:40px;cursor:pointer;box-shadow:var(--s-sh-2);}
.bcv-nav.prev{left:var(--s-sp-3);} .bcv-nav.next{right:var(--s-sp-3);}
.bcv-nav:focus-visible,.bcv-dots button:focus-visible,.bcv-views button:focus-visible,.bcv-mode button:focus-visible{outline:2px solid transparent;box-shadow:var(--s-focus-ring);}
.bcv-controls{display:flex;align-items:center;gap:var(--s-sp-3);margin-top:var(--s-sp-3);}
.bcv-dots{display:flex;gap:6px;flex-wrap:wrap;}
.bcv-dots button{width:12px;height:12px;border-radius:var(--s-r-full);border:2px solid var(--s-line-strong);background:var(--s-bg-surface);padding:0;cursor:pointer;}
.bcv-dots button.is-pre{border-color:var(--s-ink-subtle);}
.bcv-dots button.is-progress{border-color:var(--s-info-600);}
.bcv-dots button.is-post{border-color:var(--s-ok-600);}
.bcv-dots button.is-on{background:var(--s-ink-strong);border-color:var(--s-ink-strong);transform:scale(1.2);}
.bcv-hint{margin-left:auto;font-size:var(--s-fs-12);color:var(--s-ink-muted);}
.bcv-empty{padding:var(--s-sp-10) var(--s-sp-6);text-align:center;color:var(--s-ink-muted);background:var(--s-bg-surface);border:1px dashed var(--s-line-strong);border-radius:var(--s-r-lg);}
.bcv-empty.is-err{color:var(--s-danger-600);}
@media (max-width:760px){.bcv-side{grid-template-columns:1fr}.bcv-img{height:38vh}.bcv-hint{display:none}}
[data-density="chairside"] .bcv-nav{width:56px;height:56px;font-size:34px;line-height:52px;}

/* the braces tool strip, reduced to three controls */
.braces-quick-tool-strip .braces-print-menu .dropdown-menu{min-width:280px;padding:var(--s-sp-2);border-radius:var(--s-r-lg);border:1px solid var(--s-line-default);box-shadow:var(--s-sh-3);}
.braces-print-menu .dropdown-header{font-size:var(--s-fs-11);text-transform:uppercase;letter-spacing:.05em;color:var(--s-ink-muted);font-weight:var(--s-fw-semibold);padding:var(--s-sp-2) var(--s-sp-3) var(--s-sp-1);}
.braces-print-menu .dropdown-item{border-radius:var(--s-r-sm);padding:var(--s-sp-2) var(--s-sp-3);white-space:normal;}
.braces-print-menu .dropdown-item b{display:block;font-weight:var(--s-fw-semibold);color:var(--s-ink-strong);font-size:var(--s-fs-13);}
.braces-print-menu .dropdown-item small{display:block;color:var(--s-ink-muted);font-size:var(--s-fs-12);}
.braces-print-menu .dropdown-item:hover,.braces-print-menu .dropdown-item:focus{background:var(--s-bg-hover);}
/* The braces page gives every button a minimum height and the modal header a
   tinted gradient; both have to be out-ranked by ID for the viewer. */
html body #bracesCompareModal .modal-header{background:var(--s-bg-surface)!important;background-image:none!important;color:var(--s-ink-strong)!important;}
html body #bracesCompareModal .bcv-dots button{width:12px!important;height:12px!important;min-height:0!important;min-width:0!important;
  padding:0!important;line-height:0!important;flex:none!important;border-radius:var(--s-r-full)!important;}
[data-density="chairside"] #bracesCompareModal .bcv-dots button{width:18px!important;height:18px!important;}
/* Legacy rules turn .btn-close white for dark headers; on a white header that
   makes the only visible way out of the dialog disappear. */
html body #bracesCompareModal .btn-close,
html body #siyaPpiModal .btn-close,
html body #imageModal .btn-close{filter:none!important;opacity:.7!important;background-color:transparent!important;}
html body #bracesCompareModal .btn-close:hover,
html body #siyaPpiModal .btn-close:hover,
html body #imageModal .btn-close:hover{opacity:1!important;}