/* Dashboard board: 10-foot UI for a TV's built-in browser — large type, flat high
   contrast (not the phone board's translucent glassmorphism, which reads poorly
   from a couch), big focus targets for D-pad/remote navigation. */
.board{width:100%;min-height:100vh;padding:calc(28px + env(safe-area-inset-top)) 40px calc(28px + env(safe-area-inset-bottom))}
.board .login{max-width:520px;margin:12vh auto}
.screen{max-width:1400px;margin:0 auto}
.screen header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.header-right{display:flex;align-items:center;gap:10px}
.logout-btn{padding:8px 14px;border:0;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:12px;cursor:pointer}
.toolbar-btn{padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);font-size:14px;font-weight:700;cursor:pointer}
.toolbar-btn.active{background:#d9e1ff;color:#080c1c;border-color:#d9e1ff}
.toolbar-btn.sound-off{color:var(--muted)}
.toolbar-btn.sound-on{border-color:var(--ok);color:var(--ok)}
.view-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 24px}
.view-buttons{display:flex;gap:10px}
.hotkey{display:inline-block;margin-left:4px;padding:0 6px;border-radius:6px;border:1px solid currentColor;font-size:11px;opacity:.6}
.view-summary{margin:0;color:var(--muted);font-size:14px;text-align:right}
.clock-time{font-size:64px;font-weight:800;letter-spacing:-0.02em;line-height:1}
.clock-date{color:var(--muted);font-size:20px;margin-top:4px;text-transform:capitalize}
.screen .pill{font-size:14px;padding:8px 14px}

/* One row per item (was 2-col cards ~150px tall): title+body | countdown | meta | actions */
.reminders{display:flex;flex-direction:column;gap:8px}
.reminder-card{position:relative;display:flex;align-items:center;gap:16px;background:#11162e;border:2px solid var(--line);border-radius:14px;padding:8px 14px}
.reminder-main{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px}
.reminder-title{font-size:20px;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.reminder-body{flex:1 1 200px;min-width:0;color:#c3cbe8;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.reminder-countdown{font-size:22px;font-weight:800;color:var(--idle);letter-spacing:-0.02em;min-width:110px;text-align:right;white-space:nowrap}
.reminder-card.ringing{border-color:var(--bad);animation:ring-pulse 1.1s ease-in-out infinite}
.reminder-card.ringing .reminder-countdown{color:var(--bad)}
/* inset glow: pulse stays inside the row, no visual growth over neighbours */
@keyframes ring-pulse{0%,100%{box-shadow:inset 0 0 0 0 rgba(255,83,112,0)}50%{box-shadow:inset 0 0 18px 2px rgba(255,83,112,.45)}}
.ack-btn{box-sizing:border-box;height:34px;width:64px;padding:0;font-size:16px;font-weight:800;line-height:1;border:0;border-radius:10px;background:var(--bad);color:#1a0508;cursor:pointer}
/* fixed width: OK button appearing on ring must not shift the row */
.card-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-shrink:0;width:206px}
.display-btn{box-sizing:border-box;height:34px;line-height:1;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.item-meta{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:12px;white-space:nowrap;flex-shrink:0}
.reminder-card .item-meta{min-width:64px}
.extra-badge{padding:2px 6px;border-radius:999px;background:rgba(160,118,255,.18);color:#c9b7ff}
.reminder-card:focus-within,.task-card:focus-within{border-color:#78f0ff}
.ack-btn:focus-visible,.display-btn:focus-visible,.pair-actions button:focus-visible,.toolbar-btn:focus-visible,.logout-btn:focus-visible{outline:4px solid #78f0ff;outline-offset:3px}

.key-debug{position:fixed;left:12px;bottom:12px;z-index:99;padding:8px 12px;border-radius:10px;background:#000;border:1px solid #78f0ff;color:#78f0ff;font:14px ui-monospace,Menlo,monospace}

.empty-state{color:var(--muted);font-size:22px;text-align:center;padding:60px 0}

.tasks-wrap{margin-top:24px}
.tasks-wrap h2{font-size:18px;color:#d9e1ff;margin:0 0 10px}
.tasks-grid{display:flex;flex-direction:column;gap:6px}
.task-card{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 14px}
.task-card.bad{border-color:var(--bad)}.task-card.warn{border-color:var(--warn)}.task-card.ok{border-color:var(--ok)}
.task-title{font-size:14px;color:#cad3ee;font-weight:650;max-width:35%;flex-shrink:0;overflow-wrap:anywhere}
.task-value{font-size:17px;font-weight:800;white-space:nowrap}
.task-subtitle{flex:1;min-width:0;color:var(--muted);font-size:13px;line-height:1.3;overflow-wrap:anywhere}

@media (max-width:640px){.board{padding-left:18px;padding-right:18px}.clock-time{font-size:44px}.reminder-card,.task-card{flex-wrap:wrap}.reminder-main{flex-basis:100%}.reminder-title{font-size:18px}.reminder-countdown{font-size:18px;min-width:0}.screen header,.view-toolbar{align-items:flex-start;flex-direction:column}.header-right{flex-wrap:wrap}.view-summary{text-align:left}}