/* Watch page (F1). Uses the theme variables set by the storefront. */
.watch { padding-top: 24px; }
.wstatus { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); margin: 0 0 14px; font-size: .95rem; }
.wdot { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); flex: none; }
.wstatus.live .wdot { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.wstatus.error .wdot { background: var(--bad); }
.wgrid { display: grid; gap: 28px; margin-top: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .wgrid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.feed { list-style: none; display: grid; gap: 8px; }
.ev { display: flex; justify-content: space-between; gap: 14px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; }
.ev.err { border-left-color: var(--bad); }
.ev-text { overflow-wrap: anywhere; }
.ev-when { color: var(--dim); font-size: .85rem; white-space: nowrap; }
.cartlines { list-style: none; display: grid; gap: 6px; }
.cartlines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cl-name { overflow-wrap: anywhere; }
.cart-total { display: flex; justify-content: space-between; padding-top: 10px; font-size: 1.1rem; }
#approve-mount:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .wdot { box-shadow: none !important; } }
.cl-av { display: block; font-size: .8rem; color: var(--dim); }
.cl-av.out { color: var(--bad); }
.cl-av.unknown { color: var(--warn); }
.cart-rows { margin: 12px 0 0; display: grid; gap: 4px; }
.cr { display: flex; justify-content: space-between; gap: 12px; }
.cr dt { color: var(--dim); }
.cr dd { margin: 0; text-align: right; }
.cr-note { display: block; font-size: .8rem; color: var(--warn); }