/* A drawn iPhone screen for the shift tracker (no real screenshots yet). Sample data only, from the
   screen spec's sample nurse. Fills any element with [data-shift]; scales with its container width. */
.shift-screen { container-type: inline-size; aspect-ratio: 585 / 1266; background: #F5F4F0; color: #1B1D1C; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.ss-bar { display: flex; justify-content: space-between; padding: 5cqw 8cqw 0; font-size: 5.4cqw; font-weight: 600; }
.ss-bar span:last-child { letter-spacing: .1em; }
.ss-body { padding: 6cqw 6cqw 0; display: flex; flex-direction: column; gap: 4.2cqw; flex: 1; }
.ss-date { font-size: 4.4cqw; color: #6B706D; font-weight: 500; }
.ss-h { font-size: 11cqw; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-top: -2cqw; }
.ss-card { background: #fff; border-radius: 6cqw; padding: 5cqw; box-shadow: 0 .6cqw 2cqw rgba(0,0,0,.06); }
.ss-live { display: flex; align-items: center; gap: 2cqw; font-size: 4cqw; font-weight: 600; color: #2F7D5B; }
.ss-live i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #2F9E6B; animation: ss-blink 1.6s infinite; }
@keyframes ss-blink { 50% { opacity: .3; } }
.ss-timer { font-size: 15cqw; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.05; margin: 2cqw 0 1cqw; }
.ss-meta { font-size: 3.8cqw; color: #6B706D; }
.ss-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3cqw; margin-top: 4cqw; }
.ss-btns span { border-radius: 99px; text-align: center; padding: 3.4cqw 0; font-weight: 700; font-size: 4.4cqw; }
.ss-btns .b1 { border: .5cqw solid #E2A33B; color: #A86A0B; }
.ss-btns .b2 { background: #1B1D1C; color: #fff; }
.ss-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 3.8cqw; color: #6B706D; }
.ss-row b { font-size: 6.4cqw; color: #1B1D1C; letter-spacing: -.02em; }
.ss-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2.4cqw; align-items: end; height: 26cqw; margin-top: 3cqw; }
.ss-chart div { display: flex; flex-direction: column-reverse; gap: .6cqw; height: 100%; justify-content: flex-start; }
.ss-chart s, .ss-chart u { display: block; border-radius: 1.4cqw; text-decoration: none; }
.ss-chart s { background: #A9BDB1; } .ss-chart u { background: #E8553B; }
.ss-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2.4cqw; text-align: center; font-size: 3.2cqw; color: #8A8F8C; margin-top: 1.6cqw; }
.ss-key { display: flex; gap: 4cqw; font-size: 3.4cqw; color: #6B706D; margin-top: 3cqw; }
.ss-key i { display: inline-block; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; margin-right: 1.2cqw; vertical-align: middle; }
.ss-owed { background: #E6EEFB; color: #24477F; border-radius: 4cqw; padding: 3.4cqw 4cqw; font-size: 3.7cqw; font-weight: 600; }
.ss-tabs { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-size: 3.2cqw; color: #8A8F8C; padding: 3cqw 0 7cqw; border-top: .3cqw solid #E3E2DD; background: #FAFAF7; margin-top: auto; }
.ss-tabs span::before { content: ""; display: block; width: 5.4cqw; height: 5.4cqw; margin: 0 auto 1cqw; border-radius: 1.6cqw; background: currentColor; opacity: .55; }
.ss-tabs .on { color: #1B1D1C; font-weight: 600; } .ss-tabs .on::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ss-live i { animation: none; } }