/* MediRec product windows: the console-and-phone look the landing hero draws, shared by the
   feature pages. A .shot frames one or more .win; inside, .beat elements are revealed in order
   by assets/shot.js. The finished state is the markup, so reduced motion shows everything. */
.shot{ position:relative; margin:0 auto; width:100%; border-radius:18px; background:#e6e8ec; color:#111827; text-align:left; box-shadow:0 -1px 0 rgba(255,255,255,.25), 0 40px 120px -30px rgba(0,0,0,.6); overflow:hidden; display:grid; gap:12px; padding:12px; font-family:"Inter",var(--font,system-ui,sans-serif); }
.shot.two{ grid-template-columns:1.1fr .9fr; }
.win{ position:relative; background:#F9F9FA; border:1px solid #d9dce3; border-radius:12px; padding:14px 16px 16px; display:flex; flex-direction:column; gap:12px; overflow:hidden; min-width:0; }
.win.pt{ background:#f4f5f7; }
.winbar{ display:flex; align-items:center; gap:5px; margin:-14px -16px 0; padding:7px 12px; background:#f1f2f5; border-bottom:1px solid #e5e7eb; font-size:10.5px; color:#6b7280; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.winbar i{ width:8px; height:8px; border-radius:50%; background:#d1d5db; }
.winbar i:first-child{ background:#fca5a5; } .winbar i:nth-child(2){ background:#fcd34d; } .winbar i:nth-child(3){ background:#86efac; }
.winbar span{ margin-left:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .winbar span b{ font-weight:600; color:#374151; }
.winhead{ display:flex; align-items:center; gap:10px; min-height:28px; }
.winhead .wt{ font-size:12.5px; font-weight:500; color:#374151; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.winhead .right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
/* a phone reads the mock consoles too (T-33): nothing inside them under 11.5px there */
@media (max-width:640px){ .win .counter, .bub .meta, .day, .tbl td.mono, .mono, .tbl table.cal-grid td.mono, .win .role, .win .tag, .win .tag2, .win .src, .win .beat, .win .icd, .win .sign{ font-size:11.5px !important; } }
.win .counter{ margin-left:auto; font-size:10.5px; color:#6b7280; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; transition:opacity .3s; white-space:nowrap; }
.win .counter.swap{ opacity:0; }
/* the doctor's room */
.live{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px 16px 12px; display:flex; flex-direction:column; gap:10px; flex:1; }
.live h4, .tbl h4{ font-size:13px; font-weight:600; margin:0 0 2px; }
.live .s, .tbl .s{ font-size:11.5px; color:#6b7280; }
.live .lhead{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.live .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#ef4444; margin-right:6px; vertical-align:middle; animation:blink 1.2s ease-in-out infinite; }
.live .who{ font-size:11.5px; color:#374151; font-weight:500; white-space:nowrap; }
.live .said{ font-family:var(--serif,Georgia,serif); font-size:15.5px; line-height:1.35; color:#111827; min-height:4.1em; margin:0; }
.w{ opacity:0; } .play .w.in{ animation:wordIn .32s ease forwards; } .still .w{ opacity:1; }
@keyframes wordIn{ to{ opacity:1 } }
.caret{ display:inline-block; width:2px; height:1em; background:#111827; vertical-align:-.15em; margin-left:2px; animation:blink 1s steps(2) infinite; }
.still .caret{ display:none; }
.live .note{ background:#f9fafb; border:1px solid #e5e7eb; border-radius:9px; padding:9px 11px; font-size:11.5px; line-height:1.4; display:grid; gap:5px; align-content:start; min-height:150px; }
.live .note .f{ display:grid; grid-template-columns:62px 1fr; gap:8px; }
.live .note .f b{ font-weight:600; color:#6b7280; font-size:10.5px; letter-spacing:.02em; text-transform:uppercase; padding-top:1px; }
.icd{ display:inline-block; margin-left:6px; font-size:10px; font-weight:600; padding:1px 7px; border-radius:999px; background:#eef2ff; color:#3730a3; vertical-align:1px; }
.live .foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; min-height:30px; }
.live .qc{ font-size:11px; color:#166534; display:flex; align-items:center; gap:6px; }
.live .qc svg{ width:13px; height:13px; }
.live .sign{ font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:8px; white-space:nowrap; background:#e5e7eb; color:#9ca3af; transition:background .3s ease, color .3s ease, transform .15s ease; margin-left:auto; }
.live .sign.ready{ background:#111827; color:#fff; }
.live .sign.press{ transform:scale(.94); }
/* tables: queue, checklist, audit log, records */
.tbl{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px 16px; overflow:hidden; flex:1; }
.tbl table{ width:100%; border-collapse:collapse; font-size:12px; margin-top:10px; }
.tbl th{ text-align:left; font-weight:500; color:#6b7280; padding:6px 10px 6px 0; border-bottom:1px solid #e5e7eb; font-size:11px; }
.tbl td{ padding:7px 10px 7px 0; border-bottom:1px solid #f3f4f6; vertical-align:middle; }
.tbl th:last-child, .tbl td:last-child{ padding-right:0; }
.shot.wide{ grid-column:1 / -1; }
.tbl td.mono, .mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:#374151; white-space:nowrap; }
.tbl tr.dim td{ color:#9ca3af; }
.tag2{ display:inline-block; white-space:nowrap; font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:999px; background:#dcfce7; color:#166534; transition:background .35s ease, color .35s ease; }
.tag2.new{ background:#eef2ff; color:#3730a3; } .tag2.wait{ background:#f3f4f6; color:#374151; } .tag2.warn{ background:#fff4e0; color:#9a5b00; } .tag2.bad{ background:#fee2e2; color:#991b1b; }
.tag2.flip{ animation:flip .5s cubic-bezier(.16,1,.3,1); }
@keyframes flip{ 0%{ transform:scale(.7); opacity:0 } 100%{ transform:none; opacity:1 } }
.strip{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding:9px 12px; border-radius:9px; background:#f9fafb; border:1px solid #e5e7eb; font-size:12px; }
.strip b{ font-weight:600; } .strip.ok{ background:#f0fdf4; border-color:#bbf7d0; color:#166534; } .strip.warn{ background:#fffbeb; border-color:#fde68a; color:#92400e; } .strip.bad{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.fixline{ font-size:11px; color:#9a5b00; padding:0 0 6px 22px; }
.chk{ display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid #f3f4f6; font-size:12px; }
.chk .d{ width:9px; height:9px; border-radius:50%; background:#16a34a; flex:none; transition:background .35s ease; } .chk.warn .d{ background:#f59e0b; } .chk.warn.ok .d{ background:#16a34a; }
.chk .src{ margin-left:auto; font-size:10.5px; color:#6b7280; background:#f3f4f6; border-radius:999px; padding:2px 7px; }
/* the patient's phone */
.chatwrap{ position:relative; height:440px; }
.chat{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; background:#e8ebe4; border-radius:12px; padding:12px 10px; overflow:hidden; }
.bub{ align-self:flex-start; max-width:92%; background:#fff; border-radius:10px 10px 10px 3px; padding:8px 10px 6px; font-size:12px; line-height:1.45; color:#111827; box-shadow:0 1px 1px rgba(0,0,0,.06); }
.bub b{ font-weight:600; } .bub .tag{ font-weight:400; color:#6b7280; } .bub .tag::before{ content:"· "; }
.bub .meta{ display:block; text-align:right; font-size:9.5px; color:#6b7280; margin-top:4px; } .bub .meta em{ font-style:normal; color:#3b82f6; margin-left:3px; }
.bub.me{ align-self:flex-end; background:#dcf8c6; border-radius:10px 10px 3px 10px; }
.day{ align-self:center; font-size:9.5px; color:#6b7280; background:#f4f5f7; padding:2px 8px; border-radius:999px; }
/* beats */
.play .beat{ display:none; }
.play .beat.on{ display:block; animation:bubIn .5s cubic-bezier(.16,1,.3,1) both; }
.play tr.beat.on{ display:table-row; }
.play .beat.on.chk, .play .beat.on.strip, .play .beat.on.lhead, .play .beat.on.qc{ display:flex; }
.play .beat.on.f{ display:grid; }
.play .day.beat.on{ display:inline-block; }
.beat[hidden]{ display:none !important; }
.still .beat{ animation:none; }
.gone{ display:none !important; }
.plain{ font-family:inherit !important; color:#111827 !important; font-size:12px !important; }
.moved-out{ text-decoration:line-through; color:#9ca3af; } .moved-out .tag2{ opacity:.5; }
.tbl table.cal-grid{ table-layout:fixed; } .tbl table.cal-grid td.mono{ white-space:normal; font-size:10.5px; line-height:1.35; padding-right:6px; }
.edited{ text-decoration:line-through; color:#9ca3af; } .edited::after{ content:" ✎ edited"; text-decoration:none; color:#b45309; font-size:10.5px; }
.broken td{ background:#fef2f2; }
@keyframes bubIn{ from{ opacity:0; transform:translateY(10px) scale(.97) } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@keyframes blink{ 50%{ opacity:.25 } }
@media (max-width:820px){ .shot.two{ grid-template-columns:1fr; } .chatwrap{ height:360px; } }
@media (prefers-reduced-motion:reduce){
  .chatwrap{ height:auto; } .chat{ position:static; }
  .play .beat{ display:block; animation:none; } .play tr.beat{ display:table-row; }
  .play .beat.chk, .play .beat.strip, .play .beat.lhead, .play .beat.qc{ display:flex; } .play .beat.f{ display:grid; } .play .day.beat{ display:inline-block; }
  .w{ opacity:1; animation:none; } .caret{ display:none; } .live .dot{ animation:none; }
}