/* Worker PWA — Chat & Shifts (verbatim port of Worker PWA - Chat & Shifts.dc.html, .pw- scope).
   The design's Signal tokens live on .pw-screen (light default; dark follows the app's data-theme
   or the OS). Every inline style in the ported markup carries a var(--x,#fallback), so these
   definitions are what makes the dark theme real. The phone frame + status bar from the mock are
   dropped — the real app shell owns the viewport (handoff §2.2). */

/* .pw-scope carries the tokens without the screen layout (e.g. the My Day coverage block) */
.pw-screen, .pw-scope {
    --brand-50: #EEF1FE; --brand-100: #DDE3FD; --brand-200: #C2CCFB; --brand-400: #7B8FF3;
    --brand-500: #5E76EE; --brand-600: #4C63E6; --brand-700: #3D4FC9; --brand-800: #3340A0;
    --brand-grad: linear-gradient(135deg,#5E76EE,#8A63E8);
    --success: #15A06B; --danger: #E04646; --warning: #EE8A2E; --gold: #D99B12; --purple: #8B5CF6;
    --r-md: 12px; --r-lg: 16px;
    --e1: 0 1px 2px rgba(20,25,55,.06); --e2: 0 8px 28px rgba(20,25,55,.14);
    --pw-bg: #F5F6FB; --surface: #FFFFFF; --surface-2: #FAFBFE;
    --border: #E5E8F2; --border-strong: #D2D7E6;
    --pw-text: #1A1D2E; --text-2: #4A4F63; --muted: #767C92; --faint: #A2A7BC;
    --info-bg: #ECEFFB; --info-fg: #3D4FC9; --ok-bg: #E2F6EE; --ok-fg: #0E6B47;
    --warn-bg: #FCEEDD; --warn-fg: #B5651A; --gold-bg: #FBF1D6; --gold-fg: #8A6A0C;
    --bad-bg: #FCE7E7; --bad-fg: #B3262B; --pur-bg: #EFE9FD; --pur-fg: #6D45C9;
    --neutral-bg: #F1F2F6; --neutral-fg: #6B7080;
    background: var(--pw-bg);
    color: var(--pw-text);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

[data-theme="dark"] .pw-screen, [data-theme="dark"] .pw-scope {
    --pw-bg: #0E1430; --surface: #161E3C; --surface-2: #1B2446;
    --border: #2A335C; --border-strong: #38436F;
    --pw-text: #EEF1FB; --text-2: #B9C2E0; --muted: #8590B5; --faint: #6B7596;
    --info-bg: rgba(94,118,238,.16); --info-fg: #C2CCFB;
    --ok-bg: rgba(52,211,153,.15); --ok-fg: #5FE3B0;
    --warn-bg: rgba(238,138,46,.16); --warn-fg: #F0A961;
    --gold-bg: rgba(217,155,18,.16); --gold-fg: #F2C14E;
    --bad-bg: rgba(224,70,70,.16); --bad-fg: #F58A8A;
    --pur-bg: rgba(139,92,246,.18); --pur-fg: #C3A8FB;
    --neutral-bg: rgba(255,255,255,.06); --neutral-fg: #8590B5;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pw-screen, :root:not([data-theme="light"]) .pw-scope {
        --pw-bg: #0E1430; --surface: #161E3C; --surface-2: #1B2446;
        --border: #2A335C; --border-strong: #38436F;
        --pw-text: #EEF1FB; --text-2: #B9C2E0; --muted: #8590B5; --faint: #6B7596;
        --info-bg: rgba(94,118,238,.16); --info-fg: #C2CCFB;
        --ok-bg: rgba(52,211,153,.15); --ok-fg: #5FE3B0;
        --warn-bg: rgba(238,138,46,.16); --warn-fg: #F0A961;
        --gold-bg: rgba(217,155,18,.16); --gold-fg: #F2C14E;
        --bad-bg: rgba(224,70,70,.16); --bad-fg: #F58A8A;
        --pur-bg: rgba(139,92,246,.18); --pur-fg: #C3A8FB;
        --neutral-bg: rgba(255,255,255,.06); --neutral-fg: #8590B5;
    }
}

/* the design's helmet block, scoped */
.pw-screen, .pw-screen *, .pw-scope, .pw-scope * { box-sizing: border-box; }
.pw-scope .pw-act { transition: filter .14s, background .14s, transform .08s; }
.pw-scope .pw-act:active { transform: scale(.97); }
.pw-screen ::-webkit-scrollbar { width: 0; height: 0; }
.pw-screen .pw-in:focus { outline: none; }
.pw-screen .pw-sel { -webkit-appearance: none; appearance: none; outline: none; cursor: pointer; }
.pw-screen .pw-sel:focus { border-color: var(--brand-400,#7B8FF3); }
.pw-screen .pw-act { transition: filter .14s, background .14s, transform .08s; }
.pw-screen .pw-act:active { transform: scale(.97); }
@keyframes pw-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pw-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pw-veil { from { opacity: 0; } to { opacity: 1; } }
@keyframes pw-toast { from { transform: translate(-50%,14px); opacity: 0; } to { transform: translate(-50%,0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pw-screen * { animation-duration: .001ms !important; } }

/* screens render between the app's net bar and the ts-tabbar; sheets/toasts pin to the viewport */
.pw-screen { position: relative; min-height: calc(100dvh - 76px); padding-bottom: 84px; }
.pw-fixed { position: fixed; left: 0; right: 0; margin: 0 auto; max-width: 520px; }

/* iOS standalone (viewport-fit=cover): the status bar / Dynamic Island overlays the top of the
   viewport, so a screen's own header renders under the clock and its back button cannot be tapped.
   .ts-appbar already pads for this; the .pw-screen family (Chat & Shifts handoff screens) builds
   its own headers and did not — found live on Availability. A ::before spacer instead of padding,
   deliberately: several of these screens set inline `padding`, which would silently beat any
   padding rule here, while a ::before block wins regardless and is a flex child on the
   flex-column screens. 0 on devices with no notch. */
.pw-screen::before { content: ''; display: block; flex: none; height: env(safe-area-inset-top, 0px); }