/* ========================================================================== TABIFLOW V2 — Day Card System (Panel B visual pass) -------------------------------------------------------------------------- File: styles/components/day-card.css Scope: All rules scoped to html.tf-v2panel — zero V1 impact. Pass: 1 (CSS foundation — Panel B migration commit) Load: after pin-sheet.css, before shell.css (see planner.html ) Components covered: 1. Day card container (.day-card, .is-active-day, .is-compact-day) 2. Day card toggle header (.day-card-toggle, .is-active, .is-compact) 3. Day card copy area (.day-card-copy, .day-card-title, .day-stop-summary, .day-stop-summary-draft) 4. Day pill (.day-pill, .d1–.d6 via --day-color-dN tokens) 5. Day fraction badge (.day-fraction) 6. Day chevron (.day-card-chevron) 7. Day body (.day-body, .is-active-day-body, .is-desktop-day-body, .has-open-action-strip) 8. Day title row (.day-title-row, .day-title-editor, .day-title-editor-kicker, .day-title-input) 9. Stop item wrapper (.stop-item, .has-open-time, .has-open-actions, .is-draft-stop-item) 10. Stop row + states (.stop-row base + .is-hold-reorder-active, .is-move-selected, .is-notes-open, .is-browse-anchor, .is-browse-neighbor, .is-action-strip-owner) 11. Fogged state (.stop-row.fogged treatment — NOT opacity) 12. Stop row content (.stop-row-content, .stop-row-event-main, .stop-number-badge, .stop-row-pin-address, .stop-row-meta-chips, .stop-row-meta-chip) 13. Stop notes surface (.stop-notes-wrap, .stop-notes-surface, .stop-notes-surface-head, .stop-notes-kicker, .stop-notes-close, .stop-row-delete-helper) 14. Stop marker (.stop-marker base, .fogged, .pinned-d1–.d6) 15. Day footer controls (.day-footer-actions, .day-control-btn, .day-stops-toggle, .day-add-btn, .day-mobile-sticky-add-wrap, .day-move-controls, .day-move-btn) 16. Reduce motion Out-of-scope — owned by other files, untouched here: - .stop-row-action-*, .stop-row-btn, .stop-row-actions-trigger, .stop-row-route-trigger → menus.css - .time-pill, .time-slot, .time-inline-* → future pills.css - .input, .input-sm, .stop-notes-input → future forms.css - .day-compact-times, .v2-guesstimate-badge → menus.css - .mochi-nudge, .mochi-nudge-* → loader.css - .empty-state → modals.css / loader.css - .day-ai-helper-host → out of scope - .travel-arrow → cards.css Cascade interaction with cards.css: day-card.css loads AFTER cards.css (planner.html link order). At equal specificity (html.tf-v2panel prefix = 0,1,1,0), later-loaded rules win. Cards.css base styles are overridden where day-card.css re-declares them. No deletions in cards.css — pure-addition commit. !important policy: Inline styles injected by renderPlanner() template strings (planner-page.js ~line 12015 for .stop-row, ~line 12227 for .day-card-toggle, ~line 12013 for .stop-item margin-bottom) require !important to override. Each entry is annotated "defeats JS inline ". No !important used for properties that V1 styles.css does not also force. Will be audited for removal when JS template is updated to emit clean V2 HTML (future JS pass — separate commit, separate Choby brief). Token register (new tokens added to tokens.css in this commit): --day-color-d1 through --day-color-d6 (aliases of --tf-day-N-* tokens) --tf-fogged-bg (muted/desaturated fog surface — unpinned stop) --tf-fogged-text (semantic mute for fogged label text) --tf-state-hold-bg (hold-to-reorder — warm Mochi accent) --tf-state-move-bg (move-selected — primary-soft) --tf-state-anchor-bg (browse-anchor — focused stop) --tf-state-neighbor-bg (browse-neighbor — nearby stop) Cascade-trap note: No class name contains "menu" or "more" as a root segment. Safe from V1 #planner [class*="menu"] / [class*="more"] blanket rules (styles.css lines 1484–1486 — Choby-audited at Gate 3). ========================================================================== */ /* ── 1. Day card container ───────────────────────────────────────────────── */ html.tf-v2panel .day-card { background: var(--tf-bg-surface); border: 1px solid var(--tf-border-soft); border-radius: var(--tf-radius-md); margin-bottom: var(--tf-space-sm); overflow: hidden; } /* Active (open) day — full border weight */ html.tf-v2panel .day-card.is-active-day { border-color: var(--tf-border-soft); background: var(--tf-bg-surface); /* §23-FIX-CASCADE-2: defeats body .day-card.is-active-day (0,2,1) gradient */ } /* Compact (collapsed) day — lighter border to recede */ html.tf-v2panel .day-card.is-compact-day { border-color: var(--tf-border-line); background: var(--tf-bg-surface); /* §23-FIX-CASCADE-2: defeats body .day-card.is-compact-day (0,2,1) gradient */ } /* ── 2. Day card toggle (header button) ──────────────────────────────────── */ /* * renderPlanner() sets inline styles on .day-card-toggle: width, display, * align-items, justify-content, gap, margin-bottom, padding, border-radius, * border, background, color, cursor, text-align. * All !important entries below defeat those JS inline styles. */ html.tf-v2panel .day-card-toggle { background: var(--tf-bg-elevated) !important; /* defeats JS inline bg */ border: none !important; /* defeats JS inline border */ border-bottom: 1px solid var(--tf-border-line) !important; /* defeats JS inline border shorthand — re-asserts bottom-only divider */ border-radius: 0 !important; /* defeats JS inline border-radius */ padding: var(--tf-space-md) var(--tf-space-lg) !important; /* defeats JS inline padding */ margin-bottom: 0 !important; /* defeats JS inline margin-bottom */ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--tf-space-md); cursor: pointer; text-align: left; color: var(--tf-text-primary); /* §23-FIX-CASCADE: was inherit — defensive explicit token, removes dependency on body color inheritance */ font-family: inherit; -webkit-tap-highlight-color: transparent; transition: background var(--tf-duration-fast) var(--tf-ease); } html.tf-v2panel .day-card-toggle:hover { background: var(--tf-bg-elevated-2) !important; /* defeats JS inline bg */ } html.tf-v2panel .day-card-toggle:focus-visible { outline: none; box-shadow: var(--tf-focus-ring); } /* Active day header — slightly larger tap area */ html.tf-v2panel .day-card-toggle.is-active { padding: 14px var(--tf-space-lg) !important; /* defeats JS inline padding */ } /* §23-FIX-CASCADE-2-RETRY: defeats V1 styles.css L4073-4075 .day-card[data-active-day="true"] .day-card-toggle.is-active (0,4,0+!) — original F3 at 0,3,1+! was outranked. Per [[no_old_looks_principle]]: V1 pale-blue gradient must not bleed into V2 light mode. */ html.tf-v2panel .day-card[data-active-day="true"] .day-card-toggle.is-active { background: var(--tf-bg-elevated) !important; border-color: var(--tf-border-line) !important; } /* Compact day header — receded surface */ html.tf-v2panel .day-card-toggle.is-compact { background: var(--tf-bg-surface) !important; /* defeats JS inline bg */ padding: var(--tf-space-sm) var(--tf-space-md) !important; /* defeats JS inline padding */ } html.tf-v2panel .day-card-toggle.is-compact:hover { background: var(--tf-bg-elevated) !important; /* defeats JS inline bg — hover must match base rule's !important to apply */ } /* ── 3. Day card copy area ───────────────────────────────────────────────── */ html.tf-v2panel .day-card-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; } html.tf-v2panel .day-card-title { font-size: 14px; font-weight: 700; color: var(--tf-text-primary); display: flex; align-items: center; gap: var(--tf-space-sm); flex-wrap: wrap; line-height: 1.3; } /* Active day — slightly larger title */ html.tf-v2panel .day-card-toggle.is-active .day-card-title { font-size: 15px; } html.tf-v2panel .day-stop-summary { font-size: 11px; color: var(--tf-text-muted); line-height: 1.4; } html.tf-v2panel .day-card-toggle.is-active .day-stop-summary { font-size: 12px; } /* Draft slot count — slightly more muted alongside the stop count */ html.tf-v2panel .day-stop-summary-draft { color: var(--tf-text-muted); opacity: 0.72; } /* ── 4. Day pill ─────────────────────────────────────────────────────────── */ /* * Consumes --day-color-d1 through --day-color-d6, added to tokens.css in * this commit. Aliases of --tf-day-N-* so palette shifts touch tokens, not * selectors. White ink is readable on all six saturated day hues. */ html.tf-v2panel .day-pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.01em; padding: 2px 10px; border-radius: var(--tf-radius-full); color: #fff; flex-shrink: 0; line-height: 1.4; } html.tf-v2panel .day-pill.d1 { background: var(--day-color-d1); } html.tf-v2panel .day-pill.d2 { background: var(--day-color-d2); } html.tf-v2panel .day-pill.d3 { background: var(--day-color-d3); } html.tf-v2panel .day-pill.d4 { background: var(--day-color-d4); } html.tf-v2panel .day-pill.d5 { background: var(--day-color-d5); } html.tf-v2panel .day-pill.d6 { background: var(--day-color-d6); } /* ── 5. Day fraction badge ────────────────────────────────────────────────── */ html.tf-v2panel .day-fraction { font-size: 11px; color: var(--tf-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; } /* ── 6. Day chevron ──────────────────────────────────────────────────────── */ html.tf-v2panel .day-card-chevron { color: var(--tf-text-muted); font-size: 18px; line-height: 1; flex-shrink: 0; opacity: 0.7; } /* ── 7. Day body ─────────────────────────────────────────────────────────── */ html.tf-v2panel .day-body { background: var(--tf-bg-surface); padding: var(--tf-space-sm) 0 var(--tf-space-md); } html.tf-v2panel .day-body.is-active-day-body { padding-top: var(--tf-space-md); } /* Desktop focus day — overflow visible so stop-action panel positions freely */ html.tf-v2panel .day-body.is-desktop-day-body { overflow: visible; } /* Action strip open — keep overflow visible for floating action list */ html.tf-v2panel .day-body.has-open-action-strip { overflow: visible; } /* ── 8. Day title row (inline edit inputs) ───────────────────────────────── */ html.tf-v2panel .day-title-row { display: flex; gap: var(--tf-space-md); padding: 0 var(--tf-space-lg); margin-bottom: var(--tf-space-md); flex-wrap: wrap; } html.tf-v2panel .day-title-editor { display: flex; flex: 2; min-width: 220px; flex-direction: column; gap: var(--tf-space-xs); } html.tf-v2panel .day-title-editor-kicker { font-size: 11px; color: var(--tf-text-muted); font-weight: 500; } html.tf-v2panel .day-title-input { background: var(--tf-bg-elevated); border: 1px solid var(--tf-border-soft); border-radius: var(--tf-radius-sm); color: var(--tf-text-primary); font-size: 14px; font-family: inherit; padding: var(--tf-space-sm) var(--tf-space-md); width: 100%; } html.tf-v2panel .day-title-input:focus { outline: none; border-color: var(--tf-primary); box-shadow: var(--tf-focus-ring); } /* ── 9. Stop item wrapper ─────────────────────────────────────────────────── */ /* * renderPlanner() injects margin-bottom:16px as inline style on .stop-item * (template string ~line 12013). */ html.tf-v2panel .stop-item { margin-bottom: 0 !important; /* defeats JS inline margin-bottom:16px */ position: relative; } /* Action strip open — overflow visible so floating strip renders outside */ html.tf-v2panel .stop-item.has-open-actions { overflow: visible; } /* Draft stop: .is-draft-row on the inner .stop-row handles opacity (cards.css). No additional opacity here — compounding would make drafts unreadable. */ /* ── 10. Stop row + full state palette ───────────────────────────────────── */ /* * renderPlanner() sets inline styles on .stop-row: display, gap, align-items, * padding, border-radius, background (~line 12015). * !important entries below defeat those JS inline styles. * * State-class surfaces: fresh V2 palette — NOT V1 hues. * Tokens: --tf-state-hold-bg, --tf-state-move-bg, --tf-state-anchor-bg, * --tf-state-neighbor-bg — added to tokens.css in this commit. * * CASCADE-FIX (Panel B Gate 7, 2026-05-25): * All state-class rules below carry a .day-body parent prefix. This bumps * specificity from (0,0,3,1) to (0,0,4,1), which defeats: * - The unknown V1/cards.css rule masking .is-move-selected alone * (Gate 7 Fix-list #1 — root cause unverified; pragmatic bump) * - V1 4-class chains affecting .is-draft-row + state combinations * (Gate 7 Fix-list #2 — e.g. .stop-item.is-draft-stop-item * .stop-row.is-draft-row at styles.css ~line 4224) * DOM dependency: assumes .stop-row is a descendant of .day-body. * renderPlanner() always emits this structure — verified pre-patch. */ html.tf-v2panel .stop-row { display: flex !important; /* defeats JS inline display */ align-items: center !important; /* defeats JS inline align-items */ gap: var(--tf-space-sm) !important; /* defeats JS inline gap:10px */ padding: var(--tf-space-md) var(--tf-space-lg) !important; /* defeats JS inline padding */ border-radius: 0 !important; /* defeats JS inline border-radius */ background: transparent !important; /* defeats JS inline background */ border-bottom: 1px solid var(--tf-border-line); cursor: pointer; transition: background var(--tf-duration-fast) var(--tf-ease); -webkit-tap-highlight-color: transparent; } html.tf-v2panel .stop-row:hover { background: var(--tf-bg-elevated) !important; /* defeats base .stop-row transparent at L351 */ } /* Draft stop row — dimmed but not fogged; plain dim approach for placeholder slots */ html.tf-v2panel .stop-row.is-draft-row { opacity: 0.55; } /* Hold-to-reorder — warm Mochi-gold accent: "you are actively moving this" */ html.tf-v2panel .day-body .stop-row.is-hold-reorder-active { background: var(--tf-state-hold-bg) !important; /* defeats base .stop-row transparent at L351 */ border-bottom-color: transparent; } /* Move selected — primary-soft: "this stop is queued for move" */ html.tf-v2panel .day-body .stop-row.is-move-selected { background: var(--tf-state-move-bg) !important; /* defeats base .stop-row transparent at L351 */ border-bottom-color: rgba(185, 182, 240, 0.18); } /* Notes open — elevated surface anchors the notes card visually below */ html.tf-v2panel .day-body .stop-row.is-notes-open { background: var(--tf-bg-elevated) !important; /* defeats base .stop-row transparent at L351 */ border-bottom-color: transparent; } /* Browse anchor — focused stop in reduced-window view */ html.tf-v2panel .day-body .stop-row.is-browse-anchor { background: var(--tf-state-anchor-bg) !important; /* defeats base .stop-row transparent at L351 */ } /* Browse neighbor — nearby stops in reduced-window view, slightly receded */ html.tf-v2panel .day-body .stop-row.is-browse-neighbor { background: var(--tf-state-neighbor-bg) !important; /* defeats base .stop-row transparent at L351 */ opacity: 0.82; } /* Action strip owner — row whose ⋮ menu is currently open */ html.tf-v2panel .day-body .stop-row.is-action-strip-owner { background: var(--tf-bg-elevated) !important; /* defeats base .stop-row transparent at L351 */ } /* ── 11. Fogged state — unpinned stop ────────────────────────────────────── */ /* * Owner decision lock (2026-05-25): * NOT reduced-opacity — reads as "disabled" * NOT dotted border — reads as "selected for action" * CHOSEN: token-defined muted/desaturated surface via --tf-fogged-bg * * Overrides cards.css rule `.stop-row.fogged { opacity: 0.4; }` — * day-card.css loads later so opacity is cancelled by the `opacity: 1` rule. * Stop marker fogged treatment (dashed circle) is in §14 (stop marker). */ html.tf-v2panel .day-body .stop-row.fogged { background: var(--tf-fogged-bg) !important; /* overrides cards.css opacity:0.4 approach */ opacity: 1; /* explicit cancel of any inherited opacity */ } html.tf-v2panel .day-body .stop-row.fogged:hover { background: var(--tf-bg-elevated) !important; /* defeats base .stop-row transparent at L351 */ } /* §lifecycle-commit-1: locked stop — 2px primary left accent signals location committed. Reads equivalently in dark (--tf-primary: #b9b6f0) and light (#1a1730) per [[no_old_looks_principle]]. No !important needed — no JS inline border-left to defeat. */ html.tf-v2panel .day-body .stop-row.is-location-locked { border-left: 2px solid var(--tf-primary); } /* Fogged label — one notch muted; still legible, not disabled-looking */ html.tf-v2panel .stop-row.fogged .stop-label { color: var(--tf-fogged-text); } /* ── 12. Stop row content areas ──────────────────────────────────────────── */ html.tf-v2panel .stop-row-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Mobile: wraps stop-number-badge + text input on one row */ html.tf-v2panel .stop-row-event-main { display: flex; align-items: center; gap: var(--tf-space-xs); min-width: 0; } /* Sequential stop number — mobile only. * Issue 1 — tappable: opens trip map + fly-to-pin + hop. */ html.tf-v2panel .stop-number-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; background: var(--tf-bg-elevated-2); color: var(--tf-text-muted); border-radius: var(--tf-radius-sm); font-size: 10px; font-weight: 700; flex-shrink: 0; line-height: 1; padding: 0 4px; font-variant-numeric: tabular-nums; cursor: pointer; } /* Compact location status line below stop name */ html.tf-v2panel .stop-row-pin-address { font-size: 11px; color: var(--tf-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Edit E — state-driven geo indicator. Locked stops show "🔒 lat, lng" * in tabular-numerals for readability and slightly stronger color tone * (secondary, not muted) to signal "trust this — these are your saved coords". */ html.tf-v2panel .stop-row-geo-state.is-locked { color: var(--tf-text-secondary); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* Tag/category chips container */ html.tf-v2panel .stop-row-meta-chips { display: flex; flex-wrap: wrap; gap: var(--tf-space-xs); margin-top: var(--tf-space-xs); } /* Individual meta chip — tappable tag indicator */ html.tf-v2panel .stop-row-meta-chip { display: inline-flex; align-items: center; background: var(--tf-bg-elevated); border: 1px solid var(--tf-border-soft); border-radius: var(--tf-radius-full); color: var(--tf-text-secondary); font-size: 11px; font-family: inherit; padding: 2px var(--tf-space-sm); cursor: pointer; min-height: 22px; line-height: 1.4; transition: background var(--tf-duration-fast) var(--tf-ease); } html.tf-v2panel .stop-row-meta-chip:hover { background: var(--tf-bg-elevated-2); } html.tf-v2panel .stop-row-meta-chip:focus-visible { outline: none; box-shadow: var(--tf-focus-ring); border-radius: var(--tf-radius-full); } /* Issue 2 — 🔒 lock chip: distinct appearance + hold-press scale feedback */ html.tf-v2panel .stop-row-lock-chip { color: var(--tf-accent, #7F77DD); border-color: color-mix(in srgb, var(--tf-accent, #7F77DD) 30%, transparent); user-select: none; -webkit-user-select: none; touch-action: none; /* prevent scroll hijack during hold */ } html.tf-v2panel .stop-row-lock-chip:active { transform: scale(0.92); transition: transform 80ms ease; } /* Inline unlock-confirm strip (rendered instead of the chip during hold) */ html.tf-v2panel .stop-row-lock-confirm { display: inline-flex; align-items: center; gap: var(--tf-space-xs); animation: tf-lock-confirm-in 120ms ease both; } @keyframes tf-lock-confirm-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } html.tf-v2panel .stop-row-lock-confirm-label { font-size: 11px; color: var(--tf-text-secondary); white-space: nowrap; } html.tf-v2panel .stop-row-lock-cancel-btn { color: var(--tf-text-secondary); } html.tf-v2panel .stop-row-lock-unlock-btn { color: var(--tf-accent, #7F77DD); border-color: color-mix(in srgb, var(--tf-accent, #7F77DD) 40%, transparent); font-weight: 500; } /* ── 13. Stop notes surface ──────────────────────────────────────────────── */ /* * .stop-notes-wrap is shown/hidden by renderPlanner() inline style (display:block|none). * .stop-notes-input (.input.input-sm textarea) is NOT styled here — future forms.css. * V1 form styles apply to the textarea for this pass. */ html.tf-v2panel .stop-notes-wrap { padding: 0 var(--tf-space-lg) var(--tf-space-sm); } html.tf-v2panel .stop-notes-surface { background: var(--tf-bg-elevated); border: 1px solid var(--tf-border-soft); border-radius: var(--tf-radius-md); padding: var(--tf-space-md); display: flex; flex-direction: column; gap: var(--tf-space-sm); } html.tf-v2panel .stop-notes-surface-head { display: flex; align-items: center; justify-content: space-between; gap: var(--tf-space-sm); } html.tf-v2panel .stop-notes-kicker { font-size: 12px; color: var(--tf-text-secondary); font-weight: 500; } /* "Done" close button — primary-colored ghost */ html.tf-v2panel .stop-notes-close { font-size: 12px; color: var(--tf-primary); font-weight: 600; padding: var(--tf-space-xs) var(--tf-space-sm); min-height: var(--tf-tap-min); min-width: var(--tf-tap-min); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; font-family: inherit; cursor: pointer; border-radius: var(--tf-radius-sm); } html.tf-v2panel .stop-notes-close:hover { background: var(--tf-primary-soft); } html.tf-v2panel .stop-notes-close:focus-visible { outline: none; box-shadow: var(--tf-focus-ring); } /* Delete guard — inline warning shown alongside action strip */ html.tf-v2panel .stop-row-delete-helper { font-size: 11px; color: var(--tf-danger); padding: var(--tf-space-xs) 0; white-space: nowrap; line-height: 1.4; } /* ── 14. Stop marker (pinned + fogged) ───────────────────────────────────── */ /* * Base: neutral elevated badge (unpinned, non-fogged stop). * .pinned-dN: fills with day color alias (same tokens as .day-pill.dN). * .fogged: dashed circle — primary visual signal for "not yet pinned". * White ink for pinned-dN: all six day hues are saturated, #fff is readable. */ html.tf-v2panel .stop-marker { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; background: var(--tf-bg-elevated-2); color: var(--tf-text-secondary); line-height: 1; } html.tf-v2panel .stop-marker.pinned-d1 { background: var(--day-color-d1); color: #fff; } html.tf-v2panel .stop-marker.pinned-d2 { background: var(--day-color-d2); color: #fff; } html.tf-v2panel .stop-marker.pinned-d3 { background: var(--day-color-d3); color: #fff; } html.tf-v2panel .stop-marker.pinned-d4 { background: var(--day-color-d4); color: #fff; } html.tf-v2panel .stop-marker.pinned-d5 { background: var(--day-color-d5); color: #fff; } html.tf-v2panel .stop-marker.pinned-d6 { background: var(--day-color-d6); color: #fff; } html.tf-v2panel .stop-marker.fogged { background: transparent; color: var(--tf-text-muted); border: 1.5px dashed var(--tf-text-muted); } /* ── 15. Day footer controls ─────────────────────────────────────────────── */ html.tf-v2panel .day-footer-actions { display: flex; gap: var(--tf-space-sm); flex-wrap: wrap; align-items: center; padding: 0 var(--tf-space-lg); margin-top: var(--tf-space-sm); } /* Base for all day-level control buttons */ html.tf-v2panel .day-control-btn { font-size: 13px; color: var(--tf-text-secondary); min-height: var(--tf-tap-min); padding: var(--tf-space-xs) var(--tf-space-md); border-radius: var(--tf-radius-sm); cursor: pointer; font-family: inherit; background: transparent; border: 1px solid var(--tf-border-soft); transition: background var(--tf-duration-fast) var(--tf-ease); } html.tf-v2panel .day-control-btn:hover { background: var(--tf-bg-elevated); } html.tf-v2panel .day-control-btn:focus-visible { outline: none; box-shadow: var(--tf-focus-ring); } html.tf-v2panel .day-control-btn:disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; } /* Add stop — dashed ghost invites action */ html.tf-v2panel .day-add-btn { color: var(--tf-text-muted); border-style: dashed; border-radius: var(--tf-radius-md); } html.tf-v2panel .day-add-btn:hover { color: var(--tf-primary); border-color: var(--tf-primary); background: var(--tf-primary-soft); } /* Browse show-more / show-less — primary-tinted to signal interactivity */ html.tf-v2panel .day-stops-toggle { color: var(--tf-primary); border-color: rgba(185, 182, 240, 0.28); } html.tf-v2panel .day-stops-toggle:hover { background: var(--tf-primary-soft); border-color: var(--tf-primary); } html.tf-v2panel .day-stops-toggle:focus-visible { outline: none; box-shadow: var(--tf-focus-ring); } /* Mobile sticky add — full-width row pinned above stop list */ html.tf-v2panel .day-mobile-sticky-add-wrap { padding: var(--tf-space-sm) var(--tf-space-lg) 0; } html.tf-v2panel .day-mobile-sticky-add { width: 100%; } /* Move up/down controls container */ html.tf-v2panel .day-move-controls { display: flex; gap: var(--tf-space-xs); align-items: center; margin-left: auto; } /* Individual arrow move button */ html.tf-v2panel .day-move-btn { font-size: 16px; min-height: var(--tf-tap-min); min-width: var(--tf-tap-min); padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tf-radius-sm); } /* ── 16. Reduce motion — WCAG 2.1 SC 2.3.3 ──────────────────────────────── */ /* * Disables transitions on interactive day-card elements for users who have * OS-level "Reduce Motion" enabled. Only V2 transitions introduced in * Panel B — no V1 rules touched. */ @media (prefers-reduced-motion: reduce) { html.tf-v2panel .day-card-toggle, html.tf-v2panel .stop-row, html.tf-v2panel .stop-row-meta-chip, html.tf-v2panel .day-control-btn, html.tf-v2panel .day-add-btn, html.tf-v2panel .stop-notes-close { transition: none; } }