/* Transitions views. Layout and tokens follow the Transitions prototype (the "KP Richmond flow on Conductor" board):
   a vendor-neutral palette by design. No external font: the prototype's own fallback stack, so the in-chart host's
   CSP stays 'self' only and the page loads inside Epic within budget. No Epic or KP branding. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #F4F6F9; color: #16202C; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.45; }
h1 { font-size: 17px; line-height: 1.25; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 15.5px; line-height: 1.3; margin: 0 0 6px; }
h3 { font-size: 13.5px; margin: 12px 0 4px; color: #24313F; }
p { margin: 0 0 8px; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid #1E4FA8; outline-offset: 2px; }
.muted { color: #4F5B69; }
.small { font-size: 12.5px; }
.strong { font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 8px; top: 8px; background: #FFFFFF; padding: 8px 12px; border: 2px solid #1E4FA8; z-index: 10; }

.loading { padding: 24px; color: #4F5B69; }
.loading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid #B9CDEA; border-top-color: #1E4FA8; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading::before { animation: none; } }

/* Demo-only: the simulated EHR frame and the demo marker. Never rendered outside demo mode. */
.ehrbar { background: #2B333D; color: #E9EEF4; padding: 8px 12px; font-size: 12.5px; }
.demotag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #FFF3DC; color: #5A3D00; border: 1px solid #EBD196; font-size: 11.5px; font-weight: 600; }

.nabanner { margin: 0 0 8px; padding: 6px 10px; border-radius: 6px; background: #FFF8E6; color: #4A3600; font-size: 12.5px; border: 1px solid #EFDDA8; }
.app { max-width: 1280px; margin: 0 auto; padding: 12px 16px 40px; }
.appwin { background: #FFFFFF; border: 1px solid #D3DAE3; border-radius: 10px; padding: 12px 14px; }
.appbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding-bottom: 8px; border-bottom: 1px solid #E3E8EE; margin-bottom: 8px; }
.ptbar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; margin-bottom: 8px; }

.ob { padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; }
.ob.care { background: #E2F3E7; color: #124D29; border: 1px solid #A9D7B6; }
.ob.closed { background: #EEF0F3; color: #2B3846; border: 1px solid #C9D2DC; }
.ob.none { background: #FFFFFF; color: #2B3846; border: 1px dashed #9AA5B1; }
.ob.fail { background: #FCEDED; color: #7A1717; border: 1px solid #E09B9B; }

.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.chip.ehr { background: #E9EDF2; color: #2B3846; border-color: #C9D2DC; }
.chip.linked { background: #E0F2EF; color: #0B4F45; border-color: #A9D8CF; }
.chip.app { background: #E6F0FB; color: #163C82; border-color: #B9CDEA; }
.chip.partner { background: #EEE9F8; color: #3D2A73; border-color: #CFC3EC; }
.chip.op { background: #FFF3DC; color: #5A3D00; border-color: #EBD196; }
.chip.calc { background: #F1F2F4; color: #3E4651; border-color: #D5D9DF; }
.chip.ehrw { background: #FCEDEA; color: #7A2414; border-color: #EFC2B8; }

.mini { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.mini li { font-size: 12px; padding: 4px; border-radius: 6px; background: #F1F3F6; color: #4F5B69; text-align: center; }
.mini li.done { background: #E6F0FB; color: #163C82; }
.mini li.cur { background: #1E4FA8; color: #FFFFFF; font-weight: 600; }
.mini li.closed { background: #4A535E; color: #FFFFFF; font-weight: 600; }

.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 12px; align-items: start; }
.card { background: #FFFFFF; border: 1px solid #D3DAE3; border-radius: 10px; padding: 12px 14px; min-width: 0; }
.two > div > .card + .card { margin-top: 12px; }
.app > .card, .appwin > .card { margin-top: 12px; }
.stage { border-top: 1px solid #EEF1F5; padding: 6px 0; }
.stage:first-of-type { border-top: 0; }
.stagehd { font-size: 12.5px; font-weight: 600; color: #24313F; }
.ms { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ms li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13px; }
.ms .when { color: #4F5B69; font-size: 12.5px; }
.detail { color: #24313F; font-size: 12.5px; }

.clk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 6px 0; border-top: 1px solid #EEF1F5; font-size: 13px; }
.st { font-weight: 600; }
.st.ok { color: #17602F; }
.st.bad { color: #9B1C1C; }
.st.run { color: #163C82; }
.st.na { color: #4F5B69; }

.refcard { margin-top: 8px; padding: 8px 10px; border: 1px solid #E3E8EE; border-radius: 8px; }
.lanes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.lane { padding: 6px 8px; border-radius: 6px; background: #F7F9FB; border: 1px solid #E3E8EE; font-size: 12.5px; }
.lane.preview { border-style: dashed; color: #4F5B69; }
.ln { display: block; font-size: 11.5px; color: #4F5B69; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.flagchip { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #FFF3DC; color: #5A3D00; border: 1px solid #EBD196; }
.flagchip.bad { background: #FCE3E3; color: #8C1B1B; border-color: #E7A9A9; }

.log { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.log li { padding: 6px 9px; border-radius: 6px; border: 1px solid #E3E8EE; font-size: 13px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 10px; align-items: baseline; }
.log li .when { color: #24313F; }

.prev { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #E3E8EE; }
.ptab { min-height: 38px; font-size: 12.5px; padding: 4px 12px; border-radius: 999px; border: 1px dashed #9AA5B1; color: #24313F; background: #FAFBFC; cursor: pointer; }
.ptab[aria-expanded="true"] { border-style: solid; border-color: #1E4FA8; }
.prevpanel { margin-top: 8px; padding: 10px 12px; border: 1px dashed #9AA5B1; border-radius: 8px; background: #FAFBFC; }
.prevpanel ul { margin: 4px 0 8px; padding-left: 18px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.pill { min-height: 40px; padding: 0 13px; border-radius: 999px; border: 1px solid #C5CED9; background: #FFFFFF; color: #16202C; font-weight: 500; cursor: pointer; }
.pill:hover { border-color: #1E4FA8; }
a.pill { display: inline-flex; align-items: center; text-decoration: none; color: #16202C; }
.pill[aria-pressed="true"], .pill[aria-current="page"] { background: #1E4FA8; border-color: #1E4FA8; color: #FFFFFF; }
.btn { min-height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid #1E4FA8; background: #1E4FA8; color: #FFFFFF; font-weight: 600; cursor: pointer; }
.btn:hover { background: #163C82; }
.btn2 { min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid #C5CED9; background: #FFFFFF; color: #16202C; font-weight: 500; cursor: pointer; }
.btn2:hover { border-color: #1E4FA8; }

.wl { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; background: #FFFFFF; border: 1px solid #E3E8EE; border-radius: 8px; }
.wl th { text-align: left; background: #F7F9FB; font-size: 12px; font-weight: 600; color: #4F5B69; padding: 8px 10px; }
.wl td { padding: 8px 10px; border-top: 1px solid #EEF1F5; vertical-align: top; }
.wl a { color: #1E4FA8; font-weight: 600; }
.flag { font-weight: 600; }
.flag.bad { color: #9B1C1C; }
.flag.due { color: #7A4A00; }

.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.lst { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.lst li { padding: 4px 8px; border-radius: 6px; background: #F7F9FB; }

.form { border-top: 1px solid #EEF1F5; padding: 8px 0; }
.form summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.field { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; max-width: 420px; }
.field label, .field legend { font-size: 12.5px; color: #24313F; }
.field input[type="text"], .field input[type="number"], .field input[type="datetime-local"], .field select { min-height: 40px; padding: 4px 8px; border: 1px solid #C5CED9; border-radius: 6px; background: #FFFFFF; }
.field fieldset { border: 0; padding: 0; margin: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.checks label { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.msg { margin: 6px 0; padding: 6px 10px; border-radius: 6px; font-size: 12.5px; }
.msg.ok { background: #E2F3E7; color: #124D29; }
.msg.bad { background: #FCE3E3; color: #7A1717; }

@media (max-width: 700px) {
  .log li { grid-template-columns: minmax(0, 1fr); }
  .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols3 { grid-template-columns: minmax(0, 1fr); }
  .wl thead { display: none; }
  .wl tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid #EEF1F5; }
  .wl td { border-top: 0; }
}