/* The app's own record and change feed, framed on the home page (app-samples.js). */
.app-sample{display:flex;flex-direction:column;gap:14px;width:100%;min-width:0;max-width:100%}
.app-sample-pick{min-width:0;max-width:100%;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.app-sample-pick::-webkit-scrollbar{display:none}
.app-sample-pick button{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border:1px solid rgba(255,255,255,.16);border-radius:6px;background:transparent;color:inherit;cursor:pointer;text-align:left}
.app-sample-pick button span,.app-sample-pick button small{color:#e8edf4}
.app-sample-pick button span{font-size:13.64px!important;letter-spacing:.1em!important;text-transform:uppercase;opacity:.7}
.app-sample-pick button small{font-size:14px;letter-spacing:.01em}
.app-sample-pick button[aria-selected="true"]{background:#fff!important;border-color:#fff!important}
.app-sample-pick button[aria-selected="true"] span,.app-sample-pick button[aria-selected="true"] small{color:#0d1530!important}
.app-sample-pick button[aria-selected="true"] span{opacity:.65}
.app-sample-window{position:relative;display:flex;width:100%;border-radius:10px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);background:#0b0f14}
/* the record continues below the window: a short fade says so, instead of a section cut off mid-line */
.app-sample-window::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(rgba(11,15,20,0),#0b0f14 85%);pointer-events:none}
/* a plain full width: on an iPhone a percentage min-width is resolved after the site's .88 zoom and left the frame
   88% of its window (2026-10-23); the framed page clips its own overflow, so it cannot stretch the frame */
.app-sample-frame{display:block;flex:1 1 auto;width:100%;min-width:0;max-width:100%;height:min(820px,80vh);border:0;background:#0b0f14}
.app-sample-open{align-self:flex-start;font-size:14px;color:inherit;opacity:.8;text-decoration:underline;text-underline-offset:3px}
.app-sample-open:hover{opacity:1}
.app-sample-feed{width:100%;border-radius:10px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);background:#F4F7FB}
.app-changes-frame{display:block;width:100%;height:520px;border:0;background:#F4F7FB}
.intelligence-stage:has(.app-sample){display:block;overflow:visible;min-width:0;max-width:100%;padding:14px 14px 18px}
.app-sample-open{padding-left:2px}
@media (max-width:700px){
  .app-sample-frame{height:78vh}
  /* the five hospitals wrap two to a row, so none runs off the edge of the screen */
  .app-sample-pick{flex-wrap:wrap;overflow:visible}
  .app-sample-pick button{flex:1 1 calc(50% - 4px);min-width:0;padding:9px 12px}
  /* a long name wraps to a second line rather than ending in an ellipsis */
  .app-sample-pick button small{display:block;max-width:100%;overflow-wrap:anywhere;line-height:1.3}
  .intelligence-stage:has(.app-sample){padding:10px 10px 16px}
}
/* the frame declares the dark scheme its page wears, so Safari never lays a light backdrop under the framed page */
.app-sample-frame{color-scheme:dark}
/* "Open this record in full" is a square outlined button under the record, set off from the frame's edges, not a bare
   underlined line pressed against the frame */
html body .app-sample .app-sample-open{display:block;align-self:stretch;margin:6px 0 0!important;padding:15px 20px!important;text-align:center;font-size:16px;font-weight:600;color:#fff;opacity:1;text-decoration:none;border:1px solid rgba(255,255,255,.35);border-radius:2px}
html body .app-sample .app-sample-open:hover{border-color:#fff;background:rgba(255,255,255,.06)}
@media(min-width:761px){html body .app-sample .app-sample-open{align-self:flex-start;padding:13px 26px!important}}