/* --- reception-voice.css --- */
.rvoice {color:var(--ink,#213632);border-top:1px solid var(--line,#dbe3df);padding:20px 0;max-width:540px}
.rvoice header,.rvoice footer {display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rvoice header {justify-content:space-between;font-size:11px;letter-spacing:.08em;color:var(--muted,#667570)}
.rvoice h3 {font-size:23px;line-height:1.25;letter-spacing:-.025em;font-weight:600;margin:16px 0 8px}
.rvoice p {font-size:14px;line-height:1.55;margin:10px 0}
.rvoice .rvoice-current {display:flex;align-items:baseline;justify-content:space-between;border-block:1px solid var(--line,#dbe3df);padding:14px 0;margin:18px 0;gap:16px}
.rvoice-current span,.rvoice .rvoice-boundary {font-size:12px;color:var(--muted,#667570)}
.rvoice label {display:grid;gap:8px;font-size:13px;font-weight:600}
.rvoice select {width:100%;min-height:44px;border:1px solid var(--line,#dbe3df);border-radius:8px;padding:10px 12px;background:var(--paper,#fff);color:inherit;font:inherit}
.rvoice .rvoice-description {margin-top:7px;color:var(--muted,#667570);min-height:22px}
.rvoice footer {margin:18px 0 12px}
.rvoice button {min-height:40px;border:1px solid var(--line,#dbe3df);border-radius:8px;padding:8px 14px;background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer}
.rvoice button.is-primary {background:var(--accent,#245e4f);color:#fff;border-color:transparent}
.rvoice header button {border:0;font-size:12px;padding:6px}
.rvoice button:disabled {opacity:.5;cursor:default}
.rvoice [role=alert] {color:#88392c}
.rvoice-next {border-top:1px solid var(--line,#dbe3df);margin-top:22px;padding-top:18px}
.rvoice-next h4 {font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
.rvoice .rvoice-next p {margin:6px 0 12px}
.rvoice-next button {min-height:44px}
.rvoice :is(button,select):focus-visible {outline:2px solid var(--accent,#245e4f);outline-offset:3px}
#receptionVoiceEngine {display:block;max-width:100%;min-height:44px;margin:8px 0 16px;border:1px solid var(--line,#dbe3df);border-radius:8px;background:#fff;padding:10px 12px;color:inherit;font:inherit;font-size:14px}
.reception-customize-section > * {min-width:0}
.reception-voice-picker select {max-width:100%}
.reception-phone-state {border-left:2px solid var(--line,#dbe3df);padding:2px 0 2px 12px;margin:18px 0;text-align:left}
.reception-phone-state strong {display:block;font-size:13px;font-weight:600;line-height:1.45}
.reception-phone-state p,.rvoice .reception-phone-state p {font-size:12px;line-height:1.5;color:var(--muted,#667570);margin:5px 0 0;overflow-wrap:anywhere}
.reception-phone-state.is-ready {border-color:var(--accent,#245e4f)}
.reception-phone-state.is-attention {border-color:#b58342}
@media (prefers-reduced-motion:no-preference){.rvoice button {transition:background-color .14s ease,border-color .14s ease}.rvoice button:not(:disabled):hover {border-color:var(--accent,#245e4f)}}

/* --- styles.css --- */
:root{--ink:#17231e;--muted:#68736d;--paper:#f5f7f3;--card:#fff;--line:#dce3dc;--green:#1b6b4b;--green-soft:#e5f1e9;--amber:#a35f10;--amber-soft:#f9ecd6;--red:#9c4037;--shadow:0 14px 40px rgba(31,51,40,.07);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;background:var(--paper);overscroll-behavior-y:none}.topbar{height:calc(64px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) max(28px,env(safe-area-inset-right)) 0 max(28px,env(safe-area-inset-left));background:rgba(245,247,243,.93);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}.topbar-actions{display:flex;align-items:center;gap:14px}.install-app{border:1px solid var(--line);background:var(--card);color:var(--green);font:inherit;font-size:12px;font-weight:750;padding:7px 10px;border-radius:9px;cursor:pointer}.brand{display:flex;align-items:center;gap:10px;font-weight:750;letter-spacing:-.02em}.brand-mark{display:grid;place-items:center;width:32px;height:32px;background:var(--ink);color:white;border-radius:10px}.sync-state{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}.status-dot{width:8px;height:8px;border-radius:50%;background:#38a169;box-shadow:0 0 0 4px #dcefe3}.nav{position:fixed;left:0;top:calc(64px + env(safe-area-inset-top));bottom:0;width:208px;padding:28px 16px;background:var(--card);border-right:1px solid var(--line)}.nav-item{width:100%;min-height:44px;text-align:left;padding:12px 14px;border:0;border-radius:10px;background:none;color:var(--muted);font:inherit;font-weight:620;cursor:pointer;margin-bottom:5px;touch-action:manipulation}.nav-item.active,.nav-item:hover{background:var(--green-soft);color:var(--green)}.shell{margin-left:208px;padding:44px clamp(24px,5vw,72px) 72px;max-width:1600px}.hero{margin-bottom:30px}.eyebrow{color:var(--green);font-size:12px;font-weight:800;letter-spacing:.14em;margin:0 0 10px}.hero h1{font-family:Georgia,serif;font-size:clamp(32px,4vw,50px);line-height:1.04;letter-spacing:-.035em;margin:0 0 12px;font-weight:500}.hero>p:last-child{color:var(--muted);margin:0}.section-title{display:flex;align-items:end;justify-content:space-between;margin:34px 0 14px}.section-title h2{font-size:18px;margin:0}.section-title span{font-size:13px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.card{grid-column:span 4;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);min-height:144px}.card.wide{grid-column:span 6}.card.full{grid-column:1/-1}.card.clickable{cursor:pointer;transition:transform .16s,border-color .16s}.card.clickable:hover{transform:translateY(-2px);border-color:#9fb5a7}.card-label{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;font-weight:650}.badge{font-size:11px;padding:4px 7px;border-radius:999px;background:var(--green-soft);color:var(--green)}.metric{font-size:34px;letter-spacing:-.04em;font-weight:760;margin:18px 0 4px}.metric.money:before{content:"$";font-size:.65em;vertical-align:8px;margin-right:2px}.detail{font-size:13px;color:var(--muted);line-height:1.5}.alert-card{background:linear-gradient(140deg,#fff,#fbfcf8)}.alert-card.priority{border-top:3px solid var(--amber)}.top-list{list-style:none;margin:12px 0 0;padding:0}.top-list li{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line);font-size:13px}.provider-table{width:100%;border-collapse:collapse;margin-top:10px}.provider-table th,.provider-table td{text-align:left;padding:10px 4px;border-top:1px solid var(--line);font-size:13px}.provider-table th{color:var(--muted);font-weight:600}.provider-table td:last-child,.provider-table th:last-child{text-align:right}.loading-card{background:white;border:1px solid var(--line);padding:28px;border-radius:16px;color:var(--muted)}.drawer{margin:0 0 0 auto;height:100%;width:min(500px,100%);max-height:none;border:0;border-left:1px solid var(--line);padding:36px;box-shadow:-20px 0 60px rgba(0,0,0,.12)}.drawer::backdrop{background:rgba(17,29,23,.3)}.drawer-close{position:absolute;right:20px;top:16px;border:0;background:none;font-size:28px;cursor:pointer}.patient-row{padding:14px 0;border-bottom:1px solid var(--line)}.patient-row strong{display:block}.patient-row span{font-size:13px;color:var(--muted)}.drawer h2{font-family:Georgia,serif;font-size:28px}.empty{padding:40px;text-align:center;color:var(--muted)}@media(max-width:900px){.card,.card.wide{grid-column:span 6}.nav{top:auto;bottom:0;left:0;right:0;width:auto;height:calc(66px + env(safe-area-inset-bottom));display:flex;padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:white;border-top:1px solid var(--line);border-right:0;z-index:8;overflow-x:auto;overscroll-behavior-x:contain}.nav-item{flex:1 0 76px;text-align:center;padding:8px 4px;font-size:11px;margin:0}.shell{margin-left:0;padding:28px max(18px,env(safe-area-inset-right)) calc(90px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}.topbar{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}}@media(max-width:560px){.card,.card.wide{grid-column:1/-1}.topbar{height:calc(58px + env(safe-area-inset-top))}.sync-state{font-size:11px}.brand>span:last-child{display:none}.hero h1{font-size:37px}.metric{font-size:31px}.install-app{font-size:11px;padding:6px 8px}}

.staff-identity{display:grid;text-align:right}.staff-identity strong{font-size:12px}.staff-identity span{color:var(--muted);font-size:10px}.auth-locked .shell{max-width:none;margin-left:0;padding:0}.auth-locked .sync-state .status-dot{background:var(--muted);box-shadow:0 0 0 4px #e6e9e6}.login-shell{display:grid;place-items:center;min-height:calc(100dvh - 65px);padding:32px}.login-card{display:grid;gap:16px;width:min(460px,100%);padding:32px;border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:var(--shadow)}.login-heading{display:flex;align-items:flex-start;gap:14px;margin-bottom:4px}.login-heading .brand-mark{flex:0 0 42px;width:42px;height:42px;border-radius:13px}.login-heading h1{margin:0 0 8px;font-family:Georgia,serif;font-size:38px;font-weight:500;letter-spacing:-.03em}.login-heading p:last-child,.staff-form>div p,.login-card>small{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.login-card label,.staff-form label,.rule-builder label{display:grid;gap:7px;color:var(--muted);font-size:12px;font-weight:700}.login-card input,.staff-form input,.staff-form select,.rule-builder textarea,.rule-builder select{width:100%;min-height:43px;border:1px solid var(--line);border-radius:9px;padding:10px 11px;color:var(--ink);background:#fff;font:inherit}.login-card .primary-btn{min-height:45px}.form-error{min-height:18px;margin:0;color:var(--red);font-size:12px}.today-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,.5fr);align-items:end;gap:24px;padding:28px;border:1px solid #b9ddd0;border-radius:22px;background:linear-gradient(135deg,#eef8f3,#fff)}.today-hero h1{max-width:760px}.today-hero>div>p:last-child{margin:0;color:var(--muted)}.clock-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff}.clock-card>div{display:grid;gap:4px}.clock-card span{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.12em}.clock-card strong{font-size:23px;font-variant-numeric:tabular-nums}.clock-card small{color:var(--muted);font-size:11px}.clock-card.is-running{border-color:#a8d0b7;box-shadow:0 0 0 3px rgba(27,107,75,.06)}.worklist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.worklist-card{min-height:180px;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.worklist-card header{display:flex;align-items:center;justify-content:space-between;gap:12px}.worklist-card header>strong{font-size:12px}.worklist-card h3{margin:24px 0 8px;font-size:18px}.worklist-card p{margin:0;color:#445048;font-size:13px;line-height:1.55}.worklist-card small{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.5}.today-boundary{margin:20px 0 0;color:var(--muted);font-size:12px;text-align:center}.operation-notice{padding:12px 15px;border:1px solid #b9ddd0;border-radius:12px;color:var(--green);background:var(--green-soft);font-size:13px}.staff-layout{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);align-items:start;gap:24px}.staff-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}.staff-form>div:first-child,.staff-form>button,.staff-form>.form-error{grid-column:1/-1}.staff-form h2{margin:0 0 6px;font-family:Georgia,serif;font-size:27px;font-weight:500}.staff-add{position:sticky;top:88px}.staff-roster .section-title{margin-top:0}.staff-card{margin-bottom:10px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow)}.staff-card.is-inactive{opacity:.72}.staff-card summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px;cursor:pointer;list-style:none}.staff-card summary::-webkit-details-marker{display:none}.staff-card summary>div{display:grid;gap:4px}.staff-card summary>div:first-child span,.staff-card summary small{color:var(--muted);font-size:11px}.staff-card summary>div:last-child{grid-template-columns:auto auto;align-items:center;text-align:right}.staff-card summary>div:last-child small{grid-column:1/-1}.staff-card[open] summary{border-bottom:1px solid var(--line)}.edit-staff-form{margin:0;border:0;border-radius:0;box-shadow:none}.staff-form-actions{display:flex;gap:8px;grid-column:1/-1}.staff-form-actions>*{flex:1}.rule-builder{display:grid;grid-template-columns:minmax(0,1fr) 220px auto;align-items:end;gap:14px;padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}.rule-builder>div,.rule-builder>.form-error{grid-column:1/-1}.rule-builder h2{margin:0;font-family:Georgia,serif;font-size:28px;font-weight:500}.rule-builder textarea{resize:vertical;line-height:1.5}.translated-rule-result{display:grid;grid-template-columns:minmax(0,1fr) 1fr;gap:24px;margin-top:16px;padding:24px;border-radius:18px;color:#fff;background:linear-gradient(130deg,#17231e,#244a39)}.translated-rule-result h2{margin:14px 0 8px;font-family:Georgia,serif;font-size:30px;font-weight:500}.translated-rule-result p{margin:0;color:#cfddd5;font-size:13px}.translated-rule-result dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}.translated-rule-result dl div{padding:14px;border-radius:12px;background:rgba(255,255,255,.08)}.translated-rule-result dt{color:#bcd1c4;font-size:10px;text-transform:uppercase}.translated-rule-result dd{margin:7px 0 0;font-size:15px;font-weight:750;text-transform:capitalize}.saved-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.saved-rules article{padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.saved-rules header,.saved-rules footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.saved-rules header small,.saved-rules p,.saved-rules footer span{color:var(--muted);font-size:12px}.saved-rules h3{margin:20px 0 8px}.saved-rules p{min-height:38px;line-height:1.5}.saved-rules footer{margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}.payroll-summary .card{grid-column:span 4}.payroll-table-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}.payroll-table-scroll{overflow-x:auto;padding:8px 20px}.payroll-table-card table{min-width:680px}.payroll-table-card td small{display:block;color:var(--muted)}.payroll-table-card tr.is-inactive{opacity:.6}.payroll-table-card footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border-top:1px solid var(--line);background:#fbfcfa}.payroll-table-card footer>div{display:grid;gap:3px}.payroll-table-card footer span{font-size:24px;font-weight:760}.payroll-table-card>p{margin:0;padding:0 20px 18px}.operation-notice+ .staff-layout{margin-top:16px}

.suggested-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:24px}.suggested-rule-card{padding:20px;border:1px solid #b9ddd0;border-radius:16px;background:linear-gradient(145deg,#f2faf6,#fff);box-shadow:var(--shadow)}.suggested-rule-card header,.suggested-rule-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.suggested-rule-card header strong{font-size:12px}.suggested-rule-card h3{margin:20px 0 8px}.suggested-rule-card p,.suggested-rule-card small{color:var(--muted);font-size:12px;line-height:1.5}.suggested-rule-card small{display:block;min-height:36px}.suggested-rule-card footer{justify-content:flex-start;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}.suggested-rule-card .form-error{margin-top:8px;min-height:0;color:var(--red)}

@media(max-width:1100px){.today-hero{grid-template-columns:1fr}.staff-layout{grid-template-columns:1fr}.staff-add{position:static}.rule-builder{grid-template-columns:1fr 220px}.rule-builder button{grid-column:1/-1}.translated-rule-result{grid-template-columns:1fr}.payroll-summary .card{grid-column:span 6}}
@media(max-width:760px){.worklist-grid,.saved-rules,.suggested-rules{grid-template-columns:1fr}.rule-builder{grid-template-columns:1fr}.translated-rule-result dl{grid-template-columns:1fr}.payroll-summary .card{grid-column:1/-1}.staff-identity{display:none}.topbar-actions{gap:8px}.sync-state{display:none}.staff-form{grid-template-columns:1fr}.staff-form>*{grid-column:1/-1}.staff-card summary{align-items:flex-start;flex-direction:column}.staff-card summary>div:last-child{width:100%;text-align:left}.payroll-table-card footer{align-items:stretch;flex-direction:column}.payroll-table-card footer button{width:100%}}
@media(max-width:560px){.login-shell{padding:18px}.login-card{padding:24px}.today-hero{padding:21px}.clock-card{align-items:stretch;flex-direction:column}.clock-card button{width:100%}.worklist-card{min-height:0}.rule-builder{padding:19px}.translated-rule-result{padding:20px}}
.nav-apps{margin-left:auto;opacity:.85}
.apps-picker .apps-group{margin:14px 0}
.apps-picker .apps-group h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.app-tile{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff;cursor:pointer}
.app-tile.is-on{border-color:var(--teal,#19C7B2);background:var(--green-soft,#f2fffa)}
.app-tile.is-pinned{opacity:.7;cursor:default}
.app-tile input{margin-top:3px}
.app-tile strong{display:block;font-size:14px}
.app-tile small{display:block;color:var(--muted);font-size:12px;margin-top:2px;line-height:1.35}
.apps-actions{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.apps-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin:10px 0 4px;background:#fff}
.apps-search input{flex:1;border:0;outline:0;font:inherit;background:none}


/* The demo owner's credentials used to be typed into the login box for
   whoever opened it, which meant a new person had to notice they were signing
   in as somebody else and clear two fields before they could use their own
   account. The fields start empty now; this puts the convenience back for
   anyone testing the demo practice, without putting it in their way. */
.login-demo-fill {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent, #2f6df6);
  text-decoration: underline;
  cursor: pointer;
}

.login-demo-fill:hover,
.login-demo-fill:focus-visible {
  text-decoration: none;
}

/* The first-run shelf offer.
   The home screen starts at one app deliberately -- nobody inherits a shelf
   picked for their job title -- but a single icon with no explanation is its
   own failure. Offered once, never applied on its own, and "Not now" is
   recorded so nobody is asked twice. */
.first-run-shelf {
  border: 1px solid var(--line, #d7dee7);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  margin: 0 0 1.25rem;
  background: var(--surface, #fff);
}

.first-run-heading h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.first-run-heading p { margin: 0 0 0.9rem; color: var(--muted, #566); font-size: 0.9rem; }

.first-run-apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.first-run-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* The apps button while somebody has never chosen. The first-run card cannot
   appear over the Quarterback -- that screen is a conversation -- and a new
   person's only app IS the Quarterback, so the nav carries the offer instead. */
.nav-item.needs-setup {
  font-weight: 600;
  color: var(--accent, #2f6df6);
}

/* How a patient asked to be contacted, on the record that describes them.
   The sequencer has honoured this since it existed and nobody could see it. */
.contact-preference {
  margin: 1rem 0 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line, #d7dee7);
  border-radius: 12px;
}

.contact-preference h3 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.contact-preference-rows { display: grid; gap: 0.45rem; margin: 0.7rem 0; }

.contact-preference-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.contact-preference-row select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line, #d7dee7);
  border-radius: 7px;
  font: inherit;
  min-width: 9rem;
}

.contact-preference-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* --- workflows.css --- */
.stats-strip{display:flex;gap:1px;overflow:auto;background:var(--line);border:1px solid var(--line);border-radius:16px;margin-bottom:26px}.stats-strip>div{min-width:180px;flex:1;background:white;padding:18px;display:flex;gap:12px}.stats-strip strong{font-size:24px}.stats-strip span{font-size:12px;color:var(--muted);text-transform:capitalize}.stats-strip small{display:block;margin-top:4px;color:#8b958f}.queue-actions{display:flex;gap:10px;margin:0 0 14px}.primary-btn,.secondary-btn{border:0;border-radius:10px;padding:11px 16px;font:inherit;font-weight:700;cursor:pointer}.primary-btn{background:var(--green);color:white}.secondary-btn{background:white;border:1px solid var(--line);color:var(--ink)}.queue-list{display:grid;gap:10px}.queue-row{display:grid;grid-template-columns:28px 200px 1fr auto;gap:14px;align-items:center;background:white;border:1px solid var(--line);border-radius:14px;padding:16px}.patient-link{text-align:left;border:0;background:none;cursor:pointer;color:var(--ink)}.patient-link strong,.patient-link span{display:block}.patient-link span{font-size:12px;color:var(--muted);margin-top:4px;text-transform:capitalize}.queue-row p{font-size:13px;line-height:1.5;color:#445048}.row-actions{display:flex;gap:6px}.row-actions button{border:1px solid var(--line);background:white;padding:8px 10px;border-radius:8px;cursor:pointer}.row-actions .approve{background:var(--green-soft);border-color:#bed5c5;color:var(--green);font-weight:700}.rule-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.rule-card{background:white;border:1px solid var(--line);border-radius:14px;padding:18px}.rule-card h3{margin:14px 0 8px}.rule-card p,.rule-card small{color:var(--muted)}.rule-form{margin-top:12px;background:white;border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:10px}.rule-form h3{grid-column:1/-1;margin:0 0 5px}.rule-form input,.rule-form select{border:1px solid var(--line);border-radius:9px;padding:10px;background:white}.timeline-item{border-left:2px solid var(--green-soft);padding:0 0 18px 16px}.timeline-item span{display:block;color:var(--muted);font-size:12px}.timeline-item strong{text-transform:capitalize;font-size:13px}.timeline-item p{margin:5px 0;color:#445048;font-size:13px}@media(max-width:1000px){.queue-row{grid-template-columns:24px 160px 1fr}.row-actions{grid-column:3}.rule-form{grid-template-columns:1fr 1fr}.rule-form .primary-btn{grid-column:1/-1}.rule-grid{grid-template-columns:1fr}}@media(max-width:600px){.queue-row{grid-template-columns:24px 1fr}.queue-row>p,.row-actions{grid-column:2}.row-actions{justify-content:flex-end}.rule-form{grid-template-columns:1fr}.stats-strip>div{min-width:150px}}

/* ---------------------------------------------------------------------------
 * WORK QUEUE (wq-)
 *
 * Appended rather than woven in, and every selector is prefixed, so this block
 * cannot reach a rule another screen depends on. The old .queue-* rules above
 * are left exactly as they were: the Quarterback's queue panel still draws
 * with them.
 * ------------------------------------------------------------------------- */
.wq-nothing{
  display:grid; gap:6px; margin:0 0 20px; padding:16px 18px;
  border:1px solid var(--line,#dce3dc); border-left:3px solid var(--amber,#a35f10);
  border-radius:14px; background:#fff;
}
.wq-nothing>span{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:800; color:var(--amber,#a35f10);
}
.wq-nothing p{ margin:0; font-size:13.5px; line-height:1.55; color:#3a463e }

.wq-checks{ display:grid; gap:12px; margin-bottom:22px }
.wq-check{
  padding:18px; border:1px solid var(--line,#dce3dc); border-radius:16px;
  background:#fff; box-shadow:var(--shadow,0 14px 40px rgba(31,51,40,.07));
}
.wq-check.is-stale{ border-left:3px solid var(--red,#9c4037) }
.wq-check.is-watch{ border-left:3px solid var(--amber,#a35f10) }
.wq-check h3{ margin:0 0 8px; font-size:16px }
.wq-check p{ margin:0; font-size:13.5px; line-height:1.6; color:#445048 }

.wq-crowd{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.wq-crowd-chip{
  display:grid; gap:2px; text-align:left; cursor:pointer; font:inherit;
  padding:8px 11px; border:1px solid var(--line,#dce3dc); border-radius:11px;
  background:#fbfcfa; color:var(--ink,#17231e); min-height:44px;
}
.wq-crowd-chip strong{ font-size:13px }
.wq-crowd-chip span{ font-size:11px; color:var(--muted,#68736d) }

.wq-filter{ display:flex; align-items:center; margin-left:auto }
.wq-filter input{
  min-height:42px; min-width:min(260px,60vw); font:inherit; padding:9px 12px;
  border:1px solid var(--line,#dce3dc); border-radius:10px; background:#fff;
}
.wq-filter .sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.wq-kind{ margin:0 0 30px }
.wq-kind-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:10px;
}
.wq-kind-head h2{ margin:0; font-size:19px }
.wq-kind-head p{ margin:5px 0 0; font-size:13px; color:var(--muted,#68736d) }
.wq-kind-count{ text-align:right }
.wq-kind-count strong{ display:block; font-size:26px; letter-spacing:-.03em; font-weight:760 }
.wq-kind-count span{ font-size:12px; color:var(--muted,#68736d) }
.wq-kind-judgement{ margin:0 0 8px; font-size:13px; line-height:1.6; color:#445048 }
.wq-kind-nothing,
.wq-kind-learned{
  display:grid; gap:3px; margin:0 0 12px; font-size:12.5px; line-height:1.55;
  color:var(--muted,#68736d);
}
.wq-kind-nothing>span,
.wq-kind-learned>span{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:800;
  color:var(--green,#1b6b4b);
}

.wq-cards{ display:grid; gap:12px }
/* display:grid beats the hidden attribute, which is how the last version of
 * this screen "collapsed" rows that were still on the page. */
.wq-cards[hidden]{ display:none }
.wq-card{
  padding:18px; border:1px solid var(--line,#dce3dc); border-radius:16px;
  background:#fff; box-shadow:var(--shadow,0 14px 40px rgba(31,51,40,.07));
  /* A grid item defaults to min-width:auto, so one unbreakable token inside a
   * card widens the whole track. The intake messages carry a signed link with
   * no spaces in it, and at 375px that pushed the page to 2,442px wide. */
  min-width:0;
}
.wq-card *{ min-width:0 }
.wq-card [hidden]{ display:none }
.wq-more{
  margin-top:10px; min-height:44px; width:100%; font:inherit; cursor:pointer;
  padding:11px 14px; border:1px dashed var(--line,#dce3dc); border-radius:12px;
  background:#fff; color:var(--green,#1b6b4b); font-weight:700;
}
.wq-card.is-stale{ background:#fdfaf9; border-color:#e4cdc9 }
.wq-card[data-done="1"]{ opacity:.55 }
.wq-card-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:14px; flex-wrap:wrap;
}
.wq-card-head strong{ display:block; font-size:15px }
.wq-card-head span{ display:block; margin-top:3px; font-size:12.5px; color:var(--muted,#68736d) }
.wq-badges{ display:flex; flex-wrap:wrap; gap:6px }
.wq-badge{
  display:inline-block; font-size:11px; padding:4px 8px; border-radius:999px;
  background:var(--green-soft,#e5f1e9); color:var(--green,#1b6b4b);
  border:0; font-family:inherit;
}
button.wq-badge{ cursor:pointer; min-height:28px }
.wq-badge.is-stale{ background:#f7e4e1; color:var(--red,#9c4037) }
.wq-badge.is-watch{ background:var(--amber-soft,#f9ecd6); color:var(--amber,#a35f10) }

.wq-card-body{
  margin:14px 0 0; padding:14px; border-radius:12px;
  background:var(--green-soft,#e5f1e9); color:#31413a;
  font-size:13.5px; line-height:1.6; white-space:pre-wrap;
  /* The message is shown verbatim, links and all, so the one thing that cannot
   * happen is a link deciding the page width. */
  overflow-wrap:anywhere;
}
.wq-card.is-stale .wq-card-body{ background:#f7ecea }
.wq-card-why{ display:grid; gap:2px; margin:10px 0 0; font-size:12.5px; color:var(--muted,#68736d) }
.wq-card-why>span{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:800;
  color:var(--green,#1b6b4b);
}
.wq-blocked{
  margin:0; align-self:center; font-size:12.5px; color:var(--red,#9c4037);
  line-height:1.5;
}
.wq-card-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px }
.wq-card-actions button{ min-height:44px }
.wq-card-actions .primary-btn:disabled{ background:#c3d2c8; cursor:not-allowed }

.wq-card-skip{
  display:flex; flex-wrap:wrap; gap:10px; align-items:end;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line,#dce3dc);
}
.wq-reason{ display:grid; gap:4px; font-size:11px; color:var(--muted,#68736d); font-weight:700 }
.wq-reason select{
  min-height:40px; font:inherit; padding:8px 10px; background:#fff;
  border:1px solid var(--line,#dce3dc); border-radius:9px; max-width:min(320px,72vw);
}
.wq-quiet{
  min-height:40px; font:inherit; padding:9px 12px; cursor:pointer;
  border:1px solid var(--line,#dce3dc); border-radius:9px;
  background:#fff; color:var(--muted,#68736d);
}
.wq-quiet:hover:not(:disabled){ color:var(--red,#9c4037); border-color:#dcc4c0 }
.wq-quiet:disabled,
.wq-card-actions .secondary-btn:disabled{ opacity:.45; cursor:not-allowed }

.wq-recipients{ display:grid; gap:8px; margin-top:14px }
.wq-recipients[hidden]{ display:none }
.wq-recipients-note{ margin:0; font-size:12px; color:var(--muted,#68736d) }
.wq-person{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;
  gap:12px; align-items:center; padding:11px 12px;
  border:1px solid var(--line,#dce3dc); border-radius:12px; background:#fbfcfa;
}
.wq-person-facts{ display:flex; flex-wrap:wrap; gap:5px }
.wq-state{ margin:12px 0 0; font-size:12.5px; color:var(--muted,#68736d) }

.wq-empty{ text-align:left; padding:30px }
.wq-empty h2{ margin:0 0 10px; font-family:Georgia,serif; font-size:26px; font-weight:500 }
.wq-empty p{ margin:0 0 8px; font-size:13.5px; line-height:1.6; color:#445048 }

.wq-rules{ margin-top:12px }
.wq-drawer-item{
  margin:0 0 12px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line,#dce3dc); background:#fbfcfa;
}
.wq-drawer-item.is-stale{ border-color:#e4cdc9; background:#fdf7f6 }
.wq-drawer-item>span{
  display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:800; color:var(--muted,#68736d);
}
.wq-drawer-item p{ margin:8px 0 0; font-size:13px; line-height:1.55; white-space:pre-wrap }
.wq-drawer-item small{ display:block; margin-top:8px; color:var(--muted,#68736d); font-size:11.5px }

@media(max-width:760px){
  .wq-kind-head{ align-items:flex-start }
  .wq-kind-count{ text-align:left }
  .wq-filter{ margin-left:0; width:100% }
  .wq-filter input{ width:100%; min-width:0 }
  .wq-person{ grid-template-columns:1fr; }
  .wq-person .row-actions{ justify-content:flex-end }
  .wq-card-actions button,
  .wq-card-skip>*{ flex:1 1 auto }
  .wq-reason select{ max-width:none; width:100% }
}

/* ---------------------------------------------------------------------------
 * Queue — the skip UI, asked once.
 *
 * `.wq-reason` used to live inside `.wq-card-skip` on every card: fifteen
 * copies of one six-option select, measured at about 1,800px of a 7,843px
 * page, including six cards that cannot be approved at all. It is one control
 * in the toolbar now, so it is styled as a strip rather than as a form field
 * stuck to the bottom of a card. `.wq-card-skip` no longer exists in the
 * markup; its rules above are dead and left only because another screen's CSS
 * is not this change's to edit.
 * ------------------------------------------------------------------------- */

.wq-reason{
  display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center;
  margin:0 0 16px; padding:12px 15px;
  border:1px solid var(--line,#dce3dc); border-radius:12px; background:#fbfcfa;
  font-size:12px; font-weight:700; color:var(--muted,#68736d);
}
.wq-reason>span{ font-weight:700 }
.wq-reason select{ min-height:40px; max-width:min(320px,72vw) }

/* The quiet "take these out" sits with the other actions now rather than in a
 * rule-off strip of its own, and is pushed to the far end so it never reads as
 * the next step after Approve. */
.wq-card-actions .wq-quiet{ margin-left:auto }

/* ---------------------------------------------------------------------------
 * The rules that write these — folded.
 *
 * Reference material about how drafts got here, on a screen whose job is
 * deciding what to do with them. Same shape as the staff roster's cards: a
 * title, one line saying what is inside, a chevron.
 * ------------------------------------------------------------------------- */

.wq-rules{
  margin-top:16px; border:1px solid var(--line,#dce3dc); border-radius:15px;
  background:#fff;
}
.wq-rules>summary{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  padding:16px 17px; cursor:pointer; list-style:none;
}
.wq-rules>summary::-webkit-details-marker{ display:none }
.wq-fold-title{ font-family:Georgia,serif; font-size:19px; font-weight:500; color:var(--ink,#17231e) }
.wq-fold-note{ flex:1 1 auto; min-width:0; font-size:12px; color:var(--muted,#68736d) }
.wq-fold-chevron{ margin-left:auto; color:var(--muted,#68736d); transition:transform .16s ease }
.wq-rules[open]>summary{ border-bottom:1px solid var(--line,#dce3dc) }
.wq-rules[open] .wq-fold-chevron{ transform:rotate(180deg) }
.wq-fold-body{ padding:17px }

@media(max-width:760px){
  .wq-reason{ align-items:stretch; flex-direction:column }
  .wq-reason select{ max-width:none; width:100% }
  .wq-card-actions .wq-quiet{ margin-left:0 }
}

/* --- slots.css --- */
.slot-days{display:grid;gap:18px}.slot-day{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}.slot-day>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.slot-day>header strong,.slot-day>header span{display:block}.slot-day>header span{font-size:12px;color:var(--muted);margin-top:3px}.slot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.slot-card{border:1px solid var(--line);border-radius:10px;background:#fbfcfa}.slot-card summary{list-style:none;cursor:pointer;padding:12px}.slot-card summary::-webkit-details-marker{display:none}.slot-card summary span,.slot-card summary strong,.slot-card summary small{display:block}.slot-card summary span{font-size:17px;font-weight:750;color:var(--green)}.slot-card summary strong{font-size:13px;margin:4px 0}.slot-card summary small{color:var(--muted);text-transform:capitalize}.candidate-list{padding:4px 10px 10px;border-top:1px solid var(--line)}.candidate-list>div{display:grid;grid-template-columns:1fr auto;gap:6px;padding:8px 0;border-bottom:1px solid var(--line)}.candidate-list>div:last-child{border-bottom:0}.candidate-list button{border:0;background:none;text-align:left;cursor:pointer;padding:3px}.candidate-list button strong,.candidate-list button small{display:block}.candidate-list button small{color:var(--muted);margin-top:3px}.candidate-list .draft-slot{align-self:center;color:var(--green);font-weight:750}.candidate-list .draft-slot:disabled{color:var(--muted)}@media(max-width:1100px){.slot-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.slot-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:430px){.slot-grid{grid-template-columns:1fr}}

/* --- quarterback.css --- */
.qb-hero {
  padding: 28px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(130deg, #17231e, #244a39);
}

.qb-hero .eyebrow {
  color: #9bd2b3;
}

.qb-hero > p:last-child {
  color: #cfddd5;
}

.quarterback-chat {
  max-width: 980px;
  margin: 24px auto 42px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.quarterback-chat > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 24px 16px;
}

.quarterback-chat h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 500;
}

.chat-privacy {
  max-width: 290px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}

.suggested-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* 18px matches the composer's own margin. It was 24px, so the chips, the
   * launcher below them and the input below that each started on a different
   * left edge. */
  padding: 0 18px 14px;
  scrollbar-width: none;
}

.suggested-questions::-webkit-scrollbar {
  display: none;
}

.suggested-questions button {
  flex: 0 0 auto;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--green);
  background: var(--green-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: min(46dvh, 470px);
  min-height: 330px;
  padding: 22px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* No panel colour.
   *
   * This was #f7f9f6 on a #f5f7f3 page: two shades close enough to be
   * indistinguishable as a material, but different enough to draw a
   * square-cornered rectangle across most of the screen. A tint that faint is
   * not doing any work, and the seam it leaves on all four edges is the only
   * thing it communicates. The bubbles carry their own backgrounds, so the
   * scroll region does not need one. */
  background: transparent;
  scroll-behavior: smooth;
}

.chat-message {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 86%;
}

.chat-message.user {
  align-self: flex-end;
  justify-content: flex-end;
}

.chat-message.assistant {
  align-self: flex-start;
}

.chat-message .brand-mark,
.chat-thinking .brand-mark {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.message-bubble {
  min-width: 64px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 5px;
  background: #fff;
  line-height: 1.55;
}

.chat-message.user .message-bubble {
  border-color: var(--ink);
  border-radius: 16px 16px 5px 16px;
  color: #fff;
  background: var(--ink);
}

.message-bubble p {
  margin: 0 0 8px;
}

.message-bubble p:last-child {
  margin-bottom: 0;
}

.message-bubble h3,
.message-bubble h4,
.message-bubble h5 {
  margin: 0 0 8px;
  font-size: 15px;
}

.message-bubble ol,
.message-bubble ul {
  margin: 7px 0 2px;
  padding-left: 22px;
}

.message-bubble li + li {
  margin-top: 5px;
}

.message-bubble code {
  border-radius: 5px;
  padding: 1px 4px;
  background: var(--green-soft);
  font-size: .92em;
}

.message-bubble small {
  display: block;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.chat-thinking {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px 0;
}

.chat-thinking[hidden] {
  display: none;
}

.chat-thinking > div {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 5px;
  background: #fff;
}

.chat-thinking i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: thinking-bounce 1.2s infinite;
}

.chat-thinking i:nth-child(2) {
  animation-delay: .15s;
}

.chat-thinking i:nth-child(3) {
  animation-delay: .3s;
}

.chat-thinking span:last-child {
  margin-left: 4px;
  color: var(--muted);
  font-size: 12px;
}

@keyframes thinking-bounce {
  50% { transform: translateY(-3px); opacity: .55; }
}

.chat-input {
  display: flex;
  align-items: end;
  gap: 8px;
  margin: 14px 18px 8px;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 5px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(31, 51, 40, .08);
}

.chat-input textarea {
  flex: 1;
  min-width: 0;
  max-height: 112px;
  min-height: 46px;
  border: 0;
  padding: 12px;
  outline: 0;
  resize: none;
  color: var(--ink);
  background: transparent;
  font: inherit;
  line-height: 1.4;
}

.chat-input button {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: var(--green);
  font-size: 22px;
  cursor: pointer;
}

.chat-input button:disabled {
  cursor: wait;
  opacity: .55;
}

.chat-error {
  min-height: 20px;
  margin: 0 24px 12px;
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
}

.quarterback-operations {
  padding-top: 4px;
}

.owner-rule-panel {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 28px;
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  background: #fff;
}

.owner-rule-panel h2 {
  margin: 4px 0 8px;
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 500;
}

.owner-rule-panel p {
  color: var(--muted);
  line-height: 1.5;
}

.owner-rule-panel form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.owner-rule-panel textarea {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  resize: vertical;
  font: inherit;
  line-height: 1.5;
}

.owner-rule-panel .primary-btn {
  align-self: flex-end;
}

.owner-rule-panel > #ruleResult {
  grid-column: 2;
}

.rule-result {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-radius: 10px;
  padding: 13px;
  color: var(--green);
  background: var(--green-soft);
}

.rule-result span {
  font-size: 13px;
}

.translated-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.translated-rules article {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}

.translated-rules h3 {
  margin: 14px 0 8px;
  font-size: 15px;
}

.translated-rules p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.digest-list button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 11px 2px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

@media (max-width: 800px) {
  .owner-rule-panel {
    grid-template-columns: 1fr;
  }

  .owner-rule-panel > #ruleResult {
    grid-column: 1;
  }

  .translated-rules {
    grid-template-columns: 1fr;
  }

  .rule-result {
    flex-direction: column;
  }
}

@media (max-width: 900px) {
  .qb-hero {
    margin-bottom: 18px;
  }

  .quarterback-chat {
    margin: 0 -8px 34px;
    border-radius: 18px;
  }

  .quarterback-chat > header {
    align-items: start;
    flex-direction: column;
    padding: 20px 18px 14px;
  }

  .quarterback-chat h2 {
    font-size: 27px;
  }

  .chat-privacy {
    max-width: none;
    text-align: left;
  }

  .suggested-questions {
    padding: 0 18px 12px;
  }

  .chat-messages {
    height: max(360px, 48dvh);
    padding: 18px;
  }

  .chat-message {
    max-width: 92%;
  }

  .chat-thinking {
    padding-left: 18px;
  }

  .chat-input {
    position: sticky;
    z-index: 3;
    bottom: calc(66px + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px));
    margin: 12px 12px 7px;
  }

  .chat-error {
    margin-right: 18px;
    margin-left: 18px;
  }
}

@media (max-width: 480px) {
  .qb-hero {
    padding: 22px;
  }

  .message-bubble {
    padding: 11px 13px;
  }

  .quarterback-operations {
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-messages {
    scroll-behavior: auto;
  }

  .chat-thinking i {
    animation: none;
  }
}

.workflow-launchers{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
/* Inside the chat starters it is one of the chips and inherits their styling.
 * The teal border, black text and larger type it used to carry made it read as
 * a different species of control sitting under the questions. */
.workflow-launch{border:1px solid var(--line);background:var(--green-soft);color:var(--green);border-radius:999px;padding:9px 14px;font:inherit;font-weight:700;font-size:12px;min-height:42px;cursor:pointer}
.quarterback-chat.is-working .suggested-questions,.quarterback-chat.is-working .workflow-launchers{display:none}
.workflow{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;margin-bottom:12px;box-shadow:var(--shadow)}
.workflow-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.workflow-bar strong{display:block;margin-top:3px}
.workflow-cancel{border:0;background:none;color:var(--muted);font:inherit;cursor:pointer;text-decoration:underline}
.workflow-prompt{padding:13px 14px;background:var(--green-soft,#f2fffa);border-bottom:1px solid var(--line)}
.workflow-prompt.is-clear{background:var(--paper)}
.workflow-question{margin:0 0 8px;font-size:15px;font-weight:600}
.workflow-answer{display:flex;gap:8px;flex-wrap:wrap}
.workflow-answer input{flex:1 1 240px;border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit}
.workflow-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);gap:14px;padding:14px}
.workflow-body>.workflow-ask,.workflow-body>.workflow-artifact{min-width:0}
.workflow-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.workflow-search input{flex:1;border:0;outline:0;font:inherit;background:none}
.workflow-options{display:grid;gap:6px;margin-top:10px;max-height:240px;overflow:auto}
.workflow-option{text-align:left;border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff;font:inherit;cursor:pointer}
.workflow-option strong{display:block}
.workflow-option span,.workflow-option small{color:var(--muted);font-size:12px}
.workflow-ask textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px;font:inherit;resize:vertical}
.workflow-artifact h4,.workflow-context h4{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.note-field{display:block;margin-bottom:9px}
.note-field span{display:block;font-size:12px;font-weight:600;text-transform:capitalize;margin-bottom:4px}
.note-field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px;font:inherit;resize:vertical}
.workflow-codes{border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.workflow-codes div{display:flex;gap:8px;align-items:baseline;padding:4px 0;font-size:13px}
.workflow-codes span{color:var(--muted);flex:1}
.workflow-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:10px}
.workflow-context{background:var(--paper);border-radius:12px;padding:12px}
.workflow-context dl{margin:0;display:grid;gap:7px}
.workflow-context dt{font-size:11px;color:var(--muted)}
.workflow-context dd{margin:0;font-size:13px}
.workflow-receipt div{background:var(--green-soft,#f2fffa)}
@media(max-width:820px){.workflow-body{grid-template-columns:1fr}.workflow-context{order:-1}}

/* -- the heads-up display -------------------------------------------------- */

/* The Quarterback is meant to be the only app someone opens, so it has to
 * answer "what needs me right now" before it is asked anything. These tiles are
 * that answer: a number, what it means, and a tap that lands on the screen
 * where the work is done. */
.qb-hud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 10px;
  margin: 0 0 22px;
}

.qb-hud-tile {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.14s ease, border-color 0.14s ease;
}

.qb-hud-tile:hover { transform: translateY(-2px); }
.qb-hud-tile:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.qb-hud-tile .hud-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.qb-hud-tile .hud-value {
  font-size: 28px;
  font-weight: 760;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.qb-hud-tile .hud-detail {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Tone carries on the left edge and the number, never on the whole card: a
 * grid of filled red boxes is unreadable and reads as broken rather than busy. */
.qb-hud-tile.urgent { border-left-color: var(--red); }
.qb-hud-tile.urgent .hud-value { color: var(--red); }
.qb-hud-tile.warn { border-left-color: var(--amber); }
.qb-hud-tile.warn .hud-value { color: var(--amber); }
.qb-hud-tile.calm { border-left-color: var(--green); }

.qb-hud-empty {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 14px;
  background: var(--card);
  color: var(--muted);
}

.qb-hud-degraded {
  margin: -14px 0 20px;
  font-size: 12.5px;
  color: var(--amber);
}

@media (max-width: 900px) {
  /* Two across on a phone. One column turns eight tiles into a scroll before
   * the chat box, which defeats the point of a heads-up display. */
  .qb-hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .qb-hud-tile { padding: 12px 13px; border-radius: 12px; }
  .qb-hud-tile .hud-value { font-size: 23px; }
  .qb-hud-tile .hud-label { font-size: 10.5px; }
  /* The sentence under the number is the first thing to go when the tile is
   * half a phone wide; the label and the number still say enough to tap. */
  .qb-hud-tile .hud-detail { display: none; }
}

/* Everything below this strip is only as current as the strip says. It is
 * deliberately louder than a tile and sits above them all, because a stale
 * mirror does not make one number wrong, it makes every number wrong. */
.qb-hud-stale {
  margin: 0 0 12px;
  padding: 12px 15px;
  border: 1px solid var(--amber);
  border-left: 4px solid var(--amber);
  border-radius: 12px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.45;
}

/* The Quarterback as a chat screen
 *
 * This is the home screen on every surface, so it fills the viewport and puts
 * the input at the bottom where a conversation expects it. It used to be a page
 * that scrolled: hero, HUD, rule builder, end-of-day digest, with the input
 * sixth down. Those all moved to apps that already existed.
 *
 * The intro block sits between the log and the input rather than above the log,
 * so it is the last thing before the composer on an empty screen and disappears
 * behind the conversation once there is one.
 */

.qb-chat-screen {
  display: flex;
  flex-direction: column;
  /* Fill what is left under the header, and no more — the composer must stay
   * reachable without scrolling the page itself. */
  height: calc(100dvh - var(--qb-chat-chrome, 13rem) - var(--keyboard-inset, 0px));
  gap: 0.75rem;
}

.qb-chat-screen .chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  /* min-height:0 or a long conversation refuses to shrink and pushes the
   * composer off the bottom of the screen. */
  min-height: 0;
}

.qb-chat-intro {
  flex: 0 0 auto;
}

.qb-chat-screen .chat-input {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
}

.qb-chat-screen .chat-privacy {
  /* Full width, or the centring has nothing to centre within and the line
     wraps against the left gutter. */
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted, #64748b);
}


/* Smart Scribe: how a step arrives.
 *
 * The workflow replaces the whole panel on every repaint, and a repaint
 * happens on each answer as well as on each step. Animating every repaint
 * made the note flinch each time you added a line to it, so only a genuine
 * change of step animates: `data-entering` is set on the host when the step
 * changed and cleared once the entrance has run.
 *
 * Deliberately short. This is a screen a dentist uses between patients, and
 * anything that has to be waited out is a cost, not a delight. 220ms is
 * enough to read as movement and not enough to be in the way.
 */
.workflow-host[data-entering="1"] .workflow{
  animation: wf-step-in 220ms cubic-bezier(.22,.61,.36,1);
}

/* Movement only, never opacity.
 *
 * An entrance that fades in from 0 hides its own content for as long as the
 * animation has not run, and an animation does not run in a tab the browser
 * has throttled. Measured here: the question band sat at opacity 0 with the
 * answer box under it, looking like a blank panel. Sliding cannot fail that
 * way — the worst case is that it appears without moving. */
@keyframes wf-step-in{
  from{ transform: translateY(8px) scale(.994); }
  to{ transform: none; }
}

/* The question band is the part that actually changes as you work, so it gets
 * its own entrance keyed to the question rather than to the step.
 *
 * No `both`. With a backwards fill the element sits at the `from` keyframe
 * until the animation runs, and an animation does not run in a tab the
 * browser has throttled — which would leave the question at opacity 0 with
 * nothing to say why. Without a fill the resting style is the element's own,
 * so the worst case is that it appears without moving. */
.workflow-prompt{
  animation: wf-ask-in 200ms ease;
}

@keyframes wf-ask-in{
  from{ transform: translateY(-6px); }
  to{ transform: none; }
}

/* The reason Arc is asking, under the question. Quieter than the question,
 * because a dentist who already knows why does not need to read it twice. */
.workflow-why{
  margin: 4px 0 0;
  color: var(--muted, #64748b);
  font-size: 12px;
  line-height: 1.45;
}

/* His own templates, first thing on the capture step. */
.workflow-templates{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 10px;
}

.workflow-template{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line, #dce3dc);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #0f172a);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.workflow-template:hover{ border-color: var(--green, #1b6b4b); }
.workflow-template:active{ transform: scale(.97); }

.workflow-template.is-chosen{
  border-color: var(--green, #1b6b4b);
  background: var(--green-soft, #e5f1e9);
  color: var(--green, #1b6b4b);
}

.workflow-template span{
  color: var(--muted, #64748b);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* The mic sits beside the answer box, not instead of it. */
.workflow-answer .icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line, #dce3dc);
  border-radius: 10px;
  background: #fff;
  color: var(--muted, #64748b);
  cursor: pointer;
}

.workflow-answer .icon-btn.is-listening,
#wfDictate.is-listening{
  border-color: var(--red, #9c4037);
  color: var(--red, #9c4037);
  animation: wf-listening 1.4s ease-in-out infinite;
}

@keyframes wf-listening{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(156, 64, 55, .28); }
  50%{ box-shadow: 0 0 0 5px rgba(156, 64, 55, 0); }
}

#wfDictate{
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Motion is decoration over a layout that is already correct without it, so
 * a reader who has asked for less of it loses nothing but the movement. */
@media (prefers-reduced-motion: reduce){
  .workflow-host[data-entering="1"] .workflow,
  .workflow-prompt,
  .workflow-template,
  .workflow-answer .icon-btn.is-listening,
  #wfDictate.is-listening{
    animation: none;
    transition: none;
  }
}

/* A workflow takes over the chat while it runs.
 *
 * It always meant to — the module says so — but nothing enforced it once the
 * chat screen was rebuilt with a sidebar. The composer is `position: sticky`,
 * so it painted over the panel's own action bar: "Save draft" and "Approve
 * note" were on screen, looked enabled, and could not be clicked, because the
 * message box was sitting on top of them. The panel was also taller than the
 * window, so its foot was off screen regardless.
 *
 * So while a workflow is up, everything that belongs to chatting goes away,
 * and the panel is sized to the window with its own scroll. The only things
 * on screen are the job and the way out of it.
 */
.qb-chat-screen.is-working #chatForm,
.qb-chat-screen.is-working #chatMessages,
.qb-chat-screen.is-working #chatThinking,
.qb-chat-screen.is-working #chatAttachments,
.qb-chat-screen.is-working #chatAttachError,
.qb-chat-screen.is-working #chatSessionCost,
.qb-chat-screen.is-working .qb-chat-intro,
.qb-chat-screen.is-working .chat-privacy,
.qb-chat-screen.is-working .suggested-questions,
.qb-chat-screen.is-working .workflow-launchers{
  display: none;
}

/* Sized to what is left of the window after the top bar, so the action bar is
 * always reachable by scrolling the panel rather than the page. */
.workflow-host{
  display: flex;
  min-height: 0;
  max-height: calc(100dvh - 7.5rem);
  margin-bottom: 1rem;
}

.workflow-host .workflow{
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

/* The header and the question stay put; the note under them scrolls.
 *
 * No padding under the scroller, or the note slides into the gap beneath the
 * pinned footer and a line of it shows below the buttons. */
.workflow-host .workflow-body{
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 0;
  -webkit-overflow-scrolling: touch;
}

.workflow-host .workflow-bar,
.workflow-host .workflow-prompt{
  flex: none;
}

/* Approve is the point of the screen, so it does not scroll away.
 *
 * With the note scrolling inside the panel, the action row sat below the fold
 * of a long note: on screen only after scrolling past everything it applies
 * to. Pinned to the foot of the scroller instead, so the way to finish is
 * always the last thing you see.
 *
 * Solid, and inset to the panel's own edges. A gradient over a transparent
 * base let the note text run underneath the buttons and read as a rendering
 * fault; a footer has to look like a footer. */
.workflow-host .workflow-artifact .workflow-actions{
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 6px -14px 0;
  padding: 12px 14px;
  background: var(--paper, #f7faf8);
  border-top: 1px solid var(--line, #dce3dc);
}

/* On a phone, pinned chart context and follow-up questions can leave only a
 * few lines for the note. Scroll the complete review as one form instead;
 * keep patient identity in view without covering edit or approval controls. */
@media (max-width: 820px), (max-height: 680px){
  .workflow-host .workflow{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .workflow-host .workflow-bar{
    position: sticky;
    top: 0;
    z-index: 3;
  }
  .workflow-host .workflow-body{
    overflow: visible;
    flex: none;
  }
  .workflow-host .workflow-artifact .workflow-actions{
    position: static;
  }
}

/* The time and the procedure ran together.
 *
 * The row is a name, a time and a procedure, and only the name was a block,
 * so the other two butted against each other: "Mason Perez16:30Extraction -
 * erupted tooth". Reads as a typo, in the first list a dentist ever sees.
 */
.workflow-option{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  align-items: baseline;
}

.workflow-option strong{ grid-column: 1; }
.workflow-option span{ grid-column: 2; grid-row: 1; text-align: right; }
.workflow-option small{ grid-column: 1 / -1; }

/* Enough of the list to read as a list, without pushing the panel past the
 * window. Was 240px, which cut a row in half and looked broken. */
.workflow-options{ max-height: 292px; }

/* Leaving.
 *
 * Movement only, same reason as the entrance: an exit that fades would leave
 * the panel invisible-but-present if the animation never ran, and the panel is
 * removed on a timer that does not wait for it. Shorter than the entrance,
 * because going back to the chat should feel like getting out of the way
 * rather than like another transition to sit through.
 */
.workflow-host[data-leaving="1"] .workflow{
  animation: wf-step-out 140ms ease-in;
}

@keyframes wf-step-out{
  from{ transform: none; }
  to{ transform: translateY(6px) scale(.996); }
}

@media (prefers-reduced-motion: reduce){
  .workflow-host[data-leaving="1"] .workflow{ animation: none; }
}

/* The way out, said plainly. It was a bare "Cancel" in the corner and the
 * keyboard did nothing, so the shortcut is spelled out next to it. */
.workflow-cancel::after{
  content: " · esc";
  opacity: .55;
  font-size: 11px;
  letter-spacing: .02em;
}

/* The day's work, in the chat.
 *
 * A list of things to do rather than a table of numbers, so it reads down and
 * each row carries where it is done. The button is conditional and the row is
 * not: a task with nowhere to open is still a task.
 */
.qcard-tasks{
  display: grid;
  gap: 1px;
  background: var(--line, #dce3dc);
  border: 1px solid var(--line, #dce3dc);
  border-radius: 13px;
  overflow: hidden;
}

.qtasks-head{
  padding: 9px 13px;
  background: var(--paper, #f7faf8);
  color: var(--muted, #64748b);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.qtask{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  background: #fff;
}

.qtask-body{ display: grid; gap: 3px; min-width: 0; }
.qtask-body strong{ font-size: 13.5px; line-height: 1.4; }
.qtask-body span{ color: var(--muted, #64748b); font-size: 12px; line-height: 1.45; }

.qtask-side{ display: flex; align-items: center; gap: 9px; flex: none; }
.qtask-side em{ color: var(--ink, #0f172a); font-size: 12px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }

.qtask-open{
  border: 1px solid var(--line, #dce3dc);
  border-radius: 8px;
  padding: 6px 11px;
  background: #fff;
  color: var(--green, #1b6b4b);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.qtask-open:hover{ background: var(--green-soft, #e5f1e9); border-color: var(--green, #1b6b4b); }

@media (max-width: 640px){
  .qtask{ flex-direction: column; align-items: stretch; }
  .qtask-side{ justify-content: flex-end; }
}

/* An app open inside the Quarterback.
 *
 * The panel is the app's own screen, not a summary of it: `app` is repointed
 * here and the real renderer draws into it. So the styling here is only the
 * frame — the bar that says where you are and how to leave, and a body that
 * lets the app's own layout behave as it does on its own page.
 */
.app-panel{
  display:flex; flex-direction:column; max-height:calc(100vh - 190px);
  /* .workflow supplies no padding — Scribe's steps each carry their own — so
   * without this the header sits flush against the panel's own border. */
  padding:18px 20px 16px;
}

.app-panel-bar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:0 0 14px; border-bottom:1px solid var(--line); margin-bottom:4px;
}
.app-panel-bar h2{ margin:2px 0 0; font-size:19px; letter-spacing:-.01em; }
.app-panel-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.app-panel-actions .secondary-btn{ padding:8px 12px; font-size:13px; }

/* The keyboard way out, shown next to the button rather than instead of it.
 * Escape is what people try first and it was invisible. */
.app-panel-key{
  margin-left:7px; padding:1px 5px; border:1px solid var(--line); border-radius:5px;
  font-size:10px; letter-spacing:.04em; color:var(--muted); text-transform:uppercase;
}

/* The app's own screen scrolls inside the panel, so the conversation's shape
 * does not change with whichever app happens to be open. Without this a
 * twelve-thousand-pixel screen (Work Queue is one) pushes the composer off
 * the bottom of the window. */
.app-panel-body{
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  /* A little side padding so a focus ring on the first control is not clipped
   * by the scroll container's own edge. */
  padding:16px 3px 4px; min-height:0;
}

/* Inside the panel the app's hero has already been said by the bar above it,
 * and its grid has a narrower column to live in. */
.app-panel-body .hero{ padding-top:0; }
.app-panel-body .hero h1{ font-size:clamp(22px, 3.4vw, 30px); }
.app-panel-body .hero .eyebrow{ display:none; }
.app-panel-body .grid{ grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }
.app-panel-body > section:first-child{ margin-top:0; }

.app-panel-failed{ color:var(--amber,#b45309); font-size:13.5px; margin:18px 2px; }

@media (max-width: 760px){
  .app-panel{ max-height:calc(100vh - 150px); padding:15px 14px 13px; }
  .app-panel-bar{ flex-direction:column; gap:10px; }
  .app-panel-actions{ width:100%; }
  .app-panel-actions .secondary-btn{ flex:1; min-height:44px; }
}

/* An agent panel: the short list, and why each thing is on it.
 *
 * Deliberately not a table. A table says "scan these"; this says "read these
 * six and decide". The reasoning is as prominent as the number, because the
 * number alone is what the page already gives you.
 */
.agent-headline{
  margin:0 0 18px; font-size:16.5px; line-height:1.5; font-weight:600;
  letter-spacing:-.005em;
}

.agent-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }

.agent-item{
  border:1px solid var(--line); border-radius:14px; padding:16px 16px 14px;
  background:var(--surface, #fff);
  /* Each arrives just after the one above it, so the list reads as being
   * dealt out rather than appearing all at once. Movement only — an entrance
   * that fades from zero hides its own content in a throttled tab. */
  animation: agent-item-in 260ms cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay: var(--stagger, 0ms);
  transition: opacity 180ms ease, transform 180ms ease;
}
@keyframes agent-item-in{
  from{ transform: translateY(10px); }
  to{ transform: none; }
}
.agent-item[data-leaving="1"]{ opacity:0; transform: translateX(14px); }
.agent-item[data-done="1"]{ border-color:#bed5c5; background:var(--green-soft,#f2f8f4); }

/* A claim that came back with a reason is a different job from one that has
 * gone quiet, and the edge says so before the text does. */
.agent-item.is-denied{ box-shadow: inset 3px 0 0 var(--amber,#d98324); }

.agent-item-head{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
.agent-item-head strong{ font-size:15px; }
.agent-meta{ display:block; margin-top:3px; font-size:12px; color:var(--muted); }
.agent-amount{ font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }

.agent-why{ margin:10px 0 0; font-size:13.5px; line-height:1.55; color:#445048; }

/* What is about to be said, before it is said. Approving something you have
 * not read is not approval. */
.agent-prepared{
  margin:12px 0 0; padding:11px 13px; border-radius:10px;
  background:var(--green-soft,#f2f8f4); border:1px solid #dfeae2;
}
.agent-prepared-label{
  font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--green,#1b6b4b);
  font-weight:700;
}
.agent-prepared p{ margin:5px 0 0; font-size:13px; line-height:1.5; color:#3a463e; }

.agent-item-actions{ display:flex; align-items:center; gap:9px; margin-top:13px; flex-wrap:wrap; }
.agent-item-actions .primary-btn:disabled{ opacity:.45; cursor:not-allowed; }
.agent-state{ font-size:12.5px; color:var(--muted); }
.agent-state.is-blocked{ color:var(--amber,#b45309); }

.agent-blocked{ margin:14px 0 0; font-size:13px; color:var(--amber,#b45309); }
.agent-emptied{ margin:14px 0 0; }
.agent-clear{ padding:26px 2px; }

.agent-foot{ margin-top:20px; padding-top:14px; border-top:1px solid var(--line); }
.agent-boundary{
  margin:0 0 7px; font-size:12.5px; line-height:1.55; color:#445048;
}

@media (max-width: 760px){
  .agent-item-head{ flex-direction:column; gap:4px; }
  .agent-item-actions .primary-btn,
  .agent-item-actions .secondary-btn{ flex:1; min-height:44px; }
}

/* A real message, shown as it will go out. The name and number are the point:
 * approving a template with the placeholders still in it is approving
 * something nobody has read. */
.agent-example-to{
  margin:6px 0 0; font-size:11.5px; letter-spacing:.02em; color:var(--green,#1b6b4b); font-weight:600;
}
.agent-example-body{
  margin:6px 0 0; font-size:13px; line-height:1.55; color:#3a463e; white-space:pre-wrap;
}

/* Who this chair is for. Named, with the reason, before anything is drafted. */
.agent-pick{
  margin:12px 0 0; padding:11px 13px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface,#fff);
}
.agent-pick-name{ margin:5px 0 2px; font-size:14.5px; font-weight:700; }
.agent-pick-name .agent-meta{ display:inline; margin-left:8px; font-weight:400; }
.agent-pick .agent-why{ margin-top:4px; }

/* A countdown is not money, so it does not get the money weight. */
.agent-amount-soft{ font-size:13px; font-weight:600; color:var(--muted); }

/* The thinking state.
 *
 * Three dots say "something is happening" and nothing else. This says how long
 * it has been, which is the difference between waiting and watching — and
 * after ten seconds it says it is still going, because silence past that reads
 * as a hang.
 *
 * The mark is drawn rather than typed: a glyph cannot carry the practice's
 * colour and cannot animate on its own. */
.chat-thinking{align-items:flex-start}
.chat-message.assistant:has(> .message-bubble:empty){display:none}
.chat-thinking > .thinking-body{display:flex; flex-direction:column; align-items:stretch; gap:6px; min-width:0; flex:1; padding:0; border:0; border-radius:0; background:transparent}
.thinking-head{display:flex; align-items:center; gap:9px; min-height:28px; flex-wrap:wrap}
.thinking-stop{margin-left:auto; border:1px solid var(--line,#dce3df); border-radius:7px; padding:5px 10px; background:transparent; color:var(--ink,#20372e); font:inherit; font-size:12px; cursor:pointer; min-height:32px}
.thinking-stop:hover{background:var(--paper,#f4f6f3)}
.thinking-stop:focus-visible,.thinking-activity summary:focus-visible{outline:2px solid var(--green,#225b4a);outline-offset:3px}
.thinking-activity{font-size:12px; color:var(--muted,#64748b); max-width:540px}
.thinking-activity summary{cursor:pointer; width:fit-content; padding:2px 0; min-height:24px}
.thinking-count{font-variant-numeric:tabular-nums; opacity:.7}
.thinking-steps{list-style:none; margin:6px 0 2px; padding:0 0 0 4px; max-height:180px; overflow:auto; overscroll-behavior:contain}
.thinking-steps li{display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:8px; align-items:baseline; padding:6px 0; line-height:1.45}
.thinking-step-label{overflow-wrap:anywhere; color:var(--ink,#20372e)}
.thinking-step-state{font-size:11px; color:var(--muted,#64748b)}
.thinking-step-dot{width:6px;height:6px;border-radius:50%;background:var(--line,#dce3df);align-self:center;justify-self:center}
.thinking-steps li[data-state="running"] .thinking-step-dot{background:var(--green,#225b4a);animation:qb-activity-pulse 1.6s ease-in-out infinite}
.thinking-steps li[data-state="completed"] .thinking-step-dot{background:var(--green,#225b4a)}
.thinking-steps li[data-state="failed"] .thinking-step-dot,.thinking-steps li[data-state="refused"] .thinking-step-dot,.thinking-steps li[data-state="partial"] .thinking-step-dot,.thinking-steps li[data-state="needs_input"] .thinking-step-dot{background:#9c663a}
.chat-execution{margin:14px 0 20px; font-size:12px; color:var(--muted); max-width:600px}
.chat-execution>summary,.chat-context>summary{display:list-item; cursor:pointer; min-height:32px; padding:6px 0; width:fit-content; font-weight:500}
.chat-execution>summary span{margin-left:8px; font-weight:400; color:var(--muted); font-variant-numeric:tabular-nums}
.chat-execution[open]>summary{color:var(--green)}
.chat-execution[data-limited="true"]>summary{color:#9c663a}
.chat-execution .chat-execution-note,.chat-context>p{font-size:12px; color:var(--muted); line-height:1.6; margin:6px 0 10px}
.chat-execution>summary:focus-visible,.chat-context>summary:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.chat-context{margin:14px 0 0; font-size:12px; color:var(--muted)}
.chat-thinking[data-state="completed"] .thinking-mark,.chat-thinking[data-state="stopped"] .thinking-mark,.chat-thinking[data-state="failed"] .thinking-mark{animation:none; width:6px;height:6px;border-radius:50%;opacity:.55}
@keyframes qb-activity-pulse{50%{opacity:.35}}

.thinking-mark{
  width:13px; height:13px; flex:none; border-radius:3px;
  background:var(--green,#1b6b4b);
  animation: qb-thinking 1.6s cubic-bezier(.45,0,.35,1) infinite;
}
@keyframes qb-thinking{
  0%   { transform: rotate(0deg)   scale(1);   border-radius:3px;  opacity:1 }
  50%  { transform: rotate(180deg) scale(.72); border-radius:50%; opacity:.55 }
  100% { transform: rotate(360deg) scale(1);   border-radius:3px;  opacity:1 }
}

.thinking-label{ font-size:13.5px; color:var(--muted,#64748b) }
.thinking-elapsed{
  font-size:11.5px; color:var(--muted,#64748b); opacity:.75;
  font-variant-numeric:tabular-nums;
}

/* The cursor at the end of the text while it is being written. Sits on the
 * last line rather than on its own, so the paragraph does not jump when it
 * disappears. */
.message-bubble.is-typing > :last-child::after{
  content:''; display:inline-block; width:2px; height:1em;
  margin-left:2px; vertical-align:-2px;
  background:var(--green,#1b6b4b);
  animation: qb-caret 1s steps(2,start) infinite;
}
@keyframes qb-caret{ 50% { opacity:0 } }

@media (prefers-reduced-motion: reduce){
  .thinking-mark,.thinking-steps li[data-state="running"] .thinking-step-dot{ animation:none }
  .message-bubble.is-typing > :last-child::after{ animation:none }
}

/* Links to a screen that was folded into this one.
 *
 * Nine apps became sections of other apps. The screens still exist and still
 * work; what changed is that they are reached from the app that owns the work
 * rather than from a nav button of their own. */
.screen-subnav{ display:flex; gap:8px; flex-wrap:wrap; margin:-8px 0 20px }
.subnav-link{
  border:1px solid var(--line,#dce3dc); background:white; color:var(--ink,#1c2b22);
  border-radius:999px; padding:8px 14px; font:inherit; font-size:13px; cursor:pointer;
  min-height:40px;
}
.subnav-link:hover{ background:var(--green-soft,#e5f1e9); border-color:#bed5c5 }

/* Supplies: the detail under each row.
 *
 * A reorder line without its cadence is a date with no reason behind it. */
.supply-sub{ display:block; margin-top:3px; font-size:11.5px; color:var(--muted,#64748b) }
.supply-due{ white-space:nowrap }
.supply-table td.num, .supply-table th.num{ text-align:right; font-variant-numeric:tabular-nums }
.supply-flag-brand{ margin:2px 0 0; font-size:12px; color:var(--muted,#64748b) }
.supply-flag-detail{ margin:8px 0 0; font-size:13px; line-height:1.5; color:#3a463e }

/* Benchmarks: what the gap is worth, and where to close it.
 *
 * A percentile on its own is a report. The measures a practice is behind on
 * lead, and each carries the one app that would move it. */
.benchmark-grid article.is-behind{ border-color:#e4c9a8; box-shadow:0 0 0 1px #f0dcc2 inset }
.benchmark-action{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line,#dce3dc) }
.benchmark-note{ margin:0; font-size:12.5px; line-height:1.5; color:var(--muted,#64748b) }
.benchmark-worth{ margin:8px 0 0; font-size:13px; line-height:1.5; color:#3a463e }
.benchmark-worth strong{ color:var(--green,#1b6b4b) }
.benchmark-action .subnav-link{ margin-top:10px }

/* Reception: people waiting to be booked in.
 *
 * The panel counted these and the screen showed a different table, so clicking
 * through from "9 booking requests are waiting" landed on an empty list. */
.reception-bookings{ display:grid; gap:10px; margin-bottom:20px }
.reception-booking{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  background:white; border:1px solid var(--line,#dce3dc); border-radius:14px; padding:15px 17px;
}
.reception-booking strong{ display:block; font-size:15px }
.reception-booking-meta{ display:block; margin-top:3px; font-size:12.5px; color:var(--muted,#64748b) }
.reception-booking-words{ margin:8px 0 0; font-size:13px; color:#3a463e; font-style:italic }

/* Intake: what changes the appointment.
 *
 * A form nobody reads before the patient is in the chair is the same as no
 * form. These are prompts to read it, not judgements about it. */
.worklist-card.has-flags{ border-color:#e4c9a8 }
.intake-reason{ margin:6px 0 10px; font-size:13.5px; line-height:1.5; color:#3a463e; font-style:italic }
.intake-flags{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:6px }
.intake-flags li{
  font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:999px;
  background:#fdf3e6; color:#8a5a1c; border:1px solid #f0dcc2;
}

/* A rule that drafts nothing is not obviously broken from the outside, which
 * is exactly why it needs saying on the card rather than in a panel. */
.saved-rules article.rule-quiet{ border-color:#e4c9a8; background:#fffaf3 }
.saved-rules article.rule-quiet footer span{ color:#8a5a1c }

/* Settings: what is on, before the forms.
 *
 * The screen opened on a text box and put 269 controls under it. The question
 * somebody opens Settings to answer is which capabilities are off — and since
 * off is the safe default here, each row says what being off costs. */
.settings-state{
  display:grid; gap:1px; background:var(--line,#dce3dc);
  border:1px solid var(--line,#dce3dc); border-radius:14px; overflow:hidden; margin-bottom:26px;
}
.settings-state-row{
  display:flex; align-items:center; gap:12px; background:white; padding:14px 16px;
}
.settings-state-row strong{ display:block; font-size:14px }
.settings-state-row span{ font-size:12.5px; color:var(--muted,#64748b) }
.settings-state-row > div{ flex:1; min-width:0 }
.settings-state-dot{
  width:9px; height:9px; border-radius:50%; flex:none; background:var(--green,#1b6b4b);
}
.settings-state-row.is-off .settings-state-dot{ background:#c8ccc9 }
.settings-state-row.is-off strong{ color:var(--muted,#64748b) }
.settings-state-value{
  font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--green,#1b6b4b); flex:none;
}
.settings-state-row.is-off .settings-state-value{ color:#8a5a1c }

/* A worklist card that describes something and offers no way to act on it is
 * a statement, not a task. */
.worklist-card .worklist-open{ margin-top:12px; min-height:40px }

/* A list with no call script is a decision, not an omission — say which. */
.list-scripts-none{
  margin:0 0 18px; padding:12px 14px; border-radius:12px;
  background:var(--green-soft,#e5f1e9); color:#3a463e; font-size:13px; line-height:1.5;
}

/* A hundred rows of money with nothing to do about any of it is a report.
 * A stuck claim is chased on the Insurance screen, so the row says so. */
.billing-do{ white-space:nowrap; text-align:right }
.billing-do .subnav-link{ padding:5px 12px; min-height:34px; font-size:12px }

/* ---------------------------------------------------------------------------
 * TODAY — the pace card and grouped booking requests.
 *
 * Appended as its own block rather than woven into the rules above, because
 * several screens share this stylesheet and a scoped block is the change that
 * cannot break one of them.
 *
 * Everything below is written mobile-first and uses minmax(0,1fr) rather than
 * 1fr in every grid: a bare 1fr track refuses to shrink below its content, so
 * one long carrier name is enough to push a 375px phone into a horizontal
 * scroll that the person then cannot get rid of.
 * ------------------------------------------------------------------------- */
.pace-card{
  margin:20px 0 8px; padding:22px; border:1px solid #b9ddd0; border-radius:20px;
  background:linear-gradient(140deg,#f2faf6,#fff); box-shadow:var(--shadow);
}
.pace-card>header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:18px;
}
.pace-card h2{ margin:2px 0 0; font-family:Georgia,serif; font-size:27px; font-weight:500 }
.pace-verdict{ display:grid; gap:2px; text-align:right; min-width:0 }
.pace-verdict span{ color:var(--muted); font-size:12px }
.pace-gap{ font-size:27px; font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.pace-gap.is-behind{ color:var(--red,#9c4037) }
.pace-gap.is-ahead{ color:var(--green,#1b6b4b) }
.pace-gap.is-on_pace{ color:var(--ink) }

.pace-figures{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:14px; margin:0;
}
.pace-figures>div{
  min-width:0; padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.pace-figures dt{ color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase }
.pace-figures dd{ margin:6px 0 0; font-size:23px; font-weight:750; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
/* The basis is the point of the card, not a footnote: a number nobody can
 * check is a number nobody should act on. */
.pace-figures p{ margin:8px 0 0; color:#445048; font-size:12px; line-height:1.5 }

.pace-risks{ display:grid; gap:10px; margin-top:16px }
.pace-risks article{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.pace-risks article>div{ min-width:min(100%,240px); flex:1 1 240px }
.pace-risks h3{ margin:0; font-size:15px }
.pace-risks p{ margin:5px 0 0; color:#445048; font-size:12.5px; line-height:1.5 }
.pace-risks .worklist-open{ margin-top:0; flex:0 0 auto }

.worklist-group-note{
  margin:14px 0 0; padding:14px 16px; border:1px solid var(--line); border-radius:14px;
  background:#fbfcfa; color:#445048; font-size:13px; line-height:1.6;
}
.worklist-group-note .worklist-open{ display:block; margin:10px 0 0 }

.booking-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:14px }
.booking-card{
  min-width:0; padding:20px; border:1px solid var(--line); border-radius:16px;
  background:#fff; box-shadow:var(--shadow);
}
.booking-card>header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap }
.booking-card h3{ margin:0; font-size:18px; overflow-wrap:anywhere }
.booking-card>header p{ margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere }
.booking-note{
  margin:12px 0 0; padding:10px 12px; border-radius:11px;
  background:var(--amber-soft,#f9ecd6); color:#6c4a12; font-size:12px; line-height:1.5;
}
.booking-note .worklist-open{ display:block; margin:8px 0 0 }
.booking-rows{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px }
.booking-rows li{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fbfcfa;
}
.booking-rows li>div:first-child{ display:grid; gap:3px; min-width:min(100%,150px); flex:1 1 150px }
.booking-rows strong{ font-size:14px; overflow-wrap:anywhere }
.booking-rows span{ color:var(--muted); font-size:11.5px; overflow-wrap:anywhere }
.booking-actions{ display:flex; gap:8px; flex:0 0 auto }
.booking-actions button{ min-height:38px; padding:0 14px; font-size:12.5px }

@media(max-width:560px){
  .pace-card{ padding:18px }
  .pace-card h2{ font-size:23px }
  .pace-verdict{ text-align:left }
  .booking-actions{ width:100%; }
  .booking-actions button{ flex:1 1 0 }
}

/* No entrance is declared here on purpose.
 *
 * motion.js already stamps data-arc-in on each top-level section this screen
 * renders, and motion.css turns that into arc-rise — a transform-only keyframe
 * with no fill mode, so a throttled tab that never runs it leaves the card
 * exactly where layout put it rather than stranded at opacity 0. Adding a
 * second animation to the cards inside those sections would animate the same
 * pixels twice; the parent's movement already carries them. */

/* A request whose slot went by while it waited. Kept on screen — somebody has
 * to close it, and hiding it is how it stays open forever — but it cannot be
 * approved, because approving would book a time that has already happened. */
.booking-rows li.is-expired{ background:#fbf8f4; border-style:dashed }
.booking-rows li.is-expired strong{ color:var(--muted) }

/* ------------------------------------------------------------------
 * Rules — the practice playbook.
 *
 * Appended as a scoped block rather than woven into the rules above,
 * because this file is shared and a targeted addition is a smaller
 * thing to get wrong than an edit in the middle of somebody else's
 * selector. Everything below is prefixed .rule- and only reaches
 * markup that qb/static/rules.js writes.
 *
 * No entrance keyframes here: motion.js stamps the top-level sections
 * and motion.css moves them, so anything inside a card is already
 * carried by its parent.
 * ------------------------------------------------------------------ */

.rule-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--line);
}
.rule-strip>div{ display:grid; gap:3px; padding:16px 18px; background:#fff }
.rule-strip strong{ font-size:26px; font-variant-numeric:tabular-nums; line-height:1.1 }
.rule-strip span{ font-size:12px; font-weight:750; color:var(--ink) }
.rule-strip small{ color:var(--muted); font-size:11px; line-height:1.5 }

.rule-note{
  margin:0 0 12px;
  padding:12px 15px;
  border:1px solid #e4c9a8;
  border-radius:12px;
  background:#fffaf3;
  color:#7a4f18;
  font-size:13px;
  line-height:1.55;
}

.rule-ledger-list .rule-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow);
}
.rule-ledger-list .rule-card header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0;
}
.rule-ledger-list .rule-card h3{ margin:0; font-size:19px }
.rule-ledger-list .rule-card p{ margin:0 }
.rule-ledger-list .rule-card.rule-flagged{ border-color:#e4c9a8 }

.rule-watches{ color:var(--muted); font-size:13px; line-height:1.55 }
.rule-ledger{ font-size:14px; line-height:1.6; color:var(--ink); font-variant-numeric:tabular-nums }
.rule-verdict,.rule-sequence,.rule-elsewhere,.rule-clean{
  color:var(--muted); font-size:12px; line-height:1.55;
}
.rule-clean{ color:var(--green) }

.rule-criteria{ display:flex; flex-wrap:wrap; gap:8px; margin:0 }
.rule-criteria>div{
  padding:7px 11px; border:1px solid var(--line); border-radius:9px; background:#fbfcfa;
}
.rule-criteria dt{ color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase }
.rule-criteria dd{ margin:3px 0 0; font-size:14px; font-weight:750; font-variant-numeric:tabular-nums }

.rule-problems{ display:grid; gap:6px; margin:0; padding:0; list-style:none }
.rule-problems li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px;
  border:1px solid #e4c9a8; border-radius:11px; background:#fffaf3;
}
.rule-problems span{ color:#7a4f18; font-size:12px; line-height:1.5 }
.rule-problems strong{ font-variant-numeric:tabular-nums }
.rule-see{
  flex:0 0 auto;
  border:1px solid #dcc0a0; border-radius:8px; padding:7px 10px;
  background:#fff; color:#7a4f18; font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.rule-actions .rule-see{ border-color:var(--line); color:var(--ink); background:#fff }

.rule-ledger-list .rule-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:2px; padding-top:12px; border-top:1px solid var(--line);
}
.rule-ledger-list .rule-actions .secondary-btn{ font-size:13px; padding:9px 13px }
.rule-threshold{ display:flex; align-items:flex-end; gap:8px }
.rule-threshold label{
  display:grid; gap:4px; color:var(--muted); font-size:10px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}
.rule-threshold input{
  width:110px; min-height:37px; padding:8px 10px;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font:inherit;
}

.rule-impact-panel{
  display:grid; gap:10px;
  padding:15px; border:1px solid #b9ddd0; border-radius:13px; background:var(--green-soft);
}
/* `hidden` has to win. A display declaration on the same element beats the
 * UA sheet's [hidden]{display:none}, which left an empty green box under
 * every card until this was added. */
.rule-impact-panel[hidden]{ display:none }
.rule-impact-panel p{ margin:0; color:#20503c; font-size:12px; line-height:1.55 }
.rule-impact-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin:0;
}
.rule-impact-grid>div{ padding:11px 13px; border-radius:10px; background:rgba(255,255,255,.72) }
.rule-impact-grid dt{ color:#3d6b56; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase }
.rule-impact-grid dd{ margin:5px 0 0; font-size:15px; font-weight:750; line-height:1.35; color:var(--ink) }

@media(max-width:560px){
  /* At 375px a two-column strip puts "1,020" on two lines and the basis on
   * five. One column per figure keeps every number on one line, which is the
   * only reason any of them are readable on a phone at the front desk. */
  .rule-strip{ grid-template-columns:1fr }
  .rule-ledger-list .rule-card{ padding:17px }
  .rule-problems li{ flex-direction:column; align-items:flex-start; gap:8px }
  .rule-see{ width:100% }
  .rule-ledger-list .rule-actions>*{ flex:1 1 100% }
  .rule-threshold{ width:100% }
  .rule-threshold input{ width:100% }
  .rule-impact-grid{ grid-template-columns:1fr }
}
.rule-elsewhere-link{
  border:0; padding:0; background:none;
  color:var(--green); font:inherit; font-size:12px; font-weight:750;
  text-decoration:underline; cursor:pointer;
}


/* Keep me signed in.
 *
 * Off by default and deliberately not called "remember me": on a shared front
 * desk machine the honest question is whether this device should hold the
 * session, and the answer there is no. */
.login-card .login-remember{
  display:flex;align-items:center;gap:10px;min-height:44px;
  font-size:13px;font-weight:400;line-height:1.5;
  color:var(--muted,#55706d);cursor:pointer;margin:0;
}
/* Opt this control out of text-field padding/min-height and phone overrides.
 * The whole label remains a generous click target; the glyph stays square. */
.login-card .login-remember input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
  width:20px;min-width:20px;height:20px;min-height:20px;
  padding:0;margin:0;flex:0 0 20px;cursor:pointer;
  display:grid;place-content:center;
  border:1.5px solid #91a69c;border-radius:5px;background:#fff;
  box-shadow:none;
}
.login-card .login-remember input[type="checkbox"]:checked{
  background:var(--green);border-color:var(--green);
}
.login-card .login-remember input[type="checkbox"]:checked::after{
  content:"";width:9px;height:5px;
  border:2px solid #fff;border-top:0;border-right:0;
  transform:rotate(-45deg) translate(1px,-1px);
}
.login-card .login-remember input[type="checkbox"]:focus-visible{
  outline:2px solid var(--green);outline-offset:3px;box-shadow:none;
}


/* Arc's mark needs no chip behind it.
 *
 * .brand-mark paints a black rounded square, which is right for a white LETTER
 * sitting on it. The smile stroke carries its own forest-green gradient, so the square
 * was a black box around a logo that already had a shape -- heavier than
 * anything else on the screen, and the loudest thing in a quiet chat.
 */
.brand-mark.is-arc{
  background:none;
  border-radius:0;
  color:inherit;
  display:grid;
  place-items:center;
}
.brand-mark.is-arc svg{
  width:100%;
  height:100%;
  display:block;
  /* The stroke is drawn on a 512 canvas with room around it; at 32px the mark
   * reads small against the text beside it unless it fills its box. */
  transform:scale(1.18);
}

/* --- settings.css --- */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.settings-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}.settings-card h2{font-size:17px;margin:0 0 18px}.settings-card form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.settings-card label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:13px;flex:1 1 8rem;min-width:0}.settings-card input{border:1px solid var(--line);border-radius:9px;padding:11px;font:inherit;color:var(--ink);min-width:0;width:100%}.setting-line{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}.setting-line:first-child{padding-top:0}.setting-line:last-child{border-bottom:0;padding-bottom:0}.setting-line>span{font-weight:650}.setting-line small{display:block;color:var(--muted);font-weight:400;margin-top:4px;line-height:1.35}.safe-state{color:var(--green);font-size:13px}.switch{flex:0 0 auto!important}.switch input{display:none}.switch span{display:block;width:42px;height:24px;background:#d7ddd8;border-radius:999px;position:relative}.switch span:after{content:"";position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;left:3px;top:3px}.snapshot-counts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.snapshot-counts div{background:var(--paper);border-radius:10px;padding:12px}.snapshot-counts strong,.snapshot-counts span{display:block}.snapshot-counts span{font-size:11px;color:var(--muted);text-transform:capitalize;margin-top:4px}@media(max-width:780px){.settings-grid{grid-template-columns:minmax(0,1fr)}.snapshot-counts{grid-template-columns:repeat(2,1fr)}}
.settings-template-card{grid-column:1/-1}.settings-card .settings-template-form{align-items:stretch;flex-direction:column}.settings-template-form textarea{border:1px solid var(--line);border-radius:9px;padding:12px;font:inherit;line-height:1.45;color:var(--ink);resize:vertical}.settings-template-form>small{color:var(--muted);line-height:1.4}.settings-template-form .primary-btn{align-self:flex-start}
.settings-intake-section{border:1px solid var(--line);border-radius:12px;padding:16px;margin:0}.settings-intake-section legend{font-weight:750;text-transform:capitalize;padding:0 6px}.settings-intake-field{display:grid;grid-template-columns:minmax(240px,1fr) auto auto;gap:14px;align-items:end;padding:12px 0;border-top:1px solid var(--line)}.settings-intake-field:first-of-type{margin-top:12px}.settings-intake-field .hub-default,.settings-intake-section>.hub-default{flex-direction:row;align-items:center;flex:0 0 auto}.settings-intake-field input[type="checkbox"],.settings-intake-section input[type="checkbox"]{width:auto}@media(max-width:680px){.settings-intake-field{grid-template-columns:1fr 1fr}.settings-intake-field>label:first-child{grid-column:1/-1}}


/* ---------------------------------------------------------------------------
 * Settings: the checked parts.
 *
 * Appended as its own block rather than woven into the rules above, because
 * this stylesheet is edited by more than one person and a scoped block at the
 * end can only ever break what it names.
 *
 * Two layouts, both built from a grid that collapses to stacked rows at narrow
 * width rather than from a table. A table of six columns at 375px either
 * overflows the page or shrinks its text past reading; stacking is the only
 * version that is honest on a phone, and the labels are in the markup so a
 * stacked row still says which number is which.
 * ------------------------------------------------------------------------- */

.settings-state-source{
  display: block;
  font-size: 11.5px;
  color: var(--muted, #64748b);
  margin-top: 3px;
}
.settings-state-source code{
  font-size: 11px;
  background: var(--paper, #f4f7f3);
  border-radius: 4px;
  padding: 1px 5px;
}
/* A gate that is OPEN when it should be shut is the opposite problem from one
 * that is off, and colouring them the same is how the second one gets missed. */
.settings-state-row.is-concerning{ background: #fdf5ee; }
.settings-state-row.is-concerning .settings-state-dot{ background: var(--amber, #a35f10); }
.settings-state-row.is-concerning .settings-state-value{ color: var(--red, #9c4037); }

.settings-check,
.settings-fees{
  background: #fff;
  border: 1px solid var(--line, #dce3dc);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.settings-check .check-head h2,
.settings-fees .check-head h2{ font-size: 19px; margin: 4px 0 6px; }
.settings-check .check-cost{ margin: 12px 0 0; font-size: 13.5px; color: var(--ink, #17231e); }

.fee-search{ display: block; margin: 14px 0 10px; }
.fee-search input{
  width: 100%;
  border: 1px solid var(--line, #dce3dc);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink, #17231e);
}
.fee-count{ font-size: 12.5px; color: var(--muted, #64748b); margin: 0 0 8px; }
.fee-empty{ font-size: 13.5px; color: var(--muted, #64748b); margin: 6px 0; line-height: 1.5; }

.fee-rows, .hours-rows{ display: flex; flex-direction: column; gap: 2px; }
.fee-row, .hours-row{
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 11px 10px;
  border-radius: 10px;
  border-bottom: 1px solid var(--line, #dce3dc);
}
.fee-row:last-child, .hours-row:last-child{ border-bottom: 0; }
.fee-row:hover, .hours-row:hover{ background: var(--paper, #f4f7f3); }
.fee-row-name strong, .hours-row-day strong{ display: block; font-size: 14px; }
.fee-row-code{
  font-size: 11.5px; color: var(--muted, #64748b);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.fee-label{
  display: block; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted, #64748b); margin-bottom: 2px;
}
.fee-row-guide, .fee-row-billed, .hours-row-set, .hours-row-book{
  font-size: 13.5px; font-variant-numeric: tabular-nums; min-width: 0;
}
.fee-row-billed strong{ font-size: 15px; }
.fee-basis, .hours-row-day span{
  display: block; font-size: 11.5px; color: var(--muted, #64748b); margin-top: 2px;
}
.fee-none{ color: var(--muted, #64748b); font-size: 12.5px; }
.fee-flag{ display: block; font-size: 11.5px; color: var(--amber, #a35f10); margin-top: 2px; }
.fee-row-act, .hours-row-act{ justify-self: end; }
.fee-row-act button, .hours-row-act button{ white-space: nowrap; }

.hours-row.is-high{ background: #fdf3f1; }
.hours-row.is-medium{ background: #fdf9f0; }
.hours-ok{ font-size: 12px; color: var(--green, #1b6b4b); }
.hours-why{
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink, #17231e);
}
#practiceHoursForm tbody tr.is-filled{ background: #f0f7f2; }
/* A row that was just filled from the book should be findable, and the change
 * has to be a transition rather than a keyframe: a keyframe that never runs in
 * a throttled tab would leave the row parked on its start colour. */
#practiceHoursForm tbody tr{ transition: background var(--arc-t-base, 220ms) var(--arc-ease, ease); }

@media (max-width: 720px){
  .fee-row, .hours-row{
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    padding: 12px 8px;
  }
  .fee-row-name, .hours-row-day{ grid-column: 1 / -1; }
  /* The action sits level with the number it acts on, at the bottom of the
   * stacked row, rather than floating beside the first label. */
  .fee-row-act, .hours-row-act{ grid-column: 2; grid-row: 2 / span 2; align-self: end; }
  .fee-row-guide, .hours-row-set{ grid-column: 1; grid-row: 2; }
  .fee-row-billed, .hours-row-book{ grid-column: 1; grid-row: 3; }
  .hours-why{ grid-row: 4; }
  .settings-check, .settings-fees{ padding: 16px; }
}
.hours-ok.is-off{ color: var(--amber, #a35f10); }

/* ---------------------------------------------------------------------------
 * SETTINGS, IN THE ORDER SOMEBODY NEEDS IT
 *
 * The screen was 4,194px and the first control a person could actually change
 * — the practice's own name — was at y=3,213, three screens down. Above it sat
 * six deployment environment variables in monospace filling the entire first
 * screen, and twelve fee rows drawn before anybody typed a search. Measured:
 * zero interactive elements in the first 900px.
 *
 * Nothing was deleted. Two blocks moved below the settings they were sitting on
 * top of, and both fold shut, because neither is a setting:
 *
 *   - The gates are deployment state. They cannot be changed from a browser by
 *     design, so a control-shaped wall of them above the controls is the wrong
 *     way round. The hero still states the count in the first line of the page.
 *   - The hours check is a diagnosis, not a form. Its verdict is one sentence,
 *     and that sentence is now on the fold; the seven weekday rows behind it
 *     are what you open when the verdict says to.
 *
 * Same shape as the roster cards on Staff and the drawers in
 * settings-condense.css: title, one line saying what is inside, a chevron.
 * ------------------------------------------------------------------------- */

.settings-fold{
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.settings-fold > summary{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}
.settings-fold > summary::-webkit-details-marker{ display: none; }
.settings-fold > summary:hover{ background: #f8faf7; }

.settings-fold-title{ font-size: 15px; font-weight: 650; }
.settings-fold-note{
  grid-column: 1;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.settings-fold-chevron{
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--muted);
  font-size: 15px;
  transition: transform .15s ease;
}
.settings-fold[open] > summary{ border-bottom: 1px solid var(--line); }
.settings-fold[open] > summary .settings-fold-chevron{ transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce){
  .settings-fold-chevron{ transition: none; }
}

.settings-fold-body{ padding: 16px 20px 20px; }
/* The two blocks inside already carry their own frames. Nested inside a fold
 * that has one, they would be a box in a box. */
.settings-fold-body > .settings-check,
.settings-fold-body > .settings-state{
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background: none;
}
.settings-fold-body > .detail{ margin: 0 0 14px; max-width: 74ch; }

/* The deployment switch's name, demoted.
 *
 * It was set in <code> at the head of the page, which is what made Settings
 * read as source code rather than as settings — the same complaint the owner
 * made about Scribe. The English sentence is the row now; the variable name
 * follows it as a plain aside, for the one person who has to go and change it.
 */
.settings-state-var{ opacity: .8; }

/* The fee list is a click, not a wall. */
.link-btn{
  border: 0;
  padding: 0;
  background: none;
  color: var(--green);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* --- scribe.css --- */
.scribe-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 18px;
}

.scribe-capture,
.scribe-safety,
.scribe-draft {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow);
}

.scribe-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.scribe-status strong,
.scribe-status small {
  display: block;
}

.scribe-status small {
  color: var(--muted);
  margin-top: 4px;
}

#scribeForm {
  display: grid;
  gap: 16px;
}

.transcript-entry label,
.scribe-note-form label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
}

.scribe-capture input,
.scribe-capture textarea,
.scribe-note-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px;
  color: var(--ink);
  background: #fbfcfa;
  font: inherit;
  line-height: 1.55;
}

.scribe-capture input {
  min-height: 48px;
  font-size: 17px;
}

.scribe-patient-picker {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfa;
}

.picker-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.picker-heading strong,
.picker-heading small,
.selected-scribe-patient span,
.selected-scribe-patient strong,
.selected-scribe-patient small {
  display: block;
}

.picker-heading small,
.scribe-picker-privacy,
.picker-empty,
.scribe-patient-results > small {
  color: var(--muted);
  font-size: 12px;
}

.picker-heading small {
  margin-top: 3px;
}

.scribe-patient-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 6px;
  scrollbar-width: thin;
}

.scribe-patient-option {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  min-width: 150px;
  max-width: 230px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 13px;
  color: var(--ink);
  background: white;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.scribe-patient-option strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scribe-patient-option span,
.scribe-patient-option small {
  color: var(--muted);
  font-size: 11px;
}

.scribe-patient-option small {
  grid-column: 1 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scribe-patient-option.is-selected {
  border-color: var(--green);
  color: white;
  background: var(--green);
  box-shadow: 0 8px 18px rgba(27, 107, 75, .18);
}

.scribe-patient-option.is-selected span,
.scribe-patient-option.is-selected small {
  color: rgba(255,255,255,.82);
}

.selected-scribe-patient {
  max-width: 190px;
  border-radius: 999px;
  padding: 7px 12px;
  color: white;
  background: var(--green);
  text-align: right;
}

.selected-scribe-patient span,
.selected-scribe-patient small {
  color: rgba(255,255,255,.78);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.selected-scribe-patient strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scribe-patient-search {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  background: white;
}

.scribe-patient-search input {
  min-height: 44px;
  border: 0;
  padding-left: 0;
  background: transparent;
  font-size: 15px;
}

.scribe-patient-results {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.manual-patient-entry {
  font-size: 12px;
}

.manual-patient-entry summary {
  width: fit-content;
  color: var(--green);
  font-weight: 800;
  cursor: pointer;
}

.manual-patient-entry label {
  display: grid;
  gap: 6px;
  max-width: 220px;
  margin-top: 10px;
  font-weight: 700;
}

.manual-patient-entry input {
  min-height: 42px;
  font-size: 15px;
}

.scribe-picker-privacy,
.picker-empty {
  margin: 0;
  line-height: 1.45;
}

.scribe-capture textarea,
.scribe-note-form textarea {
  resize: vertical;
}

.record-zone {
  display: grid;
  justify-items: center;
  gap: 11px;
  padding: 12px 0 4px;
}

.record-scribe {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  width: 158px;
  height: 158px;
  border: 7px solid #dcefe3;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 18px 35px rgba(27, 107, 75, .2);
  transition: transform .16s, background .16s, border-color .16s;
}

.record-scribe:active {
  transform: scale(.97);
}

.record-scribe:disabled {
  cursor: wait;
  opacity: .62;
}

.record-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
}

.record-scribe.is-recording {
  border-color: #f3d9d6;
  background: var(--red);
  animation: record-pulse 1.8s infinite;
}

.record-scribe.is-recording .record-icon {
  border-radius: 6px;
}

@keyframes record-pulse {
  50% { box-shadow: 0 0 0 12px rgba(156, 64, 55, .12), 0 18px 35px rgba(156, 64, 55, .18); }
}

.scribe-timer {
  font-variant-numeric: tabular-nums;
  font-size: 25px;
  letter-spacing: .05em;
}

.recording-indicator {
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.recording-indicator i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--red);
}

.audio-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

#audioState {
  min-height: 40px;
  margin: 0;
  text-align: center;
}

.file-btn {
  position: relative;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  background: white;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.file-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.transcript-entry,
.transcript-review {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfa;
}

.transcript-entry summary,
.transcript-review summary {
  min-height: 46px;
  padding: 13px 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.transcript-entry[open] {
  padding: 0 14px 14px;
}

.transcript-entry[open] summary {
  margin: 0 -14px 12px;
  border-bottom: 1px solid var(--line);
}

.transcript-entry .primary-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
}

.scribe-result:empty {
  display: none;
}

.scribe-result .section-title {
  margin-top: 28px;
}

.scribe-safety {
  align-self: start;
  background: var(--ink);
  color: white;
}

.scribe-safety .eyebrow {
  color: #8bd2ae;
}

.scribe-safety h2 {
  font-family: Georgia, serif;
  font-weight: 500;
}

.scribe-safety ul {
  padding-left: 18px;
  color: #dfe8e1;
  line-height: 1.7;
}

.scribe-drafts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.scribe-result .scribe-draft {
  max-width: 780px;
}

.scribe-draft header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.scribe-draft header strong {
  display: block;
  margin-top: 8px;
}

.scribe-draft header small {
  color: var(--muted);
}

.transcript-review {
  margin-bottom: 14px;
}

.transcript-review p {
  max-height: 180px;
  overflow-y: auto;
  margin: 0;
  padding: 0 14px 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.scribe-note-form {
  display: grid;
  gap: 14px;
}

.scribe-note-form label > span,
.reviewed-note-field > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.scribe-note-form textarea {
  min-height: 92px;
}

.draft-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}

.draft-actions button {
  min-height: 48px;
}

.draft-save-state {
  color: var(--muted);
  line-height: 1.45;
}

.reviewed-note-field {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}

.reviewed-note-field p {
  margin: 5px 0 0;
  line-height: 1.5;
}

.scribe-approved-artifact {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8faf8;
}

.scribe-approved-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.scribe-approved-heading > div {
  display: grid;
  gap: 3px;
}

.scribe-approved-heading > div > span,
.scribe-approved-meta dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.scribe-approved-artifact pre {
  max-height: 520px;
  overflow: auto;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.scribe-approved-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.scribe-approved-meta div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.scribe-approved-meta .is-digest {
  grid-column: 1 / -1;
}

.scribe-approved-meta dd {
  margin: 0;
  font-size: 13px;
}

.scribe-approved-meta code,
.scribe-approved-chart code {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.scribe-approved-chart {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid #c7d8cf;
  border-radius: 10px;
  background: #f2f7f4;
  font-size: 12px;
  line-height: 1.45;
}

.scribe-approved-chart span,
.scribe-approved-chart small {
  color: var(--muted);
}

.scribe-approved-chart.is-stale,
.scribe-approved-chart.is-unknown {
  border-color: #d9ad66;
  background: #fff8e9;
  color: #754408;
}

.scribe-approved-chart.is-synthetic {
  border-color: #aaa6d3;
  background: #f5f3ff;
  color: #514c82;
}

.approval-state {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.form-error {
  color: var(--red);
  font-weight: 700;
}

@media (max-width: 900px) {
  .scribe-layout {
    grid-template-columns: 1fr;
  }

  .scribe-safety {
    order: 2;
  }

  .scribe-drafts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .scribe-hero {
    margin-bottom: 20px;
  }

  .scribe-hero h1 {
    font-size: 35px;
  }

  .scribe-capture,
  .scribe-safety,
  .scribe-draft {
    padding: 18px;
  }

  .record-scribe {
    width: 164px;
    height: 164px;
  }

  .audio-actions > * {
    flex: 1 1 150px;
    text-align: center;
  }

  .draft-actions {
    flex-direction: column-reverse;
  }

  .draft-actions button {
    width: 100%;
  }

  .scribe-draft {
    scroll-margin-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .scribe-approved-meta {
    grid-template-columns: 1fr;
  }

  .scribe-approved-meta .is-digest {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .record-scribe.is-recording {
    animation: none;
  }
}

.coding-suggestions{margin:14px 0;border:1px solid var(--line,#d8e1dc);border-radius:14px;padding:12px 14px;background:#fbfdfc}
.coding-suggestions>summary{cursor:pointer;font-weight:700}
.coding-suggestions ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.coding-row{border:1px solid var(--line,#d8e1dc);border-radius:11px;padding:10px 12px;background:#fff}
.coding-row>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.coding-row strong{font-variant-numeric:tabular-nums;margin-right:8px}
.coding-row span{color:var(--muted,#55706d)}
.coding-row em{font-style:normal;font-weight:700}
.coding-row small{display:block;text-align:right;color:var(--muted,#55706d);font-size:.78rem}
.coding-row p{margin:6px 0 0;font-size:.86rem;color:var(--muted,#55706d)}
.coding-row.is-low{opacity:.82}
.coding-flag{margin:8px 0 0;padding:9px 11px;border-radius:10px;background:#fff6e8;border:1px solid #f0dcc0;font-size:.88rem}
.coding-boundary{display:block;margin-top:10px;color:var(--muted,#55706d)}
.coding-row.is-unsettled strong{font-size:.86em;font-weight:700;letter-spacing:.01em}
.coding-row.is-unsettled em{color:#8a6a2f}
.coding-discussed{margin:10px 0 0;padding:9px 11px;border-radius:10px;background:#f2f5f4;border:1px solid var(--line,#d8e1dc);font-size:.86rem;color:var(--muted,#55706d)}

/* ---------------------------------------------------------------------------
 * OPEN WORK
 *
 * The list of everything documented and not signed — dictated notes and perio
 * charts left partway. Appended as its own block rather than woven into the
 * rules above, so a later change here cannot alter the capture form.
 *
 * Rows are a two-column grid that becomes one column under 720px; nothing has
 * a fixed width and nothing scrolls sideways, because this list is read on a
 * phone in an operatory as often as on a monitor.
 * ------------------------------------------------------------------------- */
.scribe-open{margin:8px 0 4px}

.scribe-open-controls{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:space-between;margin:0 0 14px;
}

.scribe-filters{display:flex;flex-wrap:wrap;gap:8px}

.scribe-filter{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line,#d8e1dc);border-radius:999px;
  background:var(--card,#fff);color:var(--ink,#17231e);
  padding:7px 14px;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;
  transition:background var(--arc-t-fast,140ms) var(--arc-ease,ease),
             border-color var(--arc-t-fast,140ms) var(--arc-ease,ease),
             transform var(--arc-t-press,90ms) var(--arc-ease,ease);
}
.scribe-filter span{
  font-variant-numeric:tabular-nums;font-weight:700;
  color:var(--muted,#55706d);
}
.scribe-filter:hover{border-color:var(--green,#1b6b4b)}
.scribe-filter:active{transform:translate3d(0,1px,0)}
.scribe-filter.is-active{background:var(--green,#1b6b4b);border-color:var(--green,#1b6b4b);color:#fff}
.scribe-filter.is-active span{color:rgba(255,255,255,.82)}
.scribe-filter.is-urgent:not(.is-active){border-color:#e0c39a;background:#fff8ee}
.scribe-filter.is-urgent:not(.is-active) span{color:#8a5b12}

.scribe-open-search{
  display:flex;align-items:center;gap:8px;flex:1 1 220px;max-width:340px;
  border:1px solid var(--line,#d8e1dc);border-radius:12px;
  background:var(--card,#fff);padding:8px 12px;color:var(--muted,#55706d);
}
.scribe-open-search input{border:0;background:none;font:inherit;width:100%;outline:none;color:var(--ink,#17231e)}

.scribe-open-list{display:grid;gap:10px}

.scribe-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 18px;
  align-items:start;
  border:1px solid var(--line,#d8e1dc);border-left:3px solid var(--line,#d8e1dc);
  border-radius:14px;background:var(--card,#fff);padding:14px 16px;
  transition:border-color var(--arc-t-fast,140ms) var(--arc-ease,ease),
             box-shadow var(--arc-t-fast,140ms) var(--arc-ease,ease);
}
.scribe-row:hover{box-shadow:var(--arc-lift-soft,0 6px 18px rgba(31,51,40,.09))}
.scribe-row.is-note{border-left-color:var(--green,#1b6b4b)}
.scribe-row.is-chart{border-left-color:#4b7fa8}
.scribe-row.is-waiting{background:#fdfcf8}
.scribe-row.is-stale{border-left-color:var(--amber,#a35f10);background:#fff8ee}

.scribe-row-main{min-width:0}
.scribe-row-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.scribe-row-head strong{font-size:1.02rem}
.scribe-age{
  font-size:.8rem;font-weight:700;letter-spacing:.01em;
  color:var(--muted,#55706d);
}
.scribe-row.is-stale .scribe-age{color:#8a5b12}

.scribe-row-basis{margin:5px 0 0;font-size:.86rem;color:var(--muted,#55706d)}
.scribe-gap{color:#8a5b12;font-weight:600}
.scribe-full{color:var(--green,#1b6b4b);font-weight:600}
.scribe-row-preview{margin:6px 0 0;font-size:.9rem;line-height:1.5}

.scribe-progress{
  margin-top:9px;height:5px;border-radius:999px;background:#e6ecea;overflow:hidden;
}
.scribe-progress i{
  display:block;height:100%;border-radius:999px;background:#4b7fa8;
  transition:width var(--arc-t-base,220ms) var(--arc-ease,ease);
}

.scribe-row-actions{display:flex;flex-direction:column;gap:7px;align-items:stretch}
.scribe-row-actions button{white-space:nowrap}
.scribe-row-actions .link-btn{
  border:0;background:none;font:inherit;font-size:.82rem;
  color:var(--muted,#55706d);text-decoration:underline;cursor:pointer;padding:2px;
}
.scribe-row-actions .link-btn:hover{color:var(--green,#1b6b4b)}

.scribe-row-open{grid-column:1/-1;border-top:1px solid var(--line,#d8e1dc);padding-top:12px}
.scribe-row-open .scribe-draft{border:0;padding:0;box-shadow:none;background:none}

.scribe-open-empty{
  margin:0;padding:20px 22px;border:1px dashed var(--line,#d8e1dc);border-radius:14px;
  background:var(--card,#fff);color:var(--muted,#55706d);line-height:1.55;
}

/* Signed notes: present, collapsed, and only the failed writes carry a button. */
.scribe-signed-wrap{margin:22px 0 8px}
.scribe-signed{
  border:1px solid var(--line,#d8e1dc);border-radius:14px;
  background:var(--card,#fff);padding:12px 16px;
}
.scribe-signed>summary{cursor:pointer;font-weight:700;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.scribe-signed>summary span{font-weight:500;font-size:.86rem;color:var(--muted,#55706d)}
.scribe-signed-row{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  padding:9px 0;border-top:1px solid var(--line,#eef2f0);
}
.scribe-signed-row small{display:block;font-size:.8rem;color:var(--muted,#55706d)}
.scribe-signed-row.is-failed strong{color:var(--red,#9c4037)}
.scribe-signed-row.is-ambiguous{
  margin:6px -8px;padding:11px 8px;border:1px solid #c98238;border-radius:10px;background:#fff7e9;
}
.scribe-signed-row.is-ambiguous strong,.scribe-ambiguous-detail{color:#7b4308!important}
.scribe-ambiguous-detail{max-width:620px;margin-top:3px;line-height:1.4;font-weight:650}
.scribe-signed-quiet{font-size:.8rem;color:var(--muted,#55706d)}

@media (max-width:720px){
  .scribe-row{grid-template-columns:minmax(0,1fr)}
  .scribe-row-actions{flex-direction:row;flex-wrap:wrap}
  .scribe-row-actions button{flex:1 1 auto}
  .scribe-open-search{max-width:none}
  .scribe-filter{font-size:.82rem;padding:6px 12px}
}

@media (prefers-reduced-motion:reduce){
  .scribe-filter,.scribe-row,.scribe-progress i{transition:none}
}

.scribe-signed-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.scribe-signed-actions .link-btn{
  border:0;background:none;font:inherit;font-size:.82rem;
  color:var(--muted,#55706d);text-decoration:underline;cursor:pointer;padding:2px;
}
.scribe-signed-actions .link-btn:hover{color:var(--green,#1b6b4b)}
.scribe-signed-note{flex-basis:100%;padding-top:8px}
.scribe-signed-note .scribe-draft{border:0;padding:0;box-shadow:none;background:none}

/* ===================================================================
   The rebuilt Scribe: tabs, capture modes, the review, the structures.

   Appended as a scoped block rather than woven into the rules above, so
   the older selectors this screen still shares with the Quarterback
   workflow keep working untouched.

   Entrances are movement, per motion.css: a throttled tab never runs an
   animation, and content parked at opacity 0 waiting for one is content
   that can be invisible forever.
   =================================================================== */

.scribe-tabs{
  display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px;padding:5px;
  border:1px solid var(--line,#d8e1dc);border-radius:14px;background:var(--card,#fff);
  width:fit-content;max-width:100%;
}
.scribe-tab{
  display:flex;align-items:center;gap:8px;border:0;border-radius:10px;
  padding:9px 16px;min-height:42px;background:none;font:inherit;font-weight:680;
  color:var(--muted,#55706d);cursor:pointer;white-space:nowrap;
  transition:background-color var(--arc-t-fast,140ms) var(--arc-ease,ease),
             color var(--arc-t-fast,140ms) var(--arc-ease,ease);
}
.scribe-tab:hover{background:#f1f5f2;color:var(--ink,#17231e)}
.scribe-tab.is-active{background:var(--ink,#17231e);color:#fff}
.scribe-tab span{
  font-size:.76rem;font-weight:750;padding:2px 7px;border-radius:999px;
  background:rgba(0,0,0,.07);
}
.scribe-tab.is-active span{background:rgba(255,255,255,.18)}

@keyframes scribe-tab-in{ from{ transform:translateY(10px); } }
.scribe-tab-body{ animation:scribe-tab-in var(--arc-t-base,220ms) var(--arc-ease,ease); }

/* --- capture modes ------------------------------------------------ */

.scribe-processing-card{
  display:grid;gap:12px;margin-bottom:18px;padding:17px 18px;
  border:1px solid #d4a45a;border-radius:16px;background:#fff9ed;
}
.scribe-processing-card.is-approved{border-color:#91b29b;background:#f1f8f3}
.scribe-processing-card>header{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:0;
}
.scribe-processing-card>header h2{margin:2px 0 0;font-size:1.05rem}
.scribe-processing-card>header .eyebrow{margin:0;color:var(--muted,#55706d)}
.scribe-processing-card>.detail{margin:0;line-height:1.5}
.scribe-processing-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.scribe-processing-routes>div{
  display:grid;align-content:start;gap:5px;min-width:0;padding:11px 12px;
  border:1px solid var(--line,#d8e1dc);border-radius:11px;background:rgba(255,255,255,.78);
}
.scribe-processing-routes strong{font-size:.79rem}
.scribe-processing-routes code{
  width:fit-content;max-width:100%;padding:2px 6px;border-radius:5px;background:#edf1ee;
  font-size:.7rem;line-height:1.35;overflow-wrap:anywhere;word-break:break-word;
}
.scribe-processing-routes span{font-size:.76rem;line-height:1.45;color:var(--muted,#55706d)}
.scribe-processing-decision{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:2px;
}
.scribe-processing-decision>p{flex:1 1 420px;margin:0;font-size:.82rem;line-height:1.5}
.scribe-processing-decision>label{
  display:flex;align-items:flex-start;gap:9px;flex:1 1 100%;padding:11px 12px;
  border:1px solid var(--line,#d8e1dc);border-radius:10px;background:#fff;
  font-size:.8rem;line-height:1.45;
}
.scribe-processing-decision>label input{width:18px;height:18px;margin-top:1px;flex:0 0 auto}
.scribe-processing-decision>label span{display:grid;gap:2px}
.scribe-processing-decision>small{flex:1 1 100%;color:var(--muted,#55706d);line-height:1.45}
.scribe-processing-decision.is-disabled{color:#754408}

.scribe-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}
.scribe-mode{
  display:grid;gap:6px;text-align:left;padding:16px 18px;border-radius:16px;
  border:1px solid var(--line,#d8e1dc);background:var(--card,#fff);font:inherit;cursor:pointer;
  transition:border-color var(--arc-t-fast,140ms) var(--arc-ease,ease),
             background-color var(--arc-t-fast,140ms) var(--arc-ease,ease),
             box-shadow var(--arc-t-fast,140ms) var(--arc-ease,ease);
}
.scribe-mode-note{display:none}
.scribe-mode strong{font-size:1rem}
.scribe-mode span{font-size:.84rem;color:var(--muted,#55706d);line-height:1.5}
.scribe-mode:hover{border-color:#9fb5a7}
.scribe-mode.is-chosen{
  border-color:var(--green,#1b6b4b);background:var(--green-soft,#e5f1e9);
  box-shadow:0 0 0 3px rgba(27,107,75,.09);
}
.scribe-mode.is-chosen span{color:#3c5a4c}

/* --- composing ---------------------------------------------------- */

/* One column. The second held the HARD BOUNDARY aside, which is gone -- every
 * sentence in it was already said where it mattered -- and the work had been
 * living in 60% of the screen to make room for it. */
.scribe-compose{display:grid;gap:16px;align-items:start}
.scribe-compose-main{
  display:grid;gap:16px;padding:22px;border:1px solid var(--line,#d8e1dc);
  border-radius:18px;background:var(--card,#fff);box-shadow:var(--shadow);
}


.scribe-patient-chosen{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:13px;background:#f2f6f3;border:1px solid var(--line,#d8e1dc);
}
.scribe-patient-chosen span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--muted,#55706d)}
.scribe-patient-chosen strong{font-size:1.05rem}
.scribe-encounter-date{display:grid;gap:4px;margin-left:auto}
.scribe-encounter-date span{letter-spacing:.04em;text-transform:uppercase}
.scribe-encounter-date input{
  min-height:38px;border:1px solid var(--line,#d8e1dc);border-radius:9px;
  padding:7px 9px;font:inherit;background:#fff;color:var(--ink,#17231e);
}
.scribe-encounter-date input:disabled{opacity:1;background:#edf2ef;color:var(--ink,#17231e);font-weight:700}
.scribe-patient-chosen .link-btn{
  border:0;background:none;font:inherit;font-size:.84rem;color:var(--green,#1b6b4b);
  text-decoration:underline;cursor:pointer;
}
.scribe-patient-pick{display:grid;gap:10px}
.scribe-patient-pick-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.scribe-patient-pick-head small{color:var(--muted,#55706d);font-size:.8rem}
.scribe-patient-chips{display:flex;gap:8px;flex-wrap:wrap}
.scribe-chip{
  display:grid;gap:2px;text-align:left;padding:9px 13px;border-radius:11px;
  border:1px solid var(--line,#d8e1dc);background:#fff;font:inherit;cursor:pointer;
  transition:border-color var(--arc-t-fast,140ms) var(--arc-ease,ease),
             background-color var(--arc-t-fast,140ms) var(--arc-ease,ease);
}
.scribe-chip strong{font-size:.9rem}
.scribe-chip span{font-size:.75rem;color:var(--muted,#55706d)}
.scribe-chip:hover{border-color:var(--green,#1b6b4b);background:var(--green-soft,#e5f1e9)}
.scribe-patient-results{display:flex;gap:8px;flex-wrap:wrap}
.scribe-patient-results small{color:var(--muted,#55706d);font-size:.82rem}

.scribe-record-row{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:16px;border-radius:16px;background:#f6f9f7;border:1px solid var(--line,#d8e1dc);
}
.scribe-record-row .record-scribe{margin:0}
.scribe-capture-consent{
  display:flex;gap:10px;align-items:flex-start;padding:13px 14px;border:1px solid #d6c18f;
  border-radius:12px;background:#fff9eb;color:var(--ink,#17231e);font-size:.84rem;line-height:1.45;
}
.scribe-capture-consent input{width:18px;height:18px;margin-top:2px;flex:0 0 auto}
.scribe-capture-consent span{display:grid;gap:2px}
.scribe-capture-consent strong{font-size:.86rem}
.file-btn.is-disabled{opacity:.5;cursor:not-allowed}
.scribe-record-side{display:grid;gap:4px;flex:1 1 220px;min-width:0}
.scribe-record-side .scribe-timer{font-size:1.3rem;font-variant-numeric:tabular-nums}
.scribe-record-side .detail{font-size:.8rem;line-height:1.45}
/* Muted, but a pointer: pressing it now scrolls to the approval that unblocks
   it, so not-allowed would be a lie about what the click does. */
.record-scribe.is-unavailable{opacity:.45;cursor:pointer}

.scribe-transcript{display:grid;gap:7px;font-size:.78rem;font-weight:750;color:var(--muted,#55706d)}
.scribe-transcript textarea{
  width:100%;border:1px solid var(--line,#d8e1dc);border-radius:12px;padding:12px;
  font:inherit;line-height:1.55;color:var(--ink,#17231e);background:#fbfcfa;resize:vertical;
}
.scribe-compose-actions{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.scribe-template-pick{display:grid;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--muted,#55706d)}
.scribe-template-pick select,.scribe-template-choose select{
  min-height:42px;border:1px solid var(--line,#d8e1dc);border-radius:10px;
  padding:9px 11px;font:inherit;background:#fff;color:var(--ink,#17231e);
}

.scribe-draft-host{margin-top:18px}
.scribe-live-empty{
  display:grid;gap:6px;padding:22px;border:1px dashed var(--line,#d8e1dc);
  border-radius:16px;background:var(--card,#fff);
}
.scribe-live-empty span{color:var(--muted,#55706d);font-size:.86rem;line-height:1.55}

/* --- the note editor ---------------------------------------------- */

.scribe-note-editor{
  display:grid;gap:13px;padding:22px;border:1px solid var(--line,#d8e1dc);
  border-radius:18px;background:var(--card,#fff);box-shadow:var(--shadow);
}
.scribe-note-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.scribe-note-head small{display:block;color:var(--muted,#55706d);font-size:.8rem;margin-top:2px}
.scribe-signing-identity{display:grid;gap:2px}
.scribe-signing-identity>span,.workflow-signing-identity>small{
  display:block;color:var(--ink,#17231e);font-size:.84rem;font-weight:750;
}
.scribe-live-pill{
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--green-soft,#e5f1e9);color:var(--green,#1b6b4b);
}
.scribe-note-field{display:grid;gap:6px;font-size:.78rem;font-weight:750;color:var(--muted,#55706d)}
.scribe-note-field textarea{
  width:100%;border:1px solid var(--line,#d8e1dc);border-radius:11px;padding:11px;
  font:inherit;line-height:1.55;color:var(--ink,#17231e);background:#fbfcfa;resize:vertical;
  transition:border-color var(--arc-t-fast,140ms) var(--arc-ease,ease);
}
.scribe-note-field textarea:focus{border-color:var(--green,#1b6b4b);outline:none}
.scribe-note-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.scribe-note-state{font-size:.82rem;color:var(--muted,#55706d)}
.scribe-codes,.scribe-source{
  border:1px solid var(--line,#d8e1dc);border-radius:12px;padding:10px 14px;background:#fbfcfa;
}
.scribe-codes summary,.scribe-source summary{cursor:pointer;font-size:.84rem;font-weight:700}
.scribe-codes div{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--line,#eef2f0);font-size:.84rem}
.scribe-codes span{color:var(--muted,#55706d)}
.scribe-source p{margin:8px 0 0;font-size:.84rem;line-height:1.6;color:#3d4a43}
.scribe-review-confirm{
  display:flex;gap:9px;align-items:flex-start;padding:12px 13px;border:1px solid var(--line,#d8e1dc);
  border-radius:11px;background:#f6f9f7;font-size:.84rem;line-height:1.45;font-weight:650;
}
.scribe-review-confirm input{width:18px;height:18px;margin-top:1px;flex:0 0 auto}
.scribe-review-reason{display:grid;gap:8px;padding:14px 16px;border:1px solid var(--line,#d8e1dc);border-radius:12px;background:#f7faf8}
.scribe-review-reason[hidden]{display:none}
.scribe-open-checks-title{font-size:.92rem;color:var(--ink,#17231e)}
.scribe-open-checks-lede{margin:0;font-size:.82rem;font-weight:500;line-height:1.45;color:var(--muted,#55706d)}
.scribe-open-checks{display:grid;gap:6px}
.scribe-open-check{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:9px;background:#fff;border:1px solid var(--line,#d8e1dc);cursor:pointer}
.scribe-open-check[hidden]{display:none}
.scribe-open-check input{margin-top:3px;flex:none;width:18px;height:18px}
.scribe-open-check span{display:grid;gap:1px}
.scribe-open-check strong{font-size:.86rem;font-weight:650;color:var(--ink,#17231e)}
.scribe-open-check small{font-size:.76rem;font-weight:500;color:var(--muted,#55706d)}
.scribe-open-check:has(input:checked){border-color:var(--teal,#1f7a6c);background:#eef7f4}
.scribe-reason-note summary{cursor:pointer;font-size:.8rem;font-weight:600;color:var(--teal,#1f7a6c)}
.scribe-reason-note textarea{margin-top:6px;width:100%}
.scribe-review-reason,.workflow-review-reason{display:grid;gap:6px;font-size:.78rem;font-weight:750;color:var(--muted,#55706d)}
.scribe-review-reason textarea,.workflow-review-reason textarea,.workflow-review-reason input{
  width:100%;border:1px solid var(--line,#d8e1dc);border-radius:10px;padding:10px;
  font:inherit;line-height:1.45;color:var(--ink,#17231e);background:#fbfcfa;resize:vertical;
}
.workflow-review-confirm{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;line-height:1.45;margin-top:10px}
.workflow-review-confirm input{width:17px;height:17px;margin-top:1px;flex:0 0 auto}
.scribe-chart-context,.workflow-chart-context{
  display:grid;gap:4px;margin:0 0 12px;padding:12px 14px;border:1px solid #c7d8cf;
  border-radius:12px;background:#f2f7f4;font-size:.8rem;line-height:1.45;
}
.scribe-chart-context span,.workflow-chart-context span{color:var(--muted,#55706d)}
.scribe-chart-context.is-stale,.scribe-chart-context.is-unknown,
.workflow-chart-context.is-stale,.workflow-chart-context.is-unknown{
  border-color:#d9ad66;background:#fff8e9;color:#754408;
}
.scribe-chart-context.is-synthetic,.workflow-chart-context.is-synthetic{
  border-color:#aaa6d3;background:#f5f3ff;color:#514c82;
}
.workflow-signing-identity{display:grid;gap:2px}
.workflow-check-summary{display:grid;gap:8px;margin-bottom:12px}
.workflow-check-summary>div{display:grid;gap:6px}
.workflow-check-summary span{
  display:flex;justify-content:space-between;gap:10px;padding:7px 9px;
  border-radius:8px;background:#f3f6f4;font-size:.78rem;
}
.workflow-check-summary span.is-missing{background:#fff4df;color:#80480c}
.workflow-check-summary small{color:inherit}
.workflow-source{margin:10px 0;padding:9px 11px;border:1px solid var(--line,#d8e1dc);border-radius:9px}
.workflow-source summary{cursor:pointer;font-size:.8rem;font-weight:700}
.workflow-source p{font-size:.82rem;line-height:1.5;color:var(--muted,#55706d)}

/* --- the review --------------------------------------------------- */

.scribe-open-review{margin-top:14px}
.scribe-checklist{
  display:grid;gap:12px;padding:20px;border:1px solid var(--line,#d8e1dc);
  border-radius:18px;background:var(--card,#fff);
}
.scribe-checklist .section-title{margin:0}
.scribe-checklist .section-title h3{margin:0;font-size:1rem}
.scribe-verdict{
  margin:0;font-size:.86rem;font-weight:680;padding:9px 13px;border-radius:11px;
}
.scribe-verdict.is-ready{background:var(--green-soft,#e5f1e9);color:var(--green,#1b6b4b)}
.scribe-verdict.is-thin{background:var(--amber-soft,#f9ecd6);color:var(--amber,#a35f10)}
.scribe-row .scribe-verdict{display:inline-block;margin-top:8px;font-size:.78rem;padding:5px 10px}

.scribe-check-group{border-top:1px solid var(--line,#eef2f0);padding-top:10px}
.scribe-check-group h4{
  margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted,#55706d);
}
.scribe-check{
  display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:start;
  padding:7px 0;
}
.scribe-check strong{font-size:.88rem;font-weight:650}
.scribe-check small{display:block;font-size:.79rem;color:var(--muted,#55706d);line-height:1.45}
.scribe-check-state{font-size:.72rem;color:var(--muted,#55706d);white-space:nowrap}
.scribe-check-mark{
  width:12px;height:12px;border-radius:50%;margin-top:4px;
  border:2px solid var(--line,#d8e1dc);background:#fff;
}
.scribe-check.is-present .scribe-check-mark{border-color:var(--green,#1b6b4b);background:var(--green,#1b6b4b)}
.scribe-check.is-missing .scribe-check-mark{border-color:var(--amber,#a35f10);background:var(--amber-soft,#f9ecd6)}
.scribe-check.is-missing strong{color:var(--amber,#a35f10)}
.scribe-check.is-not_applicable{opacity:.55}

.scribe-questions{
  display:grid;gap:12px;margin-top:14px;padding:20px;
  border:1px solid #e2d3b4;border-radius:18px;background:linear-gradient(150deg,#fdf7ec,#fff);
}
.scribe-questions .section-title{margin:0}
.scribe-questions .section-title h3{margin:0;font-size:1rem}
@media(max-width:640px){
  .scribe-questions .section-title{display:grid;gap:6px;align-items:start}
  .scribe-questions .section-title>span{line-height:1.5;text-align:left}
  .scribe-question-prompt .scribe-procedure-tag{
    display:block;width:fit-content;max-width:100%;margin:6px 0 0;
    white-space:normal;line-height:1.45;
  }
}
.scribe-question{border-top:1px solid #efe4cf;padding-top:11px}
.scribe-question-prompt{margin:0 0 3px;font-weight:680;font-size:.92rem}
.scribe-question-why{margin:0 0 8px;font-size:.79rem;color:var(--muted,#55706d);line-height:1.45}
.scribe-questions .scribe-answer-row{display:flex;gap:8px;align-items:center}
.scribe-questions .scribe-answer{
  flex:1;min-height:42px;border:1px solid var(--line,#d8e1dc);border-radius:10px;
  padding:9px 11px;font:inherit;background:#fff;
}
.scribe-question-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.scribe-question-state{font-size:.82rem;color:var(--muted,#55706d)}
.icon-btn{
  display:grid;place-items:center;min-width:42px;min-height:42px;border-radius:10px;
  border:1px solid var(--line,#d8e1dc);background:#fff;cursor:pointer;color:var(--ink,#17231e);
}
.icon-btn.is-listening{border-color:var(--red,#9c4037);color:var(--red,#9c4037)}

.scribe-capture-tag{
  font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;
  background:#eef2f0;color:var(--muted,#55706d);
}
.scribe-capture-tag.is-mock{background:#fff0d2;color:#8b4d05;border:1px solid #e7bd73}
.scribe-generation-warning{
  display:grid;gap:3px;padding:12px 14px;border:1px solid #d7a64e;
  border-left-width:5px;border-radius:12px;background:#fff8e8;color:#6c3d08;
  font-size:.82rem;line-height:1.45;
}
.scribe-generation-warning strong{font-size:.88rem;color:#633605}
.scribe-generation-warning span{display:block}
.scribe-generation-warning.is-unavailable{
  border-color:#b96359;background:#fff1ef;color:#74342e;
}
.scribe-generation-warning.is-unavailable strong{color:#74342e}
.scribe-generation-warning.is-human{
  border-color:#71987e;background:#eef7f1;color:#285c3d;
}
.scribe-generation-warning.is-human strong{color:#285c3d}
/* Not amber. Arc writing nothing about a thin start is the correct outcome,
   not a fault, and the questions under it are the next step rather than a
   recovery. Warning colours here are what made the old red banner read as an
   accusation. */
.scribe-generation-warning.is-unwritten{
  border-color:#8d97ab;background:#f3f5f9;color:#37415a;
}
.scribe-generation-warning.is-unwritten strong{color:#37415a}
.scribe-row .scribe-generation-warning{margin-top:9px;padding:9px 11px;font-size:.76rem}
.workflow-artifact>.scribe-generation-warning,.scribe-draft>.scribe-generation-warning{margin:10px 0 14px}

/* --- note structures ---------------------------------------------- */

.scribe-templates{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);gap:18px;align-items:start}
.scribe-template-pane .section-title{margin-top:0}
.scribe-template-choose{display:grid;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--muted,#55706d);margin-bottom:14px}
.scribe-template-detail{
  display:grid;gap:11px;padding:22px;border:1px solid var(--line,#d8e1dc);
  border-radius:18px;background:var(--card,#fff);box-shadow:var(--shadow);
}
.scribe-template-detail header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.scribe-template-detail header strong{font-size:1.1rem;margin-right:8px}
.scribe-template-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.scribe-template-actions .link-btn{
  border:0;background:none;font:inherit;font-size:.84rem;text-decoration:underline;cursor:pointer;
  color:var(--muted,#55706d);
}
.scribe-template-actions .link-btn.is-danger{color:var(--red,#9c4037)}
.scribe-template-sections{margin:0;padding-left:20px;display:grid;gap:9px}
.scribe-template-sections li{padding-left:4px}
.scribe-template-sections strong{display:block;font-size:.92rem}
.scribe-template-sections span{font-size:.81rem;color:var(--muted,#55706d)}
.scribe-template-edit{display:grid;gap:11px;border-top:1px solid var(--line,#eef2f0);padding-top:13px}
.scribe-template-edit label,.scribe-template-proposal label{display:grid;gap:6px;font-size:.76rem;font-weight:750;color:var(--muted,#55706d)}
.scribe-template-edit input,.scribe-template-edit textarea,
.scribe-template-proposal input,.scribe-template-proposal textarea{
  width:100%;border:1px solid var(--line,#d8e1dc);border-radius:10px;padding:10px;
  font:inherit;background:#fbfcfa;color:var(--ink,#17231e);
}
.scribe-template-edit textarea,.scribe-template-proposal textarea{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;line-height:1.6;resize:vertical;
}
.scribe-template-make{
  display:grid;gap:11px;padding:22px;border:1px solid var(--line,#d8e1dc);
  border-radius:18px;background:linear-gradient(150deg,#f2faf6,#fff);
}
.scribe-template-make .section-title{margin:0}
.scribe-template-make .section-title h2{font-size:1.05rem}
.scribe-template-make .scribe-answer-row{display:flex;gap:8px;align-items:center}
.scribe-template-make input[type=text]{
  flex:1;min-height:44px;border:1px solid var(--line,#d8e1dc);border-radius:10px;
  padding:10px 12px;font:inherit;background:#fff;
}
.scribe-template-proposal{display:grid;gap:11px;margin-top:12px;padding:16px;border:1px solid var(--line,#d8e1dc);border-radius:14px;background:#fff}
.scribe-proposal-preview{
  padding:12px 14px;border-radius:12px;background:#f4f8f5;border:1px solid var(--line,#e4ebe6);
}
.scribe-proposal-preview strong{display:block;font-size:.8rem;margin-bottom:8px}
.inline-check{display:flex;gap:8px;align-items:center;font-size:.86rem;font-weight:600}
.inline-check input{width:16px;height:16px}

@media (max-width:1000px){
  .scribe-processing-routes{grid-template-columns:minmax(0,1fr)}
  .scribe-compose,.scribe-templates{grid-template-columns:minmax(0,1fr)}
  .scribe-modes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .scribe-tabs{width:100%;overflow-x:auto}
  .scribe-tab{flex:1 0 auto;padding:9px 12px;font-size:.86rem}
  .scribe-compose-main,.scribe-note-editor,.scribe-checklist,
  .scribe-template-detail,.scribe-template-make{padding:16px}
  .scribe-record-row{gap:12px}
  /* Full width, so it must stop being a circle.
   *
   * width:100% was set here while height:158px and border-radius:50% stayed
   * from the desktop rule, and a 100%-wide box with a 50% radius is an
   * ELLIPSE -- a 900px-wide green oval with the label floating in the middle.
   * A full-width primary action is a pill, and the icon sits beside the label
   * rather than above it. */
  .scribe-record-row .record-scribe{
    width:100%;
    height:auto;
    min-height:60px;
    padding:14px 20px;
    grid-auto-flow:column;
    grid-template-columns:auto auto;
    justify-content:center;
    border-radius:999px;
    border-width:3px;
    gap:12px;
  }
  .scribe-record-row .record-scribe .record-icon{width:20px;height:20px}
  .scribe-patient-chosen{align-items:flex-start;flex-wrap:wrap}
  .scribe-encounter-date{margin-left:0;flex:1 1 170px}
  .scribe-compose-actions>*{flex:1 1 100%}
  .scribe-processing-decision>button{width:100%}
  .scribe-check{grid-template-columns:16px minmax(0,1fr)}
  .scribe-check-state{grid-column:2;font-size:.7rem}
  .scribe-template-sections{padding-left:18px}
}

@media (prefers-reduced-motion:reduce){
  .scribe-tab,.scribe-mode,.scribe-chip,.scribe-note-field textarea{transition:none}
  .scribe-tab-body{animation:none}
}

/* The live conversation: the note on the left, what Arc is noticing on the
   right. It writes rather than speaks, so the questions accumulate in a rail
   instead of interrupting. */
.scribe-live{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:16px;align-items:start}
.scribe-live-rail{
  display:grid;gap:11px;padding:18px;border:1px solid #e2d3b4;border-radius:18px;
  background:linear-gradient(160deg,#fdf7ec,#fff);position:sticky;top:88px;
}
.scribe-rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.scribe-rail-head strong{font-size:.95rem}
.scribe-rail-head span{font-size:.76rem;font-weight:750;color:var(--amber,#a35f10)}
.scribe-rail-item{border-top:1px solid #efe4cf;padding-top:10px}
.scribe-rail-item:first-of-type{border-top:0;padding-top:0}
.scribe-rail-prompt{margin:0 0 3px;font-size:.88rem;font-weight:680;line-height:1.4}
.scribe-rail-why{margin:0 0 8px;font-size:.78rem;color:var(--muted,#55706d);line-height:1.45}
.scribe-rail-covered{margin:0;font-size:.78rem;color:var(--green,#1b6b4b);font-weight:650}
.scribe-rail-item.is-covered,.scribe-rail-item.is-answered{opacity:.7}
.scribe-rail-item.is-covered .scribe-rail-prompt,
.scribe-rail-item.is-answered .scribe-rail-prompt{font-weight:600;color:var(--muted,#55706d)}
.scribe-live-rail .scribe-answer-row{display:flex;gap:7px}
.scribe-live-rail .scribe-answer{
  flex:1;min-width:0;min-height:40px;border:1px solid var(--line,#d8e1dc);border-radius:9px;
  padding:8px 10px;font:inherit;font-size:.86rem;background:#fff;
}

@media (max-width:1000px){
  .scribe-live{grid-template-columns:minmax(0,1fr)}
  .scribe-live-rail{position:static}
}

/* Who wrote the note, who signed it, and which headings are a person's words.
 *
 * The signer line is not decoration: a progress note that cannot name who
 * signed it is not a defensible record, and until now this screen could not
 * show one because the column did not exist. */
.scribe-signed-by{ display:block; margin-top:2px; font-size:11.5px; font-weight:600;
                   color:var(--green,#1b6b4b) }
.scribe-note-field.is-held textarea{ border-color:#bed5c5; background:var(--green-soft,#f2f8f4) }
.scribe-held-note{ margin-left:8px; font-style:normal; font-size:10.5px; letter-spacing:.04em;
                   text-transform:uppercase; font-weight:700; color:var(--green,#1b6b4b) }

/* Getting the signed note out of Arc.
   The state is called approved_for_manual_entry and manual entry used to mean
   selecting a <pre> with a cursor, which on a phone is a long press and two
   drag handles. These sit directly under the signed text, above the metadata,
   because they are what a dentist wants the moment the note is signed. */
.scribe-approved-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.scribe-approved-actions .copy-state {
  font-size: 0.85rem;
  color: var(--muted, #566);
  min-height: 1.2em;
}

@media print {
  .scribe-approved-actions { display: none; }
}


/* -- Scribe: the job first ------------------------------------------------
 *
 * The processing decision used to open the Write tab, putting the record
 * button 2,150px down on a phone -- 2.6 screens of scrolling before a dentist
 * could start. It is a once-per-practice decision sitting on top of a
 * twice-a-day task, so it now follows the work in a collapsed disclosure.
 */
.scribe-processing-details{
  border:1px solid var(--line,#d8e1dc);border-radius:14px;background:#fbfcfa;
  margin-top:18px;
}
.scribe-processing-details > summary{
  cursor:pointer;padding:13px 16px;font-size:.86rem;font-weight:700;
  color:var(--muted,#55706d);list-style:none;
}
.scribe-processing-details > summary::-webkit-details-marker{display:none}
.scribe-processing-details > summary::after{content:' ▾';opacity:.6}
.scribe-processing-details[open] > summary::after{content:' ▴'}
.scribe-processing-details > summary:hover{color:var(--ink,#17231e)}
.scribe-processing-details .scribe-processing-card{
  border:0;margin:0;border-radius:0 0 14px 14px;
}
.scribe-processing-line{margin:0 0 10px;font-size:.88rem;line-height:1.5}


/* -- Scribe on a phone: get to the microphone ----------------------------
 *
 * Measured on a 375px viewport before this block: the record button sat
 * 1,220px down, and the two things above it were the mode cards (311px) and
 * the patient picker (412px). Both are choices a dentist makes in a second
 * and then never looks at again, printed at the size of an explanation.
 */
@media (max-width: 720px){
  /* Two paragraphs become a segmented control. The titles already say which
   * is which -- "You tell Arc what you did" versus "You and the patient
   * talking" -- so the blurb only shows for the one that is selected. */
  .scribe-modes{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;margin-bottom:14px;
    border:1px solid var(--line,#d8e1dc);border-radius:12px;overflow:hidden;
    background:var(--card,#fff);
  }
  .scribe-mode{
    padding:11px 12px;border:0;border-radius:0;text-align:center;gap:2px;
  }
  .scribe-mode + .scribe-mode{border-left:1px solid var(--line,#d8e1dc)}
  .scribe-mode strong{font-size:.86rem;line-height:1.3}
  /* The description moves out of the cell entirely -- see .scribe-mode-note. */
  .scribe-mode span{display:none}
  .scribe-mode.is-chosen span{display:none}
  .scribe-mode-note{
    display:block;margin:0 0 14px;padding:0 2px;
    font-size:.8rem;line-height:1.5;color:var(--muted,#55706d);
  }

  /* One row, scrolled sideways, rather than two stacked rows. */
  /* All four tabs on the screen. This scrolled sideways with the scrollbar
     hidden, and on a 375px phone the fourth tab sat entirely past the edge:
     "How I work" did not exist unless you happened to swipe a strip that
     gave no sign it could move. Two rows, nothing hidden. */
  .scribe-tabs{flex-wrap:wrap;overflow:visible;width:100%}
  .scribe-tab{flex:1 1 calc(50% - 6px);justify-content:center;white-space:normal;text-align:center}
  .scribe-tab{flex:0 0 auto;white-space:nowrap}

  /* The headline is a page title, not the work.
   * 35px over two lines plus a four-line summary was 370px of preamble. */
  /* The H1, not its container.
   * Setting this on .scribe-hero styled the WRAPPER, so the heading kept its
   * own 35px from the rule above and the summary paragraph inherited 1.45rem
   * -- making the block of preamble bigger, which is the opposite of the
   * point. There is an existing .scribe-hero h1 rule at 560px; this one is
   * scoped the same way. */
  .scribe-hero h1{font-size:1.45rem;line-height:1.25}
  .scribe-hero{margin-bottom:10px}
  .scribe-hero p, .scribe-hero .detail{font-size:.86rem;line-height:1.5}

  /* The dock floats over the bottom-right corner, so the last thing on the
   * page was permanently half-covered -- the patient search, as it happened.
   * Content scrolls clear of it instead. */
  .scribe-write{padding-bottom:64px}

  /* Today's chairs scroll instead of stacking.
   *
   * Every scheduled patient was printed as a full-width chip, so a normal day
   * pushed 412px of names between the dentist and the microphone. Two rows
   * are visible and the rest scrolls -- the list is a shortcut, and the search
   * box underneath is the answer for anyone not in the first few. */
  .scribe-patient-chips{
    max-height:104px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;
  }
  .scribe-patient-chips .scribe-chip{
    flex:1 1 calc(50% - 4px);min-width:0;padding:9px 11px;
  }
  .scribe-chip strong{font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .scribe-chip span{font-size:.75rem}

  /* A fallback for a search that fails. It does not need to be open. */
  .manual-patient-entry{font-size:.82rem}
}


/* The checks Arc did not need to run, kept reachable and out of the way.
 *
 * A two-check visit printed eleven rows, nine of them "Nothing in this visit
 * calls for it" -- so the two findings sat nine rows apart, under a header
 * that already said how many applied. */
.scribe-checks-skipped{
  margin-top:14px;border-top:1px solid var(--line,#d8e1dc);padding-top:12px;
}
.scribe-checks-skipped > summary{
  cursor:pointer;font-size:.8rem;font-weight:700;color:var(--muted,#55706d);
  list-style:none;
}
.scribe-checks-skipped > summary::-webkit-details-marker{display:none}
.scribe-checks-skipped > summary::after{content:' ▾';opacity:.6}
.scribe-checks-skipped[open] > summary::after{content:' ▴'}
.scribe-checks-skipped > summary:hover{color:var(--ink,#17231e)}
.scribe-checks-skipped .scribe-check{opacity:.72}


/* The note's shape, drawn before the words arrive.
 *
 * The wait used to be one grey sentence in a card. The headings are known in
 * advance -- _normalize_note forces exactly four on every created note -- so
 * the note appears immediately and fills in, which is the difference between
 * waiting for a screen and watching one being written.
 */
.scribe-note-shell{display:grid;gap:14px}
.scribe-note-shell .scribe-note-head{margin-bottom:2px}
/* Sized to the textarea it becomes: rows="3" at line-height 1.55 plus 22px of
 * padding and 2px of border. The swap to the real editor moves nothing. */
.scribe-note-shell .arc-skeleton{min-height:76px;border-radius:11px}

/* Three dots after "Writing the note", because a shape that never changes
 * still reads as stuck. */
.arc-writing-dot{
  display:inline-block;width:2.2ch;text-align:left;
}
.arc-writing-dot::after{
  content:'';animation:arc-writing-dots 1.4s steps(4,end) infinite;
}
@keyframes arc-writing-dots{
  0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} 100%{content:''}
}
@media (prefers-reduced-motion: reduce){
  .arc-writing-dot::after{animation:none;content:'…'}
}


/* A heading that has arrived. The skeleton becomes the words, in place, so
 * nothing below it moves as the note fills in. */
.scribe-note-written{
  min-height:76px;padding:11px;border-radius:11px;
  border:1px solid var(--line,#d8e1dc);background:#fbfcfa;
  font-weight:400;line-height:1.55;color:var(--ink,#17231e);
  white-space:pre-wrap;
}


/* Arc answering a question, directly beneath the box it was typed into.
 *
 * Not the chat dock: that is position:fixed on document.body and cannot sit
 * beneath anything. Everything in this card is a read of the practice's own
 * record, so it is styled as a quiet answer rather than as an alert. */
.scribe-asked{
  margin-top:12px;padding:14px 16px;border-radius:12px;
  border:1px solid var(--line,#d8e1dc);background:#f6f9f7;
  font-size:.88rem;line-height:1.55;
}
.scribe-asked p{margin:0 0 8px}
.scribe-asked ul{margin:0 0 10px;padding-left:18px}
.scribe-asked li{margin:2px 0}
.scribe-asked-q{color:var(--muted,#55706d)}
.scribe-asked .detail{font-size:.8rem;line-height:1.5}


/* The checks, folded away until asked for.
 *
 * Nine checks with a sentence of reasoning each is most of a screen. The
 * verdict above stays visible; this is the working. */
.scribe-checklist-detail{margin-top:4px}
.scribe-checklist-detail > summary{
  cursor:pointer;padding:9px 0;font-size:.82rem;font-weight:700;
  color:var(--muted,#55706d);list-style:none;
}
.scribe-checklist-detail > summary::-webkit-details-marker{display:none}
.scribe-checklist-detail > summary::after{content:' ▾';opacity:.6}
.scribe-checklist-detail[open] > summary::after{content:' ▴'}
.scribe-checklist-detail > summary:hover{color:var(--ink,#17231e)}

/* Editing a template without learning a placeholder syntax.
 *
 * "a dentist editing a json directly might be a little confusing, like what do
 * you write in the brackets." The braces are a fill-in-the-blank marker, so the
 * blanks became buttons and the preview reads the result back in English. */
.scribe-template-ai{
  display:grid;gap:8px;padding:12px;margin:4px 0 2px;
  border:1px solid var(--line,#d8e1dc);border-radius:12px;background:#f4f8f5;
}
.scribe-template-ai > strong{font-size:.82rem;color:var(--ink,#17231e)}
.scribe-field-chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 4px}
.scribe-field-chips .detail{margin-right:2px}
.chip-btn{
  border:1px solid var(--line,#d8e1dc);background:#fff;color:var(--ink,#17231e);
  border-radius:999px;padding:6px 12px;font:inherit;font-size:.76rem;font-weight:750;
  cursor:pointer;
}
.chip-btn:hover{border-color:#71987e;background:#eef7f1}
.edit-ai-says.is-warning{color:#8a4b1f;font-weight:750}

/* The raw template text, folded away.
 *
 * "there's still the json or something" -- the placeholder body was the
 * biggest thing on the panel, so the screen still read as a file format you
 * had to learn. It is still here and still editable, just no longer the front
 * door: you describe the note, and what you read back is the plain preview. */
.scribe-raw-template{margin:10px 0 2px}
.scribe-raw-template > summary{
  cursor:pointer;padding:8px 0;font-size:.78rem;font-weight:750;
  color:var(--muted,#55706d);list-style:none;
}
.scribe-raw-template > summary::-webkit-details-marker{display:none}
.scribe-raw-template > summary::after{content:' ▾';opacity:.6}
.scribe-raw-template[open] > summary::after{content:' ▴'}
.scribe-raw-template > summary:hover{color:var(--ink,#17231e)}
.scribe-raw-label{display:block;margin-top:4px}
.scribe-template-ai .edit-ask{
  width:100%;border:1px solid var(--line,#d8e1dc);border-radius:10px;padding:10px;
  font:inherit;line-height:1.5;color:var(--ink,#17231e);background:#fff;resize:vertical;
}
.scribe-template-ai .edit-ai{justify-self:start}

/* How I work: the clinician's own rules, and the conversation that builds them.
 *
 * Two halves. The list is what Scribe currently believes; the usage count on
 * each rule is the only signal of how much record a quietly-wrong rule has
 * already reached, so it is never hidden. */
.scribe-rules{display:grid;gap:14px}
.scribe-rule-row{
  display:flex;gap:14px;align-items:flex-start;
  padding:13px 0;border-top:1px solid var(--line,#d8e1dc);
}
.scribe-rule-row:first-child{border-top:0}
.scribe-rule-when{
  flex:0 0 auto;font-size:.72rem;font-weight:750;letter-spacing:.03em;
  color:#285c3d;background:#eef7f1;border:1px solid #71987e;
  border-radius:999px;padding:4px 11px;white-space:nowrap;
}
.scribe-rule-then{flex:1;font-size:.92rem;line-height:1.5;color:var(--ink,#17231e)}
.scribe-rule-then small{
  display:block;color:var(--muted,#55706d);font-size:.75rem;margin-top:3px;font-weight:600;
}
.scribe-rule-forget{flex:0 0 auto;font-size:1.1rem;line-height:1;color:var(--muted,#55706d)}
.scribe-rule-forget:hover{color:#b96359}

/* The opt-in/source belongs to the whole rule, not a narrow material column. */
.scribe-rule-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto}
.scribe-rule-reminder,.scribe-rule-reminder-unavailable{grid-column:1/-1;min-width:0}
.scribe-rule-reminder{font-size:.875rem;line-height:1.5}
.scribe-rule-reminder summary{cursor:pointer;color:var(--ink,#17231e)}
.scribe-rule-reminder p{margin:12px 0}
.scribe-rule-reminder .inline-check{display:flex;align-items:flex-start;gap:8px;font-weight:500;line-height:1.5}
.scribe-rule-reminder input[type="checkbox"]{flex:none;margin-top:3px}
.scribe-rule-reminder button{margin:10px 8px 0 0}
.scribe-rule-reminder-unavailable,.scribe-reminder-state{color:var(--muted,#55706d);font-size:.75rem}
.scribe-reminder-state{display:block;margin-top:6px}
@media(max-width:600px){
  .scribe-rule-row{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .scribe-rule-when{justify-self:start;white-space:normal}
  .scribe-rule-then{grid-column:1/-1;grid-row:2}
  .scribe-rule-forget{grid-column:2;grid-row:1}
}

.scribe-rule-teach{
  display:grid;gap:9px;margin-top:8px;padding:16px;
  border:1px solid var(--line,#d8e1dc);border-radius:12px;background:#f4f8f5;
}
.scribe-rule-thread{display:grid;gap:9px;max-height:340px;overflow-y:auto}
.scribe-rule-thread:empty{display:none}
.scribe-rule-bubble{
  border-radius:12px;padding:11px 14px;font-size:.9rem;line-height:1.55;max-width:90%;
}
.scribe-rule-bubble.is-said{
  background:#eef3f8;border:1px solid #2c4a6b;color:#17231e;justify-self:end;
}
.scribe-rule-bubble.is-arc{
  background:#fff;border:1px solid #71987e;color:var(--ink,#17231e);justify-self:start;
}
.scribe-rule-proposed{display:grid;gap:7px;margin:10px 0 0}
.scribe-rule-pick{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;line-height:1.45}
.scribe-rule-pick strong{color:#285c3d}
.scribe-rule-confirm{display:flex;gap:9px;margin-top:11px}
.scribe-rule-teach textarea{
  width:100%;border:1px solid var(--line,#d8e1dc);border-radius:10px;padding:10px;
  font:inherit;line-height:1.5;color:var(--ink,#17231e);background:#fff;resize:vertical;
}
.scribe-rule-teach .primary-btn{justify-self:start}

/* What a standing rule put in the note.
 *
 * Beneath the box, never inside it: a textarea cannot carry marked-up text,
 * and the words have to stay editable because correcting the exception is the
 * entire workflow. Quiet, but never absent -- a default the clinician cannot
 * see is a default they cannot correct before signing it. */
.scribe-from-rule{display:grid;gap:5px;margin-top:6px}
.scribe-from-rule > span{
  display:flex;gap:8px;align-items:baseline;
  font-size:.78rem;line-height:1.5;color:var(--muted,#55706d);
}
.scribe-rule-tag{
  flex:0 0 auto;font-size:.66rem;font-weight:750;letter-spacing:.04em;
  color:#285c3d;background:#eef7f1;border:1px solid #71987e;
  border-radius:999px;padding:2px 8px;white-space:nowrap;
}
.scribe-from-rule em{font-style:normal;opacity:.75;white-space:nowrap}
/* The procedure a question belongs to, next to the prompt. */
.scribe-procedure-tag{margin-left:6px;vertical-align:middle;white-space:nowrap}

/* Send and the mic, on one line: describing how you work is talking. */
.scribe-rule-send{display:flex;gap:9px;align-items:center;justify-self:start}

/* One readable final artifact, shared by full Scribe and the focused workflow. */
.scribe-final-preview{min-width:0;margin:20px 0 14px;border:1px solid var(--line,#d8e1dc);border-radius:12px;background:#fff;overflow:hidden}
.scribe-final-preview header{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line,#d8e1dc)}
.scribe-final-preview header strong{font-size:.95rem}
.scribe-final-preview header span{font-size:.75rem;color:var(--muted,#55706d)}
.scribe-preview-text{margin:0;padding:20px 18px;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:.94rem;line-height:1.65;color:var(--ink,#17231e);background:#fff}
.scribe-preview-caption,.scribe-preview-warning{margin:0;padding:12px 18px;font-size:.8rem;line-height:1.5;color:var(--muted,#55706d)}
.scribe-preview-caption{border-top:1px solid var(--line,#d8e1dc);background:#f7faf8}
.scribe-preview-warning{background:#fff7e9;color:#704d17;border-bottom:1px solid #e7d6b8}

/* Visit-specific template prose, visually separate from the final artifact. */
.scribe-wording{padding:18px;border-bottom:1px solid var(--line,#d8e1dc);background:#f6f8f5;min-width:0}
.scribe-wording-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 14px}
.scribe-wording-heading strong{font-size:14px;font-weight:600;letter-spacing:-.015em}
.scribe-wording-heading span{font-size:11px;color:var(--muted,#55706d)}
.scribe-wording p{margin:8px 0 16px;font-size:12px;line-height:1.6;color:var(--muted,#55706d)}
.scribe-wording-block{display:flex;align-items:flex-start;gap:10px;margin-top:12px;min-width:0}
.scribe-wording-block label{display:block;flex:1;min-width:0;font-size:11px;color:var(--muted,#55706d)}
.scribe-wording-block textarea{display:block;width:100%;min-width:0;margin:6px 0 0;padding:10px 12px;border:1px solid var(--line,#d8e1dc);border-radius:6px;background:#fff;color:var(--text,#17231e);font:inherit;font-size:13px;line-height:1.6;resize:vertical}
.scribe-wording-block textarea[readonly]{background:transparent}
.scribe-wording-actions{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:14px}
.scribe-wording button{min-height:44px;padding:8px 10px;border:1px solid var(--line,#d8e1dc);border-radius:6px;background:transparent;color:var(--green,#215b4b);font:inherit;font-size:12px;cursor:pointer}
.scribe-wording button:disabled{opacity:.45;cursor:default}
.scribe-wording button[hidden]{display:none}
.scribe-wording button:hover:not(:disabled){background:#e7eeea}
.scribe-wording button:focus-visible,.scribe-wording textarea:focus-visible{outline:2px solid var(--green,#215b4b);outline-offset:3px}
.scribe-wording [data-wording-mic]{margin-top:20px;flex-shrink:0}
.scribe-wording [data-wording-status]{margin:12px 0 0}
.snote .scribe-wording{border-block:1px solid var(--line);padding:18px 0;background:transparent;margin-top:18px}
@media(max-width:600px){.scribe-wording{padding:16px}.scribe-wording-actions{gap:6px}.scribe-wording-actions button{flex:1 1 130px}.scribe-wording-block{flex-direction:column}.scribe-wording-block label{width:100%}.scribe-wording [data-wording-mic]{margin-top:0}}


/* Nothing sits under the dock.
 *
 * The app switcher is fixed at the bottom centre and the "Ask about" chip at
 * the bottom right. On desktop the dock covered the last row of whatever tab
 * was open; on phones the chip sat on top of the Review button of the last
 * Open work card. Clearance at the foot of the tab body, sized to what is
 * actually down there: the dock, and on phones the chip above it. */
.scribe-tab-body{padding-bottom:5.5rem}
@media (max-width:700px){
  .scribe-tab-body{padding-bottom:8.5rem}
}

/* The template title block: badge on its own line under the name, so a long
 * name and "Practice default" stop fighting for one row and the Edit button
 * stays beside the title instead of dropping below an orphaned badge. */
.scribe-template-title{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex:1 1 auto;min-width:0}
.scribe-template-title .badge{white-space:nowrap}
.scribe-template-title strong{overflow-wrap:anywhere}
/* Title left, Edit right, on ONE row even on a phone. The header wrapped, so
   the title block took the full width and Edit dropped underneath the badge --
   the orphan the screenshot showed. The title shrinks; the button does not. */
.scribe-template-detail header{align-items:flex-start;flex-wrap:nowrap}
.scribe-template-detail header .scribe-template-actions{flex:0 0 auto}

/* The hero on a phone. Eyebrow, headline and a three-line status paragraph
 * filled most of the first screen before a single control. Same words, less
 * of the screen: no eyebrow, a smaller headline, a quieter status line. */
@media (max-width:720px){
  .scribe-hero .eyebrow{display:none}
  .scribe-hero h1{font-size:1.5rem;line-height:1.2;margin-bottom:.35rem}
  .scribe-hero p{font-size:.9rem;line-height:1.45}
  .scribe-hero{margin-bottom:14px}
}
/* Compare evidence where the question is asked, without opening another app. */
.scribe-chart-evidence { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; margin:18px 0; text-align:left; }
.scribe-chart-evidence>div { min-width:0; border-top:1px solid var(--line); padding:12px 0 0; }
.scribe-chart-evidence small { display:block!important; color:var(--muted); font-size:11px; font-weight:500; margin:0 0 8px!important; }
.scribe-chart-evidence blockquote { padding:0; margin:0; border:0; color:var(--text); font-size:14px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.scribe-chart-evidence p { font-size:11px!important; line-height:1.6; color:var(--muted); margin:8px 0 0; }
.scribe-chart-ack { display:flex!important; align-items:center; min-height:44px; gap:10px; margin:12px 0!important; color:var(--text)!important; font-size:13px!important; line-height:1.6; }
.scribe-chart-ack input[type=checkbox] { width:18px!important; height:18px!important; min-width:18px!important; max-width:18px!important; min-height:18px!important; flex:0 0 18px; margin:2px 0!important; accent-color:var(--green); }
@media(max-width:560px) { .scribe-chart-evidence { grid-template-columns:minmax(0,1fr); gap:14px; } }

/* Source concerns read as an editorial review, not another stack of cards. */
.scribe-source-comparison { padding:22px 0; border-top:1px solid var(--line); text-align:left; }
.scribe-source-comparison header small,.scribe-source-comparison article>small { color:var(--muted); font-size:11px; letter-spacing:.04em; }
.scribe-source-comparison h3 { font-size:18px; margin:6px 0 12px; font-weight:600; }
.scribe-source-comparison h4 { font-size:15px; line-height:1.55; margin:8px 0 14px; }
.scribe-source-comparison p,.scribe-source-status { font-size:13px; color:var(--muted); line-height:1.6; overflow-wrap:anywhere; }
.scribe-source-comparison article { border-top:1px solid var(--line); margin-top:20px; padding:18px 0 4px; }
.scribe-source-passages { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:16px; }
.scribe-source-passages strong { display:block; font-size:11px; color:var(--muted); font-weight:500; margin-bottom:7px; }
.scribe-source-passages blockquote { margin:0; padding:0 0 0 12px; border-left:2px solid var(--green); font-size:14px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.scribe-source-comparison button { min-height:44px; white-space:normal; }
.scribe-source-notice:empty { display:none; }
@media(max-width:560px) { .scribe-source-passages { grid-template-columns:minmax(0,1fr); } }

/* The perio link sat in a subnav strip under the open list, where an expanded
   note pushed it onto the card edge as a floating pill. It belongs with the
   list's heading. */
.scribe-open .section-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.scribe-open .section-title .scribe-perio-link{margin-left:auto;align-self:center;padding:6px 14px;font-size:.82rem}

/* --- perio.css --- */
.perio-hero{margin-bottom:22px}.perio-patient-bar{display:grid;grid-template-columns:auto minmax(240px,1fr) minmax(220px,.5fr);align-items:center;gap:12px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}.perio-patient-bar>div:first-child{display:grid;gap:4px}.perio-patient-bar>div:first-child small,.perio-history p,.perio-empty p{color:var(--muted);font-size:12px}.perio-patient-options{display:flex;gap:8px;overflow-x:auto;min-width:0}.perio-patient-option{display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 8px;flex:0 0 auto;min-width:138px;max-width:220px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:#fff;font:inherit;text-align:left;cursor:pointer}.perio-patient-option strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.perio-patient-option span{color:var(--green);font-size:11px;font-weight:800}.perio-patient-option small{grid-column:1/-1;overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.perio-patient-option.is-selected{border-color:var(--green);color:#fff;background:var(--green)}.perio-patient-option.is-selected span,.perio-patient-option.is-selected small{color:rgba(255,255,255,.8)}.perio-patient-search{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;padding-left:11px;border:1px solid var(--line);border-radius:11px;color:var(--muted)}.perio-patient-search input{min-height:42px;border:0;padding:8px 10px 8px 0;background:transparent;font:inherit}.perio-patient-bar>#perioPatientResults{grid-column:2/-1}.perio-patient-selection{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line)}#perioSelectedPatient{display:grid;gap:3px}#perioSelectedPatient span{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}#perioSelectedPatient strong{font-size:14px}.perio-shell{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:start;gap:18px;margin-top:18px}.perio-shell>aside{position:sticky;top:84px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff}.perio-history{display:grid;gap:8px}.perio-history button{display:grid;gap:3px;width:100%;padding:11px;border:1px solid var(--line);border-radius:11px;color:var(--ink);background:#fff;font:inherit;text-align:left;cursor:pointer}.perio-history button span{font-size:12px}.perio-history button strong{color:var(--green);font-size:10px;text-transform:uppercase}.perio-history button small{color:var(--muted);font-size:9px}.perio-history button.active{border-color:var(--green);background:var(--green-soft)}.perio-shell>main{min-width:0}.perio-empty{padding:42px;border:1px dashed #afbeb5;border-radius:18px;background:rgba(255,255,255,.55);text-align:center}.perio-empty strong{font-family:Georgia,serif;font-size:26px;font-weight:500}.perio-metrics{position:sticky;top:70px;z-index:3;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px;padding:10px;border:1px solid #b9ddd0;border-radius:16px;background:rgba(238,248,243,.94);box-shadow:0 8px 24px rgba(31,51,40,.08);backdrop-filter:blur(10px)}.perio-metrics article{display:grid;gap:4px;min-width:0;padding:10px 12px;border-radius:10px;background:#fff}.perio-metrics article.wide{grid-column:span 2}.perio-metrics span{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.perio-metrics strong{overflow:hidden;font-size:18px;text-overflow:ellipsis;white-space:nowrap}.perio-metrics .wide strong{font-size:12px}.perio-context{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:#fff}.perio-context>div{display:grid;grid-template-columns:auto auto;align-items:center;gap:4px 8px}.perio-context>div small{grid-column:1/-1;color:var(--muted);font-size:10px}.perio-context p{margin:0;color:var(--muted);font-size:10px}.perio-context kbd{padding:2px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;color:var(--ink);background:#f8faf7;font:inherit;font-weight:800}.perio-writeback{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:15px;border:1px solid #b9ddd0;border-radius:14px;background:var(--green-soft)}.perio-writeback.manual_entry,.perio-writeback.disabled{border-color:#ead1a9;background:var(--amber-soft)}.perio-writeback.failed{border-color:#e5bbb7;background:#fbebe9}.perio-writeback>div{display:grid;gap:4px}.perio-writeback span,.perio-writeback small{color:var(--muted);font-size:11px}.perio-writeback code{padding:4px 7px;border-radius:6px;background:rgba(255,255,255,.7);font-size:10px}.perio-chart{display:grid;gap:14px;outline:none}.perio-arch{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow);overscroll-behavior-x:contain}.perio-arch-heading{position:sticky;left:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;width:max(100%,1840px);padding:11px 14px;border-bottom:1px solid var(--line);background:#fbfcfa}.perio-arch-heading strong{font-size:12px}.perio-arch-heading span{color:var(--muted);font-size:9px;letter-spacing:.06em}.perio-teeth{display:grid;grid-template-columns:repeat(16,112px);min-width:1792px}.perio-tooth{border-right:1px solid var(--line);background:#fff}.perio-tooth:last-child{border-right:0}.perio-tooth>header{display:grid;gap:6px;padding:9px 8px;border-bottom:1px solid var(--line);text-align:center}.perio-tooth>header strong{font-size:11px}.perio-missing{min-height:25px;border:1px solid var(--line);border-radius:7px;color:var(--muted);background:#fff;font:inherit;font-size:8px;font-weight:800;cursor:pointer}.perio-missing.active{border-color:#c8cfc9;color:#fff;background:#7c867f}.perio-sites{display:grid}.perio-site{display:grid;grid-template-columns:20px 1fr 1fr;gap:4px;min-height:91px;padding:7px 6px;border-bottom:1px solid #edf0ed;background:#fff}.perio-site.has-bleeding{box-shadow:inset 3px 0 #b94c42}.perio-site.has-suppuration{background:#fff9ef}.perio-site-name{grid-row:1/3;display:grid;place-items:center;color:var(--muted);font-size:9px;font-weight:850}.perio-site label{display:grid;gap:2px;color:var(--muted);font-size:7px;font-weight:800}.perio-site input{width:100%;height:28px;border:1px solid var(--line);border-radius:6px;padding:2px;color:var(--ink);background:#fff;font:inherit;font-size:14px;font-weight:800;text-align:center;-moz-appearance:textfield}.perio-site input::-webkit-inner-spin-button{display:none}.perio-site input:focus{border-color:var(--green);outline:2px solid rgba(27,107,75,.16)}.perio-flags{grid-column:2/4;display:flex;gap:3px}.perio-flag{flex:1;min-height:20px;border:1px solid var(--line);border-radius:5px;color:var(--muted);background:#fff;font:inherit;font-size:8px;font-weight:900;cursor:pointer}.perio-flag.bleeding.active{border-color:#b94c42;color:#fff;background:#b94c42}.perio-flag.suppuration.active{border-color:#bd791c;color:#fff;background:#bd791c}.perio-delta{grid-column:1/-1;min-height:12px;font-size:7px;font-weight:800;text-align:center}.perio-delta.worse{color:#b33d34}.perio-delta.better{color:#17704c}.perio-delta.neutral{color:#9ba39e}.perio-tooth>footer{display:grid;gap:6px;padding:8px;background:#fbfcfa}.perio-tooth>footer label{display:flex;align-items:center;justify-content:space-between;gap:4px;color:var(--muted);font-size:8px}.perio-tooth>footer select{width:39px;min-height:25px;border:1px solid var(--line);border-radius:6px;background:#fff;font:inherit;font-size:10px}.perio-tooth.is-missing .perio-sites{opacity:.34}.perio-tooth.is-missing .perio-site{background:#f1f3f1}.perio-actions{display:flex;justify-content:flex-end;margin:12px 0}.perio-actions>div{display:flex;align-items:center;gap:12px}.perio-actions span{color:var(--muted);font-size:11px}.perio-statement{padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}.perio-statement-heading,.perio-statement-actions,.perio-statement-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}.perio-statement-heading h2{margin:0;font-family:Georgia,serif;font-size:27px;font-weight:500}.perio-statement-heading .badge.approved{color:#fff;background:var(--green)}.perio-statement textarea{width:100%;margin-top:16px;border:1px solid var(--line);border-radius:11px;padding:14px;color:var(--ink);background:#fff;font:inherit;line-height:1.55;resize:vertical}.perio-statement textarea:focus{border-color:var(--green);outline:3px solid rgba(27,107,75,.08)}.perio-statement-meta{margin:9px 0 15px;color:var(--muted);font-size:10px}.perio-statement-actions{justify-content:flex-end}.perio-statement .form-error{margin-top:10px;text-align:right}.perio-statement .safe-state{color:var(--green)}
@media(max-width:1100px){.perio-patient-bar{grid-template-columns:1fr 1fr}.perio-patient-bar>div:first-child{grid-column:1/-1}.perio-patient-bar>#perioPatientResults{grid-column:1/-1}.perio-shell{grid-template-columns:1fr}.perio-shell>aside{position:static}.perio-history{display:flex;overflow-x:auto}.perio-history button{flex:0 0 155px}.perio-metrics{top:68px}}
@media(max-width:700px){.perio-patient-bar{grid-template-columns:1fr}.perio-patient-bar>*{grid-column:1!important}.perio-patient-selection{align-items:stretch;flex-direction:column}.perio-patient-selection button{width:100%}.perio-context{align-items:flex-start;flex-direction:column}.perio-metrics{grid-template-columns:repeat(2,minmax(0,1fr));position:static}.perio-metrics article.wide{grid-column:1/-1}.perio-statement-heading,.perio-statement-meta,.perio-statement-actions{align-items:stretch;flex-direction:column}.perio-statement-actions button{width:100%}.perio-actions>div{width:100%;align-items:stretch;flex-direction:column}.perio-actions button{width:100%}.perio-writeback{align-items:flex-start;flex-direction:column}}

/* Charting by saying it out loud.
 *
 * A hygienist probing has neither hand free. The transcript line matters as
 * much as the button: seeing what was heard is how somebody catches a five
 * charted as a nine while the probe is still in the pocket. */
.perio-dictation{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px }
.perio-dictation small{ flex:1 1 100%; font-size:12px; color:var(--muted,#64748b); line-height:1.5 }
@media(max-width:700px){
  .perio-actions{flex-direction:column;gap:12px;min-width:0}
  .perio-actions>div{min-width:0}
  .perio-dictation small{flex:initial;overflow-wrap:anywhere}
}
.perio-heard{
  font-size:13px; color:#3a463e; font-style:italic; min-height:1.2em;
  max-width:34ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#perioDictate.is-listening{
  background:#b4432f; animation: perio-listening 1.6s ease-in-out infinite;
}
@keyframes perio-listening{ 50% { opacity:.72 } }
@media (prefers-reduced-motion: reduce){
  #perioDictate.is-listening{ animation:none }
}

/* --- reception.css --- */
.reception-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:18px}.reception-demo,.reception-knowledge{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow)}.reception-demo>header{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}.reception-demo>header>div{display:flex;align-items:center;gap:12px}.reception-transcript{height:360px;overflow-y:auto;padding:20px 4px;display:flex;flex-direction:column;gap:12px}.assistant-line,.caller-line{display:flex;gap:10px;align-items:flex-start}.assistant-line p,.caller-line p{margin:0;padding:11px 14px;border-radius:14px;line-height:1.5;max-width:78%}.assistant-line p{background:var(--green-soft)}.caller-line{justify-content:flex-end}.caller-line p{background:var(--ink);color:white}.voice-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line)}.voice-controls .detail{flex:1 1 240px}.reception-form{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}.reception-form input{flex:1;border:0;padding:14px;font:inherit;min-width:0}.reception-form button{width:48px;border:0;background:var(--ink);color:white;font-size:20px}.reception-knowledge{align-self:start}.reception-knowledge dl{margin:0}.reception-knowledge dt{text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:800;color:var(--muted);margin-top:18px}.reception-knowledge dd{margin:5px 0 0;line-height:1.55}.safety-callout{margin-top:24px;padding:14px;border-radius:12px;background:var(--amber-soft);color:var(--amber)}.safety-callout p{font-size:13px;line-height:1.5;margin-bottom:0}.reception-drafts{display:grid;gap:10px}.reception-drafts>article{display:flex;align-items:center;justify-content:space-between;gap:16px;background:white;border:1px solid var(--line);border-radius:14px;padding:16px 18px}.reception-drafts>article>div{display:flex;align-items:center;gap:10px}.reception-drafts small{color:var(--muted)}@media(max-width:900px){.reception-layout{grid-template-columns:1fr}}@media(max-width:560px){.reception-demo,.reception-knowledge{padding:18px}.reception-transcript{height:310px}.reception-drafts>article,.reception-drafts>article>div{align-items:flex-start;flex-direction:column}.assistant-line p,.caller-line p{max-width:88%}}

.reception-experiences{border:0;padding:0;margin:0 0 24px;display:grid;gap:10px}
.reception-experiences legend{font-weight:600;margin-bottom:10px}
.reception-experience-option{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s}
.reception-experience-option:has(input:checked){border-color:var(--green,#245c4e);background:var(--green-soft)}
.reception-experience-option:has(input:focus-visible){outline:2px solid var(--green,#245c4e);outline-offset:3px}
.reception-experience-option input[type=radio]{appearance:auto;inline-size:18px;block-size:18px;min-block-size:18px;min-inline-size:18px;flex:0 0 18px;padding:0;margin:2px 0 0;accent-color:var(--green,#245c4e)}
.reception-experience-option>span{display:grid;gap:5px;font-size:14px;line-height:1.45}
.reception-experience-option>span>span{color:var(--muted);font-weight:400}
.reception-phone-details{margin:16px 0;font-size:13px;color:var(--muted)}
.reception-phone-details summary{cursor:pointer}
@media(prefers-reduced-motion:reduce){.reception-experience-option{transition:none}}

/* The callback queue. Worst first, with what the caller said on the row, so
   the person working it can tell a swollen face from a parking question
   without opening anything. The selectors carry .reception-drafts because
   the legacy `.reception-drafts>article` row rules above outrank a bare
   class and would otherwise keep flattening these into one line. */
.reception-drafts>.reception-draft,.reception-drafts .reception-draft{display:grid;gap:9px;align-items:stretch;flex-direction:row;background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:14px;padding:15px 18px}
.reception-drafts .reception-draft.level-emergency,.reception-drafts .reception-draft.level-now{border-left-color:var(--red)}
.reception-drafts .reception-draft.level-emergency .badge,.reception-drafts .reception-draft.level-now .badge{background:#f7e5e3;color:var(--red)}
.reception-drafts .reception-draft.level-today{border-left-color:var(--amber)}
.reception-drafts .reception-draft.level-today .badge{background:var(--amber-soft);color:var(--amber)}
.reception-drafts .reception-draft-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.reception-drafts .reception-draft-head strong{font-size:14px}
.reception-drafts .reception-flag{font-size:11px;padding:3px 8px;border-radius:999px;background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.reception-drafts .reception-draft-words{margin:0;line-height:1.5;color:var(--ink)}
.reception-drafts .reception-draft-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.reception-drafts .reception-draft-foot small{color:var(--muted)}
.reception-drafts-done{margin-top:4px}
.reception-drafts-done>summary{cursor:pointer;color:var(--muted);font-size:13px;padding:8px 0}
.reception-drafts-done .reception-draft{margin-top:8px;opacity:.66}
.reception-drafts>h3{margin:16px 0 2px;font-size:13px;font-weight:650;color:var(--muted)}
.reception-pickup>summary{cursor:pointer;color:var(--green);font-size:13px;font-weight:600}
.reception-pickup form{display:grid;gap:12px;justify-items:start;padding-top:10px}
.reception-pickup label{display:flex;align-items:flex-start;gap:9px;font-size:13px}
.reception-pickup input[type=checkbox]{appearance:auto;inline-size:16px;block-size:16px;min-inline-size:16px;min-block-size:16px;padding:0;margin:2px 0 0}
.reception-pickup p{margin:0}
@media(max-width:560px){.reception-drafts .reception-draft-foot{align-items:flex-start;flex-direction:column}}

/* What the PMS changed on the way in. A practice using Arc does not open their
   PMS to check, so a provider substitution that is only in a reference string
   is one nobody finds until the patient arrives. */
.reception-booking-warning {
  margin: 0.35rem 0 0;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--warn, #9a6207);
  background: var(--warn-soft, #fdf6e7);
  font-size: 0.85rem;
  line-height: 1.35;
}

/* --- calls.css --- */
.calls-summary{grid-template-columns:repeat(4,minmax(0,1fr))}.calls-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:18px;box-shadow:var(--shadow)}.calls-toolbar label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:12px;min-width:150px}.calls-toolbar select{border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:inherit;padding:10px}.calls-toggle{flex-direction:row!important;align-items:center;min-width:auto!important;padding:10px 0}.calls-toggle input{width:auto}.call-list{display:grid;gap:12px}.call-card{background:var(--card);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);overflow:hidden}.call-card.needs-attention{border-color:#e5b86f}.call-card>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(170px,1.25fr) repeat(3,minmax(110px,.7fr)) auto;gap:16px;align-items:center;padding:18px}.call-card>summary::-webkit-details-marker{display:none}.call-card>summary>div{min-width:0}.call-card>summary strong,.call-card>summary span,.call-card>summary small{display:block}.call-card>summary small{color:var(--muted);margin-top:4px}.call-card>summary .badge{display:inline-flex}.call-card>summary .call-chevron{font-size:20px;color:var(--muted)}.call-detail{border-top:1px solid var(--line);padding:20px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:22px}.call-facts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.call-facts span{background:var(--paper);border-radius:999px;padding:7px 10px;font-size:12px}.call-transcript{display:grid;gap:8px}.call-transcript p{margin:0;border-radius:11px;padding:10px 12px;line-height:1.45}.call-transcript .caller{background:var(--paper)}.call-transcript .assistant{background:var(--green-soft)}.call-transcript strong{font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-right:7px}.call-review{display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--line);padding-left:20px}.call-review label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}.call-review select,.call-review input,.call-review textarea{border:1px solid var(--line);border-radius:9px;padding:10px;font:inherit;color:var(--ink);background:#fff}.call-review select[multiple]{min-height:116px}.call-review .detail{line-height:1.45}.calls-empty{padding:30px}.training-faqs{display:grid;gap:10px}.training-faq{display:grid;grid-template-columns:1fr 1.4fr auto;gap:10px;align-items:end;background:var(--paper);padding:12px;border-radius:10px}.training-faq button{margin-bottom:1px}.training-safety{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:9px!important;background:var(--amber-soft);border-radius:10px;padding:12px;color:var(--amber)!important}.training-safety input{width:auto;margin-top:2px}.training-actions{display:flex;gap:10px;align-items:center}.training-actions .detail{margin:0}.settings-template-form .training-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.training-grid label{align-items:stretch}.training-grid textarea{min-height:112px}
@media(max-width:980px){.calls-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.call-card>summary{grid-template-columns:1.2fr repeat(2,.7fr) auto}.call-card>summary>div:nth-child(4){display:none}.call-detail{grid-template-columns:1fr}.call-review{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}}
@media(max-width:620px){.calls-summary{grid-template-columns:1fr 1fr}.calls-toolbar>*{flex:1 1 140px}.call-card>summary{grid-template-columns:1fr auto}.call-card>summary>div:not(:first-child){display:none}.call-detail{padding:16px}.settings-template-form .training-grid,.training-faq{grid-template-columns:1fr}.training-faq button{justify-self:start}}
.calls-summary .card{grid-column:auto;min-height:130px}
/* A unit attached to a position in a grid, which is a unit attached to nothing.
   These two rules were written for the Calls screen, whose 2nd and 3rd cards
   are both percentages. Reception then reused .calls-summary for a row with a
   different card order, so its 2nd card — "Needs reading", a count of 62 calls
   out of 200 — rendered "62%", a number that is wrong twice over: it is not a
   percentage, and the percentage it would be is 31. Its 3rd card was right only
   because "Ended cleanly" happened to land where a percentage was expected.

   A screen opts out by declaring .units-in-value on the grid and putting the
   unit in the value it passes to card(), which is where a unit belongs: with
   the figure, not with the slot. Reception does that. The positional fallback
   stays only because the Calls screen in app.js still leans on it and is out of
   this change's scope; it should go the same way. */
.calls-summary:not(.units-in-value) .card:nth-child(2) .metric:after,
.calls-summary:not(.units-in-value) .card:nth-child(3) .metric:after{content:"%";font-size:.52em;margin-left:2px}
.call-audio{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}.call-audio audio{width:min(100%,420px)}.call-audio span,.call-audio-state{font-size:12px;color:var(--muted)}
.grid.metric-row{grid-template-columns:repeat(4,minmax(0,1fr))}
.metric-row .card{grid-column:auto;min-height:130px}
.call-value{margin-bottom:22px}
.call-value-basis{border-bottom:1px solid var(--line);padding:4px 0 18px}
.call-value-basis>summary{cursor:pointer;color:var(--green);font-size:13px;padding:8px 0}
.call-value-basis>summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.call-value .section-title,.call-value+.section-title{flex-wrap:wrap;gap:8px}
@media(max-width:980px){.grid.metric-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.grid.metric-row{grid-template-columns:1fr 1fr}}
.call-cost-detail{border-block:1px solid var(--line);padding:14px 0;margin:16px 0}.call-cost-detail>summary{cursor:pointer;font-size:13px;font-weight:600}.call-cost-detail dl{margin:12px 0}.call-cost-detail dl>div{display:grid;grid-template-columns:minmax(110px,.7fr) minmax(0,1fr);gap:16px;padding:9px 0}.call-cost-detail dt{font-size:13px;color:var(--muted)}.call-cost-detail dd{margin:0;font-size:13px;font-variant-numeric:tabular-nums}.call-cost-detail dd small{display:block;color:var(--muted);line-height:1.5;margin-top:3px}.call-cost-detail>summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.call-playback{padding:16px 0;margin:4px 0 12px;border-block:1px solid var(--line,#dce4e1);font-size:14px;line-height:1.5;min-width:0}
.call-playback-heading{display:grid;gap:3px}
.call-playback-heading>span{font-size:12px;font-weight:600;color:var(--muted,#63746e)}
.call-playback-heading>strong{font-size:15px;font-weight:600;color:var(--ink,#1d2f29)}
.call-playback .call-playback-source{margin:4px 0 8px;color:var(--muted,#63746e);font-size:12px}
.call-playback .call-playback-notice{margin:4px 0 8px;font-size:13px;color:#875322}
.call-playback details{border:0;padding:0;background:transparent}
.call-playback summary{display:list-item;padding:5px 0;cursor:pointer;font-size:13px;color:var(--green,#235f4e);font-weight:600;min-height:32px}
.call-playback summary:focus-visible{outline:2px solid var(--green,#235f4e);outline-offset:3px;border-radius:2px}
.call-playback ol{list-style:none;padding:0;margin:4px 0}
.call-playback li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line,#dce4e1)}
.call-playback li small{display:block;color:var(--muted,#63746e);font-size:12px}
.call-playback li strong{font-size:12px;font-weight:600;text-align:right}
.call-playback li[data-playback-state="interrupted"] strong{color:#875322}
.call-playback .call-playback-boundary{margin:9px 0 0;color:var(--muted,#63746e);font-size:12px;max-width:58ch}

/* --- benchmarks.css --- */
.benchmark-banner{display:flex;align-items:center;gap:16px;background:var(--ink);color:white;border-radius:18px;padding:18px 22px;margin-bottom:18px}.benchmark-banner>div{flex:1}.benchmark-banner p{margin:4px 0 0;color:#cad6ce;font-size:13px}.privacy-lock{display:grid;place-items:center;min-width:54px;height:54px;border-radius:15px;background:#d9f0e2;color:var(--green);font-weight:850}.benchmark-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.benchmark-grid article,.benchmark-suppressed{background:white;border:1px solid var(--line);border-radius:17px;padding:22px;box-shadow:var(--shadow)}.benchmark-grid header,.benchmark-grid footer{display:flex;justify-content:space-between;gap:12px;align-items:center}.benchmark-grid header>span{font-weight:750}.benchmark-grid header>strong{font-size:25px;color:var(--green)}.benchmark-grid header small{font-size:10px;margin-left:2px}.benchmark-track{height:8px;background:var(--green-soft);border-radius:999px;overflow:hidden;margin:22px 0 14px}.benchmark-track i{display:block;height:100%;background:linear-gradient(90deg,#53a777,var(--green));border-radius:inherit}.benchmark-grid footer{font-size:12px;color:var(--muted)}.benchmark-grid footer b{color:var(--ink);margin-left:4px}.benchmark-footnote{margin-top:18px;color:var(--muted);font-size:12px;line-height:1.6}.benchmark-suppressed{max-width:620px;text-align:center;margin:70px auto}.benchmark-suppressed .privacy-lock{margin:0 auto}.benchmark-suppressed h2{font-family:Georgia,serif;font-size:30px;margin-bottom:8px}.benchmark-suppressed p,.benchmark-suppressed small{color:var(--muted)}.benchmark-dashboard-tile{display:grid;grid-template-columns:minmax(240px,.8fr) 1.2fr;gap:26px;background:linear-gradient(135deg,var(--ink),#29483c);color:white;border-radius:18px;padding:24px;margin-bottom:24px;box-shadow:var(--shadow)}.benchmark-dashboard-tile h3{margin:12px 0 4px}.benchmark-dashboard-tile>div>strong{display:block;font-family:Georgia,serif;font-size:42px}.benchmark-dashboard-tile p,.benchmark-dashboard-tile small{color:#cad6ce}.benchmark-dashboard-tile dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}.benchmark-dashboard-tile dl div{background:rgba(255,255,255,.08);padding:16px;border-radius:13px}.benchmark-dashboard-tile dt{font-size:11px;color:#cad6ce}.benchmark-dashboard-tile dd{font-size:17px;font-weight:750;margin:7px 0 0}.benchmark-dashboard-tile>small{grid-column:1/-1}@media(max-width:760px){.benchmark-grid{grid-template-columns:1fr}.benchmark-banner{align-items:flex-start;flex-wrap:wrap}.benchmark-banner .badge{margin-left:70px}.benchmark-dashboard-tile{grid-template-columns:1fr}.benchmark-dashboard-tile dl{grid-template-columns:1fr}.benchmark-dashboard-tile>small{grid-column:1}}@media(max-width:480px){.benchmark-grid article{padding:18px}.benchmark-grid footer{align-items:flex-start;flex-direction:column;gap:5px}}

/* --- Benchmarks, rebuilt --------------------------------------------------
 *
 * Appended rather than folded into the rules above, because the block above is
 * still what draws the privacy banner and the summary cards and other people
 * are working in this tree. Everything new is under a .bench- prefix so it
 * cannot reach anything else.
 *
 * Movement, never opacity. The bars grow from their baseline and the cards
 * arrive on a translate, so a throttled tab that never runs a single frame
 * still shows a complete, readable chart rather than an invisible one.
 * ------------------------------------------------------------------------ */

.bench-measures{display:grid;grid-template-columns:repeat(auto-fit,minmax(370px,1fr));gap:14px}
.bench-measure{background:var(--card);border:1px solid var(--line);border-radius:17px;
  padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.bench-measure header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.bench-measure h3{margin:0 0 6px;font-size:16px;line-height:1.3}
.bench-basis{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55}
.bench-figure{text-align:right;flex:0 0 auto}
.bench-figure>strong{display:block;font-size:27px;font-weight:780;letter-spacing:-.03em;
  color:var(--green);white-space:nowrap}
.bench-delta{display:block;margin-top:4px;font-size:12px;font-weight:700;color:var(--muted)}
.bench-delta small{display:block;font-weight:500;font-size:10.5px}
.bench-delta.is-down{color:var(--amber)}
.bench-measure footer{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}

.bench-peer{margin:0;padding:10px 12px;border-radius:11px;background:var(--green-soft);
  color:#2c4438;font-size:12.5px;line-height:1.55}
.bench-peer.is-illustrative{background:var(--amber-soft);color:#513307}
.bench-peer-chip{display:inline-block;margin-right:6px;padding:2px 7px;border-radius:999px;
  background:rgba(255,255,255,.72);font-size:10.5px;font-weight:800;letter-spacing:.03em}

.bench-trend{display:grid;gap:8px}
.bench-bars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;
  align-items:end;margin:0;padding:0;list-style:none;min-height:118px}
.bench-bars li{display:grid;grid-template-rows:1fr auto auto;gap:4px;align-items:end;
  justify-items:center;text-align:center;min-width:0}
.bench-bar{display:flex;width:100%;height:74px;align-items:flex-end}
.bench-bar>i{display:block;width:100%;height:var(--h,4%);border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#53a777,var(--green));transform-origin:50% 100%;
  animation:bench-grow var(--arc-t-enter,320ms) var(--arc-ease-soft,cubic-bezier(.16,1,.3,1))}
.bench-bars li.is-partial .bench-bar>i{background:repeating-linear-gradient(135deg,
  #9dc3ac,#9dc3ac 4px,#c3ddce 4px,#c3ddce 8px)}
.bench-bars b{font-size:11px;font-variant-numeric:tabular-nums;font-weight:700;
  overflow-wrap:anywhere}
.bench-bar-month{font-size:10.5px;color:var(--muted);font-weight:650}
.bench-bar-basis{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes bench-grow{from{transform:scaleY(.2)}to{transform:none}}

.bench-note{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.bench-nohistory{margin:0;padding:10px 12px;border-left:2px solid var(--line);
  color:var(--muted);font-size:12px;line-height:1.55}

.bench-split{border-top:1px solid var(--line);padding-top:12px}
.bench-split>summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--green);
  min-height:28px;display:flex;align-items:center}
.bench-split>summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.bench-split>.bench-note{margin:8px 0}
.bench-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bench-table{width:100%;border-collapse:collapse;font-size:12.5px}
.bench-table th,.bench-table td{text-align:left;padding:9px 8px 9px 0;
  border-top:1px solid var(--line);vertical-align:middle}
.bench-table thead th{color:var(--muted);font-weight:650;font-size:11px;border-top:0}
.bench-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bench-table .row-open{text-align:right;padding-right:0}
.bench-table .row-open button{padding:5px 10px;font-size:11.5px;min-height:32px}

.bench-work{display:grid;gap:10px;margin-bottom:6px}
.bench-work article{display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--card);border:1px solid var(--line);border-radius:15px;padding:17px 20px;
  box-shadow:var(--shadow)}
.bench-work strong{display:block;font-size:15px;line-height:1.35}
.bench-work p{margin:5px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55;max-width:74ch}
.bench-work-actions{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.bench-work-empty{background:var(--card);border:1px dashed var(--line);border-radius:15px;padding:22px}
.bench-work-empty h3{margin:0 0 8px;font-size:16px}
.bench-work-empty p{margin:0;color:var(--muted);font-size:13px;line-height:1.6;max-width:78ch}

.bench-chairs{margin-top:16px;background:linear-gradient(135deg,var(--ink),#29483c);color:#fff;
  border-radius:18px;padding:24px;box-shadow:var(--shadow)}
.bench-chairs h3{margin:0 0 8px;font-family:Georgia,serif;font-size:23px;font-weight:500;
  letter-spacing:-.02em}
.bench-chairs>p{margin:0 0 18px;color:#cad6ce;font-size:13.5px;line-height:1.6;max-width:80ch}
.bench-chairs dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:0}
.bench-chairs dl>div{background:rgba(255,255,255,.08);border-radius:13px;padding:16px}
.bench-chairs dt{font-size:11px;color:#cad6ce;font-weight:700;letter-spacing:.04em}
.bench-chairs dd{margin:9px 0 0;font-size:17px;font-weight:750;font-variant-numeric:tabular-nums}
.bench-chairs dd small{display:block;margin-top:2px;font-size:11px;font-weight:500;color:#cad6ce}

.bench-withheld{margin-top:18px;background:var(--card);border:1px solid var(--line);
  border-radius:15px;padding:20px}
.bench-withheld h3{margin:0 0 10px;font-size:15px}
.bench-withheld ul{margin:0 0 10px;padding-left:18px;color:var(--muted);font-size:12.5px;line-height:1.7}
.bench-withheld p{margin:0;color:var(--muted);font-size:12px}

@media(max-width:760px){
  .bench-measures{grid-template-columns:1fr}
  .bench-work article{align-items:stretch;flex-direction:column;gap:12px}
  .bench-work-actions{justify-content:stretch}
  .bench-work-actions button{flex:1}
}
@media(max-width:480px){
  .bench-measure{padding:18px}
  .bench-measure header{align-items:stretch;flex-direction:column;gap:10px}
  .bench-figure{text-align:left}
  .bench-bars{gap:4px;min-height:104px}
  .bench-bars b{font-size:10px}
  .bench-chairs{padding:19px}
  .bench-chairs h3{font-size:20px}
}
@media (prefers-reduced-motion: reduce){
  .bench-bar>i{animation:none}
}

/* --- financials.css --- */
.financial-hero{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:28px;border:1px solid #b9ddd0;border-radius:22px;background:linear-gradient(135deg,#eef8f3,#fff)}
.financial-hero h1{max-width:820px}.financial-hero>button{flex:0 0 auto}.financial-period{display:flex;align-items:end;gap:12px;margin:0 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.financial-period label,.financial-login label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:700}.financial-period input,.financial-login input{min-height:42px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;color:var(--ink);background:#fff;font:inherit}
.financial-metrics .card:nth-child(-n+4){grid-column:span 3}.financial-flags{display:grid;gap:10px;margin-top:14px}.financial-flags>div{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--amber-soft)}.financial-flags p{display:grid;gap:3px;margin:0}.financial-flags small{color:var(--muted)}.financial-flag-icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;color:#fff;background:var(--amber);font-weight:800}.financial-boundary{margin:20px 0 0;color:var(--muted);font-size:12px;text-align:center}.financial-login{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;align-items:end;gap:14px;max-width:980px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}.financial-login h2,.financial-login p{margin:0}.financial-login p{margin-top:6px;color:var(--muted);font-size:13px}.financial-login .chat-error{grid-column:1/-1;margin:0}
@media(max-width:1000px){.financial-metrics .card:nth-child(-n+4){grid-column:span 6}.financial-login{grid-template-columns:1fr 1fr}.financial-login>div,.financial-login .chat-error{grid-column:1/-1}}
@media(max-width:600px){.financial-hero{align-items:start;flex-direction:column}.financial-period{align-items:stretch;flex-direction:column}.financial-metrics .card:nth-child(-n+4){grid-column:1/-1}.financial-login{grid-template-columns:1fr}.financial-login>div,.financial-login .chat-error{grid-column:auto}}

/* ---------------------------------------------------------------------------
 * Financials, second pass: the cost side, the collection side, and the month
 * in progress.
 *
 * Appended rather than woven into the rules above, because this stylesheet is
 * shared ground and an added block cannot change what was already correct.
 * Every rule here is prefixed .fin- so it cannot reach another screen.
 *
 * Motion follows the house rules in motion.css: transitions only, no entrance
 * that starts at opacity 0, and the whole thing is switched off under
 * prefers-reduced-motion at the bottom.
 * ------------------------------------------------------------------------- */

.financial-period{flex-wrap:wrap}
.fin-presets{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.fin-preset{
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--muted);font:inherit;font-size:12px;font-weight:650;
  padding:8px 12px;min-height:36px;cursor:pointer;
  transition:border-color var(--arc-t-fast,140ms) var(--arc-ease,ease),
             color var(--arc-t-fast,140ms) var(--arc-ease,ease),
             background var(--arc-t-fast,140ms) var(--arc-ease,ease);
}
.fin-preset:hover{border-color:#9fb5a7;color:var(--green);background:var(--green-soft)}

/* The month in progress. Two columns: the sentence, and the evidence for it. */
.fin-pace{
  display:grid;grid-template-columns:1.35fr 1fr;gap:24px;align-items:start;
  margin:0 0 26px;padding:22px 24px;border:1px solid var(--line);
  border-radius:18px;background:var(--card);box-shadow:var(--shadow);
}
.fin-pace-lead h2{font-family:Georgia,serif;font-weight:500;font-size:clamp(20px,2.4vw,27px);
  letter-spacing:-.02em;line-height:1.15;margin:0 0 8px}
.fin-pace-lead .detail{margin:0}
.fin-pace-gap{margin:10px 0 0;font-size:13px;font-weight:700}
.fin-pace-gap.is-below{color:var(--amber)}
.fin-pace-gap.is-above{color:var(--green)}
.fin-pace-months{display:grid;gap:9px}
.fin-pace-month{display:grid;grid-template-columns:52px 1fr;gap:8px 10px;align-items:center;font-size:12px}
.fin-pace-month-name{color:var(--muted);font-weight:700}
.fin-pace-month-bar{height:8px;border-radius:999px;background:var(--green-soft);overflow:hidden}
.fin-pace-month-bar>span{display:block;height:100%;border-radius:999px;background:var(--green)}
.fin-pace-month-value{grid-column:2;color:var(--muted);margin-top:-4px}
.fin-pace-months .secondary-btn{justify-self:start;margin-top:4px}

/* The ladder. Costs are indented and set in the muted colour so the eye can
 * tell a subtraction from an arrival without reading a minus sign. */
.fin-ladder-card{padding-bottom:18px}
.fin-ladder{margin-top:0}
.fin-ladder td,.fin-ladder th{vertical-align:top}
.fin-ladder .fin-amount{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700}
.fin-ladder .fin-do{text-align:right;width:1%;white-space:nowrap}
.fin-ladder tbody tr.fin-cost td:first-child{padding-left:18px;box-shadow:inset 3px 0 0 var(--green-soft)}
.fin-ladder tbody tr.fin-cost .fin-amount{color:var(--muted)}
.fin-ladder tbody tr.fin-unknown .fin-amount{font-weight:600;font-style:italic}
.fin-ladder tfoot td{border-top:2px solid var(--ink);padding-top:12px}
.fin-ladder .fin-total{font-size:20px;letter-spacing:-.02em}
.fin-excluded{margin:14px 0 4px;padding:12px 14px;border-radius:12px;
  background:var(--amber-soft);color:#5a4520;font-size:13px;line-height:1.5}

/* A ratio card: the figure, the verdict, the band it was judged against, and
 * the way to the screen that can work it. */
.fin-ratios .card{grid-column:span 4;display:flex;flex-direction:column;gap:2px}
.fin-ratios .metric{margin:14px 0 2px;font-size:30px}
.fin-ratio .detail{flex:1}
.fin-ratio .secondary-btn{align-self:flex-start;margin-top:12px}
.fin-verdict{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px}
.fin-verdict.is-good{background:var(--green-soft);color:var(--green)}
.fin-verdict.is-close{background:var(--amber-soft);color:var(--amber)}
.fin-verdict.is-behind{background:#f6e2e0;color:var(--red)}
.fin-benchmark{display:block;margin:0 0 8px;color:var(--muted);font-size:12px;font-weight:650}

/* Month by month: a table whose second column is the shape of the month. */
.fin-months .fin-amount,.fin-providers .fin-amount,.fin-codes .fin-amount,
.fin-vendor-table .fin-amount{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fin-months .fin-do,.fin-providers .fin-do,.fin-codes .fin-do,
.fin-vendor-table .fin-do{text-align:right;width:1%}
.fin-do .secondary-btn{white-space:nowrap}
.fin-shape{width:22%;min-width:110px}
.fin-bar{display:block;height:7px;border-radius:999px;margin:3px 0}
.fin-bar.is-production{background:var(--green)}
.fin-bar.is-collected{background:#9ec9b3}
.fin-months tr.is-partial{background:#fbfcf8}
.fin-tag{margin-left:7px;padding:2px 7px;border-radius:999px;background:var(--amber-soft);
  color:var(--amber);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.fin-share .detail{font-size:11px}

.fin-not-connected{display:grid;gap:8px;justify-items:start}
.fin-not-connected p{margin:0}
.fin-vendors .card{grid-column:span 6}

/* Rows lift on hover the way every other table in Arc does, and a row that
 * carries a button says so before the pointer arrives. */
.fin-ladder tbody tr,.fin-months tbody tr,.fin-providers tbody tr,
.fin-codes tbody tr,.fin-vendor-table tbody tr{
  transition:background var(--arc-t-fast,140ms) var(--arc-ease,ease);
}
.fin-months tbody tr:hover,.fin-providers tbody tr:hover,
.fin-codes tbody tr:hover,.fin-vendor-table tbody tr:hover{background:var(--green-soft)}

@media(max-width:1100px){
  .fin-pace{grid-template-columns:1fr}
  .fin-ratios .card{grid-column:span 6}
}

/* Below this the tables stop being tables.
 *
 * Seven columns cannot be made to fit 375px by shrinking them; they can only
 * be made to scroll sideways, and a screen that scrolls sideways on a phone is
 * a screen a dentist gives up on. So each row becomes a small card and every
 * cell carries its own column heading, which is what the data-label attributes
 * on the markup are for. Same trick Billing uses, for the same reason. */
@media(max-width:760px){
  .fin-presets{margin-left:0;width:100%}
  .fin-preset{flex:1 0 auto}
  .fin-pace{padding:18px}
  .fin-ratios .card{grid-column:1/-1}
  .fin-vendors .card{grid-column:1/-1}

  /* Every selector below carries `.shell` on purpose, and it is load-bearing.
   *
   * mobile.css already turns every table in the app into its own horizontal
   * scroller at this same breakpoint, and to make that work it sets
   * `.shell table td { white-space: nowrap }`. That rule is two classes-worth
   * more specific than a bare `.fin-ladder td` AND it lands in the later
   * bundle, so it won twice over: the cost lines here refused to wrap and ran
   * off the right of a 375px screen mid-word. Adding `.shell` puts these on
   * the winning side of both tests. Measured, not guessed — the first pass
   * shipped without it and the phone screenshot showed "front desk $1" and
   * then nothing. */
  .shell .fin-ladder,.shell .fin-months,.shell .fin-providers,
  .shell .fin-codes,.shell .fin-vendor-table{display:block;overflow-x:visible}
  .shell .fin-ladder thead,.shell .fin-months thead,.shell .fin-providers thead,
  .shell .fin-codes thead,.shell .fin-vendor-table thead{display:none}
  .shell .fin-ladder tbody,.shell .fin-ladder tfoot,.shell .fin-months tbody,
  .shell .fin-providers tbody,.shell .fin-codes tbody,
  .shell .fin-vendor-table tbody{display:block}
  .shell .fin-ladder tr,.shell .fin-months tr,.shell .fin-providers tr,
  .shell .fin-codes tr,.shell .fin-vendor-table tr{
    display:grid;grid-template-columns:1fr;gap:4px;
    padding:12px 0;border-top:1px solid var(--line);
  }
  .shell .fin-ladder td,.shell .fin-months td,.shell .fin-providers td,
  .shell .fin-codes td,.shell .fin-vendor-table td{
    border:0;padding:0;white-space:normal;text-align:left;width:auto;
  }
  .shell .fin-ladder .fin-do,.shell .fin-months .fin-do,.shell .fin-providers .fin-do,
  .shell .fin-codes .fin-do,.shell .fin-vendor-table .fin-do{margin-top:6px}
  .shell .fin-ladder .fin-do .secondary-btn,.shell .fin-months .fin-do .secondary-btn,
  .shell .fin-providers .fin-do .secondary-btn,.shell .fin-codes .fin-do .secondary-btn,
  .shell .fin-vendor-table .fin-do .secondary-btn{min-height:40px;white-space:nowrap}
  .shell .fin-ladder tbody tr.fin-cost td:first-child{padding-left:12px}

  /* The heading has to go somewhere once the header row is gone, or a bare
   * "45.4%" beside a bare "$251,933" is two numbers and no nouns. Inline, so
   * a row of five short figures stays five short lines rather than ten. */
  .shell .fin-months td[data-label]:not([data-label=""])::before,
  .shell .fin-providers td[data-label]:not([data-label=""])::before,
  .shell .fin-codes td[data-label]:not([data-label=""])::before,
  .shell .fin-vendor-table td[data-label]:not([data-label=""])::before,
  .shell .fin-ladder td[data-label="Amount"]::before{
    content:attr(data-label) ": ";
    font-size:11px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--muted);font-weight:700;
  }
  /* The first cell already names the row in bold; a label above it would be
     "MONTH: Aug 2026" said twice. */
  .shell .fin-months tr>td:first-child::before,
  .shell .fin-providers tr>td:first-child::before,
  .shell .fin-codes tr>td:first-child::before,
  .shell .fin-vendor-table tr>td:first-child::before{content:none}
  .shell .fin-shape{width:auto;min-width:0}
  .shell .fin-months .fin-shape::before{display:none}
}

@media(max-width:420px){
  /* Four columns of numbers do not fit; the ones that survive are the ones a
   * person came for. Everything dropped here is still in the drawer behind
   * the row's own button, so nothing becomes unreachable. */
  .shell .fin-codes td[data-label="Times"],
  .shell .fin-codes td[data-label="Average fee"],
  .shell .fin-providers td[data-label="Patients"],
  .shell .fin-providers td[data-label="Average fee"],
  .shell .fin-months td[data-label="Received %"]{display:none}
  .fin-pace-month{grid-template-columns:44px 1fr}
}

@media(prefers-reduced-motion:reduce){
  .fin-preset,
  .fin-ladder tbody tr,.fin-months tbody tr,.fin-providers tbody tr,
  .fin-codes tbody tr,.fin-vendor-table tbody tr{transition:none}
}

/* --- financials-workflow.css --- */
.chat-message:has(.qfinance),.chat-message:has(.qfinance) .message-bubble {width:100%;max-width:100%;min-width:0;}
.chat-message:has(.qfinance)>.brand-mark {display:none;}
.chat-message .message-bubble:has(.qfinance) {padding:0;border:0;background:transparent;}
.qfinance {--fin-green:#314f43;--fin-text:#25312c;--fin-muted:#6c7771;--fin-line:#dce2de;background:#fff;color:var(--fin-text);border:1px solid var(--fin-line);border-radius:8px;margin:18px 0;padding:28px 32px;text-align:left;font-size:16px;line-height:1.4;}
.qfinance * {box-sizing:border-box;min-width:0;}
.qfinance .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.qfinance header {display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:28px;}
.qfinance h3 {margin:0;font-size:30px;font-weight:650;line-height:1.2;letter-spacing:-.04em;}
.qfinance h3:focus,.qfinance-result:focus,.qfinance-evidence h4:focus {outline:none;}
.qfinance h4 {font-size:19px;font-weight:600;margin:20px 0 12px;}
.qfinance p {font-size:15px;line-height:1.5;margin:12px 0;}
.qfinance button,.qfinance input {font:inherit;font-size:15px;line-height:1.4;min-height:44px;border:1px solid var(--fin-line);border-radius:6px;background:#fff;color:var(--fin-text);padding:10px 12px;}
.qfinance button {cursor:pointer;}
.qfinance button:disabled {opacity:.5;cursor:default;}
.qfinance input:disabled {background:#f7f8f7;color:var(--fin-muted);}
.qfinance button:focus-visible,.qfinance input:focus-visible {outline:2px solid var(--fin-green);outline-offset:3px;}
.qfinance header button {border:0;text-decoration:underline;color:var(--fin-green);padding:0;min-height:28px;white-space:nowrap;font-size:14px;flex:0 0 auto;}
.qfinance-period {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(110px,.65fr);gap:20px;align-items:end;}
.qfinance-period label {font-size:14px;display:grid;gap:6px;}
.qfinance-period input {width:100%;}
.qfinance .qfinance-primary {background:var(--fin-green);color:#fff;border-color:var(--fin-green);font-weight:600;}
.qfinance .qfinance-period-label {font-size:14px;color:var(--fin-muted);margin:8px 0 28px;}
.qfinance-topics,.qfinance-breakdowns {display:flex;gap:28px;border-bottom:1px solid var(--fin-line);}
.qfinance-topics button,.qfinance-breakdowns button {border:0;border-bottom:3px solid transparent;border-radius:0;padding:12px 0;background:transparent;color:var(--fin-muted);font-size:14px;}
.qfinance-topics button[aria-pressed=true],.qfinance-breakdowns button[aria-pressed=true] {color:var(--fin-green);border-bottom-color:var(--fin-green);font-weight:600;}
.qfinance-result {animation:qfinance-reveal 150ms ease-out;}
.qfinance-reading {padding:28px 0 12px;}
.qfinance-reading>strong {display:block;font-size:52px;line-height:1.1;letter-spacing:-.045em;font-weight:650;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.qfinance-reading>span {display:block;font-size:18px;margin-top:8px;}
.qfinance-reading p {font-size:17px;color:var(--fin-muted);}
.qfinance-reading p strong {font-weight:600;color:var(--fin-green);}
.qfinance-bars {display:grid;gap:16px;padding:12px 0 32px;}
.qfinance-bars>div {display:grid;grid-template-columns:70px 110px minmax(0,1fr);align-items:center;gap:12px;font-size:14px;font-variant-numeric:tabular-nums;}
.qfinance-bars i {display:block;height:14px;}
.qfinance-bars b {display:block;height:100%;border-radius:3px;background:#b7c3be;}
.qfinance-bars>div+div b {background:var(--fin-green);}
.qfinance-breakdowns {border-top:1px solid var(--fin-line);padding-top:8px;}
.qfinance-search {display:flex;gap:8px;margin:20px 0 16px;max-width:400px;}
.qfinance-search input {width:100%;}
.qfinance-columns,.qfinance-row {display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)) 18px;gap:18px;align-items:center;}
.qfinance-columns {color:var(--fin-muted);font-size:13px;padding:12px 0;border-bottom:1px solid var(--fin-line);}
.chat-message .qfinance .qfinance-rows {padding:0;margin:0;list-style:none;}
.chat-message .qfinance .qfinance-rows>li {border-bottom:1px solid var(--fin-line);padding:0;margin:0;}
.chat-message .qfinance .qfinance-row small {border:0;padding:0;margin:0 0 4px;}
.qfinance .qfinance-row {width:100%;text-align:left;border:0;border-radius:0;padding:18px 0;font-size:15px;background:transparent;font-variant-numeric:tabular-nums;}
.qfinance button.qfinance-row:hover {background:#f6f8f7;}
.qfinance-row span {overflow-wrap:anywhere;}
.qfinance-row small {display:none;}
.qfinance-chevron {color:var(--fin-muted);}
.qfinance-pages {display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:16px;font-size:13px;color:var(--fin-muted);}
.qfinance-pages span {margin-right:auto;}
.qfinance-pages button {font-size:13px;}
.qfinance-source {margin-top:24px;}
.qfinance .qfinance-source p,.qfinance-muted {color:var(--fin-muted);font-size:13px;line-height:1.6;}
.qfinance-source p {margin:4px 0;}
.qfinance .qfinance-notice,.qfinance-error {border-left:2px solid #9a783e;padding-left:12px;font-size:14px;}
.qfinance-focus {display:flex;align-items:center;gap:14px;margin-top:20px;}
.qfinance-focus button {border:0;padding-left:0;color:var(--fin-green);text-decoration:underline;font-size:14px;}
.qfinance-basis {padding-bottom:12px;}
.qfinance .qfinance-record-link {border:0;padding:12px 0;color:var(--fin-green);text-decoration:underline;text-underline-offset:4px;}
.chat-message .qfinance .qfinance-records {list-style:none;padding:0;margin:0;}
.chat-message .qfinance .qfinance-records>li {display:flex;align-items:flex-start;gap:20px;justify-content:space-between;border-bottom:1px solid var(--fin-line);padding:20px 0;margin:0;overflow-wrap:anywhere;}
.qfinance-records>li>div {display:grid;gap:4px;}
.qfinance-records strong {font-size:16px;font-weight:600;}
.qfinance-record-amount {flex:0 1 40%;text-align:right;font-variant-numeric:tabular-nums;}
.qfinance-record-basis {margin-top:24px;font-size:14px;}
.qfinance-record-basis summary {cursor:pointer;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:4px;color:var(--fin-green);}
.qfinance-record-basis summary:focus-visible {outline:2px solid var(--fin-green);outline-offset:3px;}
.qfinance .qfinance-child .billwork {border:0;margin:20px 0 0;padding:0;background:transparent;}
.qfinance .qfinance-return {margin-top:0;border-bottom:1px solid var(--fin-line);padding-bottom:12px;flex-direction:row;align-items:center;justify-content:space-between;}
.qfinance-return>span {font-size:13px;color:var(--fin-muted);}
.qfinance-loading {padding:28px 0;}
@keyframes qfinance-reveal {from {opacity:.7;transform:translateY(3px);}to {opacity:1;transform:none;}}
@media(max-width:600px) {
  .qfinance {padding:22px 20px;}.qfinance header {gap:10px;margin-bottom:20px;}.qfinance h3 {font-size:24px;}
  .qfinance-period {grid-template-columns:minmax(0,1fr);gap:12px;}.qfinance input {font-size:16px;}
  .qfinance-topics,.qfinance-breakdowns {gap:0;justify-content:space-between;}.qfinance-topics button,.qfinance-breakdowns button {font-size:13px;}
  .qfinance-reading>strong {font-size:40px;}.qfinance-reading p {font-size:15px;}.qfinance-reading>span {font-size:16px;}
  .qfinance-bars>div {grid-template-columns:auto 1fr;gap:8px;}.qfinance-bars i {grid-column:1/-1;}
  .qfinance-columns {display:none;}.qfinance .qfinance-row {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:relative;font-size:14px;}
  .qfinance .qfinance-row-long {grid-template-columns:minmax(0,1fr);}
  .qfinance-row-long>span:not(.qfinance-name):not(.sr-only):not(.qfinance-chevron) {display:flex;justify-content:space-between;gap:14px;}
  .qfinance-name {grid-column:1/-1;padding-right:26px;}.qfinance-row small {display:block;font-size:12px;color:var(--fin-muted);margin-bottom:4px;}
  .qfinance-chevron {position:absolute;right:0;top:18px;}.qfinance-pages {flex-wrap:wrap;}.qfinance-pages span {width:100%;}
  .qfinance-focus {align-items:flex-start;flex-direction:column;gap:0;}
  .chat-message .qfinance .qfinance-records>li {flex-direction:column;gap:10px;}
  .qfinance-record-amount {text-align:left;}
}
@media(prefers-reduced-motion:reduce) {.qfinance-result {animation:none;}}

/* --- supplies.css --- */
/* Supplies
 *
 * Built to be read at a glance by someone standing at a supply cupboard with a
 * phone in one hand, so the two lists that can be acted on come first and the
 * charts stay quiet underneath. Bars are drawn with plain elements rather than a
 * charting library because a proportion is the only thing being shown and a
 * library would be more code than the screen.
 */

.supply-hero {
  background: linear-gradient(135deg, rgba(56, 132, 255, 0.14), rgba(56, 132, 255, 0.02));
}

.supply-metrics {
  margin-bottom: 1.5rem;
}

.supply-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: 1.25rem 1.35rem 1.4rem;
  margin-bottom: 1.25rem;
}

.supply-panel h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.supply-context {
  margin: 0 0 0.9rem;
  color: var(--muted, #64748b);
  font-size: 0.85rem;
}

.supply-empty {
  margin: 0.4rem 0 0;
  color: var(--muted, #64748b);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* -- reorder table ------------------------------------------------------- */

.supply-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.6rem;
  font-size: 0.92rem;
}

.supply-table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  padding: 0 0.6rem 0.5rem 0;
  border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.08));
}

.supply-table td {
  padding: 0.62rem 0.6rem 0.62rem 0;
  border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.06));
}

.supply-table tr:last-child td {
  border-bottom: none;
}

/* An overdue row is the only thing on this screen that is genuinely urgent, so
 * it is the only thing that gets colour. */
.supply-table tr.supply-overdue td:first-child {
  box-shadow: inset 3px 0 0 var(--warning, #d97706);
  padding-left: 0.7rem;
}

.supply-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 0.08rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.supply-pill-warn {
  background: rgba(217, 119, 6, 0.12);
  color: var(--warning, #b45309);
}

/* -- overspend flags ----------------------------------------------------- */

.supply-flags {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 0.7rem;
}

.supply-flag {
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 11px;
  padding: 0.8rem 0.9rem;
  background: rgba(217, 119, 6, 0.04);
}

.supply-flag h3 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}

.supply-flag p {
  margin: 0.2rem 0 0;
  font-size: 0.86rem;
  color: var(--muted, #64748b);
  line-height: 1.45;
}

.supply-flag-delta {
  font-weight: 600;
  color: var(--warning, #b45309) !important;
}

/* -- proportion bars ----------------------------------------------------- */

.supply-bars {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.supply-bars li {
  display: grid;
  grid-template-columns: minmax(6.5rem, 10rem) 1fr auto;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.supply-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supply-bar {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--border, rgba(15, 23, 42, 0.08));
  overflow: hidden;
}

.supply-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent, #3884ff);
}

.supply-bar-value {
  font-variant-numeric: tabular-nums;
  color: var(--muted, #64748b);
  font-size: 0.85rem;
}

/* On a phone the label column would squeeze the bar to nothing, so the bar
 * moves to its own row rather than becoming unreadable. */
@media (max-width: 640px) {
  .supply-bars li {
    grid-template-columns: 1fr auto;
  }

  .supply-bar {
    grid-column: 1 / -1;
    order: 3;
  }

  .supply-table th:nth-child(3),
  .supply-table td:nth-child(3) {
    display: none;
  }
}

/* ===========================================================================
 * Added with the reorder runway, the price-movement panel, the supplier and
 * production panels, and the month chart.
 *
 * Appended rather than woven in, because other screens are being worked on in
 * this tree at the same time and a block at the end cannot reorder anything
 * above it. Everything here is prefixed .supply- and applies to nothing else.
 * ======================================================================== */

/* The blanket `.supply-table th:nth-child(3)` hide below 640px was one rule
 * standing in for five different decisions: it removed Category from the
 * reorder table, Orders from the spend table, the cadence from the rhythm
 * table, the invoice NUMBER from the invoice list, and the quantity from the
 * drawer's price history — that last one leaving a column of unit prices with
 * nothing to read them against. Columns are not dropped now; wide tables get
 * their own scroller, which keeps the page itself from ever moving sideways.
 */
@media (max-width: 640px) {
  .supply-table th:nth-child(3),
  .supply-table td:nth-child(3) {
    display: table-cell;
  }
}

.supply-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -0.35rem;
  padding: 0 0.35rem;
}

.supply-scroll > .supply-table {
  min-width: 33rem;
}

.supply-sub {
  display: block;
  color: var(--muted, #64748b);
  font-size: 0.78rem;
  line-height: 1.35;
  margin-top: 0.12rem;
}

/* -- reorder runway ------------------------------------------------------- */

.supply-horizon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}

.supply-horizon .supply-sub {
  display: inline;
  margin: 0 0.25rem 0 0;
}

.supply-chip {
  border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.28rem 0.72rem;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background var(--arc-t-fast, 140ms) var(--arc-ease, ease),
              border-color var(--arc-t-fast, 140ms) var(--arc-ease, ease),
              transform var(--arc-t-press, 90ms) var(--arc-ease, ease);
}

.supply-chip:hover { border-color: var(--accent, #1b6b4b); }
.supply-chip:active { transform: translateY(1px); }

.supply-chip.is-on {
  background: var(--accent, #1b6b4b);
  border-color: var(--accent, #1b6b4b);
  color: #fff;
}

.supply-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  cursor: pointer;
}

.supply-check input { margin-top: 0.25rem; }

.supply-pill-soon {
  background: rgba(27, 107, 75, 0.12);
  color: var(--accent, #1b6b4b);
}

.supply-qty {
  width: 4.5rem;
  text-align: right;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.14));
  border-radius: 7px;
  font: inherit;
  font-size: 0.88rem;
  background: var(--surface, #fff);
  color: inherit;
}

.supply-draft-hint {
  margin: 0.85rem 0 0;
  color: var(--muted, #64748b);
  font-size: 0.85rem;
}

.supply-draft {
  margin-top: 1rem;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  border-radius: 11px;
  background: rgba(27, 107, 75, 0.045);
}

.supply-draft h3 { margin: 0 0 0.3rem; font-size: 0.98rem; }

.supply-draft-text {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
  border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  resize: vertical;
  background: var(--surface, #fff);
  color: inherit;
}

.supply-draft-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.supply-draft-actions .supply-sub { display: inline; margin: 0; }

/* -- invoices awaiting confirmation --------------------------------------- */

.supply-draft-row {
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  border-radius: 11px;
  padding: 0.85rem 0.95rem 0.95rem;
  margin-top: 0.75rem;
  background: rgba(163, 95, 16, 0.045);
}

.supply-draft-row header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.supply-draft-total { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* -- price movement ------------------------------------------------------- */

.supply-delta-up { color: var(--warning, #a35f10); }
.supply-delta-down { color: var(--accent, #1b6b4b); }

.supply-table tr.supply-worse td:first-child {
  box-shadow: inset 3px 0 0 var(--warning, #a35f10);
  padding-left: 0.7rem;
}

.supply-table tr.supply-better td:first-child {
  box-shadow: inset 3px 0 0 var(--accent, #1b6b4b);
  padding-left: 0.7rem;
}

/* -- spend against production --------------------------------------------- */

.supply-headline-number {
  margin: 0.5rem 0 0.35rem;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.supply-headline-number strong { font-weight: 650; }

.supply-gauge {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--border, rgba(15, 23, 42, 0.1));
  overflow: hidden;
}

.supply-gauge-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(27, 107, 75, 0.32);
}

.supply-gauge-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  border-radius: 2px;
  background: var(--ink, #17231e);
  transform: translateX(-1.5px);
}

.supply-gauge-key {
  display: flex;
  justify-content: space-between;
  margin: 0.35rem 0 0.6rem;
  font-size: 0.75rem;
  color: var(--muted, #64748b);
}

/* -- spend by month -------------------------------------------------------
 *
 * These three classes were written into supplies.js and never into any
 * stylesheet, so the chart rendered as a bulleted list of month numbers with
 * no bars at all. It had never once drawn a chart.
 */

.supply-months {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 8.5rem;
}

.supply-months li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  gap: 0.3rem;
}

.supply-month-bar {
  display: flex;
  align-items: flex-end;
  flex: 1 1 auto;
  border-radius: 5px 5px 0 0;
  background: rgba(15, 23, 42, 0.05);
}

.supply-month-bar > span {
  display: block;
  width: 100%;
  border-radius: 5px 5px 0 0;
  background: var(--accent, #1b6b4b);
  /* A bar growing from nothing is movement, not a fade, so a throttled tab
   * that never runs it leaves a bar at its correct height rather than an
   * invisible one. */
  transition: height var(--arc-t-base, 220ms) var(--arc-ease-soft, ease);
}

/* A month with no invoice at all is a fact worth seeing, so it keeps its slot
 * and is drawn hollow rather than skipped. */
.supply-months li.is-quiet .supply-month-bar {
  background: repeating-linear-gradient(45deg,
    rgba(15, 23, 42, 0.05) 0 3px, transparent 3px 6px);
}

.supply-months li.is-partial .supply-month-bar > span {
  background: repeating-linear-gradient(45deg,
    var(--accent, #1b6b4b) 0 4px, rgba(27, 107, 75, 0.55) 4px 8px);
}

.supply-month-label {
  font-size: 0.7rem;
  color: var(--muted, #64748b);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* -- phone ---------------------------------------------------------------- */

@media (max-width: 640px) {
  .supply-months { height: 6.5rem; gap: 0.2rem; }
  .supply-month-label { font-size: 0.62rem; }
  .supply-scroll > .supply-table { min-width: 30rem; }
  .supply-draft-row header { flex-direction: column; align-items: flex-start; }
}

/* motion.css turns motion off by naming the elements it animates rather than
 * blanketing everything, so anything new has to opt itself out. Both of the
 * transitions above are transitions, never entrances, so nothing here is
 * hidden waiting for one — turning them off changes only the speed. */
@media (prefers-reduced-motion: reduce) {
  .supply-chip,
  .supply-month-bar > span {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 * SUPPLIES — TWO HALVES INSTEAD OF TEN EQUAL PANELS
 *
 * The screen was 5,032px of `.supply-panel` sections at identical weight: same
 * border, same heading, same everything, ten times. There was no way to tell
 * from looking which one had a decision in it, so the reading order was
 * whatever order they were written in.
 *
 * Above the divider stay the four with something to do — invoices to confirm,
 * the reorder runway, lines Arc could not name. Below it, the analysis, each
 * folded to its own heading plus the one line that says what is inside. The
 * fold is the same shape as the roster cards on Staff and the drawers in
 * Settings, so the product has one way of saying "there is more in here".
 * ------------------------------------------------------------------------- */

.supply-analysis-title{ margin-top: 30px; }

.supply-fold{
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}
.supply-fold > summary{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}
.supply-fold > summary::-webkit-details-marker{ display: none; }
.supply-fold > summary:hover{ background: #f8faf7; }
.supply-fold-title{ font-size: 15px; font-weight: 650; }
.supply-fold-note{
  grid-column: 1;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.supply-fold-note:empty{ display: none; }
.supply-fold-chevron{
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--muted);
  font-size: 15px;
  transition: transform .15s ease;
}
.supply-fold[open] > summary{ border-bottom: 1px solid var(--line); }
.supply-fold[open] > summary .supply-fold-chevron{ transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce){
  .supply-fold-chevron{ transition: none; }
}

/* The panel inside keeps its own markup and loses only the frame, so it is not
 * a bordered box sitting inside a bordered box. */
.supply-fold-body{ padding: 4px 20px 20px; }
.supply-fold-body > .supply-panel{
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* A month axis a person can read.
 *
 * It printed "08 09 10 11 12 01 02" — the middle of an ISO string with both
 * ends cut off, wrapping from December to January without saying the year had
 * changed. It reads "Aug Sep … Dec Jan" now, and January carries its year under
 * it because that is the only column where the year is news.
 */
.supply-month-label{ line-height: 1.25; }
.supply-month-year{
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

@media (max-width: 760px){
  .supply-fold > summary{ padding: 15px 16px; }
  .supply-fold-body{ padding: 4px 16px 16px; }
}

/* --- fees.css --- */
/* Fee Guide
 *
 * A long list of codes read by eye against a paper guide or an insurance
 * schedule, so the table is dense, the code column is monospaced to make
 * digits line up, and fees are tabular so decimal points sit under each other.
 * Everything else is deliberately quiet.
 */

.fee-hero {
  background: linear-gradient(135deg, rgba(16, 122, 87, 0.13), rgba(16, 122, 87, 0.02));
}

.fee-metrics {
  margin-bottom: 1.25rem;
}

.fee-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: 1.2rem 1.35rem 1.35rem;
  margin-bottom: 1.25rem;
}

.fee-panel h2 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.fee-note {
  margin: 0 0 0.9rem;
  color: var(--muted, #64748b);
  font-size: 0.88rem;
  line-height: 1.55;
}

.fee-state {
  margin: 0.7rem 0 0;
  font-size: 0.86rem;
  color: var(--muted, #64748b);
  min-height: 1.2em;
}

/* -- year filter --------------------------------------------------------- */

.fee-years {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
  font-size: 0.85rem;
}

.fee-years > span {
  color: var(--muted, #64748b);
  margin-right: 0.2rem;
}

.fee-year {
  border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
  background: var(--surface, #fff);
  border-radius: 999px;
  padding: 0.28rem 0.8rem;
  font: inherit;
  cursor: pointer;
}

.fee-year.active {
  background: var(--accent, #107a57);
  border-color: var(--accent, #107a57);
  color: #fff;
  font-weight: 600;
}

/* -- upload -------------------------------------------------------------- */

.fee-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
}

.fee-upload label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--muted, #64748b);
}

.fee-upload input[type='number'] {
  width: 7rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
  border-radius: 9px;
  font: inherit;
}

/* The native file input cannot be styled, so it is hidden behind its own
 * label rather than left looking like nothing else on the screen. */
.fee-file {
  position: relative;
}

.fee-file input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.fee-file span {
  display: inline-block;
  border: 1px dashed var(--border, rgba(15, 23, 42, 0.22));
  border-radius: 9px;
  padding: 0.45rem 0.9rem;
  color: var(--text, #0f172a);
  background: rgba(15, 23, 42, 0.02);
}

.fee-file:hover span {
  border-color: var(--accent, #107a57);
}

/* -- the list ------------------------------------------------------------ */

/* A fee guide can run to hundreds of codes, so the table scrolls inside its
 * panel rather than pushing the page to an unusable length. */
.fee-table-scroll {
  max-height: 30rem;
  overflow: auto;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.06));
  border-radius: 11px;
}

.fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.fee-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface, #fff);
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.1));
}

.fee-table td {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.05));
}

.fee-table tr:last-child td {
  border-bottom: none;
}

.fee-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86rem;
  white-space: nowrap;
}

.fee-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fee-table th:last-child {
  text-align: right;
}

@media (max-width: 640px) {
  .fee-upload {
    flex-direction: column;
    align-items: stretch;
  }

  .fee-upload input[type='number'] {
    width: 100%;
  }

  .fee-table-scroll {
    max-height: 22rem;
  }
}

/* --- reviews.css --- */
/* Reviews
 *
 * Mostly a settings screen, so it is built as a form rather than a dashboard.
 * The one thing worth emphasising is the blocked state: the feature ships
 * switched on with no review link, which means it quietly does nothing, and a
 * practice would never find that out on its own.
 */

.review-hero {
  background: linear-gradient(135deg, rgba(233, 168, 61, 0.16), rgba(233, 168, 61, 0.02));
}

.review-metrics {
  margin-bottom: 1.25rem;
}

.review-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: 1.2rem 1.35rem 1.35rem;
  margin-bottom: 1.25rem;
}

.review-panel h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.review-note {
  margin: 0 0 0.9rem;
  color: var(--muted, #64748b);
  font-size: 0.88rem;
  line-height: 1.55;
}

.review-state {
  font-size: 0.85rem;
  color: var(--muted, #64748b);
  margin-left: 0.6rem;
}

/* -- the settings form --------------------------------------------------- */

.review-form {
  display: grid;
  gap: 0.9rem;
  max-width: 46rem;
}

.review-form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted, #64748b);
}

.review-form input[type='url'],
.review-form input[type='number'],
.review-form textarea {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.14));
  border-radius: 9px;
  font: inherit;
  color: var(--text, #0f172a);
  background: var(--surface, #fff);
}

.review-form textarea {
  resize: vertical;
  line-height: 1.5;
  min-height: 5.5rem;
}

.review-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.review-inline input {
  width: 6rem;
}

/* A checkbox reads as a control rather than a field, so it sits on one line
 * instead of under a label like the inputs above it. */
.review-toggle {
  display: flex !important;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--text, #0f172a);
}

.review-toggle input {
  width: 1.05rem;
  height: 1.05rem;
}

.review-tokens {
  margin: -0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--muted, #64748b);
}

.review-tokens code {
  background: rgba(15, 23, 42, 0.05);
  border-radius: 5px;
  padding: 0.05rem 0.35rem;
  font-size: 0.85em;
}

.review-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* -- drafted requests ---------------------------------------------------- */

.review-drafts {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.review-drafts li {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.07));
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.015);
}

.review-drafts strong {
  font-size: 0.9rem;
}

.review-drafts span {
  font-size: 0.84rem;
  color: var(--muted, #64748b);
  line-height: 1.45;
}

@media (max-width: 640px) {
  .review-form {
    max-width: none;
  }

  .review-inline input {
    width: 100%;
  }
}

/* --- compliance.css --- */
/* Compliance
 *
 * A list that is read by scanning for red. Overdue items carry colour and a
 * left edge; everything current is deliberately quiet, because a screen where
 * every row shouts is a screen where nothing does.
 */

.compliance-hero {
  background: linear-gradient(135deg, rgba(16, 122, 87, 0.13), rgba(16, 122, 87, 0.02));
}

/* Only when something is actually late. A permanently alarming header teaches
 * people to ignore it. */
.compliance-hero-alert {
  background: linear-gradient(135deg, rgba(190, 60, 48, 0.14), rgba(190, 60, 48, 0.02));
}

.compliance-metrics {
  margin-bottom: 1.25rem;
}

.compliance-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 1.25rem;
}

.compliance-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.compliance-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.8rem;
  border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.06));
}

.compliance-item:last-child {
  border-bottom: none;
}

.compliance-main {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.compliance-main strong {
  font-size: 0.95rem;
}

.compliance-meta {
  font-size: 0.82rem;
  color: var(--muted, #64748b);
  line-height: 1.4;
}

.compliance-meta b {
  color: var(--danger, #be3c30);
  font-weight: 600;
}

.compliance-side {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* The left edge is the scan target. Only states that need doing get one. */
.compliance-overdue,
.compliance-failed,
.compliance-never {
  box-shadow: inset 3px 0 0 var(--danger, #be3c30);
}

.compliance-due {
  box-shadow: inset 3px 0 0 var(--warning, #d97706);
}

.compliance-pill {
  border-radius: 999px;
  padding: 0.14rem 0.6rem;
  font-size: 0.73rem;
  font-weight: 600;
  white-space: nowrap;
}

.compliance-pill-ok {
  background: rgba(16, 122, 87, 0.1);
  color: var(--accent, #107a57);
}

.compliance-pill-due {
  background: rgba(217, 119, 6, 0.12);
  color: var(--warning, #b45309);
}

.compliance-pill-overdue,
.compliance-pill-failed,
.compliance-pill-never {
  background: rgba(190, 60, 48, 0.12);
  color: var(--danger, #be3c30);
}

/* -- the logging dialog -------------------------------------------------- */

.compliance-dialog {
  border: none;
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
  max-width: 26rem;
  width: calc(100% - 2rem);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.compliance-dialog::backdrop {
  background: rgba(15, 23, 42, 0.4);
}

.compliance-dialog h2 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
}

.compliance-dialog form {
  display: grid;
  gap: 0.75rem;
}

.compliance-dialog label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--muted, #64748b);
}

.compliance-dialog input,
.compliance-dialog select,
.compliance-dialog textarea {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.14));
  border-radius: 9px;
  font: inherit;
  color: var(--text, #0f172a);
  background: var(--surface, #fff);
}

.compliance-dialog textarea {
  resize: vertical;
}

.compliance-note {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted, #64748b);
  line-height: 1.5;
}

.compliance-error {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.84rem;
  color: var(--danger, #be3c30);
}

.compliance-dialog menu {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

@media (max-width: 640px) {
  .compliance-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }

  .compliance-side {
    width: 100%;
    justify-content: space-between;
  }
}

/* -- coverage, gaps, and the printable summary ---------------------------- *
 *
 * Added with the trail. Everything above answers "is it overdue"; these rules
 * carry the second answer — how much of the last year has a record behind it —
 * and it has to sit inside the row rather than in a second list, because a
 * screen with two lists of the same twelve checks is a screen nobody reads
 * either of.
 */

.cmpl-hero-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.compliance-item .compliance-main {
  flex: 1 1 auto;
}

.cmpl-coverage {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.cmpl-coverage-text {
  font-size: 0.78rem;
  color: var(--muted, #64748b);
}

/* The meter is a fact, not a decoration: the filled width is the share of
 * required periods with a record in them. A zero-coverage check shows an empty
 * track rather than a hairline, because a sliver reads as "some". */
.cmpl-meter {
  display: inline-block;
  width: 5.5rem;
  height: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.09);
  overflow: hidden;
  flex-shrink: 0;
}

.cmpl-meter > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent, #107a57);
  transition: width var(--arc-t-base, 220ms) var(--arc-ease, ease);
}

.cmpl-meter-due > span { background: var(--warning, #d97706); }
.cmpl-meter-bad > span { background: var(--danger, #be3c30); }

.cmpl-flag {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--danger, #be3c30);
}

.cmpl-warn { color: var(--danger, #be3c30); }

/* -- the gaps disclosure -------------------------------------------------- */

.cmpl-gaps {
  margin-top: 0.45rem;
}

.cmpl-gaps > summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--danger, #be3c30);
  font-weight: 600;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0;
  border-radius: 6px;
}

.cmpl-gaps > summary::-webkit-details-marker { display: none; }

.cmpl-gaps > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--arc-t-fast, 140ms) var(--arc-ease, ease);
}

.cmpl-gaps[open] > summary::before { transform: rotate(90deg); }

/* Movement, not a fade: a throttled tab that never runs the animation leaves
 * the list exactly where the layout already put it. */
@keyframes cmpl-gaps-in {
  from { transform: translate3d(0, -6px, 0); }
  to { transform: none; }
}

.cmpl-gaps[open] .cmpl-gaps-body {
  animation: cmpl-gaps-in var(--arc-t-base, 220ms) var(--arc-ease, ease);
}

.cmpl-gap-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.cmpl-gap-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.82rem;
  padding: 0.28rem 0.5rem;
  border-radius: 8px;
  background: rgba(190, 60, 48, 0.05);
}

.cmpl-gap-list button {
  flex-shrink: 0;
  padding: 0.15rem 0.55rem;
  font-size: 0.74rem;
}

/* -- the log table -------------------------------------------------------- */

.cmpl-log-table { width: 100%; }

.cmpl-log-actions {
  white-space: nowrap;
  text-align: right;
}

.cmpl-log-actions button {
  padding: 0.15rem 0.55rem;
  font-size: 0.74rem;
}

.cmpl-log-actions button + button { margin-left: 0.3rem; }

.cmpl-row-flag { box-shadow: inset 3px 0 0 var(--danger, #be3c30); }

/* A table with six columns cannot fit 375px, and the page must not scroll
 * sideways, so the table scrolls inside its own panel instead. */
.compliance-panel:has(.cmpl-log-table) { overflow-x: auto; }

/* -- the printable summary ------------------------------------------------ */

.cmpl-pack { margin-bottom: 1.25rem; }

@media print {
  body.cmpl-printing > *:not(#app) { display: none !important; }
  body.cmpl-printing #app > *:not(.cmpl-pack) { display: none !important; }
  body.cmpl-printing .cmpl-pack {
    display: block !important;
    border: none;
    padding: 0;
  }
  body.cmpl-printing .cmpl-pack table { width: 100%; border-collapse: collapse; }
  body.cmpl-printing .cmpl-pack th,
  body.cmpl-printing .cmpl-pack td {
    border-bottom: 1px solid #bbb;
    padding: 4px 6px;
    text-align: left;
    font-size: 10pt;
  }
}

@media (max-width: 640px) {
  .cmpl-log-actions { text-align: left; }

  .cmpl-gap-list li {
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
  }

  .cmpl-gap-list button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cmpl-meter > span,
  .cmpl-gaps[open] .cmpl-gaps-body { animation: none; transition: none; }
}

/* Four figures, four columns. The shared grid gives a card a third of the row,
 * which left the fourth of these on a line of its own looking like an
 * afterthought — and the fourth one is the record count, which is the basis
 * for the other three. */
@media (min-width: 901px) {
  .compliance-metrics .card { grid-column: span 3; }
}

/* A check row with its gaps open is tall, and centring the pill and buttons
 * against it parks them halfway down a list of dates they have nothing to do
 * with. They belong beside the check's name. */
.compliance-item { align-items: flex-start; }

.compliance-side { padding-top: 0.1rem; }

/* --- billing.css --- */
/* Billing
 *
 * Three tables of money, read in order of how recoverable it is. Amounts are
 * tabular so columns of figures line up, ages carry colour only past the point
 * where they start mattering, and each table scrolls inside its panel because a
 * real practice has hundreds of rows in every one of them.
 */

.billing-hero {
  background: linear-gradient(135deg, rgba(56, 132, 255, 0.14), rgba(56, 132, 255, 0.02));
}

.billing-metrics {
  margin-bottom: 1.4rem;
}

.billing-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: 1.2rem 1.35rem 1.35rem;
  margin-bottom: 1.25rem;
}

.billing-panel h2 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
}

.billing-note {
  margin: 0 0 1rem;
  color: var(--muted, #64748b);
  font-size: 0.86rem;
  line-height: 1.55;
  max-width: 62ch;
}

.billing-empty {
  margin: 0;
  color: var(--muted, #64748b);
  font-size: 0.9rem;
}

/* -- tables -------------------------------------------------------------- */

.billing-scroll {
  max-height: 24rem;
  overflow: auto;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.06));
  border-radius: 11px;
}

.billing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.billing-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface, #fff);
  text-align: left;
  font-size: 0.71rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  white-space: nowrap;
}

.billing-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.05));
  vertical-align: top;
}

.billing-table tr:last-child td {
  border-bottom: none;
}

.billing-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82em;
  color: var(--muted, #64748b);
  margin-right: 0.25rem;
}

.billing-amount,
.billing-age {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.billing-table th:last-child,
.billing-table th:nth-last-child(2) {
  text-align: right;
}

/* Age only earns colour once it is a problem. Colouring every row would make
 * the column decorative. */
.billing-old {
  color: var(--danger, #be3c30);
  font-weight: 600;
}

.billing-denied td:first-child {
  box-shadow: inset 3px 0 0 var(--danger, #be3c30);
  padding-left: 0.85rem;
}

/* -- aging ladder -------------------------------------------------------- */

.billing-aging {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.billing-aging li {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.89rem;
}

.billing-bucket-label {
  color: var(--muted, #64748b);
}

.billing-bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--border, rgba(15, 23, 42, 0.08));
  overflow: hidden;
}

.billing-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent, #3884ff);
}

/* The oldest bucket is the one that will not be collected. */
.billing-bar-old {
  background: var(--danger, #be3c30) !important;
}

.billing-bucket-value {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.billing-bucket-value small {
  display: block;
  color: var(--muted, #64748b);
  font-size: 0.75rem;
  font-weight: 400;
}

@media (max-width: 700px) {
  .billing-aging li {
    grid-template-columns: 1fr auto;
  }

  .billing-bar {
    grid-column: 1 / -1;
    order: 3;
  }

  /* The description column is the first to go; patient, age and amount are
   * what someone is scanning for on a phone. */
  .billing-table th:nth-child(2),
  .billing-table td:nth-child(2) {
    display: none;
  }
}

/* Insurance: the chase list, and what chasing would take. */
.insurance-table{ width:100%; border-collapse:collapse; margin-top:6px }
.insurance-table th{ text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line) }
.insurance-table td{ padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top }
.insurance-table td.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.insurance-table tr.is-stale td:first-child{ box-shadow:inset 3px 0 0 var(--amber,#d98324) }
.insurance-table .detail{ margin-top:3px; font-size:12px; color:var(--muted); max-width:34ch }

.insurance-agent p{ margin:0 0 10px; font-size:13.5px; line-height:1.5 }
.insurance-blocked{ color:var(--amber,#b45309); font-size:13px }
.insurance-checklist{ list-style:none; margin:10px 0; padding:0; display:grid; gap:7px }
.insurance-checklist li{ position:relative; padding-left:24px; font-size:13px; line-height:1.45; color:var(--muted) }
.insurance-checklist li::before{ content:"○"; position:absolute; left:4px; color:var(--muted) }
.insurance-checklist li.ok{ color:var(--ink) }
.insurance-checklist li.ok::before{ content:"●"; color:var(--green,#1b6b4b) }

/* A button that cannot do anything should not look like one that can. The
   screen explains why underneath, so this only has to stop the invitation. */
.insurance-table .insurance-call[disabled]{ opacity:.45; cursor:not-allowed; border-style:dashed }

/* Billing, second pass
 * ---------------------------------------------------------------------------
 * Everything below is additive and scoped to .billing-* so the rules above
 * keep working exactly as they did. The screen gained four things that need
 * shape: a deadline ladder, a denial-pattern table, a verdict on the aging
 * buckets, and a row action group that has to survive 375px.
 */

/* The one line on the screen allowed to be loud, because it is the only fact
 * with a date attached to it. */
.billing-alarm {
  margin: 0.7rem 0 0;
  font-weight: 600;
  color: var(--red, #9c4037);
  max-width: 60ch;
  line-height: 1.5;
}

.card.billing-card-urgent {
  border-color: rgba(156, 64, 55, 0.45);
  box-shadow: inset 3px 0 0 var(--red, #9c4037);
}

.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--muted, #64748b);
  cursor: pointer;
  margin-left: auto;
}

.billing-toggle input { accent-color: var(--green, #1b6b4b); }

/* -- ladders and chips ---------------------------------------------------- */

.billing-ladder { margin: 0 0 1rem; }

.billing-ladder-lead,
.billing-source {
  margin: 0 0 0.6rem;
  color: var(--muted, #64748b);
  font-size: 0.83rem;
  line-height: 1.55;
  max-width: 68ch;
}

.billing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.billing-chip {
  display: grid;
  gap: 0.1rem;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line, #dce3dc);
  border-radius: 11px;
  background: var(--card, #fff);
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-width: 8.5rem;
  transition:
    border-color var(--arc-t-fast, 140ms) var(--arc-ease, ease),
    background-color var(--arc-t-fast, 140ms) var(--arc-ease, ease),
    transform var(--arc-t-press, 90ms) var(--arc-ease, ease);
}

.billing-chip:hover { border-color: #9fb5a7; }
.billing-chip:active { transform: scale(.978); }

.billing-chip.is-on {
  border-color: var(--green, #1b6b4b);
  background: var(--green-soft, #e5f1e9);
}

.billing-chip-label {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.billing-chip strong { font-variant-numeric: tabular-nums; font-size: 0.98rem; }
.billing-chip small { color: var(--muted, #64748b); font-size: 0.73rem; }

.billing-source-pile {
  display: inline-block;
  margin-right: 0.9rem;
  white-space: nowrap;
}

/* -- filters -------------------------------------------------------------- */

.billing-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.7rem;
}

.billing-search {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--muted, #64748b);
}

.billing-search input {
  font: inherit;
  font-size: 0.86rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line, #dce3dc);
  border-radius: 9px;
  background: var(--card, #fff);
  color: inherit;
  min-width: 14rem;
  max-width: 100%;
  transition:
    border-color var(--arc-t-fast, 140ms) var(--arc-ease, ease),
    box-shadow var(--arc-t-fast, 140ms) var(--arc-ease, ease);
}

.billing-search input:focus {
  border-color: var(--green, #1b6b4b);
  box-shadow: var(--arc-ring, 0 0 0 3px rgba(27,107,75,.18));
  outline: none;
}

.billing-reset,
.billing-facet {
  font: inherit;
  font-size: 0.83rem;
  border: 1px solid var(--line, #dce3dc);
  background: var(--card, #fff);
  color: inherit;
  border-radius: 9px;
  padding: 0.32rem 0.6rem;
  cursor: pointer;
  text-align: left;
}

/* The reason a carrier gave is a sentence, so it wraps. Without this it
 * inherits the shell's no-wrap-in-tables rule and runs off the screen. */
.billing-facet { border-style: dashed; font-weight: 600; white-space: normal; }
.billing-facet:hover { border-color: #9fb5a7; background: var(--green-soft, #e5f1e9); }
.billing-facet.is-on { border-style: solid; border-color: var(--green, #1b6b4b); background: var(--green-soft, #e5f1e9); }

/* -- rows ----------------------------------------------------------------- */

.billing-name {
  font: inherit;
  font-weight: 600;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.billing-name:hover { text-decoration: underline; }

/* mobile.css stops every cell in the shell from wrapping under 900px, so that
 * a wide table scrolls inside its box instead of collapsing to one character a
 * column. That is right for a column of figures and wrong for a sentence: this
 * line is prose, and left unwrapped it dragged the first column out to 235px
 * and put a scrollbar under a table that would otherwise have fitted a phone.
 * Two class names beat `.shell table td`, which is how this wins. */
.billing-table .billing-sub,
.billing-table .billing-remedy {
  white-space: normal;
}

.billing-sub {
  display: block;
  color: var(--muted, #64748b);
  font-size: 0.78rem;
  line-height: 1.4;
  margin-top: 0.15rem;
  max-width: 40ch;
  overflow-wrap: anywhere;
}

.billing-when small,
.billing-age small {
  display: block;
  color: var(--muted, #64748b);
  font-size: 0.7rem;
  font-weight: 400;
}

.billing-when { white-space: nowrap; font-variant-numeric: tabular-nums; }

.billing-remedy {
  color: var(--muted, #64748b);
  font-size: 0.8rem;
  line-height: 1.45;
  max-width: 34ch;
}

.billing-reason-table { margin-bottom: 1.1rem; }

.billing-reasons h3 { margin: 0 0 0.25rem; font-size: 0.95rem; }

/* A row somebody has finished still counts in the totals, so it stays on the
 * screen and steps back rather than disappearing. */
.billing-table tr.is-handled { opacity: 0.55; }

/* -- row actions ---------------------------------------------------------- */

.billing-do { white-space: normal; }

.billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  justify-content: flex-end;
}

.billing-actions button {
  font: inherit;
  font-size: 0.76rem;
  padding: 0.26rem 0.5rem;
  border: 1px solid var(--line, #dce3dc);
  border-radius: 8px;
  background: var(--card, #fff);
  color: inherit;
  cursor: pointer;
  transition:
    border-color var(--arc-t-fast, 140ms) var(--arc-ease, ease),
    background-color var(--arc-t-fast, 140ms) var(--arc-ease, ease),
    transform var(--arc-t-press, 90ms) var(--arc-ease, ease);
}

.billing-actions button:hover { border-color: #9fb5a7; background: var(--green-soft, #e5f1e9); }
.billing-actions button:active { transform: scale(.96); }
.billing-chase { font-weight: 600; }

.billing-marked {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.24rem 0.45rem;
  border-radius: 999px;
  background: var(--green-soft, #e5f1e9);
  color: var(--green, #1b6b4b);
  white-space: nowrap;
}

.billing-marked.is-parked { background: rgba(163, 95, 16, 0.14); color: var(--amber, #a35f10); }
.billing-marked.is-on_it { background: rgba(56, 132, 255, 0.14); color: #2a5fb5; }

.billing-error {
  margin: 0.3rem 0 0;
  font-size: 0.75rem;
  color: var(--red, #9c4037);
}

.billing-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.7rem;
}

.billing-count {
  margin: 0;
  color: var(--muted, #64748b);
  font-size: 0.78rem;
  line-height: 1.5;
  max-width: 62ch;
}

.billing-more { font-size: 0.82rem; padding: 0.35rem 0.75rem; }

/* -- the aging verdict ---------------------------------------------------- */

.billing-aging li.is-focus .billing-bar > span { background: var(--green, #1b6b4b); }

.billing-aging li.is-focus .billing-bucket-label em {
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green, #1b6b4b);
  display: block;
}

.billing-verdict {
  margin: 1.1rem 0;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--line, #dce3dc);
  border-left: 3px solid var(--green, #1b6b4b);
  border-radius: 11px;
  background: rgba(27, 107, 75, 0.035);
}

.billing-verdict p {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 70ch;
}

.billing-verdict p:last-child { margin-bottom: 0; }
.billing-verdict-lead { font-size: 0.95rem !important; }
.billing-consequence { color: var(--red, #9c4037); }
.billing-caveat { color: var(--muted, #64748b); font-size: 0.78rem !important; }

/* -- narrow --------------------------------------------------------------- */

@media (max-width: 700px) {
  /* The rule above this block hides the second column on every .billing-table,
   * which was the treatment description back when it had one. The tables now
   * carry that under the patient name, so the second column is a date and a
   * carrier and both are worth keeping. Put it back, then drop what actually
   * can go on a phone: the date a procedure was done (its age is in the next
   * column) and the prose remedy in the denial table (the reason above it is
   * the part that gets read). */
  .billing-table th:nth-child(2),
  .billing-table td:nth-child(2) { display: table-cell; }

  .billing-actions { justify-content: flex-start; }
  .billing-chip { min-width: 7rem; flex: 1 1 7rem; }
  .billing-search input { min-width: 0; width: 100%; }
  .billing-search { flex: 1 1 100%; }
  .billing-toggle { margin-left: 0; flex: 1 1 100%; }
  .billing-sub { max-width: 24ch; }
  .billing-remedy { display: none; }
  .billing-reason-table th:nth-child(4) { display: none; }
  .billing-verdict { padding: 0.8rem 0.85rem; }
}

/* Said twice on purpose: the carrier is a column on a desktop, where scanning
 * one is worth its width, and a line under the patient's name on a phone,
 * where it is not. Only one of the two is ever visible. */
.billing-only-narrow { display: none; }

/* A phone does not get a table.
 *
 * Measured before this block existed: at 375px the never-billed table wanted
 * 483px and scrolled inside its own box, which the shell's mobile rules make
 * the house behaviour for wide tables and which is fine for a column of
 * figures. It is not fine here, because the column that ends up off the right
 * edge is the one with the buttons in it — the actions were reachable only by
 * side-scrolling a table nobody would think to side-scroll.
 *
 * So under 560px each row becomes a small stacked card: the name and what it
 * is on one line, the age and the money on the next, and the actions across
 * the bottom at full width. The header row goes, and each value carries the
 * word that was in its column heading instead.
 * ------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* Stacked rows are tall — sixty of them measured 44,000px of page when the
   * box was allowed to grow. The box keeps its height and keeps scrolling
   * vertically; all that changes is that there is no longer anything to
   * scroll sideways to. */
  .billing-scroll {
    max-height: 28rem;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .billing-table,
  .billing-table tbody,
  .billing-table tr,
  .billing-table td {
    display: block;
    width: auto;
  }

  .billing-table thead { display: none; }

  .billing-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.7rem;
    padding: 0.65rem 0.1rem;
    border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  }

  .billing-table td {
    border: 0;
    padding: 0;
    white-space: normal;
  }

  .billing-table tr > td:first-child { grid-column: 1 / -1; }
  .billing-table .billing-age { grid-column: 1; text-align: left; }
  .billing-table .billing-amount { grid-column: 2; text-align: right; font-weight: 600; }
  .billing-table .billing-do { grid-column: 1 / -1; margin-top: 0.4rem; }
  .billing-table .billing-remedy { grid-column: 1 / -1; }

  /* The column heading has to go somewhere once the header row is gone, or a
   * bare "37d" beside a bare "$240" is two numbers and no nouns. */
  .billing-table td[data-label]::before {
    content: attr(data-label) " ";
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
    font-weight: 400;
  }

  .billing-table .billing-age small { display: none; }
  .billing-denied td:first-child { box-shadow: none; padding-left: 0; }
  .billing-denied { box-shadow: inset 3px 0 0 var(--danger, #be3c30); padding-left: 0.6rem; }
  .billing-sub { max-width: none; }
  .billing-actions { justify-content: flex-start; }
  .billing-actions button { flex: 0 0 auto; }
}

@media (max-width: 460px) {
  /* Patient, age, money and the action. Everything else moves into the
   * sub-line under the name, which is why that line exists.
   *
   * Written as td.class and th.class rather than .class alone on purpose. The
   * 700px block above puts the second column back with `td:nth-child(2)`,
   * which is one pseudo-class more specific than a bare class name and
   * therefore beat it — the header vanished, the cell stayed, and the table
   * grew a horizontal scrollbar of its own on a phone. */
  .billing-table td.billing-when,
  .billing-table th.billing-when-head,
  .billing-table td.billing-carrier,
  .billing-table th.billing-carrier-head { display: none; }

  .billing-only-narrow { display: inline; }
  .billing-sub { max-width: 19ch; }
  .billing-actions button { font-size: 0.72rem; padding: 0.22rem 0.42rem; }
  .billing-table td { padding: 0.45rem 0.5rem; }
  .billing-table thead th { padding: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .billing-chip,
  .billing-actions button,
  .billing-search input { transition: none; }
}

/* Each bar in the aging ladder is now the way into its own list, so it has to
 * look pressable without becoming a fifth button style. */
.billing-bucket-pick {
  font: inherit;
  text-align: left;
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted, #64748b);
  cursor: pointer;
  border-bottom: 1px dashed transparent;
}

.billing-bucket-pick:hover { color: var(--ink, #17231e); border-bottom-color: #9fb5a7; }
.billing-aging li.is-open .billing-bucket-pick,
.billing-aging li.is-focus .billing-bucket-pick { color: var(--ink, #17231e); font-weight: 600; }

/* --- patient-hub.css --- */
.hub-hero{margin-bottom:20px}.hub-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;background:#e9eee9;border:1px solid var(--line);border-radius:14px;margin-bottom:18px}.hub-tabs button{min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-weight:750;cursor:pointer}.hub-tabs button.active{background:#fff;color:var(--green);box-shadow:0 4px 16px rgba(31,51,40,.08)}.hub-panel{max-width:780px}.hub-progress{text-align:center;padding:8px 0 16px}.hub-progress strong,.hub-progress span{display:block}.hub-progress strong{font-size:26px}.hub-progress span{font-size:12px;color:var(--muted);margin-top:3px}.hub-focus-card,.hub-manual-form,.hub-template-form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}.hub-focus-card header{display:flex;justify-content:space-between;gap:16px;margin-bottom:18px}.hub-focus-card h2,.hub-section-heading h2,.hub-manual-form h2{margin:4px 0 6px;font-family:Georgia,serif;font-weight:500}.hub-focus-card header p,.hub-manual-form p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}.hub-kind,.hub-skip-count{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--green)}.hub-field{display:grid;gap:7px;margin-top:12px;color:var(--muted);font-size:12px;font-weight:700}.hub-field select,.hub-field textarea,.hub-manual-form input,.hub-template-form input,.hub-template-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;padding:11px;font:inherit;color:var(--ink)}.hub-field textarea{line-height:1.55;resize:vertical}.hub-state,.hub-safety{font-size:12px;line-height:1.5;color:var(--muted)}.hub-primary-actions,.hub-secondary-actions,.hub-row-actions{display:flex;gap:8px;margin-top:12px}.hub-primary-actions>*{flex:1}.hub-secondary-actions>*{flex:1}.hub-native-link{display:block;text-align:center;text-decoration:none;margin-top:9px}.hub-native-link[hidden]{display:none}.hub-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:8px 0 14px}.hub-section-heading p{margin-bottom:5px}.hub-section-heading span{font-size:12px;color:var(--muted);text-align:right}.hub-list{display:grid;gap:9px}.hub-list article{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px}.hub-list strong,.hub-list span{display:block}.hub-list span{font-size:12px;color:var(--muted);margin-top:4px}.hub-list a{text-decoration:none}.hub-remove{border:0;background:none;color:var(--red);font-size:24px;cursor:pointer}.hub-manual-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}.hub-manual-form>div{grid-column:1/-1}.hub-manual-form label,.hub-template-form label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:700}.hub-manual-form label:nth-of-type(3){grid-column:1/-1}.hub-manual-form button{grid-column:1/-1}.hub-empty{display:grid;gap:6px;text-align:center;padding:54px 20px;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:16px}.hub-template-list{display:grid;gap:12px}.hub-template-form{display:grid;gap:12px}.hub-template-form .hub-default{display:flex;align-items:center;gap:8px}.hub-template-form .hub-default input{width:auto}.hub-template-new{margin-top:16px}.hub-template-new h3{margin:0}.hub-safety{text-align:center;margin:14px auto;max-width:600px}@media(max-width:700px){.hub-tabs{position:sticky;top:64px;z-index:4}.hub-panel{max-width:none}.hub-focus-card{padding:18px}.hub-manual-form{grid-template-columns:1fr}.hub-manual-form label:nth-of-type(3){grid-column:auto}.hub-list article{align-items:flex-start;flex-direction:column}.hub-row-actions{width:100%;margin-top:4px}.hub-row-actions>*{flex:1;text-align:center}.hub-section-heading{align-items:flex-start;flex-direction:column}.hub-section-heading span{text-align:left}.hub-primary-actions{flex-direction:column}}@media(max-width:430px){.hub-tabs button{font-size:12px;padding:8px 4px}.hub-focus-card header{flex-direction:column}.hub-secondary-actions{flex-direction:column}}

/* --- lists.css --- */
/* Patient lists
 *
 * Two columns on a desk and one on a phone. The left column is the index of
 * lists with their counts; the right is the list being worked. The counts are
 * the primary information, so they are set in the same weight as the labels
 * rather than as small print.
 *
 * The capacity strip sits above both, because it is why the counts are what
 * they are. A capped list that does not explain the cap reads as a bug.
 */

/* The headline here is a whole sentence rather than the two or three words the
 * hero style was sized for, so it is set smaller and allowed to wrap. At the
 * inherited size it filled a phone screen on its own and pushed the list — the
 * thing the screen exists for — below the fold. */
.lists-hero h1 {
  font-size: clamp(1.4rem, 3.2vw + 0.6rem, 2.4rem);
  line-height: 1.15;
}

.capacity-strip {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
}

.capacity-strip header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.capacity-strip h2 {
  margin: 0;
  font-size: 1rem;
}

/* Estimated hours are honest but weaker than stated ones, and the badge is the
 * prompt to go and fix that. */
.capacity-inferred {
  background: rgba(180, 120, 20, 0.12);
  color: #8a5c08;
}

.capacity-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.capacity-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem;
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.03);
}

.capacity-cell span {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.capacity-cell strong {
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.capacity-cell small {
  color: var(--muted, #64748b);
}

.capacity-note {
  margin: 0.85rem 0 0;
  color: var(--muted, #64748b);
  font-size: 0.85rem;
}

.lists-layout {
  display: grid;
  /* minmax(0, …) rather than 1fr: a long patient name would otherwise push the
   * detail column past the viewport and take the whole page sideways. */
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.lists-nav {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: 1rem 0.75rem;
  position: sticky;
  top: 1rem;
}

.lists-group h3 {
  margin: 0 0 0.4rem 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.lists-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lists-nav-item:hover {
  background: rgba(15, 23, 42, 0.04);
}

.lists-nav-item.active {
  background: rgba(16, 122, 87, 0.11);
  color: #0b6b4c;
}

.lists-nav-item strong {
  font-variant-numeric: tabular-nums;
}

.lists-detail {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  /* Flex children default to min-width:auto, which lets a wide row refuse to
   * shrink and blows out the grid track above. */
  min-width: 0;
}

.lists-detail header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.lists-detail header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.lists-detail header p {
  margin: 0.15rem 0 0;
  color: var(--muted, #64748b);
  font-size: 0.9rem;
}

.lists-detail header strong {
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.list-exclusions {
  margin: 0 0 0.9rem;
  padding: 0.5rem 0.7rem;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.035);
  color: var(--muted, #64748b);
  font-size: 0.82rem;
}

.list-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  padding: .75rem 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.list-pagination > div { display: flex; gap: .4rem; }
.list-pagination button { min-height: 40px; }
.list-load-status { margin: .4rem 0; color: var(--muted); font-size: .82rem; }
.list-load-status:empty { display: none; }
.lists-detail h2 { scroll-margin-top: 80px; }
.list-page-enter { animation: list-page-arrive .16s ease-out; }
@keyframes list-page-arrive { from { opacity: .55; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .list-page-enter { animation: none; } }

.list-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.25rem;
  border-top: 1px solid var(--border, rgba(15, 23, 42, 0.07));
}

.list-requests { margin-top: .6rem; font-size: .82rem; }
.list-requests summary { cursor: pointer; min-height: 44px; padding-block: .5rem; color: var(--accent); }
.list-requests > p, .list-requests small { color: var(--muted); line-height: 1.5; }
.list-requests ol { list-style: none; padding: 0; margin: .5rem 0; }
.list-requests li { border-top: 1px solid var(--border); padding: .7rem 0; overflow-wrap: anywhere; }
.list-requests li > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; }
.list-requests li > div > span, .list-requests strong span { color: var(--muted); font-weight: 400; }
.list-requests li p { margin: .3rem 0; }
.list-requests .list-request-warning { color: #824d25; }
.list-requests summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.list-row:first-child {
  border-top: 0;
}

.list-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.list-row-meta,
.list-row-contact {
  color: var(--muted, #64748b);
  font-size: 0.82rem;
}

.list-row-alerts {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  color: #8a5c08;
  font-size: 0.82rem;
}

.list-row-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  /* Three stacked cells put the list itself two screens down on a phone. The
   * numbers are the point, so they stay and the padding goes. */
  .capacity-strip {
    padding: 0.8rem 0.85rem;
  }

  .capacity-cells {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .capacity-cell {
    padding: 0.5rem 0.45rem;
  }

  .capacity-cell strong {
    font-size: 1.25rem;
  }

  .capacity-cell span {
    font-size: 0.62rem;
  }

  /* The hours breakdown does not survive a third of a phone width, and the
   * percentage above it already carries the message. */
  .capacity-cell small {
    display: none;
  }

  .lists-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On a phone the index is one scrolling row of chips. Keeping the grouped
   * columns here made the menu 430px tall and the list started below the fold,
   * which on the screen the front desk lives in is the whole problem. Group
   * headings are dropped rather than shrunk: the list names carry their own
   * meaning and the labels were costing more height than they earned. */
  .lists-nav {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.4rem;
    padding: 0.55rem;
    scrollbar-width: none;
  }

  .lists-nav::-webkit-scrollbar {
    display: none;
  }

  .lists-group {
    display: contents;
  }

  .lists-group h3 {
    display: none;
  }

  .lists-nav-item {
    flex: 0 0 auto;
    width: auto;
    gap: 0.4rem;
    white-space: nowrap;
    border: 1px solid var(--border, rgba(15, 23, 42, 0.09));
    border-radius: 999px;
    padding: 0.4rem 0.75rem;
  }

  .lists-nav-item.active {
    border-color: transparent;
  }

  .list-row {
    flex-direction: column;
    gap: 0.6rem;
  }

  .list-row-actions {
    width: 100%;
  }

  .list-row-actions button {
    flex: 1;
  }
}

/* Practice hours
 *
 * A week is seven rows and six columns, which is a table and not a form. Days
 * Arc is still guessing at are marked, because the whole point of the screen is
 * to replace those guesses.
 */

.settings-hours-card {
  grid-column: 1 / -1;
  /* Grid items default to min-width:auto, so the wide table below would refuse
   * to shrink and take the whole page sideways instead of scrolling inside its
   * own card. */
  min-width: 0;
  overflow-x: auto;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 0.75rem;
}

.hours-table th {
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  font-weight: 600;
  padding: 0 0.4rem 0.4rem;
}

.hours-table td {
  padding: 0.25rem 0.4rem;
  border-top: 1px solid var(--border, rgba(15, 23, 42, 0.07));
}

.hours-table input[type="number"],
.hours-table input[type="time"] {
  width: 100%;
  min-width: 5.5rem;
}

/* Estimated rows read as provisional rather than wrong. */
.hours-table tr.is-estimated td {
  background: rgba(180, 120, 20, 0.05);
}

.closures {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, rgba(15, 23, 42, 0.08));
}

.closures h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.closure-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.closure-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
}

.closure-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
}

.closure-form label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
}

.closure-form .detail {
  flex-basis: 100%;
  margin: 0;
}

@media (max-width: 700px) {
  /* Six columns do not fit a phone; let the table scroll rather than letting it
   * push the whole settings page sideways. */
  .settings-hours-card {
    overflow-x: auto;
  }

  .hours-table {
    min-width: 34rem;
  }
}

/* Record completeness
 *
 * Only rendered when something is missing, so its presence is itself the
 * signal. Amber rather than red: this is work to schedule, not an outage.
 */

.record-audit {
  background: rgba(180, 120, 20, 0.06);
  border: 1px solid rgba(180, 120, 20, 0.2);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
}

.record-audit header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.record-audit h2 {
  margin: 0;
  font-size: 1rem;
}

.record-audit header span,
.record-audit small {
  color: var(--muted, #64748b);
  font-size: 0.82rem;
}

.record-audit > p {
  margin: 0.4rem 0 0.75rem;
  font-weight: 500;
}

.record-audit ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.record-audit li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.record-audit li span {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* The call script
 *
 * Collapsed by default and quiet when open. It is a prompt, not the content of
 * the screen, so it never competes with the patient rows below it.
 */

.list-scripts {
  margin: 0 0 1rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.09));
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.02);
}

.list-scripts summary {
  cursor: pointer;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.list-scripts article {
  padding: 0 0.85rem 0.5rem;
}

.list-scripts h4 {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.list-scripts pre {
  margin: 0;
  /* Scripts are written with deliberate line breaks and bracketed asides, so
   * they are preserved rather than reflowed — but they still wrap, because a
   * script that scrolls sideways is a script nobody reads. */
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.5;
}

.list-scripts small {
  display: block;
  padding: 0 0.85rem 0.75rem;
  color: var(--muted, #64748b);
  font-size: 0.78rem;
}

/* Reports
 *
 * Read rather than worked, so this is a grid of cards that each stand alone.
 * Every headline number carries its denominator underneath, because a bare
 * count is the standard way a practice report flatters itself.
 */

.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.report-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  min-width: 0;
}

.report-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.report-card h2 {
  margin: 0;
  font-size: 1.05rem;
}

.report-card header span {
  color: var(--muted, #64748b);
  font-size: 0.82rem;
}

.report-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.report-metric {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.7rem;
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.03);
}

.report-metric strong {
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.report-metric span {
  color: var(--muted, #64748b);
  font-size: 0.75rem;
}

.report-metric.is-warning strong,
.is-warning {
  color: #8a5c08;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.report-table th {
  text-align: left;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  font-weight: 600;
  padding: 0 0.4rem 0.35rem;
}

.report-table td {
  padding: 0.35rem 0.4rem;
  border-top: 1px solid var(--border, rgba(15, 23, 42, 0.07));
}

/* Every column but the first is a number and reads better right-aligned
 * against the header above it. */
.report-table td:not(:first-child),
.report-table th:not(:first-child) {
  text-align: right;
}

.report-note {
  margin: 0.75rem 0 0;
  color: var(--muted, #64748b);
  font-size: 0.82rem;
}

/* The message template library
 *
 * 64 editable strings is a lot of screen, so it collapses by message type and
 * a practice softening one recall message opens one row rather than scrolling a
 * wall. Both channels for a type sit together, because the decision is "what do
 * we say about this" and not "what does our SMS sound like".
 */

.settings-templates-card {
  grid-column: 1 / -1;
  min-width: 0;
}

.template-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.template-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
}

.template-group {
  margin-bottom: 1.1rem;
}

.template-group h3 {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.template-type {
  border: 1px solid var(--border, rgba(15, 23, 42, 0.09));
  border-radius: 11px;
  margin-bottom: 0.5rem;
}

.template-type summary {
  cursor: pointer;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.template-type summary span {
  color: var(--muted, #64748b);
  font-size: 0.8rem;
}

.template-editor {
  padding: 0.6rem 0.8rem 0.9rem;
  border-top: 1px solid var(--border, rgba(15, 23, 42, 0.07));
}

.template-editor-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* An unedited template is the shipped copy, which is information rather than a
 * warning, so it is the quietest badge on the row. */
.template-default {
  background: rgba(15, 23, 42, 0.06);
  color: var(--muted, #64748b);
}

.template-editor label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.45rem;
  font-size: 0.8rem;
}

.template-editor textarea {
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
  resize: vertical;
}

.template-editor small code {
  background: rgba(15, 23, 42, 0.05);
  border-radius: 4px;
  padding: 0.05rem 0.25rem;
  font-size: 0.8em;
}

.template-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.template-actions .detail {
  margin: 0;
}

/* Announcements
 *
 * The audience list is the load-bearing part of this screen, so it sits beside
 * the composer rather than under it, and every option states who it does not
 * reach as prominently as who it does.
 */

.announce-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.announce-form,
.announce-audiences {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  min-width: 0;
}

.announce-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
}

.announce-form textarea {
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.55;
  resize: vertical;
}

.announce-form small {
  display: block;
  color: var(--muted, #64748b);
  margin-bottom: 0.85rem;
}

.announce-form small code {
  background: rgba(15, 23, 42, 0.05);
  border-radius: 4px;
  padding: 0.05rem 0.25rem;
}

.announce-audiences h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.audience-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.09));
  border-radius: 11px;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.audience-option.is-selected {
  border-color: rgba(16, 122, 87, 0.5);
  background: rgba(16, 122, 87, 0.05);
}

.audience-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.audience-why {
  color: var(--muted, #64748b);
  font-size: 0.8rem;
}

/* Who it does not reach is set at the same weight as who it does, because that
 * is the number a practice is most likely to be wrong about. */
.audience-counts {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #64748b);
}

.audience-counts b {
  color: inherit;
  font-weight: 600;
}

@media (max-width: 900px) {
  .announce-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The audience decision comes before the words on a phone. */
  .announce-audiences {
    order: -1;
  }
}

/* Quick replies
 *
 * Collapsed rows showing the first line, because the name alone ("Waitlist")
 * does not tell you what it says and the whole point is picking the right one
 * quickly.
 */

.prompt-row {
  border: 1px solid var(--border, rgba(15, 23, 42, 0.09));
  border-radius: 11px;
  margin-bottom: 0.45rem;
  padding: 0 0.8rem;
}

.prompt-row summary {
  cursor: pointer;
  padding: 0.55rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.prompt-row summary span {
  color: var(--muted, #64748b);
  font-size: 0.8rem;
}

.prompt-row label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.45rem;
  font-size: 0.8rem;
}

.prompt-row textarea,
.ooo-form textarea {
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
  resize: vertical;
}

.prompt-row .template-actions {
  padding-bottom: 0.7rem;
}

/* The auto-reply is the one message on this screen that leaves without a person
 * reading it, so it is separated from the hand-sent prompts above it. */
.ooo-form {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, rgba(15, 23, 42, 0.08));
}

.ooo-form h3,
#newPromptForm h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

@media (max-width: 640px) {
  /* Report tables have four and five columns and do not fit a phone. They
   * scroll inside their own card rather than taking the page sideways — the
   * card is the scroll container, so the headings and notes around it stay
   * put. */
  .report-card {
    overflow-x: auto;
  }

  .report-table {
    min-width: 22rem;
  }
}

/* The plain-English line under a screen's heading.
 *
 * Sits between the heading and the hero's own subtitle: the subtitle says
 * what the screen is, this says what it currently shows. Weighted a little
 * heavier than body text so it reads as an answer rather than a caption, but
 * lighter than the heading it sits under. */
.screen-headline {
  margin: 10px 0 0;
  max-width: 62ch;
  color: var(--ink, #0f172a);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .screen-headline {
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------------
 * MEMORY, UNDO AND THE CALL THAT COMES BACK
 *
 * Three things the worklists had no room for, appended as a scoped block so
 * nothing above changes. All three are about the same gap: the screen could
 * tell you who to ring and could not tell you what had already happened.
 * ------------------------------------------------------------------------- */

/* The one-line call record on a row. Muted, because it is context for the
 * call and not the reason for it — except when the last attempt booked, which
 * is the one case where the right move is usually to leave them alone. */
.list-row-history {
  color: #7a5a12;
  font-size: 0.82rem;
}

.list-row-history.is-booked {
  color: var(--green, #1b6b4b);
}

.list-row-contact.is-unreachable {
  color: var(--red, #9c4037);
}

.list-row-actions .list-call {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

/* Today's logged calls. */
.lists-today,
.lists-lookup {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  background: var(--surface, #fff);
}

.lists-today > summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.lists-today > summary::-webkit-details-marker {
  display: none;
}

.lists-today > summary::after {
  content: "Show";
  margin-left: auto;
  color: var(--muted, #64748b);
  font-size: 0.78rem;
  font-weight: 500;
}

.lists-today[open] > summary::after {
  content: "Hide";
}

.lists-today > summary strong {
  font-size: 1.15rem;
}

.lists-today > summary small {
  color: var(--muted, #64748b);
  font-size: 0.78rem;
  font-weight: 500;
}

.lists-today-rows {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
}

.lists-today-rows li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 0;
  border-top: 1px solid var(--border, rgba(15, 23, 42, 0.07));
}

.lists-today-rows li > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.lists-today-rows span,
.lists-today-rows small {
  color: var(--muted, #64748b);
  font-size: 0.8rem;
}

.lists-today-note,
.lists-today-empty {
  margin: 0.6rem 0 0;
  color: var(--muted, #64748b);
  font-size: 0.8rem;
}

.lists-today-error {
  flex-basis: 100%;
  margin: 0.3rem 0 0;
  color: var(--red, #9c4037);
  font-size: 0.8rem;
}

/* The inbound lookup. */
#lookupForm {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}

#lookupForm label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 16rem;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
}

#lookupForm input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.18));
  border-radius: 9px;
  font: inherit;
  font-weight: 400;
}

.lookup-empty {
  margin: 0.6rem 0 0;
  color: var(--muted, #64748b);
  font-size: 0.82rem;
}

.lookup-count {
  margin: 0.7rem 0 0;
  color: var(--muted, #64748b);
  font-size: 0.8rem;
}

/* The lists are still the point of this screen, so eight matches scroll inside
 * the panel rather than pushing the worklist off the bottom of the page. */
.lookup-matches {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.5rem;
  max-height: 21rem;
  overflow-y: auto;
}

.lookup-match {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.09));
  border-radius: 12px;
  background: rgba(27, 107, 75, 0.035);
}

.lookup-match header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lookup-match header span {
  color: var(--muted, #64748b);
  font-size: 0.8rem;
}

.lookup-line {
  margin: 0.25rem 0 0;
  font-size: 0.83rem;
}

.lookup-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.lookup-actions a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* The history inside the log-a-call dialog. */
.dialog-history {
  margin: 0.5rem 0 0.25rem;
  max-height: 11rem;
  overflow-y: auto;
}

.dialog-history h3 {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #64748b);
}

.dialog-history-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dialog-history-rows li {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border, rgba(15, 23, 42, 0.07));
}

.dialog-history-rows li:first-child {
  border-top: 0;
}

.dialog-history-rows span,
.dialog-history-rows small {
  color: var(--muted, #64748b);
  font-size: 0.79rem;
}

.dialog-history-empty {
  margin: 0;
  color: var(--muted, #64748b);
  font-size: 0.82rem;
}

@media (max-width: 600px) {
  /* At a third of a phone width the action column has to sit under the name
   * or the name gets three characters. */
  .list-row {
    flex-direction: column;
    gap: 0.5rem;
  }

  .list-row-actions {
    width: 100%;
  }

  .list-row-actions .primary-btn,
  .list-row-actions .secondary-btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  .lists-today-rows li > div {
    flex-basis: 100%;
  }

  /* Full-width would give an undo the visual weight of the main action on the
   * screen, which is the opposite of what it is. */
  .lists-today-rows .secondary-btn {
    align-self: flex-start;
  }

  #lookupForm button {
    flex: 1 1 auto;
  }
}

/* The by-text lists say the reminders live in the Work Queue; this makes that
 * sentence something you can act on rather than a direction to follow by hand. */
.list-scripts-none .subnav-link {
  margin-left: 0.4rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
}

/* --- chat-cards.css --- */
/* Cards inside the chat, and the accent the surface lends them.
 *
 * The accent is set once on .qsurface and everything inside reads it through
 * --qs. That is what makes the chat feel like it changed apps rather than like
 * it printed a coloured box: the chip, the bars, the row markers and the
 * action buttons all move together.
 *
 * The palette is defined here rather than shipped from the server, so light
 * and dark are this client's business. The API sends the word "amber".
 */

.qsurface{
  --qs: var(--brand, #2563eb);
  --qs-soft: color-mix(in srgb, var(--qs) 10%, transparent);
  --qs-line: color-mix(in srgb, var(--qs) 28%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.qsurface[data-accent="blue"]  { --qs: #2563eb; }
.qsurface[data-accent="teal"]  { --qs: #0d9488; }
.qsurface[data-accent="amber"] { --qs: #b45309; }
.qsurface[data-accent="rose"]  { --qs: #be123c; }
.qsurface[data-accent="violet"]{ --qs: #6d28d9; }
.qsurface[data-accent="green"] { --qs: #15803d; }
.qsurface[data-accent="slate"] { --qs: #475569; }

/* The lifted palette, for a dark surface that Arc does not have yet.
 *
 * This was keyed to `@media (prefers-color-scheme: dark)`, which asks what the
 * reader's operating system prefers — not what this app is actually painting.
 * Arc has no dark theme: no stylesheet here changes --paper, --card or --ink,
 * so a Mac or iPhone set to dark got Arc's light surfaces with these dark-mode
 * accents on top of them. Measured on the chip, against the white card it sits
 * on: blue fell from 5.17:1 to 2.54:1 and amber from 5.02:1 to 1.67:1, which
 * is illegible and was showing to anyone whose phone is in dark mode — which
 * is most people.
 *
 * Keyed to an explicit theme attribute instead, so the intent survives for
 * whoever builds the dark theme and the colours only apply once there is
 * something dark to apply them to. Nothing sets data-theme today, so this
 * block is deliberately dormant rather than deleted.
 */
:root[data-theme="dark"]{
  /* The same hues, lifted: a 4.5:1 accent on white is unreadable on near
   * black, and these sit on text as often as behind it. */
  .qsurface[data-accent="blue"]  { --qs: #60a5fa; }
  .qsurface[data-accent="teal"]  { --qs: #2dd4bf; }
  .qsurface[data-accent="amber"] { --qs: #fbbf24; }
  .qsurface[data-accent="rose"]  { --qs: #fb7185; }
  .qsurface[data-accent="violet"]{ --qs: #a78bfa; }
  .qsurface[data-accent="green"] { --qs: #4ade80; }
  .qsurface[data-accent="slate"] { --qs: #94a3b8; }
}

/* The chip: which app answered. */
.qsurface-chip{
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--qs-line);
  border-radius: 999px;
  background: var(--qs-soft);
  color: var(--qs);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
}
.qsurface-chip:hover{ background: color-mix(in srgb, var(--qs) 18%, transparent); }
.qsurface-icon{ width: 14px; height: 14px; }

.qcard{
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: var(--surface, #fff);
  padding: 12px;
}
.qcard-title{
  margin: 0 0 8px; font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted, #64748b);
}
.qcard-more{ margin: 8px 0 0; font-size: .75rem; color: var(--muted, #64748b); }

/* Metrics */
.qcard-metrics{ display: flex; flex-wrap: wrap; gap: 18px; }
.qmetric{ display: flex; flex-direction: column; min-width: 84px; }
.qmetric-value{ font-size: 1.35rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.qmetric-label{ font-size: .75rem; color: var(--muted, #64748b); }
.qmetric-hint{ font-size: .7rem; color: var(--muted, #64748b); opacity: .8; }

/* Patients */
.qpatients{ list-style: none; margin: 0; padding: 0; }
.qpatients li{
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--border, #e2e8f0);
}
.qpatients li:first-child{ border-top: 0; }
.qpatient{
  flex: 1; display: flex; flex-direction: column; gap: 1px;
  /* 44px so a thumb hits the row and not the row above it. */
  min-height: 44px; justify-content: center;
  padding: 6px 0; border: 0; background: none; text-align: left; cursor: pointer;
}
.qpatient-name{ font-size: .9rem; font-weight: 550; color: var(--text, #0f172a); }
.qpatient-detail{ font-size: .75rem; color: var(--muted, #64748b); }
.qpatient-call{
  flex: none; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--qs); font-size: .8rem; font-weight: 600; text-decoration: none;
}

/* Bars, shared by schedule and breakdown */
.qbar{
  height: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--qs) 14%, transparent);
}
.qbar > i{ display: block; height: 100%; background: var(--qs); border-radius: 999px; }

.qschedule-row + .qschedule-row,
.qbreak-row + .qbreak-row{ margin-top: 10px; }
.qschedule-head, .qbreak-head{
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .8rem; margin-bottom: 4px;
}
.qschedule-open{ color: var(--qs); font-weight: 600; font-variant-numeric: tabular-nums; }
.qbreak-head span:last-child{ font-variant-numeric: tabular-nums; color: var(--muted, #64748b); }
.qschedule-hours{
  display: block; margin-top: 4px;
  font-size: .7rem; color: var(--muted, #64748b); font-variant-numeric: tabular-nums;
}

/* Drafts */
.qdraft + .qdraft{ margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border, #e2e8f0); }
.qdraft-head{ display: flex; justify-content: space-between; font-size: .8rem; font-weight: 600; }
.qdraft-channel{ color: var(--qs); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.qdraft-body{ margin: 4px 0 0; font-size: .8rem; color: var(--muted, #64748b); line-height: 1.45; }

/* Checklist */
.qcheck{ display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; }
.qcheck + .qcheck{ border-top: 1px solid var(--border, #e2e8f0); }
.qcheck-mark{
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
}
.qcheck.is-done .qcheck-mark{ background: color-mix(in srgb, #15803d 16%, transparent); color: #15803d; }
.qcheck.is-open .qcheck-mark{ background: color-mix(in srgb, #b45309 18%, transparent); color: #b45309; }
.qcheck-label{ font-size: .85rem; }
.qcheck-hint{ font-size: .7rem; color: var(--muted, #64748b); text-align: right; }

/* Alert */
.qcard-alert{ border-left: 3px solid var(--qs); }
.qcard-alert.is-warn{ border-left-color: #b45309; }
.qalert-title{ margin: 0; font-size: .85rem; font-weight: 600; }
.qalert-detail{ margin: 4px 0 0; font-size: .78rem; color: var(--muted, #64748b); line-height: 1.45; }

/* Actions */
.qactions{ display: flex; flex-wrap: wrap; gap: 8px; }
.qaction{
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--qs-line); border-radius: 999px;
  background: var(--qs-soft); color: var(--qs);
  font-size: .8rem; font-weight: 600; cursor: pointer;
}
.qaction:hover{ background: color-mix(in srgb, var(--qs) 18%, transparent); }

/* Attachments on a sent message */
.qattachments{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qattachment{
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 190px; padding: 3px 9px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 999px;
  font-size: .72rem; color: var(--muted, #64748b);
}
.qattachment-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Stored but not sent to the model. Dashed, because the difference between
 * "Arc has this" and "Arc read this" is the whole point of the feature. */
.qattachment.is-unread{ border-style: dashed; }

/* The composer's own attachment strip, before sending */
/* :not([hidden]) is load-bearing. `hidden` is display:none from the user-agent
 * stylesheet, and a bare `display:flex` here outranks it — so the empty tray
 * kept reserving its padding above the composer even while "hidden". */
.chat-attach-row:not([hidden]){ display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 6px; }
.chat-attach{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 999px;
  background: var(--surface, #fff); font-size: .75rem;
}
.chat-attach-drop{
  min-width: 28px; min-height: 28px;
  border: 0; background: none; color: var(--muted, #64748b);
  font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 50%;
}
.chat-attach-drop:hover{ color: var(--danger, #be123c); }
.chat-attach-button{
  flex: none; min-width: 44px; min-height: 44px;
  border: 0; background: none; color: var(--muted, #64748b);
  font-size: 1.1rem; cursor: pointer; border-radius: 50%;
}
.chat-attach-button:hover{ color: var(--brand, #2563eb); }
.chat-attach-error{ margin: 0 4px 4px; font-size: .75rem; color: var(--danger, #be123c); }

/* A drag over the whole chat, not just the input: the message list is the
 * bigger target and the one people aim at. */
.qb-chat-screen.is-dropping{ outline: 2px dashed var(--brand, #2563eb); outline-offset: -6px; }

/* Inputs that exist to be clicked by a button, not seen. display:none would
 * make them unfocusable and unreachable from a keyboard in some browsers. */
.visually-hidden{
  /* !important on the size as well as the position. This is a utility whose
   * whole job is to be unreachable by layout, and a later `.chat-main > *`
   * rule setting width:100% blew the hidden file inputs out to full width and
   * gave the page a horizontal scrollbar on a phone. */
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* The attach and camera controls sit inside .chat-input, whose `button` rule
 * is written for the one send button: a 46px filled green square. Unscoped,
 * that turned the two new controls into a row of three identical blocks with
 * the send action indistinguishable from them. These are secondary, so they
 * are quiet and the send button stays the only filled thing in the composer. */
.chat-input button.chat-attach-button{
  flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: 10px;
  background: transparent;
  color: var(--muted, #64748b);
  font-size: 20px; line-height: 1;
}
.chat-input button.chat-attach-button:hover{
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: var(--brand, #2563eb);
}

/* The starter suggestions are for an empty chat. Once there is a conversation
 * they are 120px of prompts sitting between the answer and the composer,
 * squeezing the message log to a slot barely two lines tall. */
.qb-chat-screen.has-history .qb-chat-intro{ display: none; }

/* Bottom-anchored, the way a chat reads.
 *
 * The log only became full height when the starter suggestions started hiding
 * themselves, and that exposed the opposite problem: a two-message
 * conversation sat at the top of the pane with a screen of blank beneath it
 * and the composer far below. margin-top:auto on the first message pushes a
 * short conversation down to meet the composer; once the content is taller
 * than the pane the auto margin collapses and it scrolls normally. */
.qb-chat-screen .chat-messages{ display: flex; flex-direction: column; }
.qb-chat-screen .chat-messages > .chat-message:first-child{ margin-top: auto; }

/* On a narrow screen the composer has to fit three controls and a field.
 *
 * Adding attach and camera cost the textarea 80px, and at 375px that left it
 * around 145px — narrow enough that the placeholder wrapped to a second line
 * and was clipped by the input's own height. The two secondary controls give
 * the width back, and the field is allowed to shrink below its content size,
 * which flex items do not do by default. */
/* The camera belongs on a device with a camera.
 *
 * This was backwards: it hid the button on phones, on the theory that the file
 * picker there already offers "Take Photo". True, but it made the button
 * appear only where it does the least — a desktop ignores capture="environment"
 * entirely, so the control opened the same file dialog as the paperclip beside
 * it. Two buttons, one behaviour.
 *
 * So it is hidden by default and shown where a camera is actually to hand: a
 * coarse pointer, or a screen narrow enough to be a phone or tablet. There it
 * is one tap to the camera instead of two through a picker. */
#chatCameraButton{ display: none; }

@media (pointer: coarse), (max-width: 900px){
  #chatCameraButton{ display: inline-flex; }
}

/* The first screen.
 *
 * Centred in the log rather than bottom-anchored: the anchoring exists so a
 * short CONVERSATION sits down by the composer, but applying it to a single
 * greeting left a screenful of blank above one line of text. An empty chat is
 * not a conversation with one message in it. */
.chat-greeting{
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}
.chat-greeting h1{
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 500;
  letter-spacing: -.03em;
}
.chat-greeting p{
  margin: 0;
  font-size: clamp(17px, 2vw, 21px);
  color: var(--muted, #64748b);
}
.chat-greeting small{
  margin-top: 6px;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted, #64748b);
  opacity: .8;
}

/* What the conversation has cost. Matches the phone, which has shown this
 * since the chat existed; the web never had it. */
.chat-session-cost{
  margin: 0 4px 2px;
  text-align: right;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #64748b);
}
.chat-cost{ font-variant-numeric: tabular-nums; opacity: .85; }

/* The chat, modelled on the sidebar apps people already use.
 *
 * This replaced a popover hanging off a "Past chats" button. A popover is the
 * wrong shape for something you switch between constantly: it covers the thing
 * you are reading, and it closes the moment you pick anything. A column that
 * stays open until you put it away is the pattern for a reason.
 */
.qb-chat-screen{
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: stretch;
}

.chat-sidebar{
  /* width + min-width, not flex-basis.
   *
   * A flex item's automatic minimum size (min-width:auto) floors it at its own
   * content, so a flex-basis collapse silently did nothing and the column
   * stayed at the width of the "New chat" button inside it. Stating both ends
   * explicitly in both states takes the guesswork out of it entirely. */
  flex: none;
  width: 264px;
  min-width: 264px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 6px 10px 10px;
  border-right: 1px solid var(--line, #dce3dc);
  /* Width, not display: a collapse that animates has to have something to
   * animate between, and display:none jumps. */
  overflow: hidden;
  /* Animated. The end state is set by width/min-width, so if transitions are
   * disabled — reduced motion, a throttled background tab — the column still
   * lands closed rather than hanging open; the animation is decoration over a
   * layout that is already correct without it. */
  transition: width .2s ease, min-width .2s ease, padding .2s ease, opacity .15s ease;
}
.qb-chat-screen.is-collapsed .chat-sidebar{
  width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  border-right-color: transparent;
  opacity: 0;
  pointer-events: none;
}
.chat-sidebar-shade { display:none; }
@media (prefers-reduced-motion: reduce){
  .chat-sidebar{ transition: none; }
}

.chat-main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-sidebar-top{ display: flex; justify-content: flex-end; }

.chat-icon-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 0; border-radius: 9px;
  background: none; color: var(--muted, #64748b);
  cursor: pointer;
}
.chat-icon-btn:hover{ background: var(--green-soft, #e5f1e9); color: var(--green, #1b6b4b); }
/* The reopen control only exists while the sidebar is away. */
.qb-chat-screen:not(.is-collapsed) #chatSidebarOpen{ display: none; }

.chat-sidebar-action{
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line, #dce3dc); border-radius: 999px;
  background: var(--card, #fff); color: var(--ink, #17231e);
  font: inherit; font-size: 13px; font-weight: 650;
  cursor: pointer; white-space: nowrap;
}
.chat-sidebar-action:hover{ background: var(--green-soft, #e5f1e9); color: var(--green, #1b6b4b); }

.chat-sidebar-search{
  display: flex; align-items: center; gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--line, #dce3dc); border-radius: 10px;
  background: var(--card, #fff);
  color: var(--muted, #64748b);
}
.chat-sidebar-search input{
  flex: 1; min-width: 0; min-height: 36px;
  border: 0; background: none; font: inherit; font-size: 13px; outline: 0;
}

.chat-sidebar-heading{
  margin: 6px 0 0 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #64748b);
}

.chat-history-list{ flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.chat-history-empty{ margin: 8px 4px; font-size: 12px; line-height: 1.5; color: var(--muted, #64748b); }
.chat-history-row{ display: flex; align-items: center; gap: 2px; border-radius: 9px; }
.chat-history-row:hover{ background: #f1f5f0; }
.chat-history-row.is-active{ background: var(--green-soft, #e5f1e9); }
.chat-history-open{
  flex: 1; min-width: 0;
  display: grid; gap: 1px;
  padding: 8px 9px;
  border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
}
.chat-history-open strong{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 550; color: var(--ink, #17231e);
}
.chat-history-open small{ font-size: 11px; color: var(--muted, #64748b); }
/* Revealed on hover, like every list of this shape: a delete button beside
 * every row at rest turns the list into a wall of crosses. */
.chat-history-delete{
  flex: none; width: 26px; height: 26px; margin-right: 4px;
  border: 0; background: none; border-radius: 50%;
  color: var(--muted, #64748b); font-size: 16px; line-height: 1; cursor: pointer;
  opacity: 0;
}
.chat-history-row:hover .chat-history-delete,
.chat-history-delete:focus-visible{ opacity: 1; }
.chat-history-delete:hover{ color: var(--red, #9c4037); background: rgba(156,64,55,.09); }

/* Floats over the conversation rather than sitting in a row of its own, so
 * putting the sidebar away costs the thread no vertical space. */
.chat-reopen{
  position: absolute;
  z-index: 4;
  top: 2px;
  left: 2px;
}
.qb-chat-screen{ position: relative; }

/* On a phone the column would leave no room for the conversation, so it lies
 * over it instead and the page beneath does not move. */
@media (max-width: 760px){
  .chat-sidebar-shade:not([hidden]){
    display:block; position:absolute; inset:0; z-index:7;
    background:rgba(29,43,40,.12);
  }
  /* Off screen until asked for. A 264px overlay on a 375px phone covers the
   * conversation, so it slides in rather than greeting you. */
  .chat-sidebar{
    position: absolute; z-index: 8; top: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    background: var(--card, #fff);
    box-shadow: 0 18px 44px rgba(31,51,40,.18);
  }
  /* Inverted on purpose: on a phone `is-collapsed` is the resting state, so
   * the class that shows it is the absence of it. */
  .qb-chat-screen:not(.is-collapsed) .chat-sidebar{ transform: translateX(0); }
  .qb-chat-screen.is-collapsed .chat-sidebar{ width: 264px; min-width: 264px; padding: 6px 10px 10px; opacity: 1; }
  .qb-chat-screen{ position: relative; }
  .chat-main{ padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce){
  .qb-chat-screen .chat-sidebar{ transition:none; }
}


/* Who is signed in, and the way to settings — pinned to the foot of the
 * column so both are in reach from the chat rather than only from the top bar. */
.chat-sidebar-foot{
  display: flex; align-items: center; gap: 9px;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--line, #dce3dc);
}
.chat-avatar{
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--green, #1b6b4b); color: #fff;
  font-size: 11px; font-weight: 750; letter-spacing: .02em;
}
.chat-whoami{ flex: 1; min-width: 0; display: grid; gap: 0; }
.chat-whoami strong{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 650;
}
.chat-whoami small{ font-size: 11px; color: var(--muted, #64748b); }
.chat-foot-icon{ width: 17px; height: 17px; }

/* Full bleed for the chat, and only the chat.
 *
 * Every other screen is a document and reads better in a centred column, so
 * the shell keeps its 78rem. The chat is a workspace: the sidebar wants the
 * window's left edge and the conversation wants the middle of whatever is
 * left, at any width. Those two cannot both happen inside a centred column.
 */
/* Specificity has to beat `body.shell-modern main.shell`, which is where the
 * centred 78rem column is set — a plain `main.shell.is-chat` loses to it. */
body.shell-modern main.shell.is-chat{
  max-width: none;
  margin-inline: 0;
  padding-left: 0;
  padding-right: 0;
}

/* The conversation itself stays a readable measure and sits centred in the
 * space beside the sidebar — so widening the window widens the margins, not
 * the line length. */
.chat-main > *{
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
}

/* Except the reopen button, which is not part of the column.
 *
 * It floats over the conversation, so it is a direct child of .chat-main and
 * was being sized by the rule above — a 34px icon stretched into a 768px
 * transparent slab lying across the top of the thread, swallowing taps on
 * whatever sat under it. It needs its own size back. */
.chat-main > .chat-reopen{
  width: 34px;
  max-width: none;
  margin-inline: 0;
}
.chat-main{ padding: 0 20px; }

/* The sidebar runs to the floor.
 *
 * The shell reserves 6.5rem at its foot for the floating dock, and the sidebar
 * was inheriting that — so the column stopped 104px above the bottom of the
 * window with a band of page showing beneath it. The dock floats over
 * everything anyway; it is the conversation that needs to clear it, not the
 * chat's own furniture. So the clearance moves off the shell and onto the
 * column that actually needs it.
 */
/* Has to out-specify `body.shell-modern:not(.auth-locked) main.shell`, which
 * is where the dock clearance is set and which ties a plain
 * `body.shell-modern main.shell.is-chat` — and wins the tie by loading later. */
body.shell-modern:not(.auth-locked) main.shell.is-chat{ padding-bottom: 0; }
.chat-main{ padding-bottom: 6.5rem; }
@media (max-width: 900px){
  .chat-main{ padding-bottom: 5.5rem; }
}

/* The dock and the privacy line belong under the conversation.
 *
 * The dock is fixed at left:50% — the centre of the WINDOW. With the sidebar
 * open the conversation is centred in the space beside it, so the dock sat a
 * sidebar's-half to the left of everything it belongs under. It now shifts by
 * that same half, and shifts back when the column is put away.
 */
body.shell-modern:has(.qb-chat-screen:not(.is-collapsed)) .dock{
  transform: translateX(calc(-50% + 132px));
  transition: transform .2s ease;
}
@media (max-width: 760px){
  /* The column overlays rather than displaces on a phone, so nothing moves. */
  body.shell-modern:has(.qb-chat-screen:not(.is-collapsed)) .dock{
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce){
  body.shell-modern:has(.qb-chat-screen:not(.is-collapsed)) .dock{ transition: none; }
}

/* Same measure as the conversation above it, so it centres on the composer
 * rather than on some narrower box of its own. */
.qb-chat-screen .chat-privacy{
  max-width: 48rem;
  margin-inline: auto;
}

/* A new chat opens with the composer in the middle of the screen.
 *
 * An empty thread pinned to the bottom of a full-height log is a page that
 * looks like it is waiting for something that already happened. Centred, the
 * greeting and the box you type into are one object in the middle of the
 * screen — and the moment there is a conversation, the log takes the room back
 * and the composer settles to the floor where it belongs.
 */
.qb-chat-screen:not(.has-history) .chat-main{
  justify-content: center;
}
.qb-chat-screen:not(.has-history) .chat-messages{
  /* Shrink to the greeting instead of eating the height. */
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  overflow: visible;
}
.qb-chat-screen:not(.has-history) .chat-greeting{
  margin: 0 0 4px;
}
.qb-chat-screen:not(.has-history) .chat-privacy{ margin-top: 10px; }

/* Listening. The composer's microphone keeps its size and gains colour rather
 * than becoming the word "Stop" in a row of icons. */
.chat-input button.chat-attach-button.is-listening{
  color: var(--red, #9c4037);
  background: rgba(156, 64, 55, .10);
}

/* Changes proposed from the chat.
 *
 * Deliberately looks like a form and not like a message: it holds real values,
 * it is editable, and pressing the button changes the practice. A card that
 * reads as chatter is a card people approve without looking.
 */
.qaction-card{ border-left: 3px solid var(--qs); }
.qproposal{margin:24px 0;max-width:680px;padding:0 0 12px;border-top:1px solid #dce3df;color:#202c29;font:16px/1.55 Arial,sans-serif;overflow-wrap:anywhere}
.qproposal header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-top:20px}
.qproposal h4{font:600 20px/1.35 Arial,sans-serif;margin:0}
.qproposal p{margin:8px 0 16px}.qproposal .qproposal-meta{font-size:13px;color:#687671;margin:4px 0}
.qproposal .qproposal-status{font-size:13px;color:#225b4a;margin:12px 0}
.qproposal-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.qproposal label{display:block;margin:0;min-width:0;grid-column:1/-1}.qproposal label.qproposal-date{grid-column:auto}.qproposal label>span{display:block;font-size:14px;color:#687671;margin-bottom:5px}
.qproposal :is(input,textarea){width:100%;min-height:44px;padding:10px 12px;border:1px solid #bcc8c1;border-radius:6px;font:16px/1.55 Arial,sans-serif;color:inherit;background:#fff;box-sizing:border-box;resize:vertical}
.qproposal button{min-height:44px;padding:10px 14px;border:1px solid #225b4a;border-radius:6px;font:500 15px/1.4 Arial,sans-serif;background:#fff;color:#225b4a;cursor:pointer}
.qproposal header button{border:0;flex-shrink:0;padding-top:0}.qproposal button:disabled{opacity:.5;cursor:default}
.qproposal button.qproposal-primary{background:#225b4a;color:white}.qproposal-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.qproposal :is(button,input,textarea):focus-visible{outline:2px solid #225b4a;outline-offset:3px}
.qproposal dl>div{padding:12px 0;border-bottom:1px solid #dce3df}.qproposal dt{color:#687671;font-size:14px}.qproposal dd{margin:4px 0;white-space:pre-wrap}
.qproposal-error{color:#824d25}.qproposal-outcome{border-left:2px solid #225b4a;padding-left:16px}
.qproposal-body{animation:proposal-reveal 140ms ease-out}.qproposal button{transition:background-color 120ms ease,color 120ms ease}
@keyframes proposal-reveal{from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.qproposal-body{animation:none}.qproposal button{transition:none}}
.chat-message:has(.qproposal){max-width:100%;width:100%;min-width:0}.chat-message:has(.qproposal) .message-bubble{background:transparent;border:0;box-shadow:none;padding:0;max-width:100%;width:100%}
@media(max-width:600px){.qproposal{margin:18px 0}.qproposal header{gap:8px}.qproposal-buttons>button{flex:1}.qproposal h4{font-size:18px}.qproposal-fields{grid-template-columns:1fr}}
.qaction-title{ margin: 0; font-size: .92rem; font-weight: 650; }
.qaction-why{ margin: 3px 0 10px; font-size: .78rem; color: var(--muted, #64748b); line-height: 1.45; }
.qaction-note{ margin: 8px 0 0; font-size: .72rem; color: var(--muted, #64748b); }

.qaction-field{ display: grid; gap: 4px; margin-bottom: 10px; }
.qaction-field > span{ font-size: .74rem; font-weight: 600; color: var(--muted, #64748b); }
.qaction-field input,
.qaction-field textarea{
  width: 100%;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 9px;
  padding: 9px 11px;
  font: inherit;
  font-size: .85rem;
  color: var(--text, #0f172a);
  background: var(--card, #fff);
  resize: vertical;
}
.qaction-field textarea{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  line-height: 1.6;
}
.qaction-field input:focus,
.qaction-field textarea:focus{ border-color: var(--qs); outline: 2px solid color-mix(in srgb, var(--qs) 18%, transparent); }

.qaction-buttons{ display: flex; gap: 8px; margin-top: 12px; }
.qaction-approve{
  min-height: 34px; padding: 0 15px;
  border: 0; border-radius: 999px;
  background: var(--qs); color: #fff;
  font: inherit; font-size: .8rem; font-weight: 650; cursor: pointer;
}
.qaction-approve:disabled{ opacity: .6; cursor: wait; }
.qaction-cancel{
  min-height: 34px; padding: 0 13px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 999px;
  background: none; color: var(--muted, #64748b);
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.qaction-error{ margin: 8px 0 0; font-size: .76rem; color: var(--danger, #be123c); }
.qaction-error:empty{ display: none; }

.qaction-card.is-applied{ border-left-color: var(--green, #15803d); }
.qaction-done{ margin: 0; font-size: .85rem; font-weight: 600; }
.qaction-undo{
  margin-top: 8px;
  border: 0; background: none; padding: 0;
  color: var(--qs); font: inherit; font-size: .78rem; font-weight: 650;
  cursor: pointer; text-decoration: underline;
}

/* A field whose value is an identifier.
 *
 * The chair a scheduling offer is for is "2026-08-06:14:00:1" and the patient
 * is "103716". Neither is a thing to put in a text box in front of a person
 * about to approve something. The sentence is shown, the id travels hidden,
 * and it is exactly what the server proposed.
 */
.qaction-field-fixed strong{
  display: block;
  padding: 9px 11px;
  border: 1px solid var(--line, #dce3dc);
  border-radius: 9px;
  background: var(--paper, #f7faf8);
  color: var(--ink, #0f172a);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.qwork-anchor{min-width:0}
.qcontinue{margin:14px 0;padding:18px 20px;border:1px solid var(--line,#d8e1df);border-radius:12px;background:var(--panel,#fff);color:var(--ink,#20342e)}
.qcontinue-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.qcontinue-heading small{font-size:10px;letter-spacing:.1em;color:var(--muted,#64766e)}
.qcontinue-heading h4{font-size:16px;line-height:1.4;margin:5px 0 0;font-weight:600}
.qcontinue>p{font-size:13px;line-height:1.55;color:var(--muted,#64766e);margin:10px 0 0}
.qcontinue-heading>button{flex-shrink:0;min-height:40px;padding:8px 14px;border:1px solid var(--line,#d8e1df);border-radius:8px;background:transparent;color:var(--accent,#245f4e);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.qcontinue-heading>button:hover{background:#f0f5f2}.qcontinue-heading>button:focus-visible{outline:2px solid #245f4e;outline-offset:3px}.qcontinue-heading>button:disabled{opacity:.6;cursor:wait}
.qcontinue>[role=alert]{color:#9b372b}.qcontinue>[data-continue-mount]:empty{display:none}.qcontinue>[data-continue-mount]:not(:empty){margin-top:16px}
.qcontinue-highlight{scroll-margin-top:18px;animation:qcontinue-arrive .9s ease-out}
@keyframes qcontinue-arrive{from{box-shadow:0 0 0 3px #2c6d5740}to{box-shadow:0 0 0 3px transparent}}
@media(prefers-reduced-motion:reduce){.qcontinue-highlight{animation:none}}
@media(max-width:480px){.qcontinue{padding:16px}.qcontinue-heading{flex-direction:column;align-items:flex-start;gap:12px}.qcontinue-heading>button{min-height:44px;max-width:100%}}
.chat-message:has(.qedit){max-width:100%;width:100%;min-width:0}
.chat-message:has(.qedit)>.brand-mark{display:none}
.chat-message .message-bubble:has(.qedit){width:100%;max-width:100%;min-width:0;background:transparent;border:0;box-shadow:none;padding:0}
.qedit{margin:18px 0;padding:18px 0;border-block:1px solid var(--line,#d8e1df);color:var(--ink,#20342e)}
.chat-callback-context{display:flex;align-items:center;gap:16px;margin:0 auto 8px;padding:10px 12px;border-left:2px solid #477a5f;background:#f2f6f3;border-radius:0 6px 6px 0;animation:stemplate-enter .18s ease-out}
.chat-callback-context[hidden]{display:none}.chat-callback-context>div{flex:1;min-width:0;display:grid;gap:3px}
.chat-callback-context span{font-size:10px;font-weight:500;letter-spacing:.05em;color:var(--muted,#64766e)}
.chat-callback-context strong{font-size:13px;font-weight:500;color:var(--ink,#20342e);overflow-wrap:anywhere}
.chat-callback-context button{flex:none;min-height:40px;border:0;padding:8px;background:transparent;color:#245f4e;font:inherit;font-size:12px;cursor:pointer}
.chat-callback-context button:focus-visible{outline:2px solid #245f4e;outline-offset:2px}
.qcompose-ask{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:12px 0}
.qcompose-ask span{font-size:12px;line-height:1.5;color:var(--muted,#64766e)}
@media(prefers-reduced-motion:reduce){.chat-callback-context{animation:none}}
.qproposal-record{margin-top:18px;padding:18px 0;border-top:1px solid var(--line,#d8e1df)}
.qproposal-record h5{font-size:16px;margin:0 0 8px;overflow-wrap:anywhere}
.qproposal-record dl{margin:12px 0}.qproposal-record dl>div{padding:10px 0}
.qproposal-record dd{white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;overflow:auto}
.stemplate{margin-top:20px;padding-top:18px;border-top:1px solid var(--line,#d8e1df);animation:stemplate-enter .18s ease-out}
@keyframes stemplate-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.stemplate{animation:none}}
.stemplate h3{font-size:17px;margin:0 0 12px;scroll-margin-top:20px}.stemplate>p{font-size:13px;line-height:1.6}
.qproposal .stemplate-confirm{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;margin:18px 0}
.qproposal .stemplate-confirm input[type=checkbox]{width:18px;height:18px;min-height:18px;padding:0;flex:0 0 18px;margin-top:2px}
.stemplate .twork-comparison h4{font-size:15px;overflow-wrap:anywhere}
.stemplate pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:14px;line-height:1.7;max-height:350px;overflow:auto}
.qedit>header>span{font-size:11px;font-weight:500;color:var(--muted,#64766e)}
.qedit>header h4{font-size:17px;font-weight:600;letter-spacing:-.02em;margin:5px 0;overflow-wrap:anywhere}
.qedit>header p,.qedit-caption{font-size:12px;line-height:1.6;color:var(--muted,#64766e);margin:0 0 12px}
.qedit-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin:18px 0}
.qedit-clarify{margin:20px 0 14px;padding-left:16px;border-left:2px solid #477a5f;animation:stemplate-enter .18s ease-out}
.qedit-disclosure{font-size:12px;line-height:1.6;color:var(--muted,#64766e);margin:12px 0}
.qedit-disclosure summary{cursor:pointer}.qedit-disclosure p{margin:8px 0}.qedit>.qedit-cost{margin:12px 0 0}
.qedit-clarify>label{display:block;font-size:15px;font-weight:500;line-height:1.5;margin-bottom:10px;overflow-wrap:anywhere}
.qedit-clarify>textarea{display:block;box-sizing:border-box;width:100%;min-height:92px;resize:vertical;padding:12px;border:1px solid var(--line,#d8e1df);border-radius:7px;background:var(--surface,#fff);color:inherit;font:inherit;font-size:16px;line-height:1.5}
.qedit-clarify>textarea:focus-visible{outline:2px solid #245f4e;outline-offset:2px}
.qedit-clarify>.qedit-caption{margin:8px 0 0}.qedit-clarify details{margin-bottom:16px;font-size:12px;line-height:1.6;color:var(--muted,#64766e)}
.qedit-clarify summary{cursor:pointer}.qedit-clarify dl{margin:10px 0}.qedit-clarify dt{font-weight:500}.qedit-clarify dd{margin:4px 0 12px;white-space:pre-wrap;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.qedit-clarify{animation:none}}
.qedit-compare h5{font-size:11px;font-weight:500;color:var(--muted,#64766e);margin:0 0 8px}
.qedit-compare pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:13px;line-height:1.65;margin:0;padding:12px;max-height:260px;overflow:auto;background:#f6f7f6;border-radius:6px}
.qedit-compare>div+div pre{background:#edf4ef;border-left:2px solid #477a5f}
.qedit-dates{margin:0;padding:12px;background:#f6f7f6;border-radius:6px}
.qedit-compare>div+div .qedit-dates{background:#edf4ef;border-left:2px solid #477a5f}
.qedit-dates>div+div{margin-top:12px}.qedit-dates dt{font-size:11px;color:var(--muted,#64766e);margin-bottom:4px}
.qedit-dates dd{margin:0;font-size:14px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.qedit-compare del{color:#727970;text-decoration-color:#a4aaa2}.qedit-compare ins{color:#245f4e;font-weight:600;text-decoration:none;background:#dcebdd}
.qedit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.qedit-actions button{min-height:40px;padding:8px 12px;border:1px solid var(--line,#d8e1df);border-radius:7px;font:inherit;font-size:12px;font-weight:500;background:transparent;color:var(--ink,#20342e);cursor:pointer}
.qedit-actions button.qedit-primary{color:#fff;background:#245f4e;border-color:#245f4e}
.qedit-actions button:focus-visible{outline:2px solid #245f4e;outline-offset:3px}.qedit-actions button:disabled{opacity:.55;cursor:wait}
.qedit>[role=alert]{font-size:13px;line-height:1.6;color:#9b372b}.qedit>[data-edit-mount]:not(:empty){margin-top:18px}
@media(max-width:540px){.qedit-compare{grid-template-columns:minmax(0,1fr);gap:14px}.qedit-compare pre{max-height:220px}}

/* --- scribe-smart.css --- */
/* Smart Scribe: the questions, and the note structures.
 *
 * These sit inside the Scribe screen, which already has its own hero, capture
 * panel and draft cards. So the visual job here is to read as a continuation
 * of that screen rather than as a bolted-on panel: same card radius, same
 * borders, and the accent used only where something is being asked.
 */

/* --- the questions ----------------------------------------------------- */

.scribe-questions {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  padding: 18px;
  box-shadow: var(--shadow);
}

.scribe-questions-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}
.scribe-questions-head strong { font-size: 15px; }
.scribe-questions-head span { color: var(--muted); font-size: 12px; }

.scribe-question + .scribe-question {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.scribe-question-prompt { margin: 0 0 2px; font-size: 14px; font-weight: 650; }
/* Why the chart wants it. A dentist who understands the reason answers faster
 * than one being interrogated, so this is never hidden behind a tooltip. */
.scribe-question-why { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }

.scribe-answer-row { display: flex; gap: 8px; align-items: stretch; }
.scribe-answer-row input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}
.scribe-answer-row input:focus {
  border-color: var(--green);
  outline: 3px solid rgba(27, 107, 75, .08);
}

.scribe-dictation-recovery {
  margin: 12px 0 18px;
  padding: 16px 0 0 16px;
  border-left: 2px solid var(--green, #235c4b);
  min-width: 0;
}
.scribe-dictation-recovery > strong { font-size: 14px; color: var(--ink, #22352e); }
.scribe-dictation-recovery > p { margin: 6px 0 12px; font-size: 13px; line-height: 1.6; color: var(--muted, #65746e); }
.scribe-dictation-recovery textarea { width: 100%; min-height: 88px; resize: vertical; box-sizing: border-box; font: inherit; line-height: 1.5; }
.scribe-dictation-recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.scribe-dictation-recovery-actions button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line, #d8e2dc); border-radius: 8px; background: transparent; color: var(--green, #235c4b); font: inherit; cursor: pointer; }
.scribe-dictation-recovery-actions button:first-child { background: var(--green, #235c4b); color: white; border-color: transparent; }
.scribe-dictation-recovery-actions button:focus-visible { outline: 2px solid var(--green, #235c4b); outline-offset: 3px; }

.scribe-dictate {
  flex: 0 0 auto;
  min-width: 84px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--green);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.scribe-dictate:hover { background: var(--green-soft); }
/* Listening is a state a person must be able to see across the room, because
 * the alternative is dictating a whole visit into a stopped recogniser. */
.scribe-dictate.is-listening {
  border-color: var(--red);
  color: #fff;
  background: var(--red);
  animation: scribe-pulse 1.4s ease-in-out infinite;
}
@keyframes scribe-pulse { 50% { opacity: .72; } }
@media (prefers-reduced-motion: reduce) {
  .scribe-dictate.is-listening { animation: none; }
}

.scribe-questions-actions { display: flex; gap: 10px; margin-top: 16px; }

/* Nothing missing is a result worth stating plainly, not a blank space. */
.scribe-complete {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid #b9ddd0;
  border-radius: 16px;
  background: var(--green-soft);
}
.scribe-complete strong { font-size: 14px; }
.scribe-complete span { color: var(--muted); font-size: 12px; }

/* --- note structures --------------------------------------------------- */

.note-templates { display: grid; gap: 14px; }

.template-composer {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.template-composer label { font-size: 13px; }
.template-composer .primary-btn { justify-self: start; }

.note-template {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  padding: 16px 18px;
}
.note-template.is-default { border-color: #b9ddd0; }
.note-template > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.note-template > header > div:first-child { display: flex; align-items: center; gap: 8px; }
.note-template-actions { display: flex; gap: 12px; }

.link-btn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--green);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }
.link-btn.is-danger { color: var(--red); }

/* The structure is shown as-is. It is a text artefact the dentist wrote and
 * will edit again, so it keeps its own line breaks and monospacing rather than
 * being reflowed into prose. */
.note-template-body {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8faf7;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}

.template-proposal, .template-edit { display: grid; gap: 10px; margin-top: 12px; }
.template-proposal label, .template-edit label { display: grid; gap: 4px; font-size: 13px; }
.template-proposal input, .template-edit input,
.template-proposal textarea, .template-edit textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  resize: vertical;
}
.template-proposal textarea, .template-edit textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
}
.template-proposal-actions { display: flex; gap: 10px; }
.inline-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.inline-check input { width: 18px; height: 18px; }

@media (max-width: 560px) {
  /* The dictate button keeps its label rather than shrinking to an icon: this
   * is the control the whole feature depends on being found. */
  .scribe-answer-row { flex-wrap: wrap; }
  .scribe-answer-row input { flex: 1 1 100%; }
  .scribe-dictate { flex: 1 1 auto; }
  .note-template > header { flex-direction: column; align-items: flex-start; }
}

/* --- settings-condense.css --- */
/* Settings as an index rather than a wall.
 *
 * Each card folds behind its own heading, with a sentence under it saying what
 * is configured inside. The sentence is the point: twelve closed drawers with
 * nothing but titles would be less useful than the wall it replaced.
 */
.settings-card:has(> .settings-drawer){ padding: 0; }

.settings-drawer > summary{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}
.settings-drawer > summary::-webkit-details-marker{ display: none; }
.settings-drawer > summary:hover{ background: #f8faf7; }

.settings-drawer-title{ font-size: 15px; font-weight: 650; }
.settings-drawer-note{
  grid-column: 1;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.settings-drawer-note:empty{ display: none; }

.settings-drawer-chevron{
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--muted);
  font-size: 15px;
  transition: transform .15s ease;
}
.settings-drawer[open] > summary .settings-drawer-chevron{ transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce){
  .settings-drawer-chevron{ transition: none; }
}

.settings-drawer-body{ padding: 0 18px 18px; }
.settings-drawer[open] > summary{ border-bottom: 1px solid var(--line); margin-bottom: 14px; }

/* --- feedback.css --- */
/* The report panel.
 *
 * A dialog rather than a screen: the point is to say what went wrong without
 * leaving what went wrong, so the thing being complained about stays behind
 * it and can be looked at again on the way to describing it.
 */

.feedback-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line, #dce3dc);
  border-radius: 999px;
  background: var(--card, #fff);
  color: var(--ink, #0f172a);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.feedback-button:hover {
  border-color: var(--green, #1b6b4b);
  color: var(--green, #1b6b4b);
}

.feedback-button svg { width: 15px; height: 15px; }

.feedback-dialog {
  width: min(560px, calc(100vw - 24px));
  padding: 0;
  border: 1px solid var(--line, #dce3dc);
  border-radius: 18px;
  background: var(--card, #fff);
  color: var(--ink, #0f172a);
}

.feedback-dialog::backdrop { background: rgba(15, 23, 42, 0.42); }

.feedback-panel { display: grid; gap: 10px; padding: 20px; }

.feedback-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.feedback-head h2 { margin: 0; font-family: Georgia, serif; font-size: 24px; font-weight: 500; }
.feedback-where { margin: 4px 0 0; color: var(--muted, #64748b); font-size: 12px; line-height: 1.45; }

.feedback-close {
  border: 0; background: none; color: var(--muted, #64748b);
  font-size: 26px; line-height: 1; cursor: pointer;
}

.feedback-label { color: var(--muted, #64748b); font-size: 12px; font-weight: 700; }

.feedback-note {
  width: 100%;
  min-height: 118px;
  padding: 11px;
  border: 1px solid var(--line, #dce3dc);
  border-radius: 11px;
  background: #fff;
  color: var(--ink, #0f172a);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

/* What was actually said, kept beside what Luna made of it. Quieter than the
 * text it explains, but present: a rewrite nobody can see is a rewrite nobody
 * can disagree with. */
.feedback-raw {
  margin: 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--green-soft, #e5f1e9);
  color: #33503f;
  font-size: 12px;
  line-height: 1.5;
}

.feedback-tools { display: flex; flex-wrap: wrap; gap: 8px; }

.feedback-tool {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px;
  border: 1px solid var(--line, #dce3dc);
  border-radius: 10px;
  background: #fff;
  color: var(--ink, #0f172a);
  font: inherit; font-size: 13px; font-weight: 650;
  cursor: pointer;
}
.feedback-tool:hover { border-color: var(--green, #1b6b4b); color: var(--green, #1b6b4b); }
.feedback-tool svg { width: 17px; height: 17px; }
.feedback-tool[data-recording="1"] { border-color: var(--red, #9c4037); color: var(--red, #9c4037); }

/* An author `display` beats the `hidden` attribute's UA rule, so a bare
 * `hidden` left an empty bordered box sitting above the buttons on every
 * panel that had no screenshot yet. Stated rather than assumed. */
.feedback-shot[hidden] { display: none; }

.feedback-shot {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  border: 1px solid var(--line, #dce3dc);
  border-radius: 11px;
}
.feedback-shot img {
  width: 104px; height: 74px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line, #dce3dc);
}
.feedback-shot button {
  border: 0; background: none; color: var(--muted, #64748b);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.feedback-shot button:hover { color: var(--red, #9c4037); }

.feedback-status { margin: 0; min-height: 17px; color: var(--muted, #64748b); font-size: 12px; }
.feedback-status[data-tone="bad"] { color: var(--red, #9c4037); }

.feedback-foot { display: flex; justify-content: flex-end; gap: 9px; }

.feedback-cancel {
  padding: 10px 16px;
  border: 1px solid var(--line, #dce3dc);
  border-radius: 10px;
  background: #fff;
  color: var(--ink, #0f172a);
  font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
}

.feedback-send {
  padding: 10px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--green, #1b6b4b);
  color: #fff;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}

.feedback-done { display: grid; gap: 8px; justify-items: center; padding: 26px 20px; text-align: center; }
.feedback-done-mark { margin: 0; font-family: Georgia, serif; font-size: 27px; color: var(--green, #1b6b4b); }
.feedback-done p { margin: 0; color: var(--muted, #64748b); font-size: 13px; }

@media (max-width: 900px) {
  /* The panel is appended to the body, not into .shell, so the shell's 44px
   * touch-target floor never reached it and every control here came out at
   * 37px. Same miss as the launcher, same fix, stated where the component
   * lives so it cannot be lost again.
   */
  .feedback-panel button,
  .feedback-button {
    min-height: 44px;
  }

  .feedback-note { font-size: 16px; }
}

@media (max-width: 760px) {
  /* A sheet from the bottom: on a phone this is a thumb away from the top bar
   * it was opened from, and the screen being complained about stays visible
   * above it. */
  .feedback-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  /* The label is the first thing to go on a phone top bar, not the button. */
  .feedback-button span { display: none; }
  .feedback-button { min-width: 44px; padding: 9px; justify-content: center; }
  .feedback-tool { flex: 1 1 auto; justify-content: center; }
  /* The × is a target, not just a glyph. */
  .feedback-close { min-width: 44px; }
}

/* --- dashboard.css --- */
/* The Dashboard screen.
 *
 * Its own file rather than a block appended to styles.css, because everything
 * here is scoped to `dash-` and belongs to one screen. Nothing in this file
 * touches a rule another screen uses.
 *
 * Colour comes from the tokens in styles.css (--ink, --muted, --line, --green,
 * --amber, --red) so a scorecard row sitting under a HUD tile reads as the
 * same product. Motion comes from motion.css: this file adds transitions only,
 * never an entrance, because an entrance that does not run is content stranded
 * invisible and every section here carries content.
 */

/* --- The verdict line ---------------------------------------------------- */

.dash-verdict{
  display: grid;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.dash-verdict.is-behind{ border-left-color: var(--red); }
.dash-verdict.is-watch{ border-left-color: var(--amber); }
.dash-verdict.is-clear{ border-left-color: var(--green); }
.dash-verdict strong{ font-size: 17px; letter-spacing: -.01em; }
.dash-verdict p{ margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* --- One measured benchmark ---------------------------------------------- */

.dash-measures{ display: grid; gap: 12px; }

.dash-measure{
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: border-color var(--arc-t-fast, 140ms) var(--arc-ease, ease);
}
.dash-measure:hover{ border-color: #9fb5a7; }

.dash-measure-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.dash-measure-head h3{ margin: 0 0 6px; font-size: 16px; letter-spacing: -.01em; }
.dash-measure-head > div:last-child{ text-align: right; flex: 0 0 auto; }

.dash-value{
  display: block;
  font-size: 28px;
  font-weight: 760;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.dash-basis{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  max-width: 62ch;
}

.dash-status{
  display: inline-block;
  margin-top: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.is-behind .dash-status{ background: #fbe9e6; color: var(--red); }
.is-check_the_data .dash-status{ background: var(--amber-soft); color: var(--amber); }
.is-on_target .dash-status{ background: var(--green-soft); color: var(--green); }
.is-not_measurable .dash-status{ background: #eceeeb; color: var(--muted); }

/* The range, drawn. A published band the practice's own reading sits inside
 * or outside of — the one picture that turns "84.5%" into "below target". */
.dash-range{
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: #edf0ec;
  overflow: visible;
}
.dash-band{
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--green-soft);
  box-shadow: inset 0 0 0 1px #bcdcca;
}
.dash-marker{
  position: absolute;
  top: -4px;
  width: 4px;
  height: 18px;
  margin-left: -2px;
  border-radius: 3px;
  background: var(--ink);
}
.is-behind .dash-marker{ background: var(--red); }
.is-check_the_data .dash-marker{ background: var(--amber); }
.is-on_target .dash-marker{ background: var(--green); }

.dash-scale{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: -6px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.dash-scale b{ color: var(--ink); font-weight: 700; }

.dash-note{
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--line);
  color: #445048;
  font-size: 13px;
  line-height: 1.55;
}

.dash-measure footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.dash-measure footer small{
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.dash-act{
  flex: 0 0 auto;
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--green);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.dash-act:hover{ background: var(--green-soft); border-color: #9fb5a7; }

/* The measures that are fine, folded away. They are still countable and still
 * one click from readable; they are just not what the reader came for. */
.dash-fold{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.dash-fold > summary{
  padding: 15px 20px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.dash-fold > summary::-webkit-details-marker{ display: none; }
.dash-fold > summary::after{ content: " ▾"; }
.dash-fold[open] > summary{ border-bottom: 1px solid var(--line); }
.dash-fold[open] > summary::after{ content: " ▴"; }
.dash-fold .dash-measures{ padding: 12px; }
.dash-fold .dash-measure{ box-shadow: none; }

/* --- The trend ----------------------------------------------------------- */

.dash-trend{
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 26px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.dash-trend-read strong{
  display: block;
  font-size: 30px;
  font-weight: 760;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.dash-trend-read span{
  display: inline-block;
  margin: 8px 0 10px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
}
.dash-trend-read span.is-down{ background: #fbe9e6; color: var(--red); }
.dash-trend-read span.is-up{ background: var(--green-soft); color: var(--green); }
.dash-trend-read span.is-flat{ background: #eceeeb; color: var(--muted); }
.dash-trend-read p{ margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* A definite height on the row, and a flexed track inside each column.
 *
 * The first cut set the bar's height as a percentage inside a grid whose own
 * height was only a min-height, so every percentage resolved against `auto`
 * and all six bars rendered at their 3px floor — a chart that drew a flat line
 * over data that moved by a factor of three. Measured, not assumed: the CDP
 * check reads each bar's box and fails if any is under a pixel. */
.dash-bars{
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: 170px;
}
.dash-bar{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}
.dash-bar-track{
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}
.dash-bar i{
  display: block;
  width: 100%;
  max-width: 46px;
  min-height: 3px;
  border-radius: 6px 6px 3px 3px;
  background: var(--green);
  transition: background var(--arc-t-fast, 140ms) var(--arc-ease, ease);
}
.dash-bar.is-partial i{
  background: repeating-linear-gradient(
    135deg, #9fc7b1, #9fc7b1 5px, #cfe3d8 5px, #cfe3d8 10px);
}
.dash-bar b{ font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-bar em{ font-size: 11px; font-style: normal; }

/* --- Empty states -------------------------------------------------------- */

.dash-empty{
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  background: var(--card);
}

/* --- The drilldown drawer, with something to do in it -------------------- */

.dash-drill-summary{
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.dash-drill-capped{
  margin: 10px 0 18px;
  padding: 11px 13px;
  border: 1px solid #e6d3ae;
  border-radius: 11px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 12px;
  line-height: 1.5;
}
.dash-drill-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.dash-drill-row > div{ min-width: 0; }
.dash-drill-row strong{ display: block; }
.dash-drill-row span{
  display: block;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* --- Narrow ------------------------------------------------------------- */

@media (max-width: 900px){
  .dash-trend{ grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 560px){
  .dash-measure{ padding: 16px; }
  .dash-measure-head{ flex-direction: column; gap: 10px; }
  .dash-measure-head > div:last-child{ text-align: left; }
  .dash-value{ font-size: 25px; }
  .dash-measure footer{ flex-direction: column; align-items: stretch; }
  .dash-act{ width: 100%; }
  .dash-scale{ font-size: 10px; }
  /* Six months of bars at 375px is 46px each including the gap. The labels are
   * three characters and the values are abbreviated, so nothing here needs a
   * scroller — and a dashboard the reader has to swipe sideways is one they
   * stop reading. */
  .dash-bars{ gap: 5px; height: 140px; }
  .dash-bar b{ font-size: 11px; }
  .dash-bar em{ font-size: 10px; }
}

/* Wide tables, kept inside their own card.
 *
 * The supply, expense and provider tables are three and four columns of names
 * and money. At 375px they measured 396px wide inside a 355px card and the
 * rightmost column — the spend figure, the only part anybody reads — was
 * simply cut off, because the shell does not scroll sideways and nothing else
 * did either. Scrolling the table rather than the page is the fix: the whole
 * row stays reachable and the screen behind it never moves.
 */
.dash-scroll{
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
/* No forced minimum: a two-column table that fits should not scroll. Only the
 * ones whose own content will not compress do. */
.dash-scroll > .provider-table{ min-width: 100%; }

/* Your board — the panels this person chose.
   panels.py has held a "what needs me" block for seventeen apps since it was
   written, served at /api/panel/{app}, and nothing ever fetched one. */
.dash-board { margin: 1.5rem 0; }

.dash-panels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.9rem;
}

.dash-panel {
  border: 1px solid var(--line, #d7dee7);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  background: var(--surface, #fff);
}

.dash-panel header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.dash-panel h3 { margin: 0; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #566); }
.dash-panel-headline { margin: 0.4rem 0 0.7rem; font-size: 1rem; line-height: 1.4; }
.dash-panel-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.dash-panel-items li { display: grid; gap: 0.15rem; }
.dash-panel-item { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.dash-panel-items small { color: var(--muted, #566); font-size: 0.82rem; line-height: 1.35; }
.dash-panel-considered,
.dash-panel-boundary {
  display: block;
  margin-top: 0.7rem;
  color: var(--muted, #566);
  font-size: 0.78rem;
}
.dash-panel-boundary { font-style: italic; }
.dash-board-actions { margin-top: 0.9rem; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent, #2f6df6); cursor: pointer; text-decoration: underline; }

/* The board sits at the top, above the fixed scorecard, because it is the part
   this person chose. Its edit control lives in the heading rather than under
   the panels: below a board of six it was off the bottom of a long screen,
   which is the same as not existing. */
.dash-board .section-title { align-items: center; }
.dash-board .section-title .secondary-btn { margin-left: auto; }

/* On a phone that same control was invisible for a different reason: the
   heading wrapped to two lines, and the button sat exactly where the floating
   "Ask about Dashboard" chip is drawn, underneath it. So below the tablet
   breakpoint the heading stacks and the button takes its own full-width row,
   clear of anything docked to the bottom right. */
@media (max-width: 640px) {
  .dash-board .section-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
  }
  .dash-board .section-title h2 { flex: 1 1 auto; white-space: nowrap; }
  .dash-board .section-title .secondary-btn {
    margin-left: 0;
    flex: 1 0 100%;
    width: 100%;
  }
}

/* A count on the board. The same number the fixed row used to show, now shown
   because somebody asked for it rather than because the page insisted. */
/* Every choice in the picker the same height, whatever length its
   description happens to be. They were sized by their text, so "How the
   practice is doing right now" stood a head taller than its neighbours and the
   list read as though some options mattered more. */
.apps-picker .apps-grid { align-items: stretch; }
.apps-picker .app-tile {
  min-height: 5.25rem;
  align-items: flex-start;
}

.dash-panel-count .dash-count-value {
  margin: 0.3rem 0 0;
  font-size: 1.9rem;
  font-weight: 650;
  line-height: 1.1;
}
.dash-panel-count.is-urgent .dash-count-value { color: var(--danger, #a3242b); }
.dash-panel-count.is-warn .dash-count-value { color: var(--warn, #9a6207); }
.dash-board .section-title h2 { margin-right: 0.5rem; }

/* Saying what you want, instead of finding it among thirty-eight things.
   What comes back is ticked, never saved: the person still presses Save. */
.board-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line, #d7dee7);
  border-radius: 12px;
  background: var(--surface-muted, #f4f7f9);
}

.board-ask label {
  display: grid;
  gap: 0.3rem;
  flex: 1 1 260px;
  font-size: 0.85rem;
  color: var(--muted, #566);
}

.board-ask input {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line, #d7dee7);
  border-radius: 8px;
  font: inherit;
  min-width: 0;
}

.board-ask [data-ask-state] { flex: 1 0 100%; }

@media (max-width: 640px) {
  .board-ask .secondary-btn { flex: 1 0 100%; }
}
.dash-board-section{grid-column:1/-1;min-width:0;margin-top:20px;padding-top:12px;border-top:1px solid var(--border,#dce3df)}
.dash-board-section>.section-title{margin-top:12px}
@media(min-width:1100px){.dash-board-section .dash-schedule-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* --- insurance.css --- */
/* Insurance: chasing carriers for money the practice has already earned.
 *
 * Its own file rather than more rules on the end of billing.css. The two
 * screens answer different questions — Billing asks how much is stuck,
 * Insurance asks what to do about it — and the older `.insurance-*` block in
 * billing.css is left exactly where it is so nothing that still uses it moves.
 *
 * Everything here is prefixed `.ins-`. Nothing outside this file is touched.
 *
 * The layout rule that matters: below 760px every table on this screen stops
 * being a table. A five-column row cannot be read at 375px and a horizontal
 * scrollbar inside a card is a thing people miss, so the rows become stacked
 * blocks with their column names carried in data-label. */

.ins-hero-note{ margin:14px 0 0; font-size:13.5px; line-height:1.6; color:var(--muted); max-width:70ch }
.ins-hero-note strong{ color:var(--ink); font-weight:700 }

/* --- the four headline tiles, each of which is also a filter --------------- */
.ins-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 6px }
.ins-tile{
  display:grid; gap:5px; align-content:start; text-align:left;
  padding:16px 17px; border:1px solid var(--line); border-radius:15px;
  background:var(--card); box-shadow:var(--shadow); font:inherit; color:inherit;
  cursor:pointer; min-height:0;
  transition:border-color var(--arc-t-fast,140ms) var(--arc-ease,ease),
             transform var(--arc-t-fast,140ms) var(--arc-ease,ease);
}
.ins-tile:hover:not(:disabled){ border-color:#9fb5a7; transform:translateY(-2px) }
.ins-tile:disabled{ cursor:default; opacity:1 }
.ins-tile.is-on{ border-color:var(--green); box-shadow:0 0 0 2px rgba(27,107,75,.13) }
.ins-tile-label{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.ins-tile-value{ font-size:27px; font-weight:770; letter-spacing:-.035em; font-variant-numeric:tabular-nums }
.ins-tile-basis{ font-size:12.5px; color:var(--muted); line-height:1.45 }
.ins-tile.is-warn .ins-tile-value{ color:var(--amber) }

/* --- the fix that clears the most ---------------------------------------- */
.ins-fix{ border-left:3px solid var(--amber); background:linear-gradient(135deg,#fffaf2,#fff) }
.ins-fix h3{ margin:12px 0 6px; font-size:19px; letter-spacing:-.01em }
.ins-fix p{ margin:0 0 10px; font-size:13.5px; line-height:1.6; color:#445048 }
.ins-fix .ins-remedy{ color:var(--ink); font-weight:600 }

.ins-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }

/* --- tables --------------------------------------------------------------- */
.ins-table{ width:100%; border-collapse:collapse; margin-top:8px }
.ins-table th{
  text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:700; padding:9px 10px; border-bottom:1px solid var(--line);
}
.ins-table td{ padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:top; font-size:13.5px }
.ins-table td.num, .ins-table th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.ins-table tbody tr:last-child td{ border-bottom:0 }
.ins-table .ins-sub{ display:block; margin-top:3px; font-size:12px; color:var(--muted); line-height:1.45; max-width:46ch }
.ins-table tr.is-denied td:first-child{ box-shadow:inset 3px 0 0 var(--amber) }
.ins-table tr.is-due td:first-child{ box-shadow:inset 3px 0 0 var(--green) }
.ins-name{ font-weight:670 }

.ins-flag{
  display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.04em; vertical-align:1px;
}
.ins-flag.denied{ background:var(--amber-soft); color:var(--amber) }
.ins-flag.due{ background:var(--green-soft); color:var(--green) }
.ins-flag.worked{ background:#eef1ee; color:var(--muted) }

/* The action cell is sized so its buttons sit side by side. Left to shrink to
 * fit, the column collapsed to the width of one button, the second wrapped
 * underneath it, and every row in the table became 110px tall — which turned a
 * fifty-row page into sixteen thousand pixels of scrolling. */
.ins-table td.ins-cell-do{ width:1%; white-space:nowrap; text-align:right }
.ins-row-actions{ display:flex; flex-wrap:nowrap; gap:6px; justify-content:flex-end }
.ins-row-actions button{ white-space:nowrap; padding:7px 12px; font-size:12.5px; min-height:34px }

/* --- the toolbar over the worklist ---------------------------------------- */
.ins-toolbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:4px 0 10px }
.ins-chips{ display:flex; flex-wrap:wrap; gap:6px }
.ins-chip{
  border:1px solid var(--line); background:var(--card); color:var(--muted);
  font:inherit; font-size:12.5px; font-weight:650; padding:7px 12px; border-radius:999px;
  cursor:pointer; min-height:34px;
}
.ins-chip:hover{ border-color:#9fb5a7; color:var(--ink) }
.ins-chip.is-on{ background:var(--green-soft); border-color:#a8d0b7; color:var(--green) }
.ins-search{ flex:1 1 190px; min-width:150px; display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:10px; padding:7px 11px; background:#fff }
.ins-search input{ flex:1; min-width:0; border:0; outline:0; font:inherit; font-size:13px; background:none }
.ins-sort{ border:1px solid var(--line); border-radius:10px; padding:8px 10px; font:inherit; font-size:13px; background:#fff; min-height:34px }

.ins-scope{ margin:0 0 8px; font-size:12.5px; color:var(--muted); line-height:1.5 }
.ins-scope strong{ color:var(--ink) }
.ins-clear{ border:0; background:none; color:var(--green); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:0 0 0 4px; text-decoration:underline }

.ins-more{ margin-top:12px; display:flex; justify-content:center }

/* --- empty states --------------------------------------------------------- */
.ins-empty{ padding:26px 4px; color:var(--muted); font-size:13.5px; line-height:1.6; max-width:60ch }
.ins-empty strong{ display:block; color:var(--ink); font-size:15px; margin-bottom:6px }

/* --- the call script drawer ----------------------------------------------- */
.ins-script h2{ margin:0 0 4px }
.ins-script .ins-script-sub{ margin:0 0 18px; color:var(--muted); font-size:13px; line-height:1.5 }
.ins-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 18px }
.ins-facts div{ padding:11px 12px; border:1px solid var(--line); border-radius:11px; background:#fbfcfa }
.ins-facts dt{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.ins-facts dd{ margin:5px 0 0; font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums }
.ins-step{ margin:0 0 16px }
.ins-step h3{ margin:0 0 7px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.ins-say{ margin:0; padding:13px 15px; border-left:3px solid var(--green); border-radius:0 10px 10px 0;
  background:var(--green-soft); font-size:14px; line-height:1.55 }
.ins-list{ margin:0; padding-left:19px; font-size:13.5px; line-height:1.6 }
.ins-list li{ margin-bottom:6px }
.ins-warn{ padding:12px 14px; border:1px solid #e6d3ae; border-radius:11px; background:#fdf8ef;
  font-size:13px; line-height:1.55; color:#6b4c14 }
.ins-warn li{ margin-bottom:5px }

.ins-log{ display:grid; gap:11px; margin-top:6px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fbfcfa }
.ins-log label{ display:grid; gap:6px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.ins-log select, .ins-log input, .ins-log textarea{
  width:100%; min-height:42px; border:1px solid var(--line); border-radius:9px;
  padding:9px 11px; font:inherit; font-size:14px; color:var(--ink); background:#fff;
}
.ins-log textarea{ min-height:70px; resize:vertical; line-height:1.5 }
.ins-log-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.ins-log-note{ margin:0; font-size:12px; color:var(--muted); line-height:1.5 }
.ins-log-said{ margin:0; font-size:12.5px; color:var(--green); font-weight:650 }

.ins-history{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px }
.ins-history li{ padding:11px 13px; border:1px solid var(--line); border-radius:11px; background:#fff; font-size:13px; line-height:1.5 }
.ins-history strong{ display:block; font-size:13.5px }
.ins-history span{ color:var(--muted); font-size:12px }

/* --- the calling agent ---------------------------------------------------- */
.ins-agent p{ margin:0 0 10px; font-size:13.5px; line-height:1.55 }
.ins-blocked{ color:var(--amber); font-size:13px }
.ins-check{ list-style:none; margin:10px 0; padding:0; display:grid; gap:7px }
.ins-check li{ position:relative; padding-left:24px; font-size:13px; line-height:1.45; color:var(--muted) }
.ins-check li::before{ content:"○"; position:absolute; left:4px; color:var(--muted) }
.ins-check li.ok{ color:var(--ink) }
.ins-check li.ok::before{ content:"●"; color:var(--green) }

/* --- narrow --------------------------------------------------------------- */
@media(max-width:1100px){
  .ins-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:760px){
  .ins-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .ins-tile{ padding:13px 14px }
  .ins-tile-value{ font-size:23px }

  /* Tables become stacked blocks. The column heading travels with the cell as
   * data-label, so a row still reads as "Carrier: Sun Life" rather than as a
   * bare value that meant something two screens up. */
  /* display:none rather than the clipped screen-reader trick: the column names
   * are not lost, they travel with each cell in data-label, so a hidden header
   * row would be read out twice. */
  .ins-table thead{ display:none }
  .ins-table td.ins-cell-do{ width:auto; white-space:normal; text-align:left }
  .ins-table, .ins-table tbody, .ins-table tr, .ins-table td{ display:block; width:100% }
  .ins-table tr{ padding:13px 0; border-bottom:1px solid var(--line) }
  .ins-table tr:last-child{ border-bottom:0 }
  .ins-table td{ padding:3px 0; border:0 }
  .ins-table td.num, .ins-table th.num{ text-align:left }
  .ins-table tr.is-denied td:first-child, .ins-table tr.is-due td:first-child{ box-shadow:none }
  .ins-table tr.is-denied{ border-left:3px solid var(--amber); padding-left:11px }
  .ins-table tr.is-due{ border-left:3px solid var(--green); padding-left:11px }
  .ins-table td[data-label]::before{
    content:attr(data-label) " "; font-size:11px; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; color:var(--muted); margin-right:6px;
  }
  /* A stacked row that spends five full lines on one claim is a card, and
   * eight of them is a scroll. The name reads as a name without a "PATIENT"
   * label over it, the three short facts sit on one line together, and the
   * last-call line disappears entirely until there is a call to report. */
  .ins-table td.ins-cell-meta{ display:inline-block; width:auto; margin:2px 16px 2px 0 }
  .ins-table td.ins-cell-last.is-empty{ display:none }
  .ins-table td.ins-cell-do{ padding-top:9px }
  .ins-row-actions{ justify-content:flex-start }
  .ins-row-actions button{ flex:0 0 auto }
  .ins-table .ins-sub{ max-width:none }
  .ins-facts{ grid-template-columns:1fr }
  .ins-log-pair{ grid-template-columns:1fr }
}

@media(prefers-reduced-motion: reduce){
  .ins-tile{ transition:none }
  .ins-tile:hover:not(:disabled){ transform:none }
}

/* ---------------------------------------------------------------------------
 * INSURANCE — GIVING THE PAGE A SPINE
 *
 * 6,389px, of which one <tbody> of 50 rows was 3,399px: 53% of the screen was
 * a single ranked list whose tail nobody works. The list is capped at 12 in
 * insurance.js and "Show 12 more" fetches the rest server-side.
 *
 * The two blocks below it — how each carrier behaves, and why the denials are
 * refused — are background, and background rendered at the same weight as the
 * worklist is what made this one long column. They fold, with their verdict on
 * the outside, in the same shape as the roster cards on Staff.
 * ------------------------------------------------------------------------- */

.ins-fold{
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}
.ins-fold > summary{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}
.ins-fold > summary::-webkit-details-marker{ display: none; }
.ins-fold > summary:hover{ background: #f8faf7; }
.ins-fold-title{ font-size: 15px; font-weight: 650; }
.ins-fold-note{
  grid-column: 1;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.ins-fold-chevron{
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--muted);
  font-size: 15px;
  transition: transform .15s ease;
}
.ins-fold[open] > summary{ border-bottom: 1px solid var(--line); }
.ins-fold[open] > summary .ins-fold-chevron{ transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce){
  .ins-fold-chevron{ transition: none; }
}

/* The cards inside already have their own border and shadow, so the fold gives
 * them none of its own padding-box furniture. */
.ins-fold-body{ padding: 16px; }
.ins-fold-body > .grid{ margin: 0; }

/* --- intake.css --- */
/* Intake — new-patient forms and the review of what came back.
 *
 * Its own file rather than another block in quarterback.css: the screen now
 * has a summary strip, two lists and a comparison view, and the rules for
 * those belong beside the screen that owns them.
 *
 * Everything below is scoped under an .intake- prefix and adds no rule to a
 * shared class. Colour comes from the app's variables with literal fallbacks,
 * because this stylesheet is concatenated into a bundle whose order it does
 * not control.
 */

/* --- the numbers, each with its basis under it ------------------------- */
.intake-tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px; margin:22px 0 18px;
}
.intake-tile{
  display:grid; gap:5px; align-content:start;
  padding:16px 18px; background:#fff; border:1px solid var(--line,#dce3dc);
  border-radius:16px; box-shadow:var(--shadow,0 1px 2px rgba(16,32,24,.05));
}
.intake-tile-label{
  font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted,#64748b);
}
.intake-tile strong{ font-size:30px; font-weight:750; font-variant-numeric:tabular-nums; line-height:1.1 }
.intake-tile-basis{ font-size:12.5px; line-height:1.45; color:var(--muted,#64748b) }
.intake-tile.is-urgent{ border-color:#c9a88a; background:#fffaf4 }
.intake-tile.is-urgent strong{ color:#8a5a1c }
.intake-tile.is-warn strong{ color:#3a463e }

/* --- tabs and filters -------------------------------------------------- */
.intake-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px }
.intake-tab{
  display:inline-flex; align-items:center; gap:8px; min-height:40px;
  padding:8px 15px; border:1px solid var(--line,#dce3dc); border-radius:999px;
  background:#fff; color:var(--ink,#17231e); font:inherit; font-size:13.5px; font-weight:650;
  cursor:pointer;
}
.intake-tab span{
  font-size:12px; font-weight:750; font-variant-numeric:tabular-nums;
  color:var(--muted,#64748b);
}
.intake-tab.is-active{
  background:var(--green,#1b6b4b); border-color:var(--green,#1b6b4b); color:#fff;
}
.intake-tab.is-active span{ color:#d8ece1 }

.intake-filters{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 4px }
.intake-filter{
  min-height:36px; padding:6px 13px; border:1px solid var(--line,#dce3dc);
  border-radius:999px; background:#fff; color:var(--muted,#64748b);
  font:inherit; font-size:12.5px; font-weight:650; cursor:pointer;
}
.intake-filter.is-active{ color:var(--ink,#17231e); border-color:#9fc4b1; background:var(--green-soft,#e5f1e9) }

/* --- one form on the pile ---------------------------------------------- */
.intake-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px }
.intake-card{
  display:flex; flex-direction:column; padding:19px;
  border:1px solid var(--line,#dce3dc); border-radius:16px; background:#fff;
  box-shadow:var(--shadow,0 1px 2px rgba(16,32,24,.05));
}
.intake-card header{ display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.intake-card.has-flags{ border-color:#e4c9a8 }
.intake-card.is-soon{ border-color:#9fc4b1; box-shadow:0 0 0 3px rgba(27,107,75,.07) }
.intake-when{
  font-size:12px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink,#17231e);
}
.intake-when.is-soon{ color:var(--green,#1b6b4b) }
.intake-when.is-none{ color:var(--muted,#64748b); font-weight:700; text-transform:none; letter-spacing:0 }
.intake-arrived{ font-size:11.5px; color:var(--muted,#64748b) }
.intake-card h3{ margin:14px 0 6px; font-size:18px }
.intake-card .detail{ margin:0 0 10px; font-size:12.5px; color:var(--muted,#64748b) }
.intake-reason.is-quiet{ font-style:normal; color:var(--muted,#64748b) }
.intake-changes{
  margin:0 0 14px; padding:11px 13px; border-radius:11px;
  background:var(--paper,#f6f8f5); font-size:12.5px; line-height:1.5; color:#3a463e;
}
.intake-changes strong{ color:var(--ink,#17231e) }
.intake-card-actions{ display:flex; gap:8px; margin-top:auto; flex-wrap:wrap }
.intake-card-actions button{ flex:1 1 140px; min-height:42px }

.intake-more{ width:100%; min-height:46px; margin-top:14px }

/* --- active invitations and their distinct message states -------------- */
.intake-waiting-list{ list-style:none; margin:0 0 8px; padding:0; display:grid; gap:9px }
.intake-waiting-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 16px; border:1px solid var(--line,#dce3dc); border-radius:13px; background:#fff;
}
.intake-waiting-row strong{ display:block; font-size:14.5px }
.intake-waiting-row span{ font-size:12.5px; color:var(--muted,#64748b) }
.intake-waiting-row div > span{ display:block; line-height:1.55 }
.intake-waiting-row button{ min-height:40px }
.intake-waiting-empty{
  padding:16px 18px; border:1px dashed var(--line,#dce3dc); border-radius:13px;
  background:var(--paper,#f6f8f5); font-size:13px; line-height:1.55; color:var(--muted,#64748b);
}

/* --- the comparison, which is the reason to open a form at all ---------- */
.intake-diffs{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:10px }
.intake-diff{
  padding:14px 15px; border:1px solid var(--line,#dce3dc); border-radius:13px; background:#fff;
}
.intake-diff.is-urgent{ border-color:#dba98a; background:#fffaf5 }
.intake-diff.is-done{ border-color:#a8d0b7; background:#f4fbf7 }
.intake-diff.is-skipped{ opacity:.72 }
.intake-diff-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.intake-diff-head strong{ font-size:14.5px }
.intake-diff-state{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#8a5a1c;
}
.intake-diff.is-done .intake-diff-state{ color:var(--green,#1b6b4b) }
.intake-diff-values{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:10px 0 0 }
.intake-diff-values span{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted,#64748b);
}
.intake-diff-values p{ margin:3px 0 0; font-size:14px; line-height:1.45; word-break:break-word }
.intake-diff-actions{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px }
.intake-diff-actions button{ min-height:38px; font-size:12.5px }
.intake-diff-actions input{
  flex:1 1 100%; min-height:38px; margin-top:6px; padding:8px 10px;
  border:1px solid var(--line,#dce3dc); border-radius:9px; font:inherit;
}
.intake-unmentioned{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:7px }
.intake-unmentioned li{
  padding:11px 13px; border:1px solid var(--line,#dce3dc); border-radius:11px; background:#fff;
}
.intake-unmentioned strong{ display:block; font-size:14px }
.intake-unmentioned span{ font-size:12.5px; color:var(--muted,#64748b) }
.intake-drawer-actions{ margin-top:20px }
.intake-drawer-actions button{ width:100%; min-height:46px }

/* --- 375px, which is where a front desk reads this on a phone ----------- */
@media(max-width:560px){
  .intake-tiles{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; margin:16px 0 14px }
  .intake-tile{ padding:13px 14px }
  .intake-tile strong{ font-size:25px }
  .intake-grid{ grid-template-columns:1fr }
  .intake-card{ padding:16px }
  .intake-card-actions button{ flex:1 1 100% }
  .intake-waiting-row{ align-items:flex-start; flex-direction:column; gap:10px }
  .intake-waiting-row button{ width:100% }
  .intake-diff-values{ grid-template-columns:1fr }
  .intake-diff-actions button{ flex:1 1 100% }
}

/* --- payroll.css --- */
/* Payroll.
 *
 * Its own file rather than another block on the end of styles.css, because
 * every rule here is prefixed `pr-` and belongs to one screen. The two shared
 * classes it leans on — .payroll-summary and .payroll-table-card — keep their
 * definitions in styles.css; the only thing overridden below is the footer
 * span, which styles.css sizes at 24px for a money figure and this screen uses
 * for a sentence.
 *
 * Nothing here fades anything in. Entrances belong to motion.css, which
 * animates on movement and switches itself off for prefers-reduced-motion.
 */

/* Four cards, so three columns of four is one card stranded on its own row.
 * Scoped to the screen's own summary and not to .payroll-summary generally:
 * the timecard drawer reuses that class for three cards inside a 500px panel,
 * where a viewport-width media query cannot help it. */
.payroll-summary.pr-summary .card{grid-column:span 3}
@media(max-width:1180px){.payroll-summary.pr-summary .card{grid-column:span 6}}
@media(max-width:760px){.payroll-summary.pr-summary .card{grid-column:1/-1}}

/* --- Period ------------------------------------------------------------- */

/* min-width:0 on every one of these is load-bearing, not tidiness. A grid or
 * flex item's default minimum is its content, and an <input type="date"> has
 * an intrinsic width of about 170px in Chrome. Two of them side by side on a
 * 375px screen therefore refused to shrink, pushed their row to 361px inside a
 * 339px content box, and gave the whole document four pixels of sideways
 * scroll. Measured at exactly that: clientWidth 375, scrollWidth 379. */
.pr-period{display:grid;gap:12px;margin-bottom:20px;min-width:0}
.pr-period>*{min-width:0}
.pr-presets{display:flex;flex-wrap:wrap;gap:8px}
.pr-preset{min-height:36px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);font:inherit;font-size:13px;font-weight:650;cursor:pointer;transition:border-color var(--arc-t-fast,140ms),color var(--arc-t-fast,140ms),background var(--arc-t-fast,140ms)}
.pr-preset:hover{border-color:#9fb5a7;color:var(--ink)}
.pr-preset.is-on{border-color:#a8d0b7;background:var(--green-soft);color:var(--green)}
.pr-period-fields{display:flex;flex-wrap:wrap;align-items:end;gap:10px}
.pr-period-fields label{display:grid;gap:6px;min-width:0;color:var(--muted);font-size:12px;font-weight:700}
.pr-period-fields input{min-height:43px;width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;padding:10px 11px;color:var(--ink);background:#fff;font:inherit}
.pr-coverage{margin:0 0 20px;padding:13px 16px;border:1px solid #e6d3ac;border-radius:12px;background:var(--amber-soft);color:#6d4409;font-size:13px;line-height:1.5}

/* --- Before you export -------------------------------------------------- */

.pr-blockers{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.pr-blocker{display:grid;align-content:start;gap:12px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow)}
.pr-blocker.is-blocking{border-color:#e2b9b3}
.pr-blocker header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pr-blocker.is-blocking header .badge{background:#f8e7e4;color:var(--red)}
.pr-blocker ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.pr-blocker li{display:grid;gap:5px;font-size:13px;line-height:1.5;color:#445048}
.pr-blocker li em{display:block;color:var(--muted);font-size:12px;font-style:normal}
.pr-blocker footer{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.pr-clear{text-align:left;padding:24px}
.pr-clear p{margin:8px 0 0;line-height:1.6}

.pr-tag{display:inline-block;justify-self:start;padding:3px 8px;border-radius:999px;background:#eef1ee;color:var(--muted);font-size:11px;font-weight:700}
.pr-tag.pr-blocking{background:#f8e7e4;color:var(--red)}
.pr-tag.pr-check{background:var(--amber-soft);color:var(--amber)}
.pr-tag.pr-ok{background:var(--green-soft);color:var(--green)}
.pr-ot{color:var(--amber)}
.pr-moved{color:var(--amber)}

/* --- Hours by day ------------------------------------------------------- */

.pr-strip{margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}
.pr-strip header{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px;margin-bottom:14px}
.pr-strip header div{display:grid;gap:3px}
.pr-daybars{display:flex;align-items:flex-end;gap:6px;margin:0;padding:0;list-style:none;overflow-x:auto}
.pr-daybars li{display:grid;flex:1 0 26px;gap:5px;justify-items:center}
.pr-daybar{display:flex;align-items:flex-end;justify-content:center;width:100%;height:78px;border-radius:6px;background:#eef1ee}
.pr-daybar>span{display:block;width:100%;border-radius:6px;background:linear-gradient(180deg,#4d9a76,#1b6b4b)}
.pr-daybar.is-empty>span{background:#d7ded7}
.pr-dayvalue{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.pr-daylabel{color:var(--muted);font-size:10px;text-align:center;line-height:1.3}
.pr-daylabel em{display:block;font-style:normal;font-weight:700;color:#445048}

/* --- The roster table --------------------------------------------------- */

.pr-table tr.pr-row-blocking td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.pr-table td.pr-actions{text-align:right;white-space:nowrap}
.payroll-table-card footer .pr-foot-note,
.payroll-table-card footer>div>span{font-size:13px;font-weight:400;color:var(--muted);line-height:1.5;max-width:760px}
.payroll-table-card footer>div>strong{font-size:17px}

.pr-idle{margin-top:12px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.pr-idle summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--muted)}
.pr-idle ul{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.pr-idle li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fbfcfa}
.pr-idle li>div{display:grid;gap:3px;min-width:0}
.pr-idle li span{color:var(--muted);font-size:12px}
.pr-idle>.detail{margin:12px 0 0}

/* --- Settings and the file ---------------------------------------------- */

.pr-settings{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:24px 0 16px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow)}
.pr-settings label{display:grid;gap:6px;min-width:0;color:var(--muted);font-size:12px;font-weight:700}
.pr-settings input,.pr-settings select{min-height:43px;max-width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;padding:10px 11px;color:var(--ink);background:#fff;font:inherit}
.pr-settings .detail{flex:1 1 260px;min-width:0}

.pr-export{margin-top:8px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.pr-export>header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:start;gap:24px;padding:24px}
.pr-export h2{margin:0 0 8px;font-family:Georgia,serif;font-size:26px;font-weight:500}
.pr-export header .detail{margin:0;max-width:560px}
.pr-reconcile{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.pr-reconcile div{min-width:120px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fbfcfa}
.pr-reconcile dt{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pr-reconcile dd{display:grid;gap:2px;margin:6px 0 0;font-size:20px;font-weight:760;font-variant-numeric:tabular-nums}
.pr-reconcile dd span{color:var(--muted);font-size:12px;font-weight:400}
.pr-excluded{display:grid;gap:8px;margin:0;padding:0 24px 20px;list-style:none}
.pr-excluded li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:11px;background:#fbfcfa;color:#445048;font-size:13px;line-height:1.5}
.pr-export>footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:18px 24px;border-top:1px solid var(--line);background:#fbfcfa}
.pr-export>footer>div{display:grid;gap:4px;max-width:720px}
.pr-export>footer span{color:var(--muted);font-size:12px;line-height:1.5}
.pr-blocked{margin:0;padding:0 24px 18px;color:var(--amber);font-size:13px}
.pr-export>p{margin:0;padding:0 24px 18px}
.pr-preview{padding:0 24px 22px}
.pr-preview-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px 0}
.pr-preview-head div{display:grid;gap:4px}
.pr-preview-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;padding:4px 14px 10px}
.pr-preview-scroll table{min-width:520px}
.pr-preview .pr-excluded{padding:14px 0 0}

/* --- Changes to the clock ----------------------------------------------- */

.pr-corrections{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:none}
.pr-corrections li{display:grid;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:var(--card)}
.pr-corrections li>div{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.pr-corrections p{margin:0;font-size:13px;line-height:1.5}
.pr-corrections small{color:var(--muted);font-size:12px;line-height:1.5;word-break:break-word}
.pr-hours-change{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}

/* --- The timecard drawer ------------------------------------------------ */

.drawer .pr-weeks small{display:block;color:var(--muted)}
.pr-shifts{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pr-shift{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.pr-shift.is-flagged{border-color:#e6d3ac;background:#fffdf7}
.pr-shift-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pr-shift-date{flex:1 1 120px;font-weight:650;font-size:13px}
.pr-shift-times{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.pr-shift-hours{font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.pr-shift-actions{display:flex;gap:6px;margin-left:auto}
.pr-shift-flags{display:flex;flex-wrap:wrap;gap:6px}
.pr-shift-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:10px;border-top:1px solid var(--line)}
/* A class selector beats the user-agent [hidden] rule, so every correction
 * form on the timecard was open from the moment the drawer rendered. */
.pr-shift-form[hidden],.pr-preview[hidden]{display:none}
.pr-shift-form label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:700}
.pr-shift-form input{min-height:41px;width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--ink);background:#fff;font:inherit}
.pr-shift-form .pr-wide,.pr-shift-form .form-error{grid-column:1/-1}
.pr-shift-form.is-add{border-top:0;padding-top:0}
.pr-shift-form .detail{margin:0}
.pr-danger{background:var(--red);border-color:var(--red)}
.pr-danger:hover{background:#84352d}
.pr-add{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:#fbfcfa}
.pr-add summary{cursor:pointer;font-weight:650;font-size:14px}
.pr-add>form{margin-top:12px}
.pr-add>.detail{margin:10px 0 0}
.pr-empty-shifts{padding:18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}
.pr-empty-shifts p{margin:6px 0 0;font-size:13px;line-height:1.5}

/* --- Narrow ------------------------------------------------------------- */

@media(max-width:900px){
  .pr-export>header{grid-template-columns:1fr}
}

@media(max-width:760px){
  /* The roster stops being a table and becomes one block per person, so a
   * phone never has to scroll a ten-column grid sideways to read a name. The
   * header cells are hidden and each cell carries its own label. */
  .payroll-table-card .pr-table,
  .payroll-table-card .pr-table tbody,
  .payroll-table-card .pr-table tr,
  .payroll-table-card .pr-table td{display:block;width:auto;min-width:0}
  .payroll-table-card .pr-table thead{display:none}
  .payroll-table-card table{min-width:0}
  .payroll-table-scroll{padding:8px 14px}
  .payroll-table-card .pr-table tr{margin:10px 0;padding:12px 14px;border:1px solid var(--line);border-radius:13px}
  .payroll-table-card .pr-table tr.pr-row-blocking{border-color:#e2b9b3}
  .payroll-table-card .pr-table tr.pr-row-blocking td:first-child{box-shadow:none}
  /* Label hard left, then the value and its basis together on the right, so
   * "85" and "2 more than last period" read as one answer rather than as two
   * columns with a gap between them. */
  .payroll-table-card .pr-table td{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;padding:6px 0;border-top:0;text-align:right}
  .payroll-table-card .pr-table td+td{border-top:1px solid #eef1ee}
  .payroll-table-card .pr-table td:before{content:attr(data-label);margin-right:auto;color:var(--muted);font-size:12px;font-weight:650;text-align:left}
  .payroll-table-card .pr-table td:first-child{display:block;text-align:left;font-size:15px}
  .payroll-table-card .pr-table td:first-child:before{content:none}
  .payroll-table-card .pr-table td small{display:block;text-align:right}
  .payroll-table-card .pr-table td:first-child small{text-align:left}
  .payroll-table-card .pr-table td.pr-actions{display:block;text-align:left;padding-top:10px}
  .payroll-table-card .pr-table td.pr-actions:before{content:none}
  .payroll-table-card .pr-table td.pr-actions button{width:100%}
  .pr-shift-form{grid-template-columns:1fr}
  .pr-shift-actions{margin-left:0;width:100%}
  .pr-shift-actions button{flex:1}
  .pr-export>footer button{width:100%}
  /* Two dates, then the two steps beside each other, then Update across the
   * bottom. `order` drives grid auto-placement, so the DOM keeps the reading
   * order a screen reader wants and only the layout is rearranged. */
  .pr-period-fields{display:grid;grid-template-columns:1fr 1fr}
  .pr-period-fields label{order:1}
  .pr-period-fields .pr-step{order:2}
  .pr-period-fields button:not(.pr-step){order:3;grid-column:1/-1}
}

/* --- staff.css --- */
/* Staff — access review.
 *
 * Scoped to .staff-* classes this screen owns. The roster card, the add form
 * and the two-column layout still come from styles.css; everything here is the
 * access half that did not exist before.
 */

/* A grid item's min-width is auto, which means "as wide as my widest child
 * insists on being" — so the filter strip below, which is deliberately one
 * unwrapped row that scrolls, pushed the whole two-column layout to 486px
 * inside a 375px phone and took the hero and the add form out with it.
 * Measured before and after. Nothing here may be sized by its contents. */
.staff-layout > *,
.staff-roster,
.staff-card,
.staff-card summary,
.staff-panel,
.staff-block,
.staff-who,
.staff-filters{ min-width: 0; }

.staff-who span{ overflow-wrap: anywhere; }

.staff-who small{
  display: block;
  max-width: 46ch;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.staff-status{
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 4px 10px;
  text-align: right;
}

.staff-status small{ grid-column: 1 / -1; }

.staff-chips{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  grid-column: 1 / -1;
  margin-top: 2px;
}

.staff-chip{
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fbfcfa;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Colour carries meaning here, so it is never the only carrier: every chip
 * spells out its own state in words and the full sentence is on the title. */
.staff-chip.is-stale,
.staff-chip.is-unused{ border-color: #e2bdb6; color: var(--red, #9c4037); background: #fdf3f1; }
.staff-chip.is-dormant,
.staff-chip.is-keys{ border-color: #e6d3ac; color: var(--amber, #a35f10); background: #fdf8ee; }
.staff-chip.is-owner{ border-color: #b9ddd0; color: var(--green, #1b6b4b); background: var(--green-soft, #eef8f3); }

.staff-panel{
  display: grid;
  gap: 2px;
}

.staff-block{
  padding: 18px 17px;
  border-top: 1px solid var(--line);
}

.staff-block:first-child{ border-top: 0; }

.staff-block h3{
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}

.staff-block-danger{ background: #fbfcfa; }

.staff-note{
  margin: 10px 0 0;
  max-width: 74ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.staff-note.is-blocked{ color: var(--amber, #a35f10); }

.staff-reach{
  display: grid;
  gap: 8px;
  margin: 0;
}

.staff-reach-block{
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 4px 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.staff-reach-block dt{
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.staff-reach-block dd{
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.staff-reach-block[data-tag="pay"],
.staff-reach-block[data-tag="money"]{ border-color: #e6d3ac; background: #fdfaf3; }
.staff-reach-block[data-tag="pay"] dt,
.staff-reach-block[data-tag="money"] dt{ color: var(--amber, #a35f10); }

.staff-figures{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.staff-figures div{
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.staff-figures dt{ color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.staff-figures dd{ margin: 5px 0 0; font-size: 16px; font-variant-numeric: tabular-nums; }

.staff-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.staff-actions .secondary-btn,
.staff-actions .primary-btn{ flex: 0 1 auto; }

.secondary-btn.is-destructive{ border-color: #e2bdb6; color: var(--red, #9c4037); }
.secondary-btn.is-destructive:hover:not(:disabled){ background: #fdf3f1; }

.staff-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.staff-filter{
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.staff-filter span{ opacity: .7; font-variant-numeric: tabular-nums; }
.staff-filter.is-on{ border-color: #b9ddd0; color: var(--green, #1b6b4b); background: var(--green-soft, #eef8f3); }

/* The confirmation. Deliberately heavier than the button that opened it: this
 * is the last thing read before somebody's access changes. */
.staff-confirm-inner{
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #e6d3ac;
  border-radius: 13px;
  background: #fffdf7;
}

.staff-confirm-inner h4{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
}

.staff-confirm-inner label{
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.staff-confirm-inner input,
.staff-confirm-inner select{
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 11px;
  color: var(--ink);
  background: #fff;
  font: inherit;
}

.staff-consequence{
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.staff-consequence li{
  padding-left: 16px;
  position: relative;
  font-size: 13px;
  line-height: 1.5;
}

.staff-consequence li::before{
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

.staff-consequence li.is-gain::before{ background: var(--green, #1b6b4b); }
.staff-consequence li.is-loss::before{ background: var(--red, #9c4037); }
.staff-consequence li.is-loss{ color: var(--red, #9c4037); }

@media (max-width: 760px){
  .staff-status{ grid-template-columns: 1fr; text-align: left; }
  .staff-chips{ justify-content: flex-start; }
  .staff-who small{ max-width: none; }
  .staff-reach-block{ grid-template-columns: 1fr; }
  .staff-figures{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-actions{ flex-direction: column; align-items: stretch; }
  .staff-actions .secondary-btn,
  .staff-actions .primary-btn{ width: 100%; }
  .staff-filters{ overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .staff-filter{ white-space: nowrap; }
}

/* --- staff-workflow.css --- */
/* Editorial hierarchy for a private account conversation, with deliberate action stages. */
.chat-message:has(.staffwork){width:100%;max-width:100%;min-width:0}.chat-message:has(.staffwork)>.brand-mark{display:none}.chat-message:has(.staffwork) .message-bubble{width:100%;max-width:100%;padding:0;background:transparent;border:0;box-shadow:none}
.staffwork{color:#253a30;border-top:2px solid #305c49;padding:24px 0;line-height:1.5;min-width:0;max-width:760px}.staffwork *{box-sizing:border-box}.staffwork header{display:flex;align-items:center;justify-content:space-between;gap:16px}.staffwork header span,.staffwork-eyebrow{font-size:10px;letter-spacing:.08em;color:#68786e}.staffwork h3{font-size:21px;letter-spacing:-.025em;margin:5px 0}.staffwork h4{font-size:24px;letter-spacing:-.035em;margin:8px 0}.staffwork h5{font-size:14px;margin:22px 0 8px}.staffwork p,.staffwork li{font-size:14px;overflow-wrap:anywhere}.staffwork p{color:#64736b;margin:10px 0 18px}.staffwork p.staffwork-intro{font-size:22px;letter-spacing:-.025em;color:#253a30;margin:24px 0 4px}.staffwork button{min-height:44px;border:1px solid #d7dfd9;border-radius:6px;background:#fff;color:#305c49;font:inherit;font-size:13px;padding:10px 14px;cursor:pointer;box-shadow:none}.staffwork button:hover{background:#f2f6f1}.staffwork button:disabled{opacity:.45;cursor:default}.staffwork button.staffwork-primary{background:#305c49;color:#fff;border-color:#305c49}.staffwork button.staffwork-primary:hover{background:#244a39}.staffwork header button{border:0}.staffwork :focus-visible{outline:2px solid #305c49;outline-offset:3px}.staffwork h3:focus{outline:none}.staffwork label{display:grid;gap:6px;font-size:12px;color:#435d4f}.staffwork input:not([type=checkbox]),.staffwork select{display:block;width:100%;min-width:0;min-height:44px;font:inherit;font-size:16px;border:1px solid #cbd6ce;border-radius:5px;padding:9px;background:white;color:#253a30;box-shadow:none}.staffwork small{display:block;color:#6b786f;font-size:12px;line-height:1.5}.staffwork-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}.staffwork-search{display:flex;gap:10px;align-items:end;margin:24px 0 14px}.staffwork-search label{flex:1}.staffwork-filter{max-width:260px}.staffwork .staffwork-meta{font-size:12px;color:#738077}.staffwork-roster,.staffwork-activity-list{padding:0;list-style:none;margin:18px 0}.staffwork-roster li,.staffwork-activity-list li{border-top:1px solid #dbe2dc}.staffwork-roster li:last-child,.staffwork-activity-list li:last-child{border-bottom:1px solid #dbe2dc}.staffwork-roster button{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;width:100%;gap:20px;text-align:left;border:0;border-radius:0;padding:18px 0;align-items:center}.staffwork-roster strong{display:block;font-weight:600}.staffwork-roster button>span:nth-child(2){text-align:right}.staffwork nav,.staffwork footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:24px 0 12px}.staffwork footer{border-top:1px solid #dbe2dc;padding-top:20px}.staffwork details{border-top:1px solid #dbe2dc;margin-top:22px;padding-top:8px}.staffwork summary{min-height:44px;padding:10px 0;font-size:13px;color:#4b6155;cursor:pointer}.staffwork-receipts,.staffwork-access-actions{display:flex;gap:10px;flex-wrap:wrap;padding:12px 0}.staffwork-person{margin-top:20px}.staffwork-pairs{margin:24px 0}.staffwork-pairs>div,.staffwork-changes>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;border-top:1px solid #dbe2dc;padding:12px 0;font-size:14px}.staffwork dt{color:#6b786f}.staffwork dd{margin:0;overflow-wrap:anywhere}.staffwork-changes dd{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.staffwork-changes dd>span:first-child{color:#6b786f}.staffwork-changes strong{font-weight:600}.staffwork-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}.staffwork-secret{max-width:400px;margin:22px 0}.staffwork-effects{border-left:2px solid #9b8354;padding:1px 0 1px 16px;margin:24px 0}.staffwork-effects h5{margin-top:10px}.staffwork-effects ul{padding-left:18px}.staffwork-effects li{margin:8px 0}.staffwork label.staffwork-confirm{display:flex;align-items:flex-start;gap:12px;font-size:14px;margin:24px 0}.staffwork input[type=checkbox]{appearance:auto;accent-color:#305c49;flex:0 0 18px;width:18px;height:18px;min-width:18px;min-height:18px;margin:3px 0;padding:0;box-shadow:none}.staffwork [role=alert]{border-left:2px solid #a48047;background:#faf8f3;padding:12px;color:#714f27}.staffwork-recovery{border:1px solid #d9c49f;border-radius:6px;padding:18px;margin:18px 0}.staffwork-recovery h4{font-size:18px}.staffwork-period{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:12px;margin:24px 0}.staffwork-activity-list>li{padding:14px 0}.staffwork-activity-list button{display:grid;gap:6px;border:0;border-radius:0;width:100%;text-align:left;padding:8px 0}.staffwork-activity-list p{margin-bottom:0}.staffwork-boundary p{font-size:12px}
@media(max-width:560px){.staffwork{padding:20px 0}.staffwork h3{font-size:18px}.staffwork h4{font-size:22px}.staffwork-roster button{grid-template-columns:minmax(0,1fr) 16px;gap:6px}.staffwork-roster button>span:nth-child(2){grid-row:2;text-align:left;font-size:12px}.staffwork-roster button>span:last-child{grid-column:2;grid-row:1/3}.staffwork-form{grid-template-columns:1fr;gap:16px}.staffwork-pairs>div,.staffwork-changes>div{grid-template-columns:1fr;gap:4px}.staffwork-period{grid-template-columns:1fr 1fr}.staffwork-period>button{grid-column:1/-1}.staffwork footer{align-items:stretch;flex-direction:column}.staffwork header{gap:8px}.staffwork-secret{max-width:100%}}
@media(prefers-reduced-motion:no-preference){.staffwork-person,.staffwork-effects,.staffwork-changes{animation:staffwork-enter .16s ease-out}@keyframes staffwork-enter{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:none}}}

/* --- payroll-workflow.css --- */
.chat-message:has(.paywork){width:100%;max-width:100%;min-width:0}.chat-message:has(.paywork)>.brand-mark{display:none}.chat-message:has(.paywork) .message-bubble{width:100%;max-width:100%;padding:0;background:transparent;border:0;box-shadow:none}
.paywork{padding:28px 0;color:#283b31;border-top:2px solid #486650;max-width:100%;min-width:0;line-height:1.6;font-size:14px}.paywork *{box-sizing:border-box}
.paywork>header{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:30px}
.paywork>header span,.paywork-eyebrow{font-size:10px;letter-spacing:.12em;font-weight:600;color:#708075}
.paywork h3{font-size:17px;letter-spacing:-.025em;margin:4px 0;font-weight:600}.paywork h4{font-size:28px;line-height:1.2;letter-spacing:-.035em;font-weight:500;margin:22px 0 14px}.paywork h5{font-size:14px;margin:16px 0 6px}.paywork p{margin:12px 0}.paywork small,.paywork-meta{display:block;font-size:12px;color:#6c7b70;line-height:1.6}
.paywork button{font:inherit;font-size:12px;font-weight:550;border:1px solid #d7dfd8;background:transparent;color:#355542;border-radius:5px;min-height:42px;padding:9px 13px;cursor:pointer;box-shadow:none}.paywork button:hover{background:#edf2ed}.paywork button:disabled{opacity:.45;cursor:default}.paywork button.paywork-primary{background:#305b44;border-color:#305b44;color:#fff}.paywork button.paywork-primary:hover{background:#234631}.paywork>header button{border:0;padding-right:0}.paywork :focus-visible{outline:2px solid #3c684b;outline-offset:3px}.paywork h3:focus{outline:none}
.paywork label{display:grid;gap:7px;font-size:12px;color:#536659}.paywork input:not([type=checkbox]),.paywork select,.paywork textarea{font:inherit;font-size:16px;color:#283b31;width:100%;max-width:100%;min-width:0;min-height:44px;border:1px solid #cfd9d0;border-radius:5px;background:#fff;padding:9px 10px;box-shadow:none}.paywork textarea{resize:vertical;line-height:1.6}
.paywork-period{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:end;gap:10px;margin:22px 0 10px}.paywork-period>span{align-self:end;padding-bottom:12px;color:#93a096}.paywork-lead{display:flex;align-items:center;gap:32px;border-block:1px solid #d9e0da;padding:24px 0;margin:24px 0 12px}.paywork-lead>strong{font-size:42px;line-height:1.15;letter-spacing:-.05em;font-weight:450;font-variant-numeric:tabular-nums}.paywork-lead small{letter-spacing:0;margin-top:9px}.paywork-lead>p{border-left:1px solid #d9e0da;padding-left:28px;color:#4e6957}.paywork-lead>p>span,.paywork-warning{color:#80643b}
.paywork-toolbar,.paywork footer,.paywork nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:22px 0}.paywork nav{font-size:12px;justify-content:flex-end}.paywork nav>span{margin-right:auto;color:#6c7b70}.paywork footer{border-top:1px solid #d9e0da;padding-top:20px}.paywork-search{max-width:320px;margin-top:28px}
.paywork ul,.paywork ol{padding:0;list-style:none}.paywork-people>li,.paywork-attention li{border-bottom:1px solid #e0e6e0}.paywork-people button,.paywork-attention li button{display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;width:100%;border:0;border-radius:0;padding:17px 0}.paywork-people button>span:first-child,.paywork-attention button>span:first-child{min-width:0;flex:1}.paywork-people button>span:nth-child(2){text-align:right;font-variant-numeric:tabular-nums}.paywork-people strong,.paywork-attention strong{font-size:14px;font-weight:550}.paywork-people small{font-size:11px;margin-top:4px}.paywork details{border-top:1px solid #d9e0da;margin-top:24px}.paywork summary{font-size:13px;min-height:44px;padding:13px 0;cursor:pointer;color:#49634f}.paywork-attention ul{margin:0}.paywork-attention li button{padding:12px 0}.paywork-about p{font-size:12px}
.paywork-pairs>div{display:grid;grid-template-columns:1fr 1.3fr;gap:20px;border-bottom:1px solid #e0e6e0;padding:10px 0}.paywork dt{color:#6c7b70;font-size:12px}.paywork dd{margin:0;overflow-wrap:anywhere}.paywork-shifts{margin-top:26px;counter-reset:shift}.paywork-shifts>li{position:relative;border-top:1px solid #d9e0da;padding:22px 0 8px 32px;counter-increment:shift}.paywork-shifts>li:before{content:counter(shift,decimal-leading-zero);position:absolute;left:0;top:23px;font-size:10px;color:#8a998e}.paywork-shifts>li>div:first-child{display:flex;justify-content:space-between;gap:10px}.paywork-shifts strong{font-weight:550}.paywork-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}.paywork-change{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-block:1px solid #d9e0da;padding:20px 0;margin:20px 0}.paywork-change p{font-size:13px;overflow-wrap:anywhere}.paywork-change>div:last-child{border-left:2px solid #53755d;padding-left:20px}.paywork-effects{margin:24px 0;border-left:2px solid #b5bd9d;padding-left:18px}.paywork-effects ul{list-style:disc;padding-left:17px}.paywork-effects li{margin:9px 0;font-size:12px}
.paywork label.paywork-confirm{display:flex;align-items:flex-start;gap:12px;margin:24px 0;font-size:14px}.paywork input[type=checkbox]{appearance:auto;accent-color:#305b44;width:18px;height:18px;min-height:18px;min-width:18px;flex:0 0 18px;padding:0;margin:3px 0;box-shadow:none}.paywork [role=alert],.paywork-recovery{padding:14px 16px;border-left:2px solid #b49360;background:#faf7f0;color:#755633}.paywork-recovery h4{font-size:20px}.paywork [role=status]{font-size:12px;color:#536c59}
.paywork-table{overflow:auto;max-width:100%;margin-top:24px;border-block:1px solid #d9e0da}.paywork-table table{border-collapse:collapse;font-size:12px;white-space:nowrap;width:100%;margin:0}.paywork-table caption{text-align:left;white-space:normal;color:#6c7b70;font-size:11px;padding:12px 0}.paywork-table th,.paywork-table td{padding:10px 12px;border-bottom:1px solid #e3e8e3;text-align:left;font-variant-numeric:tabular-nums}.paywork-table th{font-weight:550}.paywork-table thead th{background:#f3f5f1;font-size:10px;letter-spacing:.03em}.paywork-table tbody th{max-width:180px;white-space:normal}.paywork article{padding:8px 0 18px;border-bottom:1px solid #e0e6e0;overflow-wrap:anywhere}
@media(max-width:560px){.paywork{padding:20px 0}.paywork h4{font-size:25px}.paywork-period{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.paywork-period>button{grid-column:1/-1}.paywork-lead{gap:18px}.paywork-lead>strong{font-size:34px}.paywork-lead>p{padding-left:18px;font-size:12px}.paywork-fields,.paywork-change{grid-template-columns:1fr}.paywork-change{gap:14px}.paywork-change>div:last-child{padding-left:14px}.paywork-pairs>div{grid-template-columns:1fr 1.1fr;gap:12px}.paywork-people button{flex-wrap:wrap;gap:6px}.paywork-people button>span:nth-child(2){flex-basis:100%;text-align:left}.paywork-people button>span:last-child{display:none}.paywork footer{align-items:stretch;flex-direction:column}.paywork-search{max-width:none}.paywork-shifts>li{padding-left:24px}.paywork-shifts>li>div:first-child{flex-wrap:wrap}}
@media(max-width:560px){.paywork-period{grid-template-columns:minmax(0,1fr)}.paywork-period>span{display:none}.paywork-period label{grid-template-columns:50px minmax(0,1fr);align-items:center}}
@media(prefers-reduced-motion:no-preference){.paywork-stage.is-entering{animation:paywork-arrive .18s ease-out}@keyframes paywork-arrive{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:none}}}
.paywork-account{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-block:1px solid #d9e0da;margin:24px 0}.paywork-account strong{font-weight:550}.paywork-account small{max-width:370px}.paywork-handoff>nav{justify-content:space-between;margin-top:0}.paywork-handoff>nav>span{margin:0}.paywork-child .staffwork{border-top:0;padding-top:8px}.paywork-return:empty{display:none}@media(max-width:560px){.paywork-account{align-items:stretch;flex-direction:column;gap:12px}.paywork-handoff>nav{align-items:flex-start;flex-direction:column;gap:8px}}
.paywork-handoff>nav{position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid #d9e0da;padding:10px 0}

/* --- insurance-workflow.css --- */
.chat-message:has(.inswork){width:100%;max-width:100%;min-width:0}.chat-message:has(.inswork)>.brand-mark{display:none}.chat-message:has(.inswork) .message-bubble{width:100%;max-width:100%;padding:0;background:transparent;border:0;box-shadow:none}
.inswork{border-top:2px solid #305c49;padding:24px 0;color:#24392e;line-height:1.5;min-width:0}.inswork *{box-sizing:border-box}.inswork header,.inswork footer,.inswork nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.inswork header span,.inswork-eyebrow{font-size:.65rem;letter-spacing:.09em;color:#69776e}.inswork h3{font-size:1.25rem;letter-spacing:-.025em;margin:5px 0}.inswork h4{font-size:1.3rem;letter-spacing:-.02em;margin:8px 0}.inswork h5{font-size:.9rem;margin:20px 0 8px}.inswork p,.inswork li{font-size:.84rem;overflow-wrap:anywhere}.inswork p{color:#62736a}.inswork button{font:inherit;font-size:.82rem;border:1px solid #d6dfd8;background:#fff;border-radius:6px;color:#305c49;min-height:44px;padding:9px 13px;cursor:pointer}.inswork button:disabled{opacity:.45;cursor:default}.inswork button.inswork-primary{color:#fff;background:#305c49;border-color:#305c49}.inswork header button{border:0}.inswork :focus-visible{outline:2px solid #305c49;outline-offset:3px}.inswork input:not([type=checkbox]),.inswork select,.inswork textarea{display:block;width:100%;min-width:0;min-height:44px;font:inherit;font-size:16px;color:#24392e;border:1px solid #cbd6ce;border-radius:5px;padding:9px;background:#fff;box-shadow:none}.inswork label{font-size:.78rem;display:grid;gap:5px}.inswork-search{display:flex;gap:10px;align-items:end;margin:22px 0 14px}.inswork-search label{flex:1}.inswork-filters{display:grid;grid-template-columns:1fr 1fr;gap:14px}.inswork-list{list-style:none;padding:0;margin:20px 0}.inswork-list li{border-top:1px solid #dbe2dc}.inswork-list li:last-child{border-bottom:1px solid #dbe2dc}.inswork-list button{width:100%;display:flex;justify-content:space-between;text-align:left;align-items:center;gap:18px;border:0;border-radius:0;padding:17px 2px}.inswork-list button:hover{background:#f4f7f3}.inswork-list strong{font-weight:550;color:#24392e}.inswork-list small{display:block;color:#68776e;font-size:.74rem;margin-top:4px}.inswork-amount{text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}.inswork-count{margin:22px 0 6px}.inswork details{border-top:1px solid #dbe2dc;margin-top:24px;padding-top:10px;font-size:.83rem}.inswork summary{cursor:pointer;min-height:40px;padding:7px 0}.inswork details>p,.inswork details li{font-size:.8rem}.inswork-focus{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.inswork-source{font-size:.72rem!important;margin-top:24px}.inswork-balance{display:flex;align-items:center;gap:20px;border-block:1px solid #dbe2dc;padding:20px 0;margin:22px 0}.inswork-balance strong{font-size:1.65rem;font-weight:500;letter-spacing:-.035em}.inswork-balance span{font-size:.75rem;color:#68776e}.inswork-denial{border-left:2px solid #ac8750;padding-left:15px}.inswork-denial h5{font-size:.72rem;color:#81602d}.inswork-editor{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.inswork-wide{grid-column:1/-1}.inswork textarea{resize:vertical}.inswork footer{border-top:1px solid #dbe2dc;margin-top:25px;padding-top:18px}.inswork-report{margin:24px 0}.inswork-report>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:12px 0;border-top:1px solid #dbe2dc;font-size:.84rem}.inswork-report dt{color:#68776e}.inswork-report dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.inswork label.inswork-confirm{display:flex;align-items:flex-start;gap:12px;margin:22px 0;font-size:.84rem}.inswork input[type=checkbox]{appearance:auto;accent-color:#305c49;width:18px;height:18px;min-width:18px;min-height:18px;margin:3px 0 0;padding:0;box-shadow:none}.inswork [role=alert]{border-left:2px solid #ac8750;background:#faf8f3;padding:10px 13px}.inswork-recovery{display:flex;gap:10px;flex-wrap:wrap}.inswork-history{border-top:1px solid #dbe2dc;padding:12px 0}.inswork-history h5{margin:0}
@media(max-width:560px){.inswork h3{font-size:1.1rem}.inswork-filters{gap:10px}.inswork-list button{gap:10px}.inswork-list small{font-size:.7rem}.inswork-amount{font-size:.8rem}.inswork footer{align-items:stretch;flex-direction:column}.inswork-report>div{grid-template-columns:1fr;gap:4px}.inswork-editor{gap:14px 10px}.inswork-balance{align-items:flex-start;gap:12px;flex-direction:column}}
@media(prefers-reduced-motion:no-preference){.inswork-case,.inswork-review,.inswork-receipt{animation:inswork-step .18s ease-out}@keyframes inswork-step{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:none}}}

/* --- billing-workflow.css --- */
.chat-message:has(.billwork){width:100%;max-width:100%;min-width:0}
.chat-message:has(.billwork)>.brand-mark{display:none}
.chat-message:has(.billwork) .message-bubble{width:100%;max-width:100%;padding:0;background:transparent;border:0;box-shadow:none}
.billwork{--bill-ink:#24392e;--bill-green:#305c49;--bill-rule:#d9e1da;color:var(--bill-ink);border-top:2px solid var(--bill-green);padding:24px 0;line-height:1.5;min-width:0}
.billwork *{box-sizing:border-box}.billwork header,.billwork footer,.billwork nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.billwork header span,.billwork-kicker{font-size:.66rem;letter-spacing:.09em;color:#64766b}.billwork h3{font-size:1.3rem;font-weight:550;letter-spacing:-.025em;margin:6px 0}.billwork h4{font-size:1.4rem;letter-spacing:-.025em;margin:8px 0 16px}.billwork h5{font-size:.84rem;font-weight:600;margin:0 0 8px}
.billwork p,.billwork li{font-size:.84rem;overflow-wrap:anywhere}.billwork p{color:#62736a}.billwork small{font-size:.74rem;color:#68786d}.billwork button{font:inherit;font-size:.82rem;color:var(--bill-green);background:white;border:1px solid var(--bill-rule);border-radius:5px;min-height:44px;padding:9px 13px;cursor:pointer}.billwork button:disabled{opacity:.45;cursor:default}.billwork button.billwork-primary{background:var(--bill-green);color:white;border-color:var(--bill-green)}.billwork header button{border:0}.billwork :focus-visible{outline:2px solid var(--bill-green);outline-offset:3px}
.billwork-tabs{display:flex;border-bottom:1px solid var(--bill-rule);gap:8px;margin:24px 0 20px}.billwork-tabs button{border:0;border-radius:0;border-bottom:2px solid transparent;color:#6b796f;padding:10px 5px}.billwork-tabs button[aria-pressed=true]{border-color:var(--bill-green);color:var(--bill-green);font-weight:600}
.billwork label{display:grid;gap:6px;font-size:.78rem}.billwork input:not([type=checkbox]),.billwork select,.billwork textarea{width:100%;min-width:0;min-height:44px;font:inherit;font-size:16px;color:var(--bill-ink);background:white;border:1px solid #cbd6ce;border-radius:5px;padding:9px;box-shadow:none}.billwork textarea{resize:vertical}
.billwork-search{display:flex;gap:10px;align-items:end;margin:16px 0}.billwork-search label{flex:1}.billwork-filters{display:flex;gap:12px;flex-wrap:wrap}.billwork-filters label{flex:1;min-width:135px}.billwork-count{margin:22px 0 8px;font-variant-numeric:tabular-nums}
.billwork-list{list-style:none;padding:0;margin:0 0 16px}.billwork-list li{border-top:1px solid var(--bill-rule)}.billwork-list li:last-child{border-bottom:1px solid var(--bill-rule)}.billwork-list button{display:flex;width:100%;text-align:left;justify-content:space-between;align-items:center;gap:18px;border:0;border-radius:0;padding:18px 2px}.billwork-list button:hover{background:#f5f7f3}.billwork-list strong{font-weight:550;color:var(--bill-ink)}.billwork-list small{display:block;margin-top:4px}.billwork-list button>span:last-child{text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0}
.billwork-amount{display:flex;gap:24px;align-items:center;border-block:1px solid var(--bill-rule);margin:22px 0;padding:20px 0}.billwork-amount strong{font-size:1.8rem;font-weight:500;letter-spacing:-.035em;white-space:nowrap}.billwork-amount p{font-size:.76rem;max-width:390px;margin:0}
.billwork-facts{display:grid;grid-template-columns:1fr 1fr;gap:15px;font-size:.82rem}.billwork-facts dt{font-size:.72rem;color:#6c7a70}.billwork-facts dd{margin:3px 0;overflow-wrap:anywhere}.billwork details{border-top:1px solid var(--bill-rule);margin-top:24px;padding-top:8px;font-size:.83rem}.billwork summary{cursor:pointer;min-height:44px;padding:9px 0}.billwork-evidence{padding-left:18px}.billwork-evidence li{padding:8px 0;border-bottom:1px solid var(--bill-rule)}
.billwork-editor{border-top:1px solid var(--bill-rule);padding-top:24px;margin:24px 0;display:grid;gap:14px}.billwork-editor h5,.billwork-editor p{margin:0}.billwork footer{border-top:1px solid var(--bill-rule);margin-top:24px;padding-top:18px}.billwork-change{display:grid;grid-template-columns:1fr 1fr;margin:24px 0;border-block:1px solid var(--bill-rule)}.billwork-change section{padding:18px 20px 18px 0;min-width:0}.billwork-change section+section{padding-left:20px;border-left:1px solid var(--bill-rule)}.billwork-change p{white-space:pre-wrap;margin:8px 0}.billwork-change h5{font-size:.72rem;color:#68786d;font-weight:500}
.billwork label.billwork-confirm{display:flex;align-items:flex-start;gap:12px;margin:22px 0;font-size:.84rem}.billwork input[type=checkbox]{appearance:auto;accent-color:var(--bill-green);width:18px;height:18px;min-width:18px;min-height:18px;max-width:18px;max-height:18px;flex:0 0 18px;margin:3px 0 0;padding:0;box-shadow:none}
.billwork [role=alert],.billwork-warning{border-left:2px solid #ac8750;background:#faf8f3;padding:10px 13px}.billwork-recovery{display:flex;gap:10px;flex-wrap:wrap}.billwork-source{font-size:.74rem!important;margin-top:22px}.billwork-boundary{margin-top:28px!important}
@media(max-width:560px){.billwork{padding:20px 0}.billwork h3{font-size:1.15rem}.billwork-tabs{gap:6px}.billwork-tabs button{font-size:.75rem;flex:1;padding-inline:2px}.billwork-filters{gap:10px}.billwork-filters label{min-width:120px}.billwork-list button{gap:12px}.billwork-list button>span:last-child{font-size:.8rem}.billwork-amount{align-items:flex-start;flex-direction:column;gap:10px}.billwork-change{grid-template-columns:1fr}.billwork-change section+section{border-left:0;border-top:1px solid var(--bill-rule);padding-left:0}.billwork footer{flex-direction:column;align-items:stretch}}
@media(prefers-reduced-motion:no-preference){.billwork-step{animation:billwork-enter .18s ease-out}@keyframes billwork-enter{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:none}}}
.billwork-handoff{display:flex;align-items:center;justify-content:space-between;gap:20px;border-block:1px solid #dce4de;padding:20px 0;margin:20px 0}.billwork-handoff p{margin:6px 0 0;color:#68786e;max-width:38ch}.billwork-return{position:sticky;top:0;z-index:2;background:#fff;display:flex;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid #dce4de}.billwork-return span,.billwork-return-status{font-size:13px;color:#68786e}.billwork-child .inswork{margin:0;border:0;padding-inline:0}.billwork-child{min-width:0}@media(max-width:560px){.billwork-handoff{align-items:stretch;flex-direction:column}.billwork-return{align-items:stretch;flex-direction:column;gap:6px}.billwork-return button{width:100%}}

/* --- calendar-workflow.css --- */
.chat-message:has(.qcalendar){width:100%;max-width:100%;min-width:0}
.chat-message:has(.qcalendar)>.brand-mark{display:none}
.chat-message:has(.qcalendar) .message-bubble{width:100%;max-width:100%;padding:0;background:transparent;border:0;box-shadow:none}
.qcalendar{border-top:2px solid #295c4d;padding:22px 0;color:#22332d;line-height:1.5;min-width:0}
.qcalendar *{box-sizing:border-box}.qcalendar header,.qcalendar footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.qcalendar header span{font-size:.65rem;letter-spacing:.08em;color:#63776b}.qcalendar h3{font-size:1.25rem;letter-spacing:-.025em;margin:6px 0}.qcalendar h4{font-size:1rem;margin:24px 0 12px}
.qcalendar p{font-size:.85rem;color:#61736a;overflow-wrap:anywhere}.qcalendar button{font:inherit;font-size:.82rem;min-height:44px;padding:8px 12px;border:1px solid #d6dfd9;border-radius:6px;color:#295c4d;background:#fff;cursor:pointer}
.qcalendar button:disabled{opacity:.45;cursor:default}.qcalendar header button{border:0}.qcalendar button.qcalendar-primary{background:#295c4d;color:#fff;border-color:#295c4d}
.qcalendar :focus-visible{outline:2px solid #295c4d;outline-offset:3px}.qcalendar nav{display:flex;gap:8px;margin:24px 0 18px}.qcalendar nav button{border-color:transparent}.qcalendar nav button[aria-pressed=true]{background:#e8eee9;color:#244e3c}
.qcalendar-week{border-top:1px solid #dbe2dd;margin:20px 0}.qcalendar-day{display:grid;grid-template-columns:100px 100px minmax(0,1fr);gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #dbe2dd;font-size:.85rem}
.qcalendar-day strong{font-weight:550}.qcalendar select,.qcalendar input:not([type=checkbox]){font:inherit;font-size:16px;min-width:0;width:100%;min-height:44px;padding:8px;border:1px solid #cbd6ce;border-radius:5px;color:#22332d;background:#fff;box-shadow:none}
.qcalendar-times{display:flex;align-items:center;gap:10px}.qcalendar-times>span{font-size:.8rem;color:#61736a}.qcalendar-times label{flex:1;min-width:0}.qcalendar-times label span{display:block;font-size:.7rem;color:#61736a;margin-bottom:3px}
.qcalendar footer{border-top:1px solid #dbe2dd;padding-top:18px;margin-top:22px}.qcalendar-closure-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.qcalendar-closure-form label{display:grid;gap:6px;font-size:.82rem}.qcalendar-reason{grid-column:1/-1}
.qcalendar-closures article{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid #dbe2dd;font-size:.85rem}.qcalendar-closures article div{min-width:0}.qcalendar-closures p{margin:4px 0}.qcalendar-closures strong{font-weight:550;overflow-wrap:anywhere}
.qcalendar-diff{list-style:none;margin:20px 0;padding:0}.qcalendar-diff li{display:grid;grid-template-columns:110px 1fr 1fr;gap:16px;border-top:1px solid #dbe2dd;padding:16px 0;font-size:.85rem}.qcalendar-diff li>strong{font-weight:550}.qcalendar-diff li>div{min-width:0}.qcalendar-diff span{font-size:.68rem;color:#61736a;text-transform:uppercase;letter-spacing:.05em}.qcalendar-diff p{margin:6px 0;color:#22332d;white-space:pre-wrap}
.qcalendar-check{display:flex;align-items:flex-start;gap:12px;font-size:.85rem;margin:16px 0}.qcalendar input[type=checkbox]{appearance:auto;accent-color:#295c4d;width:18px;height:18px;min-width:18px;min-height:18px;padding:0;margin:3px 0 0;box-shadow:none}
.qcalendar [role=alert],.qcalendar-unconfirmed{border-left:2px solid #a67b43;padding:10px 14px;background:#faf8f3}.qcalendar details{font-size:.8rem;margin:24px 0 8px}.qcalendar summary{min-height:36px;cursor:pointer}.qcalendar-recovery{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
@media(max-width:560px){.qcalendar-day{grid-template-columns:minmax(0,1fr) 110px;gap:8px 12px}.qcalendar-times{grid-column:1/-1}.qcalendar-times>span{padding:4px 0}.qcalendar-diff li{grid-template-columns:1fr 1fr;gap:10px}.qcalendar-diff li>strong{grid-column:1/-1}.qcalendar footer{align-items:stretch;flex-direction:column}.qcalendar h3{font-size:1.1rem}.qcalendar-closure-form{gap:12px}}
@media(prefers-reduced-motion:no-preference){.qcalendar-review{animation:qcalendar-review-in .18s ease-out}@keyframes qcalendar-review-in{from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:none}}}

/* --- performance-workflow.css --- */
.chat-message:has(.qperformance){width:100%;max-width:100%;min-width:0}
.chat-message:has(.qperformance)>.brand-mark{display:none}
.chat-message:has(.qperformance) .message-bubble{width:100%;max-width:100%;padding:0;border:0;background:transparent;box-shadow:none}
.qb-chat-screen:has(.qperformance) .chat-input:not(:focus-within) textarea{min-height:44px;height:44px!important;max-height:44px}
.qperformance{border-top:2px solid var(--accent,#295c4d);padding:24px 0;max-width:100%;min-width:0;color:var(--ink,#20312c)}
.qperformance *{box-sizing:border-box}
.qperformance caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.qperformance button{font:inherit;min-height:44px;cursor:pointer}
.qperformance :focus-visible{outline:2px solid #295c4d;outline-offset:3px}
.chat-message .message-bubble .qperformance table{display:table}
.qperformance header{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.qperformance h3{font-size:1.3rem;letter-spacing:-.025em;margin:0}
.qperformance header button{border:0;background:none;color:var(--accent,#295c4d);padding:8px}
.qperformance-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 14px}
.qperformance-controls label{display:grid;gap:6px;min-width:0;font-size:.85rem;font-weight:600}
.qperformance-controls label:last-child:nth-child(3){grid-column:1/-1}
.qperformance input,.qperformance select{width:100%;min-width:0;box-sizing:border-box;font:inherit;padding:10px;border:1px solid #cbd5cf;border-radius:6px;background:#fff;color:inherit;min-height:44px}
.qperformance-source{font-size:.78rem;color:#63736b;margin:24px 0 8px}
.qperformance-scope{font-weight:600;margin-bottom:4px}
.qperformance table{width:100%;border-collapse:collapse;margin:20px 0;font-variant-numeric:tabular-nums;font-size:.9rem}
.qperformance th,.qperformance td{border-bottom:1px solid #dce3df;padding:14px 8px;text-align:right;vertical-align:top}
.qperformance th:first-child{text-align:left;padding-left:0}
.qperformance td:last-child,.qperformance th:last-child{padding-right:0}
.qperformance thead th{font-size:.76rem;font-weight:500;color:#63736b}
.qperformance tbody th{font-weight:550}
.qperformance th small{display:block;font-size:.74rem;font-weight:400;color:#63736b;margin:5px 0 0;padding:0;border:0}
.qperformance details{border-top:1px solid #dce3df;padding-top:16px}
.qperformance summary{cursor:pointer;font-weight:550;min-height:36px}
.qperformance details p{font-size:.84rem;color:#63736b;line-height:1.6}
.qperformance-warning{border-left:2px solid #a77737;padding-left:12px}
.qperformance-result{animation:qperformance-enter .18s ease-out}
@keyframes qperformance-enter{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:480px){.qperformance{padding:18px 0}.qperformance h3{font-size:1.1rem}.qperformance table{font-size:.8rem}.qperformance th,.qperformance td{padding:12px 4px}.qperformance-controls{gap:8px}}
@media(prefers-reduced-motion:reduce){.qperformance-result{animation:none}}

/* --- board-workflow.css --- */
.chat-message:has(.qboard){width:100%;max-width:100%;min-width:0}.chat-message:has(.qboard)>.brand-mark{display:none}.chat-message:has(.qboard) .message-bubble{width:100%;max-width:100%;padding:0;border:0;background:transparent;box-shadow:none}
.qboard{min-width:0;border-top:2px solid #295c4d;padding:24px 0;color:#22332d;line-height:1.5}.qboard *{box-sizing:border-box}
.qboard header,.qboard footer,.qboard-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.qboard header{align-items:baseline}.qboard h3{font-size:1.3rem;letter-spacing:-.025em;margin:0}.qboard h4{font-size:1.15rem}.qboard h5{font-size:.9rem;margin:16px 0 8px}
.qboard button{font:inherit;font-size:.85rem;min-height:44px;padding:8px 12px;border:1px solid #dce3df;border-radius:6px;color:#295c4d;background:#fff;cursor:pointer}.qboard button.is-primary{color:#fff;background:#295c4d;border-color:#295c4d}.qboard button:disabled{opacity:.5;cursor:default}.qboard header button{border:0;padding-right:0}
.qboard :focus-visible{outline:2px solid #295c4d;outline-offset:3px}.qboard-tools{margin:24px 0 14px;justify-content:flex-start}.qboard-tools strong{margin-right:auto}
.qboard-search{display:grid;gap:6px;font-size:.85rem}.qboard-search input{width:100%;min-width:0;font:inherit;padding:10px 12px;border:1px solid #cbd5cf;border-radius:6px;min-height:44px}
.qboard-filters{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}.qboard-search select{font:inherit;color:inherit;background:#fff;border:1px solid #cbd5cf;border-radius:6px;min-height:44px;padding:10px;max-width:100%}
.qboard-options{margin:20px 0;max-height:350px;overflow:auto;scrollbar-gutter:stable}.qboard-option,.qboard-check{display:flex;gap:12px;align-items:flex-start;padding:16px 0;border-top:1px solid #dce3df;cursor:pointer}.qboard-option[hidden]{display:none}.qboard-option span{min-width:0}.qboard-option strong{font-weight:550}.qboard .qboard-option small{display:block;font-size:.76rem;line-height:1.6;color:#65756c;margin:4px 0 0;padding:0;border:0}
.qboard input[type=checkbox]{appearance:auto;accent-color:#295c4d;flex:0 0 18px;width:18px;height:18px;min-height:18px;min-width:18px;margin:3px 0 0;padding:0;box-shadow:none}
.qboard footer{border-top:1px solid #dce3df;padding-top:18px;margin-top:20px;font-size:.82rem}.qboard [role=alert]{padding:12px;border-left:2px solid #a77737}.qboard-review{animation:qboard-enter .18s ease-out}.qboard-review ul{padding-left:22px}.qboard-review details{margin:20px 0}.qboard summary{cursor:pointer;min-height:36px}
@keyframes qboard-enter{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:480px){.qboard h3{font-size:1.1rem}.qboard-options{max-height:280px}.qboard footer{align-items:stretch;flex-direction:column}.qboard header{gap:8px}}
@media(prefers-reduced-motion:reduce){.qboard-review{animation:none}}

/* --- compliance-workflow.css --- */
.chat-message:has(.qcompliance){width:100%;max-width:100%;min-width:0}.chat-message:has(.qcompliance)>.brand-mark{display:none}.chat-message:has(.qcompliance) .message-bubble{width:100%;max-width:100%;padding:0;border:0;background:transparent;box-shadow:none}
.qcompliance{min-width:0;border-top:2px solid #295c4d;padding:24px 0;color:#22332d;line-height:1.55}.qcompliance *{box-sizing:border-box}.qcompliance h3{font-size:1.2rem;letter-spacing:-.025em;margin:0}.qcompliance h4{font-size:1.1rem;margin:20px 0}.qcompliance h5{font-size:1rem;margin:24px 0 14px}
.qcompliance header,.qcompliance footer,.qcompliance nav{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.qcompliance button{font:inherit;font-size:.85rem;min-height:44px;padding:8px 12px;background:white;border:1px solid #d8e0da;border-radius:6px;color:#295c4d;cursor:pointer}.qcompliance button.is-primary{background:#295c4d;color:white;border-color:#295c4d}.qcompliance button:disabled{opacity:.5;cursor:default}.qcompliance header button{border:0}.qcompliance :focus-visible{outline:2px solid #295c4d;outline-offset:3px}
.qcompliance-list{margin:20px 0}.qcompliance-list>button{display:block;width:100%;text-align:left;padding:18px 0;border:0;border-bottom:1px solid #d8e0da;border-radius:0}.qcompliance-list strong,.qcompliance-list span{display:block}.qcompliance-list span{font-size:.78rem;color:#65756c;margin-top:5px}
.qcompliance details{margin:16px 0;padding:12px 0;border-block:1px solid #e0e6e2}.qcompliance summary{cursor:pointer;font-size:.85rem}.qcompliance details details{border:0;margin:4px 0}.qcompliance ul{padding-left:22px}.qcompliance p{font-size:.85rem;color:#65756c}.qcompliance [role=alert]{padding:12px;border-left:2px solid #a77737}
.qcompliance form{display:grid;gap:14px}.qcompliance form label{display:grid;gap:6px;font-size:.85rem}.qcompliance input:not([type=checkbox]),.qcompliance select,.qcompliance textarea{width:100%;min-width:0;font:inherit;font-size:16px;padding:10px 12px;min-height:44px;border:1px solid #cad5ce;border-radius:6px;box-shadow:none;background:white;color:#22332d}.qcompliance textarea{resize:vertical}
.qcompliance-record{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px 18px;font-size:.85rem;padding:18px 0;border-block:1px solid #d8e0da}.qcompliance-record dt{color:#65756c}.qcompliance-record dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.qcompliance-confirm{display:flex;align-items:flex-start;gap:12px;font-size:.85rem;margin:24px 0;cursor:pointer}.qcompliance input[type=checkbox]{appearance:auto;accent-color:#295c4d;width:18px;height:18px;flex:0 0 18px;min-height:18px;padding:0;margin:2px 0;box-shadow:none}.qcompliance footer{padding-top:18px;border-top:1px solid #d8e0da;margin-top:20px}
@media(max-width:480px){.qcompliance h3{font-size:1.05rem}.qcompliance-record{grid-template-columns:1fr;gap:3px}.qcompliance-record dd{margin-bottom:12px}.qcompliance footer{flex-direction:column;align-items:stretch}}
@media(prefers-reduced-motion:no-preference){.qcompliance-record{animation:qcompliance-enter .18s ease-out}@keyframes qcompliance-enter{from{opacity:.6;transform:translateY(3px)}to{opacity:1;transform:none}}}

/* --- supply-workflow.css --- */
.chat-message:has(.qsupply){width:100%;max-width:100%;min-width:0}.chat-message:has(.qsupply)>.brand-mark{display:none}.chat-message:has(.qsupply) .message-bubble{width:100%;max-width:100%;border:0;background:transparent;box-shadow:none;padding:0}
.qsupply{border-top:2px solid #295c4d;padding:24px 0;color:#22332d;line-height:1.55;min-width:0}.qsupply *{box-sizing:border-box}.qsupply h3{font-size:1.2rem;letter-spacing:-.025em;margin:0}.qsupply h4{font-size:1.05rem;margin:20px 0 12px}.qsupply p{font-size:.85rem;color:#65756c}.qsupply header,.qsupply footer,.qsupply nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.qsupply button{font:inherit;font-size:.85rem;min-height:44px;border:1px solid #d8e0da;border-radius:6px;padding:8px 12px;background:white;color:#295c4d;cursor:pointer}.qsupply button:disabled{opacity:.5;cursor:default}.qsupply button.is-primary{background:#295c4d;color:white;border-color:#295c4d}.qsupply header button{border:0}.qsupply :focus-visible{outline:2px solid #295c4d;outline-offset:3px}
.qsupply-filters{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:12px;align-items:end;margin:20px 0}.qsupply label{font-size:.85rem}.qsupply input:not([type=checkbox]),.qsupply select,.qsupply textarea{font:inherit;font-size:16px;min-height:44px;min-width:0;width:100%;padding:9px 12px;border:1px solid #cad5ce;border-radius:6px;background:white;color:#22332d;box-shadow:none}.qsupply textarea{resize:vertical;white-space:pre-wrap}.qsupply-filters label{display:grid;gap:6px}
.qsupply-items article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;border-bottom:1px solid #d8e0da;padding:20px 0}.qsupply-pick{display:flex;align-items:flex-start;gap:12px;cursor:pointer}.qsupply input[type=checkbox]{appearance:auto;accent-color:#295c4d;width:18px;height:18px;flex:0 0 18px;min-height:18px;padding:0;margin:3px 0;box-shadow:none}.qsupply-pick small{display:block;color:#65756c;font-size:.75rem;margin-top:4px}.qsupply-items article p{grid-column:1;margin:0 0 0 30px}.qsupply-items article button{grid-column:2;grid-row:1/3;align-self:center}.qsupply nav{font-size:.78rem;padding-top:16px}.qsupply-selection{border-top:2px solid #295c4d;margin-top:28px;padding-top:8px}.qsupply-selected{display:flex;align-items:end;gap:14px;padding:10px 0}.qsupply-selected label{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:12px;align-items:center;flex:1;min-width:0}.qsupply footer{margin-top:18px;padding-top:16px;border-top:1px solid #d8e0da}.qsupply-history{list-style:none;margin:0;padding:0}.qsupply-history li,.qsupply-invoice p{padding:14px 0;border-bottom:1px solid #d8e0da;font-size:.85rem}.qsupply [role=alert]{border-left:2px solid #a77737;padding:12px}.qsupply :is(strong,label,p){overflow-wrap:anywhere}
@media(max-width:560px){.qsupply-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.qsupply-filters button{grid-column:1/-1}.qsupply-items article{grid-template-columns:minmax(0,1fr)}.qsupply-items article button{grid-column:1;grid-row:auto;justify-self:start;margin-left:30px}.qsupply-selected label{grid-template-columns:minmax(0,1fr);gap:6px}.qsupply-selected input{max-width:120px}.qsupply footer{align-items:stretch;flex-direction:column}}
@media(prefers-reduced-motion:no-preference){.qsupply-selection,.qsupply-invoice{animation:qsupply-enter .18s ease-out}@keyframes qsupply-enter{from{opacity:.7;transform:translateY(3px)}to{opacity:1;transform:none}}}

/* --- reception-knowledge.css --- */
.chat-message:has(.rknow){width:100%;max-width:100%;min-width:0}.chat-message:has(.rknow)>.brand-mark{display:none}.chat-message:has(.rknow) .message-bubble{width:100%;max-width:100%;padding:0;background:transparent;border:0;box-shadow:none}
.rknow{border-top:2px solid #295c4d;padding:20px 0;color:#22332d;line-height:1.55;min-width:0}.rknow *{box-sizing:border-box}.rknow header,.rknow footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.rknow header span{font-size:.67rem;letter-spacing:.08em;color:#65756c}.rknow h3{font-size:1.3rem;letter-spacing:-.025em;margin:6px 0}.rknow h4{font-size:1.06rem;margin:0 0 8px}.rknow h5{font-size:.75rem;color:#65756c;margin:0 0 12px}.rknow p{font-size:.86rem;color:#65756c}.rknow button{min-height:44px;font:inherit;font-size:.82rem;background:#fff;border:1px solid #d8e0da;color:#295c4d;border-radius:6px;padding:8px 12px;cursor:pointer}.rknow button:disabled{opacity:.5;cursor:default}.rknow button.is-primary{background:#295c4d;border-color:#295c4d;color:#fff}.rknow header button{border:0}.rknow nav{display:flex;flex-wrap:wrap;gap:6px;padding:16px 0 24px}.rknow nav button{border-color:transparent;background:#f4f6f4}.rknow nav button[aria-pressed=true]{background:#e2ebe5;border-color:#9db5a7;color:#244b3b}.rknow :focus-visible{outline:2px solid #295c4d;outline-offset:3px}.rknow-detail{border-top:1px solid #d8e0da;padding:20px 0}.rknow footer{border-top:1px solid #d8e0da;margin-top:20px;padding-top:16px}.rknow label{font-size:.86rem}.rknow-editor,.rknow-faqs label{display:grid;gap:8px}.rknow textarea,.rknow input:not([type=checkbox]){font:inherit;font-size:16px;min-height:44px;width:100%;min-width:0;border:1px solid #c6d2ca;border-radius:6px;background:#fff;color:#22332d;padding:12px;box-shadow:none}.rknow textarea{resize:vertical}.rknow-faqs fieldset{min-width:0;padding:16px 0;border:0;border-top:1px solid #d8e0da}.rknow-faqs label{margin-bottom:12px}.rknow-faqs legend{font-size:.75rem;color:#65756c;padding:0 8px 0 0}.rknow-comparison{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}.rknow-comparison section{min-width:0;border-left:2px solid #d8e0da;padding-left:16px}.rknow-comparison section+section{border-color:#295c4d}.rknow-copy,.rknow-comparison li p{white-space:pre-wrap;color:#22332d}.rknow-comparison ol{padding-left:20px;font-size:.86rem}.rknow p,.rknow strong{overflow-wrap:anywhere}.rknow-confirm{display:flex;align-items:flex-start;gap:12px}.rknow input[type=checkbox]{appearance:auto;accent-color:#295c4d;width:18px;height:18px;min-height:18px;flex:0 0 18px;padding:0;margin:3px 0;box-shadow:none}.rknow [role=alert]{border-left:2px solid #a77737;padding:12px}.rknow details{margin:16px 0;font-size:.82rem}
@media(max-width:560px){.rknow-comparison{grid-template-columns:minmax(0,1fr);gap:20px}.rknow footer{align-items:stretch;flex-direction:column}.rknow nav{gap:4px}.rknow nav button{font-size:.78rem;padding:7px 9px}}
@media(prefers-reduced-motion:no-preference){.rknow-comparison{animation:rknow-review .18s ease-out}@keyframes rknow-review{from{opacity:.7;transform:translateY(3px)}to{opacity:1;transform:none}}}

/* --- benchmark-workflow.css --- */
.chat-message:has(.qbench),.chat-message:has(.qbench) .message-bubble {width:100%;max-width:100%;min-width:0;}
.chat-message:has(.qbench)>.brand-mark {display:none;}
.chat-message .message-bubble:has(.qbench) {padding:0;border:0;background:transparent;}
.qbench {border-block:1px solid var(--line);margin:18px 0;color:var(--text);text-align:left;}
.qbench * {box-sizing:border-box;}
.qbench header {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;}
.qbench h3 {margin:0;font-size:19px;font-weight:550;letter-spacing:-.035em;}
.qbench h4 {margin:22px 0 10px;font-size:16px;font-weight:550;}
.qbench p {font-size:14px;line-height:1.7;}
.qbench button,.qbench select {min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface,#fff);color:var(--text);font:inherit;font-size:13px;padding:9px 12px;}
.qbench button {cursor:pointer;}
.qbench button:disabled,.qbench select:disabled {opacity:.5;cursor:default;}
.qbench button:focus-visible,.qbench select:focus-visible {outline:2px solid var(--green);outline-offset:3px;}
.qbench-controls {display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin:22px 0 12px;}
.qbench label {font-size:12px;color:var(--muted);min-width:0;}
.qbench select {display:block;width:100%;max-width:100%;margin-top:8px;}
.qbench .qbench-source,.qbench .qbench-note {font-size:12px;line-height:1.7;color:var(--muted);}
.qbench-source {margin:18px 0;}
.qbench-reading {padding:22px 0 24px;border-top:1px solid var(--line);}
.qbench-reading>span,.qbench-reading>small {display:block;}
.qbench-reading>strong {display:block;margin:8px 0;font-size:40px;font-weight:450;letter-spacing:-.055em;font-variant-numeric:tabular-nums;}
.qbench-reading>small {font-size:12px;color:var(--muted);line-height:1.6;}
.qbench-tabs {display:flex;gap:20px;border-block:1px solid var(--line);}
.qbench-tabs button {padding:10px 0;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;}
.qbench-tabs button[aria-pressed=true] {border-bottom-color:var(--green);color:var(--green);}
.qbench-view {padding-bottom:24px;animation:qbench-enter 160ms ease-out;}
.qbench-history {list-style:none;padding:0;margin:20px 0;}
.qbench-history li {display:grid;grid-template-columns:85px minmax(30px,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:12px;}
.qbench-history li>strong {font-weight:550;font-variant-numeric:tabular-nums;}
.qbench-history small {grid-column:1/-1;color:var(--muted);line-height:1.6;}
.qbench-bar {height:7px;background:var(--surface);}
.qbench-bar i {display:block;height:100%;background:var(--green);transform-origin:left;animation:qbench-grow 200ms ease-out;}
.qbench-pair {display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:22px 0;}
.qbench-pair>div {min-width:0;border-left:2px solid var(--line);padding-left:14px;}
.qbench-pair>div+div {border-color:var(--green);}
.qbench dt {font-size:12px;color:var(--muted);margin-bottom:8px;}
.qbench dd {margin:0;font-size:17px;overflow-wrap:anywhere;}
.qbench-warning {border-left:2px solid #99733c;padding-left:14px;}
.qbench table {width:100%;border-collapse:collapse;font-size:13px;}
.qbench th,.qbench td {padding:14px 0;border-bottom:1px solid var(--line);text-align:left;overflow-wrap:anywhere;}
.qbench th {font-weight:500;}
.qbench th small {display:block;font-weight:400;color:var(--muted);margin-top:5px;}
.qbench td:last-child {text-align:right;font-variant-numeric:tabular-nums;}
.qbench details {margin:0 0 20px;}
.qbench summary {cursor:pointer;}
@keyframes qbench-enter {from {opacity:.6;transform:translateY(3px);}to {opacity:1;transform:none;}}
@keyframes qbench-grow {from {transform:scaleX(.2);}to {transform:scaleX(1);}}
@media(max-width:600px) {.qbench-controls {grid-template-columns:minmax(0,1fr);}.qbench select {font-size:16px;}.qbench-pair {gap:14px;}.qbench-tabs {gap:18px;}}
@media(prefers-reduced-motion:reduce) {.qbench-view,.qbench-bar i {animation:none;}}