/* Class event feed (#51): phone "This week" panel and the TV tomorrow strip. */
.cf-panel { margin: 16px 0; padding: 14px; background: var(--bg-card); border: 1px solid var(--accent-dim); border-radius: 8px; }
.cf-panel h2 { margin: 0 0 8px; font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.cf-panel h3 { margin: 10px 0 4px; font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.1em; }
.cf-tomorrow { border-left: 3px solid var(--accent); padding-left: 10px; margin-bottom: 8px; }
.cf-list { list-style: none; margin: 0; padding: 0; }
.cf-event { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--grid-line); }
.cf-kind { font-size: 11px; text-transform: uppercase; color: var(--accent); min-width: 56px; }
.cf-kind-cancelled .cf-kind { color: var(--status-red); }
.cf-title { font-weight: 600; }
.cf-child, .cf-detail { color: var(--text-secondary); font-size: 13px; }
.cf-detail { flex-basis: 100%; }
.cf-clear { margin: 4px 0; color: var(--text-secondary); }
.cf-classes { margin-top: 12px; font-size: 13px; color: var(--text-secondary); }
.cf-class { padding: 4px 0; }
.cf-member { margin-right: 8px; white-space: nowrap; }
.cf-leave { background: none; border: 0; color: var(--text-secondary); text-decoration: underline; font: inherit; padding: 4px; }
.cf-spellings { color: var(--accent); margin-left: 6px; }
.cf-join { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cf-join select, .cf-join input { flex: 1 1 120px; min-height: 40px; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--accent-dim); border-radius: 6px; padding: 0 10px; font: inherit; }
.cf-join input { text-transform: uppercase; }
.cf-join button { min-height: 40px; }
.cf-join-error { flex-basis: 100%; margin: 0; color: var(--status-red); font-size: 13px; }

/* TV: out of the layout flow entirely, so the routine columns can never move. Tasks screen only. */
.cf-tv { display: none; position: fixed; left: 1.5vw; right: 1.5vw; bottom: 0.6vh; z-index: 5; pointer-events: none;
    padding: 0.4vh 1vw; background: rgba(10, 15, 13, 0.85); border-top: 1px solid var(--accent-dim);
    font-size: var(--cf-tv-size, 1.9vh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
#screen-tasks.active ~ .cf-tv:not([hidden]) { display: block; }
.cf-tv-label { color: var(--accent); letter-spacing: 0.15em; margin-right: 1.2vw; }
.cf-tv-item { margin-right: 2vw; }
.cf-tv-item b { font-weight: 600; margin-right: 0.5vw; }
.tv-container[data-density="compact"] .cf-tv { --cf-tv-size: 1.5vh; }
.tv-container[data-density="normal"] .cf-tv { --cf-tv-size: 1.9vh; }
.tv-container[data-density="comfortable"] .cf-tv { --cf-tv-size: 2.3vh; }